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

<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.

Doctypes

A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly

Example

An html document with a doctype of HTML 4.01 Transitional :

<!DOCTYPE HTML PUBLIC “-//w3C//DTD HTML 4.01 Transitional//EN”>

http://www.w3.org/TR/html4/loose.dtd

<html>

<head>

<title> Title of the document</title>

</head>

<body>

The content of the document………

</body>

</html>

HTML Tags

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.

HTML Elements

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>

<br/>

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.

Document Description

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.

<head>

</head>

Document Revision Date

<head>

</head>

Document Refreshing

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.

<head>

</head>

Page Redirection

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.

<head>

</head>

If you don’t provide a duration then page will be redirected immediately.

Setting Cookies

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.

<head>

</head>

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.

<head>

</head>

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

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.

Example

<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

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.

HTMLCode

<p>

Will Mateson<br/>

Box 61<br/>

Cleveland, Ohio<br/>

</p>

Address

Will Mateson

Box 61

Cleveland, Ohio

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 Code

<p>Sincerely,<br/>

<br/>

Kevin Sanders<br/>

Vice President<p>

Closing Letter

Sincerely

Kevin Sanders

Vice President

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.

HTML Code

<hr />

Use

Them

<hr/>

sparingly

<hr/>

Display

-----------------------------------------------------------------------------------------------

Use

------------------------------------------------------------------------

Them

Sparingly

Aside from our exaggerated example, the horizontal rule tag can come in handy when publishing work. A table of contents or perhaps a bibliography.

HTML CODE

<hr />

<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.

Tip:

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

http://www.w3.org/TR/html4/strict.dtd>

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

http://www.w3.org/TR/html4/loose.dtd>

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

http://www.w3.org/TR/html4/frameset.dtd>