Handbook of Computer Science (cs) and IT

Web Technology

HTML(Hyper Text Markup Language)

HTML is a method where ordinary text can be converted into hyper text. It is basic tools for designing a web page.

Hyper Text

A way of creating multimedia documents, also a method for providing links within the documents.

Markup Language

A method for embedding special tags that describe the structure as well as behaviour of a document.

HTML Tags

Developing a web page is concerned with

Contents of the page • Appearance of the page

The appearance of the page is coded in HTML language, using HTML tags. An attribute of a tag is additional information that is included inside

the start tag.

Basic Structure of HTML Page

The HTML page can be saved as. html or . htm extension.

<HTML>

<HEAD>

//Head elements are to be written here

<MEAD>

< BODY >

//Body elements are to be written here

</BODY>
</HTML>

Here, the < > is called Starting Tag and < / > is called Closing Tag. The page will start with HTML tag, which will declare that , this page is an HTML page.

The HTML page is divided into two major parts.

Head element 2. Body element

Head Element

Head element basically contains those tags which are useful to store some information about the current HTML page but they are not visible to web explorer. Some of head tags are also used to handle some events in HTML documents. Head elements are described as follows

<title> Tag

This tag is used to define title of the web page. The text that is written in between the opening and closing tags of title tag is visible at the topmost bar of web page.

<ti tl e> First web page </ title >

<base > Tag

Base tag defines the default address or default target for all links on a page.

< html >
<head>

< base href = “http: / /www.abc.com/myfolder“i> <base target = ” — bl ank”/>

</head>

<body>

< a href = “mypage.iltrill”> Cl ick Here < /a>

< / body>

</ html>

Here, <a> </a> defines the link to another page. This tag is also known as Anchor Tag. When you click on Click Here, it will redirect You to the www.abc.com/myfolder/mypage. html.

The href element in the base tag defines a base URL for all relative_, the page and the target element in base_.tag defines the location where no open all links in a page.

Attributes of target are as follow

Target = “_blank” means open the link page to the new window.

Target = “_parent” means open the link into the same * frame.

Target = “_self” means open the link into the same * frame.

Target = ” top” means open the link into the top * frame.

* frame specified by frame name

<link> Tag

The <link> tag defines the relationship between a document and an external resource.

<head>

Here, the link tag is used to define that an external css file, i.e., abc.css has to be used in this html page.

Key Points

The attributes in link element are as follows

Rel Specifies the relationship between the current document and the linked
Type Specifies the MIME type of the linked document.
Href Specifies the location of the linked document.
Rev Specifies the relationship between the linked document and the current
Charset Specifies the character encoding of the linked document.

<Meta>Tag

This provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. The <meta> tag always goes inside the <head> . The Metadata can be used by browsers (how to display content or reload page), search engines (keywords) or other web services.

< head >

< meta name = “description” content = “free tutorial s”/ > < meta name = “keywords” content = “HTML, CSS , XML”/>

< meta name = “author” content = “Mohan”/>

< meta http_equi v = “Content Type” content = “text . html ;

charset =ISO- 8859-1″/>

</head>

Here,

Name Provides a name for the information in the content attribute.
Http_equiv Provides an HTTP header for the information in the content attribute values for this, attributes are content type, content-style-type, expires, refresh, set_cookie.
Content Specifies the content of the meta information.
Scheme Specifies a scheme to be used to interpret the values of the content attribute.

<script> Tag

It is used to define client-side script, such as Java script. This script element either contains scripting statements or it points to an external script file through the src attribute.

<head>

document .write (“Hello World !”

</scri pt>

</head>

<style> Tag

Style tag is used to define style information for an HTML document. Inside the style element we specify how HTML elements should render in a browser.

<html >

<head>

h1(color : red}

p (color blue )

</style>

</head>

<body>

<h 1> Header 1 Oh 1>

<p > A paragraph. </p>

</ body>

</html>

<body> Tag

The body tag contains all those text that is to be displayed in web tag. The tag inside the body tag are used to format the text written and images to be displayed in web page. It also helps to align the various objects in web page.

Key Points

The only possible value is “text/css” for this tag.
The style element always goes inside the head sections.
The tag inside the body tag are used to format the text written and images to be displayed in web page.
<body> Tag also helps to align the various objects in web page.

Text Formatting Tags

<b>Tag b stands for Bold tag. The text written between <b> and </b> tag will be displayed as bold letters.
<i>Tag i stands for italic format means the text written between <i> and </i> will be displayed as italic format.
< big >Tag This tag helps the text to be displayed in bigger
< small>Tag This tag renders a smaller text.
<u> Tag The text written between <u> and </u> will be displayed as underlined text.
<q> Tag This tag defines the short quotation. The text will be quoted, if we use this tags.

<q> Here comes a short quotation </q> </body>

</html>

Output “Here comes a short quotation”

<strong> Tag This tag is used to display the text in bold format.
<sub> Tag This tag defines subscript text

e.g. ,

H sub> 2 </sub> 0

Output H₂0

<sup> Tag This tag is used to display superscripted text.

e g.

4<sup>th</sup>Edition

Output 4^th Edition

Headings <h_l> …<h₆> Tags The <h₁> to <h₆> tags are used to define HTML headings. <h₁> defines the largest and <h ₆ > defines the smallest heading.

<font> Tag This tag is used to describe the font style of a text.

e.g.,

< font color = “red” size = “16” face = “arial” > This is my font tag test </font>

The color attribute defines the color of the text. The value in the color attribute can be given by directly by name or by specifying a particular hexadecimal 6 digit number like color = “#FFOEE2” or by RGB combination like color = “rgb (50, 50, 50)” size attribute defines the size of the text and the face attribute defines the font type of the text.

<abbr> Tag The <abbr> tag describes an abbreviated phrase.

The <abbr> Tag

The <abhr title = “World Health Organisation”>WHO </abbr> was founded in 1948. Here, when we will move the mouse over WHO it will display

Output “World Health Organisation”

<blockquote> Tag This tag defines a long quotation. A browser inserts white space before and after blockquote element. It also inserts margins for the blockquote element.
<del> Tag The <del > tag is used to define the text that has been deleted from q document.

e.g., The leader of this class is <del> Rahul </del> Neha.

Output The learler of this class is Neha.

Text, Alignment^, ‘rags

There are some tags that are used to align text into left, center, right or justified position.

These tags are described as follows

<p>Tag This tag is used to define a new paragraph. The attributes in paragraph tag is align values of which is right, center, justified or left_.

<br > Tag This tag is used to start next line or line break The text written after < br> tag will be stated from next line

e.g., This is my first web page <br> And I learned everything about HTML. Output This is my first web page

And I learned everything about HTML.

Note that <br> tag has no dosing element.

Thus, for every alignment corresponding tag is to be defined. <pre> tag eliminates this over head. The text written between <pre> tag is displayed in web page in the same manner as it is written in coding.

e.g.,

<pre>

Hi ! my name is Rahul and I love web technology. </pre>

Output

Hi ! my name is Rahul and

I love web technology.

(d) <center> Tag This tag is used to align a text to the center. This means the text that is written between center tag will be displayed on the center of page.

Lists

HTML supports three types of lists as follows

Unordered List (Unnumbered or Buffeted List)
Ordered List (Numbered List)
Definition List
Ordered List

This defines the element using bullets.

<body>

<ul>

<li> Coffee </li >

<li>Milk</li>
<l1> Bread </ l i>

</ul>

</body>

Output

Coffee

Milk

Bread

Ordered List

In ordered list, elements are defined in ordered manner i.e., numbered.

e.g.,

<ol>

<li > Oranges </li>

<li> Peaches </li>

<li> Grapes </li>

</ol>

Output

Oranges
Peaches
Grapes

Definition List

A definition list is a list of items, with a description of items. The <dl> tag defines a definition list . The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list). e.g_.,

<dl>

<dd> – Computer Science </dd> <dt> <dt>IT</dt>

<dd>- Information Technology </dd>

</dl>

Output

^–Computer Science

^–Information Technol ogy

Tables

Tables are very useful for presentation of tabular information. For this purpose, we use <table> tag.

e.g.,

<caption> <b> Student Record </b> </caption>

<tr>

<th> Student Name </th>

</tr>

<tr>

<t r>

<td> 002 </td> <td> Shyam </td> </tr>

</tabl e>

Output

Table Elements

Table elements are as follows

<table> </table> Defines a table in HTML.

<caption> </caption> Defines caption for the title of the table. Attribute Align = Both can be used to position the caption below the table.

<tr> </tr> Specifies a table row within a table.

<th> </th> Defines a table header cell. By default the text in this cell is bold and centered.

<td> </td> Defines the table data cell. By default the text in this cell is aligned left

and centered vertically.

Some of the table attributes are described below

bgcolor This is used to define the background color in table.

bgorder This specifies width around the border. .

celladding Specifies the space between the cell wall and the cell content.

cellspacing Specifies the space between cells.

width Specifies the width of a table.

align This attribute aligns the content of row in three manners e., left, right, center.

valign This attribute aligns the content of a cell in three values for this are middle, top and bottom.

image The <img> tag allows to display images on web page. Images are the binary representation of data in pixel form.

Inline image Image is inserted at a particular location “in a line” within a web page.

syntax <img src = “myfolder/abc.jpg” height = “50%” width = “50%” alt = “mypics” border = “3” align = “center”›

Here, the src attribute defines the path of the image. Height defines the height of the image that can be given in form of % or pixel value a height = “100”. Similarly, width attribute defines the width of the image.

Key Points

The alt attribute defines the alternate text that will he displayed, if the image is not visible.
Border attribute defines the border width around the image.
Align attribute defines the alignment of the image, values can he left, center, right, top, bottom.

Link

Links are used to jump from one html page to another html page. <a> 1.nchor tag is used to create link between two html pages.

e.g., < a href = “myfolder/nextpage.html”> Click Here </a> when, we will cl!ck on the “Click Here” it will redirect the current page to nextpage.html.

Handbook of Computer Science(cs) and IT

Leave a Reply Cancel reply