Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 3

    Uploaded by

    kmani11811
    6 views23 pages

    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
    6 views23 pages

    Lecture 3

    Uploaded by

    kmani11811

    Copyright:

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

    Web Technologies

    Introduction to HTML
    Today’s Lecture
    • HTML History
    • HTML and XHTML
    • HTML Elements
    • Block Level Element vs Inline Element
    • HTML Page Structure
    • W3C Validator
    HTML History
    • HTML stands for Hypertext Markup Language.
    • HTML is a markup language.
    • A markup language is a set of markup tags.
    • Tags describe document content or layout.
    • HTML documents contain HTML tags and plain text.
    • First mentioned on the Internet by Tim Berners-Lee in late 1991.
    • HTML 2.0 was published in Nov 1995.
    • HTML 3.2 was published in Jan 1997.
    • HTML 4.0 was published in Dec 1997.
    • HTML 5.0 was published in Oct 2014.
    HTML and XHTML
    • HTML gives content structure and meaning by defining that content.
    – Examples are <title>, <body>, <p>, and <b>.
    • Some Important Key Points:
    – <!DOCTYPE html>, <html>, <head>, <title>, and <body>
    are mandatory.
    – Elements must always be properly nested.

    • XHTML stands for eXtensible HyperText Markup Language.


    • XHTML is a more restrictive form of HTML, following to the XML
    standards (eXtensible Markup Language).
    HTML Elements
    • HTML element is defined by a start tag, some content, and an end
    tag.
    – Syntax: <tagname> content goes here </tagname>
    – Example: <p> this is a paragraph statement. </p>
    – Example: <a href="hib.html"> click here to view </a>
    • Some tags don't contain any information; can be opened and closed
    in one tag. These tags are known as singleton tags.
    – Example: line break <br>, and horizontal line <hr>
    Block-Level Element vs Inline Element
    • Block-Level Element
    – Always starts on a new line, and takes up full width available.
    – Examples: <div>, <p>, <ol>, <ul>, <h1> - <h6>, etc.
    • Inline Element
    – Does not start on a new line, and only takes up as much width
    as necessary.
    – Examples: <b>, <strong>, <i>, <em>, <small>, <a>, <img>,
    <label>, etc.
    HTML Page Structure
    • <html> represents the root of an HTML document.
    • <html> is the container for all other HTML elements (except for <!
    DOCTYPE html>).
    • Include lang (language) attribute inside the <html> tag, to declare
    the language of the Web page. This is meant to assist search
    engines and browsers.
    • HTML page is saved into a file ending with extension .html
    HTML Page Structure
    • HTML Head Tag <head>
    – <head> is a container that contain <title>, <style>, <meta>,
    <link>, <script>…
    – <head> is placed between <html> tag and the <body> tag.
    • HTML Title Tag <title>
    – <title> defines the title of the document.
    – Title shown in the browser's title bar or in the page's tab.
    – It is placed within the head of the page.
    – Title provides a title for the page when it is added to favorites
    (i.e., bookmark).
    – Title displays a title for the page in search-engine results.
    HTML Page Structure
    • HTML Body Tag <body>
    – <body> defines the document's body.
    – <body> contains all the content of an HTML document, such as
    headings, paragraphs, images, hyperlinks, tables, lists, etc.
    – There can only be one <body> element in an HTML document.
    HTML Page Structure
    • HTML Paragraph Tag <p>
    – <p> defines a paragraph.
    – <p> is used to indicate the start of the paragraph, and </p> is
    used to indicate the end of the paragraph.
    – Browsers automatically add a single blank line before and after
    each <p> element.
    HTML Page Structure
    • HTML Heading Tags <h1>,...,<h6>
    – <h1> to <h6> defines headings.
    – <h1> defines most important heading.
    – <h6> defines least important heading.
    – <h1> heading should be used for main heading, followed by
    <h2> heading, and so on.
    HTML Page Structure
    • HTML Links Tag <a>
    • HTML links are hyperlinks.
    • <a> defines a hyperlink, which is used to link from one page to
    another.
     Example: <a href=“file.html”>
     href indicates the link's destination URL.
     It can be absolute (to another web site or server)
    or relative (to another page on same site).
    HTML Page Structure
    • HTML Images Tag <img>
    – <img> is used to embed an image.
    – <img> has two required attributes:
    • src - Specifies the source/path to the image.
    • alt - Specifies an alternate text for the image.
    HTML Page Structure
    • HTML Images Tag <img>
    • Image as a Link
    • If image is contained within same folder or directory:
    o <img src="hib.jpg" width="25" height="25">

    • To display images from another folder:


    o <img src="/images/hib.png" width= "25" height= "25">

    • If image is on another server, then use complete link:


    o <img src="https://comsats.edu.pk/img/comsats.png">
    HTML Page Structure
    • HTML Video Tag <video>
    – <video> is used to embed a video content in a document.
    – <video> is a pair tag and have a closing tag.
    <html>
    <head>
    <title>video</title>
    </head>
    <body>
    <h1>video</h1>
    <video src=“video.mp4" controls height="336px" width="300px"></video>
    </body>
    </html>
    HTML Page Structure
    • HTML Video Tag <video>
    Optional Attributes
    HTML Page Structure
    • HTML Audio Tag <audio>
    – <audio> is used to embed audio content in a document.
    – <audio> is a pair tag and have a closing tag.

    <html>
    <head>
    <title>video</title>
    </head>
    <body>
    <h1>audio</h1>
    <audio src="anthem.mp3" controls></audio>
    </body>
    </html>
    HTML Page Structure
    • HTML Audio Tag <audio>
    Attributes
    HTML Page Structure
    • HTML Phrase Tags
    – HTML phrase tags are special purpose tags.
    – Some examples of phrase tags are:
    • Abbreviation tag : <abbr>
    • Marked tag: <mark>
    • Strong tag: <strong>
    • Emphasized tag : <em>
    • Short quote tag : <q>
    • Code tag: <code>
    HTML Page Structure
    • <strong>, and <em>
    – <strong> is used to define text with strong importance.
    • The content inside is typically displayed in bold.
    – <em> is used to define emphasized text.
    • The content inside is typically displayed in italic.
    W3C Validator
    • It checks that either tags are
    following W3C formatting
    standards or not.
    • If fail to validate website's
    pages based on W3C
    standards, then website will
    most likely suffer from errors.

    Disclaimer – images added only for educational purpose.


    Summary of Today’s Lecture
    • HTML History
    • HTML and XHTML
    • HTML Elements
    • Block Level Element vs Inline Element
    • HTML Page Structure
    • W3C Validator
    References
    • https://developer.mozilla.org/en-US/docs/Web/HTML
    • https://www.w3schools.com/html/
    • https://validator.w3.org/

    You might also like