Here is what the page looks like: (warning, it's pretty cool, I hope that you can handle it!)
Woah. Cool right?
Now being a bit more serious, have a look between the two images and check to see what from the HTML "code" has been put where on the image.
Notice that what appears on the page itself is contained inside the <body></body> tags, whilst the title which is outside of this is inside the <head></head>
Also notice that ALL of the content is inside of the <html></html> tags.
Task: Create a basic web page about pets. Use the example above to help you.
Now being a bit more serious, have a look between the two images and check to see what from the HTML "code" has been put where on the image.
Notice that what appears on the page itself is contained inside the <body></body> tags, whilst the title which is outside of this is inside the <head></head>
Also notice that ALL of the content is inside of the <html></html> tags.
Task: Create a basic web page about pets. Use the example above to help you.
Arranging HTML correctly
It is important for us to arrange our HTML correctly for a few reasons. First of all when it is arranged correctly it is tidier and easier for us to read. Secondly, web pages are specific about how they want to see HTML and will sometimes break or just display oddly if we do not do it right.
When we lay out our HTML correctly it will be easier for ourselves and others to read it, and it will help us to make fewer errors.
Compare the two images below. Both of them have the same content, but the one on the left has been arranged correctly, whereas the one on the right is untidy and more difficult to read.
When we lay out our HTML correctly it will be easier for ourselves and others to read it, and it will help us to make fewer errors.
Compare the two images below. Both of them have the same content, but the one on the left has been arranged correctly, whereas the one on the right is untidy and more difficult to read.
Things to look out for:
Phew! That's a lot of stuff, but as you continue to follow these rules they will become second nature to you.
If in doubt, use the example on the left as your guide!
Task: Make sure that your basic HTML file (from the last task) is arranged according to all these rules.
- Make sure that the content that is on your page is placed between <body> and </body>
- Make sure you have start and end tags. Nearly all HTML tags have a start tag (like <p>) and an end tag shown with a / (like </p>)
- An HTML file should start with <!DOCTYPE html>
- All of the rest of the contents should be within <html lang="en"> and </html> (the lang="en" means that we are specifying that the page is in English)
- If all of a tag's content is on 1 line then it can be arranged like on line 4 in the left image (opening tag, then content, then closing tag).
- When there are multiple tags within a tag (like with the <body> above) then we should spread it out over multiple lines.
- When tags are over multiple lines we should indent the content inside further (like the body content is further inside than the <body> and </body> tags.
Phew! That's a lot of stuff, but as you continue to follow these rules they will become second nature to you.
If in doubt, use the example on the left as your guide!
Task: Make sure that your basic HTML file (from the last task) is arranged according to all these rules.