Scribd
Upload
77 views

HTML 4

html

Uploaded by

jhansi rani
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
77 views

HTML 4

html

Uploaded by

jhansi rani
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML 4

INTRODUCTION TO HTML
 HTML stands for “Hypertext Markup Language”. “Hypertext” means “the text that can be
transferred from internet server to internet client”.
 HTML is a markup language. A markup language is a language that syntax will be in the form of
tags.
 HTML is used to design web pages. That means HTML is used to create elements (such as headings,
paragraphs, icons, menus, logos, images, textboxes, buttons etc.) in the web pages.
 HTML is easy language to understand.
 HTML is “client side language”. That means the html code executes on the client (browser).
 HTML is supported by all the browsers such as Google Chrome, Mozilla Firefox, Microsoft Internet
Explorer, Safari, Opera and other browsers.
 HTML is developed by “Tim Berners-Lee” and maintained by “W3C” (World Wide Web
Consortonium).
 HTML is used in all real web sites today.
 The file extension should be “.html”.
 HTML is the interpreter-based language. That means the HTML code will be converted into
machine language in line-by-line format. Browser interprets HTML code.

TAG
 A tag is a keyword, enclosed within “<” and “>” in HTML language.

SYNTAX : <tag>

TYPES OF TAGS
 Tags are two types:
 Paired tags: Contains starting tag and ending tag.
 Ex: <h1>hello</h1>
 Unpaired tags: Contains single tag only (no separate ending tag).
 Ex: <hr>

SYNTAX OF HTML PROGRAM


 Every html program should have the following syntax:

<html>
<body>
Your web page content here
</body>
</html>

FIRST EXAMPLE IN HTML. FILE NAME: PAGE1.HTML


 Open Notepad / Edit Plus.
 Type the following program:

<html>
<body>
Hello, World
</body>
</html>

 Go to “File” menu and click on “Save”.


 Type the file name as “Page1.html”.
 Select the folder as “Desktop”.
 Click on “Save”.
 Go to desktop folder and double click on “Page1.html”.
 It opens “Page1.html” in browser (Google Chrome, Mozilla Firefox, Internet Explorer etc.).
 You will get the output as follows:

<P>
 It is used to create a paragraph.
 It is a paired tag.

SYNTAX:
<p>paragraph here</p>

EXAMPLE
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

<H1>
 It is used to create first level heading (main heading).
 It is a paired tag.

SYNTAX
<h1>heading here</h1>

EXAMPLE
<h1>Heading 1 here</h1>

<H2>
 It is used to create second level heading (sub heading).
 It is a paired tag.

SYNTAX
<h2>heading here</h2>

EXAMPLE
<h2>Heading 2 here</h2>

<H3>
 It is used to create third level heading (sub heading).
 It is a paired tag.

SYNTAX
<h3>heading here</h3>

EXAMPLE
<h3>Heading 3 here</h3>

<H4>
 It is used to create third level heading (sub heading).
 It is a paired tag.

SYNTAX
<h4>heading here</h4>

EXAMPLE
<h4>Heading 4 here</h4>

<H5>
 It is used to create third level heading (sub heading).
 It is a paired tag.

SYNTAX
<h5>heading here</h5>

EXAMPLE
<h5>Heading 5 here</h5>

<H6>
 It is used to create third level heading (sub heading).
 It is a paired tag.

SYNTAX
<h6>heading here</h6>

EXAMPLE
<h6>Heading 6 here</h6>

<B>
 It is used to display the text in bold.
 It is a paired tag.
SYNTAX
<b>bold text</b>

EXAMPLE
<b>Hello</b>

<I>
 It is used to display the text in italic.
 It is a paired tag.

SYNTAX
<i>italic text</i>

EXAMPLE
<i>Hello</i>

<STRONG>
 It is used to display the text in strong. <b> and <strong> both are same.
 It is a paired tag.

SYNTAX
<strong>strong text</strong>

EXAMPLE
<strong>Hello</strong>

<EM>
 It is used to display the text in emphasis. <i> and <em> both are same.
 It is a paired tag.

SYNTAX
<em>emphasis text</em>

EXAMPLE
<em>Hello</em>

<U>
 It is used to display the text in underline.
 It is a paired tag.

SYNTAX
<u>underline text</u>
EXAMPLE
<u>Hello</u>

<STRIKE>
 It is used to display the text in strikeout.
 It is a paired tag.

SYNTAX
<strike>strikeout text</strike>

EXAMPLE
<strike>Hello</strike>

<SUP>
 It is used to display the text in superscript (The text appears a bit upper side of normal line).
 It is a paired tag.

SYNTAX
<sup>superscript text</sup>

EXAMPLE
<sup>Hello</sup>

<SUB>
 It is used to display the text in subscript (The text appears a bit bottom side of normal line).
 It is a paired tag.

SYNTAX
<sub>subscript text</sub>

EXAMPLE
<sub>Hello</sub>

<BR>
 It is used to moves the cursor to the next line.
 It is an unpaired tag.

SYNTAX
<br>

EXAMPLE
<br>

<HR>
 It is used to display a horizontal line (horizontal ruler).
 It is an unpaired tag.

SYNTAX
<hr>

EXAMPLE
<hr>

<ABBR>
 It is used to display full-form of a short-form when the user places mouse pointer on it.
 It is a paired tag.

SYNTAX
<abbr title="full form here">short form here</abbr>

EXAMPLE
<abbr title="as soon as possible">ASAP</abbr>

<BDO>
 bdo stands for Bi-Directional Override.
 The <bdo> tag is used to override the current text.
 It is a paired tag.

SYNTAX
<bdo dir="rtl">your text here</bdo>

EXAMPLE
<bdo dir="rtl">Hai how are you</bdo>

ATTRIBUTES
 dir:
 ltr: It displays the text in left-to-right.
 rtl: It displays the text in right-to-left.

<PRE>
 It is used to display the text as-it-is, along with the spaces and line breaks.
 It is a paired tag.
SYNTAX
<pre>your text here</pre>

EXAMPLE
<pre>
one two
three four five
</pre>

<IMG>
 It is used to display an image in the web page.
 It is an unpaired tag.

SYNTAX
<img src="image path here">

EXAMPLE
<img src="img1.jpg" width="200px" height="130px" title="this is tooltip">

ATTRIBUTES
 src
 It is used to specify path of the image file. If the image file and html file both are in the
same folder, no need to specify the full path of the image.
 width
 It is used to specify width (horizontal size) of the image.
 height
 It is used to specify height (vertical size) of the image.
 title
 It is used to specify the tooltip (that appears when the user places mouse pointer on the
image).
 alt
 It is used to specify the alternate text (that appears when the image is not loaded in the
browser at run time).

<A>
 It is used to create a hyperlink. When the user clicks on the hyperlink, the specified web page or
web site will be opened.
 It is a paired tag.

SYNTAX
<a href="target url here">link text here</a>
<a href="document to download" download>Display Text</a>
EXAMPLE
<a href="http://www.google.com">Google</a>
<a href="sample.docx" download>Sample Document</a>

ATTRIBUTES
 href:
 It is used to specify the address of web page or web site that is to be opened when the user
clicks on the hyperlink.
 target="_blank":
 It is used to open the target web page or web site in a separate browser tab.
 download:
 It is used to download the specified document.

<UL>
 UL stands for “Unordered List”.
 It is used to display the list of items with bullets.
 Inside <ul> tag, you should place one or more <li> tags.
 It is a paired tag.

SYNTAX
<ul>
<li>text here</li>
<li>text here</li>
…
</ul>

EXAMPLE
<ul>
<li>India</li>
<li>UK</li>
<li>US</li>
<li>Canada</li>
</ul>

ATTRIBUTES
 type
 "disc" or "square" or "circle".

<OL>
 OL stands for “Ordered List”.
 It is used to display the list of items with numbers.
 Inside <ol> tag, you should place one or more <li> tags.
 It is a paired tag.
SYNTAX
<ol>
<li>text here</li>
<li>text here</li>
…
</ol>

EXAMPLE
<ol>
<li>India</li>
<li>UK</li>
<li>US</li>
</ol>

Attributes
 type
 "1" or "A" or "a" or "I" or "i"

<DL>
 DL stands for “Definition List”.
 It is used to display a collection of definitions.
 Inside <dl> tag, you should place one or more <dt> and <dd> tags.
 It is a paired tag.
 <dt> and <dd> tags are also paired tags.
 <dt> is used to specify definition title.
 <dd> is used to specify definition data.

SYNTAX
<dl>
<dt>title here</dt>
<dd>definition here</dd>
<dt>title here</dt>
<dd>definition here</dd>
…
</dl>

EXAMPLE
<dl>
<dt>HTML</dt>
<dd>HTML is used to design web pages.</dd>
<dt>CSS</dt>
<dd>CSS is used to apply styles.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is used to create functionality.</dd>
</dl>

<TABLE>
 <table> tag is used to display table type of data in the web page.
 A table is a collection of rows. Each row is a collection of cells.
 A table is represented as <table> tag; A row is represented as <tr>; A cell is represented as <td>.
 Inside the <table> tag, we have to use <tr>; Inside the <tr> tag, we have to use <td>.
 If the cell is representing the column heading, you can use <th> tag, instead of <td> tag.
 <caption> tag is used to specify a title for the table.
 “tr” stands for “Table row”.
 “td” stands for “Table data”.
 “th” stands for “Table header”.
 <table>, <tr>, <th>, <td> and <caption> tags are paired tags.

SYNTAX
<table>
<tr>
<td>data here</td>
<td>data here</td>
…
</tr>
…
</table>

EXAMPLE
<table border="1">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
</table>

ATTRIBUTES OF <TABLE> TAG


 border
 “0”: No border
 “1”: with border
 Cellpadding
 “n px”: Specifies the no. of pixels distance between cell border and cell content.

ATTRIBUTES OF <TD> OR <TH> TAG


 rowspan
 “n”: Specifies the no. of rows to merge. The current cell occupies the space of ‘n’ no. of cells.
 colspan
 “n px”: Specifies the no. of pixels distance between cell border and cell content.

<IFRAME>
 <iframe> tag is used to display another web page or web site within the current web page.
 Iframe stands for “inline frame”.
 <iframe> is a paired tag.

SYNTAX
<iframe src="web site address here" width="n px" height="n px">
</iframe>

EXAMPLE
<iframe src="http://www.airtel.in/" width="400px" height="300px">
</iframe>

ATTRIBUTES OF <IFRAME> TAG


 src
 “web site path”: Specifies the web site or web page path that is to be displayed in the iframe.
 width
 “n px”: Specifies the horizontal size of the iframe.
 height
 “n px”: Specifies the vertical size of the iframe.

HTML ENTITIES
 HTML Entities are pre-defined codes for displaying special symbols within the web page.
 HTML Entities are case sensitive. These must be used in lower case only.

Result Description Entity Name Entity Number


non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
™ trademark &trade; &#8482;

<TITLE>
 <title> tag is used to specify the title of the web page that appears in the browser’s title bar.
 <title> tag should be used in <head> tag only.
 <head> tag is used to specify non-content information of the page.
 <title> is a paired tag.
SYNTAX
<title>Title here</title>

EXAMPLE
<title>My title</title>

<META>
 <meta> tag is used to specify meta data (additional details) about the web page.
 <meta> tag provides information about the web page. Google like search engines will display your
web page in the google search results, whenever one or more keywords are matching. You must
upload your web page in the internet server to really use this.
 <meta> tag is an unpaired tag.

EXAMPLE
<meta name="keywords" content="Sony, Television, Price, Hyderabad">
<meta name="description" content="Sony LED BRAVIA Prices">
<meta name="author" content="Harsha">

<FORM>
 <form> tag is used to group-up the input elements; so that we can submit the entire form to the
server.
 A form is a collection of form elements such as <input>, <textarea> and <select>.
 <form> is a paired tag.

SYNTAX
<form action="server page address here" method="get">
form elements here
</form>

EXAMPLE
<form action="page2.aspx" method="get">
<input type=”text” name=”Username”>
<input type=”submit”>
</form>

ATTRIBUTES OF <FORM> TAG


 action: Used to specify the server page address to which the form is to be submitted.
 method:
 get
 Displays the parameter names and values in the browser’s address bar.
 Useful for searching and retrieving the data from database.
 post
 Hides the parameter names and values in the browser’s address bar and allows you to pass
the data in hidden format.
 Useful for insert, update, delete, registration and login operations.

<INPUT>
 <input> tag is used to create a form control (form element).
 Form elements such as Textbox, Checkbox, Radio button, Browser button, submit button etc.
 <input> is an unpaired tag.

SYNTAX
<input type="option here">

EXAMPLE
<input type="text">

ATTRIBUTES OF <INPUT> TAG


 type
 “text”: Creates textbox. Textbox is used to accept a string value from the user.
 “password”: Creates password textbox. Password textbox is used to accept a password from
the user.
 “submit”: Creates a submit button. Submit button is used to submit the form to the server
page.
 “image”: Creates a “image submit” button. Submit button is used to submit the form to the
server page.
 “button”: Creates a normal button. You can call “JavaScript Click event” when the user clicks
on the button.
 “checkbox”: Creates a check box. Checkbox is used to display Yes/No type of option to the
user.
 “radio”: Creates a radio button. Radiobutton is used to display two or more options to the
user and allow the user to select any one of them.
 “hidden”: Creates a hidden field. Hidden field will not be appear in the web page; but will be
submitted to the server.
 “file”: Creates a file browse button. Browse button is used for “attachment” option.
 “reset”: Creates a reset button. Reset button clears all fields (textboxes and others) within the
current form.
 maxlength
 Specifies the maximum no. of characters that can be typed in the textbox.
 readonly="readonly"
 Makes the textbox as readonly; so that the user can see the value but can’t type anything the
textbox.
 tabindex
 Specifies tab order.
 value
 Represents the current value of the input element.
 name
 Represents programmatic name of the input element that will be submitted to the server.
 id
 Represents identification name of the input element that can be used in html, css, and
javascript to get the element programmatically.
 src
 Used to specify the path of the image in case of <input type="image">

 checked=”checked”
 Used to check the checkbox or radio button, in case of <input type=”checkbox”> or <input
type=”radio”>
 disabled=”disabled”
 Used to disable the button.

<LABEL>
 <label> tag is used to create field heading.
 When the user clicks on the label, cursor will be appeared in the associated textbox
automatically.
 <label> is a paired tag.

SYNTAX
<label for="id of textbox here">label text here</label>

EXAMPLE
<label for="TextBox1">Username</label>
ATTRIBUTES OF <LABEL> TAG
 for: Used to specify the id of the textbox that is associated with the textbox.

<BUTTON>
 <button> tag is used to display a submit button with image and text.
 <button> is a paired tag.
SYNTAX
<button>
<img src="image file path here">
Text here
</button>

EXAMPLE
<button>
<img src="ok.png">
<br>
OK
</button>

<SELECT>
 <select> tag is used to create a dropdownlist or listbox.
 DropDownList is used to display few options to the user and allow the user to select any one of
them.
 ListBox is used to display few options to the user and allow the user to select one or more of them.
 Inside <select> tag, you should use <option> tags. Each <option> tag represents an option in the
drop downlist.
 Optionally, <optgroup> tag can be used to group-up the <option> tags.
 <select>, <option> and <optgroup> tags are paired tags.

SYNTAX
<select name="name here">
<option value="short name here">Full name here</option>
<option value="short name here">Full name here</option>
…
</select>

EXAMPLE
<select name="PaymentMode">
<option value="Select">Select</option>
<option value="DC">Debit Card</option>
<option value="CC">Credit Card</option>
<option value="NB">Net Banking</option>
</select>

ATTRIBUTES OF <SELECT> TAG


 multiple="multiple": Used to convert the dropdownlist as listbox.

<TEXTAREA>
 <textarea> tag is used to create a multi-line textbox.
 <textarea> tag is a paired tag.
SYNTAX
<textarea name="name here" rows="no. of rows" cols="no. of columns">
</textarea>

EXAMPLE
<textarea name="comments" rows="5" cols="25"></textarea>

<FIELDSET>
 <fieldset> tag is used to display a box around a set of fields.
 <fieldset> tag is a paired tag.

SYNTAX
<fieldset>
Your textboxes here
</fieldset>

EXAMPLE
<fieldset>
<input type=”text”> <br>
<input type=”text”>
</fieldset>

<LEGEND>
 <legend> tag is used to display a title for the fieldset.
 <legend> tag is a paired tag.

SYNTAX
<fieldset>
<legend>title here</legend>
Your textboxes here
</fieldset>

EXAMPLE
<fieldset>
<legend>User details</legend>
<input type=”text”> <br>
<input type=”text”>
</fieldset>

<DIV>
 <div> is a container.
 Inside <div> tag you can place any content like normal text or any other html tags.
 When you want to divide your web page as no. of parts, each part is represented as <div> tag.
 <div> is a paired tag.
SYNTAX
<div>
Your content here
</div>

EXAMPLE
<div>
Hello
</div>

<SPAN>
 <span> represents a small amount of text, for which you can apply some special formatting.
 <span> is a paired tag.

SYNTAX
<span>Your content here</span>

EXAMPLE
<span>Hello</span>

TAGS ARE TWO TYPES (BASED ON THE POSITION)


 Block level elements (Block level tags)
 Inline elements (Inline tags)

1. BLOCK LEVEL ELEMENTS


 <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <table>, <tr>, <ul>, <ol>, <li> are block level
elements.
 Will be displayed line-by-line.

2. INLINE ELEMENTS
 All remaining tags (like <span>, <b>, <i>, <u>, <a>, <img>, <input>, <select> etc.) are inline
elements.
 Will be displayed side-by-side.

DOCUMENT TYPES LIST

HTML 4.01 Strict (1999)

"HTML 4.01 Strict (1999)" supports HTML 4 tags and attributes, except deprecated tags like <font>,
<basefont>, <center>, <marquee>, <bgsound> etc., and also <frameset>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Strict (2000)

Same as "HTML 4.01 Strict (1999)", and also we should follow the specified 10 rules of XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5 (2012)

"HTML 5 (2012)" supports HTML 5 tags and attributes, except deprecated tags like <font>, <center>,
<marquee>, <bgsound> etc., and also <frameset>.

<!DOCTYPE html>

XHTML

XHTML is HTML written as XML.

WHAT IS XHTML?
 XHTML stands for EXtensible HyperText Markup Language
 XHTML is almost identical to HTML
 XHTML is stricter than HTML
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers

WHY XHTML?

Many pages on the internet contain "bad" HTML.


This HTML code works fine in most browsers (even if it does not follow the HTML rules):

<html>

<head>
<title>This is bad HTML</title>

<body> <h1>Bad HTML <p>This is a paragraph


</body>

 Today's market consists of different browser technologies. Some browsers run on computers, and
some browsers run on mobile phones or other small devices. Smaller devices often lack the resources
or power to interpret "bad" markup.
 XML is a markup language where documents must be marked up correctly (be "well-formed").
 By combining the strengths of HTML and XML, XHTML was developed.
 XHTML is HTML redesigned as XML.
THE MOST IMPORTANT DIFFERENCES FROM HTML

DOCUMENT STRUCTURE
 XHTML DOCTYPE is mandatory
 The xmlns attribute in <html> is mandatory
 <html>, <head>, <title>, and <body> are mandatory

XHTML ELEMENTS
 XHTML elements must be properly nested
 XHTML elements must always be closed
 XHTML elements must be in lowercase
 XHTML documents must have one root element

XHTML ATTRIBUTES
 Attribute names must be in lower case
 Attribute values must be quoted
 Attribute minimization is forbidden

<!DOCTYPE ....> IS MANDATORY

 An XHTML document must have an XHTML DOCTYPE declaration.


 The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute
in <html> must specify the xml namespace for the document.
 This example shows an XHTML document with a minimum of required tags:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns= "http://www.w3.org/1999/xhtml">


<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>

XHTML ELEMENTS MUST BE PROPERLY NESTED


 In HTML, some elements can be improperly nested within each other, like this:
 <b><i>This text is bold and italic</b></i>
 In XHTML, all elements must be properly nested within each other, like this:
 <b><i>This text is bold and italic</i></b>

XHTML ELEMENTS MUST ALWAYS BE CLOSED


This is wrong:
<p>This is a paragraph <p>This is another paragraph
This is correct:
<p>This is a paragraph</p> <p>This is another paragraph</p>

EMPTY ELEMENTS MUST ALSO BE CLOSED


This is wrong:
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face">

This is correct:
A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />

XHTML ELEMENTS MUST BE IN LOWER CASE


This is wrong:
<BODY> <P>This is a paragraph</P> </BODY>

This is correct:
<body> <p>This is a paragraph</p> </body>

XHTML ATTRIBUTE NAMES MUST BE IN LOWER CASE


This is wrong:
<table WIDTH="100%">

This is correct:
<table width="100%">

ATTRIBUTE VALUES MUST BE QUOTED


This is wrong:
<table width=100%>

This is correct:
<table width="100%">

ATTRIBUTE MINIMIZATION IS FORBIDDEN


Wrong:
<input type="checkbox" name="vehicle" value="car" checked />

Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />

Wrong:
<input type="text" name="lastname" disabled />

Correct:
<input type="text" name="lastname" disabled="disabled" />

HOW TO CONVERT FROM HTML TO XHTML


 Add an XHTML <!DOCTYPE> to the first line of every page
 Add an xmlns attribute to the html element of every page
 Change all element names to lowercase
 Close all empty elements
 Change all attribute names to lowercase
 Quote all attribute values

XHTML RULES
 <!DOCTYPE> is must.
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>, <head>, <body>, <title> tags are must.
 A <meta> tag with content-type is mandatory.
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
 xmlns attribute is must in <html> tag
 <html xmlns="http://www.w3.org/1999/xhtml">
 Case sensitive (code should be in lower case only).
 Attribute's values should be in double quotes.
 All paired tags must be closed.
 All unpaired tags must be end with /
 Inner-most tag should be closed first.
 Attribute minification not allowed

You might also like