Hyper Text Markup Language (HTML)
how to use html language
All HTML documents must begin with opening tag <html> and ending with </html>
Head section :
This section is sued to display the title of the HTML document. This section begins with opening tag <head> and ending with </head>
The title of the HTML document is defined wit the tags. This wll be displayed din the title bar of the window.
Body section :
This section is used to display information in the Web page. This section begins with <body> and ending with </body>
<html> <head> <title> Welcome to MU College,/title> </head> <Body> Courses offered B.A Corporate Economics B.Sc Mathematics B.Sc Computer science B.com B.Com Corporate secretaryship BCA BBA B,Sc Microbiology B.Com Computer Application B.A Functional English B.Sc information system Management M.Sc Information Technology M.Com </body> </html>
Basic tags in HTML :
Some of the important tags in HTML are as follow:
This tag is used to display the given text in bold leters.
<b> Welcome to MU College</b>
Output: Welcome to MU college
This tag is used to display the given text as italics
<i> Welcome to MU college….</i>
Output: Welcome to MU college
Body tag <BODY> :
The BODY tag contains all the text and graphics of the document with all the HTML tags that are used for control and formatting of the page.
The Format is:
Your Document goes here
Attributes used with <Body>
ΦBGCOLOR: used to set the background color for the document
Your Document goes here
Φ TEXT: Used to set the color of the text of the document
Document text changed to red color
Φ MARGINS: Set the left hand/right hand margin of the document.
ΦLEFT MARGIN : Set the left had margin of the document
This document is indented 60 pixels from the left hand side of the page
Φ TOP MARGIN : Set the left had margin of the document
This document is indented 60 pixels from the Top of the page
Φ Background: It is used to point to an image file (The files with an extension .gif, jpeg) that will be used as the background of the document. The image file will be tiled across the document.
Your document text goes here
This tag is used to center the given text
Example <center> Welcome to MUCollege</center>
Output: Welcome to MUCollege
This tag is used to begin a new paragraphs.
<p. tag attributives
The general format is <p align=”Value”>
If Value = left, it aligns the left paragraph
If Value = right, it aligns the Right paragraph
If Value = Center, it aligns the Center paragraph
If Value = Justify, it aligns the Justify paragraph
Example: <p align=”right”>
In the above tag, align the paragraph as right
Horizontal: <hr> tag
This tag is used to draw a horizontal line from left to right.
Introduction to Information Technology
<hr> By Rizwan Ahmed
Output: Internet and its application
By Rizwan ahmed
This tag is used to specify the size of the font and color of the text to be displayed. The general format is
Face – This attribute is used to see the type of font
Color – This attribute is used to set the specific color to the font.
Size – This attribute is used to set the size of the font
<font face=”Arial” color=”red”size=”11” computer is an electronic device </font>
Out put: Computer is an electronic device
Header tags are used to give heading in HTML document. HTML has six header tags <H1>, <H2> ……<H6> used to specify section heading. Text with header tags is displayed in larger and bolder fonts than the normal boxy text by a web browser. Every header leaves a blank line above and below it when displayed in browser.
There are six levels of heading tags in HTML, Namely
<H1>--</h1> <H2>--</h2> <H3>--</h3> <H4>--</h4> <H5>--</h5> <H6>--</h6>
<Html> <Head> <Title> Example of Header Tags </Title> </head> <Body> <h1> Level 1 MUCollege</h1> <h2> Level 2 MUCollege --</h2> <h3> Level 3 MUCollege --</h3> <h4> Level 4 MUCollege --</h4> <h5> Level 5 MUCollege --</h5> <h6> Level 6 MUCollege --</h6> </Body> </Html>
The output of the above program is shown here
Web pages are linked to one another through Hypertext link a link is a part of document. If it is clicked another page (document) will be displayed.
HTML Provides <A> Anchor Tag to create links. The format of using anchor tag is as follows:
<A href=”URL”> Text </A>
HREF (Hyper link Reference) is a mandatory attribute used to refer the URL of the rescue. URL (Uniform Resource Locator) is an address tells the browser about the file to link to. It identifies file location (Addresses) on the web or on the local had drive. It is always enclosed in quotes.
Write a HTML code to Linking a text to a web site.
<html> <head> <title> Creating Links </title> </head> <body> <h1> Linking a text to a web site <h1> <p><a href==:http://www.unom.ac.in”>click here </a></p> <p><a href==:http://www.gmail.com”>Gmail </a></p> <p><a href==:http://www.yahoo.com”>Yahoo! </a></p> </body> </html?
In the above example the link text “click Here”, “Gmail” and “Yahoo” would appear underlined and in a color different from any other text in the document to distinguish a link from normal text. Also you would find that the mouse pointer changes into a had like symbol when taken over the hyperlink
Images can be placed in a web page by using <IMG> tag. There are many image formats available today, but the most widely used among them are gif (Graphics interchange Format) and jpeg (joint photographic expert Group) the general format of the image tag is as follows:
<IMG SRC = image_URL>
SRC – Source of the image file
Image_URL –represents the image file with its location
Note: The SRC attribute is mandatory for the <Image> tag.
Other attributes used with <IMG> are follows:
ALIGN – Used to set the Alignment of the text adjacent to the image,
It takes the following values:
ALIGN=LEFT – Displays image on left side and the subsequent
Text flows around the right hand side of that
ALIGN=RIGHT – Displays image on right side and the
subsequent text flows around the left hand
side of that image.
ALIGN=TOP – Aligns the text with the top of the image.
ALIGN=BOTTOM – Aligns the text with the bottom of the image.
HEIGHT and WIDTH– Height and width of an image can be controlled by using the
HEIGHT and WIDTH attributes in the <IMG> tag as follows
HSpace and VSPACE– White space around as image can be provided by using
HSPACE (Horizontal space) and VSPace (Vertical Space)
attributes of the <IMG> tag. These attributes provide the
space in pixels.
<html> <head> <Title> Inserting Images in HTML document </title> </head> <body> <img src=”C:\Documents and Settings Home\My document\ Mypicures\ Bus2.jpg”align =left height=500 Width=300> <img src=”C:\Documents and Settings Home \My document\ My picutes\ Bus2.jpg”align =left height=500 Width=300> </body> </html>
Special character and line breaks
When marking up text, certain characters or symbols (eg., <) may be difficult to embed directly into an HTML document. There are certain special characters that can be used while creating document. All the special character must be ended with a semicolon; following are some Special characters.
|©, ®||©, ®|
|¼,½,¾||¼, ½, ¾|
|+, <, >, <, >||÷, <, >, &le, &ge|
|§ª©||&spades, &Clubs, &hearts|
<html> <head> <title> Special Characters </title> </head> </body> <PRE>
The copyright symbol is : ©
The registered rank is ®
The fraction parts are: ¼, ½, ¾
The special symbols are &Divide, <, >, &le, &ge
The spad, Club and hearts are: &spades, &clubs &hearts
</PRE> </body> </html>
Line Break :
The line break tag <BR> is used, where the text needs to start from a new line and not continue on the same line. The get evry sentence on a new line, it is necessary to sue a line break.
<html> <head> <title> Line Break </title> </head> <Body> St.Joseph’s College of Arts and Science (Autonomus) <BR> St.Joseph’s College Road <BR> Coddalore – 607 001 <,/body> </html>
The output of the aboe program is shown here:
St.Joseph’s College of Arts and Science (Autonomous)
St.Joseph’s College Road
Cuddalore – 607 001.
Unordered list also called as bulleted list is used to present list of items marted with bullets. An unordered list starts with in <UL> followed by <L1> (list item) tag.
In an unordered list the information are preceded by any one of the following bullets.
The general fort of the unordered list is as follows:
<html> <head> <title> Example ordered List </title> </head> <body> <ul type = “square”> SQUARE <li>C.</li> <li>C++</li> <li>DOTNET.</li> </ul> <ul type =”circle”> CIRCLE li>C.</li> <li>C++</li> <li>DOTNET.</li> </ul> <UL TYPE=”DISC”> DISC li>C.</li> <li>C++</li> <li>DOTNET.</li> </ul> </body> </html> The Output of the above programe is shown here SQUARE
Simple HTML Programs Exircise 1 Write a simple HTML Program <html> <body> <h1> My first Heading</h1> <p>My first paragraph</p> </body> <html>
The out put of the above program is shown here
My first Heading My first paragraph
Exercise2: Write a simple code for HTml Headings
<htom> <body> <h1> this is heading 1 </h1> <h2> this is heading 2 </h2> <h3> this is heading 3 </h3> <h4> this is heading 4 </h4> <h5> this is heading 5 </h5> <h6> this is heading 6 </h6>
This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6
If You Want To Respond,Please Send Me An Mail
My Email ID : firstname.lastname@example.org