Chapter 2.1: Elements
What is an element?
Well think back to Science class when you were learning about Elements such as Oxygen and Hydrogen. What are they? They are what define an object, what the object is made up of. With HTML its the same basic idea.
A single element on its own is nothing, but when you put multiple together you start creating something completely different. In HTML an element is defined using symbols and the English vocabulary. Using <> we define Elements. Such as <html> is the element of what else? HTML! It was tells the web page HEY! This is an HTML page. Then there is the <p> element, It represents a Paragraph. Then <br> means Break. Break as in "Go a line down".
Now here's something else, all elements have to be ended otherwise the element will go on living forever and mess EVERYTHING up. So how do we end an Element? We close it by adding a slash before the letter at the end. Such as <p>Hello there</p> . Without ending the element it will go on forever and everything you type will be displayed since it is a Paragraph element. Which isn't necessarily good because a single mistake in your code can allow a hacker to get in and find out info, Unless of course your scripting some of the best firewalls ever! :D or if your host provides firewalls.
Lets try it out Here's an example, do it with me
First lets define that this is a HTML page with <!Doctype HTML> .
Now lets start the HTML page with <html> . By this point your script should look like this:
Well think back to Science class when you were learning about Elements such as Oxygen and Hydrogen. What are they? They are what define an object, what the object is made up of. With HTML its the same basic idea.
A single element on its own is nothing, but when you put multiple together you start creating something completely different. In HTML an element is defined using symbols and the English vocabulary. Using <> we define Elements. Such as <html> is the element of what else? HTML! It was tells the web page HEY! This is an HTML page. Then there is the <p> element, It represents a Paragraph. Then <br> means Break. Break as in "Go a line down".
Now here's something else, all elements have to be ended otherwise the element will go on living forever and mess EVERYTHING up. So how do we end an Element? We close it by adding a slash before the letter at the end. Such as <p>Hello there</p> . Without ending the element it will go on forever and everything you type will be displayed since it is a Paragraph element. Which isn't necessarily good because a single mistake in your code can allow a hacker to get in and find out info, Unless of course your scripting some of the best firewalls ever! :D or if your host provides firewalls.
Lets try it out Here's an example, do it with me
First lets define that this is a HTML page with <!Doctype HTML> .
Now lets start the HTML page with <html> . By this point your script should look like this:
<!Doctype html>
<html>
<html>
Now think of HTML as a human. In order for the human or HTML to functions, you need a Head, and a Body. So lets add those elements in too. Rmember to close them otherwise the whole thing will be messed up. And now that we have a body and head, we can end the HTML element too. Remember to end the HTML element at the VERY bottom of the page so your defining that all of it is HTML. You should now look like this:
<!Doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
Each person has a name, we should give our web page one too. Instead of using a name element it's a TITLE element. The title will display in the tab menu of your web browser. You give your web page a title before the HEAD tag, like in a game where their name displays above a characters head. Remember to end the element with a slash or </title>
<!Doctype html>
<html>
<title>This is an example website</title>
<head>
</head>
<body>
</body>
</html>
<html>
<title>This is an example website</title>
<head>
</head>
<body>
</body>
</html>
Now create a new folder and call it Website. Now save this code in your folder with an extension of .html, remember that websites have home pages, home pages are always defined as Index so the web page can detect which is the home page. So try saving it as Index.html
Now you can double click that Icon and see what your website looks like!
By now you have probably double clicked the icon and saw that your website is just a blank page. That is because we haven't added any content yet, we will work on that in the next chapter. For now read a few of the tips below and move on to the next chapter.
Now you can double click that Icon and see what your website looks like!
By now you have probably double clicked the icon and saw that your website is just a blank page. That is because we haven't added any content yet, we will work on that in the next chapter. For now read a few of the tips below and move on to the next chapter.
UPPERCASE or lowercase?
You can use uppercase or lowercase when coding HTML, however, most developers use lowercase. This helps the readability of your code, and it also saves you from constantly switching between upper and lower case. Lowercase also helps keep your code XML compliant (if you're using XHTML), but but that's another topic.
Therefore...
Therefore...
- Good: <head>
- OK: <HEAD>
The Structure of HTML, is a Game Character
HTML relates to a game character more than you would think, both require a head, body, and footer in order to be there. The Title is the "Name" of the character, and the body defines what the content of the website is, or the Characters look. Then you end it with a footer, AKA the characters foot. Now who says Video Games aren't educational. Without even knowing it, you learned some structure of HTML when you played your first Video Game.