A simple example

1
A simple example

• An HTML file is a text (ASCII) file in a special
  format
• Charles Ling's home page
• My first and simple home page
• My name is Charles Ling
• Here is how I look like width30
• My favourite things to do are
• • Adventurous travelling around the world,
    starting from
  • here
  
  2
  (No Transcript)
  3
  Building HTML files
  • Writing HTML files directly (using Notepad or
    other text editors)
  • Using Microsoft Word and saving it as web page
  • Using specialized software Microsoft Frontpage,
    Macromedia Dreamweaver, etc.
  • Adding animations, forms, java, javascript,
    database functionality, etc.
  
  4
  Writing simple HTML files
  • Start notepad and write HTML code directly
  • Save as an HTML file (e.g., my.html)
  • Start browser (e.g., Internet Explore)
  • Click File Open, click Browse to locate and
    open the HTML file (e.g., my.html)
  • You will see how the html file is displayed on
    your PC
  • You need to publish it on a web server so
    people around the world can see it!
  
  5
  Learn from other peoples WebPages
  • View the page in your browser (IE)
  • Click View Source, you can see html source
    codes (usually seems to be complicated if
    generated from software)
  • You can also save the page and images on your PC,
    by File Save as
  
  6
  The structure of an HTML file
  • HTML files must employ a simple format so anyone
    can create web pages
  • HTML files is a simple text file that can be
    created using any editor that allows you to save
    the document as a text file
  
  7
  The structure of an HTML file
  • To combine the content and the presentation
    instructions in the same file, there must be a
    way to distinguish between these two components
  • In HTML, the presentation instructions are
    inserted as tags
  • Anything that isnt a presentation instruction is
    content
  • HTML is not WYSIWYG (What you see is what you get)
  
  8
  HTML Tags
  • HTML tags normally occur in pairs
  • The pair of tags surrounds the content to which
    they apply
  • A start tag is indicated with angle brackets
    
  • An end tag is indicated with a slash after the
    opening angle bracket
  
  9
  HTML Tags (continued)
  • HTML has a set of predefined tags
  • These tags can be used to
  • Control how the text in the document is displayed
  • Insert images into the document
  • Insert links to other documents
  
  10
  Document tags
  • The entire HTML document is enclosed within the
    and tags
  • Every HTML document will have a head and a body
  • The document head is enclosed within the
    and tags
  • The body is enclosed within the and
    tags
  
  11
  Basic HTML Structure
  • The basic structure of an HTML document is
  • Basic HTML Structure
  • . . .
  • The within the is displayed in the
    title bar of the browser
  
  12
  The HEAD and BODY tags
  • The of the document contains information
    used by the browser
  • All of the content for the document and the
    associated presentation instructions are placed
    inside the tags
  
  13
  Formatting Tags
  • HTML contains tag definitions that allow you to
    control
  • Headings
  • Style
  • Ordered Lists
  • Unordered Lists
  • Definition Lists
  • etc.
  
  14
  Heading Tags
  • There are six heading levels
  • The levels are named H1, H2, H3, , H6 where H1
    is the largest and H6 is the smallest
  • To create a heading, you enclose the text of the
    heading inside the opening and closing tags for
    the heading level
  
  15
  Headings example
  • Heading H1
  • Heading H2
  • Heading H3
  • Heading H4
  • Heading H5
  • Heading H6
  
  16
  Formatting tags
  • Formatting tags are used to control the display
    of text
  • - italics
  • - bold
  • - underline
  • - typewriter type face
  
  17
  Formatting example
  • When a browser presents a web
  • document, the browser scans the document
  • and applies the presentations
    instructions
  • to the content
  
  18
  More examples
  • The above tags can be nested
  • Bold underlined text
  
  19
  Layout Style Tags
  • Used to control text layout
  • - center the text
  • - new paragraph
  • 
    - break, start a new line
  • - horizontal rule, draw a line
  
  20
  Layout example
  • This is the first paragraph. Notice the space
  • between this paragraph and the next one.
  • This is a second paragraph. We can insert a
    line
  • break by using the tag BR.
  • 
    
  • This is a new line.
  • Finally this is some centered text and a
  • horizontal rule.
  
  21
  Lists
  • Lists of data can be defined using
  • Ordered List enumerated lists
  • Unordered List bulleted lists
  • Definition List lists that are made of terms
    and their associated definitions
  
  22
  Ordered List
  • Use the
    and
    tags to start and end an
    ordered list
  • Within the ordered list, the list item (
  • ) tag
    is used to indicate the items on the list
  • The VALUE tag can be used to set the value of a
    list item
  • The START parameter is used to control the value
    of the first item
  
  23
  Ordered list types
  • The TYPE parameter controls what enumeration
    scheme is used
  • The types are
  • 1 numbers (default)
  • a lower case letters
  • A upper case letters
  • i small Roman numerals
  • I large Roman numerals
  
  24
  Ordered list example 1
  • 2. Sunday
    4. Monday
    6. Tuesday
    8. Wednesday
    10. Thursday
    12. Friday
    14. Saturday
  
  25
  Ordered list example 2
  • 2. Sunday
    4. Monday
    6. Tuesday
    8. Wednesday
    10. Thursday
    12. Friday
    14. Saturday
  
  26
  Ordered list example 3
  • 2. Sunday
    4. Monday
    6. Tuesday
    8. Wednesday
    10. Thursday
    12. Friday
    14. Saturday
  
  27
  Unordered List
  • Use the
    and
    tags to start and end an
    unordered list
  • Within the unordered list, the list item (
  • )
    tag is used to identify the items on the list
  • The TYPE parameter can be used to control the
    look of the list
  • Disc a solid disc
  • Circle a hollow circle
  • Square a square symbol
  
  28
  Unordered list example 1
  • • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
  
  29
  Unordered list example 2
  • • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
  
  30
  More examples
  • As usual with HTML tags, the list tags can be
    nested
  • 2. Sunday
    4. Monday
    6. Tuesday
    8. Wednesday
    10. Thursday
    12. Friday
    13. • Friday Morning
        • Friday Afternoon
        • Friday Evening
    15. Saturday
  
  31
  Images
  • Images are added to documents using the tag
  • A tag is not required
  • The SRC parameter is used to indicate the SouRCe
    of the image
  
  32
  Standard Image Formats
  • Examples of image formats used on the Web are
  • GIF Graphics Interchange Format
  • JPG ( JPEG ) Joint Photographic Experts Group
  • BMP Windows Bitmap
  
  33
  Graphics Interchange Format
  • Uses the Lempel-Ziv Welch (LZW) compression
    algorithm
  • The algorithm compresses regularities in the
    image data
  • This number of colors in the image cannot be
    greater than 256
  • This format is used when the image does not
    contain a wide range of colors or color shades
  
  34
  Joint Photographic Experts Group
  • Images can contain millions of colors
  • Uses Lossy compression algorithm
  • When the image is compressed it permanently loses
    some of its quality
  • The loss of quality can be imperceptible to the
    human eye
  • The loss of quality can be adjusted at the price
    of final image size images with better quality
    will be larger than images with lower quality
  • This format is used when the image contains many
    colors and many color shades
  • Very common in web pages
  
  35
  Windows Bitmap
  • Every pixel in the image is represented by a
    piece of data
  • The data represents the color of the pixel
  • No compression means bitmap images are very large
  • Rarely used on Web pages because of the time
    required to download the image
  
  36
  Image example
  
  37
  URL
  • An URL is a Uniform Resource Locator
  • An URL contains information about
  • The address of a document on the Internet
  • The protocol that will be used to access the
    document
  
  38
  Protocols
  • HTTP HyperText Transfer Protocol
  • Designed to transmit files on the WWW
  • http//www.csd.uwo.ca
  • FTP File Transfer Protocol
  • Designed to transmit files over the Internet
    (before the Web developed)
  • ftp//ftp.csd.uwo.ca
  • E-mail
  • mailtocling_at_csd.uwo.ca
  • These protocols are sets of rules that dictate
    how files are transmitted between computers
  
  39
  Examples URL of HTTP
  • http//www.uwo.ca/selected/browse.html
  • The document is browse.html and it is located
    in the selected folder at the World Wide Web
    site for UWO in Canada
  • http//www.csd.uwo.ca/faculty/cling
  • By default, index.html is retrieved in the
    folder faculty/cling/ at the web server
    www.csd.uwo.ca
  
  40
  Anchors
  • Anchor tags ( and ) are used to insert
    hyperlinks and bookmarks into HTML documents
  • A hyperlink is a link to another document on the
    World Wide Web
  • A bookmark is a named location within an HTML
    document
  
  41
  Anchors as links
  • A link is declared by using an A tag with a HREF
    attribute.
  • The HREF (Hypertext REFerence parameter) is the
    URL of the link destination.
  • The content inside the tag and tag will
    be displayed and will activate the link when
    clicked.
  
  42
  Link example
  • UWO
  • will display a link with the text UWO that will
    take the browser to the UWO web site
  
  43
  Images as links
  • The content inside the and tags can be
    an image
  • "
  
  44
  Anchors as bookmarks
  • A bookmark is an A tag with a NAME attribute.
  • A bookmark is usually invisible
  • If the bookmark is within the same document, it
    can referred by followed by the NAME of the
    bookmark.
  
  45
  Links and bookmarks within the same (long)
  document
  • Go to papers on cognitive
    science
  • .
  • .
  • .
  • Papers on cognitive science start from
    here
  • .
  • .
  • .
  • Back to top
  
  46
  Links to bookmarks in other documents
  • The general syntax is
  • Link Item
  • Example
  • Click
  • s.htmlcog here to see the cognitive
    science papers
  • You can see a working example at
  • http//www.csd.uwo.ca/faculty/cling/cs031/simple.h
    tml
  
  47
  Tables in HTML
  • The tag marks the beginning of a table
    declaration and the tag , its end
  • The attribute BORDER of the tag controls
    the width of the table border
  • Tables are declared one row at the time. A row
    declaration is enclosed within the and
    tags
  • A row declaration contains one or more cells. A
    cell is specified using the tags and
  • The content inside the TD tags will be displayed
    as the content of the cell
  
  48
  Table example
  • Row 1, Cell 1
  • Row 1, Cell 2
  • Row 1, Cell 3
  • Row 2, Cell 1
  • Row 2, Cell 2
  • Row 2, Cell 3
  
  49
  Advanced table layout
  • Cell can be merged horizontally or vertically by
    using the ROWSPAN and COLSPAN attributes of the
    TD tag
  • The ROWSPAN attribute indicates how many rows the
    cell spans horizontally
  • The COLSPAN attribute indicates how many columns
    the cell spans vertically
  
  50
  Advanced layout example
  • g"
  • Top
  • Middle
  • Bottom
  
  51
  Web Page Example 1
  • Create a Web page with
  • My First Web Page as the title
  • Your name as a level 2 heading
  • An enumerated list of your three favorite
    University courses
  • An image for the University. Use
    http//www.uwo.ca/gifs/uwologo4.gif as the source
    URL.
  
  52
  Web Page Example 2
  • Create a Web Page with
  • A TV show name as a level 1 heading at the top of
    the page
  • A paragraph of text about the show
  • Bold the stars names and italicize the night that
    the show is broadcast within this text
  • A horizontal line
  • A link to a Web page for the show. Use the name
    of the show as the link text
  • A horizontal line
  • A link to the heading at the top of the page,
    using Top as the link text
  
  53
  Advanced HTML Editors
  • MS Word can be saved as html. But it is document
    oriented software and does not have access to the
    more advanced HTML features
  • animations
  • Forms
  • Scripting
  • Websites with large number of web pages are not
    easy to create and manage using Word
  • Dedicated software packages Macromedia
    Dreamweaver and Microsoft Frontpage, among others
  
  54
  How to publish your web page on the UWO server
  • Detailed instructions are available at
  • http//www.uwo.ca/its/doc/hdi/web/personalpage.htm
    l
  • Step by step instructions
  • Open a Command Prompt
  • Start the telnet program by typing
  • telnet panther.uwo.ca
  • Type your user name and password as instructed
  • Type the command publish this will create a
    folder named public_html which will hold all your
    files and a default page in this folder named
    index.html
  
  55
  • At this point, the default web page is available
    at the address
  • http//publish.uwo.ca/login-name/
  • where login-name is your user name.
  • Type logout to exit telnet
  • You can transfer your file to the web server by
    using the ftp program
  • Rename your web page index.html.
  • Type ftp at the command prompt to start the file
    transfer program.
  • You will be asked to enter your user name and
    password
  • Use the command lcd (local change directory) to
    change the current local folder to the location
    of your web page
  
  56
  • Type cd public_html to change the server's
    current folder to the location of your web page.
  • Type put index.html to transfer this file to the
    server. If you have other files (images), put
    these files to the server as well.
  • Type bye to exit the ftp program
  • Check your results at
  • http//publish.uwo.ca/login-name/
  • (By default, it looks for index.html)