Scribd Logo
Upload

Welcome to Scribd!

  • Unit 2-Understanding The Fun of HTML

    Uploaded by

    ohmygodpleasework please
    4 views36 pages

    Original Title

    Unit 2-Understanding the Fun of HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, 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 PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views36 pages

    Unit 2-Understanding The Fun of HTML

    Uploaded by

    ohmygodpleasework please

    Copyright:

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

    UNIT 2

    Understanding the functionality of


    HTML
    HyperText Markup Language (HTML) is
    the language common to every website.
    HTML code is used by web designers
    and developers to structure web content
    and give it meaning and purpose. HTML
    tells the browser how to display web
    pages and to build or edit websites and
    web applications.
    Understand how HTML is used
    to structure web pages:
    a. doctypes – Defines HTML5
    b. elements – An HTML element
    is defined by a start tag, some
    content, and an end tag.
    c. tags – opening tag and closing tag
    d. Attributes –
    All HTML elements can have attributes they
    provide additional information about
    elements.

    Attributes are always specified in the start tag.

    Attributes usually come in name/value pairs


    like: name="value"
    <html></html>
    <body></body>
    <title></title>
    <head ></head>
    1. What are nested elements?

    H
    W
    2. What is indentation?
    ACTIVITY
    Identify the opening and closing tag
    Identify the attribute used?
    Identify the element name
    Identify the element
    <h1 style="font-size:60px;">Heading 1</h1>
    Recap…
    1. What does this code means?
    <html lang="en">
    ...
    </html>

    2. Identify the attribute in this code


    3. What does this code means
    <meta charset="UTF-8">

    4.Why should a web page define the character set


    of this page?

    The charset attribute specifies the character encoding


    for the HTML document.
    The HTML5 specification encourages web developers to
    use the UTF-8 character set, which covers almost all of
    the characters and symbols in the world!
    5. Explain the code:
    <head>
    <meta http-equiv="refresh" content="30">
    </head>

    6. identify the importance of <head></head>

    7.what is an empty tag?no closing element<br>


    ACTIVITY -
    PRACTICAL 2 - WEDNESDAY
    worksheet on your \\labserver
    Recap….. 1 .Explain this code

    <u><p style="font-family:verdana";
    align="left"><font color="#000099"><b>Our
    Vision</b></font> </p></u>
    HW –
    1. Other than having the meta and title element, why is a head
    element important?
    Documents/links that goes with in
    <head>
    a. metadata
    b. document title
    c. scripts
    d. styles
    e. links to external files.
    Lists
    1. ordered list
    2.unordered list
    3.definition list
    Try nesting lists
    • ordered list within ordered list
    • unordered list within unordered list
    • unordered list within ordered list
    • ordered list within unordered list
    Make you own list

    1 . My favorite storybooks
    2.Steps to make a cup of tea
    3.Food menu, describing the main
    ingredient
    RECAP…
    1 .WRITE THE HTML CODE FOR THE
    OUTPUT GIVEN
    2. PREDICT THE OUTPUT OF THE
    CODE SHOWN
    LINKS IN HTML <a>
    1.an external link that opens in the same browser
    window
    2.an external link that opens in a new browser
    window
    3.linking to a specific part of the same page
    4.linking to a specific part of another page
    5.email links.
    Syntax for a basic link:
    <a href="url">link text</a>

    1.Important : relative and absolute referencing


    2.Don’t forget the double quote

    Syntax to open in new browser link:


    <a href="url“ target=“_blank”>link text</a>
    Syntax to open an email:
    <a href="mailto:Shafna.ibnseena@gmail.com"
    >Send email</a>

    Syntax specific part of the same page:


    <a href="# give an unique id ">text for the link</a>
    <h2 id=“give an unique id">text for h2</h2>

    All HTML elements have the


    Bookmark means?
    attribute id !
    Syntax to specific part of another page:
    <a
    href="LinkToAnotherPageAnswer.html#C4">Jum
    p to Chapter 4</a>
    <h2 id=“C4">text for h2</h2>
    RECAP
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    1. Under which element should this code be written?


    2. What does this code means?
    .

    ANSWERS
    1. Setting The Viewport
    • The viewport is the user's visible area of a web
    page. It varies with the device - it will be smaller on a
    mobile phone than on a computer screen.
    • This gives the browser instructions on how to control
    the page's dimensions and scaling.
    • The width=device-width part sets the width of the
    page to follow the screen-width of the device (which
    will vary depending on the device).
    • The initial-scale=1.0 part sets the initial zoom level
    when the page is first loaded by the browser
    RECAP
    3. What will the developer expect from these code?

    <meta name="description" content=“the description of the slide that will appear in


    the search engine results">

    4. <meta name="keywords" content="HTML, CSS, JavaScript">


    Answer

    3. The text given in the content will be show in


    the search engine with the link to the site
    4.Defienes keyword to be searched in the search
    engine. According to question 4 ,if you type
    “html,css,javascript” that given website will be
    appear on the search results
    TABLES IN HTML <table>

    <table>
    <tr><th></th> <th></th> <th></th></tr>
    <tr><td></td> <td></td> <td></td></tr>
    <tr><td></td> <td></td> <td></td></tr>
    <tr><td></td> <td></td> <td></td></tr>
    </table>
    <table border="2" width="50%">
    HTML Table - Colspan <tr>
    <th colspan="2" >Name</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
    </tr>
    </table>
    <table border="2" width="50%">
    HTML Table - <tr>
    Rowspan <td rowspan=2><b>Name</b></td>
    <td>Will</td>
    </tr>
    <tr>

    WHAT IS THE <td >Smith</td>

    OUTPUT OF </tr>
    THIS CODE? <tr>

    <td><b>Age</b></td>
    <td>57</td>
    </tr>
    </table>
    TRY TO DO BOTH COLSPAN AND
    ROW SPAN TOGETHER!
    GO
    THROUGH
    W3SCHOOLS.
    COM

    https://www.w3schools.com/html/html_table_padding_spacing.asp
    Table grouping
    <thead></thead> used to group header content
    <tbody></tbody> used to specify body content
    <tfoot></tfoot> used to group footer content

    HW - Research and write how the table grouping work in webpage.


    Draw a diagram or stick a printout to explain.(If required)

    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody
    HOMEWORK:

    1.What does “t” in <thead> standfor?


    2. Why should you use <thead><tfoot><tbody>
    3.Under which element will <style> be placed in an
    HTML file?
    What are the
    IMAGES – IN WEBPAGES different image file
    format you know?
    vector graphics vs Compare them
    Raster graphics
    Syntax to insert a image
    <img src="pic_name.jpg" alt="Italian Trulli">

    3
    point !
    S et
    w id t h e
    th t
    heig he
    ht

    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

    <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

    You might also like