MCS 275 Spring 2024
Emily Dumas
Reminders and announcements:
python3 -m pip install FlaskCreate the rough design for a web application we'll write in Python in the next few lectures.
Continue study of HTML and CSS by making some mockups of the user interfaces.
I will prioritize making a working example that uses things we've discussed in the course.
That will mean skipping some natural features (e.g. authentication).
We will also avoid some things for time reasons (JS) or because they would hide the use of course material (e.g. SQLAlchemy).
Recall we made a terminal-based task list application in lecture 28.
It was based on this model:
Idea: A web-based task list application based on the following model.
We won't build any user account system (login/logout).
Instead, we'll just make the username part of the URL you use to access each part of the application.
Putting "ddumas" in the correct part of the URL takes the place of logging in as ddumas.
App name?
Let's make some HTML+CSS documents that look like the applications we're planning to build.
Later, we'll use these as the starting point for the HTML the app will generate.
Recall: A language that styles HTML. 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.
You can create classes (categories) for elements in a HTML document. Mainly used so items in a category (e.g. important, outdated, footnote) can be styled differently (e.g. red, faded, small text).
Specify the category of an element using the class attribute.
<p class="urgent-warning">Rabid squirrels on the loose!</p>
No need to declare classes in advance, nor to refer to every class in your CSS.
Apply class- or id-specific styles in CSS:
/* Text in paragraphs is orange */
p { color: #FFA500; }
/* Paragraphs of class "urgent-warning" have big, red
text. This overrides the previous line, as the more
specific selector gets precedence. */
p.urgent-warning { color: #FF0000; font-size: 120%; }
/* The paragraph with id "selector-intro" is bold */
p#selector-intro { font-weight: bold; }
div ul {
/* style for any ul that has
a div ancestor */
}
div > ul {
/* style for any ul that has
a div as its parent */
}
ul ul {
/* style for ul inside another ul */
}
first-child, only-child, selection by adjacency, values of attributes, ...
python3 -m http.serverOpens a web server that serves files in the current directory and its subdirectories.
Visit http://localhost:8000/ in a browser (or substitute other port number shown in
startup message) to see index.html.
Firewall rules typically prevent incoming connections from the internet (and maybe the local network too). That's good! Or
python3 -m http.server --bind 127.0.0.1will make sure it only listens for connections from the same machine.