Lecture 33

HTML and CSS

MCS 275 Spring 2021
Emily Dumas

Lecture 33: HTML and CSS

Course bulletins:

  • We're starting a unit on programming for the web, leading up to building web applications in Python.
  • Worksheet 12 covers databases. (Do you want to install the sqlite command line shell? It's optional.)

Core web technologies

HTML - Hypertext Markup Language. Web page content is written in this language.

CSS - Cascading Style Sheets. Web page presentation (margins, fonts, colors, ...) is specified in this language.

JS - JavaScript. The language for programs that run in the browser and make web pages interactive.

HTTP - Hypertext Transfer Protocol. The network protocol used to send all of the above from a server to the browser (client).

URL - Uniform Resource Locator. A string that describes where a resource (e.g. web page) is, and how to get it (e.g. HTTP).

Opening developer tools in your browser with Ctrl-Shift-i will let you explore most of these for live pages.

HTML

First developed in 1993 by physicist Tim Berners-Lee.

Uses plain text with tags to indicate the structure of a document (and to add links, images, other resources).

HTML exists in many versions. We focus on HTML5 (from 2014), which all modern browsers support.

The rest of today's lecture overlaps a lot with MCS 260 Fall 2020 Lecture 22.

HTML example


        <!doctype html>
        <html>
          <head>
            <title>Document title as seen in browser tab</title>
          </head>
          <body>
            Content you'll see in the browser window.
          </body>
        </html>
    

Indenting is optional. Note how start tags and end tags (like <tagname> and </tagname>) function like parentheses, surrounding the text they apply to.

A few useful tags

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

A few useful tags

h1, h2, ..., h6 headings for document, section, subsection, etc.
divComponent (division) of a document
a link to another resource
img image (no end tag)

The a and img tags require attributes to be useful. These are key=value pairs in the start tag, e.g.


        See the <a href="http://example.com/">example.com web site</a>.

        My kitten, Mr. Mittens: <img src="kitten.jpg">

CSS

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

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

CSS example


        body {
            font-family: sans-serif;
            background: #C0C0C0;
            max-width: 45rem;
            padding: 2rem;
            margin: auto;
        }
        a { 
            color: #000050;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    

One way to apply it to a HTML document is to place the CSS code within a style tag in the header.

References

  • HTML tutorial from W3Schools (all in-browser)
  • A Guide to HTML5 and CSS3 - no-cost PDF ebook from 2014 that is good for self-study; must enter an email address to download
  • Countless web design books in the O'Reilly technical library (free to anyone with a UIC email address).

Revision history

  • 2021-04-05 Initial publication