Description
In this lesson on basic HTML code, 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. |
Length
Two 50-minute classes
Resources
Class set: Common HTML worksheet
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:
- Using http://www.w3schools.com/html/, students can learn more about HTML code and also practice using it.
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.