Browsers, Viewing Source, and HTML Tag Basics
This page is intended to be a quick summary. You should attend a class or read about these topics in your HTML book before using this page.
This page describes:
- browsers
- viewing source code
- HTML tag basics, including basic syntax and structure
- creating and saving an HTML page using a plain text editor like SimpleText (Macintosh) or Notepad (PC)
Browsers
Browsers are the programs you use to view your creations. Contemporary browsers can display:
- text files (ascii - txt or html or htm)
- graphic images (gif/jpg)
- animated images (animated gif files)
One of the first popular browsers was Mosaic. Today's most popular browsers are produced by Netscape (Navigator/Communicator) and Microsoft (Internet Explorer). By using Java, JavaScript, ActiveX, C/C++, and plug-ins, you can extent the capabilities of your browser.
Start Netscape now, and explore the menu bar, button bar, location bar, and other features.
NOTE: There are several different types of computers and operating systems. In this class, we'll work with Macintosh computers and occasionally refer to differences in the Intel-style and UNIX environments.
Viewing and Saving Source
Browsers display/present text, graphics, audio, and other files (or collections of files) as pages -- either directly from your file system or from an internet/intranet-based web server using a URL (Uniform Resource Locator).
The pages you view in your browser can be displayed or saved as "source files" in the original ascii format.
For example:
- pick (in Netscape) View, Page Source (or Frame Source) when you see a page you like and want to see how the author created the page
- pick (in Netscape) File, Save As (or Save Frame As) when you see a page you want to copy.
Note: In Internet Explorer on the PC it is best to view the source (this opens a Notepad window) and use "Save As" save the file from the notepad File menu to save the file.
HTML Tags
First, what is HTML?
HTML - HyperText Markup Language - consists of tags you use to specify, more or less, the format of information.
<tag> - the less than sign (<) and the greater than sign (>) are the two most used characters in many HTML documents.
Here are the tags for a very basic HTML page.
<HTML>
<HEAD>
<TITLE>Displays in the browser's top banner area.</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<P>Here's where you add your message.</P>
</BODY>
</HTML>
Container Tags
Most tags contain information and must have beginning tags and ending tags. For example, to make text bold, you need the beginning ad ending tag around the text , as in: <b>Text</b>.
Empty Tags
Other tags stand alone, without containing anything, like the horizontal rule tag, <hr>:
Tag Attributes and Values
Many tags are defined by values you provide for attributes. For example, in the horizontal rule tag, <hr> if you use no attributes the line crosses the entire browser window, but if you set the size attribute to 50%, and the align attribute to "left" the line only crosses half the window, beginning on the left side, as shown here: <hr width="50%" align="left">
hr is the tag
width and align are attributes
"50%" and "left" are attribute values (notice the use of quotes - "")
Structure Tags
Some tags simply define the page itself and are called structure tags. The basic structure tags are the HTML, HEAD, TITLE, and BODY tags.
Format Tags
Some tags describe your format intent. These include Headings (<Hn>Text</Hn>), paragraph breaks (<p>), and emphasis using italics (<i>Text</i>)and bold (<b>Text</b>) tags are just a few of the tags you'll learn to use in this course.
Implicit Tags
Implicit (logical) tags let the browser to choose how the text will be displayed.
- Emphasis - <em>...</em>
- Strong - <strong>...</strong>
- Teletype - <tt>...</tt>
Emphasis usually renders as italics.
Strong renders as bold.
Teletype is monospaced text.
Explicit Tags
Explicit tags, also called physical tags, specifically tell the browser how to display the text.
- Bold Text - <b>...</b>
- Italic Text - <i>...</i>
- Underlined Text - <u>...</u>
These three tags (Bold, Italic and Underline) are all explicit tags. The browser is given no choice in how they are rendered. They can be used in combination with each other.
Hands On
First, get to know your computer. Notice how the menus work for each program.
When you feel ready, you can try to use an editor (SimpleText on the Mac or Notepad on the PC) to create and save a web page you can view in a browser (Netscape or Internet Explorer).
Here are some rules intended to minimize frustration:
- use only lower-case letters in file names (no spaces or special characters!)
- keep to an 8.3 convention such as filename.htm and graphic1.jpg. You can also use ".html" extension for your web pages, and this may be required for your main (home) page, which some web servers require you to name index.html.
- use no spaces or punctuation other that the period in the 8.3 format or the underscore
- remember to save your HTML files as ASII text files; use SimpleText on the Macintosh or Notepad on MSWindows machines
- close all applications on the computer before removing diskettes (this is important!)
- take your time
Ready to try?
- Find and start the editor program.
- Find and start the browser program.
- Arrange the Browser and editor side-by-side on your screen.
- Give the page your own title and text that includes at least one heading and some additional text; use some bold and italics for emphasis.
Simple jokes are particularly good for this exercise... for example
Question: How many therapists does it take to change a lightbulb?
Answer: Just one; but the bulb has to want to change!
- Save the page as page_1.html in a folder on your computer.
- Use File, Open Page, Choose File in Netscape or File, Open, Browse in Internet Explorer to display your page.
Your page isn't on the web yet, but you have begun. See the Text Tag Notes for more information.