Scribd Logo
Carica

Benvenuto in Scribd!

  • LAB ACTIVITY 2B: Hypertext Markup Language (HTML) : Duration: 2 Hours Learning Outcomes

    Caricato da

    Sudersen Lekshmikanth
    268 visualizzazioni7 pagine
    This document provides instructions for two lab activities to learn HTML. The first activity teaches how to create simple web pages with hyperlinks and set table properties. The second activity teaches how to create frames and forms. Learners will create several HTML files to display in frames, including a menu page with links to forms, and forms for course registration and comments. The activities aim to teach creating frames and forms in HTML.

    Descrizione originale:

    this is a web design

    Titolo originale

    Lab Activity 2

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    This document provides instructions for two lab activities to learn HTML. The first activity teaches how to create simple web pages with hyperlinks and set table properties. The second activity teaches how to create frames and forms. Learners will create several HTML files to display in frames, including a menu page with links to forms, and forms for course registration and comments. The activities aim to teach creating frames and forms in HTML.

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    268 visualizzazioni7 pagine

    LAB ACTIVITY 2B: Hypertext Markup Language (HTML) : Duration: 2 Hours Learning Outcomes

    Caricato da

    Sudersen Lekshmikanth
    This document provides instructions for two lab activities to learn HTML. The first activity teaches how to create simple web pages with hyperlinks and set table properties. The second activity teaches how to create frames and forms. Learners will create several HTML files to display in frames, including a menu page with links to forms, and forms for course registration and comments. The activities aim to teach creating frames and forms in HTML.

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 7

    LAB ACTIVITY 2B: Hypertext Markup Language

    (HTML)
    Duration: 2 Hours

    Learning Outcomes

    By the end of this tutorial session, you should be able to:


    1. Create simple HTML file
    2. Create hyperlink to navigate web page
    3. Setting table properties

    Hardware/ Software: Code Editor(e.g: Notepad++, Dreamweaver), server bundle(e.g: XAMPP)

    Activity 2b(i)

    Activity Outcome: Create a simple HTML web page

    Procedure: Follow the instructions below carefully.

    1. Type the following HTML code in Notepad ++. Save as firstPage.html. You can save
    your file on the desktop or my documents.

    <html>
    <html>
    <head>
    <title>My page title</title>
    </head>
    <body>

    <h1>My headline</h1>

    <p>My paragraph.</p>
    <a href="page2.html">page2</a>

    </body>
    </html>
    2. Type the following HTML code in new Notepad ++ file. Save as page2.html.
    <!DOCTYPE html>
    <html>
    <body bgcolor="gray">
    <h2> Welcome to Page 2 </h2>
    </body>
    </html>

    3. Observe the output using web browser. Execute firstPage.html first.

    Activity 2b(ii)

    Activity Outcome: Set table properties

    Procedure: Follow the instructions below carefully.

    1. Type the following code in Notepad and save as courseList.html.

    <!DOCTYPE HTML >


    <html>
    <body>
    <table border="2" cellpadding="10"
    cellspacing="5"> <tr bgcolor="blue">
    <th> Subject Code </th>
    <th> Subject Name </th>
    </tr>

    <tr bgcolor="yellow" >


    <td> FP501</td>
    <td> Open Source Operating System </td>
    </tr>

    <tr bgcolor= "yellow">


    <td> FP511</td>
    <td> Human Computer Interaction </td>
    </tr>

    <tr bgcolor= "yellow">


    <td> FP512</td>
    <td> Web Programming 1 </td>
    </tr>
    </table>

    </body>
    </html>

    2. Execute the codes using web browser


    Activity 2b(iii)

    Activity Outcome: Set table properties

    Procedure: Follow the instructions below carefully.

    1. Type the following code in Notepad and save as programList.html.

    <!DOCTYPE HTML >


    <html>
    <body>
    <table border="0">
    <tr bgcolor="#339900">
    <th> Department </th>
    <th> Program Code </th>
    <th> Program Name </th>
    </tr>

    <tr bgcolor="#FF00FF" >


    <td rowspan="3">JTMK</td>
    <td> DIP</td>
    <td> Dip in Information Technology (Programming)</td>
    </tr>

    <tr bgcolor= "#FF00FF">


    <td> DNS</td>
    <td> Dip in Information Technology (Networking) </td>
    </tr>

    <tr bgcolor= "#FF00FF">


    <td> DIH</td>
    <td> Dip in Information Technology (Digital Entertainment) </td>
    </tr>

    <tr bgcolor="#FF99FF">
    <td rowspan="2">JKE</td>
    <td> DTK</td>
    <td> Dip in Electrical Engineering (Computer)</td>
    </tr>

    <tr bgcolor= "#FF99FF">


    <td> DEP</td>
    <td> Dip in Electrical Engineering (Communication) </td>
    </tr>

    </table>

    </body>
    </html>

    2. Execute the codes using web browser


    LAB ACTIVITY 3b: Hypertext Markup Language
    (HTML)
    Duration: 2 Hours

    Learning Outcomes

    By the end of this tutorial session, you should be able to:


    1. Create frame and frameset
    2. Create forms in a web page by using forms tools.

    Hardware/ Software: Code Editor(e.g: Notepad++, Dreamweaver), server bundle(e.g: XAMPP)

    Activity 3b(i)

    Activity Outcome: Create a frame and form

    Procedure: Follow the instructions below carefully.

    1. Type the following code in Notepad. This page is the main page and consists of frames.

    <!DOCTYPE HTML >


    <html>
    <head>
    <title>My First Web Page</title>
    </head>

    <frameset rows="100,*,75" frameborder="0" border="1" >


    <frame name="header" src="header.html">

    <frameset cols="200,*" frameborder="0" border="0">


    <frame name="menu" src="menuList.html" scrolling="auto" noresize>
    <frame name="content" src="firstPage.html" scrolling="auto" noresize>

    </frameset>
    <frame name="footer" src="footer.html">
    </frameset>
    <noframes></noframes>
    </html>

    2. Save the file as mainPage.html.


    3. Type the following code in Notepad and save as menuList.html.
    <!DOCTYPE HTML >
    <html>
    <body bgcolor="yellow">

    <a href="registerForm.html"; target="content">Course Registration


    Form</a>
    <a href="comment.html"; target="content">Comments Form</a><br>

    </body>
    </html>

    4. Type the following code in Notepad and save as comment.html.

    <!DOCTYPE HTML >


    <html>
    <body>
    <H3> Comments Form </H3>

    <form name="comment" method="POST" action="Page.php">

    Name : <input type="text" name="txtName" id="txtName"><br>


    Comments : <textarea name="txaComments" id=" txaComments ">
    </textarea><br>

    <input name="Submit" type="submit" value="Send">


    <input name="Reset" type="reset" value="Reset">

    </form></body>

    </html>
    5. Type the following code in Notepad and save as registerForm.html.

    <!DOCTYPE HTML>

    <html>
    <body>
    <H3> Course Registration Form </H3>

    <form method="post" action="processdata.php">


    <table border = "2">

    <tr>
    <td> Name: </td>
    <td> <input type="text" name="name" size="40"/> </td>

    </tr>

    <tr>
    <td> Registration Number: </td>
    <td> <input type="text" name="regno" size="40"/> </td>

    </tr>

    <tr>
    <td> Program: </td>
    <td> <input type="radio" name="program" value="DIP" checked>Male
    <br>
    <input type="radio" name="program" value="DNS">Female </td>

    </tr>

    <tr>
    <td> Course Code: </td>
    <td> <input type="checkbox" name="option1" value="Milk">
    FP501<br>
    <input type="checkbox" name="option2" value="Butter">
    FP511<br>
    <input type="checkbox" name="option3" value="Cheese">
    FP512<br>
    </td>

    </tr>

    <tr>
    <td><input type="submit" value="submit data" /><td>
    </tr>

    </form>
    </body>
    </html>
    6. Now create a new page and save it as content.html.
    <!DOCTYPE HTML >
    <html>
    <body style="background-color:#CCC000;color:white;font-family:verdana;
    font-size:14px;">

    <h1>My headline</h1>

    <p>My paragraph.</p>

    </body>
    </html>

    7. Create a new page and save it as header.html. Type the following code.

    <!DOCTYPE HTML >


    <html>
    <body style="background-color:#CC0000;color:white;font-family:verdana;
    font-size:14px;">
    <h3>Welcome to my first web page</h3>
    </body>
    </html>

    8. Create a new page and save it as footer.html. Type the following code. In line 5, change
    copyright yourname to your full name.

    <!DOCTYPE HTML >


    <html>
    <body style="background-color:#000000;color:white;font-family:verdana;
    font-size:12px;">
    <h3><i>Copyright: yourname 2015</i></h3>
    </body>
    </html>

    9. Now you can execute your mainPage.html using your preferred browser and observe the
    output.

    Potrebbero piacerti anche