Scribd
Upload
241 views11 pages

HTML Lab Activities for Students

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
241 views11 pages

HTML Lab Activities for Students

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

HTML - LAB ACTIVITIES

Lab Activity - 001 - CREATING HTML DOCUMENT

# Type the following HTML code in a notepad


# Save the file as - your [Link]
# 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 [Link]
# 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>

Common questions

Powered by AI

The attributes within the <BODY> tag, such as BGCOLOR, TEXT, TOPMARGIN, LEFTMARGIN, RIGHTMARGIN, and BOTTOMMARGIN, control the background color, text color, and the spacing around the body content of an HTML document. For example, BGCOLOR sets the background color of the page, while TEXT specifies the text color, enhancing visibility and aesthetics . Margins determine the amount of space between the edges of the content and the browser window, contributing to the page layout and user experience .

The <HR> tag generates a horizontal rule, visually demarcating sections of content on a webpage. By applying attributes such as SIZE and COLOR, developers can control the thickness and hue of the rule, providing clear, stylistic boundaries that enhance readability and flow of content. The emphasis achieved through these visual cues can help direct the viewer's attention and improve the overall aesthetic coherence of the page .

Using the <FONT> tag can be beneficial in a scenario where developers are maintaining an older, static intranet page that requires minimal updates but needs quick text styling adjustments for legacy browser support. For example, altering text size or color in a simple document viewed within a controlled environment could leverage <FONT>'s simpler syntax without necessitating additional CSS setup. However, for modern web development, CSS is preferred for its versatility and support across new browsers .

The <IMG> tag, along with its attributes such as ALIGN, WIDTH, and HEIGHT, provides basic control over how images are displayed. ALIGN can position the image relative to text or other content, while WIDTH and HEIGHT set the dimensions. However, for responsive design, using fixed dimensions may result in poor scaling on different devices. For truly responsive design, using CSS or media queries to control image sizing and alignment is more effective, allowing images to adapt fluidly to various screen sizes and orientations .

Aligning HTML document structures and styles with current web standards is crucial for ensuring compatibility across browsers and devices, enhancing accessibility, and future-proofing content. Standards encourage clean, semantic coding that aids in search engine optimization and reduces technical debt. Non-compliance can lead to inconsistent display and functionality, increasing maintenance burdens and potentially alienating users who experience reduced accessibility or usability .

Ordered lists (<ol>) and unordered lists (<ul>) differ in how they display list items. An ordered list presents items with a sequential order, indicated by numbers or letters (specified by the 'type' attribute), making them ideal for instructions or ranked items. An unordered list displays items with bullet points, suitable for collections of related items where sequence doesn't matter. These different formats help in logically organizing content for user clarity .

The use of deprecated HTML tags like <MARQUEE> in modern web development can lead to several issues, including reduced browser compatibility and inadequacies in responsive design. Deprecated tags are not supported in HTML5, meaning newer browsers may not render them or do so inconsistently, leading to unstable user interfaces. This necessitates the use of CSS or JavaScript alternatives to achieve similar effects, ensuring enhanced maintainability, consistency, and adherence to current standards .

Header tags (<H1> to <H6>) define the hierarchy and structure of content on a web page. They range from <H1>, which indicates the most important heading, to <H6>, indicating the least important. This hierarchy helps in SEO and readability. The alignment attribute within header tags can also center, left-align, or right-align the text, affecting how content is visually prioritized and read by users .

The <MARQUEE> tag can animate text through attributes such as 'scrollamount' and 'direction'. 'Scrollamount' determines the speed of scrolling; lower values result in slower animation, while higher values increase speed. The 'direction' attribute specifies the movement pattern, such as 'up', 'down', 'left', or 'right'. Strategically combining these attributes can create visual interest and draw attention to specific text elements, although <MARQUEE> is deprecated in HTML5 and alternatives like CSS animations are recommended for modern web design .

The 'START' attribute within an ordered list allows developers to begin numbering from a specified value, rather than defaulting from 1. This feature is useful for continuing a sequence from another part of a document or when combining multiple lists into a cohesive set. It also supports contexts where sequential continuity is required for clarity, such as in chapters of an online book or segmented instructions .

HTML - LAB ACTIVITIES Lab Activity - 001 - CREATING HTML DOCUMENT # Type the following HTML code in a notepad # Save
Lab Activity - 002 - USING <BODY> ATTRIBUTES # Type the following HTML code in a notepad # Save the file as - your name.htm
Lab Activity - 003 - USING HEADER TAGS WITH ATTRIBUTES # Check the difference in the headers and their allignment in the
Lab Activity - 004 - INSERTING IMAGE AND USING BREAK TAG <HTML> <HEAD> <TITLE> DON BOSCO </TITLE> </HEAD>
Lab Activity - 005 - USING <FONT> ATTRIBUTES & FONT STYLE <HTML> <HEAD> <TITLE> DON BOSCO </TITLE> </HEAD>
Lab Activity - 006 - USING PARAGRAPH & HORIZONTAL RULE TAGS <HTML> <HEAD> <TITLE> (mention your name)’s FIRST WEB PA
Lab Activity - 007 USING <MARQUEE> ATTRIBUTES <HTML> <HEAD> <TITLE> (mention your name)’s FIRST WEB PAGE </TITLE>
Lab Activity – 008 USING <MARQUEE> SCROLLAMOUNT ATTRIBUTE Marquee speed can be changed using the "scrollmount" attribute.
Lab Activity - 009 USING LIST TAGS - UNORDERED LIST <HTML> <HEAD> <TITLE> USING LIST TAG </TITLE> </HEAD> <BODY BGCO
Lab Activity - 010 USING LIST TAGS - ORDERED LIST <HTML> <HEAD> <TITLE> USING LIST TAG </TITLE> </HEAD> <BODY BGCOLO

You might also like