Thursday, May 20, 2021

 

Notes for Class XI Web Technology – I

HTML (HyperText Markup Language)

HTML is a markup language, which is used to define the layout and attributes of a World Wide Web (WWW) document as well as to create links between Web pages.

HTML is the underlying foundation of Website design. It is a subset of SGML (Standard Generalized Markup Language) and a high-level markup language.

HTML is a short form of HyperText Markup Language, which means

(i) HyperText is simply a piece of text that has some extra features like formatting, images, multimedia and links to another document.

(ii) Markup Language is a way of writing layout information within documents. HTML is a page layout and hyperlink specification language. It allows images and other objects to be embedded that can be used to create interactive forms. HTML documents are described through HTML tags or elements.

HTML ELEMENTS or TAGS

HTML is written in the form of tags. A tag refers to a string enclosed within angular brackets (< and >). HTML elements represent semantics or meaning.

·         HTML tags are predefined and are not 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”>

There are two kinds of elements, i.e. Container elements and Empty elements.

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>

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

HTML STRUCTURE

HTML document is a combination of various tags, which define the structure and appearance of the Web page.

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

(i) 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.

(ii) 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.

(iii) 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.

(iv) 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. It holds all your content words, pictures and other stuff. The most basic structure needed for creation of any Web page are as follows:


CREATING and SAVING a HTML DOCUMENT

Since, HTML documents are just text files, they can be written in any simple text editor like Notepad, FrontPage, Dreamweaver, WordPad etc.

If you are using a Notepad to create a HTML document, the steps are as follows:

Step 1: Open Notepad by clicking at

Start —> All Programs —> Accessories —> Notepad.

Step 2: Type the HTML document in Notepad as shown in the following figure:


Step 3: To save the document, click at File menu —> Save As command.

Step 4: The Save As dialog box will appear as shown in the following figure:


Step 5: In Save As dialog box, after selecting the desired folder, give the desired file name along with the extension .htm or .html in the File name: box and then, click Save button. In the above figure, we have saved out HTML document under name First.html.

VIEWING HTML DOCUMENT in a BROWSER

You can view HTML document in any Web browser such as Internet Explorer, Mozilla Firefox, Opera, Apple Safari, Netscape Navigator, Google Chrome etc.

BASIC HTML TAGS

HTML provides some basic tags which are required for HTML code.

<HTML>Tag

It represents the root of an HTML document, so it acts as a container for all other HTML elements. It informs the browser that it is dealing with an HTML document. It is very important to place both of these tags (open and close HTML tags) in your documents as they tell the browser, where your page begins and ends,

e.g.

 <HTML>

 </HTML>

<HEAD> Tag

This element is a container for all the header elements. The <HEAD> tag must include a title for the document that can include scripts, styles, meta information and many more. The second line of your HTML document should be <HEAD>.

The content contained in the head section of your document provides information to the browsers and search engines but, it is not displayed directly on the Web page. The end of the head tag is indicated by </HEAD>.

e-g.

<HTML>

 <HEAD>

 Header information comes here

 </HEAD>

 </HTML>

<TITLE> Tag

This tag defines the title of the document. Title must be a simple text and should not be same as the file name. It is placed between <HEAD> and </HEAD> tags.

eg-

<HTML>

 <HEAD>

 <TITLE>

 This is the title of my page.

 </TITLE>

 </HEAD>

 </HTML>

Output


<BODY> Tag

This tag defines the document’s body. It is used to set the basic page characteristics. It contains all the necessary contents of a HTML document, such as text, hyperlinks, images, tables, lists etc. The content of your Web page is placed in between the opening <BODY> and closing </BODY> tags.

The <BODY> tag is opened just after the head section is closed. It is closed just before closing the <HTML> tag.

e.g.

<HTML>

 <HEAD>

 <TITLE>

 My First Web Page

 </TITLE> .

 </HEAD>

 <B0DY>

 Hello world. This is my first web page. </B0DY>

 </HTML>

 

Output

 

Attributes of <BODY> Tag

This tag provides various attributes, which are as follows:

background

This attribute specifies a background image for a document. HTML supports various graphics format such as .gif, .jpg etc.

 

Syntax

 <B0DY background=“URL”>

 Where, URL may be an image name or a path of an image.

 e-g-

 <HTML>

 <HEAD><TITLE>

 Background Image </TITLE></HEAD>

 <B0DY background ="image.jpg”>

 </B0DY>

 </HTML>

Output


text

This attribute specifies the color of the text in a document.

 

Syntax

 <B0DY text=“color_name|hex_number|rgb_number”>

 

Attribute Values

 

Value                    Description

color_name        Specifies the text-color with a color name (like “red”).

hex_number     Specifies the text-color with a hexadecimal code (like “#FF0000”) where, # stands for the color number.

rgb_number      Specifies the text-coior with a rgb(red, green, blue) code (like “rgb(255,0,0)”).

e.g. <HTML>

 <B0DY text=“red”>

 Arihant Publication </B0DY>

 </HTML>

bgcolor

This attribute specifies the background color of a document.

 

Syntax

 <B0DY bgcol or=“color_name|hex_number|rgb_number”>

 e.g. <HTML>

 <B0DY bgcolor="red”>

 </B0DY>

 </HTML>

link

This attribute specifies the color of an unvisited link in a document. The default color of link attribute is blue (#0000FF).

 

Syntax

 <B0DY 1ink=“color_name | hex_number | rgb_number”>

 e.g. <HTML>

 <B0DY Link=“red”>

 </B0DY>

 </HTML>

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

 <B0DY alink=“color_name | hex_number | rgb_number”>

 e.g.

 <HTHL>

 <B0DY alink=“blue”>

 </B0DY>

 </HTML>

vlink

This attribute specifies the color of a visited link in a document. The default color of vlink attribute is purple (#800080).

 

Syntax

 <B0DY vlink= “color_name | hex_number | rgb_number”>

 Eg:

 <HTML>

 <B0DY vlink = "blue”>

 </B00Y>

 </HTHL>

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>

Output


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>

Output


<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. It can be set for a character, sentence or entire document.

 

Attributes of <FONT> Tag

Following are the attributes of <FONT> tag:

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”>

Attribute Value

 

Value    Description

number                A number from 1 to 7, that defines the size of the text. Default number of value is 3.

e.g.

 <HTML>

 <HEAD>

 <TITLE>

 Font Size </TITLE>

 </HEAD>

 <B0DY>

 <FONT size=“4”>

 This is the default size. </FONT>

 </B0DY>

 </HTML>

Output


face

This attribute specifies the font name or type face of the text inside a <FONT> tag.

 

Syntax

 <F0NT face=‘‘font_family”>

Attribute Value

 

Value                                    Description

font_family                   The font name of the text specifies a prioritized list of several fonts, separate    the names with a comma (like <FONT face=“verdana,arial,sans-serif ”>.

e.g.

 <HTML>

 <HEAD>

 <TITLE> Font Face </TITLE>

 </HEAD>

 <BODY>

 <FONT face=“verdana”> This is some text! </FONT>

 </BODY>

 </HTML>

Output


color

This attribute specifies the color of the text inside a <FONT> tag.

 

Syntax

 <FONT color=“color_name|hex_number|rgb_number”>

 e.g.

 <HTML>

 <BODY>

 <FONT color=“red”>

 This is some text!

 </FONT>

 </BODY>

 </HTML>

Some examples of using <FONT> tag are as follows:

 

<FONT size="3” color=“orange”>

This is an example!</FONT>

<FONT face=‘‘arial ” color=‘‘green”>

This is a table!</FONT>

<FONT size =+2> ABC </FONT>

<CENTER> Tag

This tag is used to centralize 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>

 eg-

 <HTML>

 <HEAD>

 <TITLE> Center </TITLE> .

 </HEAD>

 <BODY>

 <CENTER>  This text will be center-aligned. </CENTER>

 </BODY>

 </HTML>

Output


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. This is especially useful, when you have a lot of codes.

 

Syntax

 <! - -.... - ->

 <HTML>

 <HEAD>

 <TITLE>  Comment  </TITLE>

 </HEAD>

 <BODY>

 <!- - This is a comment. - - > This is body.

 </BODY>

 </HTML>

Output


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.

 eg-

 <HTML>

 <HEAD>

 <TITLE>  Heading Level  </TITLE>

 </HEAD>

 <B0DY>

 <H1> level 1 Headline </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>

Output


Attribute of <HEADING> Tag

Following is the attribute of <HEADING> tag:

align

This attribute specifies the alignment of the text as heading. By default, alignment is left.

 

Syntax

 <Hn align=“center | left | right | justify”> </Hn>

 Where, n=l to 6

 eg-

 <HTML>

 <HEAD>

 <TITLE> Heading in HTML </TITLE>

 </HEAD>

 <BODY>

 <H1 align = “center”>level 1 Headline</H1>

<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>

Output


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>

Output


Attribute of <P> Tag

Following is the attribute of <P> tag:

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>

Output


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.

 

eg.

 <HTML>

 <HEAD>

 <TITLE>  Line Break  </TITLE>

 </HEAD>

 <BODY>

 This text contains <BR> a line break.

 </BODY>

 </HTML>

Output


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:

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 </TITLE>

 </HEAD>

 <BODY>

 <HR align=“right”>

 This is a line.

 </BODY>

 </HTML>

Output


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”>

Attribute Value

 

Value    Description

pixels    The height of the <HR> tag in pixels.

e.g.

 <HTML>

 <HEAD>

 <TITLE>  HR tag with size attribute  </TITLE>

 </HEAD>

 <BODY>

 <HR size=“3”>

 This is a line.

 </BODY>

 </HTML>

Output


noshade

When this boolean attribute is present, the rule is drawn with a solid black line as a 2D effect instead of the default 3D effect, i.e. without shading.

 

Syntax

 <HR noshade>

 <HTML>

 <HEAD>

 <TITLE>

 HR tag with noshade attribute </TITLE>

 </HEAD>

 <B0DY>

 <HR size = "5” noshade>

 <HR size= “5”>

 This is a sol id line.

 </B0DY>

 </HTML>

Output


width

This attribute specifies the width of a horizontal line in pixels or percent. Its default value is 100%.

 

Syntax

 <HR width=“pixels or %”>

Attribute Value

 

Value    Description

pixels    The width in pixels (like ‘100 px’ or just ‘100’).

%            The width in percent of the available space (like ‘50%’).

e.g.

 <HTML>

 <HEAD>

 <TITLE>  HR tag with width attribute </TITLE>

 </HEAD>

 <BODY>

 <HR width=“50%”>

 This is a line.

 </BODY>

 </HTML>

Output


color

This attribute specifies the color of the horizontal line.

 

Syntax

 <HR color="color_name|hex_number|rgb_number”>

 e.g.

 <HTML>

 <HEAD>

 <TITLE>  HR tag with color attribute  </TITLE>

 </HEAD>

 <BODY>

 <HR color=“red”>

 This is a red line.

 </BODY>

 </HTML>

Output


 Colors and their Hexadecimal and RGB Values

 

Color Name        Hexadecimal Value         RGB Value

Aqua                      #00FFFF                          gb(0,255,255)

Black                      #000000                         rgb(0,0,0)

Blue                       #0000FF                         rgb(0,0,255)

Fuchsia                  #FF00FF                          rgb(255,0,255)

Gold                      #FFD700                         rgb(255,215,0)

Gray                      #808080                          rgb(128,128,128)

Green                    #008000                           rgb (0,128,0)

Khaki                    #F0E68C                        rgb(240,230,140)

Lime                     #00FF00                          rgb(0,255,0)

Maroon                 #800000                         rgb(128,0,0)

Navy                      #000080                         rgb (0,0,128)

Olive                      #808000                         rgb(128,128,0)

Orange                 #FFA500                          rgb(255,165,0)

Pink                       #FFC0CB                       rgb(255,192,203)

Purple                   #800080                           rgb(128,0,128)

Red                        #FF0000                          rgb(255,0,0)

Silver                     #C0C0C0                         rgb(192,192,192)

 

Style Tags

HTML provides various style tags, which are as follows:

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>

Output

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>

 

 Output


 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>

 </B0DY>

 </HTML>

Output


HTML LISTS

 

Types of Lists

Unordered List <UL>

This list (also known as 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>

 eg-

 <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>

Output


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”>

HTML Unordered List Types Value

 

Value    Description

Square  Use black square bullet ()

Disc        Use solid circle bullet (•)

Circle     Use a hollow bullet (°)

Here, we are using <UL> HTML code in the below example and we get various output as follows:

 

<UL type=“square”>

 <UL type=“disc”>

 <UL type=“circle”>

HTML Unordered List Types Output

 

Square                  Disc                        Circle

Rose                  • Rose                  o Rose

Lotus                 • Lotus                 ° Lotus

Lily                      • Lily                      o Lily

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>

 <OL>

 <LI> Rose </LI>

 <LI> Lotus </LI>

 <LI> Lily </LI>

 </OL>

 </BODY>

 </HTML>

Output

 


Attributes of Ordered List Tag

Following are the attributes of Ordered list:

type

The numbering of an HTML list can be changed to letters or roman numerals by the type attribute.

 

Syntax

<OL type=“value”>

HTML Ordered List Types Value

 

Value    Description

1              The default, uses arabic numerals

I               Uses uppercase roman numerals

i               Uses lowercase roman numerals

A             Uses uppercase letters

a              Uses lowercase letters

Here, we are using <OL> HTML code in the below example and we get various output as follows:

 

 <OL type=“a”>

 <OL type=“A”>

 <OL type=“i”>

 <OL type=“I”>

HTML Ordered List Types Output

 

Lowercase roman numerals        Uppercase roman numerals

i. Rose                                                   I. Rose

ii. Lotus                                                 II. Lotus

iii. Lily                                                  III. Lily

 

 

Lowercase letters            Uppercase letters

a.Rose                                  A. Rose

b.Lotus                                B.Lotus

c.Lily                                   C. Lily

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 customize 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>

 <OL start=‘1" type=“1” >

 <LI> Rose </LI>

 <LI> Lotus </LI>

 <LI> Lily </LI>

 </OL>

 </BODY>

 </HTML>

Output


Definition List

This is a list of items, with a description of each item. HTML definition lists (<DL>) are indented list without any bullet symbol or any number in front of each item. This list 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.

<DT> List item that defines the definition term.

<DD> Definition of the list item.

</DL> Closing tag that defines the end of the list.

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><B> Fromage </B>

 <DD> French word for cheese

 <DT><B> Voiture </B>

 <DD> French word for car

 </DL>

 </BODY>

 </HTML>

Output


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.

 

eg-

 <HTML>

 <HEAD>

 <TITLE>  Nested List  </TITLE>

 </HEAD>

 <BODY>

 <UL>

 <LI> Fruits </LI>

 <OL type=“1”>

 <LI> Mango </LI>

 <LI> Apple </LI>

 </OL>

 <LI> Vegetables </LI>

 <OL type=“1”>

 <LI> Onion </LI>

 <LI> Tomato </LI>

 </OL>

 </UL>

 </BODY>

 </HTML>

Output


***

No comments:

Post a Comment