2 HTML

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. Eventually we will learn how to augment HTML using Cascading Style Sheets (CSS) and the JavaScript (JS) scripting language, especially with the D3.js JavaScript library.

The HTML/CSS/JS trio is a powerful combination for creating web pages. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.

  • HTML describes the structure of a web page semantically,
  • CSS controls how the various components of the page are displayed (colors, fonts, sizes, etc.), and
  • JavaScript gives us programmatic control of the content and formatting of our pages.

2.1 A minimal HTML page

Let’s create our first web page. We’ll start with a minimal HTML file.

2.1.1 Atom HTML stubs

  1. Create a new file in Atom and name it snow-person.html. (Naming it with a .html extension is necessary to Atom knows you are working with an HTML file.)

  2. One the first line type html and then pause. You should see something like this:

Click on the line below what you typed or just hit return, and Atom will create a small HTML file for you that looks like this:

Congratulations! You have just created your first web page, or at least the first file that can be served as a web page.

2.1.2 What’s going on here?

Here’s an explanation of what is going on in this minimal example.

  • The first line declares that this will be an HTML file.

  • The rest of the file is organized into structural chunks which begin and end with HTML tags. The tags in the file above are of three types:

    • opening tags: <html>, <head>, <body>
    • closing tags: </html>, </head>, </body>
    • self-closing tags: <meta > (Note: You will some times see this as <meta />, but that extra slash in not required for HTML. It will be required for SVG.)

Everything between an opening tag and its paired closing tag (or within a self-closing tag) belongs to a structural unit of the document. These units are called elements. So in this file, the document element contains an HTML element containing a head element and body element. The head element contains a meta element and a title element.

2.1.3 The Document Object Model (DOM)

We might represent our simple HTML document as follows

document
  html
    head
      meta
      title
    body

This representation as a hiearchy of nested elements is called the document object model or DOM. The DOM is the data representation of the objects that comprise the structure and content of a document on the web. The tags of HTML are one way to describe the DOM. JavaScript will have another way to read, write, and edit these same elements. In principle, we could construct the entire web page in JavaScript, but it is much easier to do some parts directly in HTML and other parts via JavaScript, and it is important to understand how HTML (or at least the DOM) works before learning to write JavaScript code to manipulate the DOM.

2.2 Viewing our web page

To view a simple HTML file, all we need is a browser, like Chrome or Firefox. For web pages built using external CSS and JavaScript files, all the files will need to be hosted on a web server that knows how to put all the pieces together and send them to the browser. More on that in just a moment.

For now, we view our file by opening it in a browser.

  1. Open your file in a Chrome.1

    You can do this by navigating to the file in a file manager or by typing a URL that begins file:// followed by that path to your file.

    Since there is no content on our page currently, all you will see is a blank page.

2.3 Adding content to an HTML file

Now let’s add content. We are going to create a web page describing a snow person. You may imagine a snow person you have made, or one you would like to make, or any snow person you like. That’s up to you.

At each step, if you save your file and refresh your browser page, you can see the results.

2.3.1 Adding meta data to the document head

The head element is used to keep track of meta data about the web page. For example, let’s add a title to the page.

  1. Insert

    <title>My Snow Person</title>

    between <head> and </head>. Now refresh the page. You still won’t see anything on the web page, but your browswer will likely display the title somewhere else.

  2. Modify the title so it identifies who you are.

    Change “My” to something less generic that identifies you (and your partner).

There are other things that can be added to the head of the HTML document, but for now, let’s move on to the body so we can see something on our page.

Note: HTML5 doesn’t actually require the <head> ... </head> tags, and many people omit them. (The <html>...</html> and <body>...</body> tags are also optional, but omitting them can cause problems with some browsers or with some software, so it is good to always include those tags.)

2.3.2 Adding content to the body

Let’s create a web page that describes your snow person.

  1. Add a visible title by inserting an <H1> tag.

    Insert <h1>Your Title Text</h1> into the body of your HTML file, replacing Your Title Text with a much better title. (It could match the title you put in the header, but it doesn’t have to.) Refresh the page and you should be able to see some large text. <h1> is for first level headers.

  2. Add two second-level headers (using <H2>)

    Your result should be something like this.

    <h1>My Snow Person</h1>
<h2>Best features of my snow person</h2>
<h2>Worst features of my snow person</h2>

  3. Add some text to one of the sections using a <p> tag.

    is short for paragraph. Don’t forget to put the closing </p> at the end of your paragraph. Feel free to add additional paragraphs if you have lot’s to say about your snow person.

  4. Now add some additional headers. You can use <h1> through <h6> to get six different levels of header. Feel free to add paragraphs of text in any of your newly created sections.

2.3.3 Why is my page so ugly?

We have a web page an can add content to it, but it looks like something straight out of the 1990’s. What you are getting is the default way of rendering headers and paragraphs. Soon we will learn how to use CSS (cascading style sheets) to improve the look. HTML and CSS divide up the work: HTML describes the structure and content; CSS describes how that information should be displayed.

2.4 Tag attributes

Tags may have attributes. The general form of the sytax for this is

<tag attr1 = "value1", attr2 = "value2", ...> content </tag>

Note: HTML tag names and attribute names are not case sensitive (but it is generally a good idea to consistently use ALL CAPS or all lowercase). Attribute values, on the other hand, are case sensitive.

2.4.1 Global Attributes

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements. You can find a list of global attributes at MDN. Two important global attributes are id and class.

  • id values should be unique and are used to identify specific elements of the document
  • class values need not be unique, and are used to identify groups of elements

2.4.2 Tag-specific attriutes

In addition to the global attributes, tags may have attributes special to their tag type. The <p> tag, for example, has an align attribute that controls the justification of the text in the paragraph.

Examples:

* `<p align = "right">Some text</p>`
* `<p align = "center">Some text</p>`
  1. Reformat some of your paragraphs to make them center or right justified.

2.4.3 User-defined attributes

You may invent your own attributes as well. By default, these attributes won’t do anything to the rendered we page, but we learn later how to use these attributes with CSS and JS to control how the page looks and/or behaves.

2.5 Some more tags

There are, of course, many other tags. You don’t need to memorize them all or all the attributes associated with them – you can always look that up as you need it. But it is good to be familiar with the most commonly used tags.

2.5.1 Lists: <ol> ... </ol>, <ul>... </ul>, and <li> ... </li>

Ordered and unordered lists are created with <ol> and <ul>. Items with in the list are created with <li>.

  1. Add an ordered list and an unordered list to your web page. Each list should have at least 3 elements.

2.5.2 Code blocks: <code> ... </code> and <pre> ... </pre>

OK. This is only for geeky web pages. Perhaps your snow person doesn’t do code. Still, it’s good to know about. <code> is for computer code; <pre> is for any pre-formatted text (so the white space won’t be ignored).

  1. If your snow person is geeky, add a code block showing some code. If your snow person is not geeky, add a pre-formatted block with a short poem.

2.5.3 <input ... >

This is a self-closing tag with several important attributes including

  • type – what type of input is this? For example, if you want to have the user enter a date, use <input type = "date">. Other types include“button”,“checkbox”,“number”,“color”,“email”`, etc.

See https://devdocs.io/html/element/input for a complete list of types.

  • value – used to pre-populate with a value.

  • name – a unique name for the input. If later the inputs are going to be used programatically to change how the page behaves, we need to know which input is associated with what.

  1. Add some inputs to your page. They won’t do anything yet, but later we will be able to use D3 to retrieve the values of the inputs and use those values however we like.

2.5.4 Links: <a href = "..." ...> link-text </a>

href is the URL you want to link to. The text between the opening and closing tags is the text that will appear on the page.

  1. Add a link to an external web site somewher on your page.

2.5.5 Images: <img src = "..." ...>

src is the path to the image you want to include. Other attributes can be used to control the height, width, alignment, text-wrapping, etc.

  1. Add an image to your page.

2.5.6 <div> ... </div> and <span> ... </span>

We’ll talk more about these important tags when we get to CSS. A div is a generic block of content and a span is generic “inline” content. Until we learn about CSS, these tags won’t make the page look any different.

2.5.7 More tags

You can find a complete list of HTML5 tags at https://devdocs.io/html-elements/.

  1. Add at least two more types of tag/element to your document. Feel free to experiment with more.

2.6 Viewing the DOM

In addition to the usual view that your browser shows you, you can view the DOM structure of the page.

  1. Use View > Developer > Inspect Elements to have Chrome show you the DOM structure of your page (or any other page you might visit).

2.6.1 The box model

You will notice in the Inspect Elements view that when you hover over a portion of a website, a portion of the website is highlighted like this:

In the example above we see that the element being highlighted is a p (paragraph) element, and we see some information about how that element is being displayed (color, font, margins, etc.). The important thing to notice is that the hightlighted box extend the full width of the page, even though the text in the last line does not. That is because p elements are block-level element. Subsequent elements will begin below.

Other elements are inline elements, like this:

They are called inline elements because the next element will begin to the right. These elements can be placed next to each other in a line.

Browsers render HTML (more precisely, they render the DOM) using this box model. Everything is one of these two types of boxes. Importantly, divs are block-level boxes and spans are inline (by deafault).

2.7 Resources

  1. This will work for now, but soon we will need to serve our pages from a web server of some sort.↩