HTML Basics: Introduction to HTML

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:


How Does HTML Work?

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:

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
Creating an HTML file is pretty simple. You start it with a starting HTML tag, , and end it with a closing HTML tag, . Everything in-between is the content of your file.

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
You mark up your HTML pages using HTML tags. Each tag describes a certain type of element, such as a paragraph. Within each tag you can also set attributes for the element, such as aligning the paragraph to the center of the page.

The basic HTML tag has four parts:

  1. An opening delimiter the < symbol. This tells the browser that it is encountering a tag.
  2. The tag name.
  3. One or more attributes (sometimes called “switches”) that set variables for the tag.
  4. 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.
Starting Tags and Closing Tags
As HTML evolves, all tags are becoming containers that describe some portion of the page rather than tags that stand alone and simply insert an element into the page. As of this writing, we are in a transitional stage, but it is a good idea to start getting used to using tag sets?one tag begins the container and the other ends it.

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
To create an HTML file, you don’t need any special programs. All you need is a simple text editor that saves the file as ascii text.

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
One of the most important?and too-often overlooked?steps in learning about HTML is using a feature in your browser called “View 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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS