Skip to content

Latest commit

 

History

History
368 lines (237 loc) · 7.29 KB

README.md

File metadata and controls

368 lines (237 loc) · 7.29 KB

Static Websites

Slides

Demo

Agenda

  1. Learning Outcomes
  2. HTML Essentials
  3. HTML Page Elements
  4. Activity: Form Elements
  5. Developer Tools

Learning Outcomes

By the end of today, you should be able to…

  1. Recognize the most common HTML tags and their standard formatting
  2. Make a static web page using HTML
  3. Create a form to collect user data using HTML
  4. Use a browser’s developer tools to examine and change the HTML of a website

Warm Up (5 minutes)

Write a list of every HTML element you know, and its purpose. Write as many as you can!

  • E.g. head, body, img, etc

HTML Essentials

What is HTML?

  • HyperText Markup Language
    • Not a programming language! No loops, conditionals, etc
  • Tells your browser how to structure content (text, images, links, etc)

Elements

The fundamental building block of HTML is an element.

  • Can have an opening and closing tag
  • Or only a single tag

Tags are enclosed in angle brackets ( < and > )

The Document Type Declaration

At the top of every HTML page, we need to tell the browser what type of markup to expect.

<!DOCTYPE html>
  • The doctype tag is technically not an element.

The html element

All page content must go inside of the html start/close tags.

<!DOCTYPE html>
<html>
</html>

The head element

Content that doesn't directly relate to the way the page is laid out - including the styles and title - go inside of the head element.

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Page Title</title>
    </head>
</html>

The body element

The body contains all of the elements that will be displayed on the page itself.

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        This will appear on the page.
    </body>
</html>

Demo

Let's put it all together! Save the code snippet below and open it in your browser.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        Hello, World!
    </body>
</html>

HTML Page Elements

Anatomy of an HTML Element

Header Tags

Headers are used to set apart page, section, etc. headers.

h1 is a top level heading. We can use h1 to h6 for different sized headers.

<body>
    <h1>Why Dogs are Cool</h1>
    <p>Dogs are cool because...</p>
</body>

Paragraph Tags

The paragraph tag <p> is used to indicate a paragraph of text.

<body>
    <h1>Why Dogs are Cool</h1>
    <p>Dogs are cool because...</p>
</body>

The Address Tag

The address, or <a> tag, links to another web page.

  • href is an attribute that indicates the destination.
<a href="http://www.aspca.org">Adopt a Dog!</a>

The Image Tag

The img element is a self-closing tag. We often end it with / to indicate such.

  • Images must also have an alt attribute which describes the image in text.
<img src="http://makeschool.com/images/dog" alt="cute dog" />

Line Breaks

We can add a line break like so:

<br />

Bold and Italics

We can specify that text should be bold with the strong tag, or italic with the em (emphasize) tag.

<p>
    Dogs are <strong>fluffy</strong> and <em>playful</em>.
</p>

List Items - Unordered

We can make a bulleted unordered list with the ul tag, and add list items with the li tag.

<p>
    I like dogs because they are...
    <ul>
        <li>fluffy</li>
        <li>playful</li>
    </ul>
</p>

List Items - Ordered

We can also make an ordered list, starting from 1, with the ol tag.

<p>
    My favorite dogs (in order) are:
    <ol>
        <li>Husky</li>
        <li>Chocolate Lab</li>
        <li>Shiba Inu</li>
        <li>Golden Doodle</li>
    </ol>
</p>

Break [10 minutes]

HTML Forms

Why use forms?

  1. Collect data about the user
  2. Ask the user a question
  3. Login or registration forms

A Simple Form

<form action='/results' method='GET'>
  What is your name?
  <input type='text' name='firstname'>
  <br>
  <input type='submit' value='Submit!'>
</form>

Anatomy of a Form

Form attributes:

  • action: What URL am I sent to when I submit the form?
  • method: Is it a GET or a POST request?
<form action='/results' method='GET'>

Anatomy of a Form

Form element attributes:

  • type: What type of data am I collecting (e.g. number vs. text), and in what format?
  • name: What label am I putting on the data? Hint: This is kind of like a variable name!
  • value: What is the default value of the form element?
<input type='text' name='favorite_color' value='blue'>

Activity: Form Elements

Jigsaw Activity [30 min]

Get into groups of 4 or 5 and research a specific form element. Within your group, do the following:

  • Test out the form element in your browser. How does it work?
  • What attributes (such as name, value, etc) are required to use this form element? What do they do?
  • What query string results when you submit the form?

Every person in the group must be able to present the findings!

Form elements

Jigsaw Activity Pt. 2

Form expert groups around your table. Fill in the rest of your worksheet for at least four input elements.

Developer Tools

Demo

Homework

Resources