Saturday 10 November 2012

DESIGNING FOR WEB//HTML/CSS MAC SUITE SESSION//OUGD504

In todays session we learnt how to set up the basics for a website, and learn specific coding for things through HTML and CSS:

You have three options on the panels below, these are, 'code, split, design' 
When clicking on 'code' ten lines of coded text will appear 

Root folder called 'website' - sub folder called images - all lower case  (all images are going to be jpegs)

site > new site 
You then have the option to change the site name from 'Unnamed Site 2' to a preferred name, in this case 'test website.'
You then choose your root folder title, in this case 'images'
This should then work like this, having the folder as 'website' and the root folder as 'image'
Site setup for test website:
You must save homepage as 'index' as it is universal in all languages:
Then to look at what has been put on the web so far you can preview on the small globe icon which lists various forms of viewing in safari, firefox etc.
You can then see in the URL bar that the link includes the word 'index'
To change the name of the website on the top grey bit of the bar as to make it look more professional, type in the name between <title>put title in here</title>
delete first line - move second line up to first line and dealer everything apart from <html>
means open head <>
closed head</>

Anything in the head effects how the website functions
Meta tags - most common use of meta tags is for key words, something thats searchable via a search engine.  Anything you put between open body and closed body is what is visible on the website.
Final tag: /html - end of website 

The title is then changed to the chosen name:
Where body text opens, type something to see whether it can be previewed in safari:
If you look on the 'design' panel you can see the preview:
Click 'file' and new, a window will appear, click HTML out of all the options:


Div - division, when you create a layout for the web it is cut up into sections/divisions. 
# container/ wrapper

No comments:

Post a Comment