HTML (Hypertext Markup language) is a language used to develop web pages. Hypertext means a special text that works as a link and markup means way of writing layout information within document. The extension of HTML is ‘.htm’ or ‘.html’. It is created using a simple text editor. HTML tags are not case sensitive.
Web Page
A web page is a file containing web information.
Web Site
A web site is a collection of web pages.
Web Browser
A web browser is a special type of program through which we can view our web pages. There are several programs in this category available on the market. The two most popular are Netscape Navigator and Microsoft Internet Explorer.
Web Server
A web server is a computer where web pages are stored.
The World Wide Web used following technologies:
Þ HTML (Hypertext Markup Language) →Write web page
Þ HTTP (Hyper Text Transfer Protocol) →Transmit those pages
Þ FTP (File Transfer Protocol) →Transferring web pages.
HTML Tags
Tags are identified by the <> or </> signs. The commands themselves are specified between the <> signs. In the case of tags which need to enclose text, the ending tag should include the slash (/) to indicate the end of the tag.
There are two types to tag:
Empty tag – no need to close tag <P>, <BR>
Non-empty tag – has to be closed <HTML></HTML>
Heading Tags:
HTML provides six types of heading tags: Tag <H1> through tag <H6>.
<HTML>
<HEAD><TITLE>Heading Tags</TITLE></HEAD>
<BODY>
<H1>WELCOME TO THE INTERNET WORLD </H1>
<H2>WELCOME TO THE INTERNET WORLD </H2>
<H3>WELCOME TO THE INTERNET WORLD </H3>
<H4>WELCOME TO THE INTERNET WORLD </H4>
<H5>WELCOME TO THE INTERNET WORLD </H5>
<H6>WELCOME TO THE INTERNET WORLD </H6>
</BODY>
</HTML>
Break tag:
Break tag is used for inserting line break. The text that follows the <BR> will be displayed in the next line.
Example:-
<HTML>
<HEAD>
<TITLE>Using
Breaktag</TITLE>
</HEAD>
<BODY>
WELCOME TO THE INTERNET WORLD <BR> One a web site, the contents is aimed at the public, <BR> while an internet aims at the needs of an organization’s own employees.
</BODY>
</HTML>
The most popular text formatting tags:
Command Syntax Function
Bold <b>text </b> applies the bold style
Italic <i>text</i> applies the italic style
Underline <u>text</u> underlines text
Strong <strong>text</strong> similar to bold
Strikethrough <strike>text</strike> Strikes through text
Big text <big>text</big> increases the font and applies Bold
Small <small>text</small> reduces the font
Paragraph <p>text </p> Generate a paragraph
Superscript <sup>text </sup> apply superscript
Subscript <sub>text</sub> apply subscript
Preformatted Tag:
Preformatted text tag is used to display the text in the browser as it was typed in the HTML document.
<HTML>
<HEAD>
<TITLE>Preformatted text tag</TITLE></HEAD>
<BODY>
The following table is an example for preformatted text
<PRE>
S.No. Name Address
1. Ram Kathmandu
2. Hari Pokhara
3. Shyam Lalitpur
</PRE>
</BODY>
</HTML>
Attributes:-
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. Attributes are always added to the start tag of an HTML element.
Attributes of Body:
• Bgcolor = background color of the body
• Background = background image of the body
• Bgproperties = fixed (for no scrolling the background)
• Text = text color of the body
Example
<body bgcolor=”color name” background= “path of imagename with extension” bgproperties =“fixed” text=”color name”>
Font set and Alignment:
Font
<font size=“1” color=“Black” Face=“Arial”> text </font>
Alignment:
Left à <P Align=“left”>
Right à <P Align=“right”>
Center à <P Align=“center”>
Justify à <P Align=“Justify”>
(color Name) Some color in Hexadecimal value:
Red à#FF0000 Black à #000000
Dark Blue à #000080 Green à #00FF00
Gray à #808080 Yellow à # FFFF0
Blue à #0000FF Dark Red à #800000
Magenta à #FF00FF White à #FFFFFF
Dark Green à #008000 Cyan à #00FFFF
Image tag:
It is used to insert image in your web page.
Attributes of image tag
· src =to define the source file with full path of static picture like jpg file
· Dynsrc =to define the source file with full path of motion picture like movie file
· Width= width of the picture
· Height= height of the picture
· Alt= Display alternate message if source file is not found for some cause
· Border=(Default 0) Border of the picture
· Lowsrc =low quality picture
· Align =left, right, center
Example:-
<IMG SRC=“aptech.GIF” ALT=“MY PICTURE” HEIGHT=100 WIDTH=50>
<img align="right" src=“Source.jpg" height=200 width=200 alt="Picture" VSPACE=150 HSPACE=150 >
Horizontal Ruler tag:
It draws the horizontal line on the web page.
Attributes
- Color
- Size
- Width
- Align=left, right, center
<HR>
<HR WIDTH=“7%” SIZE=5 ALIGN=“LEFT”>
Marquee:
The marquee text has to be specified between <MARQUEE>and </MARQUEE>.
BGCOLOR: The Background color for the marquee text
WIDTH: The width of the marquee text can be specified either in terms of percentage of window width or in terms of pixels.
HEIGHT: This specified the height of the marquee text area with respect to the screen.
BEHAVIOR: This is the way the marquee text will behave. It takes one of the following values:
“SLIDE” -- is the default value which gives a sliding effect.
“ALTERNATE” – makes the text move alternately between the left and right boundaries of the window
“SCROLL” – provides scrolling effect
DIRECTION: Specifies which direction the text should scroll.
<Marquee direction =“right”/”left”/”up”/”down”>text </Marquee>
<Marquee direction =“right”/”left”/”up”/”down”>text </Marquee>
SCROLLAMOUNT: Specifies the number of pixels the text scrolls between each subsequent means the speed of marquee.
Hyperlink:
A hyperlink is an area that opens page or web site. The object is used to create hyperlink can be either text or picture. There are two types of hyperlinks i.e. Internal Hyperlink and External Hyperlink. If you want to create link with in same page at that time you can use internal hyperlink. To create internal hyperlink page must have at least one book-mark on the page.
The <A>is the tag used to create hyperlinks as well as bookmark. It has pre defined different attributes to change the properties of hyperlink which includes HREF, Name, and Target...e.t.c.
Note: - By using <A> tag we can also create link with email address, web site e.t.c.
Numbering & Bulleting:
The command that generates the order list is the<OL> command. Each item of the list should be specified with the list item command <LI>. <ol> type are ‘A’ or ‘a’ or ‘i’ or ‘I’ and 1.
Syntax:
<OL>
<li>text
<li>text
<li>text
</OL>
<OL type=A start=5>
<li>Text
<li>Text
<li>Text
</OL>
Example:
<HTML>
<HEAD>
<TITLE> NUMBERING</TITLE>
</HEAD>
<BODY>
Ordered list and list heading
<p><OL>
<LH> SOME ASIAN COUNTRIES: <BR>
<LI> INDIA
<LI> BANGLADESH
<LI> SINGAPORE
</OL>
</BODY>
</HTML>
The <UL> Command:
The command that generates the un-order list is the<UL> command. Each item of the list should be specified with the list item command <LI>. The types of un-order list are circle, Disc and Square.
Syntax:
<UL>
<li>text
<li>text
<li>text
</UL>
Table
The <table> tag defines an HTML table.
A simple HTML table consists of the table element and one or more tr, th, and td elements.
The tr element defines a table row, the th element defines a table header, and the td element defines a table cell.
The <table> tag defines an HTML table.
A simple HTML table consists of the table element and one or more tr, th, and td elements.
The tr element defines a table row, the th element defines a table header, and the td element defines a table cell.
TR : Specifies a table row.
TH : Specifies a table cell containing a heading (Filed)
TD : Specifies a table cell containing data.
CELLPADING : FOR ADJUSTING SPACE WITH CELLS
CELLSPACING : FOR ADJUSTING SPACE BETWEEN CELLS
COLSPAN : COLUMN SPANNING (NO. OF COLUMN WANT TO
COVER)
ROWSPAN : ROW SPANNING (NO. OF ROW WANT TO COVER)
HEIGHT : ADJESTING THE TABLE HEIGHT
WIDTH : ADJESTING THE TABLE WIDTH
Example:-
table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Example:-
<table border="1" width="26%">
<tr>
<td>Name</td>
<td colspan="2">Marks</td>
</tr>
<tr>
<td>navin</td>
<td>98</td>
<td>98</td>
</tr>
</table>
Form is a feature of HTML that allows the user to input data through HTML documents.
To create a form, the <FORM> tag is used. It is a non-empty tag and has three attributes associated with it.
Name: Identifies name of the form
Method: Can be specified GET (default) or POST (preferred)
GET – attaches the input to the ACTION URL
POST – sends the input in a data base separately
Action : Specifies the path of the CGI script used to process the form.
Elements of Form:
INPUT TAG:
The <INPUT> tag is used to specify which input fields are available in the form.
<INPUT> tag is an empty tag with three attributes.
TYPE: This is set to TEXT, indication a single test input fields. There are other types like RADIO for radio button, CHECKBOX for checkbox, BUTTON for button etc.
NAME: This is a variable name for the text field that the author must specify.
SIZE: This is the width or the TEXT field.
The various TYPE value available for the <INPUT> tag:
TEXT : Specifies a text field.
PASSWORD : Specifies the password field
CHECKBOX : Specifies the element checked
RADIO : Specifies a single toggle ON or OFF
FILE : Specifies the field for Browse
SUBMIT : Uploads the form to the server
RESET : Resets form fields to defaults
SELECT TAG:
The <SELECT> tag used for creating lists and formatting the text fields. There are four attributes associated with the <SELECT> tag.
MULTIPLE : Indicates the number of elements in a list that can be displayed.
SIZE : Determines the number if items to be displayed in a list
OPTION : Defines each value within <SELECT> tag
NAME : Indicates the name of the field.
TEXTAREA TAG:
The <TEXTAREA> tag is used as a text entry field with multiple rows. There are three attributes associated with the <TEXTAREA> tag.
ROWS : Specifies the height of the text field in characters.
COLS : Specifies the width of the text field in characters.
NAME : Specifies the name of the field.
Code for Registration Form
<html>
<head>
<title>registration form</title>
</head>
<body bgcolor="skyblue">
<h1 align="center"><u><font color="green">Registration Form</h1></font></u>
<form name=”myform”>
<table border=0 align=center>
<tr>
<th>First Name</th>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<th>Last Name</th>
<td><input type="text" name="lname"></td>
</tr>
<tr>
<th>Address</th>
<td><input type="text" name="add"></td>
</tr>
<tr>
<th>Phone</th>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<th>Age</th>
<td><input type="text" name="age"></td>
</tr>
<tr>
<th>E-mail</th>
<td><input type="text" name="email"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="text" name="password"></td>
</tr>
<tr>
<th>Gender</th>
<td><input type="radio" name="gender">Male
<input type="radio" name="gender">Female</td>
</tr>
<tr>
<th>Hobbies</th>
<td><input type="checkbox" name=”hobby”>Music
<input type="checkbox" name=”hobby”>Reading
</td>
<tr>
<th>Country</th>
<td><select size=1 name=”cmbcountry”>
<option value=”Nepal ”>Nepal
<option value=”Inida>India
<option value=”japan”>Japan
<option value=”china”>China
</td>
</tr>
<tr>
<th>Comments</th>
<td><textarea cols=20 rows=4 name=”txtcomment”>
</textarea>
</td>
</tr>
<tr>
<th>Photo</th>
<td><input type="file" name=”txtphoto”>
</table>
<center>
<input type="submit" value="I agree">
<input type="reset" value="Reset"></center>
</form></body></html>
No comments:
Post a Comment