Html

HTML- Concept of Hypertext
HTML, which stands for HyperText Markup Language, is the predominant markup
languagefor web pages. HTML is the basic building-blocks of webpages.

HTML is written in the form of HTML elements consisting of tags, enclosed in angle
brackets(like <html>), within the web page content. HTML tags normally come in pairs
like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is the end
tag (they are also calledopening tags and closing tags).
The purpose of a web browser is to read HTML documents and compose them into
visual or audible web pages. The browser does not display the HTML tags, but uses
the tags to interpret the content of the page.
HTML elements form the building blocks of all websites. HTML allows images and
objects to be embedded and can be used to create interactive forms. It provides a
means to create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. It can embed scripts in
languages such as JavaScript which affect the behavior of HTML webpages.
Elements
HTML documents are composed entirely of HTML elements that, in their most general
form have three components: a pair of element tags, a "start tag" and "end tag"; some
element attributes within the start tag; and finally, any textual and
graphical content between the start and end tags. The HTML element is everything
between and including the tags. Each tag is enclosed in angle brackets.

A pair of tags and the content these include are known as an element .

HTML section tags

To organize the various parts of HTML that describes a Web page, we use a
set of section tags. The types of html tags in each section of web page
definition have a specifics purpose:

1- <html></html> These occur at the start and end of an HTML document.
Start and end html tags enclose all the other html tags we use to describe
the web page.
2- <head></head> Start and end header tag immediately follow the start
HTML tag (<html>) and denote the web page header. We can use tags in
the web page header to include such information as the name of author and
date of the created page. In addition, we insert tags with information that
describes your page so that Web search engines can add references to your
page to their search indexes. Of the HTML tags and information you place
in the header section, the visitor’s browser displays only the Web page title.
You insert the Web page title in the header section between start and end
title tags (<title></title>), as shown in the code sample that follows this list
of section tags.
3- <body></body> Start and end body tag immediately follow the web page
header section and denote the web page body. The body section of the web
page contains the tags that tells the web browser what to display onscreen
and how we want it to look.

The < head > element: Often referred to as the head of the page, this
contains information about the page (this is not the main content of the
page). For example, it might contain a title and a description of the
page, or instructions on where a browser can find CSS rules that
explain how
the document should look. It consists of the opening < head > tag, the
closing < /head > tag, and everything in between.
The < body > element: Often referred to as the body of the page, this
contains the information you actually see in the main browser window.
It consists of the opening < body > tag, closing < /body > tag, and
everything in between

Building HTML document:-

HTML text documents are actually quite simple to create. To create an
HTML document, you open a text-editing program and then type in the
HTML code. After you have entered the HTML statements, you save your
document as a text file with an .htm or .html extension. For example, start

your favorite text editor (such as Windows Notepad) now, and enter the
following HTML:

<html>
<head>
<title>Example of a Simple HTML Document</title>
</head>
<body>
<p>HELLO WORLD! Here I am.</p>
</body>
</html>

Now, save your work to a Web page file (that is, a file with an .htm or .html
extension) on your hard drive. Create a folder (such as C:HTMLExamples) in
which to store the Web pages. Then, save the code you entered for this
example as TestPage.htm in the folder you create.

Then start your Web browser, and type File:// followed by the drive letter and
pathname of your Web page into the browser’s Address field. For example, if
you saved the Web page in this example as TestPage.htm in the
C:HTMLExamples folder, type File://c:/HTMLExamples/TestPage.htm
into the browser’s Address field. Then, press ENTER. Your Web browser, in
turn, will display the Web page.

Inserting text:
In standard word processing, a paragraph defines a group of sentences.
Typically, a blank line or an indented first word identifies the start of a new
paragraph. When you insert text into a Web page, the </p> tag controls the
end of text and the subsequent beginning of the next paragraph. The </p> tag
instructs the Web browser to move down one line, insert a blank line, and then
to begin the next paragraph on the line below the blank line for the text
following the </p> tag.
For eg:
<html>
<head>
<title>Welcome to Lots of Text </title>
</head>
<body>

<p>The text between the two paragraph tags defines a
single paragraph. Paragraphs contain one or more
sentences</p>
<p>The next paragraph starts here with a blank line
inserted between the two paragraphs</p>
</body>
</html>

HTML also has several text formatting tags you can use to change the
appearance of text, usually for emphasis. To apply a formatting style, place
the format’s start tag at the beginning of the text you want to style. The
following list describes three of the most common formatting tags.

• <b></b> Text placed between the Bold tags is displayed in bold font.

• <i></i> Text placed between the Italic tags is displayed in italic font.

• <u></u> Text placed between the Underline tags is displayed with an
underline.

Images:

For eg:
<html>
<head>
<title> Example of text and graphic placement
</title>
</head>
<body>
<img src="flower.jpg">
</body>
</html>

Hyperlinks:
A hypertext link is a single word or a group of words upon which a visitor
clicks to instruct the Web browser to retrieve a Web page (or other file) from
the Web server.

<a href="info.htm">Click here to move to the next
page.</a>

Table:

The HTML tables you use to display content on a Web page, like the tables you see in
printed materials consist of columns of data arranged in rows.

• <table></table> Alert the Web browser that it is to treat the text between the start and
end tags as a table
• <tr></tr> (table row) Alert the Web browser that it is to put the data items and perhaps
headings between the start and end tags on a single, new row in the table
• <td></td> (table data) Alert the Web browser that the HTML tags, attributes, and text
(if any) between the start and end tags is content (in other words, the data) that the Web
browser is to display in a table column

For example, you would write the following HTML code to have a Web browser display
the simple
three-column, two-row table shown here:
<table border="1">
<tr><td>1</td>
<td>2</td>
<td>3</td></tr>
<tr><td>4</td>
<td>5</td>
<td>6</td></tr>
</table>

• border Attribute in a <table> tag that tells the Web browser the number of pixels wide
to draw the border around the perimeter of the table and each of the table’s cells
• <caption> </caption> Alert the Web browser that it is to style the text between the
start and end tags as a caption (most browsers use a boldface font)
• <th></th> (table heading) Alert the Web browser that the text between the start and end
tags is to be formatted as heading text (most browsers use a boldface font)

<table border="1" >
<caption>Tags and Attributes Used to Create a
Table</caption>
<tr><th>HTML Tag</th>
<th>Description</th></tr>

Form:

From a designer’s viewpoint, forms let you establish a dialog with your site’s visitors.
Instead of using text and pictures to send information, forms let you use text boxes, check
boxes, radio buttons, and selection menus to retrieve information.

<form name="ExampleForm">
<p>First Name: <input type="text" name="FirstName"
size="15">
Last Name: <input type="text" name="LastName" size="20"></p>
<p>[Form RESET and SUBMIT pushbuttons go here]</p>
</form>

<html><body>
<script language="JavaScript">

</script>

<input type="checkbox" name="DT" value="ON">Desktop
<input type="radio" value="Yes" name="ShareEmail">Yes

Frames:

Frames divide a browser window into two or more separate pieces or panes, with each
pane containing a separate web page. One of the key advantages that frames offer is
that you can load and reload single panes without having to reload the entire contents
of the browser window. A collection of frames in the browser window is known as a
frameset .

A frameset divides the window into rows and columns (rather like a table). The simplest
of framesets might just divide the screen into two rows, whereas a complex frameset
could use several rows and columns.

< html >
< head >
< title > Frames example < /title >
< /head >
< frameset rows=”150, *, 100” >
< frame src=”top_frame.html” / >
< frame src=”main_frame.html” / >
< frame src=”bottom_frame.html” / >
< noframes > < body >
This site uses a technology called frames. Unfortunately, your
browser does not support this technology. Please upgrade
your browser and visit us again!
< /body > < /noframes >
< /frameset >
< /html >

The border attribute specifies the width of the border of each frame in pixels.
border=”10”

The frameborder attribute specifies whether a border should be displayed between
frames. The following indicates that there should not be any borders (which is the same
as if the border attribute is given a value of 0 ):
frameborder=”0”

List:

You can create three types of lists in XHTML:
Unordered lists , which are like lists of bullet points

Ordered lists , which use a sequence of numbers or letters instead of bullet points
Definition lists , which allow you to specify a term and its definition

< ul >
< li > Bullet point number one < /li >
< li > Bullet point number two < /li >
< li > Bullet point number three < /li >
< /ul >

< ol >
< li > Point number one < /li >
< li > Point number two < /li >
< li > Point number three < /li >
< /ol >

< ol type=”i” >
< /ol >

< ol type=”A” start=”4” >
< /ol >

Html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html

Similar to Html (20)

More from Ankush Srivastava

More from Ankush Srivastava (12)

Recently uploaded

Recently uploaded (20)

Html