Hello and thank you for choosing this book to guide you on your journey towards learning HTML! HTML is the language of the web, as virtually all webpages are written in this markup language, so you are on the right path towards learning to build amazing websites. This book will thoroughly guide you through the main components of HTML documents and how to use them effectively. The book is organized in chapters that revolve around a main topic. Each chapter contains code examples with explanations to strengthen your knowledge. At the end of each chapter there are a number of exercises for you to test the knowledge of the chapter. The answers for those can be found at the back of the book. So, without further ado, lets dive right into learning HTML.
Chapter 1: Structuring Pages
Structured Documents
Every day, you come across all kinds of printed documentsnewspapers, 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: Youre 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 dayand 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 structuredwhat text to put in a heading, paragraph, or table, and so on so that the browser can present it properly to the user.
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.
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 documents 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 processormain 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.
You dont need any special programs to write web pages; you can simply use a text editor such as Notepad on Windows or TextEdit on a Mac and save your files with the .html or .htm file extension. Lets look at an example page: