HTML Tutorials

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

HTML Event Handlers

HTML Lists

HTML Frames

HTML Forms

HTML Table Tags

HTML Script Tags

HTML – Formatting Elements & Tags

Style Sheets in HTML

HTML Elements and Tags

HTML Attributes

HTML forms in MVC

HTML helper classes

MVC HTML helper class controllers

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><p><p style="text-align: justify;"><span style="color: #000000;"><body><p><p><p>- The main body of the page</p><p><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><p><p><h3 style="text-align: justify;"><span style="color: #000000;"><strong>Doctypes</strong></span></h3><p><p><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><p><p><h4 style="text-align: justify;"><span style="color: #000000;"><strong>Example</strong></span></h4><p><p><p style="text-align: justify;"><span style="color: #000000;">An html document with a doctype of HTML 4.01 Transitional :</span></p><p><p><p style="text-align: justify;"> </p><p><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><p><p style="text-align: justify;"> </p><p><p><p style="text-align: justify;"> </p><p><p><p style="text-align: justify;"> </p><p><p><p style="text-align: justify;"> </p><p><p><p style="text-align: justify;"> </p><p><p><p style="text-align: justify;"><span style="color: #000000;">The content of the document………</span></p><p><p><p style="text-align: justify;"> </p><p><p></body></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"></html></span></p><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Tags</strong></span></h2><p><p><p style="text-align: justify;"><span style="color: #000000;"><strong>Words to know</strong></span></p><p><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><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><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Elements</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;">star tag * Element conten End tag*</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><p> This is a paragaraph </p></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><a href=”default.htm”> This is a link </a></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><br/></span></p><p><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Element syntax</strong></span></h2><p><p><p style="text-align: justify;"><span style="color: #000000;">An HTML element starts with a start tag/opening tag</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">An HTML element ends with an end tag/closing tag</span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;">Some HTML elements have empty content</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Empty elements are closed in the start tag</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Most HTML elements can have attributes.</span></p><p><p><p><p><h3 style="text-align: justify;"><span style="color: #000000;"><strong>Nested HTML Elements</strong></span></h3><p><p><p style="text-align: justify;"><span style="color: #000000;">Most HTML elements can be nested(can contain other HTML elements)</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">HTML documents consist of nested HTML elements.</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><strong>Don’t Forget the end tag</strong></span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><p> This is a paragraph</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><p>This is a paragraph</span></p><p><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><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><p><p><p><p><h3 style="text-align: justify;"><span style="color: #000000;"><strong>Empty HTML elements</strong></span></h3><p><p><p style="text-align: justify;"><span style="color: #000000;">HTML elements with no content are called empty elements.</span></p><p><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><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><p><p><p><p><h3 style="text-align: justify;"><span style="color: #000000;">Use Lowercase Tags</span></h3><p><p><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>Document Description</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><head></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><meta name=”description” content=”Learn about Meta Tags.”/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"></head></span></p><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>Document Revision Date</strong></span></h2><p><p><p style="text-align: justify;"><span style="color: #000000;"><head></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><meta name=”revised” content=”tekslate, 6/12/2006”/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"></head><strong> </strong></span></p><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>Document Refreshing</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><head></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><meta http-equiv=”refresh” content=”10”/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"></head></span></p><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>Page Redirection</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><head></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><meta http-equiv=”refresh” content=”10; url=http://www.tekslate.com”/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"></head></span></p><p><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>Setting Cookies</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><head></span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"></head></span></p><p><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>Setting Author Name</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><head></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><meta name=”author” content=”Mahnaz Mohtashim”/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"></head></span></p><p><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Comment</strong></span></h2><p><p><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><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><p><p style="text-align: justify;"><span style="color: #000000;">For example: Given line is a valid comment in HTML</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><!—This is commented out --></span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;">< !- - This is commented out --></span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><strong>Example</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><h1> This is heading 1</h1></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 2</h2></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 3</h2></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 4</h2></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 5</h2></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><h2>This is heading 6</h2></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">This will display following result:</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><strong>This is heading 1</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">This is heading 2</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">This is heading 3</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">This is heading 4</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">This is heading 5</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><em>This is heading 6</em></span></p><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>Line Breaks</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><strong>HTMLCode</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><p></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Will Mateson<br/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Box 61<br/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Cleveland, Ohio<br/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"></p></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><strong>Address</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Will Mateson</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Box 61</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Cleveland, Ohio</span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><strong>HTML Code</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><p>Sincerely,<br/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><br/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><br/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Kevin Sanders<br/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Vice President<p></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><strong>Closing Letter</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Sincerely</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Kevin Sanders</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Vice President</span></p><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Horizontal Rule</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><strong>HTML Code</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><hr /></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Use</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><hr /><hr /></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Them</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><hr/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">sparingly</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><hr/></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><strong>Display</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><strong>-----------------------------------------------------------------------------------------------</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Use</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">------------------------------------------------------------------------</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Them</span></p><p><p><p style="text-align: justify;"><span style="color: #000000;">Sparingly</span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><strong>HTML CODE</strong></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><hr /></span></p><p><p><p style="text-align: justify;"><span style="color: #000000;"><p>1. “The Hobbit”, JRR Tolkein.<br/></span></p><p><p><p><p><ol style="text-align: justify;" start="2"><p><p> <li><span style="color: #000000;">“The Fellowship of the Ring” JRR Tolkein </p></span></li><p><p> <li><span style="color: #000000;">“The Hobbit”, JRR Tolkein.</span></li><p><p> <li><span style="color: #000000;">“The Fellowship of the Ring” JRR Tolkein</span></li><p><p></ol><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML Different Doctypes</strong></span></h2><p><p><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><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><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><p><p><p><p><h4 style="text-align: justify;"><span style="color: #000000;"><strong>Tip:</strong></span></h4><p><p><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML 4.01 Strict</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN</span></p><p><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><p><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML 4.01 Transitional</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01 Transitional//EN</span></p><p><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><p><p><p><h2 style="text-align: justify;"><span style="color: #000000;"><strong>HTML 4.01 Frameset</strong></span></h2><p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"><!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN</span></p><p><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><p><p style="text-align: justify;"><span style="color: #000000;"> </span></p> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3579916064632614" data-ad-slot="8324488981" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <aside id="sidebar" class="col-lg-4 col-md-12 col-xs-12 right-sidebar"> <div style="margin-bottom: 10px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3579916064632614" data-ad-slot="8955044375" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="form-wrapper" id="sticky_nav"> <h4 class="section-sub text-center m-b-5">Drop us a Query</h4> <form class="form_md" action="https://tekslate.com/form_insert" method="POST"> <div class="row"> <div class="col-md-12"> <label for="fullname">Full Name</label> <input type="text" name="fullname" required /> </div> </div> <div class="row"> <div class="col-md-12"> <label for="email">E-mail Address</label> <input type="email" name="email" required /> </div> </div> <div class="row m-t-10" id="fdemo"> <div class="col-md-12"> <div class="row"> <div class="col-md-4 col-4 pr-0 pt-2 country_code"> <select name="c_code" id="r_val" class="form-control"> <option value="US" data-code="+1" data-text="United States">United States</option> <option value="AU" data-code="+61" data-text="Australia">Australia</option> <option value="IN" data-code="+91" data-text="India">India</option> <option value="GB" data-code="+44" data-text="United Kingdom">United Kingdom</option> <option value="CA" data-code="+1" data-text="Canada">Canada</option> <option value="SA" data-code="+966" data-text="Saudi Arabia">Saudi Arabia</option> <option value="AE" data-code="+971" data-text="United Arab Emirates">United Arab Emirates</option> <option value="SG" data-code="+65" data-text="Singapore">Singapore</option> <option value="CH" data-code="+41" data-text="Switzerland">Switzerland</option> <option value="ZA" data-code="+27" data-text="South Africa">South Africa</option> <option value="BR" data-code="+55" data-text="Brazil">Brazil</option> <option value="RU" data-code="+7" data-text="Russia">Russia</option> <option value="RO" data-code="+40" data-text="Romania">Romania</option> <option value="JP" data-code="+81" data-text="Japan">Japan</option> <option value="HK" data-code="+852" data-text="Hong Kong">Hong Kong</option> <option value="PK" data-code="+92" data-text="Pakistan">Pakistan</option> <option value="PH" data-code="+63" data-text="Philippines">Philippines</option> <option value="PL" data-code="+48" data-text="Poland">Poland</option> <option value="EG" data-code="+20" data-text="Egypt">Egypt</option> <option value="IT" data-code="+39" data-text="Italy">Italy</option> <option value="VN" data-code="+84" data-text="Vietnam">Vietnam</option> <option value="ES" data-code="+34" data-text="Spain">Spain</option> <option value="MY" data-code="+60" data-text="Malaysia">Malaysia</option> <option value="MX" data-code="+52" data-text="Mexico">Mexico</option> <option value="FR" data-code="+33" data-text="France">France</option> <option value="NL" data-code="+31" data-text="Netherlands">Netherlands</option> <option value="NO" data-code="+47" data-text="Norway">Norway</option> <option value="CN" data-code="+86" data-text="China">China</option> <option value="SE" data-code="+46" data-text="Sweden">Sweden</option> <option value="DE" data-code="+49" data-text="Germany">Germany</option> <option value="ID" data-code="+62" data-text="Indonesia">Indonesia</option> <option value="UA" data-code="+380" data-text="Ukraine">Ukraine</option> <option value="QA" data-code="+974" data-text="Qatar">Qatar</option> </select> </div> <div class="col-md-8 col-8 pl-0"> <label class="floating-label">Phone *</label> <input type="text" name="phone" required=""> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <label for="message">Message</label> <textarea rows="2" name="message" maxlength="200" ></textarea> </div> </div> <input type="hidden" name="page_url" value="https://tekslate.com/html-tutorials"> <input type="hidden" name="subject" value="Blog - Drop us a Query"> <input type="hidden" name="ip_address" value="3.238.186.43"> <button type="submit" class="btn-60 btn btn-common">Contact Us</button> </form> </div> </aside> </div> </div> </div> <footer> <section class="footer-Content"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 col-mb-12"> <div class="widget"> <h3 class="block-title">About Us</h3> <div class="textwidget"> <p>Tekslate - Get access to the world’s best learning experience at our online learning community where millions of learners learn cutting-edge skills to advance their careers, improve their lives, and pursue the work they love. We provide a diverse range of courses, tutorials, resume formats, projects based on real business challenges, and job support to help individuals get started with their professional career.<br><br>Stay up to date with learning you’ll love!</p> <ul class="footer-social"> <li><a class="facebook" href="https://www.facebook.com/tekslate/" target="_blank" title="Tekslate Facebook"><i class="lni-facebook-filled"></i></a></li> <li><a class="twitter" href="https://twitter.com/tekslatetutor" target="_blank" title="Tekslate Twitter"><i class="lni-twitter-filled"></i></a></li> <li><a class="linkedin" href="https://in.linkedin.com/company/tekslate" target="_blank" title="Tekslate Linkedin"><i class="lni-linkedin-fill"></i></a></li> <li><a class="google-plus" href="https://plus.google.com/+Tekslate" target="_blank" title="Tekslate Google Plus"><i class="lni-google-plus"></i></a></li> </ul> </div> </div> </div> <div class="col-lg-2 col-md-6 col-sm-6 col-xs-6 col-mb-12"> <div class="widget"> <h3 class="block-title">Company</h3> <ul class="menu"> <li><a href="https://tekslate.com/about">About us</a></li> <li><a href="https://tekslate.com/corporate-training">Corporate Training</a></li> <li><a href="https://tekslate.com/become-an-instructor">Become an Instructor</a></li> <li><a href="https://tekslate.com/blogs">Blog</a></li> <li><a href="https://tekslate.com/disclaimer">Disclaimer</a></li> <li><a href="https://tekslate.com/terms-of-service-and-privacy-policy">Privacy Policy </a></li> <li><a href="https://tekslate.com/terms-of-service-and-privacy-policy">Terms of use </a></li> <li><a href="https://tekslate.com/terms-of-service-and-privacy-policy">Refund Policy </a></li> </ul> </div> </div> <div class="col-lg-2 col-md-6 col-sm-6 col-xs-6 col-mb-12"> <div class="widget"> <h3 class="block-title">Courses</h3> <ul class="menu"> <li><a href="https://tekslate.com/aws-training">AWS Training</a></li> <li><a href="https://tekslate.com/servicenow-training">ServiceNow Training</a></li> <li><a href="https://tekslate.com/selenium-training">Selenium Training</a></li> <li><a href="https://tekslate.com/devops-training">Devops Training</a></li> <li><a href="https://tekslate.com/rpa-training">RPA Training</a></li> <li><a href="https://tekslate.com/blockchain-training">Blockchain Training</a></li> </ul> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 col-mb-12"> <div class="widget"> <h3 class="block-title">Our Locations</h3> <ul class="contact-footer"> <li> <span> <i class="lni-map-marker"></i> 3722 Windmill Creek Dr Richmond, TX 77407, USA</span> </li> <li><span> <i class="lni-phone"></i> +1 930 200 4823</span> </li> <li> <span><i class="lni-envelope"></i> <a href="mailto:info@tekslate.com">info@tekslate.com</a></span> </li> <br> <li> <span> <i class="lni-map-marker"></i> #677, 1st Floor, Suite No.506, 27th Main, 13th Cross HSR Layout, Sector 1 Bangalore - 560102</span> </li> <li> <span><i class="lni-phone"></i> +91 9052 943 388</span> </li> <li> <span> <i class="lni-envelope"></i> <a href="mailto:info@tekslate.com">info@tekslate.com</a></span> </li> </ul> </div> </div> <div class="col-md-12"> <p class="m-t-20 m-b-20 text-center">Copyright © 2021 Tekslate.com. All Rights Reserved</p> </div> </div> </div> </section> <div id="copyright"> <div class="container"> <div class="row"> <div class="col-md-6 text-left d-none d-sm-block"> <ul> <li class="color-white"><a href="tel:+1 972 370 3060" class="color-white"> <i class="lni-phone"></i> Call us on : USA - +1 930 200 4823 </a></li> <li class="color-white"><a href="tel:+91 905 294 3388" class="color-white"> | IND - +91 905 294 3388 </a></li> </ul> </div> <div class="col-6 text-left d-block d-sm-none"> <ul> <li class="color-white footer_call_query"><a href="javascript:void(0);" class="color-white"> <i class="lni-phone"></i> Call Our Advisor </a></li> </ul> </div> <div class="col-md-6 col-6 text-right"> <ul> <li class="color-white footer_drop_query"> <i class="lni-envelope"></i> Drop us a Query </li> </ul> </div> </div> </div> </div> </footer> <script data-ad-client="ca-pub-3579916064632614" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <a href="#" class="back-to-top"> <i class="lni-chevron-up"></i> </a> <div class="modal right fade" id="free_demo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="color-white m-0 text-center">Enroll Now for a free demo </h4> <button type="button" class="close pull-right color-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <p class="label_msg text-center"> </p> <div class="col-md-12"> <form class="form_md" action="https://tekslate.com/form_insert" name="form_ins" method="POST" id="contact-form"> <div class="row m-t-10" id="fmail"> <div class="col-md-12"> <label class="floating-label">E-mail Address * <span class="er"></span></label> <input type="email" name="email" required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"> </div> </div> <div class="row m-t-10" id="fdemo"> <div class="col-md-12"> <div class="row"> <div class="col-md-4 col-4 pr-0 pt-2 country_code"> <select name="c_code" id="f_cval" class="form-control"> <option value="US" data-code="+1" data-text="United States">United States</option> <option value="AU" data-code="+61" data-text="Australia">Australia</option> <option value="IN" data-code="+91" data-text="India">India</option> <option value="GB" data-code="+44" data-text="United Kingdom">United Kingdom</option> <option value="CA" data-code="+1" data-text="Canada">Canada</option> <option value="SA" data-code="+966" data-text="Saudi Arabia">Saudi Arabia</option> <option value="AE" data-code="+971" data-text="United Arab Emirates">United Arab Emirates</option> <option value="SG" data-code="+65" data-text="Singapore">Singapore</option> <option value="CH" data-code="+41" data-text="Switzerland">Switzerland</option> <option value="ZA" data-code="+27" data-text="South Africa">South Africa</option> <option value="BR" data-code="+55" data-text="Brazil">Brazil</option> <option value="RU" data-code="+7" data-text="Russia">Russia</option> <option value="RO" data-code="+40" data-text="Romania">Romania</option> <option value="JP" data-code="+81" data-text="Japan">Japan</option> <option value="HK" data-code="+852" data-text="Hong Kong">Hong Kong</option> <option value="PK" data-code="+92" data-text="Pakistan">Pakistan</option> <option value="PH" data-code="+63" data-text="Philippines">Philippines</option> <option value="PL" data-code="+48" data-text="Poland">Poland</option> <option value="EG" data-code="+20" data-text="Egypt">Egypt</option> <option value="IT" data-code="+39" data-text="Italy">Italy</option> <option value="VN" data-code="+84" data-text="Vietnam">Vietnam</option> <option value="ES" data-code="+34" data-text="Spain">Spain</option> <option value="MY" data-code="+60" data-text="Malaysia">Malaysia</option> <option value="MX" data-code="+52" data-text="Mexico">Mexico</option> <option value="FR" data-code="+33" data-text="France">France</option> <option value="NL" data-code="+31" data-text="Netherlands">Netherlands</option> <option value="NO" data-code="+47" data-text="Norway">Norway</option> <option value="CN" data-code="+86" data-text="China">China</option> <option value="SE" data-code="+46" data-text="Sweden">Sweden</option> <option value="DE" data-code="+49" data-text="Germany">Germany</option> <option value="ID" data-code="+62" data-text="Indonesia">Indonesia</option> <option value="UA" data-code="+380" data-text="Ukraine">Ukraine</option> <option value="QA" data-code="+974" data-text="Qatar">Qatar</option> </select> </div> <div class="col-md-8 col-8 pl-0"> <label class="floating-label">Phone *</label> <input type="text" name="phone" required=""> </div> </div> </div> </div> <div class="row m-t-10" id="fdate"> <div class="col-md-12"> <label id="label_date" class="floating-label">Select Your Demo Date <span class="er"></span></label> <input type="text" name="demo_date" required="" id="datepicker" value="" readonly="" class="batch_date" autocomplete="off"> </div> </div> <div class="row m-t-10" id="fmessage"> <div class="col-md-12"> <label class="floating-label">Message <span class="er"></span></label> <textarea rows="3" maxlength="200" name="message"></textarea> </div> </div> <input type="hidden" name="page_url" value="https://tekslate.com/html-tutorials"> <input type="hidden" name="subject" value="Enroll Now for a Free Demo"> <input type="hidden" name="ip_address" value="3.238.186.43"> <button type="submit" class="btn-60 btn btn-common">Contact Us</button> </form> <p class="text-center m-t-10">By providing us with your details, We wont spam your inbox.</p> </div> </div> </div> </div> </div> <div class="footer_call"> <div class="row border-chat"> <div class="col-md-12 col-sm-12 col-xs-12 first-section"> <div class="row"> <div class="col-md-8 col-6"> <p>Call Our Advisor</p> </div> <div class="col-md-4 col-6 query_close"> <a href="javascript:void(0);" class="call-close"><i class="lni-close" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="row border-chat"> <div class="col-md-12 col-sm-12 col-xs-12 second-section"> <div class="num_drop"> <a href="tel:+1 972 370 3060"> USA - +1 972 370 3060 </a> </div> <br> <div class="num_drop"> <a href="tel:+91 905 294 3388"> IND - +91 905 294 3388 </a> </div> </div> </div> </div> <div class="footer_query_box"> <div class="row border-chat"> <div class="col-md-12 col-sm-12 col-xs-12 first-section"> <div class="row"> <div class="col-md-8 col-6"> <p>Drop us a Query</p> </div> <div class="col-md-4 col-6 query_close"> <a href="javascript:void(0);" class="f-close"><i class="lni-close" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="row border-chat"> <div class="col-md-12 col-sm-12 col-xs-12 second-section"> <form class="form_md" action="https://tekslate.com/form_insert" name="form_ins" method="POST" class="m-t-10"> <div class="row" id="fmail"> <div class="col-md-12 er"> <label class="floating-label">E-mail Address *</label> <input type="email" name="email" required=""> </div> </div> <div class="row" id="fdemo"> <div class="col-md-12"> <div class="row"> <div class="col-md-4 col-4 pr-0 pt-2 country_code"> <select name="c_code" id="d_cval" class="form-control"> <option value="US" data-code="+1" data-text="United States">United States</option> <option value="AU" data-code="+61" data-text="Australia">Australia</option> <option value="IN" data-code="+91" data-text="India">India</option> <option value="GB" data-code="+44" data-text="United Kingdom">United Kingdom</option> <option value="CA" data-code="+1" data-text="Canada">Canada</option> <option value="SA" data-code="+966" data-text="Saudi Arabia">Saudi Arabia</option> <option value="AE" data-code="+971" data-text="United Arab Emirates">United Arab Emirates</option> <option value="SG" data-code="+65" data-text="Singapore">Singapore</option> <option value="CH" data-code="+41" data-text="Switzerland">Switzerland</option> <option value="ZA" data-code="+27" data-text="South Africa">South Africa</option> <option value="BR" data-code="+55" data-text="Brazil">Brazil</option> <option value="RU" data-code="+7" data-text="Russia">Russia</option> <option value="RO" data-code="+40" data-text="Romania">Romania</option> <option value="JP" data-code="+81" data-text="Japan">Japan</option> <option value="HK" data-code="+852" data-text="Hong Kong">Hong Kong</option> <option value="PK" data-code="+92" data-text="Pakistan">Pakistan</option> <option value="PH" data-code="+63" data-text="Philippines">Philippines</option> <option value="PL" data-code="+48" data-text="Poland">Poland</option> <option value="EG" data-code="+20" data-text="Egypt">Egypt</option> <option value="IT" data-code="+39" data-text="Italy">Italy</option> <option value="VN" data-code="+84" data-text="Vietnam">Vietnam</option> <option value="ES" data-code="+34" data-text="Spain">Spain</option> <option value="MY" data-code="+60" data-text="Malaysia">Malaysia</option> <option value="MX" data-code="+52" data-text="Mexico">Mexico</option> <option value="FR" data-code="+33" data-text="France">France</option> <option value="NL" data-code="+31" data-text="Netherlands">Netherlands</option> <option value="NO" data-code="+47" data-text="Norway">Norway</option> <option value="CN" data-code="+86" data-text="China">China</option> <option value="SE" data-code="+46" data-text="Sweden">Sweden</option> <option value="DE" data-code="+49" data-text="Germany">Germany</option> <option value="ID" data-code="+62" data-text="Indonesia">Indonesia</option> <option value="UA" data-code="+380" data-text="Ukraine">Ukraine</option> <option value="QA" data-code="+974" data-text="Qatar">Qatar</option> </select> </div> <div class="col-md-8 col-8 pl-0"> <label class="floating-label">Phone *</label> <input type="text" name="phone" required=""> </div> </div> </div> </div> <div class="row" id="fmessage"> <div class="col-md-12 er"> <label id="labelmsg" class="floating-label">Message</label> <textarea rows="3" maxlength="200" name="message"></textarea> </div> </div> <input type="hidden" name="page_url" value="https://tekslate.com/html-tutorials"> <input type="hidden" name="subject" value="Drop us a Query"> <input type="hidden" name="ip_address" value="3.238.186.43"> <button type="submit" class="btn-60 btn btn-common">Contact Us</button> </form> </div> </div> </div> <script src="assets/js/jquery-min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/pikaday.js"></script> <script src="assets/js/jquery.slicknav.js"></script> <script src="assets/js/main.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56305998-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-56305998-1'); </script> </body> </html>