Session 02 - Markup (HTML)

Harvard Extension School  
Spring 2022

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

Topics

  1. File and Folder Management
  2. URLs
  3. HTML, CSS, JavaScript
  4. HTML Introduction
  5. Essential HTML5 Document Structure
  6. Markup Evolution and Standards
  7. HTML and XML Syntax for HTML5 — What's the Difference?
  8. HTML5
  9. Wait a minute — head and header?
  10. Common HTML5 Elements - Grouping Content
  11. Lists - ul and li
  12. Common HTML5 Elements - a element - anchor
  13. Common HTML5 Elements - Text Level Semantics
  14. Entities - what's this &name-or-number;?
  15. Common HTML5 Elements - Embedded content
  16. WAVE - Accessibility Evaluation Tool
  17. Section-level elements
  18. Workflow
  19. Version Control
  20. <meta charset="utf-8">

Session 02 - Markup (HTML), slide1
File and Folder Management, slide2
File and Folder Structure for Web Sites, slide3
URLs, slide4
HTML, CSS, JavaScript, slide5
Markup (HTML) + Styles (CSS) + Scripts (JavaScript), slide6
HTML Introduction, slide7
Markup - HTML, slide8
Essential HTML5 Document Structure, slide9
HTML Elements - the basic building blocks structure, slide10
HTML Elements - the basic building block structure, slide11
HTML Elements - Content can be other HTML elements, slide12
HTML Elements - Sometimes you will have more than one attribute, slide13
HTML Elements - Sometimes elements have no content; they are "empty", slide14
HTML Elements - Sometimes HTML allows you to leave off end tags, slide15
Markup Evolution and Standards, slide16
Benefits of Web Standards, slide17
HTML and XML Syntax for HTML5 — What's the Difference?, slide18
A Tale of Two Documents, slide19
HTML Elements - the basic building block structure, slide20
HTML Elements - Content can be other HTML elements, slide21
HTML5, slide22
Most commonly used or seen elements, slide23
Page Structure - header, main, footer, slide24
An improved HTML5 document template, slide25
HTML5 Elements - Page Structure, slide26
Wait a minute — head and header?, slide27
Common HTML5 Elements - Grouping Content, slide28
article and section and div, slide29
p and div elements, slide30
Harvard Extension School Homepage and div elements, slide31
Lists - ul and li, slide32
Nested Lists - li is a child of ul!, slide33
Lists in Action, slide34
Sections - Headings, slide35
Headings and Lists In Action, slide36
Common HTML5 Elements - a element - anchor, slide37
Creating Links, slide38
Common HTML5 Elements - Text Level Semantics, slide39
span element, slide40
Line Breaks and white space characters (br element), slide41
Entities - what's this &name-or-number;?, slide42
Common HTML5 Elements - Embedded content, slide43
Accessibility Principle: Provide text alternatives for non-text content., slide44
WAVE - Accessibility Evaluation Tool, slide45
Section-level elements, slide46
Parts of a Page, slide47
Workflow, slide48
Version Control, slide49
<meta charset="utf-8">, slide50
Character Sets and Encoding, slide51
Unicode, slide52

Presentation contains 52 slides

File and Folder Management

For Your Class Work

File and Folder Structure for Web Sites

URLs

URL components - scheme, host, and path

URL
https://www.archives.gov/historical-docs/voting-rights-act

HTML, CSS, JavaScript

web parts

Markup (HTML) + Styles (CSS) + Scripts (JavaScript)

solarsystem-markup.html
markup

solarsystem-style.html
markup + style

solarsystem.html
markup + style + function

HTML Introduction

HTML5

Markup - HTML

The Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Schools</title>
  </head>
  <body>
    <h1>My Schools</h1>
    <ul>
      <li>
        <a href="https://www.harvard.edu/">Harvard University</a><br/>
        <img src="images/harvard-shield.png" alt="Harvard Shield" />
      </li>
      <li>
        <a href="https://www.ku.edu/">University of Kansas</a><br/>
        <img src="images/kansas-jayhawk.png" alt="University of Kansas Jayhawk" />
      </li>
    </ul>
  </body>
</html>

How a Browser Displays It

web page

How Your Browser Thinks About It

dom tree

Essential HTML5 Document Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
  </head>
  <body>
    <!-- content goes here -->
  </body>
</html>

html5 skeleton nodes


HTML Elements - the basic building blocks structure

A Hypertext Link

Markup for a Hypertext link:

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

How it would render in a web browser:
Harvard Link in a web browser


element anatomy


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

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

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

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

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

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

HTML Elements - the basic building block structure

<a href="https://extension.harvard.edu/">Harvard Extension School</a>

HTML Elements - Content can be other HTML elements

<ul>
            <li>Tea</li>
            <li>Coffee</li><li>Water</li>
          </ul>

ul and li nodes

HTML Elements - Sometimes you will have more than one attribute

<img src="images/kitten.jpg" alt="Cute kitten playing wih a ball of yarn" />

img node with two attributes

HTML Elements - Sometimes elements have no content; they are "empty"

Note the "end tag" is part of the "start tag" -- <link />


              <link rel="stylesheet" href="styles/site.css" />

img node with two attributes

HTML Elements - Sometimes HTML allows you to leave off end tags


  <ul>
  <li>Tea
  <li>Coffee
    <li>Water
</ul>

or


              <link rel="stylesheet" href="styles/site.css" >

In these cases the "end tags" are "implied" because of what follows.

Learning tip: Always use end tags!

Markup Evolution and Standards

Main points:

markup evolution

Markup Standards

Benefits of Web Standards

"Be liberal in what you accept, and
conservative in what you send"

"Postel's Law" or the "Robustness Principle"

Standards

Benefits:

HTML and XML Syntax for HTML5 — What's the Difference?

Main differences between HTML and XML syntax:

 HTMLXML
1.End tags can be "implied"
Closing elements that have implied end tags

<img src="images/drink.jpg" alt="Lake" >

<ul>
    <li>coffee
    <li>tea
    <li>water
</ul>

End tags always required
(even for "empty" elements)

<img src="images/drink.jpg" alt="Lake" />

<ul>
    <li>coffee</li>
    <li>tea</li>
    <li>water</li>
</ul>

2.Start tags can be "implied"
<!DOCTYPE html>
<head>
<title>My Document</title>
<body>
<h1>My Document</h1>
Start tags always required
<!DOCTYPE html>
<html>
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>My Document</h1>
  </body>
</html>
3.Element and attribute names are not case-sensitive

<IMG SrC="images/lake.jpg" aLT="Lake" >

Element and attribute names are case-sensitive

<img src="images/lake.jpg" alt="Lake" />

4.Attribute values do not need to be in quotes if the values contain alpha-numeric characters only

<img src=images/lake.jpg alt=Lake >

Attribute values must always be in quotes
 

<img src="images/lake.jpg" alt="Lake" />

Best Practices for Starting Out

A Tale of Two Documents

XML Syntax ← DO THIS!

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Document</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>My Document</h1>
    <ul>
        <li>coffee</li>
        <li>tea</li>
    </ul>
    <img src="images/mug.jpg" alt="mug" />
</body>
</html>

SGML/HTML Syntax (Not Preferred)

<!DOCTYPE html>
<HEAD>
    <TITLE>My Document</TITLE>
    <META CHARSET=utf-8 >
<BODY>
    <H1>My Document</H1>
    <UL>
        <LI>coffee
        <LI>tea
    </UL>
    <IMG SRC=images/mug.jpg ALT=Mug >

Cleaner version of SGML/HTML Syntax

Again, XML syntax is preferred!

Of course, you can use the SGML/HTML syntax and write HTML that looks better. Just because the syntax allows you shorten things and leave out things, doesn't mean you have to.
Like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Document</title>
    <meta charset="utf-8" >
</head>
<body>
    <h1>My Document</h1>
    <ul>
        <li>coffee
        <li>tea
    </ul>
    <img src="images/mug.jpg" alt="Mug" >
</body>
</html>

HTML Elements - the basic building block structure

<a href="https://extension.harvard.edu/">Harvard Extension School</a>

HTML Elements - Content can be other HTML elements

<ul>
            <li>Tea</li>
            <li>Coffee</li><li>Water</li>
          </ul>

ul and li nodes

HTML5

116 elements defined in HTML5 HTML5 Logo

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

I've highlighted the 24 elements that you will use and/or see most commonly.

Most commonly used or seen elements

HTML5 Logo Start with these 24 — these are elements you will use in most of your web pages, or that you'll find in a majority of web pages.

Learning about HTML elements

How to find out more about them? Two places that I would start are:

Page Structure - header, main, footer

First, recall the basic document structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
  </head>
  <body>
    <!-- content goes here -->
  </body>
</html>

header, main, footer

MDN HTML elements reference: header, main, footer.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
  </head>
  <body>
    <header> <!-- page header --> </header>
    <main> <!-- main content goes here --> </main>
    <footer> <!-- page footer --> </footer>
  </body>
</html>

An improved HTML5 document template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
  </head>
  <body>
    <header> <!-- page header --> </header>
    <main> <!-- main content goes here --> </main>
    <footer> <!-- page footer --> </footer>
  </body>
</html>

HTML5 Elements - Page Structure

header, main, footer, nav

Wait a minute — head and header?

Yes, there are "head" and "header" elements.

They are different!

head
Used in all HTML documents as part of the essential HTML document structure. head contains information for your browser about the web page. Not for human consumption!
header
Used to group or define introductory portion of a web page, which is often consistent throughout the site. Header typically contains visual site title, navigation, etc. For web page content, think header, main, footer!

header, main, footer

Common HTML5 Elements - Grouping Content

article and section and div

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>

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

 <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>) within head element:

div.part1 {margin: 1.5em; padding: 2em; color: white; background-color: green;}
div.part2 { color: purple; margin: 1em; padding: 2em; border: medium solid purple;}
div.part3 { background-color: orange; margin: 0.5em; 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

Harvard div

Lists - ul and li

Lists are very useful, both for:

There are three types of lists:

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>
  • Tea
  • Bread
  • Cheese
  • Chips
  • Ice Cream
 
Example 2.4 - Nested Unordered List - Example 2.4

 <ul>
   <li>Tea
     <ul>
       <li>Kenya
       </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
    • Kenya
    • 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>
  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 - Description Lists (terms and definitions or details) - 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>
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:

CorrectIncorrect
ul must be within li

Example in GistView ExampleValidate 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 GistView ExampleValidate 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 serializationCorrect XML serialization

Example in GistView ExampleValidate 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 GistView ExampleValidate 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:
harvard home page with lists and list items highlighted

Footer:
harvard home page with lists and list items highlighted

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 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.

DCE Home 2013 Annotated

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!

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", Harvard Gazette, 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.

scent

Common HTML5 Elements - Text Level Semantics

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

 <div class="citation">
   <span class="author">Berners‐Lee, Tim   </span>.
   <span class="title">
     <a href="https://canvas.harvard.edu/courses/95649/files?preview=12898083">We Need a Magna Carta for the Internet     </a>   </span>
   <span class="journal">New Perspectives Quarterly   </span>31.3 (2014): 39-41. Web.
 </div>

In style element (<style>) 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 InternetNew Perspectives Quarterly 31.3 (2014): 39-41. Web.
 

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 GistExample 2.8 bl.ocks

 <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.
 

Screenshot

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>

Entities - what's this &name-or-number;?

Common HTML5 Elements - Embedded content

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:

Example 2.9 - img element - Example 2.9

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

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

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:

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

WAVE - Accessibility Evaluation Tool

Section-level elements

HTML5 defines elements that can be used to represent sections:

See: Usage Summary for Section Elements

Parts of a Page

header

extension school header

footer

extension school footer

nav

extension school nav

Workflow

(Edit, Save, Browser Check, [Validation Check]) × repeat

Note: Live Server extension in VS Code will help!

Assignments

  1. Download ZIP, unzip or extract, move to designated work area
  2. (Edit, Save, Browser Check, [Validation Check]) x repeat
  3. Decide when you are finished and ready to submit
    1. Publish to course web server:
      1. Connect to Harvard VPN through Cisco AnyConnect app
      2. Cyberduck (SFTP program)
      3. connect
      4. navigate to
        public_html/[YOUR OBSCURE FOLDER]
      5. copy local assignment folder to server
      6. check in browser
        https://NETID.cs12students.dce.harvard.edu/[Your Obscure Folder]/[assignment path]/
      7. From your browser, copy the URL of the assignment folder that you just published and submit in Canvas
    2. Submit ZIP file
      1. ZIP assignment folder up
      2. Submit ZIP file in Canvas

Version Control

Some basics

Experiment Fearlessly with Branches

gitflow simple

Start Using Git

Git Tools

Remote Repositories - GitHub and code.harvard (Harvard's GitHub)

Recommendation to Start for those new to Git!

<meta charset="utf-8">

Character Sets and Encoding

Character Sets

character encoding d9

Unicode

What is Unicode?

Unicode provides a unique number for every character,
no matter what the platform,
no matter what the program,
no matter what the language.

from What is Unicode?, The Unicode Consortium

Different Encodings for Unicode

Letter/characters maps to a "code point". Different ways of arranging the bytes to represent the code points.


Want more? See: