Scribd Logo
Upload

Welcome to Scribd!

  • Learning Module in WEB-LESSON 6

    Uploaded by

    Ronalyn
    21 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, 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 DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views5 pages

    Learning Module in WEB-LESSON 6

    Uploaded by

    Ronalyn

    Copyright:

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

    St.

    Bridget College
    Batangas City
    INTEGRATED BASIC EDUCATION DEPARTMENT
    PAASCU Accredited
    Contact Nos. (043) 980-5669 or (043) 722-2950

    Subject: Computer
    Grade Level: 9
    Unit 2: Hypertext Markup Language (HTML5)
    Lesson 6: Creating HTML Documents

    Content Standard
    The learner demonstrates understanding of the tags, styles and color values used in HTML5.

    Performance Standard
    The learners construct a simple webpage using HTML5 tags and attributes.

    Formation Standard
    The learner becomes understanding and build enthusiasm in learning new knowledge.

    Essential Question:
    1. What are the standard tags in HTML5?
    2. What are the styles and color values used in HTML5.

    Enduring Understanding:
    1. Standard tags in HTML5 are divided into 8 different categories namely embedded content tags, form
    tags, formatting tags, list tags, metadata tags, scripting tags, structural tags, and table tags.
    2. There are various styles in HTML including inline styles, embedded styles, and
    external style sheet. Developers typically use a HEX value to change the color of elements on a
    webpage.

    Learning Targets
    Acquisition:
    Discover the different styles in HTML5.

    Meaning Making
    Experiment with different colors that are supported by web browser.

    Transfer
    Construct a simple webpage using HTML5 tags and attributes.

    1. Introduction
    In this module it contains a brief overview of the standard tags in HTML5 and they are grouped
    into different categories namely embedded content tags, form tags, formatting tags, list tags, metadata
    tags, scripting tags, structural tags, and table tags.
    Style in HTML describe how documents are presented on the web browsers. There are various styles
    in HTML including inline styles, embedded styles, and external style sheet.
    At the end of this module, you are expected to:
    1. identify the standard tags in HTML5
    2. differentiate the styles used in HTML5
    3. identify the color values.
    4. create an HTML document that can be viewed with a web browser.

    2. Anticipatory Set
    REVIEW
    To review the previous lesson, answer the following questions:
    1. What are the features of HTML5?
    2. What are the basic parts of HTML elements?
    3. Where will you placed the head tag?
    4. How can you show the content in the title bar of the web browser?
    5. What can you put in the body section?

    HTML Tags and Attributes

    What can you say about the HTML tags and attributes used in the HTML document?
    __________________________________________________________________________________
    __________________________________________________________________________________

    3. Learning Activities
    A. iTRY
    Answer the “iTRY" activity on page 51 of your textbook.

    Cross out the tag inside the parentheses that does not belong to the group.

    1. Formatting tags: (address, bdo, legend)


    2. Embedded content tags: (button, canvas, figure)
    3. Metadata tags (meta, title, small)
    4. Form tags: (keygen, label, area)
    5. Structural tags: (body, aside, style)
    6. List tags: (menu, sub, dl)
    7. Scripting tags (script, noscript, div)
    8. Table tags (tbody, caption, article)

    B. READ AND LEARN


    Read Lesson 6 Creating HTML Documents in your textbook pp. 52-60.

    C. PRESENTATION OF LESSON
    To discuss the lesson, there will be synchronous learning using Zoom.

    Guide Questions:
    1. What are the different tags in HTML?
    2. How to create inline styles?
    3. How to create embedded styles?
    4. How to create external style sheet?
    5. What are the colors supported by web browser?
    6. How to create a simple HTML document?

    C. iLAB ACTIVITY

    iLAB 6
    My HTML Background
    For this activity, you will use your Notepad or any text editor to create a simple webpage using
    HTML5 tags and attributes. Follow the step-by-step instructions to produce the expected output. Submit
    and upload your work in your CLE “My HTML Background” section.
    1. For your title page must be “My HTML Background”.
    2. Instead of writing <body> tag, use <body style=”background-image:url(“image.jpg”)>
    3. Use any kind of image that will suit your output. Just make sure that the image name and
    type is the same with your HTML document’s background-image url.
    4. Don’t forget to put your HTML file and the image in the same folder. If the image is not in the
    same folder, the program will not work.
    5. For the heading, you can use this code to change the background color.
    <p style=”background-color:green”> Background color is green</p>
    6. Body element must contain the following headings:
     For <h1> the background color is red
     For <h2> the background color is blue
     For <h3> the background color is yellow

    4. Formative Assessment
    Target Goal: 90% of the students will get at least 85% on the Formative Assessment.

    To check your understanding of the topic, using the CLE Quiz answer the iWORKSHEET 6.

    iWORKSHEET 6
    Matching Type: Match the tags to their functions.

    1. <label> a. It defines an embedded object.


    2. <img> b. It defines an HTML form for user input.
    3. <kbd> c. It defines a label for an <input> control.
    4. <object> d. It displays an inline image.
    5. <form> e. It specifies text as keyboard input.
    6. <tt> f. It defines an item in a definition list.
    7. <menu> g. It represents a list of commands.
    8. <bdo> h. It provides structure metadata.
    9. <meta> i. It overrides the current text direction.
    10. <dt> j. It displays text in a teletype style.
    Word Bank

    1-2) In 1996, _____________ introduced the _____________ which provides developers a better way
    to style HTML elements.

    CSS W3C Microsoft HTML

    3-4) _____________ in HTML describe how documents are _____________ on the web browsers.

    Techniques Styles Presented Designed

    5-6) The _____________ uses the style attribute in the HTML _____________ tag.

    Embedded Inline Start End

    7-8) The _____________ style uses the <style> tag in the _____________ section of an HTML
    document.

    <body> Embedded <head> External

    9-10) The _____________ uses the _____________ element and it is ideal for applying style to
    multiple pages.

    <External style sheet> style <link> Inline style

    5. Reflect
    Self-Reflection
    What did I learn from the topic creating HTML documents?
    _________________________________________________________________________________
    _________________________________________________________________________________
    How can you relate colors in your everyday life? Cite specific way/s. (Value Integration)
    _________________________________________________________________________________
    _________________________________________________________________________________

    6. Summative Assessment
    There will be a Summative Assessment after Lesson 7.

    7. Closure
    3-2-1
    3 – things I’ve found out
    ____________________________________________________________________________
    ____________________________________________________________________________

    2 – interesting things I’ve learned


    ____________________________________________________________________________
    ____________________________________________________________________________

    1 – question I want to be answered


    ____________________________________________________________________________
    ____________________________________________________________________________
    References

    “Programming Using Web Technology” iBook IT Series Textbook 2019 Ed. iBook Publishing, Inc. by Arlene A.
    Velasquez et. al

    Programming Interactive Courseware

    You might also like