MCS 275 Spring 2024
Emily Dumas
Reminders and announcements:
Reminder: I think it's a really good idea to install the sqlite command line shell.
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.)
Basic syntax is
SELECTOR {
PROPERTY1: VALUE1;
PROPERTY2: VALUE2;
}
Elements that match the SELECTOR will have their styling changed by adjusting values of the given properties (things like color, font size, border).
CSS has a complex system of units for values like distances and sizes.
body {
font-family: "Verdana", sans-serif;
background: #C0C0C0;
}
p {
border: 1px solid #000000;
}
The body element of the document (hence everything) will use the font called "Verdana", or if that isn't available, some sans serif font.
The body will be displayed with a light gray background.
Each paragraph will be surrounded by a 1-pixel black border.
The color code
#789ABC
means
= 0x78 = 120 out of 255 = 0x9A = 154 out of 255 = 0xBC = 188 out of 255Google has a color picker that can be helpful.
There are lots, e.g.
color, background, font-family, font-size, width, height, border, margin, margin-top, margin-left, padding, padding-left, ...
You can embed a stylesheet (block of CSS) directly in HTML by placing it inside
<style> within <head>.
Or you can use the HTML <link> tag to specify the CSS can be found at another URL
(e.g. is in another file).
<link rel="stylesheet" href="mysite.css">
Like <style>, <link> should go in the header.
The latter approach makes stylesheets reusable.
An HTML element in a document can be given a unique identifier with the id attribute.
<p id="selector-intro">Let's talk about CSS selectors...</p>
If two elements have same id, your HTML is invalid.
You can link to an element within a document by id e.g.
We discuss <a href="#selector-intro">selectors</a> below.
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;
}
jsfiddle is a convenient online tool for experimenting with HTML and 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.