Module 2-Introduction to HTML (Chapter 2).pptx

Introduction to HTML
1
This slideshow supplements the material in Chapter 2 of Web Development
and Design Foundations with HTML5 by Terry Felke-Morris.
HTML TEXT MARKUP
Module 2

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

Read Chapter 2 in the textbook before you start this
slideshow.

At the end of class, 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
3. Send yourself positive messages in code
4. Power pose (See the next slide.)
5. Rest and try again later
6. Ask your neighbor for help. Help your neighbor.
7

What is the power pose?
Read about it

On a scale of
1-5, how
clean is your
workspace?
Spotles
s
Disaster

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.
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.
● 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
have used camelCase or underscores. Do not use
these in folder and file names for HTML and CSS.
Good folder names
susan-metoxen
portfolio-website
Bad folder names
Susan Metoxen
myclassfolder
susan_metoxen
susanMetoxen

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. Everytime
you use a space, the URL displays %20.
Don't use spaces in your folder and files names.

Each 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 in the
websites file. 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.
Documents
websites
pacific
portfolio
resume.html
templates
index.html
Optional: Read my blog post on how websites files and folders work together.
https://webdevstudents.com/website-files-and-folders-explaining-the-magic/

Demo: Organizing your website folders and files 2.1
Click the PLAY button

Exercise: Organize folders
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 borrowing a computer, put the websites folder on your
flash drive.)
2. Create a folder inside your websites folder called "portfolio"
on your computer. Find the resume.html file from last week
and move it into the "portfolio" folder.
3. Inside your "websites" create another folder called "pacific".
We will be working in the "pacific" folder for the lab
assignment for this week.
4. Create another folder called "templates"
5. 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 (hypertext markup
language) file.
Documents
websites
pacific
portfolio
resume.html
templates
index.html

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 week. When
going through the slideshow, look for the "Let's Do It"
sticky notes and take a moment to try the exercise.
Some exercises, especially this week, involve
modifications to the template and I grade those.

What is HTML?
●HTML is a markup language
<p>This is an HTML Element.</p>
●The <p> and </p> tags are the markup
20

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 element?
<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 are the HTML element.

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 can reuse
it.
Required Framework for a Website

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"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
27

Web Page Structure
This is the structure of a web page.
<!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>
28
<html>tags wrap the
entire website except the
DOCTYPE.
Set the language in the
opening html tag. "en" is
for English.
The head and body
elements go inside of
the html tags.

Head & Body Sections
Head Section <head>
Contains information that describes
the web page document
<head>
/*Meta data goes here*/
</head>
29
Body Section <body>
Contains text and elements that
display in the web page document
<body>
<h1>Hello World!</h1>
</body>
The <head> section and the <body> sections of a website each have their own purpose.

Web page charset
● The charset HTML attribute specifies the character
encoding for the HTML document.
● It goes into the website <head></head> as metadata
Unicode Transformation Format - 8 bits (utf-8)
What is utf-8 encoding?

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

Use "index.html" for the Home Page File Name
The website home page is always named "index.html" in this course.
When the user types in a domain, eg. WebDevStudents.com, it
assumes that the home page is named, index.html and shows the
web page https://webdevstudents.com/index.html.
If you home page is named, "home.html", the browser doesn't know
what page to load.
(If you learn the PHP language, the home page will be index.php instead of index.html.)

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
Note: I recommend naming
your template file
"index.html" instead of
template.html. That is a
change from the videos.

Exercise: Add HTML index.html in
the template folder
1. Create a file named "index.html" in your
websites/template folder. (On Windows, save as a
Hypertext Markup Language or HTML file).
2. Add <!DOCTYPE html>
3. Add the <html lang="en"> </html> tags. Note
that the closing tag goes at the end of the page.
4. Add the <head></head> tags
5. Add the <body></body>tags
6. Add title and meta-charset to the <head>
<title>Template</title>
35
Note: We are putting this code into our template so we have it handy when we need to create a
new website. Check to make sure your code looks exactly like the code in the screenshot.

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 put 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, "template.html". That created a hassle for students, who later needed
to rename the file, "index.html" when we created new websites. That is why the slideshow and videos are inconsistent. I
recommend naming the template "index.html", so that when you copy it, you don't have to rename it.

Heading tags
<h1>Heading Level 1</h1>
39
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>.

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
On most websites, since
there is a logo, 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.
Therefore, we use the <h1>
tag for the overall website
name, and <h2> for the
name of the page.
<h1> tag and page title

Demo: Add heading tags to your template 2.3

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

<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>
The line break <br>starts a new line without adding extra space.
◦ The <br> tag moves the text to display on a new line without extra space.
◦ The extra space around a paragraph comes from default margins. (We'll
start to learn about margins next week.)
The video on the next page shows you how to use <br> tags.
45
There are <p> tags
around each paragraph.
The <p> tags add some
spacing around each
paragraph.
When typing an
address, you
don't want to
have the extra
<p> space.

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

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>?
Note: This is the technique you will
use for the lab to code the address
for the Pacific Trails Resort.
47

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.
48

Horizontal Rule
The horizontal rule tag is <hr>
<hr> is a self-closing tag
49

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 </strong>
tag should be before the closing </em> tag.
Whatever is opened first is closed last.

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
Let's try all three ways to make lists.
54

Demo: Create an unordered and ordered list 2.5

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

Demo: Create a Description List 2.6

Exercise: Description List
Open JSFiddle. Type into the HTML section:
<h2>Types of pets</h2>
<dl>
<dt>Dog</dt>
<dd>Domesticated canine</dd>
<dt>Cat</dt>
<dd>Domesticated feline</dd>
</dl>
We will be creating a Definition List in the lab assignment for
this week.
59

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

Exercise: Structural Elements
1. Open your template/index.html or
template.html file
2. Add the structural elements inside of
the body tags
3. Nest the <h1> inside of the <header>
At this stage, your index.html 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.)
66

<head> <header> and headings (h1)
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 or title.
<h1><h2>....are headings that go around
titles and subtitles in a web page.
What
were they
thinking?

<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 next week.
<div class="textbox">
<h2>Reptiles</h2>
<p>Reptiles include turtles, crocodiles, amphibians, lizards
and tuataras. </p>
</div>
69

The <div> Element is Common
Most websites use a LOT of <div> elements.You 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
© ©
< <
> >
& &
 
72
When you are working in a
text-editor, you need to
code special characters. The
special characters are called
HTML Entities.
You can find a list at WP
Schools.
https://www.w3schools.co
m/html/html_entities.asp

 
Use   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

Exercise: Add Copyright
• Open your template file
• Add a copyright to your footer with the ©
• Add the <small>tags around the footer.
75

Website Links with
the Anchor <a> Tag Links

We are going to learn how to make website links! This is the
coolest thing we will learn this week.
Website links are what drive the Internet.
One more big thing in Module 2…

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. (You can also use them
to link within a webpage.)
<a> tags are the coolest code we will add this
week. 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="https://saintpaul.edu">Saint Paul College</a>
80
This is the url. This tells
the browser where to
go when clicked.
The text between the
<a></a> tags is what is
displayed in the browser

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="favorite-pets.html">Favorite Pets</a>
<html lang="en">
81

Absolute and Relative Links
Absolute links
◦ Link to a different website. Note that you need the full url, including
https.
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, but it is critical
that you understand them. See this blog post for more explanation:
Read About Relative Links
82

Demo: Absolute and Relative Links 2.9

Exercise: Absolute Link
1. Open your template file
2. Add an absolute link into your <footer>
● The http or https is required for absolute links
3. Click on your link in the browser to check to make sure it
works
84

Exercise: Relative Link
1. Open your template file
2. Add relative links into your navigation <nav>
<nav>
<a href="index.html">Home</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</nav>
85

Exercise: EMail Hyperlink
Automatically launches the default mail program on
the user's computer.
<a href="mailto:me@mycoolwebsite.com">Email
Me</a>
Add it to the footer in your index.html file
86

Final 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.
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.

Check Your Template
If you skipped the
exercise in the previous
slide, go back an do it
now.

Lab Series: Pacific Trails
For the lab today we will start the
series of Pacific Trails exercises.
Pacific Trails is one of four exercises
the textbook uses to practice the
concepts in each chapter.
My alternative instructions have
more hints than the book
instructions. In addition, I have
some code that you can cut and
paste.

How to compress (zip) your folder
A website is a set of files in a 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. This week I am grading
on your work folder and file organization and on the template as well as the
Pacific Trails Lab.

Pacific Trails Lab Chapter 2
1. Open up the Pacific Trails instructions
2. Save your work...we will build on this lab for labs 3-5.

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
● This quiz will not be available to you after Thursday at 10pm.
The first quiz will close too.

Module 2-Introduction to HTML (Chapter 2).pptx

More Related Content

Similar to Module 2-Introduction to HTML (Chapter 2).pptx (20)

More from kamalsmail1 (10)

Recently uploaded (20)

Module 2-Introduction to HTML (Chapter 2).pptx

Editor's Notes