An Introduction to the World Wide Web and HTML

Table of Contents:

• Background Information

  This info won't help you make better web pages, but it will help you better understand how the Internet began, what the web is, and how the web works.
  • Early computer networks
  • The beginning of the Internet
  • Tim Berners-Lee invents the World Wide Web
  • How Does the World Wide Web Work?

• HTML Basics

  What you need to begin to understand how HTML makes web pages.
  • HTML Overview
  • Web Page Structure
  • How to Validate Your HTML Code
  • Some Commonly used HTML Elements
  • Content vs. Style, or: So, you want to add color to your web pages...
  • Understanding folder hierarchies and file paths

• More HTML Tags

  Now you're ready to start learning how to add more things to your web pages, such as lists, hyperlinks, images, tables and so on.
  • Lists
  • Links
  • Images
  • Tables
  • Special Characters
  • CSS
  • Additional Resources

Early computer networks

Following the successful completion in 1945 of ENIAC, the first electronic computer, a number of more usable computers were built over the next several years. The 1950s was the first decade of growing use of computers in business, government and education. But computers were still very large and very expensive, so it was important to be able to maximize their use.

In the early 1960s, computer engineers figured out how to connect multiple computers together into computer networks, which allowed organizations to share valuable computer resources such as printers and file storage. These networks might connect several computers in a building or even between several buildings in one location, but they could not connect computers that were more than a few hundred meters (yards) apart.

The beginning of the Internet

During the cold war era of the 1960s, the U.S. government decided it needed a nation-wide computer network that could help in case of war —and be able to survive a possible nuclear attack! It was developed as a military project by ARPA, the Advanced Research Projects Agency, and so it was called ARPAnet. ARPAnet first connected four university campus networks across the country.

The Internet grew directly out of ARPAnet –and other networks that developed during the next 20 years. The Internet is called “Internet” because it is an interconnected network of smaller networks; it is the Internetwork, or Internet for short.

ARPAnet had several key features:

• It was decentralized: there was no main “control center” that would be vulnerable to attack.
• It was redundant: information could travel any one of many possible routes to get from one location to another location —another way of making sure it could still work even if parts of it were destroyed.

This decentralized structure was key to ARPAnet’s success. It is also what makes the Internet so wonderfully open today: it is still decentralized, with no main control center and therefore no one company or government in control of it.

During the 1960s, '70s and 80s, more nation-wide networks were developed. In order to ensure that all the computers on all these different networks could successfully exchange information with each other, a common protocol was needed. In 1983, TCP/IP (Transmission Control Protocol/Internet Protocol) was developed and adopted as the protocol for the Internet. (A protocol is a set of rules and procedures for how something works, in this case how computers package, send and receive data back and forth.)

Tim Berners-Lee Invents the World Wide Web

No one person invented the Internet; many people worked on developing ARPAnet and other early networks, as well as TCP/IP and other important parts of the Internet. The World Wide Web, on the other hand, actually was invented by one person: a British software engineer named Tim Berners-Lee.

Tim Berners-Lee was working at CERN, the physics research lab in Switzerland, in the 1980s, when he came up with a simple yet powerful idea: “What if there was a way to connect any computer file or document on any computer anywhere in the world with any other file or document anywhere else? And do so easily and intuitively?”How could this be done?

Hypertext had already been invented by someone else. Hypertext allows users to create a link from a word or phrase in one computer document to another document. A “link” is actually a request: it says “Please send me the contents of the file that this link points to.” Berners-Lee took hypertext and made a way to create hyperlinks between any kind of computer file and any other file, even if the other file is on a different computer somewhere else on the Internet. He then developed 4 software tools necessary for a system such as this to work:

1. URLs: Uniform Resource Locatorsthe scheme for naming and addressing files so that they can be found by other computers when a hypertext link is activated. A website address is its URL.
2. HTTP: HyperText Transfer protocol: The protocol for computers to communicate to one another these hypertext file requests. Notice that most website addresses begin with http:// —this tells the browser that the file is using the http protocol.
3. HTML: HyperText Markup Language: a simple “markup language” or code for creating hypertext links and for structuring and formatting documents.
4. Browser software: software to use to display these html documents. Internet Explorer (“IE”), Netscape Navigator, Opera, Safari, Mozilla and Firefox are the most popular web browsers. (AOL uses its own version of IE browser built in to its software.)

Remember that the World Wide Web is only one part of the Internet. Email, chat, instant messaging, online gaming, telnet and ftp are other important parts of the Internet. (These “parts” are called “services,” and can be thought of as different “lanes” on the “Information Superhighway.”)

There are two things, however, that make the WWW so unique and so powerful:

• Its ability to join any file with any other file on the Internet. This means that even as new technologies are invented (such as flash and other multimedia tools), the web can handle it just fine, because by its very nature it can link to just about anything!
• Growing directly from its ability to link anything to anything are its multimedia capabilities: web pages can include color, pictures, audio, video and so on. (E-mail, for example, used to be purely text-only, no colors or links or images. Only since the development of the web have they integrated html into email and added “web-like” qualities to email.)

How Does the World Wide Web Work?

A web page is actually a text file. If you look at the “source code” of a web page, all you'll see is a bunch of text. Look carefully and you will see strange codes <inside brackets like this> that surround the actual content (words, pictures, etc.) of the web page. These “tags” are the HTML code that makes a web page look the way it does. The colors you see, the way text looks, the layout of the page, are all determined by the HTML code.

Pictures, audio and video are actually separate files. There are HTML tags that insert these other files into the web pages.

A funny thing about the web is the fact that the same web page may look different on different computers and using different browsers. To understand this unpredictable behavior of what a web page will look like, it is helpful to understand how 4 different things interact and work together: the computer, the web browser, the web page, and the user:

• A computer's hardware and operating system will determine the size and clarity of what you see on the screen, as well as the color pallette available. Older computers may not be able to display the millions of colors we've come to expect. (4-bit color has only 16 colors; 8-bit color has only 256 color; 16-bit color has around 65,000 colors; 24-bit color has over 16,000,000 colors.)
• Web Browsers are the software we use to surf the web (such as Microsoft Internet Explorer, “IE”). Web browser software reads the HTML code and then displays the web page according to the rules of HTML. Different versions of different browsers are more or less “buggy”, which means they are more or less likely to correctly display certain elements of a web page, depending on the html code in whihch the page is written.
• Web pages are the files that we view when we are “surfing” the web; they are written using HTML code. However, there can be “good” code and “bad” code. “Good” code is written according to the actual specifications for a particular version of HTML; this is called “surfing” code. “Bad” code does not follow the specifications, and may also include “depricated” code: html code that is used to be valid, but is no longer part of the specification.
• The user also can affect how a web page looks on their own computer. There are a number of display settings in a computer's operating system and view settings in the browser that a user may set to their own preferences, that will change the way they see a web page.

The point to remember, when you are making web pages, is this: not everyone will see the web page the way you do on your machine with the browser you are using. There are still plenty of people using older machines with old hardware and software, fewer colors, old browser versions, etc.

Now let's take a look at HTML itself…

Back to top

An Overview of HTML Basics:

HTML stands for “HyperText Markup Language”. It is the language in which web pages are written. It's called a markup language because you “mark up” the content (words, pictures, etc.) with HTML code in order to make it look the way you want. The <codes inside brackets> are called “tags.” The first word in each tag is the html element. You can also add “attribute-value pairs” to your tags. The hundreds of elements, attributes and values used to make web pages are the language of HTML.

Most html tags are paired, with an opening tag and a closing tag, like this:

Such as:

There are however, a few unpaired tags. A few of the un-paired elements you are likely to use are image (<img>), break (<br>) and horizontal rule (<hr>).

HTML is being replaced with XHTML and XML. These newer languages are much stricter. All tags must be closed in XHTML, and the way you close an unpaired tag is by adding the / at the end of the tag, like this: <img ... />, <br /> and <hr />

All tags can be modified with “attribute-value pairs,” and have the following format:

Such as:

• Elements are the heart of html: they define the parts of a web page, such as head, body, heading, paragraph, list, table, image and so on.
• Attributes are characteristics of the elements, such as alignment, margin, border, font characteristics, etc.
• Values are just that: the values or settings for each attribute, such as align="center" or name="top"…

There are literally hundreds of elements, attributes and values. Not all elements can use all attributes; there are rules about which ones are allowed.

Tags can include multiple attribute-value pairs, like this:

Such as:

In HTML 4.01, it is acceptable to type html code in CAPITAL letters, but this is changing. XHTML, XML and CSS are stricter, and do not allow capital letters, so it is a good idea to get used to typing all code in lower case letters.

It's possible to have html tags “nested” inside one another. For example, inside a paragraph you can have a link (a href), and inside the link there may be an image. It is important to make sure that all html tags are properly nested, like this:

This would be wrong:

(Insert paragraph about inline vs. block-level elements…

There is a lot more to learn and understand about HTML, but this should get you started. Now let's learn how to build a web page…

Back to top

The Basic Structure of a Web Page:

Here are the basic HTML tags needed to create a simple web page:

<html> tells the browser that this file is a web page.
The <head> section is extra code that does not show up on the webpage itself.
<title> is the most common tag put in the head section, but there are many others…
Between <body> and </body> is where all the content of the web page goes.

Now let's look at the elements you are likely to use the most often…

Back to top

Some Commonly Used HTML elements

The most commonly used html elements are the ones described in the “basic web page structure” section above: html, head, title, body, heading and paragraph; those described in the sections below: images, links, lists and tables; and a few others.

The <p> tag is used to define sections of text. Each paragraph will be separated by a space (a blank line). If you want a line break within a paragraph, without a space, use the “break” element: <br />, like this:

The heading tags range from <h1> to <h6>. Each higher number gets smaller, like this:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings should be used to define the “levels of organization” of the content of your web page. Think of it as an outline, with h1 being the Roman Numerals I, II, III, etc. h2 is like the capital A, B, C. h3 is like the 1, 2, 3, etc.

Use the <hr /> tag to insert a horizontal line, as a decorative element or section seperator. Commonly used attributes with hr are: width, size (thickness), color and alignment. Here's an example: <hr align="center" width="60%" size="5" color="red">

Back to top

Content vs. Style, or:
So, you want to add color to your web pages...

As soon as people know how to make a basic web page, they immediately want to add color to their page, or they want to choose particular fonts to display their page. This is understandable, but new web page designers need to be patient and learn a few more things before they can “get fancy” with colors, fonts, etc.

This section is a brief introduction to a very important web design concept, namely that of separating content from style, and provides the “short answer” to the question, “How do I add color to my web page?” Let’s start by making sure we understand content vs. style:

• Content:

  Content is the actual information that a web page contains: the text and images that the web page is about. Content is the stuff that goes in between the HTML tags. If you took away all the formatting and style of all the text on a web page, if everything displayed was plain 12 point Times new Roman font, black text on white background, that would be your content. Everything else is style.

• Style:

  Style is the “look and feel” of a web page:

  • Colors (text colors, background colors)
  • Background images
  • Font face (the shape and style of individual letters and other characters)
  • Font size (how large or small)
  • Font weight (bold, regular, light, etc.)
  • Page layout (what goes where)
  • And more...

Here's the important point:

You should use HTML tags that define what the content is, rather than how you want it to look. ALL CODING THAT DEFINES HOW YOU WANT THE PAGE TO LOOK SHOULD BE DONE WITH CSS! For example, every page should have an <h1>, which is the top heading that defines the topic of the page. You should not use <h1> because you want big bold text; you can make any text big and bold with CSS. Similarly, an <h2> should be a subheading; an <h3> should be sub-sub-heading; don't choose <h2> or <h3> because you want the text to look a certain way. A <p> should be a paragraph; a list of any sort should be coded as a <ul> or a <ol>, and so on.

CSS is like HTML in that you can start using it with just a little bit of knowledge, but to really use it powerfully and effectively, there is a lot to learn! To learn more about CSS, see the CSS section below, or check out any of the many CSS resources that Teacher john lists on his web design resources page. But if you just can’t wait, here’s a quick shortcut to adding color, fonts, etc. to your web page:

• You can add the style="CSS goes here" attribute-value pair (where CSS goes here is replaced with actual CSS declarations) to any HTML tag for what is called a “local” or “inline” style.
• This isn’t the best way to use CSS, but it’s a wuick shortcut, until you learn about the “cascade” and how CSS is supposed to be used.

For example, to make your <h1> display as red with a white background color, and centered on the webpage, do this:

<h1 style="color:red;background-color:white;text-align:center">HEADING</h1>

The code above will look like this:

HEADING

If you put a style="CSS" attribute-value pair inside the <body> tag, then the CSS will apply to the entire web page. If you put a style="CSS" attribute-value pair inside a <p> tag, then the CSS will apply only to that paragraph. Get it?

There are hundreds and hundreds of possible CSS declarations; it is in fact far more powerful —and also more complicated— than HTML itself. You will have to spend some time learning about CSS and how to use it, if you want to get really fancy with colors, fonts, etc. But it is worth the effort, because this is how you will make your web page “pop” with awesome colors and other styling effects!

This next section is about understanding folder hierarchies and file paths. This is a bit confusing at first, but as stated below, it is essential to understand this if you are going to successfully add images to your web page, or make links from one page to another! So read on, carefully!

Back to top

Understanding Folder Hierarchies and File Paths:

Before you can add images or links to your webpage, you need to understand how files are organized into folders, how folders create hierarchies, and how to navigate the paths from one file in a folder to another file in another folder.

A folder —which can also be called a directory— is a place in which files are saved. Folders help you organize your files, so that it's easier to find the files you want. Files should be organized into folders in a logical way: each folder should be “about” one topic, and should have files inside it that are related to that topic.

“Folder hierarchies” refers to the arrangement of folders inside folders inside folders. When you navigate “down” into a folder, then into a folder inside the folder, this is called “drilling down” into the hierachy. When navigating “up” out of folders into the folders that contain them, this is called “climbing up” the hierarchy.

So, a file's location refers to where it is saved, inside which folder (which is inside a folder, inside a folder…). A path is the route you navigate from one file in one location to another file in another location. Hypertext links and inserting images require you to define the path from the web page to the target file —another web page, or an image file, or a website, or whatever…

Here are two ways of describing folder structures:

• Graphical Representation:
  

  The diagram to the right shows several folders and files inside a “container” folder called “4flast.” The path from file 1, “index.html,” to any of the files # 4 - 8, would be “drilling down ” the hierarchy. It would be “climbing up” the hierarchy to navigate from any of the files # 4 - 8 up to file # 1 - 3.

• Hierarchical Outline:
  

  An outline view of the folder structure pictured to the right would look like this (folders are bold; files are numbered):

  • 4flast
    • index.html (1)
    • links.html (2)
    • history.html (3)
    • images
      • logo.gif (4)
      • photo.jpg (5)
    • teachers
      • teachers.html (6)
      • sbaron
        • sbaron.html (7)
        • sbaron.jpg (8)

There are two ways of describing a path:

• Absolute Paths:  When you define the path as a URL, including the “http://”.
  • The advantage of an absolute path is that it will work anywhere: you can move the source file (that contains the absolute path) to another folder and it will still find the target file.
  • The disadvantage of an absolute path is that it is a bit slower than a relative path, if you are linking to another file within your own website.
  
  
• Relative Paths:  When you define the path as the shortest route from the source file to the target file. “Relative” means it is “context-dependent:” the path depends on the location of each file in the folder hierarchy.
  • The advantage of a relative path is that it is quicker than an absolute path. They are also shorter, easier to type and will keep your web page file sizes smaller. Another advantage of relative over absolute paths: If you move an entire website from one server (web host) to another, all your absolute links within the website will need to be changed, but your relative links will still work.
  • The disadvantage of relative paths is that they change if a file is moved from one folder to another, or if you change your folder hierarchy structure. This is why it's really important to carefully plan your folder hierarchy and file organization scheme before you start building your web pages and filling them full of links and images!

Now we're ready to write paths, as we would in a hypertext or image source link! Let's use the example above to demonstrate:

Back to top

Lists:

There are three kinds of lists in HTML:

1. Unordered (bulleted) lists;
2. Ordered (numbered) lists — such as this one; and
3. Definition lists - like a glossary.

The HTML code for each is very similar:

Customizing Ordered and Unordered Lists with CSS

The above examples show the default styles for unordered, ordered and defintion lists. You can also customize your lists with CSS styles, or use image files (.gif or .jpg) as custom bullets, as follows:

Using an image file as a custom bullet
image file	Code	What it looks like
logo_sm.gif	<ul style="list-style-image:url(images/logo_sm.gif)">	list item one list item two list item three

You can also have ordered lists start counting at a number other than one. To do so, add the following code to either the <ul> or <li> tags as follows:

Back to top

Links:

There are 4 types of links:

1. Links between two pages that are part of the same website
2. Links from one web page to a web page that is part of a different website
3. Links from one place on a web page to another place (target) on the same web page
4. An e-mail link that launches your email software and opens a pre-addressed email message

1.   Links between two pages in the same website

2.   Links from to another website

3.   Links from one place on a web page to another place on the same web page

4.   E-mail links

Back to top

Adding Images to Your Web Page:

The image tag (<img>) is one of the few unpaired tags in html. There are many attributes that can be used with it, but these four are required or highly recommended:

Here's an example:

You can change the size at which an image is displayed by changing the width and height values. Just make sure you don't change the relative proportions, or you'll distort the image!

By default, an image has border = 0. If you want a border to show, just add the attribute-value pair: border="n", where n = pixel width. (CSS also allows for some fancy border cahracteristics, as well as control of each side of the border. See CSS section below for more on this.)

See some examples of altering the size and border of an image.

Image files must be either .gif, .jpg or .png format. (.bmp, .tif, .pict and other graphic file formats will not work.) Photos are usually .jpg; non-photo graphics are usually .gif. Those animated cartoons you see on the web are .gif.

Image file size is an important factor to keep in mind. Files larger than 50 — 100 KB (kilobytes) will increase the loading time of a web page more than is desireable. High resolution photos can be thousands of KB (4 MB = 4000 KB), so be careful! It's best to use PhotoShop or other photo editing software to prepare photos for the web.

Flash animation and multimedia is becoming very popular. Flash is an entirely separate type of file, and the way flash files interact with web pages is also different.

Back to top

Tables:

Overview:

Tables should be used whenever you want to display information in rows and columns —in other words: in a table!

Tables have also been used as a means of creating web page layout designs. Most web pages are designed this way, with tables to create different sections, such as horizontal or vertical nav bar sections, and multiple columns. CSS can also be used for page layout, and this is better, really, because tables should only be used for tables, not for layout. However, CSS layout is complicated, and also “buggy,” which means it often doesn't work the way it should. (It isn't actually the CSS that's buggy; it's the browser software: most browsers —especially Internet Explorer— do not fully or properly implement CSS (i.e. they don't follow the CSS rules), so that even properly coded CSS layout sometimes doesn't work.) We'll discuss table layout more later, but first let's learn how to code the tables themselves.

Basic Table Code:

A table is composed of horizontal rows and vertical columns. Each square in a table is called a cell, but html refers to them as table data (<td>).

The html code is organized row-by-row, cell-by-cell. That is, you define a table 1 row at a time, cell by cell from left to right.

You can "merge" 2 or more cells across a row (with <colspan>) or down a column (with <rowspan>) or both.

You can add attribute-value pairs to a cell (<td>), row (<tr>) or the entire table (<table>).

Start and end a table with <table> and </table>.

Start and end each row with <tr> and </tr>.

Start and end each cell with <td> and </td>.

Attributes can be added, but understand: not all attributes are allowed for each element! Commonly used attributes include:

Here's a simple example:

You can also use <th> instead of <td>. <th> is for table heading, and should be used in the top cell of a column, or the first (left) cell in a row, as a column or row heading. <th> automatically makes the text content bold and aligned center.

So this:

Table Attributes and Properties: Merging cells with "colspan" and "rowspan:"

Use the attribute "colspan" to make a cell span horizontally two or more columns, like this:

The above code results in a table like this:

Use the attribute "rowspan" to make a cell span vertically two or more rows, like this:

This will result in a table like this:

You can use both at the same time to create interesting cell arrangements.
Here's the code for a 4 x 4 table, without any rowspan or colspan:

The above code will look like this:

Now let's make cell 6 merge across to cell 7, and down into cells 10 and 11:

This will look like this:

Aligning text within a cell:

Alignment of many elements in HTML is defined as follows:

• Horizontal Alignment:  left, center, or right.
• Vertical Alignment:  top, middle, or bottom.

The default alignment within a table cell is left middle, as shown below:

This text is aligned to the left and in the middle of the cell.

The next few lines are unfinished, and will look odd and unclear... Please be patient...

Change horizontal alignment with <td align="left/center/right"> like this:

Back to top

Special Characters

Coming soon…

Back to top

CSS: Cascading Style Sheets

Coming soon…

Back to top

Additional Resources:

Coming soon…

1. An outstanding list of Web Design Resources:
   • www.teacherjohn.com/resources/webdesignresources.html
     (John Govsky teaches HTML and other computer courses at Cabrillo College in Aptos, CA, and he is Mr. Altenberg's HTML coach-mentor and friend.)
2. General HTML Tutorials:
   • www.lissaexplains.com  (Lissa started this website when she was an 11-year old 6^th grader! She's now 17 or 18.)
   • www.pagetutor.com
3. bla bla bla...

HTML is a "deep ocean" with lots and lots to learn. But if you take it step-by-step and learn the tags and the rules for using them, you too can learn to make awesome web pages!

Good luck and have fun!