HTML lab exercise 1
Html basic tag
<html>
<head>
<title>My first HTML Page!</title>
</head>
<body>
I Love HTML!
</body>
</html>
HTML <body>BGCOLRE Attribute
BGCOLRE Attribute Specify a background color for an HTML document
<html>
<head>
<title>My first HTML Page!</title>
</head>
<body bgcolor="#E6E6FA">
I Love HTML!
</body>
</html>
1
HTML lab exercise 2
HTML <body>background Attribute
Specify a background image for an HTML document:
<html>
<head>
<Title>My first HTML Page! </title>
</head>
<body background="[Link]">
I Love HTML!
</body>
</html>
Heading (h1-h6)
<html>
<head>
<title>
basic html
</title>
</head>
<body>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</body>
</html>
2
HTML lab exercise 3
Paragraph
<html>
<head>
<title>
basic html
</title>
</head>
<body>
<p>welcome to my first page</p>
</body>
</html>
Paragraph and heading with Align attribute
Align Attribute Values
Left :-left-align text
Right:- right-align text
Center:-center align text
Justify:- Stretches the lines so that each line has equal width
<html>
<head>
<title>Basic HTML Sample Page</title>
<body>
<h1 align=”Center”>HTML</h1>
<p align=”right”>HTML is really a very simple language. It consists of ordinary text,
with commands that are enclosed by "<" and ">" characters</p></body></html>
3
HTML lab exercise 4
Break
<HTML>
<HEAD>
<title> Basic HTML Sample Page</title>
<body>
<h1 align=” Center”>HTML</h1>
<p align=”right”> HTML is really a very simple language.<br> It consists of ordinary
text, with commands that are enclosed by "<" and ">" characters</p></body></html>
Horizontal Rule
<HTML>
<HEAD>
<title> Basic HTML Sample Page</title>
<body>
<h1 align=” Center”>HTML</h1><hr>
<p> HTML is really a very simple language.<br> It consists of ordinary text, with
commands that are enclosed by "<" and ">" characters</p></body></html>
  character
<HTML>
<HEAD>
<title> Basic HTML Sample Page</title>
<body>
<h1 align=” Center”>HTML</h1><hr>
<p> HTML is really a very simple language.<br>
It consists of ordinary text, with commands that are enclosed by "<" and
">" characters</p></body></html>
4
HTML lab exercise 5
<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.
<HTML>
<HEAD>
<title> Basic HTML Sample Page</title>
<body>
<marquee><h1 align=” Center”>HTML</h1><hr></marquee>
<p> HTML is really a very simple language.<br>
It consists of ordinary text, with commands that are enclosed by "<" and
">" characters</p></body></html>
<marquee> tag behaviorand direction attribute
Behavior:-define the type of scrolling
Behaviorvalue can be slid and alternate
<HTML>
<HEAD>
<title> Basic HTML Sample Page</title>
<body>
<marquee Behavior=”alternate”><h1 align=” Center”>WELCOME TO WULRO
PREPARATORY SCHOOL</h1><hr></marquee>
<p> HTML is really a very simple language.<br>
It consists of ordinary text, with commands that are enclosed by "<" and
">" characters</p></body></html>
5
HTML lab exercise 6
Direction:-Defines the direction of scrolling the content
Direction value can be:- up, down, left and right
<HTML>
<HEAD>
<title> Basic HTML Sample Page</title>
<body>
<marquee direction=”up”><h1 align=” Center”>HTML</h1></marquee>
<p> HTML is really a very simple language.<br>
It consists of ordinary text, with commands that are enclosed by "<" and
">" characters</p>
</body>
</html>
Exercise write the HTML code of the following output
6
HTML lab exercise 7
Character Formatting
HTML defines a lot of elements for formatting output, like bold or italic some of the
element are listed below.
Font element
Used to modify the text size using size attribute
The size attribute can be set as absolute value from 1 to 7 or as a relative value using
the “+” or “-“sign.
e.g.<FONT SIZE="+2">Two sizes bigger</FONT>
Normal text is size 3.
Used to modify the text color using color attribute
E.g. <FONT COLOR=”#RRGGBB”>this text has color</FONT>
Center text-the <CENTER> element
<CENTER>…</CENTER> element Will center elements.
Bold Text - The <b> Element:
Anything that appears in a <b>...</b> element is displayed in bold, like the word bold here:
7
HTML lab exercise 8
e.g.<p>The following word uses a <b>bold</b> typeface.</p>
This will produce following result:
The following word uses a bold typeface.
Another element that used to make the text bold is <STRONG> element.
<STRONG> STRONG </STRONG> browsers display this as bold.
Italic Text - The <i> Element:
Anything that appears in a <i>...</i> element is displayed in italicized, like the word
italicized here:
e.g. <p>The following word uses a <i>italicized</i> typeface.</p>
This will produce following result:
The following word uses aitalicizedtypeface
<EM> element:
Another element used to make text italicized
<EM> Emphasis </EM> browsers usually display this as italics.
<TT>element
<TT>TELETYPE </TT> Text is displayed in a mono-spaced font.
e.g. <TT>TELETYPE </TT>
This will produce following result:
<CITE> element
<CITE> Citation </CITE> represents a document citation.
e.g.<CITE> Citation </CITE>
This will produce the following result
Underlined Text - The <u> Element:
Anything that appears in a <u>...</u> element is displayed with underline, like the word
underlined here:
8
HTML lab exercise 9
<p>The following word uses a <u>underlined</u> typeface.</p>
This will produce following result:
The following word uses aunderlined typeface.
Strike Text - The <strike> Element:
Anything that appears in a <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text:
e.g. <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
This will produce following result:
The following word uses a strikethrough typeface.
Superscript Text - The <sup> Element:
The content of a <sup> element is written in superscript.
e.g.<p>The following word uses a <sup>superscript</sup> typeface.</p>
This will produce the following result
The following word uses a superscript typeface
Subscript Text - The <sub> Element:
The content of a <sub> element is written in subscript;
e.g.<p>The following word uses a <sub>subscript</sub> typeface.</p>
This produces the following result
The following word uses asubscripttypeface.
Larger Text - The <big> Element:
The content of the <big> element is displayed one font size larger than the rest of the text
surrounding it.
e.g. <p>The following word uses a <big>big</big> typeface.</p>
This will produce the following result:-the following word uses a bigtypeface
Smaller Text - The <small> Element:
The content of the <small> element is displayed one font size smaller than the rest of the
text surrounding it.
9
HTML lab exercise 10
e.g.<p>The following word uses a <small>small</small> typeface.</p>
This will produce the following result: -The following word uses asmall typeface
<PRE> element
<PRE> Preformatted </PRE>>Text enclosed by PRE tags is displayed in a mono-spaced
font. Spaces and line breaks are supported without additional elements or special
characters.
<CENTER>element
<CENTER></CENTER> Will center elements.
<BLOCKQUOTE>element
<blockquote>…</blockquote>
The <blockquote> tag specifies a section that is quoted from another source.
This element can also contain most other formatting elements such as Headings,
paragraphs, tables, etc
Formatting text and add an image
Crate the following page using text formatting element, IMG element and character entity.
10
HTML lab exercise 11
The HTML document for the above page
<html>
<head>
<title>school of computing</title>
</head>
<body>
<imgsrc="image/[Link]" alt="school of computing banner" width="1300"></br>
The ACM Computing Curricula 2005<sup>[1]</sup>defined
"computing" as follows:
<pre><blockquote>
11
HTML lab exercise 12
"In a general way, we can define computing to mean any goal-oriented activity
requiring, benefiting from,or creating computers.
Thus, computing includes designing and building hardware and software systems
for a wide range of purposes."
</blockquote></pre>
<b><u><font size="+2" color="#480000">
List of department under school of computing
</font></u></b><br>
<i>computer science<i><br><br>
<i>information science<i><br><br>
<i>information technology</i><br><br>
<address>
contactadress of DBU school of computing member<br>
<imgsrc="image/[Link]" width="30" height="40"> +251114567892<br>
[Link]
</address>
<b><center>
© Copy Rights,All Rights Reserved Designed by DBU
</center></b>
</body>
</html>
12