"The Web" is short for "the World Wide Web". The Web is:
HTML stands for HyperText Markup Language. This markup language is a set of various special text instructions that tell a Web browser how to format and display information. These special instructions are called tags.
This is one of the things you need to keep in mind about a browser: it is a text processor that is designed to look for these special HTML tags and respond to what the tags are telling it (the browser). So your HTML pages are text files that have browser instructions (tags) in them, along with the information that you want to display.
Strictly speaking, HTML does not, by itself, tell the browser how the document will appear when the browser displays the document. It merely describes what is in the document. HTML has been "extended" by the browser makers to include formatting tags such as <font> and <center> to control the appearance of the page. But these "extension" tags are being phased out. The preferred way of controlling the appearance of the document is with Cascading Style Sheets (CSS), which you will see later in this course.
To reiterate: A browser is a text processor. What this means is that an HTML page is a text file, and the browser parses the page and formats the document based on the HTML commands (tags) that it finds. Parsing means analyzing and separating something (in this case, an HTML page) into its components (in this case, the tags and content of the page).
Let's review briefly the process by which a browser obtains and displays a Web page:
Each HTML tag consists of the markers (containers) that start and end the tag, and the HTML command that is in the tag. (An HTML command is an instruction to the browser to do something.)
The tag markers are the less-than symbol (<) and the greater-than symbol (>). Here is an example of an HTML tag:
<div>
Each regular HTML command has a part that "starts" (or "opens") it and another part that "ends" (or "closes") it. A tag like the one shown above, the <div> tag, is an "opening" tag, (it turns "on" the division command); and it has a corresponding "closing" tag (it turns "off" the division command) that looks like this:
</div>Notice the forward slash (/) just inside the beginning of this "closing" tag.
Some HTML commands do not have a corresponding "closing" tag. These tags are called "self-closing tags". An example of a self-closing HTML tag is the "break" tag, which looks like this:
<br>
You can look at an HTML reference page to see which tags are self-closing. For quick reference, here is a list of some of the most common self-closing tags:
In order to make an HTML Web page, you will need a text editor app or program which can save the document in plain text format.
If you are using a Windows PC or laptop, I recommend one of these editors:
If you are using a Mac or Macbook, here are some editors that you can try:
When you are typing the HTML "source" code for your Web page, such as the code displayed above, you can put as much or as little "white space" in your source code page as you wish. "White space" is the term for things that you type into your page so you can more easily see what tags are in the page, but which do not display on the Web page itself. Some of these "white space" characters are:
I highly recommend that you use as much "white space" as you need to easily see what tags are in your page. The browser will "eat" most of the white space anyway. More on that later.
An HTML page has two main sections:
The head section contains information about the page. The information in the head section is used by the Web server and the browser. The person who is viewing your Web page does not see any of the information in the head section -- except for the text that is in the <title>...</title> tag.
The body section contains the information, images, videos, and other things that you want to display to the person who is viewing your Web page.
Here is a basic (although not minimal) structure that a valid Web page can have. Please note that this page shown here is an HTML5 page. HTML5 is much simpler and more straight-forward than the previous version of HTML, which was XHTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="Introduction to designing and making Web sites">
<meta name="keywords" content="Web Design,HTML,CSS">
</head>
<body>
<div>
<header>
<h2>Page Heading</h2>
</header>
<section>
<h3>Section Heading</h3>
</section>
<footer>
<p>© Copyright 2019</p>
</footer>
</div>
</body>
</html>
This tag is required to tell the Web server and the browser what kind of page this is. The tag shown here is an HTML5 DOCTYPE tag.
This tag starts the HTML page itself.
The W3C has changed its thinking about how a browser should determine what language the page is using. Now the W3C wants the page to include a lang attribute in the <html> tag.
This tag starts the "head" section of the HTML page. The "head" section contains some other HTML tags.
The various tags that are located within the <head> section are called nested tags because they are contained by another tag -- in this case, the <head> tag (and the </head> tag, of course). Most of the information in the <head> section is about the document (meaning, this HTML page) itself, and is used by the Web server and the browser.
The tags most commonly used in the <head> section are:This tag starts the title of the page. The text in the title tag is what shows up in the title bar of your browser when you view the page. This title information is also used by many search engines as the link to your page.
The information in the <title> tag is the only information in the <head> section that is visible to the user.
(You may see this tag occasionally referred to as a "title meta tag". Since it is in the head section, and it does give information about the page, it is somewhat conceptually a meta tag, but not in the sense that it is an actual <meta> tag. It is a <title> tag.)
Here is an example of a <title> tag:
<title>
Cheap Dates Rock Band - Tour Info, Photos and Song Lyrics
</title>
This tag closes the title information for the page.
<meta charset="UTF-8">
<meta name="description" content="Introduction to designing and making a Web site">
<meta name="keywords" content="Web design,HTML,CSS">
This tag closes the head section of the page.
The <body> tag follows the closing </head> tag. The <body> tag encloses the fun/relevant/visible part of your Web page.
You can use comments in your HTML pages to give yourself clues about what you have in your page, especially if your page is very long and has a lot of sections in it. HTML comments look like this:
<!-- You can use comments, like this one, to remind yourself of what you are putting into the page. -->
Your content is contained by (meaning: inside of) the <body> tag. This requirement means that all of the other HTML tags that you put into the page are in the <body> tag.
For instance, if you wanted to add a paragraph tag to your page, you could put something like this in the body:
The <div> tag is the main generic "container" tag in a Web page. It may contain any other kinds of body tags, including other <div> tags.
The <header> tag contains content that is in the top part of the page.
HTML headings are a nice, simple way to emphasize portions of your text content. Also, some search engines give a bit more importance to text inside heading tags. But if you put too much text in heading tags, the search engines may penalize your relevancy rating, so don't overdo it!
Headings come in six sizes. The smaller the number in the heading tag, the larger is the heading. So heading 1 is the largest, and heading 6 is the smallest.
Here is how you code HTML headings:
<h1>This is heading 1.</h1> <h2>This is heading 2.</h2> <h3>This is heading 3.</h3> <h4>This is heading 4.</h4> <h5>This is heading 5.</h5> <h6>This is heading 6.</h6>
And the above samples look like this:
Please note that headings automatically add a line of space above and below the heading. In this sense, they behave very similarly to paragraph tags (<p>...</p>). And in fact, headings are block display elements, just like paragraphs (and divs).
The </header> tag closes the "header" element.
The <section> tag contains related content for a meaningful/semantic/thematic portion of the page.
The </section> tag closes the "section" element.
The <footer> tag contains content that is in the bottom part of the page.
The </footer> tag closes the "footer" element.
The </div> tag closes the "div" element.
This tag closes the viewable content section of the page.
This tag closes the HTML page.
Some other tags, which were introduced with the HTML5 Specification, are these:
Please note the following information about the <section> and <article> tags:
Your site's main and/or initial page should be saved as filename index.html since most Web servers are set up to look for index.html as the default initial page of the site.
I recommend that you use the file extension .html since some servers are not set up to look for .htm. So save the first page of your site as index.html to be safe.
A word of caution and advice: Pay close attention to where (in what folder) you save your page, on your local drive/storage!
And now a HINT about changing how Windows Explorer (the Windows file manager) displays filenames: Use these steps to instruct Windows Explorer to display the full filename, including the extension:
After you have saved your page to your computer or to some other storage device, you can use Windows Explorer (note: this is not Internet Explorer) to navigate to the page and double-click on the page's icon to open the page in a browser. Please note that when you view your page from your local storage (hard drive or some other storage device), you are not using a Web server to look at your page. You are using a browser, but not a Web server.
As I mentioned in a previous section, HTML pages are not displayed by the browser exactly as you type them into your text editor. This situation occurs because the browser "eats" certain characters such as spaces, carriage returns/linefeeds (Enter/Return), and tabs.
If you want the text displayed in your page to have a line break in it, you can use the <br> (break) tag to put in this line break.
For example, code like this:
This is line 1.<br>This is line 2.actually appears in the browser like this:
This is line 1.
This is line 2.
Note: If you are working in an older-style XHTML Web page, the break tag needs to have a closing slash in it, like this:
<br />
If you want your text to have a line break and a blank line between lines of text, you can either use two <br> tags or you can use a <p> tag.
For example, this code:
This is line 1.<br><br>This is line 2.appears in the browser like this:
This is line 1.
This is line 2.
And you can achieve the same effect with the <p> tag like this:
This is line 1.<p>This is line 2.</p>which looks like this in the browser:
This is line 1.
This is line 2.
But it is even better, and we will talk about this again later in the course, to structure these sample lines like this:
<p>This is line 1.</p> <p>This is line 2.</p>
which looks like this in the browser:
This is line 1.
This is line 2.
Please note that each sentence above is fully enclosed by (contained by) its own set of <p>...</p> tags.
Many HTML tags can have attributes, and these attributes have values. HTML attributes give the browser more information about what the browser is supposed to do with the tag. When we talk about Cascading Style Sheets (CSS) next week, you will see that attributes are crucial to how style rules do their formatting of the page, also.
All attribute values must be enclosed in a set of quotes ( " " or ' ' ).
For example, the <p> tag (and most other HTML tags, also) can have an attribute called id. (We will discuss what this attribute is used for, later in the course.) It is used like this:
<p id="firstParagraph">
Another attribute that can be used in many HTML tags is the class attribute. (We will discuss what this attribute is used for, later in the course.) It is used like this:
<p class="standardParagraph">
You can have More than one attribute in a tag. For instance, you can have both the id and the class attributes in a paragraph tag. This situation would look like this:
<p id="firstParagraph" class="standardParagraph">
You will see some weird characters in the <footer> section of the Basic Document Structure above: ©
These weird characters comprise what is called a "character entity" in HTML terminology.
A "character entity" is interpreted by the browser as a single character or symbol. In the document shown above, the characters © are interpreted and displayed as the "copyright" symbol.
Character entities becomes very handy if you ever need to display the less-than symbol (<) in a Web page. The problem with simply typing "<" into your document is that the browser interprets the < as the beginning of an HTML tag!
For the <, you use the set of characters < to tell the browser to display a less-than symbol (<), but not to actually consider it the start of an HTML tag. This particular character entity is extremely handy if you are trying to display HTML code in an HTML page, for instance.
There are many other character entities. Some handy listings of the available character entities for characters and symbols can be found at:
You should check your HTML pages to make sure all of the tags are properly typed in. You have many ways to do so. The best, and standard, validator is the W3C Validator.
There is one "feature" of the W3C validator that you need to be aware of: It complains about files that are uploaded from a local hard drive. Specifically, it complains that it can't find any text encoding information, which is normally provided by the Web server.
You have two possible solutions:
<meta charset="UTF-8">If you add this <meta> tag, your document will validate from a local hard drive by using the "Validate by File Upload" method on the W3C site.
Your site will eventually have a Sitemap page. The Sitemap page is an outline or list of all of the pages on your site.
Please NOTE: You don't currently have a Sitemap page. You will make this page later in the semester. (This seems like a good time to mention some general features of Web sites, which is why I mention it here.)
The Sitemap page of most Web sites has become a defacto standard page. There are two main reasons for your having a sitemap page in your site:
So when you update your Web site, don't forget to update your sitemap page if you have added or deleted pages, and/or you have re-organized your site! See the next section for a detailed outline of the updating process.
Now that you have created, saved, and validated your Web page, it needs to be uploaded to your Web server so other people can see it.
You can use your hosting service's File Manager if it has one. Following are some important hints regarding Freehostia's File Manager. (Other hosting services usually have a similar File Manager.)
The process of updating your Web site is not difficult, but you do need to pay attention to some important details.
Here is a brief list of the most important steps:
You can see your page on the Web server by selecting the
"Student Sites" link on the class site and then clicking your
Student Number in the bulleted list. Make sure you refresh/reload
your page with F5 (or Ctrl+R) to see the new version of your page!
You can also type your site's URL into the address bar of your browser!