Following are some sample pages for learning various tag structures...
 | Simple Demo Page |
| Web Images |
| Table Demos |
| Web Links |
| Web Forms |
| Frame Web Site |
For each of these pages...
| Use the view source function of the web browser to view the underlying HTML. |
| Try saving and modifying these pages to get a better idea on how to work with HTML. |
What is a Web Page?
A web page is information!How that information is created, stored, and presented is the real question.
A web page is created with ASCII text. ASCII text is simple, unformatted text created in text editors such as Windows Notepad or using the "Text Save As" feature of many word processors.
A web page is technially created using an encoding scheme called HyperText Markup Language or HTML.
HTML is a set of "tags" that are used to format text. These tags are then used by a web browser to present text as formatted information. For example:
<h1>This is a title</h1> appears as:
This is a title
Notice that the <h1> </h1> pair of tags cause the enclosed text to appear as a header (larger than normal, bolded text). Also notice that the second closing tag uses a slash ("/") in front of the tag name.
HTML consists of various "tags" such as <H1> (header largest), <H2> (header, next size down), <P> (paragraph), and <A> (anchor or hyperlink) that are used for formatting text, paragraphs, placing images on web pages, and enabling hyperlinks. Tags can also be combined for complex formats as follows:
This is bolded and italic in the center of the page!
The tags and text for this example is:
<p align="center"><em><strong>This is bolded and italic in the center of the page!</strong></em></p>.
Creating a Web Page
In the following sections, we will be learning how to create a web page. There are essentially two approaches:
- Creating HTML from scratch using a simple text editor. We will discuss this in great detail in this discussion.
- Creating HTML using a WYSIWYG (What You See Is What You Get) editor.
In a moment we will discuss what a WYSIWYG editor is, but for now let's finish the process.
Once you have created a web page, it must be uploaded to a web server. This is done using programs that support File Transfer Protocol (FTP). An FTP program allows you to log onto a web server and load files (web pages) into the appropriate directory.
Once the files are loaded onto the web server they can be accessed as any other web page on the Internet.
Web Page Editing Tools
WYSIWYG (what you see is what you get) tools for web pages include a number of commercial products that range in cost from free to expensive.A WYSIWYG-based web editing tool is just like a modern windows-based word processor. As you type the text, you format it to appear the way you want by selecting bold, italic, centering, and other functions to modify the font, position, and appearance of the text.
Netscape Navigator includes an editor called Composer. Microsoft Internet Explorer includes a tool called FrontPad (also known as FrontPage Express). These tools offer very good resources for a minimal price (free!).
Many commercial word processors such as Microsoft Word and Corel WordPerfect allow you to create a document just as any other formatted document and save it as an HTML encoded web page.
Finally there are a number of commercial tools for creating web pages (and entire web sites). These tool include:
| Microsoft FrontPage - Widely used product that even includes its own server for Windows 95/NT platforms. |
| Adobe PageMill - Includes Macintosh and Windows versions. |
| NetObjects Fusion - A powerful tool for creating complex web sites. |
The advantages of WYSIWYG tools are:
| Rapid development of web pages without worrying about tags. |
| An opportunity to lay the page out as it is developed. |
| The ability to use tools to create multiple pages simultaneously. |
Does this mean we can dispense with knowing HTML? No. We need to understand HTML because we may have to load pages with faulty tags (and repair them before they will load into an editor). We also need to know HTML to use JavaScript and web page forms.
HTML and Tags
As we said earlier, web pages are constructed using HTML (HyperText Markup Language). HTML is actually a formatting language that tells a web browser how to present information. It is responsible for bolding, italicizing, placing images, and creating hyperlinks.HTML is based on the use of tags to enclose content that is to be formatted. A tag is enclosed in angle brackets: "<" and ">". Every tag has a tag name or identifier. For example:
| Header tags are <H1> and </H1> |
| Bolding tags are <strong> and </strong> |
Note that tags are not case sensitive.
HTML tags are defined by a group called the World Wide Web Consortium. At the World Wide Web Consortium web site you can find a great deal of information including specifications for HTML and future plans for the World Wide Web.
HTML tags can also have attributes. These attributes have a value assigned to them. For example:
<img src="picname.gif" width = "400" height="400">
This is a tag for placing an image on a web page. Note the src attribute with a value of picname.gif (the value should be enclosed in double quotes). This tells the browser which image to put where the tag is. The width and height attributes tell the browser how to size the image.
Another example:
<p align="center">
This tag creates a new paragraph that is centered. Note that the tag does not have to use the attributes (<p> simply starts a new paragraph).
Okay, we are now ready to build a simple web page!