Lecture 29

HTML and CSS

MCS 275 Spring 2023
Emily Dumas

Lecture 29: HTML and CSS

Reminders and announcements:

  • Homework 11 coming later today.
  • More DB example code coming to the repository this weekend.

Prep for SQL lab

Install the SQLite command line shell to prepare for this week's lab.

The lab will also involve using SQLite from within Python programs.

New unit

We're starting a unit on programming for the web, leading up to building web applications in Python.

Why?

  • Major Python application domain
  • Lets us develop a complex example program over a series of lectures

Core web technologies

HTML - Hypertext Markup Language. Web page content language.

CSS - Cascading Style Sheets. Web page style language. (margins, fonts, colors, ...)

JS - JavaScript. The language that runs in the browser to provide complex interactivity on web sites.

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

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).

Many versions of HTML exist, but the modern and most widely-used one is called HTML5.

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.
div Component (division) of a document
a link to another resource
img image (no end tag)

Locations

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

The a and img tags require a URL to be specified in an attribute. Attributes 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.

jsfiddle

jsfiddle is a convenient online tool for experimenting with HTML and CSS.

External stylesheet

Place inside the <head> of your HTML document:


        <link rel="stylesheet" href="style.css">
    

Putting content and style in separate files is a good idea! Often, many HTML documents use the same CSS.

Markdown

The markdown language used to format notebook text cells is actually just a shorthand for writing certain HTML.

The Python package Markdown can be installed to get a markdown-to-HTML converter.

References

Revision history

  • 2022-04-04 Last year's lecture on this topic finalized
  • 2023-03-31 Updated for 2023