HTML Tutorial Example
Example
HTML Tags
HTML Basic
HTML Introduction
HTML Start
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Formatting Elements
HTML Color Codes
HTML Font
HTML Links
HTML Style
HTML Text Links
HTML Entities
HTML Email
HTML Images
HTML Image Links
HTML Forms
HTML Tables
HTML Bgcolor
HTML Background
HTML Color Chart
HTML Frames
HTML Layouts
HTML Comments
HTML Meta
HTML Script
HTML Special Tags
HTML Body
HTML Div
HTML Formatting Tags
HTML Bold
HTML Italic
HTML Code
HTML Pre
HTML Superscript
HTML Subscript
HTML Strikethrough
HTML Forms
HTML Input Tags
HTML Text Fields
HTML Password
HTML Checkboxes
HTML Radio
HTML Textareas
HTML Upload
HTML Select
HTML Submit
HTML Reset
HTML Hidden Fields
HTML References
HTML Events
HTML Character Sets
HTML Symbols
HTML ASCII
HTML Elements
HTML Element Syntax
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are closed in the start tag
- Most HTML elements can have attributes.
HTML Elements
HTML elements exist on many levels. Everything you see in front of you, the paragraph texts, 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> 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>
</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!
HTML Example Explained
The <p> element defines a paragraph tag in the HTML document.
The element has a start tag <p> and an end tag </p> for closing the tag.
<body>
<p>Paragraph Starting Here.</p>
</body>
The body Element
The <body> element is where all content is placed. 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>
<head>
<title>webpage title</title>
</head>
<body>
my first web page
</body>
</html>
Donot Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag. The out put is different
<p>This is a paragraph
<p>This is a paragraph
This example will work in most browsers. Forgetting the end tag can produce unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.