CS 1100: Web Development: Client-Side Coding

Week 2: An Introduction to HTML

This reading draws heavily from a page by David Humphrey.

You can also find a list of many different resources for learning HTML on this MDN resource page.

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 often refer to the following terms:

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:

  1. <!doctype html> tells the browser what kind of document this is, and how to interpret/render it
  2. <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 English.
  3. <head> provides information about the document, as opposed to providing the content. The information it contains is called metadata because it describes the document.
  4. <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. We will use this line of metadata in all of our HTML files this semsster.
  5. <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.
  6. <body> is the content of the content of the document. It contains all the other elements of the dile, up to the closing </body> tag.
  7. <!-- ... --> indicates a comment for human readers. It is ignored by the browser.
  8. <h1> defines a heading. There are six levels of heading element, from 1 to 6. A 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 this file on your computer and load it into your browser:

  1. make a directory on your computer called my-website
  2. create a new file in my-website named index.html
  3. use Visual Studio Code to open your my-website/index.html file
  4. copy the HTML from above, and paste it into your editor
  5. save your index.html file
  6. open a new tab in your web browser
  7. 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:

  1. Go back to your editor and change the index.html file so that instead of Hello World! you have This is my web page.
  2. Save your index.html file
  3. 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

There are dozens of HTML elements that we will learn and use. 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.

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.

Text Content

We organize content into "boxes", some of which have unique layout characteristics

Inline Text

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

Multimedia

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

Scripting

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

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: