Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

HTML Class 12

The document provides an overview of HTML (Hyper Text Markup Language), its structure, and its components for creating web pages. It details the various tags, attributes, and types of lists, as well as how to implement and execute HTML code. Additionally, it covers multimedia support, hyperlinking, and the use of tables and images in HTML documents.

Uploaded by

haum5627
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Class 12

The document provides an overview of HTML (Hyper Text Markup Language), its structure, and its components for creating web pages. It details the various tags, attributes, and types of lists, as well as how to implement and execute HTML code. Additionally, it covers multimedia support, hyperlinking, and the use of tables and images in HTML documents.

Uploaded by

haum5627
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 100

HTML

INTODUCTION
• HTML- Hyper Text Markup Language
• Used for creating web pages
• Web page- contain images, movies, sound,
information, hyperlinks
• Html documents describe a static web pages
• Tells the browsers how to display the web
pages
• Latest version of Html is HTML 5
INTODUCTION
• Specifies the document layout and specifies
the hyperlinks
• Supports multimedia
• It is not a word processing tool
• It is not a programming language
• Page-layout and hyperlink specification
language
IMPLEMENTATION
• Where to right the HTML code?
➢Text Editors
▪ Notepad or Wordpad
➢Dreamweaver

• Where to Execute?
➢ Double click the html file (or)
➢ Right Click and open with the browser
Sample Code
Sample Output
Step to create a web page using HTML

• Open notepad or word pad


• Write the html code
Step to create a web page using HTML

• Save the file with extension as .html or .htm


– Click on file -> save
Step to create a web page using HTML

• U will get the web page icon

• Double click the icon , the web browser will


open
How to write the html documents?
• Made of elements or tags and attributes
• Tag- coded HTML command
• Should be written within < …. >
• Attribute- special word used inside a tag like colour,
size or alignment to specify additional information
• Example: <body bgcolour=“red”>
• body-tag
• bgcolour-attribute
HTML DOCUMENT STRUCTURE
• Bound between <HTML>……..</HTML>
• Contains two section
• Head Section
– Bound between <head>….</head>
– Header of the document
• Body Section
– Bound between <body>…..</body>
– Makes the body of the document
Head Section

Body Section
Header appers at the top the
window

Body appers in the window


<HTML> Tag
• Html document begins and ends with this tag
• It describes the web page
• Start tag- <html>
• End tag - </html>
<HEAD> TAG
• Information about the document
• Like title, script, style definition and
documents
• Example:
<html>
<head>
(header information>
</head>
</html>
<TITLE> TAG
• Gives the title of the web page
• Always given within the <head> tag
• Appears in the title bar of the browser
• Example:
<html>
<head>
<title>My first page</title>
</head>
<BODY> TAG
• Contain all the information to be diaplayed in the web page
• Enclosed within the <body> tag
• entered below the </head> tag and Closed above the </html>
tag
• Example:
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello World!!</h1>
<h2>Welcome</h2>
</body>
</html>
TYPES OF TAGS
• Two types
– Container elements or tags
– Empty elements or tags
• Container tag- which contains start and end
tag
• Example:
• <html> …….</html>
• <body>…….</body>
TYPES OF TAGS
• Empty Tags – Contain only start tag but no end
tag
• Example:
➢<br>
➢<img>
➢<link>
Attributes of <html> tag
• Container tag
• Attributes- DIR, LANG
• DIR- sets the direction of the text within an
element in HTML document.
• Two values-
– ltr(left to right)
– rtl (right to left)
• Default value is ltr(left to right)
Attributes of <html> tag-DIR
• Example:
▪ <html dir=rtl>
Attributes of <html> tag-DIR
• Example:
▪ <html dir=ltr>
Attributes of <html> tag-LANG
• Lang- specifies the language used within the
language
• Example:
➢<html lang=en>
en- english
fr- french
Attributes of <body> tag
• bgcolor- gives background colour to the web
pages
• Example:
OUTPUT
Attributes of <body> tag
• background- to display images as a
background
• Example:
OUTPUT
Attributes of <body> tag
• text- gives the text colour for the web page
• Example:
OUTPUT
Attributes of <body> tag
• Link colour- it is of three types
• link, alink and vlink
• Link- colour of the link which has not been
visited
• Alink-colour of the active link which appers
brifely when clicked
• Vlink- colour of the visited link
Example
Colours and their RGB values
Example
OUTPUT
Heading Tags
• Six levels of heading tags
• Type- Container Tag
• Used to give headings in the web pages
• They are:
▪ <h1>……….</h1>
▪ <h2>……….</h2>
▪ <h3>……….</h3>
▪ <h4>……….</h4>
▪ <h5>……….</h5>
▪ <h6>……….</h6>
• <h1> gives the largest size and <h6> gives the
smallest size.
Example Code and Output
<p> Tag- Paragraph Tag
• <p> tag- defines a paragraph
• Type- Container tag
• Displays the the text written the<p>.... </p>
with the break .
• User must tell when to go to the next line
Example
Output
<BR> Tag –Line Break Tag
• <br> tag- inserts a single line break.
• Type - empty tag which means that it has no
end tag.
Example
OUTPUT
TEXT STYLES
• Three types:
• Bold Face- <B>….</B>: Displays text in bold
• Italics - <i>……</i> : Displays Text in italics
• Underline- <u>…….</u>: Unlines the text.
Example
OUTPUT
<font> tag
• Container tag <font> ….</font>
• Any text typed within this tag will appear as
specified by the attributes of the tag.
• Attributes are
– size: Numeric values range from 1 to 7 (1 is the
smallest, 7 is the largest, 3 is the default).
– Color: will give colour to the text
– Face:Sets the typeface
Example and output
<hr> tag- Horizontal Rule
• Empty tag- <hr>
• It is used to separate content
• Attributes:
– Size-gives the thickness of the line
– Width- the percentage of the window to be covered by
the line
– Align- Used to specify the alignment of the horizontal
rule.
– Color- gives colour to the hprizontal rule
– Noshade-one solid colour instead of shaded color
Example
Output
List in HTML
• Al list types are container tags
• Three types of list in HTML
– Unordered list - <ul>……</ul>
– Ordered list- <ol>……</ol>
– Definition list-<dl>……</dl>
• The List can be nested (List within a list)
Unordered list
• Unordered List or Bulleted List displays elements in
bulleted format.
• can be 4 types of bulleted list:
➢Disc
➢circle
➢square
➢None
• Type- Container Tag
• To enter items in the list we us <li> tag. It is an
empty tag.
Example and Output
Attribute of <ul> tag
• type: it describes the style of bullets

Type Description

Type "disc" This is the default style. In this


style, the list items are marked
with bullets.
Type "circle" In this style, the list items are
marked with circles.
Type "square" In this style, the list items are
marked with squares.
Type "none" In this style, the list items are not
marked .
Example Code
Output
Ordered List
• puts items in a numbered list instead of
bulleted
• The numbering starts at one and is
incremented by one for each successive
ordered list element tagged with <li>.
Attributes of <ol> list
• type: The type attribute of the <ol> tag,
defines the type of the list item marker
Type Description
type="1" The list items will be numbered with
numbers (default)
type="A" The list items will be numbered with
uppercase letters
type="a" The list items will be numbered with
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers
Attributes of <ol> list
• Start:lets you change the beginning value
Example
Output
Definition List
• Entries are listed like in a dictionary or
encyclopaedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/
value list.
• Definition List makes use of following three tags.
– <dl> − Defines the start of the list
– <dt> − A term
– <dd> − Term definition
– </dl> − Defines the end of the list
Example
Output
Nested List-List inside another list
Output
Inserting images in HTML
• Images are not technically inserted into an HTML
page, images are linked to HTML pages.
The <img> tag creates a holding space for the
referenced image.
• It is an empty tag
• Example:
• <img src=“image_name.ext”>
• Note: We must save the image and the HTML in the
same folder otherwise we have to mention the path
of the image.
Attributes of <img>

Attribute Value Description

alt text Specifies an alternate text for an


image
height pixels Specifies the height of an image

src URL Specifies the URL of an image

width pixels Specifies the width of an image


Example
Output
Output-When images not inserted
properly
Image Aligment
• Align- to align the images in the web page
• Example:

<img align=“left/right/middle/top/bottom”>
Hyperlinking-Anchor tag
• The <a> tag defines a hyperlink, which is used
to link from one page to another.
• It is a container tag
• 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
Attributes

Attribute Value Description

href URL Specifies the URL of the page the link


goes to
download filename Specifies that the target will be
downloaded when a user clicks on
the hyperlink
hreflang language_c Specifies the language of the linked
ode document
Example-First html file
Second HTML File
Ouput of the first page
Output once we click the link
To make image as a link
Output
To connect other websites
Output
Tables in HTML- <html>
• Used to arrange data
• Each table has a caption given with the <caption>
……</caption> tag(heading given outside the table>
• Tags used to create table in HTML
-<table>….</table>
-<tr>……</tr>- to create a row
-<th>….</th>- table header (given inside the
table)
-<td>….</td>- table data
Tables in HTML
1. <table>………</table>
2. <caption> Table caption</caption>
3.<tr>…</tr>
4.<th>……</th> <th>…..</th> <th>……</th>

5.<td>……</td> <td>……</td> <td>……</td>

<td>……</td> <td>……</td> <td>……</td>


Example
Output
Attributes of <table> tag
Attribute Value Description
align left Specifies the alignment of the table with respect to the
center document.
right
bgcolor color Sets the background color of the table.
border 1 Specifies whether the table cells should have borders or
0 not.
Bordercolor Color Specifies the color of the table border

cellpadding length Specifies the space between the edge of a cell and its
content.
cellspacing length Specifies the amount of space between individual cells.
frame Above,below, Specifies which sides of the border frame surrounding a
border, table will be visible.
box,hsides,lhs,
rhs,void,vsides
rules All,cols,groups, Specifies which parts of the inside borders will appear
none,rows between cells within a table.
Example
Output
<marquee> Tag
• The HTML <marquee> tag is used for scrolling
piece of text or image displayed either
horizontally across or vertically down your web
site page depending on the settings
• Container tag
• <marquee>………</marquee>
Attributes of marquee tag
Attribute Description
width provides the width or breadth of a marquee. For example width="10" or
width="20%"
height provides the height or length of a marquee. For example height="20" or
height="30%"
direction provides the direction or way in which your marquee will allow you to scroll. The
value of this attribute can be: left, right, up or down

scrolldelay provides a feature whose value will be used for delaying among each jump.
scrollamount provides value for speeding the marquee feature
behavior provides the scrolling type in a marquee. That scrolling can be like sliding, scrolling
or alternate
loop provides how many times the marquee will loop
bgcolor provides a background color where the value will be either the name of the color
or the hexadecimal color-code.
vspace provides a vertical space and its value can be like: vspace="20" or vspace="30%"
hspace provides a horizontal space and its value can be like: vspace="20" or
vspace="30%"
Example
<sub> Tag
• The <sub> tag defines the subscript text.
Subscript text appears half a character below
the normal line and in smaller font.
• Eg. H2O
• Container tag
• <sub>………</sub>
<sup> Tag
• The <sup> tag defines the superscript text.
Superscript text appears half a character above
the normal line and in smaller font.
• Eg. X2
• Container tag
• <sup>………</sup>
<frameset> Tag
•It is used to divide the browser window into different frames and to
use different HTML document in those frames.
•Since several frames are visible in the browser window as a result
this is called frames

Attributes of <frameset> Tag


•Attributes: The list of frameset attributes are given below:

•cols: The cols attribute is used to create vertical frames in web browser. This attribute is
basically used to de ne the no of columns and its size inside the frameset tag.

•rows: The rows attribute is used to create horizontal frames in web browser. This attribute is
used to de ne no of rows and its size inside the frameset tag.

•border: This attribute of frameset tag de nes the width of border of each frames in pixels.
Zero value is used for no border

•frameborder: This attribute of frameset tag is used to specify whether three dimensional
border should be displayed between the frames or not for this use two values 0 and 1, where 0
de nes for no border and value 1 signi es for yes there will be border

•framespacing: This attribute of frameset tag is used to specify the amount of spacing between
the frames in a frameset. This can take any integer value as a parameter which basically
denotes the value in pixel.
fi
fi
fi
.

fi
fi

Example
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">


<frame name = "top" src = “page1.html" />
<frame name = "main" src = “page2.html" />
<frame name = "bottom" src = “page3.html” />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>

Example
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">


<frame name = "left" src = "top_frame.htm" />
<frame name = "center" src = "main_frame.htm" />
<frame name = "right" src = "bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

You might also like