+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: Structure of a HTML document [#3] (/Thread-Structure-of-a-HTML-document-3)
Structure of a HTML document [#3] - Prince - 03-02-2013
Hello,
This is my third tutorial regarding web development, in this tutorial we will be covering the following topic:
The Structure of a HTML document
By structuring your HTML document it allows you to understand where your text needs to go, and where your images need to go.
So there are 2 main sections to an ordinary HTML document, these are:
- Head
- Body
Both of these sections have there own tags, which are: <head> & <body>
So what are they both for?
The <head> tag is where all of the background stuff will go, such as your styles, and your page title displayed on the window of your web browser. You also put your meta information which is how a search engine finds your webpage.
The <body> tag is where the actual content of your webpage goes within, so this is all of the writing, the images, the boxes, containers. Everything to do with the content of the actual web page goes within the <body> tag.
By understanding the difference between them, and what goes where, it will make your life a lot easier when we come to actual designing the website, with styles and then adding the content to the website.
Below is an image with a slight breakdown of the area's I've also shown you in split mode so that you can see the content.
WARNING LARGE IMAGE
![[Image: 134MW55.png]](http://i.imgur.com/134MW55.png)
Note: The image is for educational purposes, therefore I never updated the content so I could put some quick information on the coding side.
On the left of the image you can see the code, and on the right, you can see what it would look like on a webpage. As you can see, nothing within the <head> tag is displayed on the actual page (Please make sure you read the note so you don't misunderstand).
I hope this tutorial has helped you even if it just refreshes your memory.
This is my third tutorial regarding web development, in this tutorial we will be covering the following topic:
The Structure of a HTML document
By structuring your HTML document it allows you to understand where your text needs to go, and where your images need to go.
So there are 2 main sections to an ordinary HTML document, these are:
- Head
- Body
Both of these sections have there own tags, which are: <head> & <body>
So what are they both for?
The <head> tag is where all of the background stuff will go, such as your styles, and your page title displayed on the window of your web browser. You also put your meta information which is how a search engine finds your webpage.
The <body> tag is where the actual content of your webpage goes within, so this is all of the writing, the images, the boxes, containers. Everything to do with the content of the actual web page goes within the <body> tag.
By understanding the difference between them, and what goes where, it will make your life a lot easier when we come to actual designing the website, with styles and then adding the content to the website.
Below is an image with a slight breakdown of the area's I've also shown you in split mode so that you can see the content.
WARNING LARGE IMAGE
Spoiler:
Note: The image is for educational purposes, therefore I never updated the content so I could put some quick information on the coding side.
On the left of the image you can see the code, and on the right, you can see what it would look like on a webpage. As you can see, nothing within the <head> tag is displayed on the actual page (Please make sure you read the note so you don't misunderstand).
I hope this tutorial has helped you even if it just refreshes your memory.
RE: Structure of a HTML document [#3] - Alex - 03-02-2013
Nice detailed guide, keep them coming
RE: Structure of a HTML document [#3] - Flashdrive - 03-02-2013
Cool thread I have a question.
What does the META INFO for the browser do exactly?
RE: Structure of a HTML document [#3] - Spire_CnC - 03-02-2013
Nice small tut. Very well explained. Good job Specialist!
Off-topic: Do you still want me to work on that CSS for
you?
RE: Structure of a HTML document [#3] - Prince - 03-02-2013
(03-02-2013, 05:36 PM)Flashdrive Wrote: Cool thread I have a question.
What does the META INFO for the browser do exactly?
http://en.wikipedia.org/wiki/Meta_element
It's basically there so that when you search via a search engine, the description you put within the tags will show up, as will the title and the tags. A more in depth description can be seen via the link I showed you.
RE: Structure of a HTML document [#3] - Flashdrive - 03-02-2013
(03-02-2013, 05:39 PM)The Specialist Wrote: http://en.wikipedia.org/wiki/Meta_element
It's basically there so that when you search via a search engine, the description you put within the tags will show up, as will the title and the tags. A more in depth description can be seen via the link I showed you.
Alright thanks for the info and fast reply i'll be sure to give the link a read-over.
RE: Structure of a HTML document [#3] - Junii - 03-02-2013
Good guide. Might help all the beginners.
You could also add the footer. example, very simple.
PHP Code:
<html>
<footer>
<div align="center">
<font face="Arial" style="font-size: 12px" color="#0080FF">[ <a href="terms.php">Terms of Service</a> | <a href="faq.php">F.A.Q</a> | <a href="support.php">Support</a> ]</font>
</div>
<div align="center"> Copyright
<a href="http://www.creativegaming.net/index.php">Creativegaming</a> | 2013
</div>
</footer>
</html>
RE: Structure of a HTML document [#3] - Google - 03-02-2013
really nice Tutorial.
I knew you will do it cool
RE: Structure of a HTML document [#3] - Prince - 03-02-2013
(03-02-2013, 05:51 PM)Junii Wrote: Good guide. Might help all the beginners.
You could also add the footer. example, very simple.
PHP Code:<html> <footer> <div align="center"> <font face="Arial" style="font-size: 13px" color="#0080FF">[ <a href="terms.php">Terms of Service</a> | <a href="faq.php">F.A.Q</a> | <a href="support.php">Support</a> ]</font> </div> <div align="center"> Copyright <a href="http://www.creativegaming.net/index.php">Creativegaming</a> | 2013 </div> </footer> </html>
I would just use a Div ID for a footer, as I use a wrapper when I do my designs, so everything stays within that wrapper.
There's nothing wrong with using the <footer> tag but personally I don't.
RE: Structure of a HTML document [#3] - Junii - 03-02-2013
(03-02-2013, 05:54 PM)The Specialist Wrote: I would just use a Div ID for a footer, as I use a wrapper when I do my designs, so everything stays within that wrapper.
Hmm. You could. Good guide anyways.
// off topic.
Link to some of your works? PM