Ken Walsh

Web Page Design Foundations

1. Introduction to HTML

The Hypertext Markup Language (HTML) was originally invented by Tim Berners-Lee and marked the beginning of the Web. The original intent of the language was to share documents and it is therefore a document mark up language that defines parts of the document or web page. Today many languages and technologies are used on the web, but the web page as a whole is still held together with HTML which can reference just about any other digital technology. For more information on Tim Berners-Lee, see his W3C website.

The HTML language is made up of tags which tell the browser how to display information. Most of the tags include a begin and end tag which surround content that is to be displayed. The tags are delimited with < and > signs. As a simple example, if one wants to display a simple paragraph of text on a web page, he would use a <p> tag.

So the web page would have the HTML code:

<p>Here is the basic text of a paragraph.</p>

And the browser would display it for the user as:

Here is the basic text of a paragraph.

The things to note in the example is the use of the less than and greater than sign to show a tag, in this case the p tag, and the use of a beginning tag and ending tag to surround the text to display. A beginning tag, and ending tag, and its content together make up an element. The above example shows a complete p element including the p begin tag, p end tag, and the content of the paragraph.

In most documents, sections of the document have headings which are set off in a larger font. In html, those headings would be put in heading tags instead of p tags so they would be displayed larger by the browser. A high level heading would use the <h1> tag. A subheading within that section could use the <h2> tag. HTML defines the 6 levels of headings from h1 through h6.

So to combine a heading with some text, in HTML we could write:


<p>Here is the basic text of a paragraph.</p>

And the browser would display it for the user as:


Here is the basic text of a paragraph

The h and p tags are examples of tags that display content, but some tags are intended to tell the browse what to do. An example is the title tag which tell the browser what text to display on the tab of the browser when the page is being displayed. An example of the title tag would be:

<title>Here is the text to display on the browser tab!</title>

While the h and p tags demonstrate tags that display text information, a basic html document has an overall structure that includes a section for the text to display as well as other sections that direct the browser. See the example below that shows the minimum tags needed for an html web page, including the h and p tags used earlier.

<!doctype html>



    <title>Here is the text to display on the browser tab!</title>




    <p>Here is the basic text of a paragraph.</p>



The above set of tags is a minimal complete html or web page. The doctype tag is always the first line of the web page and it says that the web page is written for current HTML 5.0 standards, the version you should be writing for as of the last time I checked (12/8/2017). Although there may be some minor change to the standard, this appears to be a long term revision and may stay current for some years. After the doctype tag is the begin html tag. This, along with the end html tag at the end of the document, surround the html document.

Within the html document there are two sections, the head section and the body section. Notice that each of these sections have begin and end tags as well. The head section has directives for the browser, such as the title tag and the body section has the content to be displayed. Notice how the h and p tags we created earlier fit within the body tags and create the body element.

The indentation shown should be noted. While the browser does not care about the indentation and will display the information in the same way with or without it, it is easier for people to edit without making a mistake. One key to writing correct HTML code is that the beginning tags and ending tags always need to match in a similar fashion to opening and closing parenthesis in math. If the content between the beginning and ending tag is indented, it is easy for the eye to see that match pairs have been used.

At this point you may be asking, where are the files with the tags and how do they get on the web. The files can be created on any computer using a text editor or web page design software. A text editor is a program that writes files with just the characters that are shown on the screen. With a text editor, you would simply type the characters shown in the minimal web page example shown above and save the file with the extension html. The html extension means that the file is a text file that uses the html language. It is important to note that this would not work the same way with a Word Processor because a Word Processor save what you type as well as a bunch of information about how to format the information. That is why Microsoft Word uses the docx extension to tell the computer the file format is intended to be used by Word.

After creating the file, it would be moved to a web server to be viewed on the web. You could transfer it to an account you create on the web or, if you work for a larger company, they may have their own web server in their computer room.

You can however test your web page on your own computer. Just open the file in a web browser and it will interpret the html tags and display the page in the same way that it would if it were on a web server.

Something to keep in mind when typing in any programming code is to type relatively small amounts of code and then test them. If you type a large amount of code and it does not work, it can be hard to find the problem. This short video has some tips on using a text editor to type your first page.

The W3C, the standards making authority for HTML, is beginning to convert their reference material into tutorials. See their "Week 1" tutorial which covers similar material to this Introduction section. In the W3C Week 1 material they also cover the list tag in their basic content section. Check out their description. This tag is a little different that the p and h tags because the list as a whole has begin and end tags and each item in the list has begin and end tags (W3C List Tutorial).

Although most tags have matching begin and end tags, a few are just single tags. The <hr> tag is a single tag that draws a line like the one show below.