HTML Tutorials Overview
Welcome to HTML Tutorials. The objective of these tutorials is to provide in depth understand of HTML Programming Language. In these tutorials we will cover topics such as HTML Attributes, Forms, Scripts, Elements and Tags, Event Handlers etc.
In addition to free HTML Tutorials, we will cover common interview questions, issues and how to's of HTML.
Index
What is HTML?
HTML stands for Hypertext markup language, and it is the most widely used language to write web pages, as its suggests, HTML is a markup language.
Hypertext refers to the way in which web pages(HTML documents) are linked together, when you click a link in a web page, you are using hypertext.
Markup Language describes how HTML works. With a markup language, you simply “mark up” a text document with tags that tell a web browser how to structure it to display.
All you need to do to use HTML is learn what type of markup to use to get the results you want.
Why to learn HTML?
It is possible to create WebPages without knowing anything about the HTML source behind the page.
There are excellent editors on the market that will take care of the HTML parts. All you need to do is layout the page.
However, if you want to make it above average in web design, it is strongly recommended you to understand these tags.
The most important benefits are :
you can use tags the editor does not support.
You can read the code of other people’s pages, and “borrow” the cool effects.
You can do the work yourself, when the editor simply refuses to create the effects you want.
What do I need to create HTML?
Computer
Text or HTML editor
Adobe Dreamweaver
SeaMoney,Coffee Cup(windows) and textpad(windows)
Notepad(for windows),Pico(for Linux), or simpletext/Text edit/Text Wrangler(Mac)
Web Browser
Internet Explorer, Firefox,Chrome,obers….etc
Do I need to be online?
No, you do not need to be online to create web pages. You can create web pages on your local machine. You only need to go online when you want to publish your web page to the web.
HTML Documents = Web pages
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
.HTM or .HTML File Extension?
When you save an HTMl file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
Basic HTML Document structure
The basic structure for all HTML documents is simple and should include the following minimum elements or tags.
Doctypes
- The main container for HTML pages
- The container for page header information
- The title of the page</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><body>
<p>- The main body of the page</p>
<p style="text-align: justify;"><span style="color: #000000;">Remember that before an opening tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses.</span></p>
<h3 style="text-align: justify;"><span style="color: #000000;"><strong>Doctypes</strong></span></h3>
<p style="text-align: justify;"><span style="color: #000000;">A doctype declaration refers to the rules for the markup language so that the browsers render the content correctly</span></p>
<h4 style="text-align: justify;"><span style="color: #000000;"><strong>Example</strong></span></h4>
<p style="text-align: justify;"><span style="color: #000000;">An html document with a doctype of HTML 4.01 Transitional :</span></p>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;"><span style="color: #000000;"><a style="color: #000000;" href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a></span></p>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;"><span style="color: #000000;">The content of the document………</span></p>
<p style="text-align: justify;"> </p>
</body></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></html></span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Tags</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Words to know</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Tag : </strong>tag is a command the web browser interprets. Tags look like this : <tag></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Element – </strong>A complement tag, having an opening <tag> and a closing </tag></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Attribute –</strong> Used to modify the value of the HTML element. Elements will often have multiple attributes.</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Elements</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">An HTML element is everything from the start tag to the end tag:</span></p>
<p style="text-align: justify;"><span style="color: #000000;">star tag * Element conten End tag*</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><p> This is a paragaraph </p></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><a href=”default.htm”> This is a link </a></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;">The start tag is often called the opening tag. The end tag is often called the closing tag.</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Element syntax</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">An HTML element starts with a start tag/opening tag</span></p>
<p style="text-align: justify;"><span style="color: #000000;">An HTML element ends with an end tag/closing tag</span></p>
<p style="text-align: justify;"><span style="color: #000000;">The element content is everything between the start and the end tag</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Some HTML elements have empty content</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Empty elements are closed in the start tag</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Most HTML elements can have attributes.</span></p>
<h3 style="text-align: justify;"><span style="color: #000000;"><strong>Nested HTML Elements</strong></span></h3>
<p style="text-align: justify;"><span style="color: #000000;">Most HTML elements can be nested(can contain other HTML elements)</span></p>
<p style="text-align: justify;"><span style="color: #000000;">HTML documents consist of nested HTML elements.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Don’t Forget the end tag</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Some HTML elements might display correctly even if you forget the end tag :</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><p> This is a paragraph</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><p>This is a paragraph</span></p>
<p style="text-align: justify;"><span style="color: #000000;">The example above works in most browsers, because the closing tag is considered optional</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Never rely on this, Many HTML elements will produce unexpected results and/or errors if you forget the end tag.</span></p>
<h3 style="text-align: justify;"><span style="color: #000000;"><strong>Empty HTML elements</strong></span></h3>
<p style="text-align: justify;"><span style="color: #000000;">HTML elements with no content are called empty elements.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><br> is an empty elements without a closing tag(the <br> tag defines a line break)</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>TIP</strong> : In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br/> of closing empty elements in XHTML(and XML)</span></p>
<h3 style="text-align: justify;"><span style="color: #000000;">Use Lowercase Tags</span></h3>
<p style="text-align: justify;"><span style="color: #000000;">HTML tags are not case sensitive: <p> means the same as <p>. Many web sites use uppercase HTML tags.</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>Document Description</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">This is again important information and many search engine use this information as well while searching a web page. So you should give an appropriate description of the page.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><head></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><meta name=”description” content=”Learn about Meta Tags.”/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></head></span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>Document Revision Date</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;"><head></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><meta name=”revised” content=”tekslate, 6/12/2006”/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></head><strong> </strong></span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>Document Refreshing</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">You can specify a duration after which your web page will keep refreshing. If you want your page keep refreshing after every 10 seconds then use the following syntax.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><head></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><meta http-equiv=”refresh” content=”10”/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></head></span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>Page Redirection</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">You can specify a page redirection using Meta Tag. Following is an example of redirecting current page to another page. You can specify a duration after which page will be redirected.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><head></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><meta http-equiv=”refresh” content=”10; url=http://www.tekslate.com”/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></head></span></p>
<p style="text-align: justify;"><span style="color: #000000;">If you don’t provide a duration then page will be redirected immediately.</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>Setting Cookies</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">You can use meta tag to store cookies on client side later information can be used by then web server to track a site visitor.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><head></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><meat http-equiv=”cookie” content=”userid=xyz; expires=Wednesday,08-Aug-00 23:59:59 GMT;/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></head></span></p>
<p style="text-align: justify;"><span style="color: #000000;">IF you don’t include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser/</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>Setting Author Name</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">You can set an author name in a web page using Meta Tag. See an example below.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><head></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><meta name=”author” content=”Mahnaz Mohtashim”/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></head></span></p>
<p style="text-align: justify;"><span style="color: #000000;">IF you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Comment</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">HTML comment lines are indicated by the special beginning tag<!-and ending tag- -> placed at the beginning and end of EVERY line to be treated as a comment.</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Comments do not nest, and the double-dash sequence “—“ many not appear inside a comment except as part of the closing - - > tag. You must also make sure that there are no spaces in the start-of-comment string.</span></p>
<p style="text-align: justify;"><span style="color: #000000;">For example: Given line is a valid comment in HTML</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><!—This is commented out --></span></p>
<p style="text-align: justify;"><span style="color: #000000;">But following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.</span></p>
<p style="text-align: justify;"><span style="color: #000000;">< !- - This is commented out --></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Be careful if you use comments to “comment out” HTML that would otherwise be shown to the user, since some older browsers will still pay attention to angel brackets inside the comment and close the comment prematurely - - So that some of the text that was supposed to be inside the comment mistakenly appears as part of the document.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Example</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><h1> This is heading 1</h1></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 2</h2></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 3</h2></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 4</h2></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 5</h2></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 6</h2></span></p>
<p style="text-align: justify;"><span style="color: #000000;">This will display following result:</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>This is heading 1</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;">This is heading 2</span></p>
<p style="text-align: justify;"><span style="color: #000000;">This is heading 3</span></p>
<p style="text-align: justify;"><span style="color: #000000;">This is heading 4</span></p>
<p style="text-align: justify;"><span style="color: #000000;">This is heading 5</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><em>This is heading 6</em></span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>Line Breaks</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">Line breaks are different then most of the tags we have seen so far. A line break ends the line you are currently on and resumes on the next line. Placing <br/> within the code is the same as pressing the return key in a word processor. Use the <br/> tag within the <p> (paragraph) tag.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>HTMLCode</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><p></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Will Mateson<br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Box 61<br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Cleveland, Ohio<br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"></p></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Address</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Will Mateson</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Box 61</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Cleveland, Ohio</span></p>
<p style="text-align: justify;"><span style="color: #000000;">We have created a possible address for a letter head.The line break tag will also come in handy toward the end of the letter.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>HTML Code</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><p>Sincerely,<br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Kevin Sanders<br/></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Vice President<p></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Closing Letter</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Sincerely</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Kevin Sanders</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Vice President</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Horizontal Rule</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">Use the <hr/> tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>HTML Code</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><hr /></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Use</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><hr /><hr /></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Them</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><hr/></span></p>
<p style="text-align: justify;"><span style="color: #000000;">sparingly</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><hr/></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>Display</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>-----------------------------------------------------------------------------------------------</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;">Use</span></p>
<p style="text-align: justify;"><span style="color: #000000;">------------------------------------------------------------------------</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Them</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Sparingly</span></p>
<p style="text-align: justify;"><span style="color: #000000;">Aside from our exaggerated example, the horizontal rule tag can come in handy when publishing work. A table of contents or perhaps a bibliography.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><strong>HTML CODE</strong></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><hr /></span></p>
<p style="text-align: justify;"><span style="color: #000000;"><p>1. “The Hobbit”, JRR Tolkein.<br/></span></p>
<ol style="text-align: justify;" start="2">
<li><span style="color: #000000;">“The Fellowship of the Ring” JRR Tolkein </p></span></li>
<li><span style="color: #000000;">“The Hobbit”, JRR Tolkein.</span></li>
<li><span style="color: #000000;">“The Fellowship of the Ring” JRR Tolkein</span></li>
</ol>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Different Doctypes</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.</span></p>
<p style="text-align: justify;"><span style="color: #000000;">The doctype declaration refers to a Document Type Definition(DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly</span></p>
<p style="text-align: justify;"><span style="color: #000000;">The doctype declaration should be the very first in an HTML document, before the <html> tag.</span></p>
<h4 style="text-align: justify;"><span style="color: #000000;"><strong>Tip:</strong></span></h4>
<p style="text-align: justify;"><span style="color: #000000;">Always add a doctype to your pages. This helps the browsers to render the page correctly!</span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML 4.01 Strict</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">This DTD contains all HTML elements and attributes, but does NOT INCLUDE peresentational or deprecated elements(like font and center). Framesets are not allowed.</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><a style="color: #000000;" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>></span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML 4.01 Transitional</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like front). Framesets are not allowed:</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01 Transitional//EN</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><a style="color: #000000;" href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>></span></p>
<h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML 4.01 Frameset</strong></span></h2>
<p style="text-align: justify;"><span style="color: #000000;">This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN</span></p>
<p style="text-align: justify;"><span style="color: #000000;"><a style="color: #000000;" href="http://www.w3.org/TR/html4/frameset.dtd">http://www.w3.org/TR/html4/frameset.dtd</a>></span></p>
<p style="text-align: justify;"><span style="color: #000000;"> </span></p></div></div></section><div class="jss56"><div class="MuiPaper-root jss57 MuiPaper-elevation1 MuiPaper-rounded"><h5 class="MuiTypography-root jss60 MuiTypography-h5"><b>About Author</b></h5><div class="jss61"></div><div class="jss63"><div><img alt="Authorlogo" src="https://tekslateassets.s3.amazonaws.com/images/logo.svg" class="jss62"/></div><div class="jss65"></div><div><div class="jss58"><h6 class="MuiTypography-root jss66 MuiTypography-subtitle1"><b>Name</b></h6><p class="MuiTypography-root jss67 MuiTypography-body1">TekSlate</p></div><div class="jss59"><h6 class="MuiTypography-root jss68 MuiTypography-subtitle1"><b>Author Bio</b></h6><p class="MuiTypography-root jss69 MuiTypography-body1">TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills .</p></div></div></div></div></div></div></div></div><button></button></div></div></div><footer class="jss72"><div class="MuiContainer-root MuiContainer-maxWidthLg"><div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-3"><div><p class="jss77">Social</p><ul class="jss79"><li class="jss80"><a target="_blank" href="https://www.facebook.com/tekslate/" class="jss76"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"></path></svg></a></li><li class="jss80"><a target="_blank" href="https://twitter.com/tekslatetutor" class="jss76"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path></svg></a></li></ul><ul class="jss79"><li class="jss80"><a target="_blank" href="https://www.linkedin.com/company/tekslate/about/" class="jss76"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"></path></svg></a></li><li class="jss80"><a target="_blank" href="https://www.instagram.com/tekslate/" class="jss76"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg></a></li></ul></div></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-3"><div><p class="jss77">For Businesses</p><ul class="jss78"><li><a target="_blank" href="/corporate-training" class="jss76">Corporate Training</a></li></ul></div></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-3"><div><p class="jss77">Work with us</p><ul class="jss78"><li><a target="_blank" href="/become-an-instructor" class="jss76">Become an instructor</a></li><li><a target="_blank" href="/write-for-us" class="jss76">Write for us</a></li></ul></div></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-3"><div><p class="jss77">Discover</p><ul class="jss78"><li><a target="_blank" href="/blog" class="jss76">Blog</a></li></ul></div></div></div><div class="jss73"></div><div><p class="jss77">Trending Course Categories</p><div><a target="_blank" class="jss76">Cloud Computing Courses<span> | </span></a><a target="_blank" class="jss76">Business Intelligence and Analytics Courses<span> | </span></a><a target="_blank" class="jss76">Programming and Frameworks Courses<span> | </span></a><a target="_blank" class="jss76">Project Management and Methodologies Courses<span> | </span></a><a target="_blank" class="jss76">Cyber Security and SIEM Courses<span> | </span></a><a target="_blank" class="jss76">Software Automation Testing Courses<span> | </span></a><a target="_blank" class="jss76">Containerization Courses<span> | </span></a><a target="_blank" class="jss76">Business Process Management Courses<span> | </span></a><a target="_blank" class="jss76">SAP Courses<span> | </span></a><a target="_blank" class="jss76">SAS Courses</a></div></div><div><p class="jss77">Trending Courses</p><div><a target="_blank" href="/snowflake-training" class="jss76">Snowflake Training<span> | </span></a><a target="_blank" href="/informatica-training" class="jss76">Informatica Training<span> | </span></a><a target="_blank" href="/looker-training" class="jss76">Looker Training<span> | </span></a><a target="_blank" href="/uipath-training" class="jss76">Uipath Training<span> | </span></a><a target="_blank" href="/okta-training" class="jss76">Okta Training<span> | </span></a><a target="_blank" href="/commvault-training" class="jss76">Commvault Training<span> | </span></a><a target="_blank" href="/appian-training" class="jss76">Appian Training<span> | </span></a><a target="_blank" href="/apttus-training" class="jss76">Apttus Trainingg<span> | </span></a><a target="_blank" href="/tosca-training" class="jss76">Tosca Training</a></div></div><div><p class="jss77">Popular Courses</p><div><a target="_blank" href="/workday-training" class="jss76">Workday Training<span> | </span></a><a target="_blank" href="/maximo-training" class="jss76">Maximo Training<span> | </span></a><a target="_blank" href="/salesforce-training" class="jss76">Salesforce Training<span> | </span></a><a target="_blank" href="/servicenow-training" class="jss76">ServiceNow Training<span> | </span></a><a target="_blank" href="/cyberark-training" class="jss76">CyberArk Training<span> | </span></a><a target="_blank" href="/aws-training" class="jss76">AWS Training<span> | </span></a><a target="_blank" href="/agile-training" class="jss76">Agile Training<span> | </span></a><a target="_blank" href="/arcsight-training" class="jss76">Arcsight Training<span> | </span></a><a target="_blank" href="/power-bi-training" class="jss76">Power BI Training</a></div></div><div class="jss81"><p class="jss82">Company</p><div class="jss83"><div class="jss84"><a target="_blank" href="/about" class="jss76">About Us</a></div><div class="jss84"><a target="_blank" href="/contact" class="jss76">Contact Us</a></div><div class="jss84"><a target="_blank" href="/disclaimer" class="jss76">Refund Policy</a></div><div class="jss84"><a target="_blank" href="/reviews" class="jss76">Reviews</a></div></div><p class="jss85">Copyright © 2021 <a target="_blank" style="color:white;text-decoration:none" href="https://tekslate.com/"> Tekslate</a>. All Rights Reserved</p><p class="jss86">Disclaimer: The certification names and logos are the trademarks of their respective owners.</p></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"trending":{"course_info":{"id":35,"blog_category":0,"blog_type":1,"wp_id":9155,"description":"\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Tutorials Overview\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eWelcome to HTML Tutorials. The objective of these tutorials is to provide in depth understand of HTML Programming Language. In these tutorials we will cover topics such as HTML Attributes, Forms, Scripts, Elements and Tags, Event Handlers etc.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eIn addition to free HTML Tutorials, we will cover common interview questions, issues and how to's of HTML.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch3\u003eIndex\u003c/h3\u003e\r\n\u003cul\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-event-handlers/\"\u003eHTML Event Handlers\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-lists/\"\u003eHTML Lists\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-frames/\"\u003eHTML Frames\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-forms/\"\u003eHTML Forms\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-table-tags/\"\u003eHTML Table Tags\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-script-tags/\"\u003eHTML Script Tags\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-formatting-elements-tags/\"\u003eHTML – Formatting Elements \u0026 Tags\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/style-sheets-html/\"\u003eStyle Sheets in HTML\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-elements-tags/\"\u003eHTML Elements and Tags\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/html-attributes/\"\u003eHTML Attributes\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/work-html-forms-mvc/\"\u003eHTML forms in MVC\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/work-html-helpers-classes/\"\u003eHTML helper classes\u003c/a\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003ca href=\"https://tekslate.com/mvc-html-helper-class-controllers/\"\u003eMVC HTML helper class controllers\u003c/a\u003e\u003c/li\u003e\r\n\u003c/ul\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eWhat is HTML?\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML stands for Hypertext markup language, and it is the most widely used language to write web pages, as its suggests, HTML is a markup language.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHypertext refers to the way in which web pages(HTML documents) are linked together, when you click a link in a web page, you are using hypertext.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eMarkup Language describes how HTML works. With a markup language, you simply “mark up” a text document with tags that tell a web browser how to structure it to display.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAll you need to do to use HTML is learn what type of markup to use to get the results you want.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eWhy to learn HTML?\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eIt is possible to create WebPages without knowing anything about the HTML source behind the page.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThere are excellent editors on the market that will take care of the HTML parts. All you need to do is layout the page.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHowever, if you want to make it above average in web design, it is strongly recommended you to understand these tags.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe most important benefits are :\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eyou can use tags the editor does not support.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eYou can read the code of other people’s pages, and “borrow” the cool effects.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eYou can do the work yourself, when the editor simply refuses to create the effects you want.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eWhat do I need to create HTML?\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eComputer\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eText or HTML editor\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAdobe Dreamweaver\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eSeaMoney,Coffee Cup(windows) and textpad(windows)\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eNotepad(for windows),Pico(for Linux), or simpletext/Text edit/Text Wrangler(Mac)\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eWeb Browser\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eInternet Explorer, Firefox,Chrome,obers….etc\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch3 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eDo I need to be online?\u003c/strong\u003e\u003c/span\u003e\u003c/h3\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eNo, you do not need to be online to create web pages. You can create web pages on your local machine. You only need to go online when you want to publish your web page to the web.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch3 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Documents = Web pages\u003c/strong\u003e\u003c/span\u003e\u003c/h3\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML documents describe web pages\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML documents contain HTML tags and plain text\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML documents are also called web pages\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch3 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003e.HTM or .HTML File Extension?\u003c/strong\u003e\u003c/span\u003e\u003c/h3\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eWhen you save an HTMl file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eBasic HTML Document structure\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe basic structure for all HTML documents is simple and should include the following minimum elements or tags.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eDoctypes\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chtml\u003e - The main container for HTML pages\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chead\u003e - The container for page header information\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ctitle\u003e - The title of the page\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cbody\u003e\r\n\u003cp\u003e- The main body of the page\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eRemember that before an opening tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses.\u003c/span\u003e\u003c/p\u003e\r\n\u003ch3 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eDoctypes\u003c/strong\u003e\u003c/span\u003e\u003c/h3\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eA doctype declaration refers to the rules for the markup language so that the browsers render the content correctly\u003c/span\u003e\u003c/p\u003e\r\n\u003ch4 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eExample\u003c/strong\u003e\u003c/span\u003e\u003c/h4\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAn html document with a doctype of HTML 4.01 Transitional :\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ca style=\"color: #000000;\" href=\"http://www.w3.org/TR/html4/loose.dtd\"\u003ehttp://www.w3.org/TR/html4/loose.dtd\u003c/a\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe content of the document\u0026hellip;\u0026hellip;\u0026hellip;\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003c/body\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/html\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Tags\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eWords to know\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eTag : \u003c/strong\u003etag is a command the web browser interprets. Tags look like this : \u003ctag\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eElement – \u003c/strong\u003eA complement tag, having an opening \u003ctag\u003e and a closing \u003c/tag\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eAttribute –\u003c/strong\u003e Used to modify the value of the HTML element. Elements will often have multiple attributes.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Elements\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAn HTML element is everything from the start tag to the end tag:\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003estar tag * Element conten End tag*\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cp\u003e This is a paragaraph \u003c/p\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ca href=”default.htm”\u003e This is a link \u003c/a\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe start tag is often called the opening tag. The end tag is often called the closing tag.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Element syntax\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAn HTML element starts with a start tag/opening tag\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAn HTML element ends with an end tag/closing tag\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe element content is everything between the start and the end tag\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eSome HTML elements have empty content\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eEmpty elements are closed in the start tag\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eMost HTML elements can have attributes.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch3 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eNested HTML Elements\u003c/strong\u003e\u003c/span\u003e\u003c/h3\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eMost HTML elements can be nested(can contain other HTML elements)\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML documents consist of nested HTML elements.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eDon’t Forget the end tag\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eSome HTML elements might display correctly even if you forget the end tag :\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cp\u003e This is a paragraph\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cp\u003eThis is a paragraph\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe example above works in most browsers, because the closing tag is considered optional\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eNever rely on this, Many HTML elements will produce unexpected results and/or errors if you forget the end tag.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch3 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eEmpty HTML elements\u003c/strong\u003e\u003c/span\u003e\u003c/h3\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML elements with no content are called empty elements.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cbr\u003e is an empty elements without a closing tag(the \u003cbr\u003e tag defines a line break)\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eTIP\u003c/strong\u003e : In XHTML, all elements must be closed. Adding a slash inside the start tag, like \u003cbr/\u003e of closing empty elements in XHTML(and XML)\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch3 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eUse Lowercase Tags\u003c/span\u003e\u003c/h3\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML tags are not case sensitive: \u003cp\u003e means the same as \u003cp\u003e. Many web sites use uppercase HTML tags.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eDocument Description\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis is again important information and many search engine use this information as well while searching a web page. So you should give an appropriate description of the page.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chead\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cmeta name=”description” content=”Learn about Meta Tags.”/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/head\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eDocument Revision Date\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chead\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cmeta name=”revised” content=”tekslate, 6/12/2006”/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/head\u003e\u003cstrong\u003e \u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eDocument Refreshing\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eYou can specify a duration after which your web page will keep refreshing. If you want your page keep refreshing after every 10 seconds then use the following syntax.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chead\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cmeta http-equiv=”refresh” content=”10”/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/head\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003ePage Redirection\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eYou can specify a page redirection using Meta Tag. Following is an example of redirecting current page to another page. You can specify a duration after which page will be redirected.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chead\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cmeta http-equiv=”refresh” content=”10; url=http://www.tekslate.com”/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/head\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eIf you don’t provide a duration then page will be redirected immediately.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eSetting Cookies\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eYou can use meta tag to store cookies on client side later information can be used by then web server to track a site visitor.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chead\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cmeat http-equiv=”cookie” content=”userid=xyz; expires=Wednesday,08-Aug-00 23:59:59 GMT;/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/head\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eIF you don’t include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser/\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eSetting Author Name\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eYou can set an author name in a web page using Meta Tag. See an example below.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chead\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cmeta name=”author” content=”Mahnaz Mohtashim”/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/head\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eIF you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Comment\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eHTML comment lines are indicated by the special beginning tag\u003c!-and ending tag- -\u003e placed at the beginning and end of EVERY line to be treated as a comment.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eComments do not nest, and the double-dash sequence “—“ many not appear inside a comment except as part of the closing - - \u003e tag. You must also make sure that there are no spaces in the start-of-comment string.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eFor example: Given line is a valid comment in HTML\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c!—This is commented out --\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eBut following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c !- - This is commented out --\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eBe careful if you use comments to “comment out” HTML that would otherwise be shown to the user, since some older browsers will still pay attention to angel brackets inside the comment and close the comment prematurely - - So that some of the text that was supposed to be inside the comment mistakenly appears as part of the document.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eExample\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ch1\u003e This is heading 1\u003c/h1\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ch2\u003eThis is heading 2\u003c/h2\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ch2\u003eThis is heading 3\u003c/h2\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ch2\u003eThis is heading 4\u003c/h2\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ch2\u003eThis is heading 5\u003c/h2\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ch2\u003eThis is heading 6\u003c/h2\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis will display following result:\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eThis is heading 1\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis is heading 2\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis is heading 3\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis is heading 4\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis is heading 5\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cem\u003eThis is heading 6\u003c/em\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eLine Breaks\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eLine breaks are different then most of the tags we have seen so far. A line break ends the line you are currently on and resumes on the next line. Placing \u003cbr/\u003e within the code is the same as pressing the return key in a word processor. Use the \u003cbr/\u003e tag within the \u003cp\u003e (paragraph) tag.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTMLCode\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cp\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eWill Mateson\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eBox 61\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eCleveland, Ohio\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c/p\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eAddress\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eWill Mateson\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eBox 61\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eCleveland, Ohio\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eWe have created a possible address for a letter head.The line break tag will also come in handy toward the end of the letter.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Code\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cp\u003eSincerely,\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eKevin Sanders\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eVice President\u003cp\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eClosing Letter\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eSincerely\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eKevin Sanders\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eVice President\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Horizontal Rule\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eUse the \u003chr/\u003e tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Code\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chr /\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eUse\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chr /\u003e\u003chr /\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThem\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003esparingly\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eDisplay\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003e-----------------------------------------------------------------------------------------------\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eUse\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e------------------------------------------------------------------------\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThem\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eSparingly\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAside from our exaggerated example, the horizontal rule tag can come in handy when publishing work. A table of contents or perhaps a bibliography.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML CODE\u003c/strong\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003chr /\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cp\u003e1. “The Hobbit”, JRR Tolkein.\u003cbr/\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003col style=\"text-align: justify;\" start=\"2\"\u003e\r\n \t\u003cli\u003e\u003cspan style=\"color: #000000;\"\u003e“The Fellowship of the Ring” JRR Tolkein \u003c/p\u003e\u003c/span\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003cspan style=\"color: #000000;\"\u003e“The Hobbit”, JRR Tolkein.\u003c/span\u003e\u003c/li\u003e\r\n \t\u003cli\u003e\u003cspan style=\"color: #000000;\"\u003e“The Fellowship of the Ring” JRR Tolkein\u003c/span\u003e\u003c/li\u003e\r\n\u003c/ol\u003e\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML Different Doctypes\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe doctype declaration refers to a Document Type Definition(DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThe doctype declaration should be the very first in an HTML document, before the \u003chtml\u003e tag.\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch4 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eTip:\u003c/strong\u003e\u003c/span\u003e\u003c/h4\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eAlways add a doctype to your pages. This helps the browsers to render the page correctly!\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML 4.01 Strict\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis DTD contains all HTML elements and attributes, but does NOT INCLUDE peresentational or deprecated elements(like font and center). Framesets are not allowed.\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ca style=\"color: #000000;\" href=\"http://www.w3.org/TR/html4/strict.dtd\"\u003ehttp://www.w3.org/TR/html4/strict.dtd\u003c/a\u003e\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML 4.01 Transitional\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like front). Framesets are not allowed:\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01 Transitional//EN\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ca style=\"color: #000000;\" href=\"http://www.w3.org/TR/html4/loose.dtd\"\u003ehttp://www.w3.org/TR/html4/loose.dtd\u003c/a\u003e\u003e\u003c/span\u003e\u003c/p\u003e\r\n\r\n\u003ch2 style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003cstrong\u003eHTML 4.01 Frameset\u003c/strong\u003e\u003c/span\u003e\u003c/h2\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003eThis DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003c!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e\u003ca style=\"color: #000000;\" href=\"http://www.w3.org/TR/html4/frameset.dtd\"\u003ehttp://www.w3.org/TR/html4/frameset.dtd\u003c/a\u003e\u003e\u003c/span\u003e\u003c/p\u003e\r\n\u003cp style=\"text-align: justify;\"\u003e\u003cspan style=\"color: #000000;\"\u003e \u003c/span\u003e\u003c/p\u003e","title":"HTML Tutorials","url_title":"html-tutorials","image_url":null,"meta_title":"Best HTML Online Tutorials For Beginners And Programmers","meta_desc":"HTML Tutorials explain briefly about fundamentals of html. It also covers topics on Elements, Tags \u0026 Attributes and Usage of HTML to Make Your Own Web Page.","views":0,"rating":4,"author":"","author_desc":"","created_at":"2015-03-27T09:37:22.000Z","updated_at":"2020-05-15T00:00:00.000Z","status":1},"type":"articles","categories":[]},"type":"articles"},"__N_SSG":true},"page":"/[page]","query":{"page":"html-tutorials"},"buildId":"Xfr3Q6IxO-xzXa47YTYsq","isFallback":false,"gsp":true}</script><script nomodule="" src="/_next/static/chunks/polyfills-2e42e0f0c9a99ea700d3.js"></script><script src="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" async=""></script><script src="/_next/static/chunks/framework.975c3ede720befd448c9.js" async=""></script><script src="/_next/static/chunks/6c7386dbdb8e0520ed6cca60b1f7a3ef0e693935.ff00ecb1393d9d2c6ba4.js" async=""></script><script src="/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.126c1366b6c8363d7adc.js" async=""></script><script src="/_next/static/chunks/main-ce1597778a8d86c8726c.js" async=""></script><script src="/_next/static/chunks/612b6359627f4964900339c9d5996604be24c663.0f2661bc3980fe20fbab.js" async=""></script><script src="/_next/static/chunks/af952d0d228e24fa3d9ad18085933741002da1e2.e21a74fc7b90d8e1c829.js" async=""></script><script src="/_next/static/chunks/73cb76d7b9cd9af773576c580e16caf63b5adb47.b4828b64c6e9b6a45211.js" async=""></script><script src="/_next/static/chunks/80f4faff6d724d95718158fe85b7781f0fa942e0.549d16bcfc2eea2260c3.js" async=""></script><script src="/_next/static/chunks/7d5af672ecc15b5cb034c4c486c3d8bc27080340.63d7075b4e58c803d2de.js" async=""></script><script src="/_next/static/chunks/f9ed9bdcb83b831c4203d17404812427ab16ba2b.8d04e9fcabbc91cbdaa7.js" async=""></script><script src="/_next/static/chunks/dc34d182a7ff9cc48390fa0046f9103b33bf3998.0e4edf665cc0117f2a64.js" async=""></script><script src="/_next/static/chunks/pages/_app-5a69422fc0ee052c1605.js" async=""></script><script src="/_next/static/chunks/12dd6146ca74462903b8f81ccf248aaae8f9edbb.a3399826132cd84b87d4.js" async=""></script><script src="/_next/static/chunks/cd4116c95b694534f7a3728d5b2b0e55964447c6.b922925f639b602d2842.js" async=""></script><script src="/_next/static/chunks/2f5130db39ba4e3107f26d6502ddabf5d7e0be2d.c89e34ac45f65c02ed7e.js" async=""></script><script src="/_next/static/chunks/9291669b94c128c0860a620b5f6d9e844b34ddd2.b61c5d4179cd0c6f570c.js" async=""></script><script src="/_next/static/chunks/9039a4b0c6eb2cf1d08eb24f6125ddc2a998e7ff.f7ba751ecf0e898e3b8b.js" async=""></script><script src="/_next/static/chunks/pages/%5Bpage%5D-3ec278f248462b1a3633.js" async=""></script><script src="/_next/static/Xfr3Q6IxO-xzXa47YTYsq/_buildManifest.js" async=""></script><script src="/_next/static/Xfr3Q6IxO-xzXa47YTYsq/_ssgManifest.js" async=""></script><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WKCZGDQ');</script></body></html>
