Introduction to coding
Coding and web design is something very new to me, while reading through the Learn HTML & CSS book I mentioned previously in the blog it was helpful to do live coding through a workshop with Simon to put a few basics of a website structure into practice.
We first learnt the basics of how to setup the documents and files that hold all the content of the website and what dreamweaver communicates with for this content, its important to always use lowercase characters and no spaces in naming folders.
The testrootfolder is the container of all the content and its important to keep the folder in the same location while designing the website as changing the location within different drivers on your computer confuses things.
An example of a sub folder to hold relevant content in, in this case "images"
A quick run down on how to start setting up a website in dreamweaver.
Here we chose the root folder for the local site folder, the main source for holding the content of the site.
We are starting out with basic HTML coding so the page type starting layout will be HTML.
This is the index page, default language for the homepage.
Dreamweaver has the option of showing live coding output, visualising the code your writing into its physical output but you can also preview it in a web browser like this.
In between these <body> </body> tags is the majority content of the site.
To bring CSS in (The aesthetic aspect of web design allowing colour change, font change etc) we open up another document in CSS format to create a style sheet.
Again connecting it to our rootfolder.
In this case the CSS style sheet will control the aesthetics of the first webpage I made, for now I have just altered the font choice, as mentioned previous in the use of web safe fonts its important to consider that the end user may not have that font installed on there computer. The browser they use only displays what fonts they have, so alternatives need to be input for the web browser to chose, if these fonts are not available the default displayed will be Times New roman, so selecting the font classification category is one way to get around this.
If you want helvetica chose alternative fonts or just input sans serif font classification into the code.
Attach the style sheet to the pages I have made.
Altering the type size and font choice through CSS.
Adding a background colour using web safe hex colour codes. the size of the colour is the resolution of the website in this case 1024 x 768px. Everything is flush to the top left corner at the moment so the next stage is to alter alignment and positioning.
Following all these stages within the container tag on the style sheet allowed me to centre the main body of the website regardless of the browser window size and positioning. A very handy coding feature to learn for constant positive user experience.
Final outcome, very ugly and basic but its all a start in learning basic aspects of coding.
Important lines of code I used
Rather than explaining each line of code when doing it this little summary well help me look back and understand what the specific codes I used do in more detail.
/ closes a tag
<html> open
</html> close
Allows the browser to read what code is been used within the whole container between these tags.
<head> open
</head> close
In between these tags are for elements that don't appear on the browsers visual output. Its use is for functions of the page structure like CSS and the input of tags for Search Engine Optimisation
<title> open
</title> close
This tag is required in all HTML documents and defines the title of that document, it aids the browser by giving the browser toolbar a title for that webpage.
Also visualises a title for when the page is added to bookmarks and favourites.
Shows a title for the page in search engine searches.
<body> open
</body> close
Contains all the elements of a websites HTML document, things like type, hyperlinks & images.
<head> open
</head> close
Is a container for <head> elements and must include a title for the document. Things like scripts, styles, meta information and links can be placed between these tags.
<div> open
</div> close
In HTML this tag is used to divide the html document up into divisions.
In CSS its used to group block elements to format them in CSS outcomes.
<link> open
</link> close
A link is used to link between another document page or an external resource.
Its also used to link external CSS style sheets to document pages.
/* */
An interesting feature allowing me to write notes and reminders within the code, they don't show up anywhere in the browser outcome there purely just there to help me if I need to write anything useful to help me code the site.
#container
Is a selector within a <div> block, it is used for the positioning of a content area (header, footer, main content area)
No comments:
Post a Comment