Hyper Text Markup Language(HTML):
HTML stands for Hypertext Markup Language, and it is the most widely used language to Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. Simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.
In simple terms, a Web page (or HTML document) is a plain text file that has been encoded using Hypertext Markup Language (HTML) so that it appears nicely formatted in a Web browser. Here’s what HTML means, word-by-word:
- Hypertext Text that you click to jump from document to document. This is a reference to the ability of Web pages to link to one another.
- Markup Tags that apply layout and formatting conventions to plain text. Literally, the plain text is “marked up” with the tags.
- Language A reference to the fact that HTML is considered a programming language.
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.
HTML stands for Hyper Text Markup Language. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements are represented by tags. HTML tags label pieces of content such as "heading", "paragraph", "table", and so on. Browsers do not display the HTML tags, but use them to render the content of the page.
Hypertext Markup Language (HTML) is the underlying markup language of the World Wide Web. It’s the common thread that ties together virtually every Web site, from large scale corporate sites such as Microsoft’s to single-page classroom projects at the local grade school. Don’t let the phrase “markup language” intimidate you. A markup language annotates or “marks up” plain text, letting a browser knows how to format that text so it looks good on a Web page. It’s easy to get started—in fact, you can create a simple Web page in just a few minutes.
While full-featured What You See Is What You Get (WYSIWYG) tools exist that can help speed up the process of writing Web pages, all you really need is an ordinary text-editing program such as Microsoft Notepad. You don’t need special software or extensive training. In this introduction, you’ll learn some basics about HTML. You’ll find out how they turn plain text into attractive formatting, how they incorporate graphics and hyperlinks, and how anyone can create Web content in virtually any program that edits text. This introduction explains what cascading style sheets (CSS) are, and how they make formatting consistent across large Web sites. You’ll also discover the differences between HTML4, XHTML, and HTML5, so you can make the important decision about which version of HTML you want your code to conform to. Finally, you’ll learn about the conventions used for pointing out special helps like notes, tips, cautions, and references to the data files.
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes from the past when some of the commonly used software only allowed three letter extensions. It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files by the browser.
How to View HTML Source?
A good way to learn HTML is to look at how other people have coded their html pages. To find out, simply click on the View option in your browsers toolbar and select Source or Page Source. This will open a window that shows you the actual HTML of the page. Go ahead and view the source html for this page.
By the end of this workshop, you will be able to:
- Use a text editor to author an HTML document.
- Be able to use basic tags to denote paragraphs, emphasis or special type.
- Create hyperlinks to other documents.
- Create an email link.
- Add images to your document.
- Use a table for layout.
- Apply colors to your HTML document.
Basic HTML Document
In its simplest form, following is an example of an HTML document:
<title>This is document title</title>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
Either you can use Try it option available at the top right corner of the code box to check the result of this HTML code, or let's save it in an HTML file test.htm using your favorite text editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox etc. It must show the following output:
This is a heading
Document content goes here.....
You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or Netscape.
Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor. On most Windows systems, click your Start button and choose Programs then Accessories. It should be a little blue notebook.
Mac Users: SimpleText is the default text editor on the Mac. In OSX use TextEdit and change the following preferences: Select (in the preferences window) Plain text instead of Rich text and then select Ignore rich text commands in HTML files. This is very important because if you don't do this HTML codes probably won't work.
One thing you should avoid using is a word processor (like Microsoft Word) for authoring your HTML documents.
Understanding HTML Tags
The code within an HTML file consists of text surrounded by tags. These tags indicate where the formatting should be applied, how the layout should appear, what pictures should be placed in certain locations, and more. For example, suppose you wanted a certain word to be italicized, like this: Everything is on sale. In HTML, there’s no Italics button to click, like there is in a word-processing program. Therefore, you have to “tag” the word that you want to be italicized. The code to turn on italics is <i>, and the code to turn italics off is </i>. Your HTML code would look something like this: <i>everything</i> is on sale.
That’s an example of a two-sided tag, which encloses text between opening and closing tags, in this case <i> and </i>. Note the forward slash in the closing tag (</i>). That slash differentiates an opening tag from a closing tag. With a two-sided tag, there is always a corresponding closing tag for every opening tag.
To understand how this system of tagging came about, you need to know that back in the olden days of the Internet, nearly everyone connected to it by using a dial-up modem, at speeds ranging from 2400 bps to 28.8 Kbps. That’s really slow. Text files transfer much faster than binary files, so for any type of information-sharing system to be popular, it had to be text-based. Otherwise, people would doze off while waiting for a page to load.
People designing Web pages also wanted their pages to be attractive. They couldn’t just format pages in a word processor, though, because every word processor handled formatting differently, and it was impossible to know which one a visitor to a site might be using. Word processing files are also much larger than plain text files.
The Web’s creators developed an elegant solution. Instead of sending the formatted pages over the Internet, they created an application—a Web browser—that could interpret plain-text code (HTML tags) as formatting instructions. The text could be sent quickly and efficiently in plain-text format, and then be processed and displayed attractively and graphically on the local PC.
HTML worked great all by itself for all kinds of text formatting, but some Web designers wanted to include graphics on their pages. To accommodate this, the <img> tag was created, which designers use to refer to a graphic stored on a server. When the Web browser gets to that tag, it requests that the image file be downloaded from the server and displayed on the page.
The <img> tag is different in several ways from the <i> tag. It is one-sided, meaning it does not have a closing tag, and it takes attributes. An attribute is text within the tag that contains information about how the tag should behave. For example, for an <img> tag, you have to specify a source, abbreviated src. Here’s an example:
This <img> tag uses the src= attribute, and specifies that the file tree.gif be displayed. Many tags accept attributes, either optional or required. With HTML, you can also create hyperlinks from one page to another. When a visitor to a Web site clicks a hyperlink, the Web browser loads the referenced page or jumps to a marked section (a “bookmark”) within the same page. You will learn to create hyperlinks.
The tag for a hyperlink is <a>, a two-sided tag, but most people wouldn’t recognize it without the attribute that specifies the file or location to which to jump. For example, to create a hyperlink with the words Click Here that jumps to the file index.htm when clicked, the coding would look like this:
<a href=”index.htm”>Click Here</a>
There’s a lot more to HTML, of course, but that’s basically how it works. Plain text is marked up with tags that indicate where elements such as formatting, hyperlinks, and graphics should be applied, and a Web browser interprets those tags and displays the page in its formatted state. The trick, of course, is to know which tags to use, and where they’re appropriate, and what attributes they need.
As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag</html> and <body> tag has its closing tag </body> tag etc. Above example of HTML document uses the following tags:
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraphpresents a paragraph.To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage.
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name.
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Document Structure
A typical HTML document will have the following structure: Document declaration tag
Document header related tags
Document body related tags
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:
There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags).The <!DOCTYPE> declaration is not case sensitive.
Setting Up the Document Structure
Every society needs an infrastructure with certain rules that everyone agrees to for the general public good. For example, we have all agreed that a red light means “stop” and a green light means “go.” Everyone who wants to participate in the transportation system must play by those rules, or chaos ensues. HTML is the same way. You can get creative with your Web content, but there must be an underlying structure in place for Web browsers to read and render your Web pages properly. That means the document must contain certain tags that delineate its major sections and indicate to the browser what type of coding the document uses.
In this blog, you’ll learn how to structure a document with the correct underlying tags. You’ll learn how to specify the type of HTML you are writing and how to create Head andBody sections. You’ll also learn how to create paragraph and line breaks, specify a page title, enter hidden keywords by which your page can be found in search engines, and publish a test page to a Web server.
Specifying the Document Type
When creating an HTML5 document, the first line of the document should be this tag:
The DOCTYPE tag always begins with an exclamation point and is always placed at the beginning of the document, before any other tag. Most HTML tags are not case-sensitive, but the word DOCTYPE should always be uppercase. Using the DOCTYPE tag is like signing a contract. It is an optional tag, but when you use it, you are promising that your coding will conform to certain standards. When a Web browser encounters a DOCTYPE tag, it processes the page in standards mode. When it doesn’t encounter the DOCTYPE tag, it assumes that there is something quirky about the page, and processes the page in quirks mode.
When the browser sees the tag <!DOCTYPE html>, it assumes you are using HTML5. The distinction between standards mode and quirks mode came about in earlier days, when there were problems with standardization between Web browsers. In some browsers, to display pages properly, you needed to get a little creative with the HTML code.
Modern HTML coding does not allow that, but some older pages still include these obsolete workarounds. By using the DOCTYPE tag, you are making a promise to the Web browser that there is nothing but pure HTML code in the page. Earlier versions of HTML used more complex DOCTYPE tags. If you’re using HTML Version 4.01, the syntax for the tag is:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN"
If you’re using XHTML, the syntax for the tag is:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
Creating the HTML, Head, and Body Sections
All of your HTML coding—except the DOCTYPE tag—should be placed within the twosided <html> tag. Recall from the Introduction that when a tag is two-sided, it requires a corresponding closing tag that is identical to the opening tag but contains a slash:
</html>. The tags <html> and </html> serve as a “wrapper” around all the other tags in the document.
Creating Paragraphs and Line Breaks
Within the <body> section of the document, you type the text that will appear on the Web page. Each paragraph of text should be enclosed in a two-sided tag that indicates its type. The most basic paragraph type is the body paragraph, indicated by the <p> tag. It is a two-sided tag, so the paragraph text is placed between a <p> and a </p>.
To create a line break without officially starting a new paragraph (and thereby adding that extra white space), use the <br> tag. This is a one-sided tag placed within a paragraph, at the end of each line, like this:
Specifying a Page Title and Metatags
Perhaps you noticed in the preceding exercise that the complete path to the file appeared in the title bar of Internet Explorer. Usually when you view a Web page, a friendly, descriptive title appears in that spot instead. That text is specified by a <title> tag that is placed in the <head> section (also called the header). Here’s an example:
<title>The Garden Company</title>
Troubleshooting Make sure you place the <title> tag in the <head> section, and not in the <body> section. Another element you can place in the header is the <meta> tag. The <meta> tag has several purposes. One of these is to identify keywords related to your page. Placing appropriate keywords on your page can make it easier for people to find your page when they are searching the Web using a search engine such as MSN. When some search engines index your page, they rely not only on the full text of the page, but also on any keywords they find in the <meta> tag area.
For example, suppose The Garden Company’s Web site would be useful to people who are searching for information about all types of gardening problems, such as pests, weeds, and fungus, and about growing flowers and vegetables. Perhaps all these topics are not mentioned on the main page, but you want people who search for those words to be directed to the main page anyway. You could place the following in the <head> section:
<meta name="keywords" content="pests, weeds, fungus, plants, flowers, vegetables">
Notice that the <meta> tag in the above code is a single-sided tag that contains two attributes: name and content. The values for each of those arguments follow the equals sign and are contained in double quotation marks.
The <meta> tag can also be used to redirect visitors to another page. For example, suppose you told everyone the address of your Web site, and then you needed to move it to another URL. You could place a “We’ve Moved” page at the original address and use the <meta> tag to redirect users to the new address after five seconds, like this:
<meta http-equiv="refresh" content="5; url=http://www.contoso.com/newpage.htm">
Here’s yet another common use: the <meta> tag can specify a character encoding scheme. This is not a big issue if you are coding only in English (or in a language like English that uses a Roman character set), but it is considered a tidy coding practice to include anyway. If you want, you can add <meta charset=”utf-8”> to the <head> section of your document to explicitly spell out that your page is in English.
Headings in Web pages function the same way as they do in printed documents—they separate text into sections. The HTML standard defines six levels of headings, <h1> through <h6>, each one progressively smaller in font size.
HTML5_SBS.indb 26 1/13/11 5:05 PM
As noted earlier, there are no specific sizes or fonts assigned to the heading tags—their appearance can vary depending on the browser and its settings. But the heading levels connote relative sizes; the higher the heading number, the smaller the size in which it will render on the screen. In Internet Explorer 9, for example, using the default settings will make these six heading levels look as shown in the following graphic.
Perhaps you noticed that headings 5 and 6 are actually smaller than body text. Keep in mind, though, that these are just the default settings; you can redefine these headings to appear any way you want.Many screen reader programs use the heading codes <h1> through <h6> to help visually-impaired users navigate a document, and some page structures rely on headings for outlining, too. In some cases, though, you might have a stack of headings that collectively should take up only one spot in an outline, like this:
<h1>Dog Agility Club of Indiana</h1>
<h2>Training for canine athletes and their humans</h2>
HTML5 introduces a new tag to deal with this situation, called <hgroup>. When you enclose a stack of headings within <hgroup>, only the first heading in the stack will appear in an outline; the others will be ignored by screen readers and other outlining tools.
Formatting Text by Using Tags
Creating Web pages is not word processing. It’s important to keep that in mind as you learn HTML, because I’m going to ask you to be patient for a few chapters as you learn HTML the right way—that is, the standards-compliant way. When most people think of formatting text, the first thing that pops into their minds is choosing a font—a typeface, size, and color. That’s easy to do in a word-processing document, but in HTML it’s more complicated. Early versions of HTML used a <font> tag to specify a particular typeface, size, and color. If it were ten years ago, I would be happy to teach you that tag in this chapter, but the <font> tag has been removed from HTML5. Even though most browsers still recognize the <font> tag, you shouldn’t use it: it’s obsolete. Therefore, rather than teach you bad habits with old tags, I’m going to teach you how to apply typefaces, sizes, and colors to text with styles—but not in this blog. Although using styles is a superior way of applying fonts to text, it is a little more advanced than you’re ready for just yet.
This blog introduces several important tags that format text according to its purpose. In this, “Setting Up the Document Structure,” you learned about the <p> tag for regular paragraphs, but there are many other tags that are used for headings, programming code, quotations, and more. Most of the tags discussed in this chapter are semantic tags; they describe the function of the text, rather than provide directions for formatting. For example, the <h1> heading tag specifies that the text within it should be formatted as a major heading, but it provides no specifics as to what that formatting should be.
The formatting specifics for semantic tags can come from a variety of sources:
- Styles As you will learn in Part 2 of this book, you can specify the font families and sizes to use throughout your entire Web site. For example, you can select a font family that will be suggested to the browser whenever a certain tag is applied.
- The Web browser in use Each Web browser has defaults for the standard HTML tags. For example, in Internet Explorer (and most other browsers), <h1> is leftaligned, 18-point Times New Roman. Most browsers use the same defaults for the very basic tags, but non-standard browsers, such as those on phones, often display text differently.
- Individual user customization A user can customize his Web browser to suit his preferences. Later in this chapter, you’ll get to play with these settings in Internet Explorer so you’ll know what your potential audience might be doing. Keep in mind as you practice using tags that their formatting is not fixed. The results you see when previewing the exercise pages in Internet Explorer represent the default settings for your version of Internet Explorer (or whatever browser you are using to preview them); the style is not intrinsic to those tags themselves. That will become important in when you learn how to define more specific formatting for tags.
Applying Bold and Italic Formatting
Applying bold and italic styles are two ways of making text stand out and attract attention. You generally use these styles in paragraphs rather than in headings, but it’s perfectly acceptable to use them anywhere.
For simple boldface and italics, use the <b> and <i> tags, respectively. These are twosided tags that enclose the text to be formatted. For example:
<p>I had a <i>great</i> time at the party.</p>
<p>The reception will be held at <b>The Arbor Arch</b> in Plainfield.</p>
If you want to apply both bold and italic formatting, you can nest one tag inside the other. Don’t mix up their order, though. When nesting tags, the rule is: first in, last out. So this is correct:
<p>The next book we will read is <b><i>The Catcher in the Rye</i></b></p>
In contrast, the following example is wrong, because the order of the ending </b> and </i> tags are reversed:
<p>The next book we will read is <b><i>The Catcher in the Rye</b></i></p>
Even though the tags in the preceding example are improperly nested, most browsers will still display them correctly, provided you are using HTML as the document type. In an XHTML document, however, this type of tag reversal is not accepted.
Inserting Horizontal Lines
Horizontal lines can be useful as dividers between sections of text in a Web page. For example, in the preceding exercise, you created a copyright notice that blends in perhaps a little too well with the rest of the text on the page; it would stand out more if it were separated from the rest of the document by a horizontal line. You might also want to add another horizontal line between the first two headings and the rest of the document.
Applying Superscript and Subscript Formatting
Superscript formatting makes text smaller and raises it off the baseline. You’d typically use superscript to format exponents in math equations (for example, X2 + 1) and for footnote numbers and symbols (like this* ). You can also use superscript to format ordinal numbers such as 1st, 2nd, and 3rd to make your page look more polished. Subscript makes text smaller and lowers it below the baseline. The most common use for subscripts is in chemical formulas (for example, H2SO4).
Applying a Background Color
To specify a background color for an entire page, insert the style=”background-color: color” attribute into the opening <body> tag. For example, to make the background of an entire page yellow, use the following:
<body style="background-color: yellow">
You can use the color name, the RGB value, or the hexadecimal value. Therefore, the following are equivalent to the code just shown:
<body style="background-color: #FFFF00">
<body style="background-color: rgb(255,255,0)">
Applying a Foreground Color
The foreground color is the default text color for the page. You can set the foreground color by using the style=”color: color” attribute. It can be combined with the attribute for the background color in a single style= statement. For example, to set yellow text on a navy blue background, use the following:
<body style="background-color: navy; color: yellow">
When you combine two attributes in a single style= statement, you separate them with a semicolon, as shown in the preceding example.
Creating Hyperlinks and Anchors
The Web is based on hyperlinks. Each Web page contains active links to other pages, which in turn link to even more pages, until presumably the entire Web (or at least a great chunk of it) is bound together. In fact, that’s where the name “web” comes from. Hyperlinks can connect to other places on a Web page, to other pages within your Web site, to pages outside your site, and to many types of Web and non-Web content. You activate a hyperlink by clicking a designated bit of text or a graphic that, depending on the link, takes you to a different location on the page, opens a different Web page, starts an e-mail message, downloads a file, lets you view a movie or listen to a sound clip, starts a Web-based program, and so on. You have probably clicked thousands of hyperlinks, perhaps without thinking much about the coding behind them. After this chapter, you’ll understand how they work, and you’ll be able to create your own.
In this blog, you’ll learn about the <a> tag, which is used to create various types of hyperlinks. You’ll find out how to create hyperlinks to Web pages and e-mail addresses, how to create anchor points within a document, and how to hyperlink directly to an anchor point. I’ll also show you how to hyperlink to non-Web content, like a Microsoft Word document or Microsoft Excel spreadsheet.
Hyperlinking to a Web Page
No matter what type of hyperlink you want to create, the basic syntax is the same. It starts with the <a> tag, and then uses an href= attribute which provides the URL or the path to the destination. For example, an opening tag might look like this:
This is followed by the text that will appear underlined as the link text that you click, or by a reference to the image that will serve as a hyperlink. (You’ll learn more about image, “Displaying Graphics.”) After that text is the closing </a> tag. Here’s a complete example:
Visit <a href="http://www.microsoft.com">Microsoft.com</a> for the latest information.
When viewed in a browser, this produces a text-based hyperlink similar to that shown in the following image: Hyperlinks are underlined by default. You can specify alternative formatting for hyperlinks by using styles, as explained in Chapter 6, “Introduction to Style Sheets.”
Using Relative and Absolute Paths
Paths that contain a complete address that anyone can use to get to that page are called absolute paths. Absolute paths are very reliable, but they are also long and awkward to type. For example:
<a href="http://www.contoso.com/gardener/images/foliage.htm">Diagnosing Foliage Problems</a>
When you are linking to files in the same Web site as the link itself, you do not need to include the complete path to the file; you can simply provide its name. When the file is in the same folder, you need only supply the file name. For example, if the index.htm and foliage.htm pages of The Garden Company Web site were in the same folder, in the index.htm file, you could refer to foliage.htm like this:
<a href="foliage.htm">Diagnosing Foliage Problems</a>
This is called a relative path, because the destination file is relative to the current file’s location. Relative paths make it easier to develop and test your Web site in a different file location than the one where it will eventually be stored. For example, in this book, you’ll be doing most of your development in the Documents\Microsoft Press\HTML5 SBS folder, which would typically not be the final destination for a site you are developing. By making as many relative references as possible, you avoid the need to re-code every URL when your site is moved to its final destination.
When creating a link to a file that’s stored in a subfolder of the current one, you can point to that subfolder but otherwise leave the path relative. For example, suppose that index.htm is stored in a folder called c:\main, and foliage.htm is stored in c:\main\articles, which would be considered a subfolder (or child folder) of it. To refer to foliage.htm from within index.htm, you would use a tag like this:
<a href="articles/foliage.htm">Diagnosing Foliage Problems</a>
You can also create a link to a file that is up one level (a parent folder) with a relative reference. For example, suppose you wanted to refer to index.htm from within foliage.htm (both in the same locations as before). You would precede the reference with . ./ to indicate that the file is one level up:
Setting a Target Window
By default, a hyperlink opens the referenced page in the same browser window. That means the new page replaces the previous page in your browser. Usually this is fine, but in some cases you might want the hyperlink to open in a new window. For example, perhaps you want to recommend that visitors check out a page on another site, but you don’t want them to leave your site. To direct the hyperlink to open a page in a new window, add the attribute target=″_blank″ to the <a> tag. For example, to open the foliage.htm file in a new window, the tag would be structured like this:
<a href="foliage.htm" target="_blank">Diagnosing Foliage Problems</a>
Using Monospace and Preformatted Text
Most of the text in this blog is set in a proportional font. This means that individual characters take up varying amounts of space horizontally, depending on the size of the individual character. For example, the letter M takes up more space than the letter I, so a string of Ms occupies more space than a string of Is. As a demonstration, let’s take a look at 10 of each character to see the difference:
Most Web pages that we’re accustomed to viewing use proportional fonts; they are attractive, professional-looking, and easier to read. In contrast, a monospace font is one whose characters occupy exactly the same amount Back in the days of the typewriter, all type was monospaced because of the way the typewriter worked: the carriage moved exactly the same amount of space to the right as you typed, no matter which letter was keyed. Here are those same 10 Ms and Is in a monospace font:
Some common uses for monospaced text include:
- Lines of programming code (like the HTML lines in this book)
- Text that you are instructing a user to type
- ASCII art (artwork created by using text characters)
It is uncommon to use monospaced text on a Web site, but for special situations it’s nice to have that capability. To apply monospace style, you can use any of the tags outlined in the following table. Most browsers do not make a formatting distinction between these tags by default, but you can define them differently in your styles if you like.
These tags work nicely if you just want to make certain that characters appear in a monospaced font, but they don’t change the fact that HTML omits extra spacing and line breaks that the text might include. When formatting something that requires the verbatim inclusion of white space such as spaces or line breaks, you must use the <pre> tag, which stands for “preformatted.” The <pre> tag not only displays the text in monospace, but also preserves all the spaces and line breaks that the Web browser would usually ignore, so the text will look very similar to the original.
The <pre> tag can also come in handy when text that you copied and pasted from another source contains a lot of line and paragraph breaks. You could manually enter a <br> for every line break and a <p> for every paragraph break, but that is pretty labor intensive for a large file with a lot of breaks. Using the <pre> tag is a shortcut. One common use for the <pre> tag is in poetry archives, for example, where line breaks and spacing add meaning to the poems.
Formatting a Block Quotation
When quoting blocks from other sources, it is customary—both on Web pages and in print—to indent those blocks from the main body of the text. The <blockquote> tag does exactly that. And don’t feel constrained about using it; you can use <blockquote> for any text that you want to indent, not just quotations.
The <blockquote> tag has a cite=”URL” attribute, but most browsers don’t do anything with it. If you happen to know the URL for the source you are citing, it is good practice to include it in the tag for browsers that do support the attribute, and as an aid to anyone who might be viewing or editing your raw HTML code later.
Creating Bulleted and Numbered Lists
You worked with a file that contained a numbered list, but it was set up as a regular <p> paragraph with <br> breaks for each line, such as the following:
<p>1. Click in the Login box<br>
2. Type <b>premium</b>><br>
3. Click in the Password box<br>
4. Type <b>customer</b></p>
Tagging the list this way worked in this instance because the lines were short and simple, but HTML has tags designed specifically for creating lists, and it’s better to use those tags when possible. They accept attributes that you can use to control formatting, and they create hanging bullets and numbers (that is, bullets and numbers that extend, or “hang,” off the left margin of the paragraph). The tag for a numbered list is <ol>, which stands for ordered list. For a bulleted list, the tag is <ul>, which stands for unordered list. Each numbered or bulleted item within the list is tagged <li>, for list item. You start the list with the opening <ol> or <ul> tag, enclose each list item with <li> and </li> tags, and then end the list with the closing </ol> or </ul> tag. Here’s the numbered list from the previous example, this time using the proper tags:
<li>Click in the Login box</li>
<li>Click in the Password box</li>
You can nest lists within one another. In the following example, we have a bulleted list embedded within a numbered list. Notice how this nested list was constructed. The bulleted sublist (the <ul> tag) is placed within one of the <li> tags within the numbered
<ol> list. <ol>
<li>Thursday: Do Algebra homework</li>
<li>Friday: Housesit for neighbors:
<ul><li>Bring in the mail</li>
<li>Take out the trash</li>
<li>Feed the dogs</li>
<li>Stop the newspaper delivery</li></ul></li>
<li>Saturday: Wash car</li>
Creating Definition Lists
A definition list is just what it sounds like: a list that presents terms with their definitions, such as you would see in a glossary. The word being defined serves as a heading, and the definition paragraph is indented under it.
The complete list (headings and definition paragraphs) is contained within the <dl> and </dl> tags, which stands for definition list. Each word to be defined is contained in a <dt> (definition term) tag, and the definition paragraphs are in <dd> (definition description) tags. Here’s the code for the example just shown:
<dd>A primitive, non-vascular, non-photosynthetic form of plant life. Examples include mildews, molds, and mushrooms.</dd>
<dd>A microscopic roundworm that lives in the soil. There are both harmful and beneficial nematodes. Harmful ones take their toll on the roots of the plant. </dd>
This example shows a one-to-one relationship between words and definitions (one definition for each word), but that’s not a requirement. You can have multiple consecutive entries of either type. You might do this to accommodate situations in which a single word has two meanings or two words have the same definition.
You may have noticed in the example above, the <body> tag also contains other tags, like the <b> tab. When you enclose an element in with multiple tags, the last tag opened should be the first tag closed.
<p><b><em>This is NOT the proper way to close nested tags.</p></em></b>
<p><b><em>This is the proper way to close nested tags. </em></b></p>
Why Use Lowercase Tags?
You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive. <B> means the same as <b>. The World Wide Web Consortium (W3C), the group responsible for developing web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) requires lowercase tags.
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. The <tag> tells the browser to do something, while the attribute tells the browser how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page should be blue, like this: <body bgcolor="blue">.
This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">. Attributes always come in name/value pairs like this: name="value". Attributes are always added to the start tag of an HTML element and the value is surrounded by quotes.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can use comments to write notes to yourself, or write a helpful message to someone looking at your source code. Notice you don't see the text between the tags <!-- and -->. If you look at the source code, you would see the comment. To view the source code for this page, in your browser window, select View and then select Source. HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. If you want to insert blank lines into your document, use the <br> tag.
Why Learn HTML in Notepad?
This teaches beginner-level HTML coding, but it teaches it in a rather fundamentalist way: by creating plain text files in Notepad. There are so many good Web site creation programs on the market nowadays that you may be wondering why this book takes this approach.
Simply put, it’s because doing your own coding is the best way to learn HTML. In this you’ll build a Web site from the ground up, writing every line of code yourself. It’s slower and not as much fun as a fancy graphical program, but it’s great training.
This blog shows how to use Microsoft Expression Web to create Web content, and you may eventually choose to move to a program like that. However, you will be a much better Web designer—and understand what is going on in design programs much better—if you tough it out with Notepad in the beginning.
- Any plain text editor, including Notepad, can be an HTML editor.
- Most Web pages have an .htm or .html extension. You can open them in Notepad,
- but first you need to change the Files Of Type setting in the Open dialog box to All
- Files. You must change this setting each time you use the Open dialog box.
- An alternative way to open a Web page in Notepad is to right-click it in Windows
- Explorer, select Open With from the contextual menu, and then click Notepad.
- To preview a page in a Web browser, select File | Open from the browser’s menu.
- You can double-click an .htm or .html file in Windows Explorer to open it automatically in your default Web browser.
- To see changes you make in Notepad reflected in your Web browser, save your
- work in Notepad, and then click Refresh in the browser window.
Choosing an HTML Version
Different versions of HTML use different tags for some types of content, although they more similar than different overall, especially at the beginner level covered in this book. Here’s a quick comparison of the HTML versions you may encounter:
- HTML4 A very stable, universally accepted code set, which is also fairly forgiving of small coding errors. Using HTML4 codes is desirable when compatibility with all browsers is important.
- XHTML A strict, standards-based implementation of HTML4 created with XML (eXtensible Markup Language). XHTML coding uses the same codes as HTML4, so it is compatible with the same browsers as HTML4.
- HTML5 A revised code set that builds upon HTML4 to add new capabilities. HTML5 offers many dramatic improvements in the areas of application handling and multimedia, but a lot of those features are beyond the scope of this book. In terms of basic coding, which is what this book teaches, the biggest difference is that there are new specific codes for different types of content that were previously handled with more general codes. For example, HTML5 has <audio> and <video> tags for inserting multimedia content, whereas HTML4 inserts all types of multimedia content via a generic <embed> tag.
Since this is blog about HTML5, it might seem like an obvious decision to do your coding using HTML5 tags, but it is not quite as simple as that in real-world situations. A good Web browser should ideally support every tag and every version of HTML it can, because the various HTML version differences should be completely invisible to the Web site visitor. However, HTML5 is so new that not all browsers have caught up to it yet, and people who use older computers may not have the latest version of a browser even if an HTML5 compatible version is available.
The code you will create as you work through the exercises in this book is based on HTML5, but I will also show you some workarounds in situations where HTML5 codes might cause problems in some browsers. You’ll learn both ways of creating a certain effect, so that you can make the call of which codes to use in your real-life work as the situations arise.
What are XML and XHTML?
There is a language related to HTML called Extensible Markup Language (XML) that programmers use to create their own tags. It’s widely used for Web databases, for example, because it can define tags for each data field. Because XML can be so completely customized, programmers can create almost any other markup language within it, just by re-creating all the officially accepted tags of that language.
They re-created the entire HTML language in XML, and called it Extensible HTML (XHTML). Version 1.0 was released in 2001; the current version is XHTML 2.0, released in 2004. XHTML, then, is HTML written within the larger language of XML. Because it is virtually identical to HTML in its functionality, the basic set of tags is the same, and you can learn both HTML and XHTML at the same time. You can also use XHTML to create new tags and extensions, which is a valuable feature for advanced Web developers.
There’s just one thing about XHTML to watch out for: it’s not tolerant of mistakes. For example, in HTML, technically you are supposed to begin each paragraph with <p> and end each paragraph with </p>. But in HTML you can leave out the closing </p> tag if you want (or if you forget it). That won’t work in XHTML. There are lots of little ways that XHTML is picky like that. At one point, it was thought that XHTML would eventually replace HTML4 as its successor, but due to interoperability problems, that has not happened; instead HTML5 is poised to succeed HTML4. This book doesn’t explicitly cover XHTML, but most of what you will learn can be applied to XHTML coding.
Why Code in HTML5?
The short answer is: you should code in HTML5 because it’s an investment in the future. Within a few years, it will be the standard on which nearly all Web sites are based. A slightly longer answer is because it enables cleaner, easier-to-write code. Web page technology has grown by leaps and bounds, mostly due to the increase of the average person’s Internet connection speed, but also because users, designers, and programmers increasingly demand more functionality from their Web pages, such as more precise control of fonts and layout, better rendering on devices that vary wildly in size from mobile phones to huge desktop monitors, better images, more interactivity, video, audio, animations, and better support for various image and file formats. Because most people have fast connections, they don’t have to wait a long time for pages to load that contain large audio and video files, which means more and more sites are including audio and video content.
HTML5 removes support for some of the older tags. For example, an old way (pre-HTML4) of specifying a font was the <font> tag. Today, most people use cascading style sheets to define fonts, so the <font> tag has not been used by many Web designers in a long time anyway. HTML5 formally removes it from the language. One of the biggest things that HTML5 removes is the ability to create multi-framed Web sites with the <frame> and <frameset> commands. You can still create Web sites with multiple sections, but they’re handled much more capably using tables or divisions. The newer way, preferred by most professional Web designers and still an acceptable way, and preferred by many casual Web page designers who are familiar with tables from programs like Word.
Advantages of HTML:
- Its plain text so is easy to edit.
- Its also fast to download (text is highly compressible).
- Is very easy to pickup\learn
- Its now a standard
- Its supported by most browsers across most if not all platforms.
- Simple to edit only requires a text editor.
- Can be easily edited with WYSIWYG editors (no coding required)
- Can be used to present just about any kind of data.
- Tags can be used (or used to be able to be used) very loosely .
Disadvantages of HTML:
- It is static needs to be manually updated or needs some scripting
- support to change it in some way.
- Isn't rendered correctly in all browsers
- Isn't really as flexible as other standards or technologies
- Its not centralized (all pages must be edited individually).
- Very limited styling capabilities (we're not talking css here!)
- Its essentially massively outdated (xhtml and xml suite of standards).
- Different vendors added (mostly Microsoft early on) their own custom tags that aren't widely supported if at all by most browsers
- Tags can be used (or used to be able to be used) very loosely (i.e. used to be able to omit end tags etc).