- 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>
<link rel = “stylesheet” type = “text/css” href = “abc.css”/> </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>
<scri pt type = “text/java scri pt”>
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>
<styl e type = “text/css”>
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.
<html > <body>
<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 H20
- <sup> Tag This tag is used to display superscripted text.
e g.
4<sup>th</sup>Edition
Output 4th Edition
- Headings <hl> …<h6> Tags The <h1> to <h6> tags are used to define HTML headings. <h1> defines the largest and <h 6 > 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.
<p align= “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.
(C) <pre> Tag As we know that without <br> tag line break is not applied to web page.
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>
<dt> CS </dt> <dd> – Computer Science </dd> <dt> <dt>IT</dt> <dd>- Information Technology </dd> </dl> |
||
Output
Cs
–Computer Science
IT
–Information Technol ogy
Tables
Tables are very useful for presentation of tabular information. For this purpose, we use <table> tag.
e.g.,
<table border = “5” >
<caption> <b> Student Record </b> </caption>
<tr>
<th> Roll No </th>
<th> Student Name </th>
</tr>
<tr>
<td> 001 </td> <td> Ram </td> </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.