Module 2

Introduction to
HTML
HTML TEXT MARKUP

This slideshow supplements the material in Chapter 2 of Web

Development and Design Foundations with HTML5

1
 Agenda
1. Organizing Website Files and Folders Module 2 in a Text Form
at
2. HTML Tags and Elements
3. The Framework for a Web Page Lab Instructions
4. HTML Text Markup
5. Making Lists with HTML
6. HTML Semantic Elements
7. The <div> Element
8. HTML Entities (including the Copyright Sym
bol)
9. Website Links with the Anchor tag <a>
10. Lab

2
Read Chapter 2 in the textbook before you start
this slideshow.
At the end of Module 2, you will know another
language.
What do you see in this picture?
It's a lot of work to go up hill,
but the best is yet to come.
Enjoy the Challenge of Coding
1. Positive Self-Talk—Believe
that you can do it!
2. See the challenge as a part
of meeting a future goal You can
3. Send yourself positive
messages in code do it!
4. Power pose (See the next
slide.)
5. Rest and try again later
6. Ask for help.
7
 What is the power pose?
Read about it
Organizing Files and Folders
On a scale
of 1-5, how
clean is your
workspace?

Spotles Disaster
s
 So, if my desk is messy, why do I have to keep my website files
organized?

Because the website files refer to each other, and you need to know
where they are.

Even if you don't keep the rest of your world organized, you must keep
your website folders and files organized.

When I help students with the lab and they say the code isn't working,
the problem is frequently that they are working in the wrong file in the
wrong place.

The most likely reason your website doesn't

work is because you don't have your folders
and files organized.
 What are 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. Good folder names
Rule 1: Use only lowercase letters (a-z), numbers susan-metoxen
(0-9) and put a dash between each word. portfolio-website
Rule 2: Never use spaces or special characters,
except a dash.
Bad folder names
Rule 3. Put a dash between each word. This
helps search bots in reading your folder or file Susan Metoxen
name. myclassfolder
Note: In other programing languages you susan_metoxen
may have used camelCase or underscores.
susanMetoxen
Do not use these in folder and file names
for HTML and CSS.
Why is this a bad folder name?

my website project
 URL with Folder "my project
name"

Your website files and folders display in the URL for the
web page. Everytime you use a space, the URL inserts
%20.

Don't use spaces in your folder and files names.

 The websites Folder
Documents
In order to keep their websites organized,
developers create a folder named "websites" on websites
their computer for their websites.
joystick-junkies
Each time you make a new website, you create a
portfolio
folder for it in the websites folder. In the example
at right, there is an overall websites folder with [Link]
three websites inside of the websites folder.
templates
Placing the websites folder in the Documents
[Link]
folder is a good idea. The key is to remember
where you placed it and always use the
same folder.
 Each Website Has Its Own Folder

Documents
Each website you make will have its own folder in
the websites folder. In Module 1 we made a file websites
called, "[Link]", and we will create a folder
for it called, "portfolio". (We will add to the joystick-junkies
Portfolio website in Modules 9 and 10.) portfolio
Today we will add a "templates" and a "joystick- [Link]
junkies" folder for two new websites.
templates
[Link]

Optional: Read my blog post on how websites files and folders work together.
[Link]
Demo: Organizing your website folders and files 2.1

Click the PLAY button

Note: There has been a change

to the curriculum since this
video was created. Instead of
making a "pacific" folder, make
a "joystick-junkies" folder.
 Exercise: Organize folders

Step 1. Create a folder for your websites called, "websites". A

good place for your websites folder is your computer's Documents
folder. (Put the folder on your computer, not in One Drive. If you are Documents
borrowing a computer, put the websites folder on your flash drive.)
websites
Step 2. Create a folder inside your websites folder called
"portfolio" on your computer. Find the [Link] file from Module
joystick-junkies
1 and move it into the "portfolio" folder. portfolio
Step 3. Inside your "websites" folder create another folder called [Link]
"joystick-junkies". We will be working in the "joystick-junkies" folder
for the Module 2 lab assignment.. templates
Step 4. Create another folder called "templates" [Link]
Step 5. Open your text editor, and create a file called "[Link]"
and save it in your "templates" folder. (In Windows, be sure to save
as an html - hypertext markup language file.)
Set Up Files and Folders

If you skipped the exercise in the previous slide, go

back an do it now. This is part of the lab for this
module.

When going through the slideshow, look for the

"Let's Do It" sticky notes and take a moment to try
the exercise.
HTML Tags and Elements
 What is HTML?

●HTML is a markup language

<p>This is an HTML Element.</p>
●The <p> and </p> tags are the markup

21
HTML Tags

22
 HTML Element

<p>The HTML Element includes the

tags and everything in
between.</p>
 Pop Quiz
Which part(s) are tags?
Which part(s) are elements?

<p>What is an HTML tag?</p>

 Pop Quiz Answer
Which part(s) are tags?
Which part(s) are elements?

<p>What is an HTML tag?</p>

<p> is an opening tag. </p> is a closing tag.

The tags plus the text between them is the HTML element.
 The
Framework
for a Web
Page
 Required Framework for a Website

In Module 1, we did a bit of HTML work

without adding in the required code to set up
a website. Now we need to do it the right way.

Take a deep breath. There is a lot of code

coming your way. But you only need to type
all of this one time and you don't need to
memorize it.

While you don't need to memorize it, you do

need to know what each element is used for.
We'll keep all of this code in a template so
you only have to type it one time.
DOCTYPE: Document Type Definition
<!DOCTYPE html> is placed at the top of each html file.
<!DOCTYPE html> is how we define the HTML document
starting with HTML5.

Before HTML5, the Doctype was more complicated, and you may see it on some older websites.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

[Link]

28
 Web Page Structure
This is the structure of a web page. <html>tags wrap the
entire website except
<!DOCTYPE html>
the DOCTYPE.
<html lang="en">
<head>
Set the language in the
<title>My Cool Website</title>
<meta charset="utf-8">
opening html tag. "en"
</head> is for English.

<body> The head and body

<p>This is my website</p> elements go inside of
</body> the html tags.
</html>
29
 Head & Body Sections
The <head> section and the <body> sections of a website each have their own
purpose.

Head Section Body Section

<head> <body>
Contains information that Contains text and elements that
describes the web page document display in the web page document
<body>
<head>
<h1>Hello World!</h1>
/*Meta data goes here*/
</body>
</head>
30
 Web page charset
● The charset HTML attribute specifies the character
encoding for the HTML document.
● It goes into the website <head></head> as
metadata

<meta charset="utf-8">

Unicode Transformation Format - 8 bits (utf-8)

What is utf-8 encoding?
 Web page <title>
This is
where
the page
● The title appears in the title
displays
browser bar
● It is important for Search
Engine Optimization (SEO)
● It goes into the website
<head></head> as
metadata

<title>Template</title>
Use "[Link]" for the Home Page File Name
The website home page is always named "[Link]".
When the user types in a domain, eg. [Link],
it assumes that the home page is named, [Link] and
shows the web page [Link]
If you home page is named something else, like "[Link]",
the browser doesn't know what page to load.

(If you learn the PHP language, the home page will be [Link] instead of [Link].)
 Putting It All Together

This is the code we

have covered so far.

In the next slides, we

will add this code to
your website
template.
 Demo: Set up your web page 2.2

Click the PLAY button

Note: I recommend naming your

template file "[Link]"
instead of "[Link]". That
is a change from this video. The
reason for that is that when you
copy it to a new website you
don't have to rename it.
 Exercise: Add HTML
[Link] in the template
folder
Step 1. Create a file named "[Link]" in
your websites/template folder. (On Windows,
save as a Hypertext Markup Language or HTML
file).
Step 2. Add <!DOCTYPE html>
Step 3. Add the <html lang="en"> </html>
tags. Note that the closing tag goes at the end
of the page.
Step 4. Add the <head></head> tags
Step 5. Add the <body></body>tags
Step 6. Add title and meta-charset to the
<head>
<meta charset="utf-8">
Note: We are putting this code into our template so we have it handy when we need to
<title>Website Template</title>

create a new website. Check to make sure your code looks exactly like the code in the
screenshot.
36
Add Code to Template

If you skipped the

exercise in the previous
slide, go back an do it
now.
 What code do we place in our
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 type code that you want to type
once in your lifetime, like the <!DOCTYPE html> and some of the
metadata. We'll keep adding to the template in future modules.

Note: On the videos, I named the website template file, "[Link]". That created a hassle for students,
who later needed to rename the file, "[Link]" when we created new websites from the template. I
recommend naming the template "[Link]", so that when you copy it, you don't have to rename it. Since
it will be in the template folder, you will know what it is.
HTML Text Markup
 Heading tags
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Think of the Heading Tags as an outline. Every web page should have one <h1>
heading that is the title of that web page. The major category headings are in <h2>
tags, and the minor category headings are <h3>.

40
 Purpose of Heading Tags
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.

(On a side note, I rarely use <h4>, <h5> and <h6> tags. But
they are there if you need them. )
 <h1> Tag is Typically the Page
Title

The <h1> tags is used for

the name of the page.
However, for some of the
early lab assignments we
don't have a logo. <h1> tag and page
Therefore, we will be title
using the <h1> tag for
the overall website
header in lieu of a title for
some websites.
Demo: Add heading tags to your template 2.3

Click the PLAY button

 Exercise: Heading tags
Add a heading 1 and heading 2 element to your HTML file
in the template folder. Place the heading tags between the
<body></body> tags.

Save and view them in a browser.

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

44
 <p> 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.
All of the text on a web page should have some markup. <p> tags
would be the default markup.

<p>If debugging is the process of removing software bugs, then

programming must be the process of putting them in.</p>
 Line Break Element <br> When typing
an address,
The line break <br>starts a new line without adding extra space. you don't want
to have the
extra <p>
◦ The <br> tag moves the text to display on a new line without extra space, so use
space. a <br>
◦ The extra space around a paragraph comes from default margin instead
spacing. (We'll start to learn about margins in the next module.)

The video on the next page shows you how to use <br> tags.

There are <p> tags

around each paragraph.
The <p> tags add some
spacing around each
paragraph.

46
 Demo: Text Markup using <p> and
<br> 2.4

Click the PLAY button

 Exercise: <p> and <br>

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>?

48
 Self-Closing Tags
● 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.

HTML4 used <br/> and <hr/> and HTML5 uses <br> and <hr>. The
change was made because removing the / requires less typing.

49
 Horizontal Rule
The horizontal rule tag is <hr>

<hr> is a self-closing tag

50
 Common Markup Elements
● <b> or <strong> for bold text
● <em> for italics
● <small> for small text, like in a footer
 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
 Nesting Order Example
What is wrong with this code?
<p><em>Call for a free quote:
<strong>888.555.5555</em></strong>
</p>
The code is not nested correctly. The closing
</strong> tag should be before the closing
</em> tag. Whatever is opened first is closed
last.
Making Lists with HTML
 Three ways to make lists
1. Unordered List <ul></ul>
Bulleted list

2. Ordered List <ol></ol>

Numbered list or outline
3. Description List <dl></dl>
Definitions list

55
Demo: Create an unordered and ordered list 2.5

Click the PLAY button

Exercise: Unordered List
Note the nesting and indenting of the list items.

57
Exercise: Ordered List

58
HTML Semantic Elements
 Semantic Elements
The semantic elements are new with
HTML5, but they have become very header Element
important for Search Engine <header></header>
Optimization (SEO). nav Element
<nav></nav>
The semantic elements describe the
structure of the content for the browser. main Element
<main></main>
For this class, use a minimum of the four
footer Element
semantic elements at right on each web
page. <footer></footer>
 Header, nav, main, footer

Go to a website of your choice.

What is the header?
What is the nav?
What is the main?
What is the footer?
<header>

<nav>

<main>

Note that the header, nav and

footer will be the same on every
page. The main section will be
different on every page.

<footer>
<header> <nav>

<main>

This is another common layout, with the <nav> next to

(or inside) or the <header>
 Demo: Semantic Elements 2.7

Click the PLAY button

 Exercise: Semantic Elements

Step 1. Open your

template/[Link] file
Step 2. Add the structural elements
inside of the body tags

At this stage, your [Link] file in the

template should have the code at right. If you
would like to keep your other code, place it in
the <main> section. (You may delete it if you
prefer.)

65
 <head> <header> and headings (h1)

The developers who created HTML

unfortunately used similar names
What
for different parts of the web page. were they
It is easy to mix them up. thinking?
<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.

Take a moment to make a mental note of

the three similar words.
The <div> Element
 <div> Element
● A <div> is a “division”
● <div> elements are used to apply a class, id or style to
differentiate from the text from other code, like with a
textbox on a webpage
● We'll cover how to add classes to an element the next
module.

68
 The <div> Element is VERY
Common
Most websites use a LOT of <div> [Link] can see them in the Chrome Inspector. The website below
has more than some websites. It has more because it was created with a Content Management System.
HTML Entities for Special Characters
 Special Characters
Character Code When you are working in
© a text-editor, you need to
&copy; code special characters.
< &lt; The special characters are
> &gt; called HTML Entities.
& &amp;
You can find a list at WP
&nbsp; Schools.
[Link]
.com/html/html_entitie
[Link]
71
 &nbsp;
Use &nbsp; for a non-breaking space
In websites, we use it to make additional space between
words, since extra spacing is ignored in the browser.
Demo: Add a footer with the copyright HTML Entity 2.8

Click the PLAY button

 Exercise: Add Copyright

•Open your template html file

•Add a copyright to your footer with the &copy;.
See the screenshot below.
•Add the <small>tags around the footer.
•Save and view your footer in the browser.

74
Add Code to Template

If you skipped the

exercise in the previous
slide, go back an do it
now.
 Website Links with
the Anchor <a> Tag Links
 The Coolest Thing in Module 2…

…We are going to learn how to make website links! Website

links are what drive the Internet.
 Use the <a> tag to make links

The anchor tag <a> is used to make links to

another website or webpage.

They are called "anchor" tags because when

the Internet was young they were used to
anchor key places in the text. Now they are
mostly used to link to an entirely different
page or perhaps to an entirely different
website.

<a> tags are the coolest code in this

module because instead of just affecting the
display, <a> tags actually do something.
 How to use the <a> tags
● Text between the <a> and </a> is displayed to
your website visitor
● <a> tags requires the href attribute
○ BTW...What's an attribute? (See the next
page.)
○ href = hypertext reference

<a href="[Link] Paul College</a>

This is the url. This tells The text between the
the browser where to <a></a> tags is what is
go when clicked. displayed in the browser

79
 Attributes...
● Are used to modify the element
● Provide more functionality
● Go inside of the opening tag, like we just did with the href attribute

We will be learning a lot more attributes. Here are some examples we have
already used. The attributes are highlighted in yellow.

<a href="[Link]">Favorite Pets</a>

<html lang="en">

80
Absolute and Relative Links
Absolute links
◦ Link to a different website. Note that you need the full url,
including https.
<a href="[Link] 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="[Link]">Home</a>

Understanding relative links can be a difficult concept,

but it is critical that you understand them. See this blog
post for more explanation: Read About Relative Links
81
 Demo: Absolute and Relative Links
2.9

Click the PLAY button

Exercise: Relative Links in Nav
Step 1. Open your template/[Link] file
Step 2. Add relative links into your navigation <nav>

<nav>

<a href="[Link]">Home</a>

<a href="[Link]">Contact</a>

<a href="[Link]">About</a>

</nav>

Step 3. Check the links in a browser. You will see they

are rather close together.

Step 4. Add a bit of space with the non-breaking

space HTML entity. &nbsp;&nbsp;

83
 Exercise: Absolute Link
Step 1. Work in your [Link] file
Step 2. Add an absolute link into your <footer>. The http or https is required for
absolute links. Add a <br> tag after the link so that it breaks to a new line.
<a href="[Link] Paul College</a><br>

<a href="[Link] Ramsey Community

College</a><br>
Step 3. Click on your link in the browser to check to make sure it works

84
 Exercise: EMail Hyperlink
Automatically launches the default mail program
on the user's computer.

<a href="[Link]
Me</a><br>
Add it to the footer in your [Link] file

85
 Template

We have been adding code to the

template throughout this
slideshow. Check your template
against this one to make sure you
have put everything in.
 Fill In the <main> Section
Step 1. Add an <h1> tag to the main section

Eg. <h1>PAGE TITLE</h1>

Step 2. Add some placeholder text in <p> tags. Copy this text for placeholder text.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque
dignissim enim sit amet venenatis urna cursus eget nunc. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Iaculis nunc sed
augue lacus. Egestas tellus rutrum tellus pellentesque eu tincidunt. Mi tempus imperdiet nulla malesuada. Viverra nam libero justo laoreet sit amet.
Morbi quis commodo odio aenean sed. Nulla facilisi cras fermentum odio eu. Aliquet nibh praesent tristique magna sit. Arcu risus quis varius quam
quisque id diam. Diam in arcu cursus euismod quis viverra. Amet est placerat in egestas erat imperdiet sed euismod nisi. Malesuada bibendum arcu
vitae elementum curabitur vitae. Ipsum nunc aliquet bibendum enim. Accumsan sit amet nulla facilisi morbi.</p>
 Check Your Template

This is what we have in the

template so far. We will
continue to add to the
template over the next several
weeks.
Template Work Is Required

If you skipped the

exercise in the previous
slide, go back an do it
now.
Lab
Lab Series: Joystick Junkies
For the lab today we will start
the Joystick Junkies website.

We will add to the Joystick

Junkies website in Modules 2-6.
The screenshot shown at right is
what the website will look like
after Lab 5.
 How to compress (zip) your folder

To submit your lab assignments on D2L, compress your "websites"

folder and upload the .zip file.
● Mac Instructions: Right click on the folder and choose compress.
● Windows : Click here for instructions

When you submit lab assignments, do not submit individual files.

Make a zip package of your entire "websites" folder. I am grading on

your work folder and file organization and on the template as well as
the Joystick Junkies Lab.
 Joystick Junkies Lab 2
1. Open up the Joystick Junkies instructions
2. Only complete Lab 2. The same document is used for
labs 2-6. You'll see the end of Lab 2 and know where to
stop.
2. Save your work. We will add to this website for labs 3-
6.
 Take the Module 2 Quiz
Now that you have finished the Module 2 slideshow, take
the Module 2 quiz in D2L.
● The quiz covers chapter 2 in the textbook and this
slideshow.
● I recommend that you take the quiz before you do
the lab assignment. The quiz is open book and will be
a helpful review before you start the lab.