Beginning HTML and CSS

Rob Larsen

• Publisher: Wrox
• Year: 2013
• ISBN:
  9781118416518
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Programación en HTML

Everything you need to build websites with the newest versions of HTML and CSS

If you develop websites, you know that the goal posts keep moving, especially now that your website must work on not only traditional desktops, but also on an ever-changing range of smartphones and tablets. This step-by-step book efficiently guides you through the thicket. Teaching you the very latest best practices and techniques, this practical reference walks you through how to use HTML5 and CSS3 to develop attractive, modern websites for today's multiple devices. From handling text, forms, and video, to implementing powerful JavaScript functionality, this book covers it all.

• Serves as the ultimate beginners guide for anyone who wants to build websites with HTML5 and CSS3, whether as a hobbyist or aspiring professional developer
• Covers the basics, including the different versions of HTML and CSS and how modern websites use structure and semantics to describe their contents
• Explains core processes, such as marking up text, images, lists, tables, forms, audio, and video
• Delves into CSS3, teaching you how to control or change the way your pages look and offer tips on how to create attractive designs
• Explores the jQuery library and how to implement powerful JavaScript features, such as tabbed content, image carousels, and more

Get up to speed on HTML5, CSS3, and today's website design with this practical guide. Then, keep it on your desk as a reference!

Chapter 1

Structuring Documents for the Web

What You Will Learn in This Chapter

• Creating several example web pages in HTML
• Seeing how a web page describes its structure to a web browser
• Discovering the meaning of some key terms used by web designers, such as elements, attributes, tags, andmarkup

Wrox.com Code Downloads for this Chapter

The wrox.com code downloads for this chapter are found at www.wrox.com/remtitle.cgi?isbn=9781118340189 on the Download Code tab. The code is in the Chapter 1 download and individually named according to the names throughout the chapter.

In this chapter, you learn the key concept to create any web page: how to give it structure. You need to add structure to a document so that web browsers can present the page to people who visit your site in a way they can understand. For example, imagine a news article that contains a headline (or title) and several paragraphs of text; if you want to put this article on the web, you would need to add structure to the words in the document so that the browser knows which words are the headline, and where each paragraph starts and ends. To give a document structure, you need to learn how to create web pages using HTML.

A Web of Structured Documents

Every day, you come across all kinds of printed documents—newspapers, train timetables, and insurance forms. You can think of the web as being a sea of documents that all link together and bear a strong similarity to the printed documents that you meet in everyday life.

Take the example of a newspaper. A newspaper consists of several stories or articles (and probably a fair smattering of advertisements, too). Each story has a headline and then some paragraphs, perhaps a subheading, and then some more paragraphs; it may also include a picture or two.

The structure of articles on news websites is similar to the structure of articles in newspapers. Each article consists of headings, paragraphs of text, and some pictures. (Sometimes the pictures might be replaced by a video.) The parallel is quite clear; the only difference is that in a newspaper you may have several stories on a single page, whereas on the web each story tends to get its own page. The news websites also often use homepages that display the headline and a brief summary of the stories.

Consider another example: You’re catching a train to see a friend, so you check the schedule or timetable to see what time the train leaves. The main part of the schedule is a table telling you what times trains arrive and when they depart from different stations. You can probably think of several types of documents that use tables. From the listings in the financial supplement of your paper to the TV schedule, you come across tables of information every day—and often when this information is put on the web, these tables are re-created.

Another common type of printed document is a form. For example, think about a common form from an insurance company. Such a form contains fields to write your name, address, and the amount of coverage, along with check boxes to indicate the number of rooms in the house and what type of lock is on the front door. There are lots of forms on the web, from simple search boxes that ask what you are looking for to the registration forms you are required to fill out before you can place an online order for books or CDs.

As you can see, there are many parallels between the structure of printed documents you come across every day and pages you see on the web. When you are writing web pages, it is the HTML code you start learning in this chapter that tells the web browser how the information you want to display is structured—what text to put in a heading, paragraph, or table, and so on so that the browser can present it properly to the user.

Introducing HTML5

Even if you have never seen any HyperText Markup Language (HTML) code, you may know that it is used to create web pages. There have been five versions of HTML since the web began, and the development of the language is overseen by an organization called the World Wide Web Consortium (W3C).

This book focuses on the latest version of the language, popularly referred to as HTML5. There are two other versions you might encounter. These are HTML 4.01, the last major version of the language from December 1999, and a stricter version from 2000 called Extensible HyperText Markup Language (XHTML). XHTML is still popular in some applications, so important differences between it and HTML5 will be called out in the text.

start feature

---

NOTE Generally, you see just the term HTML used in the rest of this book. The one exception is when there is a feature or convention related to a single version.

---

end feature

As its name suggests, HTML is a markup language, which may sound complicated until you realize that you come across markup every day. When creating a document in a word processor, you can add styles to the text to explain the document’s structure. For example, you can distinguish headings from the main body of the text using a heading style (usually with a larger font). You can use the Return (or Enter) key to start a new paragraph. You can insert tables into your document to hold data or create bulleted lists for a series of related points, and so on. Although this does affect the presentation of the document, the key purpose of this kind of markup is to provide a structure that makes the document easier to understand.

When marking up documents for the web, you perform a similar process, except you do it by adding things called tags to the text. With HTML, the key thing to remember is that you must add the tags to indicate the structure of the document (not how you want it to be presented); for example, which part of the document is a heading, which parts are paragraphs, what belongs in a table, and so on. Browsers such as Internet Explorer, Firefox, and Google Chrome all use this markup to help present the text in a familiar fashion, similar to that of a word processor—main headings are bigger than the text in paragraphs, there is space above and below each paragraph, and lists of bullet points have a circle in front of them.

start feature

---

NOTE Although earlier versions of HTML enabl...