Chapter 1. Getting to Know HTML: The Language of the Web

The only thing that is standing between you and getting yourself on the Web is learning to speak the lingo: HyperText Markup Language, or HTML for short. So, get ready for some language lessons. After this chapter, not only are you going to understand some basic elements of HTML, but you’ll also be able to speak HTML with a little style. Heck, by the end of this book you’ll be talking HTML like you grew up in Webville.

The Web Video killed the radio star

Want to get an idea out there? Sell something? Just need a creative outlet? Turn to the Web – we don’t need to tell you it has become the universal form of communication. Even better, it’s a form of communication YOU can participate in.

But, if you really want to use the Web effectively, you’ve got to know a few things about HTML, not to mention how the Web works. Let’s take a look from 30,000 feet:

What does the Web server do?

Web servers have a full time job on the Internet, tirelessly waiting for requests from Web browsers. What kinds of requests? Requests for Web pages, images, sounds, or maybe even a movie. When a server gets a request for any of these resources, the server finds the resource, and then sends it back to the browser.

What does the Web browser do?

You already know how a browser works: you’re surfing around the Web and you click on a link to visit a page. That click causes your browser to request an HTML page from a Web server, retrieve it, and display the page in your browser window.

But, how does the browser know how to display a page? That’s where HTML comes in. HTML tells the browser all about the content and structure of the page. Let’s see how that works...

What you write (the HTML)...

So, you know HTML is the key to getting a browser to display your pages, but, what exactly does HTML look like? And, what does it do?

Let’s have a look at a little HTML... imagine you’re going to create a Web page to advertise the Head First Lounge, a local hangout with some good tunes, refreshing elixirs, and wireless access. Here’s what you’d write in HTML:

Relax

We don’t expect you to know HTML, yet.

At this point you should just be getting a feel for what HTML looks like; we’re going to cover everything in detail in a bit. For now, study the HTML and see how it gets represented in the browser on the next page. Be sure to pay careful attention to each letter annotation and how and where it is displayed in the browser.

What the browser creates...

When the browser reads your HTML, it interprets all the tags that surround your text. Tags are just words or characters in angle brackets, like <head>, <p>, <h1>, and so on. The tags tell the browser about the structure and meaning of your text. So rather than just giving the browser a bunch of text, with HTML you can use tags to tell the browser what text is in a heading, what text is a paragraph, what text needs to be emphasized, or even where images need to be placed.

Let’s check out how the browser interprets the tags in the Head First Lounge:

There are no Dumb Questions

Q:
Q: So HTML is just a bunch of tags that I put around my text?
A:
A: For starters. Remember that HTML stands for HyperText Markup Language, so HTML gives you a way to “mark up” your text with tags that tell the browser how your text is structured. But there is also the HyperText aspect of HTML, which we’ll talk about a little later in the book.
Q:
Q: How does the browser decide how to display the HTML?
A:
A: HTML tells your browser about the structure of your document: where the headings are, where the paragraphs are, what text needs emphasis, and so on. Given this information, browsers have built-in default rules for how to display each of these elements.
But, you don’t have to settle for the default settings. You can add your own style and formatting rules with CSS that determine font, colors, size, and a lot of other characteristics of your page. We’ll get back to CSS later in the chapter.
Q:
Q: The HTML for the Head First Lounge has all kinds of indentation and spacing, and yet I don’t see that when it is displayed in the browser. How come?
A:
A: Correct, and good catch. Browsers ignore tabs, returns, and most spaces in HTML documents. Instead, they rely on your markup to determine where line and paragraph breaks occur.
So why did we insert our own formatting if the browser is just going to ignore it? To help us more easily read the document when we’re editing the HTML. As your HTML documents become more complicated, you’ll find a few spaces, returns, and tabs here and there really help to improve the readability of the HTML.
Q:
Q: So there are two levels of headings, <h1> and a subheading <h2>?
A:
A: Actually there are six, <h1> through <h6>, which the browser typically displays in successively smaller font sizes. Unless you are creating a complex and large document, you typically won’t use headings beyond <h3>.
Q:
Q: Why do I need the <html> tag? Isn’t it obvious this is a HTML document?
A:
A: The <html> tag tells the browser your document is actually HTML. While some browsers will forgive you if you omit it, some won’t, and as we move toward “industrial strength HTML” later in the book, you’ll see it is quite important to include this tag.
Q:
Q: What makes a file an HTML file?
A:
A: Basically an HTML file is a simple text file. Unlike a word processing file, there is no special formatting embedded in it. By convention we add a “.html” or “.htm” (on systems that only support three letter file extensions) to the end of the file name to give the operating system a better idea of what the file is. But, as you’ve seen, what really matters is what we put inside the file.
Q:
Q: Markup seems silly. What-you-see-is-what-you-get applications have been around since, what, the ‘70s? Why isn’t the Web based on a format like Microsoft Word or a similar application?
A:
A: The Web is created out of text files without any special formatting characters. This enables any browser in any part of the world to retrieve a Web page and understand its contents. You’ll see that on the Web, in many ways HTML is more powerful than using a proprietary document format.
Q:
Q: Is there any way to put comments to myself in HTML?
A:
A: Yes, if you place your comments in between  the browser will totally ignore them. Say you wanted to write a comment “Here’s the beginning of the lounge content”. You’d do that like this:

Notice that you can put comments on multiple lines. Keep in mind anything you put between the “”, even HTML, will be ignored by the browser.

Your big break at Starbuzz Coffee

Starbuzz Coffee has made a name for itself as the fastest growing coffee shop around. If you’ve seen one on your local corner, look across the street – you’ll see another one.

In fact, they’ve grown so quickly, they haven’t even managed to put up a web page, yet... and therein lies your big break: By chance, while buying your Starbuzz Chai Tea, you run into the Starbuzz CEO...

Brain Power

Decisions, decisions. Check your first priority below (choose only one):

	A.	Give dog a bath.
	B.	Finally get my checking account balanced.
	C.	Take the Starbuzz gig and launch BIG-TIME Web career.
	D.	Schedule dentist appointment.

Note

The CEO scribbles something on a napkin and hands it to you...

* If by chance you chose options A, B, or D on the previous page, we recommend you donate this book to a good library, use it as kindling this winter, or what the hell, go ahead and sell it on Amazon and make some cash.

Creating the Starbuzz Web page

Of course, the only problem with all this is that you haven’t actually created any Web pages, yet. But, that’s why you decided to dive head first into HTML, right?

No worries, here’s what you’re going to do on the next few pages:

Create an HTML file using your favorite text editor.
Type in the menu the Starbuzz CEO wrote on the napkin.
Save the file as “index.html”.
Open the file “index.html” in your favorite browser, step back, and watch the magic happen.

Creating an HTML file (Mac)

All HTML files are text files. To create a text file you need an application that allows you to create plain text without throwing in a lot of fancy formatting and special characters. You just need plain, pure text.

We’ll use TextEdit on the Mac in this book; however, if you prefer another text editor, that should work fine as well. And, if you’re running Windows, you’ll want to skip ahead a couple of pages to the Windows instructions.

Step one:

Navigate to your Applications folder
The TextEdit application is in the Applications folder. The easiest way to get there is to choose “New Finder Window” from the Finder’s File menu and then look for the Application directly in your shortcuts. When you’ve found it, click on Applications.

Step two:

Locate and run TextEdit
You’ll probably have lots of applications listed in your applications folder, so scroll down until you see TextEdit. To run the application, double click on the TextEdit icon.

Step three (optional):

Keep TextEdit in your Dock
If you want to make your life easier, click and hold on the TextEdit icon in the Dock (this icon appears once the application is running). When it displays a popup menu, choose “Keep in Dock.” That way, the TextEdit icon will always appear in your Dock and you won’t have to hunt it down in the Applications folder every time you need to use it.

Step four:

Change your TextEdit Preferences
By default, TextEdit is in “rich text” mode, which means it will add its own formatting and special characters to your file when you save it – not what you want. So, you’ll need to change your TextEdit Preferences so that TextEdit saves your work as a pure text file. To do this, first choose the “Preferences” menu item from the TextEdit menu.

Step five:

Set Preferences for Plain text
Once you see the Preferences dialog box, there are three things you need to do.
First, choose “Plain text” as the default editor mode in the New Document tab.
Second, in the “Open and Save” tab, make sure that the “Add .txt extension to plain text files” is unchecked.
Last, make sure “Ignore rich text commands in HTML files” is checked.
That’s it; to close the dialog box click on the red button in the top left corner.

Step six:

Quit and restart
Now quit out of TextEdit by choosing Quit from the TextEdit menu, and then restart the application. This time, you’ll see a window with no fancy text formatting menus at the top of the window. You’re now ready to create some HTML.

Creating an HTML file (Windows)

Note

Or another version of Windows.

If you’re reading this page you must be a Windows XP user. If not, you might want to skip a couple of pages ahead. Or, if you just want to sit in the back and not ask questions, we’re okay with that too.

To create HTML files in XP we’re going to use Notepad – it ships with every copy of Windows, the price is right, and it’s easy to use. If you’ve got your own favorite editor that runs on XP, that’s fine too; just make sure you can create a plain text file with an “.html” extension.

Assuming you’re using Notepad, here’s how you’re going to create your first HTML file.

Note

If you’re using another version of Windows you’ll find Notepad there as well.

Step one:

Open the Start menu and navigate to Notepad
You’ll find the Notepad application in Accessories. The easiest way to get there is to click on the “Start” menu, then on “All Programs”, then “Accessories”. You’ll see Notepad listed there.

Step two:

Open Notepad
Once you’ve located Notepad in the Accessories folder, go ahead and click on it. You’ll see a blank window ready for you to start typing HTML.
Note
But recommended.

Step three (optional):

Don’t hide extensions of well known file types.
By default XP’s File Explorer hides the file extensions of well known file types. For example, a file named, “Irule.html” will be shown in the Explorer as “Irule” without its “.html” extension.
It’s much less confusing if XP shows you these extensions, so let’s change your folder options so you can see the file extensions.
First, in any Explorer window select “Folder Options...” from the Tools menu.
Next, in the “View” tab, under “Advanced settings”, scroll down until you see “Hide extensions for known file types” and uncheck this option.
That’s it. Click on the OK button to save the preference and you’ll now see the file extensions in the Explorer.

There are no Dumb Questions

Q:
Q: Why am I using a simple text editor? Aren’t there powerful tools like Dreamweaver, FrontPage and GoLive for creating Web pages?
A:
A: You’re reading this book because you want to understand the true technologies used for Web pages, right? Now those are all great tools, but they do a lot of the work for you, and until you are a master of HTML and CSS you want to learn this stuff without a big tool getting in your way.
Once you’re a master, however, these tools do provide some nice features like syntax checking and previews. At that point, when you view the “code” window, you’ll understand everything in it, and you’ll find that changes to the raw HTML and CSS are often a lot faster than going through a user interface. You’ll also find that as standards change, these tools aren’t always updated right away and may not support the most recent standards until their next release cycle. Since you’ll know how to change the HTML and CSS without the tool, you’ll be able to keep up with the latest and greatest all the time.
Q:
Q: I get the editor, but what browser am I supposed to be using? There are so many – Internet Explorer, Firefox, Opera, Safari – what’s the deal?
A:
A: The simple answer: use whatever browser you like. HTML and CSS are industry standards, which means that all browsers try to support HTML and CSS in the same way (just make sure you are using the newest version of the browser for the best support).
The complex answer: in reality there are slight differences in the way browsers handle your pages. If you’ve got users who will be accessing your pages in a variety of browsers, then always test your web page in several different browsers. Some pages will look exactly the same; some won’t. The more advanced you become with HTML and CSS, the more these slight differences may matter to you, and we’ll get into some of these subtleties throughout the book.
If you’re looking for a good browser, give Mozilla’s Firefox a try; it has very good HTML and CSS support.
Q:
Q: I’m creating these files on my own computer – how am I going to view these on the Web/Internet?
A:
A: That’s one great thing about HTML: you can create files and test them on your own computer and then later publish them on the Web. Right now we’re going to worry about how to create the files and what goes in them. We’ll come back to getting them on the Web a bit later.

Meanwhile, back at Starbuzz Coffee...

Okay, now that you know the basics of creating a plain text file, you just need to get some content into your text editor, save it, and then load it into your browser.

Start by typing in the beverages straight from the CEO’s napkin; these beverages are the content for your page. You’ll be adding some HTML markup to give the content some structure in a bit, but for now, just get the basic content typed in. While you’re at it, go ahead and add “Starbuzz Coffee Beverages” at the top of the file.

Saving your work...

Once you’ve typed in the beverages from the CEO’s napkin, you’re going to save your work in a file called “index.html”. Before you do that, you’ll want to create a folder named “starbuzz” to hold the site’s files.

To get this all started, choose “Save” from the File menu and you’ll see a “Save As” dialog box. Then, here’s what you need to do:

First, create a “starbuzz” folder for all your Starbuzz related files. You can do this with the New Folder button.
Next, click on the newly created “starbuzz” folder and then enter “index.html” as the file name and click on the Save button.

Opening your Web page in a browser

Are you ready to open your first Web page? Using your favorite browser, choose “Open File...” (or “Open...” using Windows XP and Internet Explorer) from the File menu and navigate to your “index.html” file. Select it and click “Open”.

Taking your page for a test drive...

Success! You’ve got the page loaded in the browser, although the results are a little... uh... unsatisfying. But that’s just because all you’ve done so far is go through the mechanics of creating a page and viewing it in the browser. And, so far, you’ve only typed in the content of the Web page. That’s where HTML comes in. HTML gives you a way to tell the browser about the structure of your page. What’s structure? As you’ve already seen, it is a way of marking up your text so that the browser knows what’s a heading, what text is in a paragraph, what text is a subheading, and so on. Once the browser knows a little about the structure, it can display your page in a more meaningful and readable manner.

Are we there yet?

You have an HTML file with markup – does that make a Web page? Almost. You’ve already seen the <html>, <head>, <title>, and <body> tags, and we just need to add those to make this a first class HTML page...

Another test drive...

Go ahead and change your “index.html” file by adding in the <head>, </head>, <title>, </title>, <body> and </ body> tags. Once you’ve done that, save your changes and reload the file into your browser.

Tags dissected...

Okay, you’ve seen a bit of markup, so let’s zoom in and take a look at how tags really work...

Note

To tell the browser about the structure of your page, use pairs of tags around your content.

Remember,

Element = Opening Tag + Content + Closing Tag

There are no Dumb Questions

Q:
Q: So matching tags don’t have to be on the same line?
A:
A: No; remember the browser doesn’t really care about tabs, returns, and most spaces. So, your tags can start and end anywhere on the same line or they can start and end on different lines. Just make sure you start with an opening tag, like <h2>, and end with a closing tag, like </h2>.
Q:
Q: Why do the closing tags have that extra “/”?
A:
A: That “/” in the closing tag is to help both you and the browser know where a particular piece of structured content ends. Otherwise, the closing tags would look just like the opening tags, right?
Q:
Q: I’ve noticed the HTML in some pages doesn’t always match opening tags with closing tags.
A:
A: Well, the tags are supposed to match. In general, browsers do a pretty good job of figuring out what you mean if you write incorrect HTML. But, as you’re going to see, these days there are big benefits to writing totally correct HTML. If you’re worried you’ll never be able to write perfect HTML, don’t be; there are plenty of tools to verify your code before you put it on a Web server so the whole world can see it. For now, just get in the habit of always matching your opening tags with closing tags.
Q:
Q: Well, what about that <img src=“drinks.gif”> tag in the lounge example? Did you forget the closing tag?
A:
A: Wow, sharp eye. There are some elements that use a shorthand notation with only one tag. Keep that in the back of your mind for now and we’ll come back to it in a later chapter.
Q:
Q: An element is an opening tag + content + closing tag, but can’t you have tags inside other tags? Like the head and body are inside an <html> tag?
A:
A: Yes, HTML tags are often “nested” like that. If you think about it, it’s natural for an HTML page to have a body, which contains a paragraph, and so on. So many HTML elements have other HTML elements between their tags. We’ll take a good look at this kind of thing in later chapters, but for now just get your mind noticing how the elements relate to each other in a page.

Brain Power

Tags can be a little more interesting than what you’ve seen so far. Here’s the paragraph tag with a little extra added to it. What do you think this does?

<p id="houseblend">A smooth, mild
blend of coffees from Mexico, Bolivia
and Guatemala.</p>

Right. We have the structure down, so now we’re going to concentrate on its presentation.

You already know that HTML gives you a way to describe the structure of the content in your files. When the browser displays your HTML, it uses its own built-in default style to present this structure. But, relying on the browser for style obviously isn’t going to win you any “designer of the month” awards.

That’s where CSS comes in. CSS gives you a way to describe how your content should be presented. Let’s get our feet wet by creating some CSS that makes the Starbuzz page look a little more presentable (and launch your Web career in the process).

Note

CSS is an abbreviation for Cascading Style Sheets. We’ll get into what that all means later, but for now just know that CSS gives you a way to tell the browser how elements in your page should look.

Meet the style element

To add style, you add a new (say it with us) E-L-E-M-E-N-T to your page – the <style> element. Let’s go back to the main Starbuzz page and add some style. Check it out...

There are no Dumb Questions

Q:
Q: An element can have an “attribute?” What does that mean?
A:
A: Attributes give you a way to provide additional information about an element. Like, if you have a style element, the attribute allows you to say exactly what kind of style you’re talking about. You’ll be seeing a lot more attributes for various elements; just remember they give you some extra info about the element.
Q:
Q: Why do I have to specify the type of the style, “text/css”, as an attribute of the style? Are there other kinds of style?
A:
A: There aren’t currently any other styles that work with today’s browsers, but those designers of HTML are always planning ahead and anticipate that there may be other types of style in the future. Personally, we’re holding our breath for the <style type=“50sKitsch”> style.

Giving Starbuzz some style...

Now that you’ve got a <style> element in the HTML head, all you need to do is supply some CSS to give the page a little pizazz. Below you’ll find some CSS already “baked” for you. Whenever you see the logo, you’re seeing HTML and CSS that you should type in as-is. Trust us. You’ll learn how the markup works later, after you’ve seen what it can do.

So, take a look at the CSS and then add it to your “index.html” file. Once you’ve got it typed in, save your file.

Cruisin’ with style...

It’s time for another test drive, so reload your “index.html” file again. This time you’ll see the Starbuzz Web page has a whole new look.

There are no Dumb Questions

Q:
Q: CSS looks like a totally different language than HTML. Why have two languages? That’s just more for me to learn, right?
A:
A: You are quite right that HTML and CSS are completely different languages, but that is because they have very different jobs. Just like you wouldn’t use English to balance your checkbook, or Math to write a poem, you don’t use CSS to create structure or HTML to create style because that’s not what they were designed for. While it does mean you need to learn two languages, you’ll discover that because each language is good at what it does, this is actually easier than if you had to use one language to do both jobs.
Q:
Q: #d2b48c doesn’t look like a color. How is #d2b48c the color “tan”?
A:
A: There are a few different ways to specify colors with CSS. The most popular is called a “hex code”, which is what #d2b48c is. This really is a tan color. For now, just go with it, and we’ll be showing you exactly how #d2b48c is a color a little later.
Q:
Q: Why is there a “body” in front of the CSS rules? What does that mean?
A:
A: The “body” in the CSS means that all the CSS between the “{“and”}” applies to content within the HTML <body> element. So when you set the font to sans-serif, you’re saying that the default font within the body of your page should be sans-serif.
We’ll go into a lot more detail about how CSS works shortly, so keep reading. Soon, you’ll see that you can be a lot more specific about how you apply these rules, and by doing so you can create some pretty cool designs.

Fireside Chats

Tonight’s talk: HTML and CSS on content and style.

HTML	CSS
Greetings CSS; I’m glad you’re here because I’ve been wanting to clear up some confusion about us.
	Really? What kind of confusion?
Lots of people think that my tags tell the browsers how to display the content. It’s just not true! I’m all about structure, not presentation.
	Heck yeah - I don’t want people giving you credit for my work!
Well, you can see how some people might get confused; after all, it’s possible to use HTML without CSS and still get a decent-looking page.
	“Decent” might be overstating it a bit, don’t you think? I mean, the way most browsers display straight HTML looks kinda crappy. People need to learn how powerful CSS is and how easily I can give their web pages great style.
Hey, I’m pretty powerful too. Having your content structured is much more important than having it look good. Style is so superficial; it’s the structure of the content that matters.
	Get real! Without me web pages would be pretty damn boring. Not only that, take away the ability to style pages and no one is going to take your pages seriously. Everything is going to look clumsy and unprofessional.
Whoa, what an ego! Well I guess I shouldn’t expect anything else from you – you’re just trying to make a fashion statement with all that style you keep talking about.
	Fashion statement? Good design and layout can have a huge effect on how readable and usable pages are. And you should be happy that my flexible style rules allow designers to do all kinds of interesting things with your elements without messing up your structure.
Right. In fact we’re totally different languages, which is good because I wouldn’t want any of your style designers messing with my structure elements.
	Don’t worry, we’re living in separate universes.
Yea, that is obvious to me any time I look at CSS – talk about an alien language.
	Yeah, like HTML can be called a language? Who has ever seen such a clunky thing with all those tags?
Millions of web writers would disagree with you. I’ve got a nice clean syntax that fits right in with the content.
	Just take a look at CSS; it’s so elegant and simple, no goofy angle brackets <around> <everything>. <See> <I> <can><talk> <just><like><Mr.><HTML><,><look><at> <me><!>
Hey stupid, ever heard of closing tags? Just notice that no matter where you go, I’ve got you surrounded by <style> tags. Good luck escaping!
	Ha! I’ll show you... because, guess what? I can escape...

Bullet Points

HTML and CSS are the languages we use to create web pages.
Web servers store and serve Web pages, which are created from HTML and CSS. Browsers retrieve pages and render their content based on the HTML and CSS.
HTML is an abbreviation for HyperText Markup Language and is used to structure your web page.
CSS is an abbreviation for Cascading Style Sheets, and is used to control the presentation of your HTML.
Using HTML we mark up content with tags to provide structure. We call matching tags, and their enclosed content, elements.
An element is composed of three parts: an opening tag, content and a closing tag. There are a few elements, like <img>, that are an exception to this rule.
Opening tags can have attributes. We’ve seen one already: type.
Closing tags have a “/” after the left angle bracket, in front of the tag name to distinguish them as closing tags.
Your pages should always have an <html> element along with a <head> element and a <body> element.
Information about the Web page goes into the <head> element.
What you put into the <body> element is what you see in the browser.
Most whitespace (tabs, returns, spaces) are ignored by the browser, but you can use these to make your HTML more readable (to you).
CSS can be added to an HTML Web page by putting the CSS rules inside the <style> element. The <style> element should always be inside the <head> element.
You specify the style characteristics of the elements in your HTML using CSS.

HTMLcross

It’s time to sit back and give your left brain something to do. It’s your standard crossword; all of the solution words are from this chapter.

Across	Down
4. We emphasized this. 5. Always separate these in HTML. 7. CSS is used when you need to control this. 11. You markup content to provide this. 14. Only style available. 15. About your web page. 16. Two tags and content. 17. You define presentation through this tag. 18. Company that launched your web career.	1. What you see in your page. 2. The “M” in HTML. 3. Browsers ignore this. 6. Style we’re all waiting on. 8. Tags can have these to provide additional information. 9. Purpose of <p> element. 10. Appears at the top of the browser for each page. 12. Opening and closing. 13. There are six of these.

Across

Down

4. We emphasized this.

5. Always separate these in HTML.

7. CSS is used when you need to control this.

11. You markup content to provide this.

14. Only style available.

15. About your web page.

16. Two tags and content.

17. You define presentation through this tag.

18. Company that launched your web career.

1. What you see in your page.