Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
196 views14 pages

HTML (Hyper Text Markup Language)

Uploaded by

nikkimehta786
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
196 views14 pages

HTML (Hyper Text Markup Language)

Uploaded by

nikkimehta786
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML (Hyper Text Markup Language)

• 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 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.
• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages

Creating/editing HTML
For creation and editing we use a plain text editor (like Notepad) to
edit HTML. However, professional web developers often prefer HTML
editors like FrontPage or Dreamweaver, instead of writing plain text.

File name of HTML files


When you save an HTML file, you can use either the .htm or the .html
extension. We use .htm in our examples. It is a habit from the past,
when the software only allowed three letters in file extensions. With
new software it is perfectly safe to use .html.

First Tags
• Every document should have starting tag <HTML> and ending tag </HTML>
• HTML document is divided into to divisions
• Header (Start with <HEAD> end with </HEAD>) – Defines Header portion
• Body (Start with <BODY> end with </BODY>) – Define Body portion

e.g.
<html>
<head>
<Title>My First Page</Title>
</head>

<body>
Content of My First Page
</body>
</html>

HTML TAGS 1
HTML TAGS
Basic Tags
<html></html>
Creates an HTML document

<head></head>
Sets off the title and other information that isn't displayed on the Web
page itself
<body></body>
Sets off the visible portion of the document

Header Tags
<title></title>
Puts the name of the document in the title bar
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, MY, ASP">
To define the special keyword for searching or other purpose
<meta http-equiv="refresh" content="10">
This tag sequence is used to refresh the current page after specified
seconds.

Body Attributes
<body bgcolor=?>
Sets the background color, using name or hex value
<body background=?>
Sets the background with given image
<body text=?>
Sets the text color, using name or hex value
<body link=?>
Sets the color of links, using name or hex value
<body vlink=?>
Sets the color of followed links, using name or hex value
<body alink=?>
Sets the color of links on click
<body topmargin="50">
Sets the top margin of the page
<body leftmargin="50">
Sets the left margin of the page

HTML TAGS 2
Text Tags
<b></b>
Creates bold text
<u></u>
Creates underlined text
<i></i>
Creates italic text
<h1></h1>
Creates the largest headline
<h2></h2> <h3></h3> <h4></h4> <h5></h5>
Creates the different size headline
<h6></h6>
Creates the smallest headline
<pre></pre>
Creates preformatted text
<tt></tt>
Creates teletype, or typewriter-style text
<cite></cite>
Creates a citation, usually italic
<em></em>
Emphasizes a word (with italic or bold)
<strong></strong>
Emphasizes a word (with italic or bold)
<font size=?></font>
Sets size of font, from 1 to 7)
<font color=?></font>
Sets font color, using name or hex value

Graphical Elements
<img src="name">
Adds an image
<img src="name" alt="Picture detail">
Adds an image. The alt attribute specifies alternate text to be
displayed if for some reason the browser cannot find the image.
<img src="name" height=? width=?>
Resize image with specified height and width
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?>
Sets size of border around an image

HTML TAGS 3
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow

Formatting
<div align=?>
The <div> tag defines a division or a section in an HTML document. A
generic tag used to format large blocks of HTML, also used for
stylesheets. alignment can be left / right / center / justify.

<p></p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote></blockquote>
Indents text from both sides

<dl></dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
e.g.
The Code: Definition list:
<dl> Aardvark
<dt>Aardvark An anteater. Animal with a very long
<dd>An anteater. Animal with a very long snout. snout.
<dt>Orangutan Orangutan
<dd>A monkey with very long arms. A monkey with very long arms.
<dt>Zebra Zebra
<dd>A pony with stripes. A pony with stripes.
</dl>

HTML TAGS 4
<ol></ol>
Creates a numbered list
<li></li>
Precedes each list item, and adds a number
Ordered list: Ordered list:
5. Write a Business Plan e. Write a Business Plan
6. Obtain Licensing f. Obtain Licensing
7. Obtain Financing g. Obtain Financing
The Code: The Code:
<ol type="1" start="5"> <ol type="a" start="5">
<li>Write a Business Plan <li>Write a Business Plan
<li>Obtain Licensing <li>Obtain Licensing
<li>Obtain Financing <li>Obtain Financing
</ol> </ol>

<ul></ul>
Creates a bulleted list
Unordered list: Unordered list:
ƒ The unordered list
• The unordered list
ƒ The ordered list
• The ordered list
ƒ The definition list
• The definition list
The Code:
The Code: <ul type="square">
<ul type="disc"> <li>The unordered list
<li>The unordered list <li>The ordered list
<li>The ordered list <li>The definition list
<li>The definition list </ul>
</ul>

Links
<a href="URL">Text</a>
Creates a hyperlink
<a href="URL" target="_blank">Text</a>
Creates a hyperlink and link will be opened in new window
<a href="mailto:EMAIL"></a>
Creates a email link
<a name="NAME"></a>
Creates a target location within a document
<a href="#NAME"></a>
Links to that target location from elsewhere in the document

HTML TAGS 5
Tables
<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
<th></th>
Sets off the table header (a normal cell with bold, centered text)

Table Attributes
<table border=#>
Sets width of border around table cells
<table cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell's border and its contents
<table width=# or %>
Sets width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#>
Sets number of columns a cell should span
<td rowspan=#>
Sets number of rows a cell should span (default=1)
<td nowrap>
Prevents the lines within a cell from being broken to fit

Frames
<frameset></frameset>
Replaces the <body> tag in a frames document; can also be nested
in other framesets
<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or
percentage of w idth
<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or
percentage of width
<frame>

HTML TAGS 6
Defines a single frame — or region — within a frameset
<noframes></noframes>
Defines what will appear on browsers that don't support frames

Frames Attributes
<frame src="URL">
Specifies which HTML document should be displayed
<frame name="name">
Names the frame, or region, so it may be targeted by other frames
<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or
greater than 1
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to
or greater than 1
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no,"
or "auto." The default, as in ordinary documents, is auto.
<frame noresize>
Prevents the user from resizing a frame

e.g.
<HTML>
<frameset rows="10%,50%">
<frame src="a.htm">
<frame src="b.htm">
</frameset><NOFRAMES></NOFRAMES>
</HTML>

HTML TAGS 7
Forms
For functional forms, you'll have to run a CGI script. The HTML just
creates the appearance of a form. A form is an area that can contain
form elements. Form elements are elements that allow the user to
enter information (like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.


<form>
.
.
.
</form>
Creates forms

Input

The most used form tag is the <input> tag. The type of input is
specified with the type attribute. The most commonly used input types
are explained below.

Text Fields
Text fields are used when you want the user to type letters, numbers,
etc. in a form.
<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>
How it looks in a browser:
First name:
Last name:

Note that the form itself is not visible. Also note that in most browsers,
the width of the text field is 20 characters by default.
Password Input
<input type="password" name="password">

Radio Buttons

HTML TAGS 8
Radio Buttons are used when you want the user to select one of a
limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
How it looks in a browser:
Male
Female
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more
options of a limited number of choices.

<form>
Hobbies :
<input type="checkbox" name="chb1" value="Sports">Sports
<br>
<input type="checkbox" name="chb2" value="Reading">Reading
<br>
<input type="checkbox" name="chb3" value="Travelling">Travel
</form>

How it looks in a browser:


Hobbies :
Sports
Reading
Travel

HTML TAGS 9
Textarea (Multiple line text box)
A multi-line text input control. A user can write text in the text-area.
In a text-area you can write an unlimited number of characters.

<form>
<textarea rows="10" cols="30">The cat was playing in the garden.
</textarea>
</form>

How it looks in a browser:


The cat w as playing in the gard

Submit Button

When the user clicks on the "Submit" button, the content of the form
is sent to the server. The form's action attribute defines the name of
the file to send the content to. The file defined in the action attribute
usually does something with the received input.

<form name="input" action=" submit.asp" method="post">


Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How it looks in a browser:
Submit
Username:

If you type some characters in the text field above, and click the
"Submit" button, the browser will send your input to a page called
"submit.asp". The page will show you the received input.

Reset Button
<input type="reset">
Creates a Reset button

HTML TAGS 10
Simple Button
Creates a button
<form action="">
<input type="button" value="Hello world!">
</form>

<input type="image" border=0 name="NAME" src="name.gif">


Creates a Submit button using an image

Drop-Down / Combo (Selection from a List)


<select name="NAME"></select>
Creates a scrolling menu. Size sets the number of menu items visible
before you need to scroll.
<option value="Ajmer">Ajmer</option>
Sets off each menu item
<form>
Choose Car:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

How it looks in a browser:


Volvo
Choose Car :

Fieldset
This example demonstrates how to draw a border with a caption
around your data.
<fieldset>
<legend>Health information:</legend>
<form action="">
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>

How it looks in a browser:

HTML TAGS 11
Sending Email
<form action="MAILTO:[email protected]" method="post"
enctype="text/plain">

This form sends an e-mail to W3Schools.<br>


Name:<input type="text" name="name" value="amit"><br>
Mail:<input type="text" name="mail" value="[email protected]"><br>
Comment:<input type="text" name="comment" value= "Text"><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

How it looks in a browser:

HTML TAGS 12
Sample Registration Page

<HTML>
<HEAD>
<TITLE>Registration Page</TITLE>
</HEAD>

<BODY>
<FORM NAME="form1" METHOD="post" ACTION="thanks.htm">
<P><B><FONT SIZE="4">Registration Form </FONT></B></P>
<TABLE BORDER="1">
<TR><TD>Name</TD><TD><INPUT TYPE="text" NAME="Name" SIZE="50"></TD></TR>
<TR><TD>Sex</TD><TD><INPUT TYPE="radio" NAME="Sex" VALUE="Male">Male
<INPUT TYPE="radio" NAME="Sex" VALUE="Female">Female</TD></TR>
<TR><TD>Address</TD><TD><TEXTAREA NAME="Address"></TEXTAREA></TD></TR>
<TR><TD>City</TD><TD><SELECT NAME="City">
<OPTION VALUE="Ajmer">Ajmer</OPTION>
<OPTION VALUE="Jaipur">Jaipur</OPTION>
<OPTION VALUE="Bikaner">Bikaner</OPTION>
</SELECT></TD></TR>
<TR><TD>Email</TD><TD><INPUT TYPE="text" NAME="Email" SIZE="25"></TD></TR>
<TR><TD>Hobbies</TD><TD><INPUT TYPE="checkbox" NAME="chb1" VALUE="Sports">Sports
<INPUT TYPE="checkbox" NAME="chb2" VALUE="Travelling">Travelling
<INPUT TYPE="checkbox" NAME="chb3" VALUE="Reading">Reading
<INPUT TYPE="checkbox" NAME="chb4" VALUE="Other">Other
</TD></TR>
<TR><TD>Photo</TD><TD><INPUT TYPE="file" NAME="file"></TD></TR>
</TABLE>
<P><INPUT TYPE="submit" NAME="Submit" VALUE="Submit">
<INPUT TYPE="reset" NAME="Reset" VALUE="Clear Form"></P>
</FORM>
</BODY>
</HTML>

HTML TAGS 13
Misc
Entities
&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Other Elements
<!-- This is a comment -->

Indent
<blockquote>
Text quoted from some source.
</blockquote>

Address

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

HTML TAGS 14

You might also like