First of all you need to download notepad++.
Ok, now set in the first line DOCTYPE, so the browser nows whats the content about..
After this part you should open html tag <html> and close it </html>. Between this two tags you should place everything that one site shoul consist of.
Start with the head tag <head> and than colose it </head>.
Here you should put some information that are important for the browsers, and are not visible. Remember head tag is not tag for header, dont get confused by this..
So here put the title tag and here we write the title of our website..
Than you should put meta tag for the content type and set it to be text/html.
Also you should link your style CSS file with this html document, later when we write CSS, the changes will directly affect our html document.
Here is the preview of these tags:
After these steps we should take a look at our psd design.
We can see here that there is a wrapper in which is everything contained..
So we set the wrapper tag.
We can now see that our site is divided to a header section, and body section.
In header section we have logo, navigation and tagline. For the logo we will just add anchor which we will call in CSS later, and set background, position, width, height..
Navigation is a list, but we can see in our design that there are some icons next to home and contact.
ul code stands for unordered list, li code stands for list.
We will insert these images here in html document.
Also, we need to set an anchor for the tagline.
Now we close header tag. It is very good for the clearance of your code to put the comment tag after every closed tag. In this case we will put the comment "End header tag".
This should be it, the header is complete.
In the design we can see that in the main section of the website, there are left and right sections.
We will call them primary and secondary section.
In the primary section we have three posts, which have the same styling.
So instead of div, we will call them class. The main and only difference is that div stands for unique element, and div can be called in CSS only once. Class item stands for similar elements which can be called as many times as there are elements on the site.
Inside the class tag we will set tags for all elements: picture, title of the post, meta tag, text and read more tag.
Picture will be imported via the img tag, tag for this title will be h2, meta again as a class, text with p code, and read more as a link.
Repeat this step for post two and three.
In the secondary section, we have some sidebar boxes which will have class tags aslo.
We will set here tags for image, title and arrows.
And thats it, just save this file as index.html in the root of your site folder.
See the next step creating CSS file.
Ok, now set in the first line DOCTYPE, so the browser nows whats the content about..
After this part you should open html tag <html> and close it </html>. Between this two tags you should place everything that one site shoul consist of.
Start with the head tag <head> and than colose it </head>.
Here you should put some information that are important for the browsers, and are not visible. Remember head tag is not tag for header, dont get confused by this..
So here put the title tag and here we write the title of our website..
Than you should put meta tag for the content type and set it to be text/html.
Also you should link your style CSS file with this html document, later when we write CSS, the changes will directly affect our html document.
Here is the preview of these tags:
 |
| head tag for html |
We can see here that there is a wrapper in which is everything contained..
 |
| Highlighted area is a wrapper |
We can now see that our site is divided to a header section, and body section.
In header section we have logo, navigation and tagline. For the logo we will just add anchor which we will call in CSS later, and set background, position, width, height..
Navigation is a list, but we can see in our design that there are some icons next to home and contact.
ul code stands for unordered list, li code stands for list.
We will insert these images here in html document.
Also, we need to set an anchor for the tagline.
Now we close header tag. It is very good for the clearance of your code to put the comment tag after every closed tag. In this case we will put the comment "End header tag".
This should be it, the header is complete.
 |
| Header section |
We will call them primary and secondary section.
In the primary section we have three posts, which have the same styling.
So instead of div, we will call them class. The main and only difference is that div stands for unique element, and div can be called in CSS only once. Class item stands for similar elements which can be called as many times as there are elements on the site.
Inside the class tag we will set tags for all elements: picture, title of the post, meta tag, text and read more tag.
Picture will be imported via the img tag, tag for this title will be h2, meta again as a class, text with p code, and read more as a link.
 |
| primary section |
Repeat this step for post two and three.
In the secondary section, we have some sidebar boxes which will have class tags aslo.
We will set here tags for image, title and arrows.
 |
| secondary section |
See the next step creating CSS file.
No comments:
Post a Comment