Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2019

# Session 02 - Markup (HTML)

Harvard Extension School
Spring 2019

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu

### Topics

1. Markup Recap
2. Common HTML5 Elements - Skeleton
3. Common HTML5 Elements - Grouping Content
4. Lists - ul and li
5. Common HTML5 Elements - a element - anchor
6. Relative and Fully-qualified URLs
7. Common HTML5 Elements - Text Level Semantics
8. Common HTML5 Elements - Embedded content

slide1 slide2 slide3 slide4 slide5 slide6 slide7 slide8 slide9 slide10 slide11 slide12 slide13 slide14 slide15 slide16 slide17 slide18 slide19 slide20 slide21 slide22 slide23 slide24 slide25 slide26

- img
- img
- img
- img
- img

## Markup Recap

- Structure / Markup (HTML, XHTML)
  - Structure
  - Content
- Style / Presentation (CSS)
  - Style
  - Presentation
  - Appearance
- Function (Javascript)
  - Actions
  - Manipulations

## Markup + CSS + JavaScript

solarsystem-markup.html

solarsystem-style.html

solarsystem.html

Files:

- solarsystem.css
- jquery-1.4.2.min.js
- jquery.mousewheel-3.0.2.pack.js
- jquery.fancybox-1.3.1.js
- jquery.fancybox-1.3.1.css
- fancybox.png
- fancybox-x.png
- fancybox-y.png
- blank.gif

## Components of HTML Elements

Markup for a Hypertext link:

    <a href="http://www.harvard.edu/">Harvard</a>

How it would render in a web browser:

Start Tag
`<a href="http://www.harvard.edu/">Harvard</a>`

Element Name
`<a href="http://www.harvard.edu/">Harvard</a>`

Attribute
`<a href="http://www.harvard.edu/">Harvard</a>`

Attribute Value
`<a href="http://www.harvard.edu/">Harvard</a>`

Content
`<a href="http://www.harvard.edu/">Harvard</a>`

End Tag
`<a href="http://www.harvard.edu/">Harvard</a>`

## Markup - HTML

### The Code

- My Schools

    <!DOCTYPE html>
    <html>
      <head>
        <title>My Schools</title>
      </head>
      <body>
        <h1>My Schools</h1>
        <ul>
          <li>
            <a href="http://www.harvard.edu/">Harvard University</a><br/>
            <img src="images/veritas.gif" alt="Harvard Shield" />
          </li>
          <li>
            <a href="http://www.ku.edu/">University of Kansas</a><br/>
            <img src="images/KUSeal.gif" alt="University of Kansas Seal" />
          </li>
        </ul>
      </body>
    </html>

### How a Browser Displays It

### How Your Browser Thinks About It

## HTML5

118 elements defined in HTML5

More information: HTML5 Living Standard from the WHATWG. Section 4 contains the List of elements in HTML.

- The root element
  - `html`
- Document metadata
  - `head`
  - `title`
  - `base`
  - `link`
  - `meta`
- Style
  - `style`
- Sections
  - `body`
  - `article`
  - `section`
  - `nav`
  - `aside`
  - `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
  - `hgroup`
  - `header`
  - `footer`
  - `address`
- Grouping content
  - `p`
  - `hr`
  - `pre`
  - `blockquote`
  - `ol`
  - `ul`
  - `li`
  - `dl`
  - `dt`
  - `dd`
  - `figure`
  - `figcaption`
  - `main`
  - `div`
- Text-level semantics
  - `a`
  - `em`
  - `strong`
  - `small`
  - `s`
  - `cite`
  - `q`
  - `dfn`
  - `abbr`
  - `ruby`
  - `rt`
  - `rp`
  - `data`
  - `time`
  - `code`
  - `var`
  - `samp`
  - `kbd`
  - `sub`
  - `sup`
  - `i`
  - `b`
  - `u`
  - `mark`
  - `bdi`
  - `bdo`
  - `span`
  - `br`
  - `wbr`
- Edits
  - `ins`
  - `del`
- Embedded content
  - `picture`
  - `source`
  - `img`
  - `iframe`
  - `embed`
  - `object`
  - `param`
  - `video`
  - `audio`
  - `source`
  - `track`
  - `map`
  - `area`
- Tabular data
  - `table`
  - `caption`
  - `colgroup`
  - `col`
  - `tbody`
  - `thead`
  - `tfoot`
  - `tr`
  - `td`
  - `th`
- Forms
  - `form`
  - `label`
  - `input`
  - `button`
  - `select`
  - `datalist`
  - `optgroup`
  - `option`
  - `textarea`
  - `keygen`
  - `output`
  - `progress`
  - `meter`
  - `fieldset`
  - `legend`
- Interactive elements
  - `details`
  - `summary`
  - `menu`
  - `menuitem`
  - `dialog`
- Scripting
  - `script`
  - `noscript`
  - `template`
  - `canvas`

## Common HTML5 Elements - Skeleton

`html`, `head`, `meta`, `title`, `link`, and `body`

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Document Title</title>
        <link rel="stylesheet" href="css/screen.css" type="text/css" />
      </head>
      <body>
        <!-- content goes here -->
      </body>
    </html>

## Common HTML5 Elements - Grouping Content

- Paragraphs - `p`
- Divisions - `div`
- Lists
  - `ul`
  - `li`

## p and div elements

### p element

The `p` element is used to group paragraphs.

Example 2.1 - p element - Example 2.1 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p><p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.</p>

- Markup
- Display

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p>
    <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>
    <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.

Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.

Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.

### div element - division

The `div` element is to group block-level content, and is typically used to define parts of the page so that CSS rules can be applied specifically to those parts.

Example 2.2 - div element - Example 2.2 (Without Styles) | <div class="part1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</div><div class="part2">Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</div><div class="part3">Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.</div>div.part1 {padding: 2em; color: white; background-color: green;} div.part2 { color: purple; padding: 2em; border: medium solid purple;} div.part3 { background-color: orange; padding: 1em; font-size: smaller;}

- Markup
- Style
- Display

    <div class="part1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</div><div class="part2">Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</div><div class="part3">Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.</div>

In `style` element (`<style type="text/css">`) within `head` element:

    div.part1 {padding: 2em; color: white; background-color: green;}
    div.part2 { color: purple; padding: 2em; border: medium solid purple;}
    div.part3 { background-color: orange; padding: 1em; font-size: smaller;}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.
Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.
Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.

## Harvard Extension School Homepage and div elements

## Lists - ul and li

Lists are very useful, both for:

- Content
- Navigation

There are three types of lists:

- Unordered (most common)
  `ul` and `li`
- Ordered
  `ol` and `li`
- Dictionary (rare)
  `dl`, `dt`, and `dd`

Links to the HTML5 documentation for these elements:
ul , li , ol , dl , dt , dd

Example 2.3 - Unordered List - Example 2.3 | <ul><li>Tea</li><li>Bread</li><li>Cheese</li><li>Chips</li><li>Ice Cream</li></ul>

- Markup
- Display

    <ul>
    <li>Tea</li>
    <li>Bread</li>
    <li>Cheese</li>
    <li>Chips</li>
    <li>Ice Cream</li>
    </ul>

- Tea
- Bread
- Cheese
- Chips
- Ice Cream

Example 2.4 - Nested Unordered List - Example 2.4 | <ul><li>Tea <ul><li>Kenyan</li><li>Sikkim</li><li>Ceylon</li><li>Assam</li><li>Oolong</li></ul></li><li>Potato Chips <ul><li>Dirty's</li><li>Art's and Mary's</li><li>Tim's Cascade</li><li>Cape Cod</li></ul></li></ul>

- Markup
- Display

    <ul>
    <li>Tea<ul>
    <li>Kenyan</li>
    <li>Sikkim</li>
    <li>Ceylon</li>
    <li>Assam</li>
    <li>Oolong</li>
    </ul></li>
    <li>Potato Chips<ul>
    <li>Dirty's</li>
    <li>Art's and Mary's</li>
    <li>Tim's Cascade</li>
    <li>Cape Cod</li>
    </ul></li>
    </ul>

- Tea
  - Kenyan
  - Sikkim
  - Ceylon
  - Assam
  - Oolong
- Potato Chips
  - Dirty's
  - Art's and Mary's
  - Tim's Cascade
  - Cape Cod

Example 2.5 - Ordered List - Example 2.5 | <ol><li>Boil water</li><li>Measure tea (approximately 1 tsp. per 6 oz. cup)</li><li>Steep tea for 3 to 5 minutes</li><li>Enjoy!</li></ol>

- Markup
- Display

    <ol>
    <li>Boil water</li>
    <li>Measure tea (approximately 1 tsp. per 6 oz. cup)</li>
    <li>Steep tea for 3 to 5 minutes</li>
    <li>Enjoy!</li>
    </ol>

1. Boil water
2. Measure tea (approximately 1 tsp. per 6 oz. cup)
3. Steep tea for 3 to 5 minutes
4. Enjoy!

Example 2.6 - Dictionary Lists (terms and definitions) - Example 2.6 | <dl><dt>bread</dt><dd>a usually baked and leavened food made of a mixture whose basic constituent is flour or meal</dd><dt>butter</dt><dd>a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food </dd></dl>

- Markup
- Display

    <dl>
    <dt>bread</dt>
    <dd>a usually baked and leavened food made of a mixture whose basic constituent is flour or meal</dd>
    <dt>butter</dt>
    <dd>a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food</dd>
    </dl>

bread
  a usually baked and leavened food made of a mixture whose basic constituent is flour or meal
butter
  a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food

## Nested Lists - li is a child of ul!

Keep in mind that the only allowed child of a `ul` element is an `li` element. So in a nested list, the nested `ul` needs to contained within the `li`:

Correct | Incorrect ul must be within li
--- | ---
Example in Gist View Example Validate Example
    <ul>
    <li>Tea
        <ul>
            <li>Kenyan</li>
            <li>Sikkim</li>
            <li>Ceylon</li>
            <li>Assam</li>
            <li>Oolong</li>
        </ul>
    </li>
    <li>Potato Chips
        <ul>
            <li>Dirty&apos;s</li>
            <li>Art&apos;s and Mary&apos;s</li>
            <li>Tim&apos;s Cascade</li>
            <li>Cape Cod</li>
        </ul>
    </li>
    </ul>
| Example in Gist View Example Validate Example
    <ul>
    <li>Tea</li>
        <ul>
            <li>Kenyan</li>
            <li>Sikkim</li>
            <li>Ceylon</li>
            <li>Assam</li>
            <li>Oolong</li>
        </ul>

    <li>Potato Chips</li>
        <ul>
            <li>Dirty&apos;s</li>
            <li>Art&apos;s and Mary&apos;s</li>
            <li>Tim&apos;s Cascade</li>
            <li>Cape Cod</li>
        </ul>
    </ul>

Sometimes this is confusing, since in the "HTML" form of HTML5, the end tags are options for `li`, so while it may appear that you can have a `ul` as a child of `ul`, you really can't -- there's an implied end-tag there.

Correct HTML serialization | Correct XML serialization
--- | ---
Example in Gist View Example Validate Example
    <ul>
    <li>Tea
        <ul>
            <li>Kenyan
            <li>Sikkim
            <li>Ceylon
            <li>Assam
            <li>Oolong
        </ul>

    <li>Potato Chips
        <ul>
            <li>Dirty&apos;s
            <li>Art&apos;s and Mary&apos;s
            <li>Tim&apos;s Cascade
            <li>Cape Cod
        </ul>

    </ul>
| Example in Gist View Example Validate Example
    <ul>
    <li>Tea
        <ul>
            <li>Kenyan</li>
            <li>Sikkim</li>
            <li>Ceylon</li>
            <li>Assam</li>
            <li>Oolong</li>
        </ul>
    </li>
    <li>Potato Chips
        <ul>
            <li>Dirty&apos;s</li>
            <li>Art&apos;s and Mary&apos;s</li>
            <li>Tim&apos;s Cascade</li>
            <li>Cape Cod</li>
        </ul>
    </li>
    </ul>

## Lists in Action

Harvard Homepage - lists are outlined in magenta and list items in green. Note that some lists are "horizontal" and some are "vertical" -- exactly how a list is rendered can be controlled by CSS

Top:

Footer:

## Sections - Headings

Any single heading element wasn't technically only our "top" list, but collectively (h1,h2,h3,h4,h5,h6), these are important!

Example in Gist Example in bl.ocks View Example Example in JSFiddle

    <h1>Primary Heading (1st)</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    <h2>Secondary Heading (2nd)</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    <h3>Tertiary Heading (3rd)</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    <h4>Quarternary Heading (4th)</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    <h5>Quinary Heading (5th level)</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    <h6>Senary Heading (6th level)</h6>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

## Headings and Lists In Action

Heading elements (h1,h2,etc.) and lists (ul,li) combined with CSS are very powerful. Headings can remain headings in markup and CSS can style them as desired. Lists can remain lists in markup (navigation, content items, etc.) and CSS can style them as desired.

## Common HTML5 Elements - a element - anchor

The anchor — `a` — element is at the center of the key "hypertext" feature of the web. The `a` element is how to create hyperlinks from resource to another!
HTML 5 Specification: the `a` element.

To go along with the `a` element is the `href` attribute. The value of the `href` attribute is the URL that the browser will load when the link is activated (e.g. a mouse click).

The following paragraph was taken from "'Sunshine vitamin' looks a little brighter", HarvardScience, February 5, 2013:

Code:

    <p>Adequate levels of
    <a href="http://www.mayoclinic.com/health/vitamin-d/NS_patient-vitamind">vitamin D</a>
    during young adulthood may reduce the risk of adult-onset
    <a href="http://www.diabetes.org/diabetes-basics/type-1/">type 1 diabetes</a>
    by as much as 50 percent, according to researchers at the
    <a href="http://www.hsph.harvard.edu/">Harvard School of Public Health</a>
    (HSPH). If confirmed in future studies, the findings could lead to a role for vitamin D
    supplementation in preventing this serious autoimmune disease in adults.</p>

Rendered:

Adequate levels of vitamin D during young adulthood may reduce the risk of adult-onset type 1 diabetes by as much as 50 percent, according to researchers at the Harvard School of Public Health (HSPH). If confirmed in future studies, the findings could lead to a role for vitamin D supplementation in preventing this serious autoimmune disease in adults.

## Creating Links

Build confidence by making your links predictable and differentiable.

- Predictable
  - Am I getting 'closer' to my goal?
- Differentiable
  - What is the difference between clicking here or clicking there?

- Do
  - Be descriptive
    - Link several words or a phrase, not just one or two words
    - Use "title" attribute to elaborate
- Do Not
  - Lie
  - "Click Here"

## Use "title" attribute

Title attribute can add information so that the link is more predictable and able to be differentiated from others.

    <p>Adequate levels of
    <a href="http://www.mayoclinic.com/health/vitamin-d/NS_patient-vitamind"
    title="More information from the Mayo Clinic about vitamin D">vitamin D</a>
    during young adulthood may reduce the risk of adult-onset
    <a href="http://www.diabetes.org/diabetes-basics/type-1/"
    title="More information from the American Diabetes Association about type 1 diabetes">type 1 diabetes</a>
    by as much as 50 percent, according to researchers at the
    <a href="http://www.hsph.harvard.edu/"
    title="Harvard T.H. Chan School of Public Health brings together dedicated experts from many disciplines to educate new generations of global health leaders and produce powerful ideas that improve the lives and health of people everywhere." >Harvard School of Public Health</a>
    (HSPH). If confirmed in future studies, the findings could lead to a role for vitamin D
    supplementation in preventing this serious autoimmune disease in adults.</p>

### Rendered

Adequate levels of vitamin D during young adulthood may reduce the risk of adult-onset type 1 diabetes by as much as 50 percent, according to researchers at the Harvard School of Public Health (HSPH). If confirmed in future studies, the findings could lead to a role for vitamin D supplementation in preventing this serious autoimmune disease in adults.

## Relative and Fully-qualified URLs

URLs come in two forms:

- Fully Qualified URLs
  These URLs start with the "scheme" — `http` or `https`. Fully-qualified URLs express the complete information needed to locate the resource.
- Relative URLs
  Relative URLs express some part of the information needed to locate the resource -- the "missing" information is derived from the URL location of the resource which contains the link. These URLs are "relative" to the location of the containing resource.

### Recap on Web Addresses - URLs

- URL/URI
  `http://www.whitehouse.gov/1600/constitution`
- Scheme
  `http://www.whitehouse.gov/1600/constitution`
- Host
  `http://www.whitehouse.gov/1600/constitution`
- Path
  `http://www.whitehouse.gov/1600/constitution`

### Relative URLs

Relative location of a conference room:

- "The conference room is on the second floor, the first door to the right of the reception area."
  These direction can be resolved based on the current location of the building.

In the case of relative URLs, the information not expressed in the relative URL is derived from the current URL location.

## Resolving Relative Links

In the case of relative URLs, the information not expressed in the relative URL is derived from the current URL location.

### Resolving Relative Links 1

Simple relative link.

Current Location:
http://www.acme.com/products/road_runner_traps/model_a.html

That contains the link:
model_b.html

Resolves to:
http://www.acme.com/products/road_runner_traps/model_b.html

### Resolving Relative Links 2

Relative link that uses "../" to "move up" the the URL path of the current URL.

Current Location:
http://www.acme.com/products/road_runner_traps/model_a.html

That contains the link:
../images/model_a.png
Note that the `..` is a way to "move up" the URL path (the URL path is divided by `/`).

Resolves to:
http://www.acme.com/products/images/model_a.png

### Resolving Relative Links 3

Relative URL that uses scheme and host from of the currrent URL.

Current Location:
http://www.acme.com/products/road_runner_traps/model_a.html

That contains the link:
/css/screen.css
Note that the `/` at the beginning of the relative URL means that we start from host and scheme provided by the current location -- the relative URL is proving the complete path.

Resolves to:
http://www.acme.com/css/screen.css

## Recommendation: Use Relative Links within a Site

There are advantages to using relative links to those resources within a site.

Obviously, links that are outside of the site need to be fully qualified.

A site will often have multiple versions -- you might develop the site locally, a testing site, a staging site, and a production site (sometimes not all of these will exist, but certainly more than one environment will exist for a site).

Using relative links within a site will let you move your web work from your local development site to the next level, and all the links will still point to the correct places!

Relative links will keep your site "self-contained" and easily transportable to different environments -- for example, when you move from

- `acme.localhost` to
- `dev.acme.com` to
- `test.acme.com` to
- `stage.acme.com` to
- `www.acme.com`

## Common HTML5 Elements - Text Level Semantics

- `a`
- `span`
- `br`

## span element

The `span` element is a cousin to the `div` element -- in that it is used primarily for styling purposes, except that it is geared towards "inline" content.

Example 2.7 - span element - Example 2.7 (Without Styles) | <div class="citation"><span class="author">Berners‐Lee, Tim</span>. <span class="title">We Need a Magna Carta for the Internet</span><span class="journal">New Perspectives Quarterly</span> 31.3 (2014): 39-41. Web.<br/><a href="https://harvard.instructure.com/courses/8246/files/folder/readings?preview=1564950" title="We Need a Magna Carta for the Internet by Tim Berners-Lee">View PDF</a></div>.citation .journal { font-style: italic; } .citation span.title::before { content: '"';} .citation span.title::after { content: '." ';}

- Markup
- Style
- Display

    <div class="citation"><span class="author">Berners‐Lee, Tim</span>.<span class="title">We Need a Magna Carta for the Internet</span><span class="journal">New Perspectives Quarterly</span>31.3 (2014): 39-41. Web.<br/><a href="https://harvard.instructure.com/courses/8246/files/folder/readings?preview=1564950" title="We Need a Magna Carta for the Internet by Tim Berners-Lee">View PDF</a></div>

In `style` element (`<style type="text/css">`) within `head` element:

    .citation .journal { font-style: italic; }
    .citation span.title::before { content: '"';}
    .citation span.title::after { content: '." ';}

Berners‐Lee, Tim. We Need a Magna Carta for the Internet New Perspectives Quarterly 31.3 (2014): 39-41. Web.
View PDF

See: Inline elements and Block elements from MDN (Mozilla Developer Network)

## Line Breaks and white space characters (br element)

Since "white space" characters are ignored in rendering HTML, the `br` element is used for explicit line breaks.

Examples below are from the first part of Paul Revere's Ride by Henry Wadsworth Longfellow

Example 2.8 - Using br for line breaks - Example 2.8 | Example 2.8 JSFiddle Example 2.8 Gist Example 2.8 bl.ocks

- Markup
- Display
- Screenshot

    <p style="background-color: #ffc">Using br for line breaks:</p>
    <p>Listen, my children, and you shall hear<br/>Of the midnight ride of Paul Revere,<br/>On the eighteenth of April, in Seventy-Five:<br/>Hardly a man is now alive<br/>Who remembers that famous day and year.</p>
    <p style="background-color: #ffc">Line breaks and spaces in HTML code don't render...(exception below):</p>
    <p>Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year.</p>
    <p style="background-color: #ffc">...except in the "pre" (preformatted) element:</p>
    <pre>Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year.</pre>

Using br for line breaks:

Listen, my children, and you shall hear
Of the midnight ride of Paul Revere,
On the eighteenth of April, in Seventy-Five:
Hardly a man is now alive
Who remembers that famous day and year.

Line breaks and spaces in HTML code don't render...(exception below):

Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year.

...except in the "pre" (preformatted) element:

    Listen, my children, and you shall hear
        Of the midnight ride of Paul Revere,
    On the eighteenth of April, in Seventy-Five:
        Hardly a man is now alive
    Who remembers that famous day and year.

You can use a non-breaking space (&#160; or &nbsp; character entities) for spaces that won't be collapsed:

    <p style="background-color: #ffc">You can use a non-breaking space (&amp;#160; or &amp;nbsp; character entities):</p>
    <p>
    Listen, my children, and you shall hear<br/>
    &#160;&#160;&#160;Of the midnight ride of Paul Revere,<br/>
    On the eighteenth of April, in Seventy-Five:<br/>
    &#160;&#160;&#160;Hardly a man is now alive<br/>
    Who remembers that famous day and year.
    </p>

## Common HTML5 Elements - Embedded content

- `img` element
- Key attributes
  - `src`
  - `alt`

### img element

HTML documents do not contain the images themselves, but merely contain references to the images to be displayed. Common image file types are:

- GIF, Graphics Interchange Format, ".gif"
- JPEG, Joint Photographic Experts Group, ".jpg", ".jpeg"
- PNG, Portable Network Graphics, ".png"

Example 2.9 - img element - Example 2.9 | <img src="http://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/>

- Markup
- Display

    <img src="http://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/>

Example 2.10 - 'img' element with an anchor - Example 2.10 | <a href="http://extension.harvard.edu/"><img src="http://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/></a>

- Markup
- Display

    <a href="http://extension.harvard.edu/"><img src="http://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/></a>

## Accessibility Principle: Provide text alternatives for non-text content.

The `alt` attribute is used to specify a short text alternative when using the `img` element.

Accessibility essentials:

- W3C Web Accessibility Initiative
  The Web Accessibility Initiative (WAI) develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities.
- Accessibility - W3C
  The first place to start for a short introduction to Web accessibility.
- Web Content Accessibility Guidelines (WCAG) 2.0 at a Glance
  This is a summary of the WCAG 2.0 technical specification.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Copyright © David Heitmeyer