Web Basics
HTML Part 1

Dr. Greg Bernstein

Updated: January 20th, 2020

Getting Started with HTML

Readings

  1. Getting Started with HTML

  2. What’s in the head? Metadata in HTML.

  3. HTML text fundamentals.

  4. Creating hyperlinks.

  5. Document and website structure

Markup Languages

  1. HyperText Markup Language (HTML)
    • We’ll only use HTML5
    • Other versions: HTML4, XHTML
  2. 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

Hello SVG

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 XML?

[A] and used XML in a class, job, or project

[B] and used an XML Schema in a class, job, or project

None of the above

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?

None

Have done this once or twice

Have done this many times

Don’t Understand the Question

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>

HTML 5 Document Outline

Minimalistic

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

What Can You Nest?

Most of the rules about what elements can contain correspond to what you would expect. However malformed pages may not show up consistently across browsers. Use the free W3C Markup Validation Service to check you documents.

Section 4 of the HTML5.2 standard contains the precise definitions of all the HTML elements, but we will generally not need this level of detail.

Elements and Attributes

Element and Attributes (from MDN)
Element and Attributes (from MDN)

Two Fundamental Attributes

  • 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 html <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>

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>

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!

Document Structure

More Structure!

Web sites can have:

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

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