Module 2: Introduction to HTML - Web Dev Students (2024)

Enjoy the Challenge of Coding

In Module 2, we learn how to set up a web page in HTML and how to do text markup. At the end of this introduction to HTML you will have a great start at learning a coding language!

Learning a new coding language can be challenging, but life is full of challenges and this is one that will pay off for you. But before we begin, let’s review some things you can do if you start to feel overwhelmed with this new challenge:

1. Positive Self-Talk—Believe that you can do it!
2. See the challenge as a part of meeting a future goal
3. Send yourself positive messages in code. For example, type <h1>I can do this!</h1> in a text editor and look at it in the browser.
4. Rest and try again later
5. Ask a friend for help. Help your friend.

You can also try doing a Power Pose. There is some preliminary research into the pose and whether it can help you work through a challenge. (It won’t hurt to try it.)

Folders and Files

Management of website folders and files will be a repeating theme in this course. Websites are a set of folders and files that work together to make a website. What this means is that you need to be fastidiously organized with your website folders and files.

Why do we have to keep our website files organized? Because the website files refer to each other, and you need to know where they are. I have assisted hundreds of students with their websites, and I have found that the most likely reason your website doesn’t work is because you don’t have your folders and files organized. It can be quite a mess to clean up involving a lot of rework.

Good Folder and File Names

Website developers have rules for creating file names. Some of the reasons are by convention and some to avoid problems.

• Use only lowercase letters (a-z), numbers (0-9) and put a dash between each word.
• Never use spaces or special characters, except a dash.
• Put a dash between each word. This helps Google search bots in reading your folder or file name.

Note: In other programing languages you may use camelCase or underscores. Do not use these in folder and file names for HTML and CSS. Use a dash between words.

Good folder names

• susan-metoxen
• portfolio-website

Bad folder names

• Susan Metoxen – uses capital letters and a space
• myclassfolder – no dash between the words
• susan_metoxen – uses an underscore instead of a dash. This is used in other programming languages, but not for website files and folders
• susanMetoxen – uses camelCase, which is ok in other programming languages but not for website files and folders

Why can’t you use a space in folder and file names for websites?

The file and folder names appear in the URL for the web page. Every time you insert a space, the browser must change the space to “%20”. This is sloppy, and also can backfire in programming. For example a folder name like this:

my project name

Would appear in a URL like this:

Every time a space is used, the URL needs to replace the space with “%20”. That is why web developers never use spaces in folder and file names.

Every Website Has Its Own Folder

On your computer, decide where to place your overall “websites” folder. Placing it in the Documents folder is a good idea. Remember where you placed it.

Each website you make will have its own folder. Last week we made a file called, “resume.html” and we will create a folder for it called, “portfolio.

Today we will create a “templates” and a “pacific” folder for two new websites.

Watch Video Demonstration

In this video, I show you how to organize your websites into a folder named “websites” and create a folder for each “website” that you make. It also shows you how to create a file from Sublime Text and save it into the correct website folder.

Exercise: Organize Folders

Just like in the video, you need to set up your website folders for class.

1. Create a folder for your websites called, “websites”
2. Create a folder inside your websites folder called “portfolio” on your computer or flash drive. It must be all lowercase and no special characters except a dash.
3. Find the resume.html file from last week and move it into the “portfolio” folder.
4. Inside your “websites” create another folder called “pacific”. We will use that for the lab for this week.
5. Create another folder called “templates”
6. Open your text editor, and create a file called “template.html” or “index.html” and save it in your “templates” folder. (In Windows, be sure to save as an html file.)

What is HTML?

• HTML is a markup language. The acronym stands for Hypertext Markup Language.

<p>This is an HTML Element.</p>

• The <p> and </p> tags are the markup

HTML Element and Tags

<p>The HTML Element includes the tags and everything in between.</p>

We learned this last week, but these are the HTML tags.

The HTML Element is both tags and everything between them.

The Framework of a Web Page

There is a certain way you must set up the code in a webpage. This is the hardest part of this module, so hang in there while we get through it. We are going to put all of this into a template so that you won’t have to remember all of it every time you make a website.

1. DOCTYPE

DOCTYPE is short for Document Type Definition. At the top of every website you need to define the type of document. We define our website as HTML.

<!DOCTYPE html>

Before HTML5, we had a much longer DOCTYPE that you may run into on older websites. It looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

If you run into this older DOCTYPE you should change it to <!DOCTYPE html> since the code is obsolete.

2. <html></html>

Next on your website you will have the <html> tags. The first tag goes directly after the DOCTYPE, and the closing tag will be the very last thing on your web page.

One more thing about this tag: We need to specify the language of the website. We do this with an HTML attribute for language. The code looks like this, for the English language:

<html lang="en">

3. Head and Body

The rest of the website code is split into the <head> and the <body>. The <head> section contains information that describes the web page document. The <body> section contains text and elements that display in the web page document. So far, the code looks like this:

<!DOCTYPE html><html lang="en"><head> </head> <body> <p>This is my website</p></body></html>

4. charset

The charset attribute specifies the character encoding for the HTML document. It goes into the website <head></head> as metadata. It looks like this:

<meta charset="utf-8">

5. <title>

Every document needs a title, right? We have one more thing to place into the <head> of the website, the <title> of the page. The code looks like this. The typical way to do it is to first place the page name and then the title name, like this.

<title> Home :: My Cool Website</title>

The <title> you set for the page displays in the browser bar.

The page title is also very important for SEO.

Putting it together, it all looks like this:

<!DOCTYPE html><html lang="en"><head> <title>My Cool Website</title> <meta charset="utf-8"></head> <body> <p>This is my website</p></body></html>

How to Create an HTML Page

With this background, we are ready to start coding in HTML!

This video shows you how to create the framework for an HTML page, starting with the <!DOCTYPE html> and adding the website language in the <html> tag, then the <head> and <body>.

Exercise: Create a Web Page

Follow the steps in the video to make your own web page. Work in the template folder. If you don’t have a file named template.html or index.html, create that now. Here are the steps to take:

1. Add <!DOCTYPE html>
2. Add the <html lang=”en”></html> tags
3. Add the <head></head> tags
4. Add the <body></body>tags
5. Add title and meta-charset to the head, <meta charset=”utf-8″> and <title>Template</title>

Your file should look like the image below.

What code should I put in my website template?

1. Code that is used once per website and difficult to remember.

2. Structural code that you want to make sure is in every website.

The purpose of the template is to put code that you want to type once in your lifetime, like the <!DOCTYPE html> and some of the meta data. There is more of this code coming in future chapters. We will use the template as a starting point for Labs 7-14.

Note: On the videos, I named the website template file, “template.html”. That created a hassle for students, who later needed to rename the file, “index.html” when we duplicated the folder to create new websites. That is why this content and videos are inconsistent.

HTML Text Markup

Now that we have a web page, we can start adding some content with markup to it.

Heading Tags

(We did this in Module 1, so its a bit of a review.)

The heading you choose, eg. <h1> or <h2> affect the size of the text.

More importantly, the headings you choose tell the browser and search engines how the web page is organized and what is most important on the page.

Here are all of the heading tags.

In this video we are going to add some heading tags to our template.

Exercise: Add the <h1> and <h2> tags to your template

Working in your template folder, in your index.html (or template.html) file, add the <h1> and <h2> tags.

<h1>Heading Level 1</h1><h2>Heading Level 2</h2>

Paragraph <p> and Break <br> Tags

Most text on a web page is marked up with the paragraph tag, <p>. The <p> tag is the default tag to put on most text on a webpage. The code looks like this:

<p>If debugging is the process of removing software bugs, then programming must be the process of putting them in.</p>

In some cases, like on an address, you want to break the text to a new line, but you don’t want the extra space of a paragraph. You would code it like this with a <br> tag:

<p>Saint Paul College<br>235 Marshall Ave<br>St. Paul, MN. 55102</p>

This video demonstrates how to use the <p> and <br> tags to achieve the look that you want. You will be able to practice this in the lab assignment for this week.

Exercise: <p> and <br> tags

Type in the code as shown below to practice using the <br> tags.

1. Use the <br> and <p> as shown
2. Save
3. View in Chrome Browser
4. What is the difference between using a <br> and a new <p></p>?

Self-Closing Tags <br> and <hr>

<br> is the break tag

<hr> is the horizontal rule tag

• The <br> and <hr> are self-closing tags.
• Self-closing tags do not need to be opened and closed.
• For example the <p></p> tags need to be opened and closed because they aren’t self-closing tags.

Note: In HTML4 the syntax was a bit different. HTML4 used <br/> and <hr/> and HTML5 uses <br> and <hr>.

The horizontal rule can be dressed up with some CSS, which we will start to learn in Module 3.

CSS Tricks Horizontal Rules

Common Markup Elements

• <b> or <strong> for bold text
• <em> for italics
• <small> for small text, like in a footer

You can find more text mark up in Chapter 2 of the textbook or online. Here is a link to some markup elements on W3 Schools.

Nesting Order

Whichever element OPENS first CLOSES last.

<p> <em>Call for a free quote:<strong>888.555.5555 </strong> </em></p>

BROWSER DISPLAY:

Call for a free quote: 888.555.5555

Making Lists with HTML

There are three ways to make lists in HTML

1. Unordered List <ul></ul> is a bulleted list.

2. Ordered List <ol></ol> is a numbered list

3. Description List <dl></dl> is a list of definitions

Ordered and Bulleted (Unordered) Lists

In this video I demonstrate how to create numbered and bulleted lists in HTML. For each item in numbered and bulleted lists, you use the <li> tags.

Exercise: Ordered and Unordered Lists

First we will do the unordered list.

Now change the code to an ordered list.

Definition Lists

While definition lists aren’t used very often on websites our lab assignment for today includes one. The video below shows you how to code a definition list.

Exercise: Definition List

Be sure to save the code from this exercise. We will make a definition list in the lab assignment.

<h2>Types of pets</h2><dl> <dt>Dog</dt> <dd>Domesticated canine</dd> <dt>Cat</dt> <dd>Domesticated feline</dd></dl>

HTML Semantic Elements

The Semantic tags are new to HTML5 and a key part of the structure of a website. For this course your websites should have a minimum these four semantic tags on each web page:

• <header>
• <nav>
• <main>
• <footer>

Some websites you make may have more semantic tags, but virtually every website has at least these four.

Go to a website of your choice.

What is the header?

What is the nav?

What is the main?

What is the footer?

The semantic elements go around the various major sections of a web page, like this:

This video shows you how to add the semantic tags to your website template:

Exercise: Semantic Tags

Add the semantic tags to your website template. The code looks like this:

The text in white is just there for my convenience. When I copy my template to make a website, the text in white makes it a bit easier to find where to insert my content.

<head><header>and headings….It’s a bit confusing

The developers who created HTML unfortunately used similar names for different parts of the web page. It is easy to mix them up.

<head> This is where the metadata goes.

<header> This is a semantic element that goes around the website logo.

<h1><h2>….are headings that go around titles and subtitles in a web page.

The <div> Element

The <div> element is used to used to apply a class, id or style to differentiate from the other code, like with a textbox on a webpage. It’s a generic way to be able to select a part of a web page for stying. We will learn more about how to use divs in upcoming modules. The code may look something like this:

<div class="textbox"><h2>Reptiles</h2> <p>Reptiles include turtles, crocodiles, amphibians, lizards and tuataras. </p></div>

The code above may be used to select a textbox for special styling using an attribute class=”textbox” on the <div> tag. We will be doing a lot more with attributes, but for now you need to know the element for the lab assignment. The <div> tag may be the most used tag after the <p> tag in website HTML.

Most websites use a LOT of <div> elements.You can see them in the Chrome Inspector.

The website above has more than some websites. It has more because it was created with a Content Management System (WordPress) and a Page Builder (Beaver Builder).

HTML Entities and the Copyright Symbol

When working in a text editor, if you want to use a special character you need to use an HTML Entity instead of the special character. Here are some common ones:

In this video I demonstrate how to add a copyright tag to your footer.

Exercise: Add Copyright to Your Template Footer

Every website has a copyright, right? So we need to put this into our website template.

1. Open your template file
2. Add a copyright to your footer with the ©
3. Add the <small>tags around the footer.

Anchor <a> Tag Links

The coolest thing we learn this week is how to add links to a website. We are going to add links to our website template. Website linking is what brings the Internet to life.

The anchor tag <a> is used to make links to another website or web page. The text between the <a> and </a> is displayed on the browser screen to the website visitor. Th href (hyperlink reference) attribute tells the browser where to go if someone clicks on your link.

By the way, what’s an HTML attribute?

Attributes look like this:

Inside of the opening tag, you type a space, then the attribute. Attributes have a name, like “href”, then and equal sign, and lastly a value in quotation marks.

Absolute and Relative Links

The types of links that are used most often are absolute and relative links.

Absolute links

• Link to a different website

<a href=”https://saintpaul.edu”>Saint Paul College</a>

Relative links

• Link to pages on your own site. The relative link must be aligned correctly in the website folders.

<a href=”index.html”>Home</a>

Understanding relative links can be a difficult concept. See this blog post for more explanation: Read About Relative Links.

Email Hyperlink

When you click on an email hyperlink you open up the website visitors default email. To make them work, you add “mailto: ” in front of an email address, like this:

<a href=”mailto:me@mycoolwebsite.com”>Email Me</a>

In this video I demonstrate how to add links to the website navigation.

Exercise: Add an absolute and relative link to your template

1. Open your template file
2. Add an absolute link into your <footer>. The http or https is required for absolute links. Here is an example: <a href=”https://saintpaul.edu”>Saint Paul College</a>
3. Click on your link in the browser to check to make sure it works
4. Add an relative link into your navigation <nav> Example:<a href=”index.html”>Home</a>
5. Add an email link to your website footer: <a href=”mailto:me@mycoolwebsite.com”>Email Me</a>

Final Template

After the work we have done in this Module, your template should look something like the image below:

You may have something different in the <main> section. That’s fine, because you will generally delete the main section and start over on each web page.

Showing Your Folders in Your Text Editor

One more quick thing for this module. Since a website is a set of folders and files that work together, it is very helpful to be able to see your folders and files as you work. With Sublime Text there is an easy trick to make this work. This video shows you how to do it.

Lab: Pacific Trails

For this module’s lab we will be using the lab assignment in the back of the textbook. If you go to the exercises in the back of the book for Chapter 2, you will see the Pacific Trails exercise. Start by copying the work you did on your website template.

Frequently Asked Questions