Emily Kauffman

Back to teaching

CIS 275 Lecture 3: HTML Document Structure & Tags

Goals

  1. Understand HTML structure
  2. Learn about markup
  3. Setup a development environment and write some code

Website Technologies

  • HTML - hypertext markup language; describes the structure of web pages
  • CSS - cascading stylesheets; Addresses appearance of web content, layout
  • JavaScript - Used for additional interactions, a layer of behavior on your website
  • Tools - browsers, editors, terminal, version control, etc
  • Backend - server and server code, responsible for sending and receiving information that can be displayed on a website
  • Content Management System

Let's Build a House

In order to make websites, you'll have to learn three languages: HTML, CSS, and JavaScript. Why three languages?

A pencil drawn house basic house

  1. Tools - code editor, browsers, terminal
  2. Materials/Structure - HTML

  3. Styling, Decoration, Appearance - CSS

  4. Behavior - JavaScript

  5. Outside requests - backend

Content Management Systems

A content management systems (CMS) is software that allows a user to manage and edit a website without necessarily knowing how to code. Popular CMS's include Wordpress, Drupal, and Joomla.

The Wordpress admin dashboard Fun facts:

  • In 2019, Wordpress powered 35% of the web
  • Of all CMS-built sites, Wordpress makes up 60%
  • Nearly 28% of all eCommerce sites use WooCommerce

In other words, if you're a web developer, you'll probably run into one at some point.

Recap:

  • The HTML is the structure. It contains the text, the images, and describes that makes up your website.
  • The CSS is a set of rules that describe how the HTML should appear, like the color, font size, and arrangement on the page
  • The JavaScript is the behavior layer and can change the appearance of the website when prompted (ex. clicking a button opening a modal).
  • The backend code interacts with the website, responding to requests for data or handling data that the website sends to it, like when you upload a photo to Instagram.
  • A CMS allows you to manage and edit a website with minimal or zero coding experience.

In this course, we will focus on HTML and CSS only, but it's important to understand how all of the components work together.


HTML Anatomy

Below is a basic example of a webpage. Don't worry too much about what it means - we'll dive into it soon. The HTML code is in the reddish color and the text is in white.

<!doctype html>
<html lang="en">
  <head>
    <title>This is the title of the site!</title>
  </head>
  <body>
    <h1>This is the Main Heading</h1>
    <p>This text might be an introduction to the rest of
    the page. And if the page is a long one it might
    be split up into several sub-headings.<p>
    <h2>This is a Sub-Heading</h2>
    <p>Many long articles have sub-headings so to help
    you follow the structure of what is being written.
    There may even be sub-sub-headings (or lower-level
    headings).</p>
    <h2>Another Sub-Heading</h2>
    <p>Here you can see another sub-heading.</p>
  </body>
</html>

Anatomy of an HTML element

HTML is composed of elements. The elements create the components of the page (the structure) and define the contents.

Most elements have a starting and ending tag like the <p> element above. There are a few that don't, which we refer to as empty elements. For example, <br/>. Empty elements can also be written like <br>.

Breakdown of an HTML element's components

<img src="image.jpg" width="500" height="600" />

Elements can also have attributes with values.

<!-- Elements can be nested: -->
<p>I am a <em>paragraph!</em></p>

Elements can be nested. When they are, the nested element is said to be the child of the parent element. In the example below, the em element is a child of the p. There can be many levels of nested elements (grandchildren, siblings, etc). This relationship between elements is known as the hierarchy.


The <html> element

The <html> element indicates that anything between it and the closing tag is HTML code. It contains everything except the doctype.

<!doctype html>
<html>
  everything in here is html!
</html>

the <head> element

The HTML Head is the contents of the <head> element. It contains information (metadata) about the page and unlike the HTML body, does not display when the page is rendered in a browser.

Note - don't use any element in your page unless you know what it does and can explain it.

<!-- Example HTML Head -->
<head>
  <meta charset="utf-8" />
  <title>My Website</title>
  <meta name="description" content="A cool website" />
  <meta name="author" content="Emily Kauffman" />
  <meta name="keywords" content="emily, kauffman, web design, web development, cis 275, washjeff" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./styles.css" />
</head>
  • <title> - displays in the browser bar; auto-fills when bookmarking a page
  • Meta tags - for SEO, additional functionality on mobile sites
  • link - links to external scripts and CSS files
  • Contains any internal styles and scripts
  • More on the viewport meta tag

The <body> element

Everything in this element will display in the browser.

<html>
  <body>
    All the displayed content goes here!
  </body>
</html>

Headings

<h1>This is a main heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
...
<h6>This is a level six heading</h6>

Displays as:

This is a main heading

This is a level two heading

This is a level three heading

This is a level three heading

This is a level three heading
This is a level six heading

Paragraphs

<p>I am a paragraph!</p>

Don't Use!

CSS was created to help us separate our content from our styling. Don't use <b> or <i>, even though they're in the book. Instead, use <strong> and <em>.


White space collapsing

The browser displays two or more spaces, as well as line breaks, as one space.

<p>I am a sentence in a paragraph element.       I am a sentence in a paragraph element. 
      I am a sentence in a paragraph element.   I am a sentence in a paragraph element. I am a sentence in a paragraph element. 
I am a sentence in a paragraph element.</p>

Displays as:
I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element.


Lists

<ol>
  <li>One!</li>
  <li>Two!</li>
  <li>Three!</li>
</ol>

Displays as:

  1. One!
  2. Two!
  3. Three!
<ul>
  <li>One!</li>
  <li>Two!</li>
  <li>Three!</li>
</ul>

Displays as:

  • One!
  • Two!
  • Three!

What do you need to know to begin?

  • Web pages are the rendering of coded text and script with other associated media types (graphics, video, audio, etc.)
  • Three main components: the text content, the referenced content, and the markup
  • Learn by looking at the source code of existing websites (Chrome devtools)
  • samfee.net

Filenames and URLs

An HTML document is just a text document and you save it in the same way you'd save a Notepad text file.

  • Home page HTML document naming convention: index.html
  • Web is case-sensitive: filenames should be lowercase, exclude special characters, including spaces
  • URLs can be relative or absolute - What's the difference?
  • Browser knows if it's relative or absolute
<!-- Assuming current URL is emilykauffman.com/teaching/cis-275 -->
<html>
  <body>
    <a href="https://emilykauffman.com/teaching/cis-275/syllabus">
    <a href="/syllabus">
  </body>
</html>

Code Formatting

Why indent your code?

  • shows hierarchy
  • readibility
  • can tell where tags start and end easier
  • shared codebase

Bad:

<div><p>this is a test</p><div>hi</div></div>

Better, but also bad:

<div>
<p>this is a test</p>
<div>hi</div>
</div>

Best:

<div>
  <p>this is a test</p>
  <div>hi</div>
</div>

Development Process

  1. Create a Workspace

    • text editor (VSCode, Sublime, Atom)
    • web browser (Chrome, Firefox, Safari)
    • all files for your site should be stored in a folder (includes, HTML files, images, stylesheets, etc)
  2. Create an index.html document with a doctype. Make note of where you save it (e.g. Desktop, Home directory, in a folder)
  3. Build out HEAD content

    • meta tags, title, character set
    • include links to stylesheets, scripts
  4. Markup the body

    • headings (h1-h6)
    • paragraphs
    • text formatting
    • images
  5. View completed page in the browser

Knowledge Check

  1. What are the three main languages used in web development? What are they used for?
  2. What can I find in the HTML Head section? What about the body?
  3. What is the minimum software needed to make a web page?
  4. What tag is used to populate the browser bar in a web page?

In Class Exercises

Exercise 1: Environment Setup

Part A:

  1. Download or find a text editor on your system (Atom should be pre-installed on school computers).
  2. Download or find a browser to use.
  3. If you haven't already, make a folder to hold your lecture 3 activities.
  4. Create a new web page (HTML document) labeled exercise1.html.
  5. Make sure it has a doctype and HTML section. A HEAD section is not needed yet.
  6. In the body (you'll have to make a body element), add content to the document so that you have a level one heading that says 'My first website!'.
  7. Add a paragraph descibing something you learned in this class so far.
  8. Test it in the browser. Check out the URL. What is this type of URL? Compare it to your neighbor's.
  9. Test it in a different browser. Are there any noticeable differences? If yes, why might they look differently?

Part B:

  1. Add a HEAD section to your exercise1.html.
  2. Give your page a title called Exercise 1 and test it in the browser.
  3. Add your charset meta tag and set it to "utf-8".

Exercise 2:

  1. Create a page called exercise2.html.
  2. Make sure to include all relevant HTML tags (doctype, HEAD)
  3. Set your title to Exercise 2 and set your charset meta tag to "utf-8".
  4. Choose five words that are specific to your major.
  5. In your page body, create a definition list that includes each term with its associated definition.

Exercise 3

Make up (or find online) a simple food recipe. We're going to markup the recipe in HTML. Don't spend too much time on this step!

  1. Create a new HTML document with the correct doctype. Create a HEAD section with a title, charset, and author meta tags defined.
  2. Save it as exercise3.html.
  3. Make a body tag to hold the contents.
  4. Make a level one heading tag (h1) where the text is the name of the recipe.
  5. Next, make an unordered list of the ingredients.
  6. Next, make an ordered list of the steps to make your recipe.
  7. Finish with a short paragraph (one or two sentences) of your choice. It could be a tip on how to make the recipe, a description of the recipe, why you chose this recipe, or something else.
  8. Show me when you're done!

Try to do this without looking, but here's an example if you're stuck: Cookie Recipe


Homework

Due: Feb 4

By this point, we've covered the basic HTML structure, some new elements, naming conventions, and workspace setup. This exercise will be an indicator for whether you've learned the content.

Read this article on why website accessibility is important. Reflect on the reading and write a short response, about 250 words. Next, markup the response using HTML so that it renders correctly in the browser. You'll only need to generate one HTML file for this. In the browser, the line breaks, emphasis, and any other typographic formatting should be present.

All markup should be in accordance with the HTML5 specification.

Feel free to validate it using this tool: http://validator.w3.org/#validatebyinput


Next Class

  • Read: Duckett, Chps. 4-5
  • Homework: finish in class exercises, Homework #1

Resources

  1. House Metaphor
  2. Duckett, John. Html & CSS: Design and Build Websites. John Wiley and Sons, 2014.
  3. Mozilla
  4. Wordpress Statistics