1. Chapter 1 - Introduction to Web Programming
Creating a Website
Web Page Example
Central Role of Elements in a Web Page
HTML Tags
Structural Elements – doctype, html, head, body
head Element - title
head Element – meta
HTML Attributes
body Elements: hr, p, br, div
Cascading Style Sheets Preview
History of HTML
HTML's Governing Bodies
How to Check Your HTML Code 2
1. For all future slides where we want to provide verification of a construct, use these URL's:
(For both of them, scroll to the table of contents HTML Elements section or ctrl+f for a particular element.)
(a more succinct TOC for HTML)
CSS3:
JavaScript::
("This specification aims to document the differences between the ECMAScript specification and the compatibility and interoperability requirements for ECMAScript implementations in web browsers.")
DOM:
Anne van Kesteren from WHATWG ed me and said:
Sorry - There is not a single site reference for the DOM.
defines the foundation (e.g., className property for all elements)
defines the HTML-related DOM APIs for application development.
defines APIs around parsing and serialization (e.g., innerHTML and outerHTML).
2. In this chapter I demo these files:

2. Creating a Website Creating a website requires: A text editor.
Notepad++, SublimeText, Atom, or Vim are good choices.
The other tools are usually referred to as web authoring tools instead of text editors since they have built-in web functionality (e,g., WYSIWYG).
An upload/publishing tool.
Examples – WinSCP, FileZilla, DreamWeaver, Git
A web hosting service.
A browser. (See 1
1. The web authoring tools have WYSIWYG functionality.
What's that?
What you see is what you get.
More specifically, WYSIWYG means that when you're editing your text, you can see what your text will look like after it's uploaded to a website.
DreamWeaver and Visual Studio are more expensive, have lots of features, and are widely used in industry.
Visual Studio is in the lab, and you can get it free from Park's MS Imagine program.
You'll learn more about it when you go through the Visual Studio tutorial.
Visual Studio Community is Microsoft's free version of Visual Studio.
It has all the features of Visual Studio, but its licensing limits who can use it - not for businesses.

3. Web Page Example 1 2
To load the web page, enter the web page's URL in the address bar.
h1 element
hr element
p element
1. Here's the first web page that we'll implement.
Before I show you the code used for its implementation, we need to go over some preliminary concepts.
2. Note the URL.
What does URL stand for?
Uniform Resource Locator.
That's a terrible name - just remember that a URL is a website address.
div element

4. Central Role of Elements in a Web Page
All of the things you see below the address bar in the previous slide's web page are web page elements.
The first thing to focus on is the elements.
Then you add formatting with CSS.
Then, if you want, you can add other functionality with JavaScript (and/or other languages)
1. On the prior slide, I read the element callouts….
An h1 element is a web page heading.
There are other heading elements, h2 - h6, which I'll explain later.
h1 is the biggest heading.
hr stands for horizontal rule.
An hr element is a horizontal line.
p stands for paragraph.
A p element is a group of words that form a paragraph.
div stands for division.
A div elements is also a group of words, but it's more generic, so the words don't have to form sentences in a paragraph.
2. There are other elements as well, but they're not as obvious.
For example, there's a body element which is the entire white area under the address bar.
3. In the upcoming slides, I'll show how to implement each of the elements in this web page.
4. In Chapter 3, we'll describe how to use CSS, which stands for cascading style sheets , for formatting.
5. Later in the book, we'll describe how to use JavaScript.
For example, you could add a behavior to the h1 element, so when you click it, the paragraph turns blue.

5. HTML Tags
To implement the elements on the previous slide, use HTML tags…
HTML stands for Hypertext Markup Language.
A markup language uses explicit tags to define the contents of a document. For example, to define "very" as an important word in HTML, you would surround it with <strong> tags like this:
Caiden was<strong>very</strong> happy when her tooth finally came out.
1. What's the origin of the word hypertext?
"Hyper" refers to HTML's ability to implement hyperlinks.
A hyperlink is where you click on a link in order to jump to another document.
2. Typically, browsers will use boldface font to display text that's surrounded with strong tags.
3. You'll see in the Visual Studio tutorial that there are different modes for entering your HTML pages.
With the design mode, the tags are hidden.
With the source mode, you see the tags.
You are required to use the source mode.

6. HTML Tags
Some web authoring tools have a WYSIWYG option that lets you hide the HTML tags.
Unfortunately, in hiding the HTML tags, the author loses some control, and resulting web pages tend to be sloppy.
Even if a tag-hiding web authoring tool generates clean HTML code, in this course, I require that you enter all of your tags explicitly.
That ensures clean code and it also ensures that you learn HTML details so that you will be able to debug other people's web pages.

7. HTML Tags
Most, but not all, HTML tags come in pairs with a start tag and an end tag. For example, an <h1> heading tag looks like this:
<h1>Today's Weather</h1>
Tags are surrounded by angled brackets.
The opening tag (<h1>, above) is called the start tag.
The closing tag (</h1>, above) is called the end tag.
End tags start with "</".
The first entity inside a tag is the tag's type. In the above example, the tag's type is h1. 1 2
1. The h1 heading tag causes the enclosed text to display like a heading.
That usually means that the enclosed text will be boldfaced, large, and surrounded by blank lines.
Note that I said "usually."
The HTML5 standard often does not specify precise display characteristics.
Thus, not all browsers render tags in the exact same way.
There are six heading tags - h1 through h6.
h1 generates the largest headings and h6 generates the smallest headings.
Use a heading tag whenever you have a heading above other text.
Headings are usually at the top of the page, but they can be in the middle of the page as well.
[2. Heading elements use left alignment by default.]
3. In the Weather example, there's only one entity inside each tag - the tag's type, which is h1.
Later, we'll see examples where there are additional entities inside the tags. 3

8. HTML Tags
When a tag is discussed in general, without reference to a particular tag instance, it is called an element and it is written without the angled brackets. For example, when discussing the <h1> tag in general, refer to it as the h1 element.
There are two types of elements - container elements and void elements.
A container element (usually called simply a "container") has a start tag and an end tag, and it contains content between its two tags. For example, the h1 element is a container.
A void element has just one tag, and its content is stored within the tag. We'll see an example of that later on, when we get to the meta element.

9. Web Page Example 1 <!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="John Dean">
<meta name="description" content="Kansas City weather conditions">
<title>K.C. Weather</title>
<style>
h1 {text-align: center;}
hr {width: 75%;}
</style>
</head>
<body>
<h1>Kansas City Weather</h1>
<hr>
<p>
It should be pleasant today with a high of 95 degrees.<br>
With a humidity reading of 30%, it should feel like 102 degrees.
</p>
<div>
Tomorrow's temperatures:<br>
high 96, low 65
</div>
</body>
</html>
1. This is the HTML code that was used to generate the Kansas City Weather web page shown earlier.
I'll describe the different sections of the HTML code in the upcoming slides …

10. Structural Elements
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
</body>
</html>
The doctype construct at the top is considered to be an instruction, not an element. The html, head, and body constructs form the basic structure of a web page, and we refer to them as structural elements. You'll use these constructs as the basic framework for all of your web pages:
doctype, html, head, body
1. "Structural element" is not a formal term.
I use it to describe the really important HTML elements that you'll use as the basic framework for all your web pages.
2. See those 4 constructs in the HTML document skeleton?
I go back to the previous slide with the complete web page code and verify that that code mimics this skeleton code. 1 2

11. Structural Elements
The doctype instruction tells the browser what type of document the web page is. The doctype's html value indicates that the page is an HTML5 document, which is the current version of HTML.
The html element is a container, and it contains/surrounds the rest of the web page.
The head and body elements are also containers.
The head element surrounds the elements that are associated with the document as a whole.
The body element surrounds the elements that display in the web page.
Container elements must be properly nested, which means: If you start a container inside another container, you must end the inner container before you come to the end of the outer container. 1
1. See the html start and end tags on the previous slide? They contain the web page’s content.
We'll discuss lang="en" later.
2. On the previous slide, note how the head and body elements are properly nested within the html element. 2

12. head Element – title Example head container: title element:1
Example head container:
<head>
<meta charset="utf-8">
<meta name="author" content="John Dean">
<meta name="description" content="Kansas City weather conditions">
<title>K.C. Weather</title>
</head>
title element:
The title element's contained data (e.g., "K.C. Weather") specifies the label that appears in the browser window’s title bar.
The official HTML specification requires that every head container contains a title element.
The title element is a container (so it has an end tag). 2 3
1. This head section comes from the weather page, but I've omitted the style element.
The style element is more complicated, and I'll talk about it later in this chapter.
2. The head element contains two types of elements – meta and title.
In your web pages, you should position them in the order shown in the above figure, meta and then title. But in the interest of clarity, we’ll discuss the title element first….
3. I go back to the browser window slide and note the title bar.

13. head Element – title title element (continued):
Besides providing a label for your browser window’s title bar, what's the purpose of the title element?
Provide documentation for someone trying to maintain your web page.
Help web search engines to find your web page. 1
[1. A student asked whether <title>K.C. Weather</title> is an element or whether title by itself is an element.
It's common and acceptable to refer to both entities as elements.
HTML's underlying OOP implementation implements element as a class, title as a subclass, and <title>K.C. Weather</title> as an instance of the title class.
The title instance has syntax characteristics (<title>K.C. Weather</title>) as well as display characteristics (see the prior browser display slide).]

14. head Element – meta Example head container: meta element:
<meta charset="utf-8">
<meta name="author" content="John Dean">
<meta name="description" content="Kansas City weather conditions">
<title>K.C. Weather</title>
</head>
meta element:
meta elements provide information about the document as a whole.
The meta element is a void element (not a container) so it does not have an end tag.
Many web programmers end their void elements with a space and a slash. For example:
<meta charset="utf-8" />
The Google style guide says to omit the space and /.
There are many different types of meta elements - some you should always include, but most are just optional. 1 2 3
1. I've repeated the head container code from the previous slides.
Now let's discuss the other type of element in the head container - the meta element.
2. In common parlance, "meta" means self-referential.
Likewise for a web page, meta elements refer to characteristics of the web page itself.
3. See how there are no end tags for the 3 meta elements?
4. Don’t worry about the meaning of charset and utf-8 for now; we’ll discuss them shortly.
5. The / was a requirement for XHTML, which was the previous version of HTML, but HTML5 no longer requires it.
6. We'll cover a few of the different types of meta elements in detail shortly, but first I need to mention a characteristic of all meta elements - attributes… 4 5 6

15. HTML Attributes
Container elements provide information between their start and end tags. Void elements (including the meta element) have no end tags, so they can't provide information that way. Instead, they provide information using attributes. For example, note the charset, name, and content attributes in the previous slide's meta elements.
Most attributes have a value assigned to them. In the following example, note how the charset attribute gets the value "utf-8":
<meta charset="utf-8">
You should always surround attribute values with quotes, thus forming a string (a string is a group of zero or more characters surrounded by quotes).
Here's an example of a container element that uses an attribute:
<html lang="fr">
...
</html> 1 2
1. Note that it says "Most attributes have a value assigned to them."
Later on, I'll show you some attributes that appear by themselves, without a value.
2. If an attribute's value does not have any blank spaces, then the HTML specification allows the quotes to be omitted, but don't do it.
Proper style requires that you always include the quotes.
3. Attributes are more common with void elements, but they can be used with container elements as well….
4. The lang attribute tells the browser that the element is using a particular language for its content.
You can use the lang attribute for any element.
Here we're using it for the html element, so it means that the entire web page is using French.
I go to and show some of the other languages.
5. Why would you want to specify an element's language?
To help search engines find web pages that use a particular language.
To help speech synthesizers pronounce web page content correctly (speech synthesizers are discussed in Chapter 5). 3 4 5

16. head Element – meta Example head container:
<meta charset="utf-8">
<meta name="author" content="John Dean">
<meta name="description" content="Kansas City weather conditions">
<title>K.C. Weather</title>
</head>
The meta charset tag specifies a character encoding name. You should use the utf-8 value, because it designates that characters are encoded with Unicode, which all modern browsers understand.
What is the problem with omitting the meta charset tag?
Our HTML5 coding conventions document states that you are required to include meta charset and meta author tags, but the meta description tag is optional. 1
[1. UTF-8 (UCS Transformation Format—8-bit) is a variable-width encoding that can represent every character in the Unicode character set.
It encodes each Unicode value using one to four 8-bit bytes.]
2. From
If you omit it, you risk that characters in your content are incorrectly interpreted by a computer trying to understand your web page.
[Another problem, from
If you omit the meta charset tag, an older browser might default to the utf-7 character encoding, and that would allow a hacker to inject utf-7 encoded scripts into the web page to gain access to your site.]
3. See the description attribute's value in the head container.
Typically, HTML code is straightforward, so unless you've got tricky code, it's OK to omit the meta description tag.
But feel free to include it if you like. 2 3

17. head Element – meta
Most of the meta elements use the name attribute to specify the type of information that's being provided.
Common values for the meta name attribute:
author, description, keywords
Examples:
<meta name="author" content="John Dean">
<meta name="description" content="Kansas City weather conditions">
<meta name="keywords" content="KC, weather, meteorology, forecast"
What's the purpose of the meta author tag?
What's the purpose of the meta description tag?
What's the purpose of the meta keywords tag?
1. Often, the person who fixes or enhances a web page is different from the person who originally wrote the web page.
By specifying the author/programmer, the fixer/enhancer knows who to ask for help.
2. The meta description tag helps the person reading the code to learn the purpose of the web page.
Also, it helps web search engines (e.g., Google) find the web page.
3. The meta keywords tag also helps web search engines, by supplying specific words that users should enter to find the web page. 1 2 3

18. body Elements – hr, p, br, div1
The hr element (<hr>):
Is a void element.
Renders a horizontal line.
hr stands for horizontal rule. 2 3
1. We've covered the elements that appear inside the weather page's head container.
Now let's cover the elements that appear inside the weather page's body container.
I refer back to the weather page code.
We've already talked about the h1 heading element.
Now let's talk about the hr element.
2. What does a void element mean?
No end tag!
3. When a browser “renders” an element, it figures out how the element’s code should be displayed. To keep things simple, you can think of “render” as a synonym for “display.”
Go to the browser window slide and note the horizontal line.

19. body Elements – hr, p, br, div
Example p element:
<p>
It should be pleasant today with a high of 95 degrees.<br>
With a humidity reading of 30%, it should feel like
102 degrees.
</p>
p element:
Is a container.
Renders a paragraph.
Normally causes its enclosed text to have blank lines above and below it.
Style requirement – if its enclosed text is greater than one line, then put the p tags on separate lines and indent the enclosed text. 1 2
1. This p container code comes from the weather page.
2. Even though it's a container, the official HTML specification allows p's start tag to appear without its end tag.
But you should never omit end tags for container elements.
Why?
Because then it's more difficult for the browser and people reading your source code to figure out where the container ends.
3. See the surrounding blank lines on the displayed weather page.
4. See the example p element's indentation. 3 4

20. body Elements – hr, p, br, div
Example br element:
<p>
It should be pleasant today with a high of 95 degrees.<br>
With a humidity reading of 30%, it should feel like
102 degrees.
</p>
br element:
Is a void element.
Renders a line break.
Note that pressing the enter key (e.g., after "like" above) does not render a line break in the browser, but it does render a blank space.
Aside - if you reduce the browser window size, line breaks are automatically and temporarily inserted as necessary. 1
1. See the br element?
2. I load the weather page in VS and press enter after "like."
After saving the file, view the page on the web and note how there's a new line after "degrees.", but after "like" there's only a blank space.
3. I demo this automatic line wrap by loading any web page in a browser and pointing out the line wrap as I reduce the browser's size. 2 3

21. body Elements – hr, p, br, div
Example div element:
<div>
Tomorrow's temperatures:<br>
high 96, low 65
</div>
div element:
It's a generic container that simply represents a group of related text.
It normally causes its enclosed text to have single line breaks above and below it.
Style requirement – if its enclosed text is greater than one line, then put the div tags on separate lines and indent the enclosed text.
Except for single line breaks instead of blank lines, the characteristics above are the same as for a p element. So when should you use a p element versus a div element? 1 2
1. This code fragment comes from the weather page.
2. The name div comes from "division" because the line breaks create surrounding divisions.
3. Use a p element if the enclosed text forms something that would normally be considered a paragraph.
Use a div element if the enclosed text is related in some way, but the text would not normally be considered a paragraph.
By using the p element only for bona fide paragraphs, then the rest of the web page can process p elements as paragraphs, and avoid including non-paragraphs in that processing.
For example, you could use CSS (next slide) to indent each paragraph's first line. 3

22. Cascading Style Sheets (CSS) Preview
In the following code fragment from the weather page, note the style element within the head container. The style element provides formatting for elements in the page's body.
<head>
...
<style>
h1 {text-align: center;}
hr {width: 75%;}
</style>
</head>
<body>
<h1>Kansas City Weather</h1>
<hr> 1
CSS properties 2 3
1. I'll now introduce cascading style sheets (CSS), which is the way you add formatting to your web pages.
I'll have lots more to say about CSS later on - this is just a preview, so you're aware of the basic concepts.
[2. The official HTML specification does not require the type attribute with the style element, and if you don't include it, then a type value of "text/css" will be used by default.]
[3. The hr element spans its entire containing block, so if you want to align it, text-align does not help.
Instead, use the width property and also use margin-right: 0% or margin-left: 0%.]
4. Note the h1 and hr elements in the body and the h1 and hr rules in the style container in the head.
Each rule has a CSS property and a CSS value, separated by a colon.
For example, the first rule uses a text-align property with a center value (other text-align values are left and right).
Go back to the web page display slide and note how h1 is centered.
By default, h1 elements are left aligned, and the CSS rule overrides that default alignment.
Note how the hr element is centered and spans 75% of the width of the page.
By default, hr elements are centered and they span 100% of the page.
The CSS rule overrides the hr element's width.
CSS values 4

23. History of HTML 1
In 1989, to help with collaborative research at CERN (the European Laboratory for Particle Physics in Geneva, Switzerland), Tim Berners-Lee came up with the idea of adding “hypertext links” to research papers.
From , Berners-Lee:
Designed the hypertext markup language (HTML), with hypertext links as the key feature.
Designed the concepts behind the World Wide Web, including the HTTP protocol.
Created a prototype browser for surfing the Internet with HTML web pages.
In 1993, Tim Berners-Lee and Dan Connolly submitted the first formal proposal for HTML to the Internet Engineering Task Force (IETF).
In 1994, Berners-Lee founded the World Wide Web Consortium (W3C) at the Massachusetts Institute of Technology, with the W3C taking over the stewardship of the HTML standard.
[1. Much of this information comes from Wikipedia and

24. HTML's Governing Bodies
W3C stands for "World Wide Web Consortium."
The W3C's mission:
The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.
One of the W3C's most important functions is its stewardship of the HTML specification, but as you can tell from its mission statement, the W3C does more than just that. They provide lots of tools and guidelines that help the entire web community. 1 2 3
1. The 3 in W3C is for the 3 W's, World Wide Web.
As their name says, the W3C is a consortium.
What's a consortium?
A group of people who participate in a common activity in order to achieve a common goal.
Their mission specifies their activity and goal….
2. I copied that quote from the W3C website.
3. What's stewardship?
Control of something where you're interested in the public good.
4. For one of the homework exercises, you'll have to explore the W3C's website. 4

25. HTML's Governing Bodies
There are two governing bodies for HTML - the W3C and also the WHATWG, which stands for Web Hypertext Application Technology Working Group.
The WHATWG’s standard is deemed “living,” which means the WHATWG is free to make updates at any time, and they don’t bother to assign new version numbers to their standard when they do so.
That’s different from the W3C, which publishes new versions, with version numbers, only after they feel their updates are stable.
Because of the stable nature of the W3C's standards, we'll normally refer to the W3C's standards rather than the WHATWG's standard.
1. But that doesn't mean that the WHATWG is less important - it's very important and influential. 1

26. How to Check Your HTML Code
When writing your web pages, to make them efficient (fast) and easy to maintain, you should make sure that you follow the W3C's HTML5 standard, which can be found at:
To find information about an element, go to the above site, scroll to the table of contents, look for the HTML Elements section, and look for the element you're interested in. Then click the element's link to get details. 1
1. The HTML5 standard is very technical and has quite a bit of information you won't need. Normally, you'll use it to learn about an element.
2. To avoid all the scrolling, once you get to the site, press ctrl+f and enter the element's name.
3. I go to the site and look up the h1 and hr elements. 2 3

27. How to Check Your HTML Code
After you think you’re done creating or modifying a web page, you should check your work by running the W3C’s HTML validation service, which is at
1. I validate my weather page by entering in the validation service.
I then show how you can run the HTML checker on a locally stored web page (that's what you'll do for your homework projects):
I make a copy of f:\cs240\weather.html and name it test.html.
In test.html, I change </title> to <title> and move </p> below </div>.
On the validation service page, I load the local file, check the option to show the source, and then run the service.
I fix </title> and run again.
Why does the validation service complain about the </p> tag?
You're not supposed to have a div element inside a p element.
I fix the </p> element and re-validate the page successfully.
2. You can't use the validation service on a password-protected web page, so for your web pages on teach.park.edu, copy and paste the code directly into the validation service. 1 2

28. Chapter 1 - Quiz Questions
To specify the language of a web page's contents, use
a meta element (e.g., <meta type="english">
the language element (e.g., <language type="english">
the lang attribute (e.g., <html lang="en">
The Mozilla Firefox browser got its name "Mozilla" from:
a city near Microsoft's headquarters
a combination of the words Mosaic and Godzilla
the name of Firefox's inventor - Mohammad Zilla
a Batman protagonist who purrs his subjects into submission
#3: c
#4: b