MCS 275 Spring 2021
David Dumas
Course bulletins:
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.
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.
<!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) |
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">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.