About Me

Thursday, 19 April 2012

HTML Elements

00:20  SecurityVoid  No comments

HTML Elements

HTML elements exist on many levels. Everything you see in front of you, the paragraph texts, the Tizag banner, and the navigation links on the left are all elements of this web page. An element in HTML is a loose term that describes each individual piece of your web page.


An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.
  1. <p> - opening paragraph tag
  2. Element Content - paragraph words
  3. </p> - closing tag
Every (web)page requires four critical elements: the html, head, title, and body elements.

The <html> Element...</html>

<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.
If you haven't already, open up Notepad or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.

HTML Code:

<html> 
</html>
Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "index.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes.
If you opened up your index.html document, you should be starring at your very first blank (white) web page!

The <head> Element

The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. We will be placing the <title> element here and we'll talk about the other possible elements in later lessons.
Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.
Here's a sample of the initial set up.

HTML Code:

<html> 
<head>
</head>
</html>
As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser. Content (stuff you can see) will come later.

The <title> Element

Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:

HTML Code:

<html> 
<head>
<title>My WebPage!</title>
</head>
</html>
Save the file and open it in your browser. You should see "My WebPage!" in the upper-left, as the window's title.
Name your webpage as you please, just keep in mind, the best titles are brief and descriptive.

The <body> Element

The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.

HTML Code:

<html> 
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>

Posted in:

0 comments:

Post a Comment