Lecture 22

HTML

MCS 260 Fall 2020
David Dumas

Reminders

  • Worksheet 8 available, Quiz 8 coming soon
  • Project 3 description to be released on Friday
  • Quiz 5,6,7 solutions available
  • Quiz 7 grades to be released today
  • Old business

    The built-in functions max(iterable) and min(iterable) find the largest or smallest element of an iterable (e.g. list, tuple, string, dict).

    Lists in Python also have a method list.sort() that modifies the list to put it in increasing order.

    The function sorted(iterable) takes one iterable and returns another. The returned iterable yields the items from the argument, but in increasing order.

    The function reversed(iterable) takes one iterable and returns another. The returned iterable yields the items from the argument, but in reverse order.

    The functions sort(), sorted(), max(), min() accept another parameter called key, a function which turns items into the values that should be sorted.

    key is a common use for lambda.

    HTML

    Hypertext Markup Language or HTML was first developed in 1993 by physicist Tim Berners-Lee. It is the format for documents designed to be displayed in a (web) browser.

    HTML has had many revisions over the years. We will talk about HTML5 (dating from 2014).

    Why?

    Project 3 is about building a program to convert a text file with special formatting to a HTML file.

    Basic familiarity with HTML will be helpful in working on the project, but the project description will also document everything you need to know.

    Doctype

    A HTML5 document is a text file that begins with:

    
            <!doctype html>
        

    This part is not case sensitive, so <!DOCTYPE hTmL is also OK.

    The rest of a HTML file consists of tags. Tags are like parentheses; there is a start symbol, an end symbol, and stuff inside.

    A "foo" tag starts with <foo> and ends with </foo>. Between these are the text and tags inside the foo tag.

    The format for other tags is analogous, though foo is not a real HTML tag. What are some real tags?

    Minimal HTML document:

    
            <!doctype html>
            <html>
              <head>
                <title>Document title</title>
                other tags with info about the document
              </head>
              <body>
                Hello browser!
                other document content
              </body>
            </html>
        

    Indenting is totally optional.

    A few useful tags

    p paragraph
    ul unordered (bullet) list
    li item in a list
    strong important text to be emphasized

    A few useful tags

    h1, h2, ..., h6 headings (outline levels)
    a link
    img image

    The a and img tags require attributes in the start tag to be useful.

    CSS

    HTML is for a document's content, with logical parts indicated by tags.

    CSS is a related language for specifying style (spacing, color, typeface, etc.)

    References

    Revision history

    • 2020-10-14 Additional reminders
    • 2020-10-13 Initial publication