Scribd Logo
Upload

Welcome to Scribd!

  • Quarter 4 - Module 4:: Introduction To Web Design

    Uploaded by

    DIVINA ROJAS
    31 views11 pages

    Original Title

    MOD-Q4M4

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

    Quarter 4 - Module 4:: Introduction To Web Design

    Uploaded by

    DIVINA ROJAS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    Quarter 4 – Module 4:

    Introduction to Web Design

    1
    Quarter 4 – Module 4:
    Introduction to Web Design

    2
    LESSON 4

    HTML

    WHAT I KNOW

    Choose the letter of the correct answer.

    1. Which of the following is the element that contains the visible page content?
    a. Paragraph c. Head
    b. Body d. Html
    2. Which of the following is the root element of an HTML page?
    a. Paragraph c. Head
    b. Body d. Html
    3. Which of the following is the element that defines a paragraph?
    a. Head c. Paragraph
    b. Html d. Body
    4. Which of the following is the element that defines a large heading?
    a. Paragraph c. Head
    b. Title d. H1
    5. Which of the following is the element that specifies a title for the document?
    a. Head c. Paragraph
    b. Title d. H1

    3
    WHAT’S NEW

    VOCABULARY

    Give a short description/definition of the following words, based on your own


    knowledge and understanding.

    1. Element - __________________________________________
    2. Attribute - __________________________________________
    3. Tag - ______________________________________________
    4. Structure - __________________________________________
    5. Heading - __________________________________________

    4
    WHAT IS IT

    HTML PAGE STRUCTURE

    This is what a basic HTML structure looks like:

    It contains several parts. Let us discuss each part below.

    1. The <!DOCTYPE html> declaration defines this document to be HTML


    2. The <html> element is the root element of an HTML page
    3. The <head> element contains meta information about the document
    4. The <title> element specifies a title for the document
    5. The <body> element contains the visible page content
    6. The <h1> element defines a large heading
    7. The <p> element defines a paragraph

    The words inside the angle brackets (<>) are what we call tags. There are 2
    types of tags - opening and closing.

    The opening tag (<…>) contains the element, attribute and the attribute
    value; while the closing tag marks the end of the tag and it is identified through the
    slash after the opening bracket (</…>).

    5
    ELEMENTS, TAGS AND ATTRIBUTES

     ELEMENTS
    - are designators that define the structure and content of objects within a page
    - are identified by the use of less-than and greater-than angle brackets, < >,
    surrounding the element name
    <a>

     TAGS
    - the use of less-than and greater-than angle brackets
    - surrounding an element creates what is known as a tag
    - tags normally come in pairs
    - the first tag in a pair is the start/opening tag, the second tag is the end/closing
    tag
    <a>…</a>

     ATTRIBUTES
    - are properties used to provide additional information about an element
    - are defined within the opening tag, after an element’s name
    - generally includes a name and a value

    <a href=“http://www.facebook.com”>Facebook</a>

    6
    This is a simple example of HTML codes with their actual output as seen on Google
    Chrome.

    HTML CODES: (Using Notepad++)

    WEBPAGE OUTPUT: (Using Google Chrome)

    7
    STEPS ON HOW TO SAVE YOUR HTML FILE USING A TEXT EDITOR

    HTML codes need to be saved with the “.html” file extension. If a file has this extension,
    that means it can be opened or viewed using any web browser.

    1. Open any text editor.


    2. Write your codes.
    3. Save your file using your desired filename and add “.html” as a file extension.
    4. Go to the save location and locate your html file. You will notice that the icon is
    the same as your default web browser. This means you can open/view it using
    your default web browser.
    5. Open it and see what your codes look like.
    6. If you want to edit your codes, just go ahead and edit it on your text editor and
    click save.
    7. Go back to the opened web browser and refresh your page so you can see the
    changes that you made on your webpage.

    8
    WHAT’S MORE

    ACTIVITY 1 Create your very first HTML codes below. Make sure to use the proper
    structure and don’t forget to replace the title and body with your own content.

    SAMPLE:

    YOUR CODES HERE:

    9
    ACTIVITY 2 Rearrange the steps on how to save your HTML codes using a Text
    Editor. Write the numbers 1-7.

    _____ Save your file using your desired filename and add “.html” as a file
    extension.
    _____ Write your codes.
    _____ Open it and see what your codes look like.
    _____ Go to the save location and locate your html file. You will notice that the icon
    is the same as your default web browser. This means you can open/view it using
    your default web browser.
    _____ Go back to the opened web browser and refresh your page so you can see
    the changes that you made on your webpage.
    _____ If you want to edit your codes, just go ahead and edit it on your text editor
    and click save.
    _____ Open any text editor.

    PERFORMANCE ACTIVITY

    Create a webpage using your mobile phone, tablet or laptop. You can choose
    any software you want. As long as you follow the following conditions:

    TITLE: YOUR SECTION – FAMILY NAME


    BODY: Write “The quick brown fox jumps over the lazy dog 10 times.”

    FILENAME: Q4M4_FAMILYNAME.html

    WHAT I HAVE LEARNED

    Write down in at least 2 sentences your views on HTML coding using Text
    Editor.

    ___________________________________________________________________
    ___________________________________________________________________
    ___________________________________________________________________

    10
    ASSESSMENT

    Choose the letter of the correct answer.

    1. Which of the following is the element that contains the visible page content?
    a. Paragraph c. Head
    b. Body d. Html
    2. Which of the following is the root element of an HTML page?
    a. Paragraph c. Head
    b. Body d. Html
    3. Which of the following is the element that defines a paragraph?
    a. Head c. Paragraph
    b. Html d. Body
    4. Which of the following is the element that defines a large heading?
    a. Paragraph c. Head
    b. Title d. H1
    5. Which of the following is the element that specifies a title for the document?
    a. Head c. Paragraph
    b. Title d. H1

    11

    You might also like