HTML Student Material

HTML is the backbone to a web page. In this unit, we'll look at how to build a solid and meaningful structure for a web page.

Key Takeaways

  • Students understand the HTML file structure.
  • Students know how to use common tags to build a web page.

What Is HTML?

HTML is short for HyperText Markup Language. It's code that we use to:

  • create documents that are stored on the World Wide Web and displayed in a browser.
  • provide a basic structure for our web page - the bones of the web page.
  • ensure proper loading of text and images for our browser to display.

When Do We Use HTML?

Every web page you see on the World Wide Web is written using HTML code. Buttons, images, forms, sections of text - these are all elements that are created with HTML.

If we think of our web page as a human body, HTML is the bone structure. We can add skin and clothing to the body by using CSS, but only once we have that skeletal structure in place.

HTML In Action

At the core of HTML are elements. Elements are created with tags.

Most elements have an opening tag and a closing tag:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

Content (text or even other HTML elements) that you wish to see on the web page can be placed in between these tags, kind of like nesting the layers of a sandwich.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Some HTML content is created with self-closing tags that don't need an additional closing tag:

<img />
<link />

Just this one tag is sufficient since this element's job is to hold a place in your document - unlike most other HTML elements, it's not possible to nest other elements or information inside these self-closing elements.

Parts of an HTML Element

HTML Example

This code would be displayed in a browser and look like the image below.

This Code...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Makes This Web Page

HTML Reference

Framing

Context & purpose

HTML stands for Hyper Text Markup Language. It's a way to give structural meaning to text. It allows computers and programmers to easily determine what the purpose of a chunk of text does.

Think of HTML as the skeleton of a webpage - it provides the structure and content while javascript and css provide the interactivity and styling.

Learning objectives

Students will be able to

  • create an HTML file and open it in their editor and browser
  • set up an HTML file with the proper structure
  • list and use some common tags to add structure and content to their website

Getting Started

Section framing and purpose

  • HTML is written inside files with an .html extension.
  • You can give your html files any name the you want however, index.html is the most common name used for the landing page unless the developer has a reason to configure the server otherwise.
# creating an html file on the command line
touch index.html
# opening your html file in your browser
open index.html

Mini-challenges

  1. Create 3 additional HTML files with any names that you would like.
  2. Open one of the files in your text editor and browser.

Structure Of An HTML Page

Section framing and purpose

An HTML document should always start with the same structure:

  • The DOCTYPE tag is special and doesn't get closed. It also is the only tag that can have non-alpha-numeric (letters/numbers) values in it.
  • The <head> contains information about your website, but not actual content that will show up on the page.
  • The <body> contains all the content of your page that will actually show up on the screen.
  • The tags that you will use to create the structure of you page should be placed between the <body> tags.
  • Between the opening and closing tags, we insert the text or "content" of the element. The final result would look like this: <example-tag>Content Goes in here</example-tag>. Tags can also be placed within other tags.
  • Note that when placing a tag inside another tag, you should indent the new tag to show it is a child of its parent tag.

Vocabulary

  • elements - items (like images, paragraphs, and headings) created with HTML code.
  • tags - bits of code that indicate where certain elements begin and end.
  • child - elements contained INSIDE other elements.
  • parent - elements that CONTAIN other elements.

HTML Examples

Note: the following is just an example for reference; you don't need to understand all of it right away, but it's good to see what well formatted HTML might look like.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Mini-challenges

  1. Open one of the files that you created and add the basic HTML tag structure.
  2. Setup the HTML body to show your family tree (or the family tree of someone else). Use a section tag to hold a family group. Use a p tag to hold a family member. Families are complicated, but an example might be:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Common Tags

Section framing and purpose

In general, we don't create our own types of elements. Instead there are a set of predefined elements with functionality already associated with them.

Refer to the HTML reference for a break down of code block examples

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Mini-challenges

  1. Revise all the above content to reflect YOUR interests.
  2. In one of your other blank html files that you created at the start of the lesson, pretend you are preparing a news article with title, headings, and sub headings (can't think of content? Write about one day when you were traveling. Think of mini trips that you took, places that you visited, food that you ate).
  3. Use the relevant tags and add some content to have your news article appear on your website.
  4. Verify that your content is showing up in your browser!
  5. STRETCH: Make a form that someone can fill out to send you a comment about your article. While it won't work yet (we don't have it hooked up to Javascript), making this form in HTML can show us the first step in how we would create a working form.

Context

HTML is the language of content on the World Wide Web.

You will use the Command Line in order to navigate to and open your HTML files. Your HTML files will be augmented with CSS styles and behavior written using JavaScript scripting that is composed of various functions. HTML files will also be templates used by the Google App Engine and populated from a database.

HTML In Action

Getting Started with HTML

HTML is written inside files with an .html extension.

Viewing your Page

To preview an HTML file on a Mac: In the command line, navigate to the folder with your HTML page and type open filename, replacing "filename" with the name of your HTML file.

General Syntax

<tag>
  Content
</tag>

Elements Are Nested

HTML elements can be placed inside of other elements:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Structure of an HTML Page

Every web page has a basic structure that is the same. It looks like this:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • The <head> contains information about your website, but not actual content that will show up on the page (think of it as the ‘brains' of your web page).
  • The <body> contains all the content of your page that will actually show up on the screen.

Common Elements

Use these common elements inside the <body> and </body> tags to add content to a page.

Paragraph

To create a paragraph, use the p opening and closing tags:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Comment

Use comments to make your code easier to read without impacting the final rendered HTML.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Headings

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Generic <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Lists

Lists of list items, <li>, are wrapped with either an unordered list tag, <ul>, or an ordered list tag, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Image

The <img> tag requires specifying the address of the image using the src attribute, and the optional alt attribute is used for accessibility including screen readers.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

For a hyperlink, the <a> tag requires specifying the address of the hyperlink destination using the href attribute.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Horizontal Rule

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Break

<!-- This self-closing tag creates a line break between elements. -->
<br>

Form

A <form> is used to collect information from a user. For a <form> to work, it needs to send the data it collects somewhere to be processed or handled. Therefore, <form>often requires additional attributes:

  • action - the destination of the form data when the form is submitted
  • method - indicates whether the data should be processed using a GET or a POST type of request.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Input

<input> is the element used by a <form> to collect information.

An <input> element also usually has a name attribute that is used by databases to identify the field to which submitted data belongs.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

The <input> element is very versatile: by specifying the type attribute, it can be rendered as a text field, calendar-style date picker, radio button, dropdown, and more. You can consult some external documentation to see a more complete list.

Tips & Tricks

  • Learn what HTML tags are available by inspecting the code of web pages to see what tags other developers have used to add something to a web page.
  • If you can't find what you'd like to add, check Developer Documentation. These are some lists of all possible HTML elements https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
  • When writing HTML, for elements that need an opening and a closing tag, it's best to open and close the tag first before adding content between the tags. This way you won't be left with dangling tags.
  • To best view the nested nature of HTML elements in your code, indent elements that are inside of other elements. This will help you quickly recognize the structure of your HTML content.
  • Use a lot of comments! These will help you troubleshoot your own code and will help others when you ask them to review it.
  • Resources on the web like html5boilerplate.com can help you quickly get started writing HTML.

Best Practices Summary

  • Information about a web page goes in the <head> of an HTML document: title, metadata, links to styles, etc.
  • Information on a web page goes in the <body> of an HTML document.
  • There are many elements developers can use to build the content of an HTML document, including: <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- -->, and more.
  • Some elements require an opening tag and a closing tag: <p></p>.
  • Other elements are self-closing, so they only require an opening tag: <img>.
  • Tags can include attributes (src, alt, id, etc.) that provide more information about how an element should behave: <img src="filename.png" alt="description">.
  • Comments, <!-- -->, provide notes to developers that are useful for understanding what sections of a web page do.
  • Use the built-in Developer Tools in your browser to inspect the HTML code of web pages to examine how the page was built.

Question 1

Which of the following elements is a child element? (ignore body/html elements for the purpose of this exercise)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 and p

Question 2

In an HTML document, __ goes in the <head> element and __ goes in the <body> element.

  1. structure, metadata
  2. metadata, structure
  3. headings, smaller content
  4. the site's header, the site's main content

Question 3

Which of the following are not good reasons to indent nested elements?

  1. Indenting makes it easier to see what elements are contained in other elements
  2. Indenting makes it easier for humans to read the structure of the web page
  3. Indenting makes it easier for bots/search engines to read the structure of the web page
  4. Indenting makes it easier to identify sibling elements

Question 4

Which of the following is an attribute of the HTML element?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. sidebar
  4. Sidebar goes here!

Question 5

How many attributes does the following HTML element have?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Question 6

In the following HTML snippet demonstrating a relationship, which element is a parent element?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Question 7

How many of the elements in the following HTML snippet are a child to a parent element?

(Don't count the wrapping <body> or <html> elements)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Question 8

Though some browsers will render the following HTML snippet correctly, what's wrong with it?

<img src=puppies.png width=400 />
  1. It doesn't have a closing tag
  2. There should be quotes around the values of attributes
  3. Providing the width attribute also requires the height attribute
  4. It's missing a required attribute

Question 1

Which of the following elements is a child element? (ignore body/html elements for the purpose of this exercise)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

The a element is a child element because it is contained within another element.

Question 2

In an HTML document, __ goes in the <head> element and __ goes in the <body> element.

metadata goes in the <head> element and structure goes in the <body> element. Nothing in the <head> element will be visible on the webpage itself.

Question 3

Which of the following are not good reasons to indent nested elements?

Indenting does not make it easier for bots/search engines to read the structure of the web page - when a bot reads a website, it can read the HTML code even if it were all on one line.

Question 4

Which of the following is an attribute of the HTML element?

<div class="sidebar">Sidebar goes here!</div>

class is the attribute - attributes go within an HTML element and usually has (but doesn't have to have) a value.

Question 5

How many attributes does the following HTML element have?

<input type="text" placeholder="username" name="username" />

The input element above has 3 attributes - type, placeholder, and name.

Question 6

In the following HTML snippet demonstrating a relationship, which element is a parent element?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> is a parent element because it contains other elements.

Question 7

How many of the elements in the following HTML snippet are a child to a parent element?

(Don't count the wrapping <body> or <html> elements)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

There are 4 child elements in the snippet - basically, any element that has a parent above it, so anything except for the <div> element - <h1>, <p>, <i>, <a>.

Question 8

Though some browsers will render the following HTML snippet correctly, what's wrong with it?

<img src=puppies.png width=400 />

There should be quotes around the values of attributes. <img /> is a self closing tag, and it has no required attribute. It's okay to have width without height and vice versa.