Scribd Logo
Upload

Welcome to Scribd!

  • Lecture No 2

    Uploaded by

    Muhammad Abubakar
    2 views35 pages
    python lecture

    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
    python lecture

    Copyright:

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

    Lecture No 2

    Uploaded by

    Muhammad Abubakar
    python lecture

    Copyright:

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

    Application

    of ICT
    HTML
    Hyper Text
    Markup Language

    2
    HTML

    • HTML describes the structure of a web


    page semantically and originally included cues for the
    appearance of the document.

    3
    HTML

    • Describes the content and structure of information on


    a web page.
    • Surrounds text content with opening and closing tags.
    • Each tag’s name is called an element.
    • Syntax: <element>content</element>
    • Example: <p>this is a paragraph</p>

    4
    Where is HTML Used?

    • HTML is used in web development and design.

    • It is used to create all of the information, text, and


    other attributes of the website.

    • All of the backbone text, information, and other items


    in the website are created using HTML

    5
    HTML basic structure

    <html>
    <body>

    <h1>my first heading</h1>


    <p>my first paragraph.</p>

    </body>
    </html>

    6
    Basic HTML Document

    The HTML document itself begins with <html> and


    ends with </html>.

    The visible part of the HTML document is between


    <body> and </body>.

    7
    Basic HTML Document

    <HTML>
    <HEAD>
    <TITLE>Web programming</TITLE>
    </HEAD>
    <BODY>
    HTML: This is what is displayed.
    </BODY>
    </HTML>

    8
    How HTML Works – Tags

    • Tags are the way to tell the website how to style the
    text.

    • They are also used to tell the website what to display


    (tables, forms, etc.)

    9
    The first rule of writing HTML code is to surround text with tags.
    Tags give a meaning, such as a heading or a link, to a text.

    10
    Most HTML elements require a pair of tags, an opening
    tag and a closing tag, with text inserted in between.
    When using closing tags, make sure to put /.

    11
    Tags

    12
    HTML Block and
    Inline elements

    A block-level element always starts on a new line and


    takes up the full width available (stretches out to the left
    and right as far as it can).
    An inline element does not start on a new line and only
    takes up as much width as necessary.
    Examples of block-level elements are <div>, <h1> -
    <h6>, <p> and <form>.
    Examples of inline elements are <span>, <a> and <img>
    Few Examples
    <a href="https://www.w3schools.com/html/">Visit our
    HTML tutorial</a>

    <p>My mother has <span style="color:blue;font-


    weight:bold">blue</span> eyes and my father has <span
    style="color:darkolivegreen;font-weight:bold">dark
    green</span> eyes.</p>

    <img src="IMAGE.jpg">
    HEADINGS and TEXT
    Heading tags are used to format heading elements.
    These tags range from <h1> to <h6>, <h1> being the largest
    and <h6> being the smallest (※ h stands for heading.).

    15
    The <p> tag defines a paragraph (※ p stands for
    paragraph).
    The text enclosed by tags such as <h2> and <p> begin
    on a new line.

    16
    The <h1>, <h2>, ..., <h6> tags are used according to the
    size and importance of headings as shown below.
    For text that is not a heading, let's use the <p> tag.

    17
    Lists
    You can create a list item by enclosing the text
    with <li> tags

    18
    The type of list items change depending on the tag you use.
    With the <ul> tag, you can create bulleted lists.
    When elements are "nested" like this, the enclosing element
    becomes the parent and the enclosed elements become
    its children.

    19
    For nested elements, it's a good practice to align code with indentation.
    Although not required, indentation makes it easier to see the parent-
    child relationship especially when your code becomes complicated
    (※ to indent, press the "tab" key at the beginning of a line).

    20
    Images

    • Images can improve the design and the appearance


    of a web page.
    • Images are defined with the <img> tag.
    • The <img> tag is empty, it contains attributes only,
    and does not have a closing tag.
    • The src attribute specifies the URL (web address) of
    the image:
    • <img src="url">
    • <img src="pulpitrock.jpg">

    21
    Images

    22
    alt Attribute

    • The alt attribute provides an alternate text for an


    image, if the user for some reason cannot view it
    (because of slow connection, an error in the src
    attribute, or if the user uses a screen reader).

    • The value of the alt attribute should describe the


    image.
    • <img src="img_chania.jpg" alt="Flowers
    in Chania">

    23
    Image Width and Height

    You can use the style attribute to specify the width and height of
    an image.

    <img src="img_girl.jpg" alt="Girlinajacket“


    width="500" height="600">

    24
    Images from Web

    We can access images from any web address in the world:

    <img src="https://www.w3schools.com/images/w3schools_g
    reen.jpg" alt="W3Schools.com">

    25
    Animated Images

    HTML allows animated GIFs:

    <img src="programming.gif" alt="ComputerMan" style="


    width:48px;height:48px;">

    26
    Image as a Link

    To use an image as a link, put the <img> tag inside the <a> tag:

    <a href="default.asp">
    <img src="smiley.gif" alt="HTML
    tutorial" style="width:42px;height:42px;border:0;">
    </a>

    27
    Links
    ○ Links can also be added

    ○ <a href="http://www.google.com">Google </a>

    ○ Link with an Logo can also be added


    ○ <a href="http://www.google.com">
    <img
    src="http://www.google.com/images/srpr/logo1w.pn
    g"
    alt="Google">
    </a>
    28
    Tables

    ○ Tables are useful for displaying tabular data on the


    web, like research study results.
    ○ HTML element, table

    29
    table element

    ○ The table element contains all the elements that


    make up a table
    <th> <th>
    ○ Header <thead> <td> <td>

    ○ Rows <tr>
    ○ Columns
    ○ Body <tbody>

    30
    table element
    ○ Tables start with a header row with the names of the
    columns.
    ○ thead element starts the header area
    ○ tr element creates a row
    ○ th elements create cells in the header row
    <table border="1">
    ○ tbody element begins the body (data) area <thead>
    ○ Same tr element creates a row <tr>
    ○ td elements create data cells in each row. <th> Month </th>
    <th> Savings </th>
    </tr>
    <tbody>
    <tr>
    <td> January </td>
    <td> $100 </td>
    31
    </tr>
    Iframes

    • An iframe is used to display a web page within a web


    page.

    32
    Embedding Other WebPages

    • You can use HTML to embed other webpages in your


    own page using an iframe element pointing at a URL:

    • <iframe src="URL"></iframe>

    • <iframe src="https://skillsfirst.org/about/"
    width="500" height="300"> </iframe>

    33
    Google Calendar
    • In settings, Google Calendar provides this HTML for
    embedding a calendar:

    • <iframe
    • src="http://www.google.com/calendar/embed?
    src=en.usa%23holiday
    %40group.v.calendar.google.com"
    • width="600" height="400"></iframe>

    34
    YouTube Video

    ○ <iframe width="854" height="480"


    src="https://www.youtube.com/embed/wzRGXtnW
    RGI" frameborder="0" allow="autoplay; encrypted-
    media" allowfullscreen></iframe>"

    35

    You might also like