HTML

HTML (HYPER TEXT MARKUP LANGUAGE)
INTRODUCTION To HTML
HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
HTML TAGS

HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
Container and Empty Tags

All HTML tags are enclosed in angle brackets < and > i.e. Opening Tag : <HTML > and Closing tag : </HTML> same as opening tag except a / (slash) mark. Tags are not case-sensitive i.e. there is no difference in small and capital letters in tags. There are two types of tags:
Container Tags
Tags which have both the opening and closing i.e. <TAG> and </TAG> are called container tags. They hold the text and other HTML tags in between the tags. The <HTML>, <HEAD>, <TITLE> and <BODY> tags are all container tags.
Empty Tags
Tags, which have only opening and no ending, are called empty tags. The <HR>, which is used to draw Horizontal, rule across the width of the document, and line break <BR> tags are empty tags.
HTML Documents = Web Pages

HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
HTML DOCUMENT STUCTURE

<html> <head> <title>web page title</title> </head> <body> content of the web page document . </body> </html>
The HTML base Element

The <base> tag specifies a default address or a default target for all links on a page: <head> <base href=demo.html" /> <base target="_blank" /> </head>
The HTML link Element

The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

The HTML style Element

The <style> tag is used to define style information for an HTML document. Inside the style element you specify how HTML elements should render in a browser: <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
The HTML script Element

The <script> tag is used to define a client-side script, such as a JavaScript. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. <head> <script type="text/javascript"> document.write("Hello World!") </script>
HTML HEADINGAS
HTML headings are defined with the <h1> to <h6> tags. Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> . <h6>This is a heading</h6>
HTML PARAGRAPHS
HTML paragraphs are defined with the <p> tag. Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML LINKS

To create a link to an anchor, use the same <a> tag you used to create the anchor. The <a> tags used to create links are sometimes called link tags. Use the href attribute, which is short for Hypertext Reference, to indicate the location to jump to.
href can refer to an anchor that you place in the document or to a different Web page or a resource anywhere on the Internet it is important to note that the href attribute is case sensitive
Example <a href=URL>This is a link</a>
Linking to a Document
To create a link to a document, use the same <a> tag with the href attribute <a href=contact.htm>Contact me</a>. In order for the browser to be able to locate and open contact.htm, it must be in the same folder as the document containing the link.
Linking to a Section of a Document
To navigate to a specific location elsewhere in a document, rather than the top, you can set anchors and link to an anchor you create within the document.
for example, to create a link to a section in the Web page home.htm marked with an anchor name of interests, you create an anchor in home.htm in the section on Interests, and then enter the following HTML code in the current document:
<a href=home.htm#interests> View my interests </a>
Linking to Documents in Other Folders

Browsers assume that if no folder information is given, the file is in the same folder as the current document. When referencing a file located in a different folder than the link tag, you must include the location, or path, for the file. HTML supports two kinds of paths: absolute paths and relative paths.
Hypertext Links
Link to Absolute URL Use a complete URL beginning with http:// <a href=c://host/path/chapter.html> chapter</a> Link to Relative URL Use a filename or ralative path to filename <a href=chapter.html>chapter</a>
HTML IMAGES
HTML images are defined with the <img> tag. Example <img src=image.jpg" width="104" height="142" />
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content: Example <HR ALIGN=LEFT WIDTH=10 SIZE=4> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: Example 
HTML TEXT FORMATTING
<p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <address> Written by google.com<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: 220,anjali socity<br /> Phone: +12 34 56 78 </address>
HTML Attributes
Attributes provide additional information about HTML elements. HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
HTML Text Formatting Tags

<b>Defines bold text <big>Defines big text <em>Defines emphasize text <i>Defines italic text <small>Defines small text <strong>Defines strong text <sub>Defines subscripted text <sup>Defines superscripted text <ins>Defines inserted text <del>Defines deleted text
HTML <blockquote> Tag

The <blockquote> tag defines a long quotation. A browser inserts white space before and after a blockquote element. It also insert margins for the blockquote element. Example: <blockquote> Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long
The HTML <font> Tag

<p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p> <p><font size="3" face="verdana" color="blue"> This paragraph is in Arial, size 5, and in red text color.
HTML Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: Frames are not expected to be supported in future versions of HTML Frames are difficult to use. (Printing the entire page is difficult). The web developer must keep track of more HTML documents
The HTML frameset Element
The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
The HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset. In the example below we have a frameset with two columns. <frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset>
iframe
An iframe is used to display a web page within a web page. Syntax for adding an iframe: <iframe src="URL"></iframe>The URL points to the location of the separate page. Iframe - Set Height and Width The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). Example <iframe src="demo_iframe.htm" width="200"
Continue..

The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border:
Example: <iframe src="demo_iframe.htm" frameborder="0"></iframe>
Use iframe as a Target for a Link

An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe: Example <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href=abc.html" target="iframe_a">abc</a></p>
Example of noframe
<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> <noframes> <body>Your browser does not handle frames!</body> </noframes> </frameset> </html>
Noresize in frameset
<html> <frameset rows="50%,50%"> <frame noresize="noresize" src="frame_a.htm" /> <frame noresize="noresize" src="frame_b.htm" /> </frameset> </html>
HTML Headings
<html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3>
<h4>This is heading 4</h4>

<h5>This is heading 5</h5> <h6>This is heading 6</h6>
</body>
</html>
HTML Style

<html> <body style="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color:red;"> This text is in Verdana and red</p> <p style="font-family:times;color:green;"> This text is in Times and green</p> <p style="font-size:30px;">This text is 30 pixels high</p> </body> </html>
Html Imagemap

<html> <body>
<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />

<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" /> </map> </body> </html>
HTML Form
<html> <body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30" /><br /> E-mail: <input type="text" size="30" /><br /> Date of birth: <input type="text" size="10" /> </fieldset> </form> </body> </html>

HTML

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML (HYPER TEXT MARKUP LANGUAGE)

Container and Empty Tags

HTML Documents = Web Pages

HTML DOCUMENT STUCTURE

The HTML base Element

The HTML link Element

The HTML style Element

The HTML script Element

Example <a href=URL>This is a link</a>

Linking to a Section of a Document

Linking to Documents in Other Folders

The <hr /> tag creates a horizontal line in an HTML page.

HTML TEXT FORMATTING

HTML Text Formatting Tags

HTML <blockquote> Tag

The HTML <font> Tag

The HTML frameset Element

The HTML frame Element

Example: <iframe src="demo_iframe.htm" frameborder="0"></iframe>

Use iframe as a Target for a Link

<h4>This is heading 4</h4>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />

You might also like