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.
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?
Text or HTML editor
SeaMoney,Coffee Cup(windows) and textpad(windows)
Notepad(for windows),Pico(for Linux), or simpletext/Text edit/Text Wrangler(Mac)
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.
<html> – The main container for HTML pages
<head> – The container for page header information
<title> – The title of the page
<body> – The main body of the page
Remember that before an opening <html> 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.
A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly
An html document with a doctype of HTML 4.01 Transitional :
<!DOCTYPE HTML PUBLIC “-//w3C//DTD HTML 4.01 Transitional//EN”>
<title> Title of the document</title>
The content of the document………
Words to know
Tag : tag is a command the web browser interprets. Tags look like this : <tag>
Element – A complement tag, having an opening <tag> and a closing </tag>
Attribute – Used to modify the value of the HTML element. Elements will often have multiple attributes.
An HTML element is everything from the start tag to the end tag:
star tag * Element conten End tag*
<p> This is a paragaraph </p>
<a href=”default.htm”> This is a link </a>
The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element syntax
An HTML element starts with a start tag/opening tag
An HTML element ends with an end tag/closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes.
Nested HTML Elements
Most HTML elements can be nested(can contain other HTML elements)
HTML documents consist of nested HTML elements.
Don’t Forget the end tag
Some HTML elements might display correctly even if you forget the end tag :
<p> This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional
Never rely on this, Many HTML elements will produce unexpected results and/or errors if you forget the end tag.
Empty HTML elements
HTML elements with no content are called empty elements.
<br> is an empty elements without a closing tag(the <br> tag defines a line break)
TIP : In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br/> of closing empty elements in XHTML(and XML)
Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
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.
<meta name=”description” content=”Learn about Meta Tags.”/>
Document Revision Date
<meta name=”revised” content=”tekslate, 6/12/2006”/>
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.
<meta http-equiv=”refresh” content=”10”/>
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.
<meta http-equiv=”refresh” content=”10; url=http://www.tekslate.com”/>
If you don’t provide a duration then page will be redirected immediately.
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.
<meat http-equiv=”cookie” content=”userid=xyz; expires=Wednesday,08-Aug-00 23:59:59 GMT;/>
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/
Setting Author Name
You can set an author name in a web page using Meta Tag. See an example below.
<meta name=”author” content=”Mahnaz Mohtashim”/>
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.
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.
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.
For example: Given line is a valid comment in HTML
<!—This is commented out –>
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.
< !- – This is commented out –>
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.
<h1> This is heading 1</h1>
<h2>This is heading 2</h2>
<h2>This is heading 3</h2>
<h2>This is heading 4</h2>
<h2>This is heading 5</h2>
<h2>This is heading 6</h2>
This will display following result:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
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.
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.
HTML Horizontal Rule
Use the <hr/> tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag.
<hr /><hr />
Aside from our exaggerated example, the horizontal rule tag can come in handy when publishing work. A table of contents or perhaps a bibliography.
<p>1. “The Hobbit”, JRR Tolkein.<br/>
- “The Fellowship of the Ring” JRR Tolkein </p>
- “The Hobbit”, JRR Tolkein.
- “The Fellowship of the Ring” JRR Tolkein
HTML Different Doctypes
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.
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
The doctype declaration should be the very first in an HTML document, before the <HTML> tag.
Always add a doctype to your pages. This helps the browsers to render the page correctly!
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE peresentational or deprecated elements(like font and center). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like front). Framesets are not allowed:
<!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01 Transitional//EN
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:
<!DOCTYPE HTML PUBLIC”-//w3c//DTD HTMl 4.01//EN