Lecture 12: HTML & CSS
The backbone of the web.
HTML is a "markup language"
What that means is that HTML is a way to markup content with additional information. That information can be:
- Organization: tables, lists, paragraphs
- Semantics: section headers, form inputs, navigation
- Typography: size, bold, italic, color, typeface
Why are we learning HTML and CSS in a class about programming?
If you want to use a programming language to extract data from the web you'll need to know it.
If you want to create your own web applications or sites you'll need to know it.
- Dates from the early 90s—and has not changed all that much since then
- Was originally designed as a way to publish documents on the web
- It's killler feature was hypertext (i.e. text documents with links in them).
- Most of the focus was on words. Maybe images. Video, audio, and interactive elements were simply not possible.
The basic structure of an HTML document
<html>
<head>
[imports and metadata]
</head>
<body>
[the content of your page]
</body>
</html>
- <h1>, <h2>, <h3>...<h6> are all headers. Header text will be larger and go on its own line.
- <p> surrounds a paragraph to properly space it on a page
- <em> and <strong> will italicize and bold text, respectively.
- <span> is used to surround text that you want to modify the appearance of with CSS (we'll get to that later)
- <br> is for a line break. Putting html on a new line won't work.
Tables have the following structure:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td><td>Cell 4</td>
</tr>
</tbody>
</table>
| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Lists have the following structure:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
- First item
- Second item
- First item
- Second item
Links—called anchors in HTML—are the first html tag that we're going to use attributes for. Attributes are key-value pairs that occur inside the < >'s.
<a href="http://example.com">Some descriptive text</a>
In this case, the href attribute allows you to specify what the URL the link will connect to is.
Images
<img src="images/wonderful-sloth.gif">
Forms
<input type="text" placeholder="What's your name?">
<input type="checkbox">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit">Push me</button>
Grouping
<p>I am a paragraph.</p>
<div>I am a div.</div>
<section>I am a section.</section>
I am a paragraph.
I am a div.
I am a section.
Notice that tags like <div> don't really do anything to the the presentation.
- Tags like <div> have no semantic meaning
- Instead, they are often used as a kind of blank container which we can use to group HTML content
- These containers give us something to point to for styling content with CSS
- (More on CSS coming in the next class)
HTML Commments
<!-- Comment on a single line -->
<!--
Comments on
multiple lines
-->
Nothing here...
Inline vs. Block: Inline Elements
<p>Doge is a slang term for "dog"
that is primarily associated with pictures
of Shiba Inus. <img src="doge.jpg">
Photos may be photoshopped to change the
dog's face or captioned with interior
monologues in Comic Sans font.</p>
Doge is a slang term for "dog" that is primarily associated with pictures of Shiba Inus
Photos may be photoshopped to change the dog's face or captioned with interior monologues in Comic Sans font.
Inline vs. Block: Block Elements
<p>Doge is a slang term for "dog"
that is primarily associated with pictures
of Shiba Inus. <div><img src="doge.jpg"></div>
Photos may be photoshopped to change the
dog's face or captioned with interior
monologues in Comic Sans font.</p>
Doge is a slang term for "dog" that is primarily associated with pictures of Shiba Inus
Block elements take up the full width available on a page, effectively blocking out any other elements from sitting next to either side.
Inline elements only take up as much width as is required to display the contents of the element, thereby allowing other elements to be in-line with it.
Common block tags are <div>, <p>, <h1..6>, <ul>, <li>
Common Inline tags are <a>, <img>, <span>, <em>, <strong>
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>Here is a very small and simple document.</p>
<h2>Links I like:</h2>
<ul>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://amazon.com/">Amazon</a></li>
<li><a href="http://netflix.com">Netflix</a></li>
</ul>
</body>
</html>
Let's look at that page...
Default styling is pretty primitive.
We'll worry about that later.
Browsers will try really hard to make a valid tree.
Document Object Model (DOM)
- Browser parses HTML file
- Further resources are downloaded
- Construct a tree representation of the document
- The layout engine draws the objects on screen
- Any user-supplied styling is applied
The DOM is also an interface for manipulating the HTML programatically via JavaScript, which lets us
- Create and insert new nodes into the tree
- Remove nodes from the tree
- Change the text content and attributes of nodes
- Attach listeners to nodes that do something on user interaction