Scribd Logo
Upload

Welcome to Scribd!

  • HTML Links, Images, Etc: WCIS - Sandy D

    Uploaded by

    Syed Kaim
    7 views11 pages

    Original Title

    wcis2.pdf

    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

    Copyright:

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

    HTML Links, Images, Etc: WCIS - Sandy D

    Uploaded by

    Syed Kaim

    Copyright:

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

    HTML Links, Images, etc

    WCIS – Sandy D

    This example is adapted from https://www.internetingishard.com


    Let’s link three HTML files together:
    create a new folder call it week2 or other name, and put two html
    files there, one will be called index.html, and another one call it
    images.html.
    In your folder create another folder call it misc and put another
    html file there , call it extras.html.

    extras.html
    index.html images.html

    Inside folder named : misc


    Put this in index.html
    Download the zip file called mochi and extract the files, place it
    in the same folder as your index.html and images.html

    Mochi folder contains image files


    that we will use in the
    images.html.
    Put this in images.html
    Put this in misc/extras.html
    What is index.html?
    Default home page

    • The index.html page is the most common name used for the default page
    shown on a website if no other page is specified when a visitor requests
    the site. In other words, index.html is the name used for the homepage of
    the website.

    • In essence, when you go to a URL and specify a specific file, that is what
    the server will deliver. If you do not specify a file name, the server looks for
    a default file and displays that automatically
    Update your images.html,add width and alt attributes

    <!-- In JPGs section -->


    <img src='images/mochi.jpg' width='75' alt='A mochi ball in a bubble'/>

    <!-- In GIFs section -->


    <img src='images/mochi.gif' width='75' alt='A dancing mochi ball'/>

    <!-- In PNGs section -->


    <img src='images/mochi.png' width='75' alt='A mochi ball'/>

    <!-- In SVGs section -->


    <img src='images/mochi.svg' alt='A mochi ball with Bezier handles'/>
    Document language
    A web page’s default language is defined by the lang attribute on the top-level
    <html> element. Our document is in English, so we’ll use the en country code as
    the attribute value (do this for all of the pages we created), add this to your html
    document:

    <html lang='en'>
    Document language
    A web page’s default language is defined by the lang attribute on the top-level
    <html> element. Our document is in English, so we’ll use the en country code as
    the attribute value (do this for all of the pages we created), add this to your html
    document:

    <html lang='en'>
    Charset
    <ol> • Add these to your extras.html, these are words in
    Turkish characters.
    <li>bir</li>
    <li>iki</li> • If the characters are broken, that’s because the
    default character set for most browsers doesn’t
    <li>üç</li> accommodate these “special” characters.
    <li>dört</li> • To fix this, specify a UTF-8 character encoding
    <li>beş</li> by adding a <meta> element with a charset
    attribute to the <head> of our misc/extras.html
    </ol> file:
    <meta charset='UTF-8'/>

    A “character set” is kind of like a digital alphabet for your browser, it


    tells the browser how to render characters correctly.

    You might also like