Web Basics
HTML Part 1

Dr. Greg Bernstein

August 22nd, 2021

Getting Started with HTML

Learning Objectives

Understand XML “based” markup languages, tags and attributes
Understand HTML5’s place in the web, and the structure of an HTML5 document (outline)
Understand and know when to use the fundamental HTML attributes of class and id
Know what belongs in the HTML <head> element
Know HTML text, link, and document structure fundamentals

Readings

Markup Languages

HyperText Markup Language (HTML)
- We’ll only use HTML5
- Other versions: HTML4, XHTML
Consists of: Elements which can have content
- Element defined by tags
- Elements can be nested
- Elements can have attributes

Other Markup Languages

That I’ve used

SVG (Scalable Vector Graphics) MDN SVG Tutorial
- Used for vector (not raster) graphics on web
- Extensively used in web based data visualization see D3 Homepage
MusicXML
- “MusicXML was designed from the ground up for sharing sheet music files between applications,…”
- See: Wikipedia MusicXML and Home Page

SVG Example

As a standalone file, but can also embed directly in HTML5

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="150" cy="100" r="80" fill="green" />
    <text x="150" y="70" font-size="30" text-anchor="middle" fill="white">Hello</text>
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

Rendered

Music XML Example

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE score-partwise PUBLIC
    "-//Recordare//DTD MusicXML 3.1 Partwise//EN"
    "http://www.musicxml.org/dtds/partwise.dtd">
<score-partwise version="3.1">
  <part-list>
    <score-part id="P1">
      <part-name>Music</part-name>
    </score-part>
  </part-list>
  <part id="P1">
    <measure number="1">
      <attributes>
        <divisions>1</divisions>
        <key>
          <fifths>0</fifths>
        </key>
        <time>
          <beats>4</beats>
          <beat-type>4</beat-type>
        </time>
        <clef>
          <sign>G</sign>
          <line>2</line>
        </clef>
      </attributes>
      <note>
        <pitch>
          <step>C</step>
          <octave>4</octave>
        </pitch>
        <duration>4</duration>
        <type>whole</type>
      </note>
    </measure>
  </part>
</score-partwise>

MusicXML Rendered

Poll: XML Familiarity

Have you ever heard of, or used XML?

XML

Extensible Markup Language Wikipedia XML

Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.
You get to define elements via tags, content, and attributes.
We will do something similar with React components and JSX

HTML5

From Wikipedia HTML5

HTML5 was first released on 22 January 2008, with a major update in October 2014. Its goals were to improve the language with support for the latest multimedia and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices…, without XHTML’s rigidity; and to remain backward-compatible with older software. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 …

Poll: Raw HTML Experience

How much experience to you have in creating HTML pages “by hand”, i.e., with a code editor?

HTML 5 Document Outline

Minimalistic; Try out HTML elements in the <body>.

<!DOCTYPE html>
<html lang="en"> <!-- English -->
    <head>
        <title>An Empty HTML5 document</title>
    </head>
    <!-- I'm an HTML comment -->
    <body> <!-- Nothing here yet. Add elements to try them out -->
    </body>
</html>

Elements and Content

Element and Content (from MDN) — Element and Content (*from MDN*)

Nesting Elements

<section>
<h1>All About Cats</h1>
<p>My cat is <strong>very</strong> grumpy.</p>
</section>

What Can You Nest?

Section 4 of the HTML5.2 standard contains the precise definitions of all the HTML elements. The content model describes the permitted content.

Easier than manually checking all the definitions use the free W3C Markup Validation Service to check you documents since malformed pages may not show up consistently across browsers.

Elements and Attributes

Element and Attributes (from MDN) — Element and Attributes (*from MDN*)

Two Fundamental Attributes

Attributes are always within the tag portion and consists of a name, equal sign (=), and value in double quotes (“value”)

id and class are attributes that we can assign to any HTML element
An element can have only one (or no) id and it must be unique within the HTML document

<h3 id="NextBigThing">A heading with id</h3>
<p>Just a paragraph</p>
<p id="OnlyOne">Paragraph with an id</p>

class Attribute

An element can have an arbitrary number of classes assigned to it.

<h3 class="story">My Story</h3><!--a single class -->
<!-- to add multiple classes use the following syntax-->
<p class="story lead">Here is the lead paragraph.</p>

We will use ids and classes extensively with CSS and when using JavaScript to interact with a web page.

The HTML `<head>`

Title

Always use a <title> element
This shows up partially in the browser tabs
Fully shows up when hovering over the tab

Meta Data

Character encoding
- <meta charset="utf-8">

Info for Search Engines

<meta name="description" content="A course on web development for
computer science majors...">

Search Engine Optimization (SEO) is outside our scope.

Including Stuff

CSS files

    <link rel="stylesheet" href="my-css-file.css">

JavaScript files

    <script src="my-js-file.js"></script>

Favorite Icon

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Text Fundamentals

Headings and Paragraphs

Paragraphs (only one type)
```
<p>This could be a paragraph.</p>
```

Headings (six types)

<h1>My Book</h1>
<h2>My First chapter</h2>
<h3>Maybe a section</h3>

Semantics & Structure

Semantics ↔︎ Meaning
- This thing is a heading (meaning)
- This thing is bold (style)
Structure in Pages
- functions: navigation, buttons, menus
- summaries, captions, figures, tables

Unordered Lists

<ul>
<li>Fanatic FreeWave</li>
<li>Mike's Lab Slalom</li>
<li>Mike's Lab LXII Formula</li>
<li>Mike's Lab LX Mod for Foiling</li>
</ul>

Ordered Lists

<ol>
<li>Maui Sails TRX 9.3</li>
<li>Maui Sails TRX 10.0</li>
<li>Maui Sails TRX 11.0</li>
</ol>

Lists within Lists

<ul>
<li>Mike's Lab Slalom</li>
    <ol>
    <li>Maui Sails TRX 6.6</li>
    <li>Maui Sails TRX 7.7</li>
    </ol>
<li>Mike's Lab LXII Formula</li>
    <ol>
    <li>Maui Sails TRX 9.3</li>
    <li>Maui Sails TRX 10.0</li>
    <li>Maui Sails TRX 11.0</li>
    </ol>
</ul>

Nesting Counter Example `ol`, `ul`, and `li`

Not so obvious restriction?

<ol> and <ul> content model: Zero or more li elements.
<li> content model: flow content (just about everthing)

Emphasis and Importance

Emphasize things with <em>things</em>
Make things important with <strong>things</strong>
Not italic, bold, or underline (though these are changing)

Inline and Block Content

Elements such as <em>, <strong>, <a> are inline content
Elements such as <h1>-<h6>, <p>, and lists are block content
Block content does not sit on the same “line” as other content.

Try:

<p>My para.</p><p>Your para.</p><p>our para.</p>

Hyperlinks

Basic Link

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

Link with Title

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
   title="The best place to find ...">the Mozilla homepage</a>.
</p>

Arbitrary Content as Link

Just wrap the content in a <a> tag

<a href="https://www.grotto-networking.com">
    <p>A whole paragraph as a link.</p>
</a>

Absolute URLs

Points to a location defined by its absolute location on the web, including protocol and domain name.

Example: “http://www.grotto-networking.com”

Relative URLs

Points to a location that is relative to the file you are linking from

Examples: “home.html”, “../css/style.css”

We’ll use these as much as possible!

Elements within a Document

An element with an id attribute can be linked to

<h2 id="Foiling">All About Foiling</h2>
<p>Blah, blah, blah</p>

Link to the above with either

<a href="#Foiling">see foiling</a><!-- Same page -->

<a href="pageName.html#Foiling">see foiling</a><!-- Different page -->

Open in a new Tab

To open the linked page in a new tab use the following:

<a href="http://someurl.edu" target="_blank">my link</a>

The value of the target attribute is key!

Link Summary

Tag: <a>
Attributes: href, title, target
Lots more details see HTML Link reference

Document Structure

More Structure!

Web sites can have:

Headers (not to be confused with <head> or headings <h2>)
Navigation bars
Sidebars
Main content
Footers

Semantic HTML

The term semantic HTML describes choosing an HTML element that most closely matches the authors intent

Semantic HTML5 Elements. Read this!
HTML Semantic Elements
WebAIM: Web Accessibility In Mind – HTML Well structured pages aid in accessibility.

Main Content

<main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn’t be nested within other elements.

Articles

<article> encloses a block of related content that makes sense on its own without the rest of the page (e.g. a single blog post.)

Sections

<section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality. It’s considered best practice to begin each section with a heading;

Asides

<aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.)

Headers

<header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it’s a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings.)

Footers

<footer> represents a group of end content for a page.

Structure in Practice

You do not need to use all these all the time!
Many web older sites don’t use any of these.
Most came with HTML5 and significantly help with accessibility and code readability!
In older web sites you will see instead lots of <div>

Non-semantic Wrappers

<span> is an inline non-semantic element, which you should only use if you can’t think of a better semantic text element to wrap your content

<div> is a block level non-semantic element, which you should only use if you can’t think of a better semantic block element to use

More on spans and divs

We’ll use <span> and <div> more when we get into CSS. Particularly when we use CSS Frameworks such as Bootstrap or Pure.

Breaks and Rules

HTML ignores white space including line breaks
Use <br> (empty element) for a line break
Use <hr> (empty element) for a horizontal rule
- We’ll see more techniques with CSS borders

// reveal.js plugins

Web Basics HTML Part 1