Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Info 1601 Lecture 1 - HTML

    Uploaded by

    Daniel Rasheed

    Copyright:

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

    Info 1601 Lecture 1 - HTML

    Uploaded by

    Daniel Rasheed
    4 views25 pages

    Original Title

    Info 1601 Lecture 1_ HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

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

    Info 1601 Lecture 1 - HTML

    Uploaded by

    Daniel Rasheed

    Copyright:

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

    INFO 1601

    Lecture 1: HTML
    Nicholas Mendez
    What is HTML

    ● Hypertext Markup Language


    ● Belongs to a family of languages called
    Markup Languages
    ● MarkUp languages are used to format text
    based documents
    ● HTML is used for formatting web pages
    Components of an
    HTML element
    Tags

    ● Tags are the typed representation of


    html elements.
    ● They are written using angle brackets
    along with referencing a recognised
    tagname of an html element.
    ● Some elements have an opening tag
    and a closing tag while some elements
    are self closing.
    Content

    ● Elements that have closing tags


    can have text content or other
    elements nested between the
    tags.
    ● This allows the browser to know
    what content belongs to which
    element.
    Attributes 1
    ● key value pairs of data that help define
    additional details on elements
    ● Attributes are always defined on the opening
    tag.
    ● Attribute values must be enclosed in quotes
    ● An attribute can have multiple values but an
    attribute name can only be used once per tag
    ● Boolean/Empty attributes do not take a value.
    Boolean attributes just need to be present in the
    open tag to be applied and omitted to not be
    applied. eg checked/disabled/required
    Attributes 2: Global Attributes

    These are optional attributes that can be added to all tags and vary in function below are some
    examples.

    Attribute Description Example

    hidden Hide the element from the document <p hidden="true"> ... </p>

    title Adds a tooltip when a pointer hovers over the element <p title="my paragraph"> ... </p>

    style Allows inline styling <p style="color: red"> ... </p>

    id Attaches a unique identifier to the element <p id="para-1"> ... </p>

    class Attach an identifier to group multiple elements <p class="header-paras"> ... </p>
    Attributes 3: Required Attributes

    Some elements have attributes which must be specified and given a value. The following are
    some examples

    Tag Required Attribute Example

    Image - img src: Specified the source location of the image <img src="image.png"></img>

    input type: specifies the type of input element <input type="text">

    Hyperlink - a href: hyperlink reference url <a href="https://g.co"></a>


    Attributes 4: Event Attributes

    These are optional attributes that allow us to define some behaviour in response to an event
    which occurs on an html element. These attributes usually begin with "on"

    Attribute Description Example

    onload Fires after element has finished <body onload=".."></body>


    loading

    onclick Fires after an element is clicked <button onclick="..."></button>


    Structure
    Example HTML Page
    HTML Elements

    HTML Elements
    Metadata Elements

    Meta-data
    These are a class of elements which allows us to add information which help describe the web page itself as well as
    link other files to it. Meta-data elements must be children of the head element. Meta-data elements are written with
    the meta tag and must provide the attributes; name and content. Here is a list of possible meta tags you can add to a
    website which would be used by different browsers or services.

    Title
    The title element sets the title of the website and would be shown in the tab of the website in the browser.

    Link
    The link tag is used to link external files to the website such as css files, web manifests or preloading javascript files.
    Typography
    Section Elements

    ● Semantic elements that help


    developers and browsers
    understand the structure of the
    page.
    ● Eg: header, nav, article, section,
    footer, aside
    Interactive Elements

    ● Elements that respond to user interaction (clicking,


    tapping)
    ● Summary & Details <summary> <details> : creates a
    collapsible UI
    ● Dialog shows a popup to display additional content
    URLs

    ● The internet is a global network of various types of servers that run operate over various
    protocols eg: FTP, SMTP, POP, HTTP, SSH, Telnet, DNS
    ● Uniform Resource Locator (URL) is the fully specified address of a resource on a network.
    ● Different of internet applications would require different URL formats Eg
    ○ email smtp://[email protected]
    ○ web http://google.com
    Absolute URLs/Paths

    ● A path is the address of a file on a network/disk


    ● Absolute paths gives the fully specified address of the
    resource that will remain the same regardless of the Hosted files Root relative paths
    source.
    ● Two ways of giving absolute paths
    ○ Origin relative: We include the host along with
    the path, this scheme can work with both
    internal and externally hosted resources

    EG. href="https://picsum.photos/200/300.webp"

    ○ Root relative: The host is excluded, the path


    starts at the document root directory, this
    scheme only works for internally hosted
    resources as the origin is implied to be the same
    as the source file

    EG href=”/200/300.webp”
    URL Addressing - Relative URLs/Paths

    This is when we use relative addressing to specify the location of a resource (destination) relative to the location of
    the current webpage being edited (source).

    In short "/" is used to delimit directories. "." to reference something in the same directory of the source file and ".." is
    used up to the parent directory f the source file.

    Source Destination Destination Directory Relative Destination Root Relative Address


    Address

    index.html kass.mid ./media/audio/kass.mid /media/audio/kass.mid

    index.html signup.html ./page/signup.html /pages/signup.html

    signup.html index.html ../index.html /index.html

    signup.html results.js ../src/result.js /src/results.js

    signup.html kass.mid ../media/audio/kass.mid /media/audio/kass.mid

    Note if the source is in the root directory, then its directory relative and root relative
    address to any destination is the same
    Anchor Elements
    ● Weblinks are created using the anchor tag <a>
    ● Links allows developers to direct the user to; a portion of the page, an external website or even another application.

    <!-- Linking to Another Web Page →


    <!-- Linking to a Specific Element on Another Page --> <a href="https://www.example.com">
    <a href="https://www.example.com/page.html#section1"> Visit Example.com
    Go to Section 1 on Example Page </a>
    </a>
    <!-- Linking to an Email Address (Mailto) -->
    <!-- Linking to a File for Download --> <a href="mailto:[email protected]">
    <a href="path/to/file.pdf" download> Send Email
    Download PDF </a>
    </a>
    <!-- Linking to a Phone Number -->
    <!-- Linking with a Tooltip --> <a href="tel:+1234567890">
    <a href="https://www.example.com" title="Visit Call Us
    Example.com"> </a>
    Visit Example.com with Tooltip
    </a> <!-- Linking to a Different Section of the Same
    Page -->
    <!-- Using JavaScript in an Anchor Tag --> <a href="#section2">
    <a href="javascript:alert('Hello World!');"> Go to Section 2
    Click to display alert </a>
    </a> <!-- Content and target section -->
    <p>Some content...</p>
    <h2 id="section2">Section 2</h2><br>
    Table Elements
    ● Tables are used for visualizing multi-dimensional data
    ● Table elements are as follows:
    ○ Table Head <thead> : The head section of a table which contains table headers
    ○ Table Header <th> : A column header of the table
    ○ Table Body <tbody> : The contents of the table
    ○ Table Row <tr>: Separates the rows of a table
    ○ Table Data <td>: Separates a column within a row
    ○ Table Footer <tfoot>: The footer section of the table
    Form & Input
    Elements
    Forms
    ● While tables are the fundamental method for
    data output; forms are used for data input
    ● In forms we make use of appropriate
    elements, validation, defaults and layout to
    facilitate a good user experience.
    ● Form design is a critical task for functioning
    systems
    Using the appropriate form elements.
    Purpose Element(s) Purpose Element(s) Comment

    Single <select> & <options> Numeric input type="range"


    Selecting
    Options <datalist> & <options> input type="number"

    <input type="radio"> Text input type="text"

    Time input type="date" input type="password" masks input

    input type="datetime-local" input adds validation


    type="email/url/search/tel"

    input type="month/week/time">
    input type="text" hides the virtual keyboard
    inputmode="none"
    Multiple <select multiple>
    Selection/C
    input type="text" affects mobile virtual
    ollection <input type=”checkbox”>
    inputmode="numeric/tel/deci keyboard
    mal/email/url/search"
    Buttons <button> <input type=”button”>
    Color input type="col

    Submission <submit> <input type=”submit”>


    File input type="file"
    Exercise: https://forms.gle/YSAxhh33qay6fXU78

    You might also like