Scribd Logo
Upload

Welcome to Scribd!

  • Lesson 5

    Uploaded by

    Angel
    2 views19 pages
    IT

    Original Title

    Lesson-5

    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
    IT

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views19 pages

    Lesson 5

    Uploaded by

    Angel
    IT

    Copyright:

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

    IT223 – Web System and

    Technologies

    Lesson #5
    (Web Development)
    Lesson Flow
    - Other HTML Tags
    - CSS
    <meta> Tag
    Defines metadata about the HTML file, it should
    always be placed inside the <head> tag.
    The <meta> tag does not display anything in the
    webpage but is essential in giving instruction on
    how the webpage is displayed or searched in
    search engines.
    Example:
    <html>
    <head>
    <meta charset =“UTF-8”>
    <meta name = “description” content=“Simple Landing Page”>
    <meta name = “keyword” content=“Simple landing page, landing page, simple”>
    <meta name = “author” content=“BSIT Student”>
    <meta name = “viewport” content=“width-device-width, initial-scale=1.0”>
    </head>
    </html>
    <link> Tag
    Defines a “link” between the HTML file to an
    external source file, such as favicons and
    stylesheets(css).
    It is normally use in the <head> tag to associate
    an icon or a css file to the html document.
    Example:
    <html>
    <head>
    <link rel=“icon” href=“favicon.ico”/>
    <link rel=“stylesheet” href=“style.css”/>
    </head>
    </html>
    <script> Tag
    It is used to include a client-side script which is
    JavaScript
    It can be used by either including a JavaScript
    code inside the tag or using an external file using
    the src attribute.
    Example:
    <script>
    alert(‘Hello World!’)
    </script>

    Or

    <script src=‘somescript.js’></script>
    <iframe> tag
    It is used to embed an HTML Document within an HTML Document
    It is often used to include buttons or content from other websites.

    Example:

    <html>
    <body>
    <iframe src=https://websitenakoni.com title=“Dili Ko mag saba”/>
    </body>
    </html>
    <progress> Tag
    It is used to display a progress bar. It is commonly
    used to display task progress.

    <label> tags can also be used for the


    <progress> tags for accessibility.
    Example:

    <html>
    <body>
    <progress value=“75” max=“100”/>
    </body>
    </html>
    CSS
    CSS (Cascading Style Sheet) is the standard
    language used to style an HTML Document.

    CSS determines how to display the HTML


    Document in a more appealing way. Adding
    colors, formatting etc.
    CSS Files
    Thes files could be linked to an HTML file and edited on text
    editors.

    CSS Files are saved with the extension .css

    Example Syntax:
    P{
    color:red;
    font-size:24px;
    }
    <style> Tag
    Used to integrate a Stylesheet (css) to our HTML
    Document without creating an external CSS file.

    The <style> Tag contains CSS code that styles the


    current HTML Document it is attached to.
    They have 3 ways on how to linking CSS file
    - Internal CSS
    - External CSS
    - Inline CSS
    Internal CSS
    CSS that uses the <style> tag inside the HTML
    Document.

    This type if linking does not need any .css files.


    The <style> tag handles the styling of the current
    HTML file.
    External CSS
    Requires a separate CSS file and makes use of the
    <link> tag for us to be able to link the CSS file to our
    HTML Document.

    This type of linking is advantageous since we can


    reuse our CSS file over and over without retyping
    anything.
    Inline CSS
    This is the fastest way to integrate styles to our HTML
    Document.

    This can also make your code very hard to read so


    don’t use it unless you really need to.

    It uses the style attribute in all the elements.


    Alubijid | Balubal | Cagayan de Oro | Claveria | Jasaan | Oroquieta | Panaon | Villanueva

    Home of the Trailblazers

    You might also like