ypertext Markup Language (HTML) is the basic building block of the World Wide Web page. It uses a pre-defined set of tags to format text, create hyperlinks to other places, and insert graphic images. When a web browser opens an HTML file, it displays the page based on the tags.
All HTML files begin with an HTML tag. The tag looks like this:
Hypertext Markup Language?HTML?is a streaming text markup language that uses tags to format text, create hyperlinks to other places, and insert graphic images.
HTML files live on a Web server. Typically the Web server belongs to your Internet Service Provider (ISP) or your company?whoever is hosting your pages. The Web server is hooked into the Internet and when people type in the URL of your page, they are actually calling the file from that Web server.
When someone requests an HTML page, the Web server sends one long unbroken string of ASCII text across the Internet to the reader’s computer. The reader’s browser turns the long string of text into a viewable page.
The browser displays only your text and the tags that it can understand. Any formatting, extra spaces, or unrecognizable characters that you put into your HTML file will be completely ignored by the browser. It turns anything it doesn’t understand into a single spaceband.
It is important to know that HTML is evolving. New additions to HTML are addressing some of the layout control issues and adding new features. For example:
- Cascading Style Sheets (CSS) allow you to set specific presentation styles for your page.
- JavaScript is a scripting language that lets you add additional interactivity to your page.
- Dynamic HTML (DHTML) is a way of displaying the page dynamically, based on the reader’s actions.
The browser manufacturers, however, are not completely consistent in their support of the newer standards such as CSS, JavaScript, and DHTML, so once you go beyond basic HTML you’ll need to remember that your pages might not look exactly the same in all browsers.
Plug-ins are another way of adding additional functions to your pages. These applications let you incorporate additional features from other programs seamlessly within your HTML pages. Adobe’s Acrobat, Macromedia’s Shockware and Flash, Apple’s QuickTime and QuickTime VR, and Real Audio’s streaming audio player are all examples of ways you can extend your site beyond straight HTML to add graphic control, sound, video and other features?but remember, not everyone on the Web has or can use these plug-ins.
Before you starting worrying about CSS and plug-ins and any of the other newer features, get a good handle on the basic HTML tags. If you understand them well, it will be much easier to understand the potential of the Web and all of its technologies.
| Definitions | |
| Hyperlinks | A hyperlink is text or an image that perform a specific function. When the reader clicks on the hyperlinked text or graphics, the appropiate action happens. |
| Hosting | Hosting is the service that gives you space to store your Web pages and publish them so others can visit. |
| URL | A URL, the Uniform Resource Locator, is the full, exact file name of a file on the Web. An example is: http://www.projectcool.com. |
| ASCII | Ascii stands for American Standard Code for Information Interchange. It is a standard for representing letters, numbers, punctuation and control codes in a computer file. |
| CSS | Cascading style sheets (CSS) provide separate style rules to format and style HTML documents. CSS allows authors and readers to attach style, color, font-weight and other formatting rules to HTML elements. With CSS, you can change the style in one location and have all applicable documents change. |
| Javascript | JavaScript is a commonly-used scripting language that lets you add additional interactivity to your Web pages. |
| DHTML | DHTML, Dynamic Hyper Text Markup Language, is a way of changing effects, structure, content and formatting on a Web page dynamically or “on the fly”. |
| Plug-ins | Plug-Ins are small programs that work with your browser to let you see other types of data besides HTML files. |
HTML Files
The only other requirement for an HTML file is that all HTML documents must have a filename extension of .html or .htm. For example:
basics.html
zoo-visit.htm
spec01-99.htm
atoz.html
The browser looks at the filename extension and knows to interpret the file as HTML tags rather than straight ascii text.
HTML Tag Structure
The basic HTML tag has four parts:
- An opening delimiter the < symbol. This tells the browser that it is encountering a tag.
- The tag name.
- One or more attributes (sometimes called “switches”) that set variables for the tag.
- A closing delimiter, the > symbol. This marks the end of the tag.
A typical HTML tag might look something like this:
In this example, the tag is the paragraph tag and the attribute align says that the paragraph will be centered. Notice that the tag starts with an opening delimiter and ends with a closing delimiter. The tag and attribute are separated with a single space.
Here are a few guidelines for using HTML tags:
- HTML tags are not case sensitive.
means the same as
.
- When creating a tag, remember separate each portion?the tag name and each of the attributes?with a single space.
- To use an attribute, type the attribute name, followed by an equal sign and the attribute value. Don’t put a space between the name, equal sign, and value.
- Sometimes the value is literal text or a value that is passed on to another function. When this is the case, you surround the value with quotation marks. For example, the image tag switch calls a specific file by name, so the filename is enclosed in quotations, like this:
- If you don’t specify an attribute and its value, the browser uses the default value for that tag. For example, the default value for paragraph alignment is left. If you use the paragraph tag without the align attribute, the paragraph will align left.
It might help to think of tags as creating a state that stays in effect until you turn off the tag. For example, the bold tag turns the text that follows it bold. The text stays bold until you enter a bold off tag. In most cases, the closing tag is exactly the same as the ending tag, except that it begins with a slash. For example, the following tags turn bold on and off. They bold tags are highlighted in color to make them stand out:
Here’s some text I want in bold
Even paragraphs are containers. You begin a paragraph with a paragraph tag. Then, you type the text that makes up the paragraph. At the end of the paragraph, you enter a close paragraph tag, like this:
Once upon a time there was a frog who lived in a big blue pond. The frog was cursed with intelligence. It was a curse because instead of living like a frog and eating bugs from day to day and just being happy in his pond, he thought about the meaning of life. And he wasn’t sure what it meant to be a frog.
We’ll talk more about opening and closing tags as we introduce each of the specific tags.
| Definitions | |
| Mark up | Mark up is the act of adding tags or other identifying information to a document. The application that displays the document uses the mark up information to display the page. |
| Tags | Tags are the control codes for building an HTML document. |
| Element | An element is contained within start-tags and end-tags (brackets). Each element has a type, identified by name, and may have a set of attribute specifications.
is an element, which is the paragraph tag in HTML. |
| Attributes | Attributes are like adjectives, in that they further describe elements. Each attribute specification has a name and a value. |
| Delimiter | A delimiter marks the beginning or end of a tag. In HTML the opening delimiter is < ; and the closing delimiter is >. |
| Value | A value is the data you assign to an attribute. For example, the following gives the align attribute a value of “center”:
. |
| Containers | A container is an application program or subsystem. Containers in HTML refer to components of a document. |
HTML Tools
For example, we use BBEdit on the Macintosh and HomeSite on the PC. Other people use word processors such as Word or Word Perfect that can save the files as ascii text. Others just use the built-in text editors that came with the computer?SimpleText or Notepad.
There are also a number of HTML WYSIWYG editors. These editors let you see the page as it will appear in a browser. Instead of typing tags, you can select commands from pull down menus, and click and drag items. Adobe, Microsoft, Macromedia and a score of other companies are all offering HTML creation tools.
No matter which tool you use, it is helpful to understand the HTML code itself. Understanding a little simple code makes it easier to fix problems on your page and simply understand why certain things are happening.
| Definitions | |
| WYSIWYG | is an acronym for What You See is What You Get. |
View the Source
The source file is the HTML ascii text file that the browser is displaying. In all major browser you always have the option to “view source.” This provides you with one of the most valuable learning tools there is?the ability to see a page you like and then see how it is built.
In both Netscape Navigator and Microsoft IE, view source is an option under the VIEW menu. Just click in the browser window to be sure the page is active, then click on the VIEW menu and select “view page” “view source”, “source” or “view frame” from the options. The exact options you see will vary depending on which version of which browser you are using.
Don’t be shy about viewing the source. There’s nothing like learning from example.
