Getting Started With HTML

1- Create an HTML File

At their very core, HTML files are simply text files with two additional features.

1. HTML files have an .html or .htm file extension. A file extension is an abbreviation that associates the file with the appropriate program or tool needed to access it. In most cases, this abbreviation follows a period and is three or four letters long. In the following example, notice that the Yahoo! home page ends in an .html file extension.

2. HTML files have tags. Tags are commands or code used to tell the computer how to display the page content. After choosing View | Page Source, Page | View Source, or View | Source, you can see some of the HTML tags in Yahoo!’s home page.

---

You might also see more advanced types of pages on the Internet, such as Microsoft’s Active Server Pages (.asp) or those written in the Extensible Markup Language (.xml). These are beyond the scope of the traditional HTML page, and therefore not covered in this tutorials.

2 - Viewing an HTML File in a Browser

You can view HTML files located on your personal computer within your own web browser. It isn’t necessary for your files to be stored on a web server until you are ready to make them visible on the Internet.

When you want to preview a page, open your web browser and choose File | Open (or Open Page or Open File, depending on your browser), and then browse through your hard drive until you locate the HTML file you want to open. (Note, if you don’t see any File menus in IE, try pressing the ALT key to reveal those menus.)

If you’re going to make frequent changes to the HTML file in a text editor, and then switch back to a web browser to preview the page, keeping both programs (a text editor and a web browser) open at the same time makes sense. When using a basic text editor, the steps to edit and preview HTML files are:

1. Open/return to your HTML file in a text editor.
2. Edit your HTML file in a text editor.
   
3. Save your HTML file in a text editor.
   
4. Open/return to your HTML file in a web browser.
   
5. Click the Refresh or Reload button in your web browser to update the HTML page to reflect the changes you just made to it.
   

By keeping your HTML file open in both a text editor and a browser, you can easily make and preview changes.

3 - Basic HTML Document Format

An HTML entity or tag is a command used to tell the browser how to display content on a page. This command is similar to what happens behind the scenes when you highlight some text in a word processor and click the Italic button to make the text italicized.

With HTML, instead of clicking a button to make text italicized, you can type a tag before and after the text you want to emphasize, as in the following:

<em>Reminder:</em> There will be no band practice today.

You can easily recognize tags because they are placed within brackets (< >), or less-than and greater-than symbols.
Did you notice that the tag to emphasize text and make it italic is em? Given that piece of information, can you guess the tags to add a paragraph or create items in a list?

 

TYPES OF TAGS

In HTML, there are usually both opening and closing tags. For example, if you use

as an opening tag to signify where to start a new paragraph, you have to use a closing tag to signify where that paragraph ends (unless you want your entire page to be contained within one paragraph). To do so, use the same tag with a forward slash placed before it:
. This table shows a list of basic HTML page tags.

Attributes

Many tags have additional aspects that you can customize. These options are called attributes and are placed after the tag but before the final bracket. Specific attributes for each tag are discussed as we move through the tutorial. But to give you an idea of how attributes work, let’s look at an example using the img tag.

<img src="mypicture.jpg" width="100" height="100" alt="A photo of me"/>

In this example, the base tag is img, which tells the browser I want to insert an image at this spot. The attributes are src, width, height, and alt. Each attribute has a value, which comes after an equal sign (=) and is placed within quotation marks.

There’s no need to repeat the img tag, because multiple attributes can be included in a single tag. When you add attributes to a tag, you only put them in the opening tag. Then, you only need to close the tag (not the attributes). Note that this tag is one that doesn’t have a separate closing tag. (In fact, old versions of HTML didn’t require the img tag to be closed at all.) To close tags without separate closing versions, simply place a forward slash (/) before the final bracket, as shown in the preceding code example.

Required Tags

All HTML pages need to have the html, head, and body tags, along with the DOCTYPE identifier. This means, at the very least, your pages should include the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>My First HTML Page</title> </head> <body> This is a very basic HTML page. </body> </html>

Here is the result of this page when displayed in a browser.

To test this basic HTML page for yourself, try the following:

1. Open a basic text editor, such as TextEdit (Mac) or Notepad (PC).
   
2. Copy the preceding code into a new text document.
   
3. Save it as a text-only file (ASCII text) and name it test.html.
   
4. Launch your browser and choose File | Open File (Firefox or Safari) or File | Open (Internet Explorer).
   
5. Browse your hard drive to locate the test.html file, and you’re off and running!
   

Doctype

The DOCTYPE tag is a required tag that is used to tell the browser which version of HTML is used in the document. When the W3C released HTML4 and XHTML, it specified three possible flavors, or versions, to accommodate the anticipated transition time during which developers and browsers were supposed to migrate from HTML 4.0 to XML:

• XHTML Transitional For documents that contain a combination of old and new HTML code
  
• XHTML Strict For documents that don’t contain any outdated code and are structurally “clean”
  
• XHTML Frameset For documents containing frames
  

However, the W3C eventually abandoned the concept of transitional documents, in favor of HTML5, which will support both HTML and XML simultaneously. But until HTML5 is finalized and fully adopted by the major web browsers, you still need to identify your page with one of these three flavors listed to help the browser validate it. Given that we know these three flavors will be phased out over the next few years, I suggest using the easiest one to work with (transitional) to validate your current web pages. To validate your pages against this flavor of XHTML, use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">.

Validating Against These Doctypes

Wondering why you even need to validate your HTML against a particular doctype? The purpose of validation is to help identify potential problems a browser might encounter when displaying your page. Because browsers render pages according to the official HTML specifications (as dictated by the W3C), it makes sense to double-check your pages against those specs as part of your testing. The official W3C validation service can be found at http://validator.w3.org. Once you get there, you’ll notice you can use several different methods to test or validate your pages.

• Validate by URI If your page is already live on the Internet, you can simply enter the page’s URI (address), and the tool will seek to validate your page.
  
• Validate by file upload If you’re working on pages currently stored on your hard drive (but not live on the Internet), you can upload those pages to the online validator.
  
• Validate by direct input Alternatively, you can simply copy and paste the code into an online form at the validation service.
  

Regardless of which method you choose, the results will be the same. The validator will give you a passing or failing grade. If your page fails to validate against the standard you’ve listed in your code, the tool will also tell you why the page fails. For example, it might tell you if you’ve used a particular attribute in the wrong tag, or if you’ve used a tag that’s not in the spec.

Capitalization

Original versions of HTML were case-insensitive and, in fact, very forgiving. This means all of the following examples would be considered the same by the browser:

• <html>
• <HTML>
• <HTml>

That said, HTML4/XHTML is case-sensitive and requires all tags to be lowercase. Of the three preceding examples, the browser might properly interpret only the first.
To make it really confusing, HTML5 returns to being case-insensitive. Given the differences between the various versions of HTML currently in use, I recommend using all-lowercase tags.

Quotations

HTML4/XHTML also requires all values to be placed within straight quotation marks, as in the following example:

Nesting

The term nesting appears many times throughout the course of this tutorial and refers to the process of containing one HTML tag inside another.

You have a proper way and an improper way to nest tags. All tags should begin and end starting in the middle and moving out. Another way of thinking about it involves the “circle rule.” You should always be able to draw semicircles that connect the opening and closing versions of each tag. If any of your semicircles intersect, your tags are not nested properly.

Using the following example, the first one is proper because the strong tags are both on the outside and the em tags are both on the inside.

<strong><em>These tags are nested properly.</em></strong> <strong><em>These tags are not nested properly.</strong></em>

Even though both may work in some browsers, you need to nest tags the proper way to ensure that your pages display the same across all browsers.

Spacing and Breaks

Let’s look closely at some example HTML to identify where proper spacing should occur. (Note, the a tag and href attribute are used to link something, in this case text.)

Two places exist within an HTML file where you might like to add breaks:

• In between tags, to help you differentiate between sections of the page
  
• In between lines of text within the body of the page 
  

Spacing and Breaks Between Tags

The first place you might like to add breaks is in between tags, as in the following example.

<html> <head> <title>My First Web Page</title> </head>

Although this is not required, most people use the ENTER or RETURN key to separate tags with line breaks. Others also indent tags that are contained within other tags, as in the preceding example: the title tag is indented to show it is contained or nested within the head tag. This may help you to identify the tags more quickly when viewing the page in a text editor.

Spacing Between Lines of Text

The second place you add breaks is between the lines of text in the body of the page. If you use the RETURN or ENTER key on your keyboard to add a line break in between two lines of text on your page, that line break will not appear when the browser displays the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>My first Web page</title> </head> <body> Welcome. Thank you for visiting my first Web page. I have several other pages that you might be interested in. </body> </html>

In this code, I pressed the RETURN key twice after the word “Welcome.” In this example, you can see that the browser ignored my returns and ran both lines of text together.

To make those line breaks appear, I’d have to use a tag to tell the browser to insert a line break. Two tags are used for breaks in content.

<br /> <p></p>

The br tag inserts a simple line break. It tells the browser to drop down to the next line before continuing. If you insert multiple br tags, the browser will drop down several lines before continuing.

The p tag signifies a paragraph break. The difference between the two is that paragraph breaks cause the browser to skip a line, while line breaks do not. Also, the p tag is considered a container tag because its opening and closing tags should be used to contain paragraphs of content. The br and p tags are discussed in more detail in Chapter 4.

If I enclose each of these paragraphs in p tags, like the following:

<p>Welcome.</p> Thank you for visiting my first Web page. I have several other pages that you might be interested in.

the browser will know to separate them with a blank line. The following screen shows how the browser displays the text now that I have contained each of the paragraphs in p tags.

In addition, HTML neither recognizes more than a single space at a time nor interprets a tab space as a way to indent. This means that in order to indent a paragraph or leave more than one space between words, you must use style sheets or special characters.

 4- Special Characters

As crazy as this sounds, you technically shouldn’t include any characters in your HTML files that you can’t type with only one finger. This means, if you have to hold down the SHIFT key to type an exclamation mark or a dollar sign, you are supposed to use a character entity to include that special character in your HTML file.

Even though you might be able to type a certain character on your computer system without any problems, some characters may not translate properly when visitors to your web site view your page. So, I recommend you use character entities to maintain consistency across computer systems.

Character entities can be typed as either a numbered entity or a named entity. All character entities begin with an ampersand (&) and end with a semicolon (;). Although every character entity has a numbered version, not every one has a named version. While a few are listed in the following table to give you an idea of what they look like.

Having now made the case for using character entities, let me just say here that it’s been my experience that certain characters can actually be used in a web page without causing any problems. These include straight not curly quotation marks (''), exclamation marks (!), question marks (?), colons (;), and parentheses (). While I haven’t noticed any of these to cause problems in the majority of browsers, you should still test your pages thoroughly when using any special characters.

5 - Add Comments

Sometimes you might not want your web site visitors to see personal comments or notes you’ve added to your web pages. These notes might be directions to another person or reminders to yourself.

<!-- Remember to update this page after the new product becomes available -->

After the opening bracket, an exclamation mark and two hyphens signify the beginning of a comment.

A space should appear after the opening comment code, as well as before the closing comment code.

Comments are not restricted in size but can cover many lines at a time. The end comment code (-->) doesn’t need to be on the same line as the beginning comment code. If you forget to close your comment tag, the rest of the page will not appear in your browser. If this happens, don’t be alarmed. Simply go back to the code and close that comment. The rest of the page will become visible when you save the file and reload it in the browser.

6 -  Set Up Style Sheets

I’ve already mentioned the phrase “style sheets” a few times, but haven’t really given them a full explanation yet. Part of the reason is that style sheets weren’t really a part of HTML until it was rewritten as XHTML. The purpose of cascading style sheets (abbreviated CSS) is to separate the style of a web page from its content.

The current HTML “rules” dictate that we only use HTML to identify the content of the page, and then use a style sheet to specify the presentation of that content. This not only makes web pages more accessible and usable to all users (regardless of their browsers, platforms, operating systems, physical limitations, and so forth), but also to search engines and other types of software.

Define the Style

To define a basic formatting style, you first must identify which tag you want to affect. This tag is then called a selector in CSS. So, if you wanted to specify the style of all the level-2 headlines (

) on a page, you would use h2 as your selector.

h2

In fact, the selector is essentially the tag without the brackets. With that in mind, can you guess what the selector for <p> would be?

p

Once you have a selector, you can define its properties. Similar to how attributes work in HTML, CSS properties alter specific attributes of a selector.

Returning to the preceding example, if you want to change the style of the level-2 headlines on your page to a 14-point Verdana font, italic, and blue, you can use the following properties:

font-family font-style font-size color

When you specify values for properties, you are creating a declaration for that selector. The declaration and selector together are then referred to as a set of rules, or a ruleset. In the typical ruleset, the declaration is enclosed in curly brackets after the selector. So here are the first few pieces of our ruleset:

And here is how they all fit together to tell the browser to display all level-2 headlines in the Verdana font.

h2 {font-family: verdana;}

To specify the font size, color, and style (italic), we simply add on a few more of those properties.

h2 {font-family: verdana; font-size: 14pt; color: blue; font-style: italic;}

At this point, you can probably start to see the pattern a CSS property is followed by a colon, and then its value, which in turn is followed by a semicolon.

Define the Values

As with attributes in HTML, properties have values. Most values can be specified in terms of color, keyword, length, percentage, or URL, as listed in below table. Length and percentage units can also be made positive or negative by adding a plus (+) or minus (−) sign in front of the value.

Create the Structure

After you know a little about the individual parts of CSS, you can put them together to create a few styles. The organization of these pieces depends a bit on which type of style sheet you are creating. CSS offers three types of style sheets:

• Inline Styles are embedded right within the HTML code they affect.
  
• Internal Styles are placed within the header information of the web page, and then affect all corresponding tags on a single page.
  
• External Styles are coded in a separate document, which is then referenced from within the header of the actual web page. This means a single external style sheet can be used to affect the presentation on a whole group of web pages.
  

You can use any or all of these types of style sheets in a single document. However, if you do include more than one type, the rules of cascading order take over: these rules state that inline rules take precedence over internal styles, which take precedence over external styles.
In a nutshell, CSS styles apply from general to specific. This means a ruleset in the head tag of a document overrides a linked style sheet, while a ruleset in the body of a document overrides one in the head tag. In addition, more local (or inline) styles only override the parent attributes where overlap occurs.

Inline

Inline styles are created right within the HTML of the page, hence the name. In the previous examples, a declaration was surrounded by curly quotes, but inline declarations are enclosed in straight quotes using the style attribute of whichever tag you want to affect.

<h2 style="font-family: verdana;">

You can separate multiple rules by semicolons, but the entire declaration should be included within quotes.

<h2 style="font-family: verdana; color: #003366;">

Inline styles are best for making quick changes to a page, but they aren’t suited for changes to an entire document or web site. The reason for this is that when styles are added to a tag, they occur only for that individual tag and not for all similar tags on the page.

Internal

When you want to change the style of all the h2 tags on a single page, you can use an internal, or embedded, style sheet. Instead of adding the style attribute to a tag, use the style tag to contain all the instructions for the page. The style tag is placed in the header of the page, in between the opening and closing head tags. Here’s an example of what an internal style sheet might look like.

<head> <title>CSS Example</title> <style type="text/css"> h2 {font-family: verdana; color: blue;} h3 {font-family: verdana; color: red;} </style> </head>

As this example shows, the selector is placed before the declaration, which is enclosed in curly brackets. This entire ruleset can be contained on a single line or broken up into multiple lines, as in the following example.

h2 {font-family: verdana; color: blue;}

You can write styles in several ways. The following example is just as valid as the preceding one and is preferred by some people because it is easier to read.

h2 {font-family: verdana; color: blue;}

In addition, you can use certain shorthand properties to reduce the amount of coding necessary. For example, instead of specifying both font family (Verdana) and font size (12 point), you could type the following because both properties begin with font.
h2 {font: verdana 12pt;}

External

An external style sheet holds essentially the same information as an internal one, except an external style sheet is contained in its own text file and then referenced from within the web page. Thus, an external style sheet might look like this:

Notice that external style sheets don’t use the style tag or attribute but simply include a list of rulesets as instructions for the browser. Once you create your external style sheet, save it as a text file, with the .css file extension.

Then, return to your HTML file and add the link tag to the page header to reference the external style sheet, as in the following example.

In this case, I only needed to write styles.css because the style sheet is in the same folder as my HTML page. However, if your style sheet is in a different folder than your HTML page, be sure to reference that path appropriately.

External style sheets can be overruled by internal and inline style sheets.