Objectives
- Introduce students to the fundamental concepts of HTML (Hypertext Markup Language)
- Enable students to create simple web pages using HTML
- Students will understand the importance of HTML in our technological world
Materials
- Computer with any text editor (notepad, textedit, visual studio code, etc)
- HTML Cheat Sheet
- CSS Cheat Sheet
Basic vocabulary
- Markup Language: A set of rules and symbols used when doing a markup of a document
- Web page: A document connected to the World Wide Web and viewable to anyone connected to the internet who has a web browser
- Syntax: The rules and arrangement of words to form comprehensible and recognizable commands
- Text editor: A system or program that allows a user to edit text
- Elements: Building blocks of HTML. Each element has a name and can have attributes that give it special properties
- Attributes: Extra information added to HTML tags to provide special information or additional properties
- Key: Knowledge held by either the sender, recipient, or both that allows them to decipher the cipher text.
- Tags: Surrounds elements and are enclosed in “<> ” brackets
Introduction
Begin by asking students which websites they visit most often or perhaps websites you utilize often in the classroom. Discuss some features that make each web page unique and appealing. For example, a very aesthetically pleasing color scheme, a sleek layout, or user friendly navigation.
Draw up a mock website on the board and have students fill it out with their ideas. They may choose where to put a header, a table of contents, format their contents, add images, choose colors, etc. Take the different ideas and opinions and discuss the pros and cons of conflicting ideas to create a class webpage.
HTML
Introduce HTML as a way to create a personalized web page with nothing more than a local text editor. The objective for this class for you as a teacher is to attempt to replicate the class webpage as closely as possible in your demonstration before allowing students to branch off and create their own pages.
Begin by instructing your class to open the text editor on their computers and copying the code block below into their text editor:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
For an optional line by line analysis of the code above:
- <!DOCTYPE html>
- Tells the browser that the file is an HTML5 document
- <html>
- Root element of an HTML page
- <head>
- Section containing the metadata of an HTML page such as title and link to external resources
- <body>
- Section containing the main content of the webpage
Save the file as <any name>.html. The important thing is that the file is saved with an .html extension. Locate the saved file and open it (you might need to right click and select “open with”), you should be redirected to a browser that displays your webpage.
After ensuring that the class is able to open their html file, you can play around with the title, heading, and paragraph. Make a change in your text editor, save it, and reopen the html file, and you should see the changes reflected in the browser.
Structural Elements:
For simplicity, only the opening tag is shown, but every opening tag must have a closing tag
- Headers
- <h1>, <h2>, <h3>, etc.
- <h1>: The largest and most important
- <h2>: Smaller than h1, but still important
- <h3>: Smaller than h2, and so on...
- Each succeeding header decreasing in size
- <h1>, <h2>, <h3>, etc.
- Paragraphs
- <p>, Used for paragraphs of text
- Lists
- <ol>, The actual list items are wrapped in <li>
- The bullet points are numbered
- <ul>, The actual list items are wrapped in <li>
- Ex.
-
<ol> <li>hello</li> <li>world</li> </ol>
Advanced (Optional): Styling your page
Create a new text editor file and save it as stylesheet.css. Ensure both the html files and css files are saved in the same folder. This might take some manual readjusting and movement of files.
In the HTML file, add the following line between the <head> tags: <link type="text/css" rel="stylesheet" href="/stylesheet.css"/>
Verify you were able to successfully link the two files by observing if changes in the .css file are reflected in the .html file. To do so, assuming you have a <h1> tag somewhere in your HTML file, place the following code block into your css file:
h1 {
color: red;
}
Upon reloading your webpage, your header should have changed to red!
If there is no change, make sure the two files are linked properly and in the same folder. Also check that BOTH files have been saved properly and you are opening the updated files.
With a CSS file, you can adjust layout, color, font, and add decorative features such as animations or columns. CSS works by specifying how an HTML element or elements look. For example, if you have an <ol> element, the CSS portion corresponding to it looks like:
ol {
Insert styling information here
}
Any element between <ol> and </ol> tags will be modified based on the styling information provided. This is called type selection and will be the focus of this class. Refer to the CSS cheat sheet for other selector types.
Using the CSS cheat sheet linked in materials, play around with changing your webpage and exploring the many different features you can incorporate. I recommend sticking to fonts and backgrounds for the lesson. Try different fonts/layouts/colors, and observe how your web page reflects the changes. Debug!! When something unexpected happens, trace your code and see if you can identify the issue. Google also has a lot of documentation on css.
Class Activity
Have the students create their own web pages using what they learned and the internet as a resource! Potentially introduce a theme: for example, create a holiday themed website, work on raising awareness of a current issue, create a diary/journal, etc
Bring the class back together and have them share their personal websites. Discuss the strategies they employed and the challenges they faced during the activity. Did anyone try something new? Discuss how they went about figuring how to code the feature and what resources they used.
Discuss real-world applications of HTML and web pages. What are the corporate and personal uses of web pages? How can a well made web page raise interest and increase user traffic. What would they use their own personal websites for?
In summary, HTML is just one of the many tools used in front end applications in the technical industry. It essentially builds the skeleton of any webpage, roughly fleshing out the contents and individual sections. With the blocky distinct structure of the elements that make up HTML, we can think of HTML as legos. Each individual element represents a block that we use to add a small feature to our overall build of many blocks.
Frontend work goes far beyond HTML. HTML is used in tandem with other languages such as css and javascript to really bring your website to life This interplay between languages allow for amazing and unique customization of your webpages!
Discussion
- HTML can be found in EVERY website (and even mobile apps) no matter how complex or the number of technologies used. Basic knowledge of it is very useful for every day applications, not just in computer science
- Blogs
- Corporate sites
- Personal Advertising
- Game sites
- Educational sites
- Design and marketing applications
- Appealing and interactive websites/emails play a large role in positive user feedback
- This opens up career opportunities in design, marketing, and even psychology as these skills combine with HTML to create the most attractive and eye catching sites
