N.W.A
Respected Member
Hello guys,as I promissed in my previous tutorial The-HTML-Introducton this will be a series of tutorial that will progress from beginner to expert.So lets begin.
HTML-Elements
When you land on a website, all the items you see in front of you -- the paragraph texts, the page banners, and the navigation links are all elements of the web page. The term element is a just a name given to any piece of a web page. Many HTML elements are actually invisible to visitors and work quietly behind the scenes to provide web crawlers and search engines useful information about the site.
An element consists of three essential pieces: an opening tag, the content, and a closing tag.
- <p> - opening paragraph tag
- Element Content - "Once upon a time..."
- </p> - closing tag
A Complete HTML Element
Code:
[COLOR="#000000"]<p>Once upon a time...</p>[/COLOR]
html - <html> element...</html>
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.
If you haven't already, it is time to open up Notepad, Notepad++, or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.
HTML Element Code:
Code:
[COLOR="#000000"]<html>
</html>[/COLOR]html - <head> element
The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.
Here's a sample of the initial setup.
Code:
[COLOR="#000000"]<html>
<head>
</head>
</html>[/COLOR]html - <title> element
The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded, and web pages you bookmark are saved using the web pages' titles.
A proper title makes a good first impression, and any page caught without a title is considered unprofessional, at best.
Code:
[COLOR="#000000"]<html>
<head>
<title>My Web Page!</title>
</head>
</html>[/COLOR]html - <body> element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.
Code:
[COLOR="#000000"]<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>[/COLOR]To recap quickly: we've laid out a set of four essential elements that are used to create a strong foundation and structure for your web page. The <html> element encapsulates all page content and elements, including two special elements: the <head> and <body> elements. The <head> element is a smaller container for elements that work behind the scenes of web pages, while the <body> element houses content elements such as web forms, text, images, and web video.
Last edited:
