Skip to content

Instantly share code, notes, and snippets.

@mdang
Last active December 5, 2016 17:12
Show Gist options
  • Save mdang/0dfecd13eabcf44cddf1 to your computer and use it in GitHub Desktop.
Save mdang/0dfecd13eabcf44cddf1 to your computer and use it in GitHub Desktop.
HTML Lesson Notes

HTML

Lesson Objectives

  • Describe what a markup language is
  • Describe the anatomy of an HTML tag
  • List common HTML tags
  • Create a barebones HTML document
  • Explain the purpose of HTML attributes
  • List 3 types of attributes that all HTML elements have
  • Create HTML elements using tags and attributes
  • Include images on a webpage
  • Link from one webpage to another
  • Create nested HTML elements
  • Describe what semantic HTML is and why we use it
  • Create a table with rows and columns
  • List some basic form elements used for presenting or saving data
  • BONUS: Additional tags that should be included when building webpages

I do, we do, you do

Notes:

  • Periodically check for understanding as we go along
  • Scaffold the exercises to increase in complexity
  • Make students do the heavy lifting, ask plenty of questions

Class Question How many people here have created a webpage using HTML before?

What is HTML? (5 min)

HTML, or HyperText Markup Language, is used to describe web documents. It's called hypertext because you're able to jump from one document to another in a nonlinear fashion.

Markup languages are used to describe the logical structure of a document and contains instructions on how it should be laid out.

Invented by Tim Berners-Lee in 1990.

HTML provides the structure of the web page, while CSS (which we'll cover tomorrow) covers the appearance. You can think of HTML as the bones (structure) and CSS as the skin (appearance)

Anatomy of an HTML tag

< > /

List common tags used in HTML documents

  • html, head, body, meta, title

I Do (15 min) Create the barebones HTML document structure

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>

Explain the difference between doctypes, what to always use but beware of XHTML and HTML doctypes also

  • h1, h2, h3, h4, h5, h6
  • p, div, header, footer, nav
  • hr, br
  • ul, ol, li
  • span

I Do (30 min) Create HTML elements listed above and display for the class to see

You Do (5 min) Create a list of your favorite foods ranked from 1 to 5

What are HTML attributes?

Attributes allow you to customize a tag. Most attributes are optional, but there are some required ones like the "src" attribute for that are required in order for it to render correctly.

What 3 attributes are present in all HTML tags?

  • id
  • class
  • style

I Do (5 min) Go back to previous example and add classes/id's to them. Talk about good class names.

10 min break

Linking to files

I Do (10 min - 3:00) Add an image to a webpage

Be sure to explain both relative and absolute paths

You Do (5 min) Create a folder named "images" in your test area. Create two images, one with a relative link and one with an absolute link to an image hosted on another website.

Use something like the logo from ga.co

I Do (15 min) Create a link that leads to a page on your website and another webpage hosted somewhere else

Reiterate both relative and absolute paths

iframes

I Do (10 min) Show iFrames, add attribute like src and id's and classes

Class Exercise

You Do (15 min)

  • Step 1: Create a list with 4 links of cities in Texas
  • Step 2: Create an html page named "austin.html" in the same directory as your current test file. Create a heading for "Austin"
  • Step 3: Create a new folder named "other" and new index.html file within that directory. Create a heading for "Houston". Link to it
  • Step 4: Create a new file in the "other" directory named "dallas.html". Create a heading for "Dallas"
  • Step 5: Link to a website for "Amarillo"

What is semantic HTML and why it matters

  • Accessibility
  • Better search engine ranking
  • Easier to read and maintain code

I Do Illustrate why you would want to use "p" instead of "div" to describe the content

<!-- Bad -->
<div>This is the headline to the body of text</div>
<div>This is some text underneath the headline</div>

<!-- Good -->
<h3>This is the headline</h3>
<p>This is some text underneath the headline</p>
<!-- Bad -->
<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Good -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

I Do Formatting HTML with code indenting and comments

<div>
  <h3>Title</h3>
  <!-- This is a list of numbers -->
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Class Exercise (20 min)

Fix the world's first website to be more semantic

http://info.cern.ch/hypertext/WWW/TheProject.html

Class Exercise (15 min)

HTML Fix-it

https://github.com/ga-students/wdi-atx-9-class/tree/master/w01/d03/morning/fixit

Group Exercise (15 min) Go through code sample with a group and fill in the missing tags with semantic markup [CODE SAMPLE]

I Do Go over the document with the class and mark it up

Ask the class for suggestions on each section

Class Exercise 5 min) Go through Space Jam and note what should be changed - https://gist.github.com/mdang/861426ee741cae9377dd4122ae684b64

I Do Create a table to display tabular data

Life Optimizer 1.0

          | Bronze | Silver | Gold

--------------|--------|--------|------- Feature 1 | x | x | x Feature 2 | x | x | x Feature 3 | x | x | x

Forms

http://ga-wdi-exercises.github.io/html-forms-practice/index.html

BONUS

Common tags that should be present in all your webpages

  • tags for search optimization, language encoding, favicon.ico
  • Facebook search optimization tags
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Facebook Open Graph tags -->
<!--
For more info on FB Open Graph tag usage:
https://developers.facebook.com/docs/sharing/webmasters#markup

You can preview what your website will look like when it's shared here:
https://developers.facebook.com/tools/debug/
-->
<meta property="og:title" content="My Site Title">
<meta property="og:image" content="link_to_image">
<meta property="og:description" content="Site description">
<!-- This is only required if your favicon.ico file is not located in the root of the public site, or you wan tto use a different file name/png instead -->
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
</body>
</html>

Homework

Review the HTML elements you have available for use in your projects. Don't worry about knowing all of them, just get acquainted and get an idea for the sort of tags out there. http://www.w3schools.com/tags/ref_byfunc.asp

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment