CS 1100 Week 2 Reading

Week 2: An Introduction to HTML

This reading draws heavily from a page by David Humphrey.

HTML

HTML is the HyperText Markup Language. It allows us to write content in a document, just as we would in a file created by a word processor. Unlike a regular text file, it also includes structural and layout information about this content. We literally mark up the text of our document with extra information.

When talking about HTML's markup, we will use the following terms:

tag : separated from regular content, tags are names wrapped in angle brackets, < and >. For example, <img> is an image tag.
element : everything from an opening tag to the closing tag, for example: <h1>Chapter 1</h1>. Here an element is made up of an <h1> tag (i.e., opening Heading 1 tag), the text content Chapter 1, and a closing </h1> tag. Together, these three create an h1 element in the document.
attribute : optional characteristics of an element defined using the style name or name="value", for example:
```
<p id="error-message" hidden>There was an error downloading the file</p>
```
Here two attributes are included with the p element: an id with the value "error-message", given in quotes, and the hidden attribute. Note: not all attributes take a value.
entity : special text that should not be confused for HTML markup. Entities begin with & and end with ;. For example, if you want to use the < character in your document, you need to use < instead, because < would be interpreted as part of an HTML tag.   is a single space that won't break to a new line, and & is the & symbol. The HTML standard has a list of all named entities in HTML.

HTML was created in 1990. Tim Berners-Lee wrote the first HTML page on August 6, 1991. The language was first standardized in 1997 as HTML 4. The current version is HTML5, which refers to what is essentially a "living standard". The group that manages the standard occasionally makes additions and changes to the language, as it evolves to meet the needs of the web.

Basic HTML5 Document

Here's a basic HTML5 web page:

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>My Web Page</title>
    </head>
  
    <body>
      <!-- This is a comment -->
      <h1>Hello World!</h1>
    </body>
  </html>

Let's consider the meaning of each line:

<!doctype html> tells the browser what kind of document this is, and how to interpret it.
<html> is the root element of our document. It contains all the other elements, up to the closing </html> tag. The lang="en" attribute says that this document is written in (American) English.
<head> provides information about the document, as opposed to providing the content. The information it contains is called metadata because it describes the document.
<meta> is an example of metadata. This piece of metadata defines the character set used in the document. utf-8 is a particular way of encoding text, one that works well with text across international boundaries. It is the standard way of encoding text on the web. We will use this line of metadata in all of our HTML files this semsster.
<title> is an example of a named piece of metadata: the document's title. It is shown in the browser's title bar. There are a number of specific named metadata elements like this.
<body> is the content of the content of the document. It contains all the other elements of the file, up to the closing </body> tag.
 indicates a comment for human readers. It is ignored by the browser.
<h1> defines a heading. There are six levels of heading element, from 1 to 6. A heading is like an internal title or sub-title in a document.

Web browsers are forgiving. They can usually interpret any set of HTML elements and present some formatted version of the page. Our goal in this course is to learn how to write web pages that are well-structured and give the client as much information as possible for creating and displaying the page.

Now try to create a copy of the basic HTML5 file on your computer and load it into your browser. You can follow these steps:

Make a directory on your computer called my-website.
Create a new file in my-website named index.html.
Use VS Code (or another e†txt editor, if you have not installed VS Code yet) to open your my-website/index.html file.
Copy the HTML from above, and paste it into your editor.
Save your index.html file.
Open a new tab in your web browser.
use Open File on the File menu to open index.html

Do you see the new page with Hello World! in black text?

Now let's make a change to our document:

Go back to your editor and change the index.html file so that instead of Hello World! you have This is my web page..
Save your index.html file.
Go back to your browser and hit the Refresh button.

Do you now see the greeting This is my web page.?

Every time we update anything in our web page, we have to refresh the web page in our browser. The web server will serve the most recent version of the file on disk when it is requested.

Common HTML Elements

We will eventually learn and use dozens of HTML elements in this course. The following is a good set to use as you begin to read the HTML code in web pages and to write your own.

Metadata

Information about the document (as opposed to the document's content) goes in various metadata elements.

<link> : links from this document to external resources, such as CSS stylesheets
<meta> : metadata that cannot be included using other elements
<title> : the document's title

Content Sections

These are organizational blocks within the document, helping to give structure to the content and to provide clues to browsers, screen readers, and other software about how to present the content.

<header> : introductory material at the top of a document
<nav> : content related to navigation, such as a menu, an index, or a set of links.
<main> : the main content of the document. For example, a news article's paragraphs, but not its ads, links, and navigation buttons.
<h1>, <h2>, ..., <h6> : (sub) headings for different sections of content
<footer> : end material at the bottom of the document, such as author, copyright, and links

Text Content

We organize content into "boxes", some of which have are laid out in the browser in unique ways.

<p> : a paragraph
<ol> : an ordered list (1, 2, 3) of list items
<ul> : an unordered list (bullets) of list items
<li> : a list item in a ordered or unordered list
<blockquote> : an extended quotation
<div> : a generic container we use to attach CSS styles to a particular block of content

Inline Text

We also use elements within larger text content to indicate that certain words or phrases are to be shown differently.

<a> : an anchor, which will produce a hyperlink, allowing users to click and navigate to another document of location
<code> : formats the text as computer code, rather than as regular text
<em> : adds emphasis to the text, often in italics
<strong> : adds emphasis to the text, often in bold type
<span> : another generic container, used to define CSS styles to items that appear inline with the text

Multimedia

In addition to text, HTML5 also defines a number of rich media elements embed other ways to communicate.

<img> : an element used to embed images in a document
<audio> : an element used to embed sound in a document
<video> : an element used to embed video in a document
<canvas> : a graphical area (rectangle) used to draw in either 2D or 3D using JavaScript

We will look at multimedia elements in more detail later in the course.

Scripting

We create dynamic web content and applications by writing bits of code, which we call "scripts":

<script> : an element that embeds executable code in an HTML document, usually JavaScript code

We will discuss scripts in more detail when we learn JavaScript later in the course.

Examples

Here are a few short HTML files that demonstrate the use of some of the common elements outlined above:

text: chunks of text
lists: both ordered and unordered
anchors: creating hyperlinks to other pages
images: displaying an image

CS 1100: Web Development: Client-Side Coding