- 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
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?
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)
< > /
- 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
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.
- id
- class
- style
I Do (5 min) Go back to previous example and add classes/id's to them. Talk about good class names.
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
I Do (10 min) Show iFrames, add attribute like src and id's and classes
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"
- 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>Fix the world's first website to be more semantic
http://info.cern.ch/hypertext/WWW/TheProject.html
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
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>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