MCS 275 Spring 2023
Emily Dumas
Reminders and announcements:
Install the SQLite command line shell to prepare for this week's lab.
The lab will also involve using SQLite from within Python programs.
We're starting a unit on programming for the web, leading up to building web applications in Python.
Why?
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.
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.
<!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.
| p | paragraph |
| ul | unordered (bullet) list |
| ol | ordered (numbered) list |
| li | item in a list |
| strong | important text to be emphasized |
| 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) |
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">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.)
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 is a convenient online tool for experimenting with HTML and CSS.
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.
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.