Chapter 3: HTML-I

By S@ty@m Gupt@ Computer Class 10th

INTRODUCTION OF HTML:
HTML Stands for Hypertext Markup Language. It is a markup language for the web that defines the structure of web pages.

The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999.

Markup: It refers to how you can structure or format content. It allows users to organize the look and presentation of all the content that needs to go on a web page.
It tells the web browser how to display the words and images on the page to the user.
It also determines the appearance and structure of the text, i.e. font type, size and color, and even helps distinguish HTML elements from text, which is done using HTML tags.

Hypertext: “Hypertext" refers to the hyperlinks.

HTML ELEMENT/TAG
·         HTML is written in the form of tags. A tag refers to a string enclosed within angular brackets (< and >).
·         HTML tags are predefined and are non case-sensitive.
·         All HTML tags are typed inside the angular brackets (< and >) and the text between these brackets are called elements.
·         The opening tags are written within the less than (<) and greater than (>) signs,
e.g. <HTML>
·         The closing tags are written within the < and > signs with a forward slash (/) appended before the name of the tag.
e.g. </HTML>
·         The attributes are always specified in the opening tags, which provides additional information about that tag. It comes in name/value pairs like name = “value”,
e.g. <FONT size =“5”>

TYPE OF TAG
There are two kinds of tags, i.e. Container elements and Empty elements.

1.    Container Elements
These types of HTML elements always wrap around the text or graphics which come in a set with an opening as well as a closing tag. In other words, HTML tags that include both On and Off tags are known as container tags.
e.g. <HTML>.. .</HTML>

2.    Empty Elements
On the other hand, the empty elements are standalone tags, i.e. empty tags do not have to be wrapped around text or graphics and do not require a closing tag.
In other words, HTML tags that include only On tag and there is no Off tag then, these tags are known as empty tags.
e.g. <HR> inserts a horizontal line,   <BR> adds a line break

BASIC STRUCTURE OF HTML:
Following four basic structure elements are always present in every HTML document:

1.    The <HTML> tag tells the browser that this is an HTML document. You must begin your html files with this tag and must end your html file with matching closing tag.
2.    The <HEAD> tag is used for text and tags that do not appear directly on the page. It acts as a header of file and contains some information like setting the title of the Web page.
3.    The <TITLE> tag contains the document title. This tag lies between <HEAD> and </HEAD> tags. The title specified inside this tag appears on the browser’s title bar.
4.    The <BODY> tag is used for text and tags that appears directly on the Web page. It helps us to create a look and feel of the Web page.

Attributes of <BODY> Tag:
This tag provides various attributes, which are as follows:

1.    background:
This attribute specifies a background image for a document. HTML supports various graphics format such as .gif, .jpg etc.
Syntax:
<BODY background=“URL”>
Where, URL may be an image name or a path of an image.
e-g-
<HTML>
<HEAD> <TITLE>  Background Image </TITLE> </HEAD>
<BODY background ="image.jpg”>
</BODY>
</HTML>

2.    text
This attribute specifies the color of the text in a document.
Syntax
<BODY text=“color_name”>
e.g. <HTML>
<BODY text=“red”>
Arihant Publication </BODY>
</HTML>

3. bgcolor
This attribute specifies the background color of a document.
Syntax
<BODY bgcolor=“color_name”>
e.g. <HTML>
<BODY bgcolor="red”>
</BODY>
</HTML>

4. link
This attribute specifies the color of an unvisited link in a document. The default color of link attribute is blue (#0000FF).
Syntax
<BODY link=“color_name”>
e.g. <HTML>
<BODY Iink=“red”>
</BODY>
</HTML>

5. alink
This attribute specifies the color of an active link in a document (a link get activated when it is clicked). The default color of an alink attribute is red (#FF0000).
Syntax
<BODY alink=“color_name”>
e.g.
<HTHL>
<BODY alink=“blue”>
</BODY>
</HTML>

6. vlink
This attribute specifies the color of a visited link in a document. The default color of vlink attribute is purple (#800080).
Syntax
<BODY vlink=‘‘color_name”>
e.g-
<HTML>
<BODY vlink=‘‘blue”>
</B00Y>
</HTHL>

7. topmargin
Sets a topmargin (distance between the top of the document and the top of the browser window) of your body element.
Syntax
<BODY topmargin=“value”>
e.g.
<HTML>
<HEAD>
<TITLE> Topmargin </TITLE>
</HEAD>
<BODY topmargin=“65”>
Arihant Publications is one such reputed name in the field of books
which has the best available books in the market. </BODY>
</HTML>

8. leftmargin
Sets a left hand margin (distance between the left side of the document and the left edge of the browser window) of your body element.
Syntax
<BODY leftmargin=“value”>
e.g. <HTML>
<HEAD>
<TITLE> Leftmargin </TITLE>
</HEAD>
<BODY leftmargin=“65”>
Arihant Publications is one such reputed name in the field of books
which has the best available books in the market.
</BODY>
</HTML>

HEADING TAGS:
In HTML, heading tags are used to display the text as a heading. It can also be used to give section headings. There are six levels of headings, ranging from <H1>…</H1> to <H6>…</H6>. <H1> defines the most important largest heading level. <H6> defines the smallest heading level.
Syntax
<Hn>...........</Hn>
Where, n may be any number from 1 to 6.

e.g-
<HTML>
<HEAD>
<TITLE>
Heading Level
</TITLE>
</HEAD>
<BODY>
<H1> level 1 Head!ine </H1>
<H2> level 2 Headline </H2>
<H3> level 3 Headline </H3>
<H4> level 4 Headline </H4>
<H5> level 5 Headline </H5>
<H6> level 6 Headline </H6>
</BODY>
</HTML>

Attribute of <HEADING> Tag:
Following is the attribute of <HEADING> tag:

1.    align
This attribute specifies the alignment of the text as heading. By default, alignment is left.
Syntax
<Hn align=“center | left | right | justify”>
Where, n=l to 6

e-g-
<HTML>
<HEAD>
<TITLE> Heading in HTML </TITLE>
</HEAD>
<BODY>
<H1 align = “center”>level 1 Headl ine</Hl> <H2> level 2 Headline </H2>
<H3 align = “right”> level 3 Headline </H3> <H4> level 4 Headline </H4>
<H5 align= "center”> level 5 Headline </H5> <H6> level 6 Headline </H6>
</BODY>
</HTML>

PARAGRAPH <P> TAG:
This tag is used to mark a block of text as a paragraph. It is used to insert a line break with extra space in the beginning. This is a container tag.
Syntax
<P>.........</P>

e.g.
<HTML>
<HEAD>
<TITLE> Paragraph </TITLE>
</HEAD>
<BODY>
<P>This is some text in a paragraph.</P>
</BODY>
</HTML>

Attribute of <P> Tag
Following is the attribute of <P> tag:

1.    align
This attribute specifies the alignment of the text within a paragraph. By default, alignment is left.
Syntax
<P align="left | right | center | justify”>
e.g.
<HTML>
<HEAD>
<TITLE> P tag with align attribute </TITLE>
</HEAD>
<BODY>
<P align="right”>
This is some text in a paragraph. </P>
</BODY>
</HTML>

<FONT> TAG:
This tag specifies the font face, font size and font color of the text. The <FONT> tag provides no real functionality by itself but with the help of a few attributes, this tag is used to change style, size and color of HTML text elements. This tag is generally used for changing the appearance of a short segment of text.

Attributes of <FONT> Tag
Following are the attributes of <FONT> tag:

1.    size
This attribute specifies the size of the text inside a <FONT> tag. The range of accepted values goes from 1 (the smallest) to 7 (the largest). We can also set the relative size to the current size using (+) ve or (-) ve sign,
e.g. size = +2
Syntax
<F0NT size=“number”>
e.g.
<HTML>
<HEAD>
<TITLE>Font Size </TITLE>
</HEAD>
<BODY>
<F0NT size=“4”>
This is the default size. </F0NT>
</BODY>
</HTML>

2.    face
This attribute specifies the font name or type face of the text inside a <FONT> tag.
Syntax
<F0NT face=‘‘font_family”>
e.g.
<HTML>
<HEAD>
<TITLE> Font Face </TITLE>
</HEAD>
<BODY>
<FONT face=“verdana”> Thi s i s some text! </F0NT>
</BODY>
</HTML>

3.    color
This attribute specifies the color of the text inside a <FONT> tag.
Syntax
<FONT color=“color_name”>
e.g.
<HTML>
<BODY>
<FONT color=“red”>
This is some text!
</FONT>
</BODY>
</HTML>

<CENTER> Tag:
This tag is used to centralise a segment of text to be displayed on browser’s window. With the <CENTER> tag, closing tag </CENTER> is always used. Anything between these two tags will be centered including text, images or tables.
Syntax
<CENTER> ... </CENTER>
e-g-
<HTML>
<HEAD>
<TITLE>Center</TITLE>
</HEAD>
<BODY>
<CENTER> This text will be center-aligned. </CENTER>
</BODY>
</HTHL>

Comment <!-…- -> Tag:
This tag is used to insert comments in the source code of the Web page. Comments are not displayed in the browser’s window.
All the text inserted inside this tag (<! — … — >) will be ignored by the browser that made invisible for the user. You can use comment to explain your code, it can help you, when you edit the source code later.
Syntax
<! - -.... - ->
<HTML>
<HEAD>
<TITLE>Comment</TITLE>
</HEAD>
<BODY>
<!--This is a comment.-- > This is body.
</BODY>
</HTML>

LINE BREAK <BR> TAG
This tag is used to insert a line break which means the text/image following the tag will be moved to the next line when displayed in the browser. To add a single line of space, you can use a break tag <BR>.
This is an empty tag, i.e. no need of closing tag. You can also use the <BR> tag to insert one or more blank lines.
e-g.
<HTML>
<HEAD>
<TITLE> Line Break</TITLE>
</HEAD>
<BODY>
This text contains <BR> a line break.
</BODY>
</HTML>

HORIZONTAL RULE <HR> TAG:
To create a horizontal line on your page, you have to use the empty tag <HR>. This horizontal line can be used to divide information into sections.

Attributes of <HR> Tag
Following are the attributes of <HR> tag:

1.    align
This attribute specifies the alignment of a horizontal line.
Syntax
<HR align=“left | center | right”>
e.g.
<HTML>
<HEAD>
<TITLE> HR tag with align attribute </TlTLE>
</HEAD>
<BODY>
<HR align=“right”>
This is a line.
</BODY>
</HTML>
2.    Size
This attribute specifies the height of the rule in pixels. A pixel is a tiny dot that makes up the display of your computer. Its default value depends directly on the browser. The default size of a rule is 3 pixels.
Syntax
<HR size="pixels”>
e.g.
<HTML>
<HEAD>
<TITLE> HR tag with size attribute</TITLE>
</HEAD>
<BODY>
<HR size=“3”>
This is a line.
</BODY>
</HTML>

3.    width
This attribute specifies the width of a horizontal line in pixels or percent. Its default value is 100%.
Syntax
<HR width=“pixels or %”>
e.g.
<HTML>
<HEAD>
<TITLE> HR tag with width attribute </TITLE>
</HEAD>
<BODY>
<HR width=“50%”>
This is a line.
</BODY>
</HTML>

4.    Color
This attribute specifies the color of the horizontal line.
Syntax
<HR color="color_name”>
e.g.
<HTML>
<HEAD>
<TITLE> HR tag with color attribute </TITLE>
</HEAD>
<BODY>
<HR color=“red”> .
This is a red line. .
</BODY>
</HTML>

STYLE TAGS:
HTML provides various style tags, which are as follows:

1.    Bold <B> Tag:
This tag specifies the text into bold text. It is a container element.
Syntax
<B>............</B>
e.g.
<HTML>
<HEAD>
<TITLE> Bold </TITLE>
</HEAD>
<BODY>
<P>
This normal text and <B> this is bold text. </B>
</P>
</BODY>
</HTML>

2.    Italic <I> Tag
This tag is used to make the text in italic form. It is also a container element.
Syntax
<I>........</I>
e.g.
<HTML>
<HEAD>
<TITLE> Italic </TITLE>
</HEAD>
<BODY>
<I> Hello </I>
</BODY>
</HTML>

3.    Underline <U> Tag
This tag is used to underline the text. It is also a container element.
Syntax
<U>...........</U>
e.g. <HTML>
<HEAD>
<TITLE> Underline </TITLE>
</HEAD>
<BODY>
<P> This is a <U> text </U> </P>
</BODY>
</HTML>

<IMG> TAG
The <img> tag is used to embed an image in an HTML page.

attribute of <img> tag

src - Specifies the path to the image
width- Specifies the width of the image
height- Specifies the height of the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed.

Example:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<SUP> TAG
The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].
Example-
<p>This text contains <sup>superscript</sup> text.</p>

<SUB> TAG
The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.
Example-
<p>This text contains <sub>subscript</sub> text.</p>

ANCHOR TAG
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

Attribute of <a> tag
1.    href- Specifies the URL of the page the link goes to.
Ex-
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

2.    target- Specifies where to open the linked document. The value of target are _blank, _self, _parent, _top.
Ex-
         <a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

3.    mailto- It is used for creating email address as a link.
Ex-
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>

How to use image as a link:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>

How to link to a phone number:
<a href="tel:+4733378901">+47 333 78 901</a>

HTML LISTS:
The HTML lists tag is used for specifying a list item is ordered, unordered and menu lists. Lists commonly are found in documents, including web pages. They are an easy and effective way to itemize such things as elements, components, or ingredients. The most common HTML lists are ordered, unordered and Description List.

Types of Lists
1.    Unordered List <UL>
This list (also known a* unnumbered list) is an indented list with a bullet symbol in front of each list item.
An unordered list starts with the <UL> tag. Each list item starts with the <LI> tag. The list items are marked with bullets (typically small black circles).
The unordered list tag is a container tag. The default bullet type for most Web browsers is a full disc (black circle), but this can be adjusted using an HTML attribute called type.
Syntax
<UL>............</UL>
e.g-
<HTML>
<HEAD>
<TITLE>Unordered List </TITLE>
</HEAD>
<BODY>
<UL>
<LI>My first item on the list.</LI>
<LI>My second item on the list.</LI>
<LI>My third item on the list.</LI>
<LI>My fourth item on the i ist.</LI>
</UL>
</BODY>
</HTML>

2.    Ordered List <OL>
This list starts with the <OL> tag. Each list item starts with the <LI> tag. The list items are marked with numbers. The ordered list tag is a container tag which is used for numbered lists. By default, the numbering will be 1, 2, 3 … . You can also adjust the numbering using type attribute.
Syntax
<OL>.....</OL>
e.g.
<HTML>
<HEAD>
<TITLE> Ordered List </TITLE>
</HEAD>
<BODY>
<0L>
<LI> Rose </LI>
<LI> Lotus </LI>
<LI> Lily </LI>
</0L>
</BODY>
</HTML>

Attribute of Unordered List Tag
Following is the attribute of <UL> tag:

·         type
This attribute is used to change the bulleted symbol in a list. The attribute may have a value of circle, disc or square.
Syntax
<UL type="value”>
Types Value are disc, circle, square. default value of unordered list id "disc".
Example:
<UL type=“square”>
<UL type=“disc”>
<UL type=“circle”>

Attributes of Ordered List Tag
Following are the attributes of ordered list:
·         Type-
Syntax
<OL type=“value”>
<OL type=“a”>
<OL type=“A”>
<OL type=“i”>
<OL type=“I”>

·         Start-
This attribute is used to change the beginning value of an ordered list. Normally, the ordered list begins with 1. It lets you further customise an HTML ordered list by setting a new starting digit for the ordered list element.
Syntax
<OL start=“value” type=“value”>
e.g.
<HTML>
<HEAD>
<TITLE> Ordered List with type attribute </TITLE>
</HEAD>
<BODY>
<0L start=‘A" type=“5” >
<LI> Rose </LI>
<LI> Lotus </LI>
<LI> Lily </LI>
</OL>
</BODY>
</HTML>

3.  Definition list <DL>:
This is a list of items, with a description of each item. HTML definition lists (<DL>) are indented lists without any bullet symbol or any number in front of each item. This list of elements have a unique array of tags and elements; the resulting lists are similar to those you would see in a dictionary.
Tags used in definition lists are as follows:
<DL> Opening tag that defines the start of the list. </DL>
<DT> List item that defines the definition term. </DT>
<DD> Definition of the list item. </DD>
</DL> Closing tag that defines the end of the list. </DL>
The terms DL, DT and DD stand for definition list, definition term and definition description.
e.g.
<HTML>
<HEAD>
<TITLE> Definition List </TITLE>
</HEAD>
<BODY>
<DL>
<DT> Fromage </DT>
<DD> French word for cheese </DD>
<DT> Voiture </DT>
<DD> French word for car </DD>
</DL>
</BODY>
</HTML>

NESTED LIST:
List can be nested that means one list can be placed inside another. In the nested list, one or more items can contain sub-items.
e-g-
<HTML>
<HEAD>
<TITLE> Nested List </TITLE>
</HEAD>
<BODY>
<UL>
<LI> Fruits </LI>
<0L type=“l”>
<LI> Mango </LI>
<LI> Apple </LI>
</0L>
<LI> Vegetables </LI>
<0L type=“l”>
<LI> Onion </LI>
<LI> Tomato </LI>
</0L>
</UL>
</BODY>
</HTML>

<TABLE> TAG:
The <table> tag defines an HTML table for creating the data in tabular format where using of row and column.
An HTML table consists of one <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
·         the <td> element defines a table cell.
·         The <Caption> element defines title of table.

Example-
<table>
<caption> example </caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Attribute of <table> tag-
1. Border- To specifies the table border line.
2. Bordercolor- To Specifies the colour of table border.
3. Bgcolor- set the background colour of table
4. Align- set the alignment of table
5. Cellpadding- the amount of space between cell border and its content.
6. Cellspacing- the amount of space between one cell border to another cell border.

Attribute of <th> and <td> tag-
1.    Align- to set the alignment of cell content.
2.    rowspan- To merge two or more cell of row.
3.    colspan- To merge two or more cell of column.

Example-
<html>
<body>
<table border=2 bordercolor=red bgcolor=yellow align=center cellspacing=5 cellpadding=4>
<caption> Student of SR </caption>
<tr>
<th colspan=3> S R GLOBAL SCHOOL </th>
</tr>
<tr>
<td rowspan=2> Class </td>
<td> XA </td>
<td> XB </td>
</tr>
<tr>
<td> XC </td>
<td> XD </td>
</tr>
</table>
</body>
</html>

No comments:

Post a Comment