Scribd Logo
Importer

Bienvenue sur Scribd !

  • 01 Laboratory Exercise 1

    Transféré par

    Meterpreter Tcpdump
    219 vues5 pages
    tangnamoscribd.

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    tangnamoscribd.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    219 vues5 pages

    01 Laboratory Exercise 1

    Transféré par

    Meterpreter Tcpdump
    tangnamoscribd.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    K0032

    Laboratory Exercise

    Basic HTML and CSS


    Objectives:
    At the end of the exercise, the students should be able to:

    demonstrate the basic structure of HTML document


    create and open a simple HTML document using Notepad as the Text Editor
    display an HTML document in a web browser
    create a simple HTML page and style it with CSS.

    Materials:

    Computer with the following installed software:


    o Notepad
    o Internet Explorer 7 or higher, Google Chrome, Mozilla Firefox
    Flash drive

    Procedures:
    Activity 1: Creating an HTML file in Notepad
    1. Click
    button then type Notepad. The Notepad window opens.
    2. Type in the following HTML code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    </body>
    </html>
    3. On the File menu, click on Save. The Save As dialog box appears.
    4. Locate the directory where to save the file.
    5. In the File name text field, type in index.html, then click the Save button.
    TIP: To avoid saving a text document in Notepad, make sure to save your file as .html or .htm to
    be able to view it in a Web browser.

    Activity 2 Opening an HTML file in Notepad


    1. Open the Notepad application.
    2. From the File menu, click on Open.
    3. On the Open dialog box, locate the directory where the index.html is saved. Make sure that All
    files is selected in the Files of type drop-down menu to display the HTML files.
    4. Double-click the file or select it and click the Open button.
    5. Close the Notepad application.

    01 Laboratory Exercise 1

    *Property of STI
    Page 1 of 5

    K0032

    Activity 3: Opening an HTML file from the Windows Explorer


    1. Open the Windows Explorer and locate the directory where index.html is residing.
    2. Right-click the file and from the context menu, point to Open With > Notepad.

    Activity 4: Displaying Output


    1.
    2.
    3.
    4.
    5.
    6.

    Open index.html file.


    After the <body> tag, type the code below:
    <h1> About <your name> </h1>
    On the next line, key in the following code:
    <h2> My Class this Semester </h2>
    Save your file. Then, perform Activity 3: Opening an HTML file from the Windows Explorer.

    Activity 5: Creating and Applying CSS File to HTML


    1. Open Notepad application and type the codes below:

    body {
    background-color: green;
    }
    h1 {
    color: yellow;
    text-align: center;
    }
    This code simply change the background color to green and make the color of the <h1> to yellow
    and center aligned.
    2. Save it as css_style.css.
    3. Open index.html file.
    4. Type the codes below before the </head> tag

    <link rel="stylesheet" type="text/css" <link rel="stylesheet"


    href="css-style.css">
    This code links to CSS file css-style.css

    01 Laboratory Exercise 1

    *Property of STI
    Page 2 of 5

    K0032

    5. Save and preview your index.html page.

    Challenge Exercise
    Activity 1: About Me Page
    1. Create a page named as aboutme.html that describes you. The page should include the
    information below. See sample output in Figure 1.
    a. Full name
    b. Description of yourself in less than two sentence. Emphasize important word on bold.
    c.

    Enrolled classes enrolled this semester

    d. Titles of three (3) favorite movies


    e. Images that represents the mood when you hungry and full
    f.

    What made you interesting taking this course?

    Tips: <ul> represents a bulleted list of items


    <li> represents a single item within the list
    <ol> represents a numbered list of items

    Figure 1

    01 Laboratory Exercise 1

    *Property of STI
    Page 3 of 5

    K0032

    Activity 2: CSS Styles


    1. Create a stylesheet named style.css to improve the appearance of your About Me page. Your
    style.css should at least do the following. Observe the example given in Figure 2.
    a. Change the font properties (family, size, weight, or style) of at least two elements
    b. Change at least one attribute of an element (background color, text alignment, etc.)

    Figure 2
    Activity 3: Favorite Movie

    Open the aboutme.html page and produce some of the films information in a nested list under
    bullets of the listed movies. See sample in Figure 3.
    a. Represent the information of each movie in definition list form. Refer to Figure 3 for
    reference.
    b. Consider applying styles to your definition list to make it look smart.

    Tips: <dl> represents a list of definitions of terms


    <dt> represents each term, and <dd> its definition

    01 Laboratory Exercise 1

    *Property of STI
    Page 4 of 5

    K0032

    Figure 3

    01 Laboratory Exercise 1

    *Property of STI
    Page 5 of 5

    Vous aimerez peut-être aussi