WEB DESIGN WORKSHOP// HTML and CSS

-John Duckett,  Html And CSS Design Websites. Good Book for web design.

Not all of this code is needed, see below.*

Line 1: States that everything will be in HTML language
Line 2: States the Head Part of the website is being edited
Line 5: End of head

The Head decides things that happen in the website but is not visible at all, helps the website function.

^  *This is the most simple website you can have.


You need to create a folder with all of the files that are in the website together. A URL gives you access to one folder only. You can have as many subfolders as you want within this folder.

--------------------------------------------------------------------------------------------------------------------------

 Using this dropdown you can set up where the website will receive this information from. You can also name the website.

I can now save the file. You have to save the 'home' page as index.html. This is universal language and very important.

Once the file is saved you can preview the page by using this icon.

Unfortunately the site is still labeled as 'untitled document'
Edit the code to change the website...

Save and preview after ever minor change. Check so you dont loose hours of work if there is a mistake.

Editing in Design mode and saving will add code in the Code view. HTML is messy like this and will use massive amount of code. We are going to use CSS from now on. 


Open a new document... Select CSS then CREATE...

This opens a new document, in CSS, you can only see code view, HMTL uses CSS to linking this to a html document will allow you to view the site.

/* note */ is how you write a note that will not appear on the site but only in the code.

Type: body{ to add body type to the page.

Choosing Font Family for example will allow you to choose the font family.

Close the bracket to finish the line. Also add a semi colon to the end of the line, it has not been done in the image, which is incorrect.

Save the document, a good name is Stylesheet.

Going back to HTML page we can attach the CSS stylesheet but clicking the attach file icon.

Then click browse and select the stylesheet from your folder.

The  stylesheet will now appear in the HTML code.

We are how working out the wireframe for the website, do this in CSS for a standard 'template'.
Type 'container {'  container being a name we choose to handle the code. Then specify dimensions and colour in the code. Add a hashtag to make sure the 'container' is identifiable to the HTML document.

Pasting the name of the container into HTML will link the code from CSS to the HTML file and therefore appear on the website. Use <div id=   to select the container (which will only appear if hashtag is used in CSS).

This current code will draw a grey box 1024x768px. This will, however, leave a 10px gap around the image. This can look rubbish. This will be covered later, and can only be achieved in CSS.

We care going to add a navigation bar to the document. First create one in CSS.
Then add to HTML, as we want it to appear within the larger grey box it mush appear within the code in HTML...  here I have called it "Navigation".

Now we add columns with the same procedure:

Our website has content now but its all over the place, we have to position everything:














This will align the main box perfectly to the top left. So we will no longer have big 10px white boundaries. The absolute position means makes sure the box will stay fixed.

We want the nav bar to float over the page so a relative position code is used.
Using relative we align left.

This will however stack all of the columns on top of each other and around the nav bar. To fix this we align the Nav bar using our plans. Edit the left and right margins so the nav bar sits in the middle.

Our website now looks like this:

By using CSS and HTML the HTML remains very cut down and the process is made much easier. All the layout coding is finished now.