Search
Search Menu

Login

This site is available only to JEA members. Please log in below.


Lesson: Basic HTML

Title

Basic HTML

Description

A lesson on basic HTML code

Summary

In this lesson, students will learn the basic structure of an HTML document, including the tags and containers, coding styles and ways to customize and embed media. Then, they will complete a sample coding exercise and explore the structure of how to create a HTML document.

Objective

  • Students will understand basic structure of an HTML document, tags and containers, coding styles and how to link to outside sources.

Common Core State Standards

CCSS.ELA-Literacy.W.9-10.8 Gather relevant information from multiple authoritative print and digital sources, using advanced searches effectively; assess the usefulness of each source in answering the research question; integrate information into the text selectively to maintain the flow of ideas, avoiding plagiarism and following a standard format for citation.
CCSS.ELA-Literacy.CCRA.W.6 Use technology, including the Internet, to produce and publish writing and to interact and collaborate with others.

Partnership for 21st Century Skills — Student Outcomes

Skills P21 outcomes
Information Literacy Access and evaluate information
Use and manage information
Media Literacy Analyze student use of media

Length

Two 50-minute classes

Materials

Class set: Common HTML worksheet

Slideshow: HTML

Class set: HTML quiz

Class set: HTML practice rubric

Plain text editor or w3schools.com

Browser window
Some Free Text Editors Include: TextWrangler, TinyMCE, NicEdit, BXE, MarkItUp!, WidgEditor, EditArea, Cross Browser Rich Text Editor, Library Rich Text Editor, FreeTextBox

Web Sources

www.w3schools.com, W3C  or Common HTML Tags – http://www.w3schools.com/tags/default.asp

http://www.quackit.com/html_5/tags/html_comments_tag.cfm

Lesson step-by-step

Day 1

1. Slideshow — 50 minutes

Show the html presentation to the students, explaining the basic structure and syntax of HTML. If in a computer lab, students can work alongside during the “practice” slides, otherwise they can use paper to re-create the html pages that are part of the presentation.

Day 2

2. HTML quiz — 20 minutes

Provide the students the html quiz to test knowledge of html terminology, common tags and syntax.

3. Student practice — 30 minutes plus take-home activity

START ADDING CONTENT:  In a plain text editor, have students create a new document.   Students should copy the following code:

<!DOCTYPE html>

<!– Comment: The text goes here →

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

DOCTYPE is:

  • The purpose of the DOCTYPE declaration above is to tell the browser the version of HTML the rest of the document.  The code is written with a left angle bracket, an exclamation point, the word DOCTYPE in ALL CAPS, and the word HTML separated by a space in all lowercase and a right angle bracket.   It should be the very first thing in your document before any comments, even before any white space.

Comment

  • A comment – is introduced by a left angle bracket, and an exclamation point followed by two dashes and a space. <!– Comment: The text goes here –> Code within a comment will not appear on an HTML page.

HTML Tag <html>

  • An HTML tag, is at the beginning of an HTML page.  The tag is formed <html> with a left angle bracket and the word html and then a right angle bracket.  After the <html> code, attributes follow after until the end tag.
  • Elements after the <html> tag usually include the contents of head includes all of these elements, meta, title, link, and the contents of the body element includes these two elements, h1 and p, and the head element and the body element are both children of the HTML element.

Practice:

Activity: 20 minutes

  • Group students into groups of 2-3. Students will work collaboratively to create an HTML page using a text editor.  One member from the group of students should open up text editor and save as Web Page (.htm).
  • Students should use the sample code above to get started.
  • By saving it as an .htm format, browsers like Firefox, Safari, Chrome, and Explorer can be used to test the web page.
  • Students will be creating a web page about one of their “favorite” things (i.e., sport, book, movie, television show).  Student 2 will Student 3 questions about their “favorite” thing – 5Ws and H.  Student 1 will type the details of the interview the Who, What, Why, When, Where, and How.

3. Test/Present — 10 minutes

  • Students should save their .htm page to the desktop or their drive for easy access.  Once completed, students should open up browser window to see their web page.

4. Follow-up — take home exercise

  • Students should create their own “my page” .htm page.  The web page should describe their family, home, if they have pets, interests, etc.
  • Students will use the sample code above, but will also use <b> BOLD, <i> ITALICS to emphasize various words on their page.
  • Students should use a variety of headlines sizes as well. There are there are 6 levels of headings (<h1>-<h6>) – <h1> is the most important and the largest, while <h6> is the least important and smallest.

<h1>Level 1 heading using the HTML h1 tag</h1>

<p>Try changing the heading level to see the effect it has on the size of the text.</p>

  • HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes.

Here’s an example:

<p style=”background-color:orange;”>Do you like my background color?</p>

Students should print out their code and also bring a copy of the code so that it can be displayed within a browser window.