Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Lecture Notes-HTML Part 2

    Uploaded by

    seif
    HTML

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lecture Notes-HTML Part 2

    Uploaded by

    seif
    2 views11 pages
    HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    HTML

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    2 views11 pages

    Lecture Notes-HTML Part 2

    Uploaded by

    seif
    HTML

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 11

    Web Development for Business Applications

    Lecture Notes: Fundamentals of HTML (2)

    Learning Objectives:
    • Understand Tags, Elements and Attributes
    • Understand the basic Structure of HTML
    • Text Elements
    • Lists
    • Article Tag
    • Tables
    • Embedded Content: image, Audio, video, links etc.
    • Forms
    • Meta Tag
    • Layout
    • Additional Tags

    1. Tables:
    Tables is used to arrange data in a row and column format, it is similar to show data in a
    database format or excel sheet
    <table> </table>: used to define the table
    <th> </th>: define headings
    <tr> </tr>: used to mention row
    <td> </td>: represent column data in a table

    1|Page
    Another Example with Table and borders:

    <body>
    <table border=”1”>
    <tr> <th> Heading 1 </th> <th> Heading 2 </th>
    </tr>
    <tr> <td> Col1</td> <td> <table border=”1”>
    <tr> <th> Heading 1 </th> <th> Heading 2 </th>
    </tr> <tr> <td> Col1</td> <td> Col2</td> </tr>
    </table> </td>
    </table>
    </body>

    Table with Header and Footer: Header and footer as they are used to specify some text before
    row and after row like headings and subtotal
    Example 1 With header and footer

    <html>
    <head>
    </head>
    <body>
    <caption> Employee Salary </caption>
    <table border="1">
    <thead> <tr> <th> Month </th> <th> Salary </th></tr>
    <tbody> <tr> <td> Jan </td> <td> $500 </td>
    </tr> <tr> <td> May </td> <td> $500 </td></tr></tbody>
    <tfoot> <tr> <td> 2018</td> <td> $1000</td> </tr>
    </tfoot>
    </table> </body></html>

    2|Page
    Example 2 with header and footer

    <body>
    <table border="1">
    <caption>Table Caption</caption>
    <thead><tr> <td> Heading 1 </td>
    <td> Heading 2 </td>
    <td> Heading 3 </td>
    </tr> </thead>
    <tbody>
    <tr> <td> Col1</td>
    </tr><tfoot><tr><td> Footer 1 </td>
    <td> Footer 2 </td><td> Footer 3 </td>
    </tr></table></body>

    Table with Row span and column Span


    Rowspan and colspan: is to add spacing to the cell if you want to merge two cells together then
    this attribute will help use it in <td> <th> or <tr>
    Example:

    <body> <table border="2">


    <tr> <th colspan="2"> Language and
    Frameworks </th></tr>
    <tr> <td> Python </td> <td>
    Django</td></tr>
    <tr> <td rowspan="2"> JavaScript </td>
    <td> React.js</td></tr>
    <tr> <td> Vue.js</td></tr>
    <tr> <td>Ruby </td> <td> Ruby on Rails
    </td></tr></table> </body>

    3|Page
    2. Articles
    Articles is used to define one group of content which has headings, links and paragraph to make
    up one independent content on the page
    A blog page can have list of all the articles displayed in a small summary
    <section > : section tag used to group articles into one section
    <article>
    <header>
    <footer>
    All these tags can be used inside the article tag
    Example:
    <body>
    <section style="background-color: gray; padding:1px;">
    <h1 style="color: white;"> Articles Today </h1>
    <article style="background-color: lightblue; margin:3px;">
    <header> <h2> Cybersecurity in Digital age </h2></header>
    <p> Cybersecurity is the shield that guards our digital lives. In a world powered by technology, it's the
    frontline defense against cyber threats. <br>It encompasses measures like strong passwords, firewalls, and
    regular updates to safeguard our data and privacy.<br>
    <br>From phishing scams to ransomware attacks, the digital landscape is rife with dangers. Cybersecurity is
    our armor against these threats<br>ensuring the integrity and confidentiality of our information. It's a
    constant race to stay one step ahead of cybercriminals, making it<br>
    a critical concern for individuals and organizations alike. </p><footer> #Footer</footer>
    </article>
    <article style="background-color: lightgreen; margin:3px;">
    <header><h2> Welocme To PSUT </h2> </header>
    <p> This Spectaular University offer for stuednts the oppoutunity to choose the major want based on the
    departments <br>they offer Engineering, computing science and business </p>
    <footer>#Footer</footer></article> </section>
    </body>
    </html>

    4|Page
    </body>
    Output:

    3. Embedded Content:
    Embedded tags are used to include external resources into html page, these resources could be in
    your server or located at some other location
    Main purpose of www. : connect all contents together with a link and that makes the web so
    powerful
    ❖ Images
    ❖ Image with attributes
    ❖ Image with Article
    ❖ Audio
    ❖ Video
    ❖ Embed one page into another (iFrame)
    ❖ Link page
    ❖ Anchor link
    ❖ Map Tag
    Embed Image:
    <img> tag: used to embed image in the html page, the image could be in the same server or
    different server location file
    <img src=” location”> src: point to the location of image file

    5|Page
    Example: <html>
    <head>
    </head><body>
    <h2> Flower Images </h2>
    <img src="images.jpeg">
    <img src="image34.jpeg"></body></html>
    Output

    Embed Image with attributes


    <img> tag has the same attribute to resize the image control the position of the image
    Alt attribute : specifies the alternative text of that image ( when image cannot be loaded)
    Width and height attributes are used to resize the image
    Example
    <html>
    <head>
    </head><body>
    <h2> Kinds of apples</h2>
    <img src="apple1.jpeg" width="110" height="140" alt="Apple1">
    <img src="apple2.jpg" width="110" height="140" alt="Apple2">
    <img src="apple3.jpeg" width="110" height="140" alt="Apple3">
    <img src="apple4.jpg" width="110" height="140" alt="Apple4">
    </body></html>

    6|Page
    Output with correct image load:

    Output with wrong image load

    Embed Image in the Article:


    <figure> element inside the article that let you define image properly Example:

    <section><table><tr>

    <td> <img src="camels-treasury-petra-jordan-ac93988c79b7.jpg" width="230" height="230"></td>

    <td> </td><td> <img src="download.jpeg" width="230" height="230"> </td> </tr><tr><td> <article><h1>


    Petra </h1> <p> Petra is located in the south of the <br>Hashemite Kingdom of Jordan<br>specifically in
    the province of Ma’an<br> which was chosen as one of the seven<br> new wonders of the world in the
    year<br> 2000 and 7 AD.</p></article></td> <td> </td>

    <td> <article> <h1> Aqaba </h1> <p> The Gulf of Aqaba is the eastern part of the Red Sea<br>located to
    the east of the Sinai Peninsula. <br> Egypt, Israel, Jordan and Saudi Arabia have coasts<br> on this Gulf. It
    is called the Gulf of Aqaba <br>after the city of Aqaba on its northern coast</p></table>
    </section></body>

    7|Page
    Output

    Embed Audio
    <audio> tag used to embed audio file in html page it include <source> tag to add path of audio
    Controls: used to define the control buttons for the audio like : play , pause and close

    <body>
    <h2> Audio Example </h2>
    <audio controls>
    <source src="RZFWLXE-bell-hop-bell.mp3" type="audio/mpeg">
    </audio>

    Output:

    8|Page
    Embed Video
    <video> elements are used to embed video file in the html page it include <source> tag to add
    the path of the video and type , you can resize the video using width and height attributes

    <h3> Video Example </h3>


    <video width="320" height="320" controls>
    <source src="Take a thrilling aerial ride through Jordan's iconic wonders with
    this drone adventure!.mp4" type="video/mp4">
    </video>

    Output:

    Embed Iframe:
    <iframe> tag used to embed other html page inside the existing one

    <body>
    <iframe src="Page.html" height="300"></iframe>
    </body>

    9|Page
    Output

    Embed Link
    <a> tag allows you to link other pages, images, audio or video file or any other url using the <a>
    tag.
    This is the most powerful and important tag in HTML that you will be using alot.
    TAG: <a>
    ELEMENT: <a href=” location” >
    target – This attribute decides where the link should open
    target = “_blank” – Will open the link in another window
    Example:

    <body>
    <a href="https://portal.psut.edu.jo/"> Welcome to PSUT Portal </a><br>
    <a href="PSUT_7.jpg"> Open PSUT </a></body>

    Output

    10 | P a g e
    Embed Anchor
    <a> tag allows you to link to the specific section of the page.
    Anchors helps users to jump on the specific section of the same page.
    id – This id attribute is first assigned to the tag to mark as a anchor.
    Using <a> tag, we can provide link to that specific location of the page.

    <body>
    <h1> Anchor Example </h1>
    <a href="#location">Go to location 1 </a>
    <br>
    <br><br><br><br> <br> <br> <br> <br>
    <h1 id="location">Welcome To PSUT </h1>

    Map Tag:
    Used to define image map with clickable area contains number of area inside the map

    <body>
    <i> Map Example </i>
    <img src="list-d14.jpg" usemap="#laptop">
    <map id="laptop">
    <area shape="rect" coords="780,249,875,324"
    href="https://consumer.huawei.com/en/laptops/">
    </map></body>

    11 | P a g e

    You might also like