2. HTML Basics

HTML is the backbone of the web, the skeleton of your webpage. It is the structure and substance of the Internet, although it is usually unseen except by the web designer. Without it, the web would not exist. Dreamweaver has many features that help you access, create, and edit HTML code quickly and effectively.

What is HTML?

“What other programs can open a Dreamweaver file?”

This question was asked by a student in a Dreamweaver class; although it might seem obvious to an experienced developer, it illustrates a basic problem in teaching and learning web design. Most people confuse the program with the technology. They assume that the extension .htm or .html belongs to Dreamweaver or Adobe. Print designers are used to working with files ending with .ai, .psd, .indd, and so on. These are proprietary file formats created by programs that have specific capabilities and limitations. The goal in most of these cases is to create a final printed piece. The program in which the file was created provides the power to interpret the code that produces the printed page. Designers have learned over time that opening these file formats in a different program may produce unacceptable results or even damage the file.

On the other hand, the goal of the web designer is to create a webpage for display in a browser. The power and functionality of the originating program have little bearing on the resulting browser display, because the display is contingent on the HTML code and how the browser interprets it. Although a program may write good or bad code, it’s the browser that does all the hard work.

The web is based on the HyperText Markup Language (HTML). The language and the file format don’t belong to any individual program or company. In fact, it is a nonproprietary, plain-text language that can be edited in any text editor, in any operating system, and on any computer. Dreamweaver is an HTML editor at its core, although it is much more than this. But to maximize the potential of Dreamweaver, you first need to have a good understanding of what HTML is and what it can and can’t do. This chapter is intended as a concise primer for HTML and its capabilities and as a foundation for understanding Dreamweaver.

Where did HTML begin?

HTML and the first browser were invented in the early 1990s by Tim Berners-Lee, a scientist working at the CERN (Conseil Européen pour la Recherche Nucléaire, which is French for European Council for Nuclear Research) particle physics laboratory in Geneva, Switzerland. He intended the technology as a means for sharing technical papers and information via the fledgling Internet that existed at the time. He shared his HTML and browser inventions openly as an attempt to get the scientific community and others to adopt it and engage in the development themselves. The fact that he did not copyright or try to sell his work started a trend for openness and camaraderie on the web that continues to this day.

The language that Berners-Lee created over 20 years ago was a much simpler construct of what we use now, but HTML is still surprisingly easy to learn and master. At the time of this writing, HTML is at version 4.01, which was officially adopted in 1999. It consists of around 90 tags, such as html, head, body, h1, p, and so on. The tag is written between angle brackets, as in <p>, <h1>, and <table>. These tags are used to enclose, or mark up, text and graphics to enable a browser to display them in a particular way. HTML code is considered properly balanced when the markup contains both an opening tag (<...>) and a closing tag (</...>). When two matching tags appear this way, they are referred to as an element.

Some elements are used to create page structures, others to format text, and yet others to enable interactivity and programmability. Even though Dreamweaver obviates the need for writing most of the code manually, the ability to read and interpret HTML code is still a recommended skill for any burgeoning web designer. And sometimes, writing the code by hand is the only way to find an error in your webpage.

Here you see the basic structure of a webpage:

Properly structured, or balanced, HTML markup consists of an opening tag and a closing tag. Tags are enclosed within angle brackets. You create a closing tag by typing a forward slash (/) after the opening bracket and then repeating the original tag. Empty tags, like the horizontal rule, can be written in an abbreviated fashion, as shown above.

You may be surprised to learn that the only words from this code that display in the web browser are “Welcome to my first webpage.” The rest of the code creates the page structure and text formatting. Like an iceberg, most of the content of the actual webpage remains out of sight.

Writing your own HTML code

The idea of writing code may sound difficult or at least tedious, but creating a web-page is actually much easier than you think. In the next few exercises, you will learn how HTML works by creating a basic webpage and adding and formatting some simple text content:

1. Launch Notepad (Windows) or TextEdit (Mac).

2. Enter the following code in the empty document window:

<html>
<body>
Welcome to my first webpage
</body>
</html>

3. Save the file to the desktop as firstpage.html.

4. Launch Chrome, Firefox, Internet Explorer, Safari, or another installed web browser.

5. Choose File > Open. Navigate to the desktop, select firstpage.html, and then click OK/Open.

Congratulations, you just created your first webpage. As you can see, it doesn’t take much code to create a serviceable webpage.

Understanding HTML syntax

Next you’ll add content to your new webpage to learn some important aspects of HTML code syntax.

1. Switch back to the text editor, but don’t close the browser.

2. Insert your cursor at the end of the text “Welcome to my first webpage,” and press Enter/Return to insert a paragraph return.

3. Type Making webpages is fun, then press the spacebar five times to insert five spaces. Finish by typing and easy! on the same line.

4. Save the file.

5. Switch to the browser, and refresh the window to load the updated page.

As you can see, the browser is displaying the new text, but it’s ignoring the paragraph return between the two lines as well as the extra spaces. In fact, you could add hundreds of paragraph returns between the lines and dozens of spaces between each word, and the browser display would be no different. That’s because the browser is programmed to ignore extra white space and honor only HTML code elements. By inserting a tag here and there, you can easily create the desired text display.

Inserting HTML code

In this exercise, you will insert HTML tags to produce the correct text display:

1. Switch back to the text editor.

2. Add the tags to the text as follows:

<p>Making webpages is fun    and easy!</p>

To add extra spacing or other special characters within a line of text, HTML provides code elements called entities. Entities are entered into the code differently than tags. For example, the method for inserting a nonbreaking space is to type the   entity.

3. Replace the five spaces in the text with nonbreaking spaces, so that the code looks like the following sample:

<p>Making webpages is fun&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and easy!</p>

4. Save the file. Switch to the browser and reload or refresh the page display.

The browser is now showing the paragraph return and desired spacing.

Because the tags and entities were added, the browser can display the desired paragraph structure and spacing.

Formatting text with HTML

Tags often serve multiple purposes. Besides creating paragraph structures and creating white space as demonstrated earlier, they can impart basic text formatting, as well as identify the relative importance of the page content. For example, HTML provides six heading tags (<h1> to <h6>) you can use to set headings off from normal paragraphs. The tags not only format the text differently than paragraph text, they also impart additional meaning. Heading tags are automatically formatted in bold and often at a larger relative size. The number of the heading also plays a role: Using the <h1> tag identifies the heading as being the largest and highest in importance by default. In this exercise, you will add a heading tag to the first line:

1. Switch back to the text editor.

2. Add the tags to the text as follows:

<h1>Welcome to my first webpage</h1>

3. Save the file. Switch to the browser and reload or refresh the page display.

Note how the text changed. It is now larger and formatted in boldface.

Web designers use heading tags to identify the importance of specific content and to help improve their site rankings on Google, Yahoo, and other search engines.

Applying inline formatting

So far, all the tags you have used work as paragraph or stand alone elements. These are referred to as block elements. HTML also provides the ability to apply formatting and structure to content that’s contained within the flow of another tag, or inline. A typical use of inline code would be to apply bold or italic styling to a word or to a portion of a paragraph. In this exercise, you will apply inline formatting:

1. Switch back to the text editor.

2. Add the tags to the text as follows:

<p>Making webpages is fun&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<strong><em>and easy!</em></strong></p>

3. Save the file. Switch to the browser and reload or refresh the page display.

Most formatting, both inline and otherwise, is properly applied using cascading style sheets (CSS). The <strong> and <em> tags are among the few still acceptable ways to apply inline formatting using strictly HTML code elements. Technically, these elements are more intended to add semantic meaning to text content, but the effect is the same: The text still appears by default as bold or italic. There is an industry-supported move to separate the content from its presentation, or formatting. See Chapter 3, “CSS Basics,” for a full explanation of the strategy and application of CSS in standards-based web design.

The tags <strong> and <em> are used in place of the tags <b> (bold) and <i> (italic) because they provide enhanced semantic meaning for visitors with disabilities or visual impairment, but the result to the average user is identical.

Adding structure

Most webpages feature at least three fundamental elements: a root (typically <html>), <head>, and <body>. These elements create the essential underlying structure of the webpage. The root element contains all the code and content and is used to declare to the browser, and any browser applications, what types of code elements to expect within the page. The <body> element holds all the visible content, such as text, tables, images, movies, and so on. The <head> element holds code that performs vital background tasks, including styling, external links, and other information.

The sample page you created doesn’t have a <head> element. A webpage can exist without this section, but adding any advanced functionality to this page without one would be difficult. In this exercise, you will add <head> and <title> elements to your webpage:

1. Switch back to the text editor.

2. Add the tags and content to the text as follows:

<html>
<head>
<title>HTML Basics for Fun and Profit</title>
</head>
<body>

3. Save the file. Switch to the browser and reload or refresh the page display.

Did you notice what changed? It may not be obvious at first. Look at the title bar of the browser window. The words “HTML Basics for Fun and Profit” now magically appear above your webpage. By adding the <title> element, you have created this display. But it’s not just a cool trick; it’s good for your business, too.

Google, Yahoo, and the other search engines catalog the <title> element of each page and use it, among other criteria, to rank webpages. The content of the title is one of the items typically displayed within the results of a search. A well-titled page could be ranked higher than one with a bad title or one with none at all. Keep your titles short but meaningful. For example, the title “ABC Home Page” doesn’t really convey any useful information. A better title might be “Welcome to the Home Page of ABC Corporation.” Check out other websites (especially peers or competitors) to see how they title their own pages.

The content of the <title> tag will appear in the browser title bar when the page is refreshed.

Writing HTML in Dreamweaver

So the inevitable question is, “If I can write HTML in any text editor, why do I need to use Dreamweaver?” Although a complete answer awaits you in the following 13 chapters, the question begs for a quick demonstration. In this exercise, you will recreate the same webpage using Dreamweaver:

1. Launch Dreamweaver CS6.

2. Choose File > New.

3. In the New Document window, select Blank Page from the first column.

4. Select HTML from the Page Type column and <none> from the Layout column. Click Create.

A new document window opens in Dreamweaver. The window may default to one of three displays: Code view, Design view, or Split view.

5. If it’s not already selected, click the Code view button in the upper-left corner of the document window.

The first thing you should notice in the Code view window is that Dreamweaver has provided a huge head start over using the text editor. The basic structure of the page is already in place, including the root, head, body, and title tags, among others. The only thing Dreamweaver makes you do is add the content itself.

The advantages of using Dreamweaver to create HTML are evident from the very beginning: Much of the page structure is already created.

6. Insert the cursor after the opening <body> tag, and type Welcome to my second page following the tag.

Dreamweaver makes it a simple matter to format the first line as a heading 1.

7. Move the cursor to the beginning of the text “Welcome to my second page,” and type < to start the <h1> code element.

Note how Dreamweaver automatically opens a drop-down list of compatible code elements. This is Dreamweaver’s code hinting feature. When activated, code hinting provides a drop-down list of applicable HTML, CSS, JavaScript, and other supported coding elements.

8. Type h and observe the Code hint window.

Dreamweaver filters the code hint list to elements that start with “h”.

9. In the code hint list, double-click h1 to insert it in the code. Type > to close the element.

10. Move the cursor to the end of the text. Type </ at the end of the sentence.

Note how Dreamweaver closes the <h1> element automatically. But most coders add the tags as they write, in the following way:

11. Press Enter/Return to insert a line break. Type <.

12. Type p and press Enter/Return to insert the paragraph element. Type > to close the tag.

13. Type Making webpages in Dreamweaver is even more fun! Then type </ to close the <p> element.

Tired of hand-coding yet? Dreamweaver offers multiple ways to format your content.

14. Select the word “more.” In the Property inspector, click the B button, and then the I button to apply the <strong> and <em> tags to the text.

These tags produce the appearance of bold and italic formatting on the selected text.

Only two more tasks remain before your new page is complete. Note that Dreamweaver created the <title> element and inserted the text “Untitled Document” within it. You could select the text within the code window and enter a new title, or you could change it using another built-in feature.

15. Locate the Title field at the top of the document window, and select the “Untitled Document” text.

16. Type HTML Basics, Page 2 in the Title field.

17. Press Enter/Return to complete the title.

Note that the new title text appears in the code, replacing the original content. It’s time to save the file and preview it in the browser.

18. Choose File > Save. Navigate to the desktop. Name the file secondpage, and click Save.

Dreamweaver adds the proper extension (.html) automatically.

19. Choose File > Preview in Browser.

The completed page appears in the browser window.

You have just completed two webpages—one by hand and the other using Dreamweaver. In both cases, you can see how HTML played a central role in the whole process. To learn more about this technology, go to www.w3schools.com or check out any of the books listed in the following sidebar.

Frequently used HTML 4 codes

HTML code elements serve specific purposes. Tags can create structures, apply formatting, identify logical content, or generate interactivity. Tags that create stand-alone structures are called block elements; the ones that perform their work within the body of another tag are called inline elements.

HTML tags

The following table shows some of the most frequently used HTML tags. To get the most out of Dreamweaver and your webpages, it helps to understand the nature of these elements and how they are used. Remember, some tags can serve multiple purposes.

Table 2.1. Frequently used HTML tags

HTML character entities

Entities exist for every letter and character. If a symbol can’t be entered directly from the keyboard, it can be inserted by typing the name or numeric value listed in the following table:

Table 2.2. HTML character entities

Introducing HTML5

The current version of HTML has been around for over 10 years and has not kept pace with many of the advances in technology, such as cell phones and other mobile devices. The World Wide Web Consortium (W3C), the standards organization responsible for maintaining and updating HTML and other web standards, has been working diligently on updating the language and released the first working draft of HTML5 in January 2008. The latest update was published in March 2012, but a final version may not be ready for several more years. So, what does that mean for current or up-and-coming web designers? Not much—yet.

Websites and their developers change and adapt to current technologies and market realities quickly, but the underlying technologies progress at a more glacial pace. Browser manufacturers are already supporting many of the new features of HTML5 today. Early adopters will attract developers and users who are interested in the latest and greatest, which means that older, non-HTML5-compliant browsers will be abandoned as these new features are implemented in the majority of popular websites. Some say the full transition won’t happen until 2020 or later; others think it will happen more quickly. In any case, backward-compatibility to HTML 4.01 will be certain well into the future, so your older pages and sites won’t suddenly explode or disappear.

What’s new in HTML5

Every new version of HTML has made changes to both the number and the purpose of the elements that make up the language. HTML 4.01 consists of approximately 90 elements. Some of these elements have been deprecated or removed altogether, and new ones have been adopted or proposed.

Many of the changes to the list revolve around supporting new technologies or different types of content models. Some changes simply reflect customs or techniques that have been popularized within the developer community since the previous version of HTML was adopted. Other changes simplify the way code is created and make it easier to write and faster to disseminate.

HTML5 tags

The following table shows some of the important new tags in HTML5, which, at the moment, consists of over 100 tags. Almost 30 old tags have been deprecated, which means HTML5 features nearly 50 new elements in total. The exercises in this book use many of these new HTML5 elements as appropriate and will explain the elements’ intended role on the web. Take a few moments to familiarize yourself with these tags and their descriptions.

Table 2.3. Important new HTML5 tags

Semantic web design

Many of the changes to HTML have been done to support the concept of semantic web design, or designing webpages using elements and structures that provide or possess intrinsic meaning. For example, it has led to the introduction of many new elements, such as <article>, <section>, <header>, and <footer>. It is a movement that has important ramifications for the future and usability of HTML and for the interoperability of websites on the Internet. At the moment, each webpage stands alone on the web. The content may link to other pages and sites, but there’s really no way to combine or collect the information available on multiple pages or multiple sites in a coherent manner. Search engines do their best to index the content that appears on every site, but much of it is lost because of the nature and structure of old HTML code.

HTML was initially designed as a presentation language. In other words, it was intended to display technical documents in a browser in a readable and predictable manner. If you look carefully at the original specifications of HTML, it looks like a list of items you would put in a college research paper: headings, paragraphs, quoted material, tables, numbered and bulleted lists, and so on.

The Internet before HTML looked more like MS DOS or the OS X Terminal applications. There was no formatting, no graphics, and no color. The element list in the first version of HTML basically identified how the content would be displayed. The tags did not convey any intrinsic meaning or significance. For example, using a heading tag displayed a particular line of text in bold, but it didn’t tell you what relationship the heading had to the following text or to the story as a whole. Was it a title or merely a subheading?

HTML5 has added a significant number of new tags to help us add meaning to our markup. Tags like <header>, <footer>, <article>, and <section> allow you for the first time to identify specific content without having to resort to additional attributes, such as <div class="header">...</div>. The end result is simpler code and less of it. But most of all, the addition of semantic meaning to your code will allow you and other developers to connect the content from one page to another in new and exciting ways—many of which haven’t even been invented yet.

New techniques and technologies

HTML5 has also revisited the basic nature of the language to take back some of the functions that over the years have been increasingly done with third-party plug-ins and external programming. If you are new to web design, this transition will be painless, because you have nothing to relearn and no bad habits to break. If you already have experience building webpages and applications, this book will guide you safely through some of these waters and introduce the new technologies and techniques in a logical and straightforward way. But best of all, semantic web design doesn’t mean you have to trash all of your old sites and rebuild everything from scratch. Valid HTML 4 code will remain valid for the foreseeable future. HTML5 was intended to make your task easier by allowing you to do more, with less work. So let’s get started!

Review questions

1. What programs can open HTML files?

2. What does a markup language do?

3. True or false? HTML5 is not very different from HTML 4.

4. What are the three main parts of most webpages?

5. What’s the difference between a block element and an inline element?

Review answers

1. HTML is a plain-text language that can be opened and edited in any text editor and viewed in any web browser.

2. A markup language places tags contained within brackets < > around plain-text content to pass information concerning structure and formatting from one application to another.

3. False. Over 30 tags have been deprecated from HTML 4, and almost 50 new tags have been added to HTML5. That means almost half of the entire language has changed since it was released in 1998.

4. Most webpages are composed of three sections: a root, head, and body.

5. A block element creates a stand-alone element. An inline element can exist within another element.