Scribd Logo
Upload

Welcome to Scribd!

  • HTML - Lab Activities

    Uploaded by

    6450Mohamed Faraz
    60 views11 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    60 views11 pages

    HTML - Lab Activities

    Uploaded by

    6450Mohamed Faraz

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 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