HTML5

class: title, smokescreen, shelf, no-footer
background-image: url(html5.jpg)

# HTML5
### September 2, 2019

---

# The Politics of Web Design

## [#reactgate](https://www.businessinsider.com/reactgate-react-facebook-code-of-conduct-twitter-2019-8) :

> React, a popular open source project that started at Facebook, is adopting a new code of conduct after several people on Twitter called out racism in the community

---
class: col-2 compact

# Review

## HTML
* A "markup" language for the **"content"** of a website 
* Conveys semantic meaning (relative importance/unimportance, type of content) 
* Should NOT contain design elements (e.g. using tables for layout)

## HTML5 Boilerplate
```html
<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
</head>

<body>
 Content of the document......
</body>

</html>
```

---
class: compact
# Anatomy of an HTML Element

### Element with Closing Tag

```html
<tag attribute="some_attribute">Content</tag>

<h1 class="huge">Why I'm Awesome</h1>

```

### Self-Closing Element

```html
<tag attribute="some_attribute">

<img src="images/cricket.jpg" alt="ekphratic description">

```

---
# Comments as Citation

![Credible Hulk](credible_hulk.jpg)

---

# A few good HTML5 Resources:

* https://www.quackit.com/html/tags/
* https://websitesetup.org/html5-cheat-sheet/

---
class: col-2

# <q>Nested</q> HTML

## Properly Nested

```html
<nav>
<ul>
<li>Menu1</li>
<li>Menu2</li>
</ul>
</nav>
```
 
## Improperly Nested

```html
<nav>
<ul>
<li>Menu1
<li>Menu2</li>
</li>
</nav> 
</ul>
```
---
# Best Practice: Indentation
[helps identify nesting issues; Brackets has a <q>Beautify<q> extension]

```html
<nav>
 <ul>
 <li>Menu1</li>
 <li>Menu2</li>
 </ul>
</nav>
```

---
class: compact

# Commonly Misunderstood HTML Elements

* **`` vs. ``** 
&lt;em&gt; is verbally emphatic whereas &lt;i&gt; is used for visual attention and/or use cases like bibliographic citation 
Olson, M. (2019). Demystifying Commonly Misunderstood HTML Elements. American Journal of Web Semantics, 27(2), 100-110.

* **`` vs. ``**

* &lt;strong&gt; is more strongly verbally emphatic than &lt;em&gt; 
 * &lt;b&gt; is used for visual attention, such as highlighting a keyword: 
 HTML5 is semantic, that is, the elements you choose convey meaning.

---
class: col-2 compact
# Content Models

### Prior to HTML5:

* Block (e.g. `<h1>`, ``, `<ul>`, `<img>`, `<div>`, etc.) 
* Inline (e.g. ``, ``, `<cite>`, ``, etc.)_

### HTML5:
[![HTML5 Content Model Venn Diagram](content-venn.png)](https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html)
---
class: compact
### HTML5 Content Model, cont'd

* **Metadata** - content in `<head>` for presentation of the document or its relation to other documents 
* **Flow** - most elements that are used in the `<body>` of the document 
* **Heading** - defines the header of a section (`<h1>...<h6>`, `<hgroup>`) 
* **Sectioning** - defines the scope of content blocks (`<nav>`, `<section>`, `<article>`, `<aside>`) 
* **Phrasing** - the text of the document &amp; elements that mark up that text at the intra-block level. (many: ``, `<cite>`, ``, etc.) 
* **Embedded** - imports another resource into the document (`<audio>`, `<canvas>` `<embed>`, `<iframe>`, `<video>`, etc.) 
* **Interactive** - content that is specifically intended for user interaction

---
class: img-left compact

# File Paths

![File Path Example](file_path.png)

### Path: index.html &rarr; darning.jpg

* **Full:** https://www.mysite.com/images/skills/darning.jpg

* **Root Relative:** /images/skills/darning.jpg

* **File relative:** images/skills/darning.jpg 
 &nbsp;&nbsp;&nbsp;&nbsp;-or- ./images/skills/darning.jpg

---
class: img-left compact

# File Paths

![File Path Example](file_path.png)

### Path: /skills/index.html &rarr; darning.jpg

* **Full:** https://www.mysite.com/images/skills/darning.jpg

* **Root Relative:** /images/skills/darning.jpg

* **File relative:** ../images/skills/darning.jpg

---
class:
## For Lab #1 this week:

* Complete Lab Assignment #1: `about-me.html` (Don't forget to [validate your code](https://validator.w3.org/)!) 
* Read the following:
 * **[W3schools.com "CSS Tutorial"](https://www.w3schools.com/css/css_intro.asp)** - from the **CSS Introduction** section _through and including_ the **CSS Fonts** section)
 * Rachel Andrew’s ["How to Learn CSS"](https://www.smashingmagazine.com/2019/01/how-to-learn-css/)