HTML
Introduction to HTML
HTML stands for Hyper Text Markup Language. An HTML file is a text file containing small markup tags. The markup tags tell the web browser how to display the page. An HTML file must have an htm or html file extension. An HTML file can be created using a simple text editor.
Head Section
This section is used to specify the title of the document. It begins with <head> tag. This is followed by the <title> tag, which in turn is followed by the title of the document. The title ends with </title> tag and the head section ends with the </head> tag
Body section
This section contains the document itself. The body section begin with the <body> tag followed by the text of the documents and it ends with the </body> tag.
Eg:
<html>
<head>
<title> title of the page </title>
</head>
<body>
=============
=============
</body>
</html>
<html>
<head>
<title>CSC Computer Education</title>
</head>
<body>
This is my first web page
<b>CSC</b>
<i>Computer</i>
<u>Education</u>
</body>
</html>
<html>
<head>
<title>CSC Computer Education</title>
</head>
<body bgcolor=”yellow” text=”red”>
This is my first web page
<b>CSC</b>
<i>Computer</i>
<u>Education</u>
</body>
</html>
Headings:
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically ads an extra line before and after a heading
<html>
<head>
<title>CSC Computer Education</title>
</head>
<body>
<h1>CSC</h1>
<h2>CSC</h2>
<h3>CSC</h3>
<h4>CSC</h4>
<h5>CSC</h5>
<h6>CSC</h6>
</body>
<html>
<html>
<head>
<title>CSC Computer Education</title>
</head>
<body>
<center>
<h1>CSC</h1>
<h2>CSC</h2>
<h3>CSC</h3>
<h4>CSC</h4>
<h5>CSC</h5>
<h6>CSC</h6>
</center>
</body>
<html>
Paragraphs:
Paragraphs are defined with the <p> tag. HTML automatically adds an extra blank line before and after a heading
<html>
<head>
<title>CSC Computer Education</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Line Breaks
The <br> tag is used when you want to end a line. But don’t want o start a new paragraph. The <br> tag forces a line break whenever you place it. The<br> tag is an empty tag so it has no closing tag.
You can use a horizontal rule (the <hr> tag), to draw a horizontal line.
<html>
<head>
<title>CSC Computer Education</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<hr>
<b>CSC</b>
<i>Computer</i>
<u>Education</u>
</body>
</html>
Text Formatting:
There are several tags to format the text. The following example demonstrates the various ways of formatting the text in the HTML document.
<html>
<body>
<b>This is a bold text</b>
<br>
<i>This text is italics</i>
<br>
<u>This is a underline text</u>
<br>
<strong>This is a strong text</strong>
<br>
<em>This is a emphasized text</em>
<br>
<big>This is a big text</big>
<br>
<small>This is a small text</small>
<br>
h
<sub>2</sub>
o
<br>
5
<sup>3</sup>
<br>
<pre>This is a performated text</pre>
<br>
<font face=”Arial” color=”red” size=”10”>This is a red colored arial font text of size10</font>
</body>
</html>
Lists:
OL = Ordered List
LI = List
UL = Unordered List
DD = Definition Description
DL = Definition List
DT = Definition Term
UL
Unordered list is a list of terms. The list items are marked with bullets an unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Inside a list item you can put paragraph, line breaks, images, links, other lists etc.
<html>
<body>
Courses
<ul>
<li>HDCA</li>
<li>DCA</li>
</ul>
</body>
</html>
OL
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Inside a list item you can put paragraphs, line breaks, images, links, other lists etc.
<html>
<body>
Courses
<ol>
<li>HDCA</li>
<li>DCA</li>
</ol>
</body>
</html>
DL
An definition list is not a list of terms. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag. Inside a definition-list definition the <dd> tag you can put paragraphs, line breaks, images, links, other lists etc.
<html>
<body>
Courses
<dl>
<dt>HDCA</dt>
<dd>Honours diploma in computer education</dd>
<dt>DCA</dt>
<dd>Diploma in computer application</d>
</dl>
</body>
</html>
Tables
Table are defined with the <table> tag. A table is divided into rows, and each row is divided into data cells. The letters td stands for table data which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, horizontal rules, tables, etc.
Headings in a table are defined with the <th> tag.
<html>
<body>
<table border=”1”>
<tr>
<th>Name</th>
<th>Age</th>
<th>Qualification</th>
</tr>
<tr>
<td>Reka</td>
<td>23</td>
<td>B.Sc</td>
</tr>
<tr>
<td>Suba</td>
<td>24</td>
<td>B.B.A</td>
</tr>
<tr>
<td>Mala</td>
<td>25</td>
<td>B.A</td>
</tr>
</table>
</body>
</html>
Links
HTML uses a hyperlink to link to another document on the web. HTML uses the <a> tag to create a link to another document. An anchor can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.
<html>
<body>
<p>
<a href=”Firstpage.html”> Frist Page</a>
is a link to the a page named firstpage.html
</p>
<p>
<a href=http://www.csindiajobs.com/>CS</a>
Click CSC to view the CSC homepage in the world wide web.
</p>
</body>
</html>
Frames
<html>
<frameset cols=”25%,75%”>
<frame src=”Firstpage.html”>
<frame src=”Secondpage.html”>
</frameset>
</html>
<html>
<frameset rows=”20%,70%,10%”>
<frame src=”Firstpage.html”>
<frame src=”Secondpage.html”>
<frame src=”Thirdpage.html”>
</frameset>
</html>
Forms
<html>
<form>
User Name:
<input type=”text” name=”usrname”>
<br>
Password:
<input type=”password” name=”passwd”>
</form>
</html>
<html>
<form>
<input type=”radio” name=”sex” value=”male”>Male
<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>
</html>
<html>
<form>
Which magazines do you read?<br>
<input type=”Checkbox” name=”hindu”>
The Hindu
<br>
<input type=”Checkbox” name=”IndExpress”>
Indian Express
<br>
<input type=”Checkbox” name=”Thanthi”>
Daily Thanthi
<br>
<input type=”Checkbox” name=”Others”>
Others
</form>
</html>
<html>
<form>
Qualification:
<select name=”Qualification”>
<option value=”pg”>Post Graduation
<option value=”eng”>Engineering
<option value=”ug”>Under Graduation
<option value=”below”>Below Graduation
</select>
</form>
</html>
<html>
<form>
Address:<br>
<textarea name=”addr” rows=”5” cols=”30”>
</textarea>
</form>
</html>
<html>
<form>
<input type=”button” value=”This is a button”>
</form>
</html>
<html>
<form>
User Name:
<input type=”text” name=”usrname”>
<br>
Password:
<input type=”password” name=”passwd”>
<br>
<input type=”submit” value=”submit”>
</form>
</html>
Apendix
<html> Defines a html document
<body> Defines the document’s body
<h1> - <h6> Defines heading1 to heading 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment in the html
Source code
<b> Defines bold text
<big> Defines big text
<em > Defines emphasized 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
<s> Deprecated. Use <del
<strike> Deprecated. Use <del
<u> Deprecated. Use <del
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines performatted text
<listing> Deprecated. Use <del
<plaintext> Deprecated. Use <del
<xmp> Deprecated. Use <del
<abbr> Defines a abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote>Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
<a> Defines an anchor
target=”blank” Loads the new document in a new blank window
target=”self” Loads the new document in the same window as the anchor(default)
target=”parent” Loads the new document in the parent frame(when using frames)
target=”top” Loads the new document in the entire browser window(nice way to break out of frames)
<frameset> Defines a set of frames
<frame> Defines a sub window(a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
<iframe> Defines a inline sub window (frame)
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thread> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
<ol> Defines a ordered list
<ul> Defines a unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
<isindex> Deprecated. Use <input> instead
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map
No comments:
Post a Comment