Scribd
Upload
264 views

HTML - Lab Activities

Uploaded by

6450Mohamed Faraz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
264 views

HTML - Lab Activities

Uploaded by

6450Mohamed Faraz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML - LAB ACTIVITIES

Lab Activity - 001 - CREATING HTML DOCUMENT

# Type the following HTML code in a notepad


# Save the file as - your name.html
# Run / open your HTML file in the web browser

<HTML>
<HEAD>
<TITLE> (mention your name)’s FIRST WEB PAGE </TITLE>
</HEAD>
<BODY>
MY WEB PAGE - (mention your name IN CAPITAL LETTER)
</BODY>
</HTML>
Lab Activity - 002 - USING <BODY> ATTRIBUTES
# Type the following HTML code in a notepad
# Save the file as - your name.html
# Run / open your HTML file in the web browser
# Change the values of the attributes in the HTML code, save the file and
check the changes by refreshing the web page.

<HTML>
<HEAD>
<TITLE> (mention your name)’s FIRST WEB PAGE </TITLE>
</HEAD>

<BODY BGCOLOR=LIGHTGREEN TEXT = BLUE TOPMARGIN=10


LEFTMARGIN=10 RIGHTMARGIN=10 BOTTOM MARGIN=10>

<H1 ALIGN=CENTER> MY WEB PAGE - (mention your name


IN CAPITAL LETTER) </H1>
(Introduce yourself and mention 3-4 lines about yourself)
</BODY>

</HTML>
Lab Activity - 003 - USING HEADER TAGS WITH ATTRIBUTES

# Check the difference in the headers and their allignment in the web
page.
<HTML>
<HEAD>
<TITLE> DON BOSCO </TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTBLUE TEXT = GREEN TOPMARGIN=12
LEFTMARGIN=12 RIGHTMARGIN=12 BOTTOM MARGIN=12>
<H1 ALIGN=CENTER> DON BOSCO’S QUOTES </H1>
<H2 ALIGN = CENTER> Do not try to excuse your faults; try to
correct them. </H2>

<H3 ALIGN=LEFT> The power of evil men lives on the


cowardice of the good. </H3>
<H4 ALIGN=LEFT> Rest does not mean laziness. </H4>

<H5 ALIGN=RIGHT> Disobedience is the root of all evil.</H5>


<H6 ALIGN = RIGHT> Run, jump, shout, but do not sin.</H6>

</BODY>
</HTML>
Lab Activity - 004 - INSERTING IMAGE AND USING BREAK TAG

<HTML>
<HEAD>
<TITLE> DON BOSCO </TITLE>
</HEAD>
<BODY BGCOLOR=lightBLUE >
<H1 ALIGN=CENTER> DON BOSCO’S QUOTES </H1>
<BR> <BR>
<IMG src = "mention the path/location of the image"
alt= "DON BOSCO" ALIGN = RIGHT width="150"
height="300">
<H2 ALIGN = CENTER > Do not try to excuse your faults; try to
correct them. <BR> <BR>
The power of evil men lives on the cowardice of the good.
<BR> <BR>
Rest does not mean laziness. <BR> <BR>
Disobedience is the root of all evil. <BR> <BR>
Run, jump, shout, but do not sin. <BR> <BR>
Do not be afraid of what men can do if we tell the truth, Only
fear what God would do if we lied.
</BODY>
</HTML>
Lab Activity - 005 - USING <FONT> ATTRIBUTES & FONT STYLE
<HTML>
<HEAD>
<TITLE> DON BOSCO </TITLE>
</HEAD>
<BODY BGCOLOR=lightBLUE >
<H1 ALIGN=CENTER style="background-color:DodgerBlue"> DON
BOSCO’S QUOTES </H1>
<BR> <BR>
<IMG src = "mention the path/location of the image" alt=
"DON BOSCO" ALIGN = RIGHT width="150" height="300">
<H2 ALIGN = CENTER style="color:MAGENTA"> Do not try to excuse
your faults; try to correct them. <BR> <BR>
<FONT FACE = CAMBRIA SIZE = 10 COLOR="DARKRED">The power
of evil men lives on the cowardice of the good. <BR> <BR>
<FONT FACE = STENCIL SIZE = 7 COLOR="PURPLE">Rest does not
mean laziness <BR> <BR>

<FONT COLOR="FORESTGREEN"> <B> Disobedience is the root of


all evil </B> <BR> <BR>

<FONT COLOR="NAVY"> <I> Run, jump, shout, but do not sin </I>
<BR> <BR>

<FONT COLOR="CRIMSON"> <U> Do not be afraid of what men


can do if we tell the truth, Only fear what God would do if we lied
</U>
</BODY>
</HTML>
Lab Activity - 006 - USING PARAGRAPH & HORIZONTAL RULE TAGS
<HTML>
<HEAD>
<TITLE> (mention your name)’s FIRST WEB PAGE </TITLE>
</HEAD>

<BODY BGCOLOR=BEIGE TEXT = MEDIUMBLUE >

<H1 ALIGN=CENTER> MY WEB PAGE - (mention your name


IN CAPITAL LETTER) </H1>

<HR SIZE=4 WIDTH=70% ALIGN = CENTER COLOR =


GREEN
<P ALIGN = CENTER>
(Introduce yourself, mention more about yourself, favourite
subject & subject teacher and why you like that subject & the
teacher, your hobbies and aim)
</P>

</BODY>
</HTML>
Lab Activity - 007 USING <MARQUEE> ATTRIBUTES
<HTML>
<HEAD>
<TITLE> (mention your name)’s FIRST WEB PAGE </TITLE>
</HEAD>

<BODY BGCOLOR=BEIGE TEXT = MEDIUMBLUE >

<H1 ALIGN=CENTER> USING MARQUEE TAG </H1>

<HR SIZE=4 WIDTH=70% ALIGN = CENTER COLOR = GREEN>

<MARQUEE behavior=slide direction="up" width="60%"


height="100px">
This is a sample sliding text that slides up (from bottom to top, slides only once).
</MARQUEE> <BR> <BR> <BR>

<MARQUEE behavior=scroll direction="right" width="60%" height="100px">


This is a sample scrolling text that scrolls right (from left to right, emerges from the
start again).
</MARQUEE> <BR> <BR> <BR>

<MARQUEE behavior=Alternate direction="left" bgcolor=yellow width="60%"


height="100px">
This is a sample alternate text that scrolls left (from right to left, bounces back from
end to start).
</MARQUEE> <BR> <BR> <BR>

<MARQUEE direction="up" bgcolor = pink width="60%" height="100px">


This is a sample scrolling text that scrolls up (from bottom to top).
</MARQUEE>

</BODY>
</HTML>
Lab Activity – 008 USING <MARQUEE> SCROLLAMOUNT ATTRIBUTE

Marquee speed can be changed using the "scrollmount" attribute. For example, if we are using
scrollmount = "1" then it sets the marque to scroll very slowly, and as we increase the
"scrollmount," the scrolling speed will also increase.

<HTML>
<HEAD>
<TITLE> USING MARQUEE TAG </TITLE>
</HEAD>
<BODY BGCOLOR=BEIGE TEXT = MEDIUMBLUE >
<H1 ALIGN=CENTER> USING MARQUEE TAG </H1>
<HR SIZE=4 WIDTH=70% ALIGN = CENTER COLOR = GREEN> <BR>
<BR> <BR> <BR> <BR> <BR>

<MARQUEE behavior="scroll" direction="up" scrollamount="1">SLOW SCROLLING


</MARQUEE > <BR> <BR> <BR> <BR> <BR> <BR>

<MARQUEE behavior="scroll" direction="right" scrollamount="12">LITTLE FAST SCROLLING


</MARQUEE > <BR> <BR> <BR> <BR> <BR> <BR>

<MARQUEE behavior="scroll" direction="left" scrollamount="20">FAST SCROLLING


</MARQUEE > <BR> <BR> <BR> <BR> <BR> <BR>

<MARQUEE behavior="scroll" direction="right" scrollamount="50">VERY FAST SCROLLING


</MARQUEE >

</BODY>
</HTML>
Lab Activity - 009 USING LIST TAGS - UNORDERED LIST
<HTML>
<HEAD> <TITLE> USING LIST TAG </TITLE> </HEAD>
<BODY BGCOLOR=BEIGE TEXT = MEDIUMBLUE >
<H1 ALIGN=CENTER> USING LIST TAG </H1>
<HR SIZE=4 WIDTH=70% ALIGN = CENTER COLOR = GREEN> <BR> <BR>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>

</BODY>
</HTML>
Lab Activity - 010 USING LIST TAGS - ORDERED LIST
<HTML>

<HEAD> <TITLE> USING LIST TAG </TITLE> </HEAD>

<BODY BGCOLOR=BEIGE TEXT = MEDIUMBLUE >

<H1 ALIGN=CENTER> USING LIST TAG-ORDERED LIST </H1>

<HR SIZE=4 WIDTH=70% ALIGN = CENTER COLOR = GREEN> <BR> <BR>

<ol type = "1">


<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>

<ol type = "a">


<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>

</BODY>
</HTML>

The start Attribute


We can use start attribute for <ol> tag to specify the starting point of numbering
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>

You might also like