Learn Enough HTML to Be Dangerous Michael Hartl and Lee Donahoe Contents 1 Basic HTML 5 1.1 HTML tags . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.1.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 12 1.2 Starting the project . . . . . . . . . . . . . . . . . . . . . . . 13 1.2.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 19 1.3 The first tag . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 1.3.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 27 1.4 An HTML skeleton . . . . . . . . . . . . . . . . . . . . . . . 27 1.4.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 39 2 Filling in the index page 42 2.1 Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 2.1.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 45 2.2 Text formatting . . . . . . . . . . . . . . . . . . . . . . . . . 46 2.2.1 Emphasized text . . . . . . . . . . . . . . . . . . . . 47 2.2.2 Strong text . . . . . . . . . . . . . . . . . . . . . . . 49 2.2.3 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 51 2.3 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 2.3.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 57 2 2.4 Adding images . . . . . . . . . . . . . . . . . . . . . . . . . 60 2.4.1 Hotlinking . . . . . . . . . . . . . . . . . . . . . . . 65 2.4.2 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 69 3 More pages, more tags 71 3.1 An HTML page about HTML . . . . . . . . . . . . . . . . . 71 3.1.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 74 3.2 Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 3.2.1 Block elements . . . . . . . . . . . . . . . . . . . . . 76 3.2.2 Inline elements . . . . . . . . . . . . . . . . . . . . . 83 3.2.3 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 84 3.3 Divs and spans . . . . . . . . . . . . . . . . . . . . . . . . . 86 3.3.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 92 3.4 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 3.4.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 95 3.5 A navigation menu . . . . . . . . . . . . . . . . . . . . . . . 96 3.5.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 100 4 Inline styling 101 4.1 Text styling . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 4.1.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 110 4.2 Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 4.2.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 114 4.3 Applying a margin . . . . . . . . . . . . . . . . . . . . . . . 114 4.3.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 118 4.4 More margin tricks . . . . . . . . . . . . . . . . . . . . . . . 119 4.4.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 122 4.5 Box styling . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 4.5.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 126 4.6 Navigation styling . . . . . . . . . . . . . . . . . . . . . . . . 127 4.6.1 Exercises . . . . . . . . . . . . . . . . . . . . . . . . 130 5 Conclusion 132 3 HyperText Markup Language, or HTML, is the universal language of the World Wide Web. Every time you visit a website, the site’s web server sends HTML to your browser, which then renders it as the web page you see on your screen. Because this process is universal, anyone who works with web technologies— which these days means virtually all developers, designers, and even many managers—can benefit from knowing the basics of what HTML is and how it works. Learn Enough HTML to Be Dangerous is designed to give you this foundation in basic HTML. Appropriately enough, there are lots of HTML tutorials on the Web, but most of them use toy examples, focusing on HTML syntax in isolation, without showing how HTML is written and deployed in real life. In contrast, Learn Enough HTML to Be Dangerous not only shows you how to make real HTML pages, it shows you how to deploy an actual site to the live Web. If you have previously attempted or completed an HTML tutorial, it’s likely that Learn Enough HTML to Be Dangerous will help you “put everything together” in a way you haven’t seen before, including an emphasis on expanding your skillset with technical sophistication (Box 1). Box 1. Technical sophistication If tech is the new literacy, technical sophistication is like being able to read and write. This includes being able to figure things out on your own (like sounding out words while reading) and look things up when you need them (like consulting a dictionary or thesaurus while writing). On the Web, the alphabet is HTML. In Learn Enough HTML to Be Dangerous, we’ll constantly be on the lookout for chances to improve our technical sophistication. We’ll deploy our website immediately to production (Section 1.2), getting over any bumps along the way. We’ll push ourselves to read HTML we don’t quite understand, content to get the gist at first before deepening our mastery later. And we’ll put all our tools to use, combining the command line, text editor, and version control to learn how to make HTML websites the Right Way™—professional-grade from the start. 4 Because of our pragmatic approach, the tools we’ll be using use are all professional-grade (Figure 1). They are the same tools covered in the Learn Enough Developer Fundamentals sequence, which you should follow now if you’re not already familiar with them. The individual tutorials are available for free on the Web: 1. Learn Enough Command Line to Be Dangerous on the Unix command line 2. Learn Enough Text Editor to Be Dangerous on text editors 3. Learn Enough Git to Be Dangerous on version control with Git To get even more out of the sequence, you can join our subscription service, the Learn Enough Society, which includes streaming videos and special enhanced versions of the online tutorials, among other benefits. Figure 1: The tools of the trade (kitten not included). 5 If you’re just getting started with HTML, the Developer Fundamentals se- quence represents a little bit of overhead, but the benefits are enormous. To our knowledge, this combination of software development best practices and deploying to a live website is unique among introductory HTML tutorials, and gives you a tremendous advantage both when collaborating with others and when taking your skills to the next level by learning to build more complicated sites. Learn Enough HTML to Be Dangerous focuses on core HTML, starting with a “hello, world!” page that we’ll deploy to production (!) in Section 1. We’ll then fill in an index page with formatted text, links, and images in Sec- tion 2, expanding it into a multiple-page site with more advanced features like tables and lists in Section 3. Finally, we’ll add some inline styling in Section 4, which will allow us to see the effect of simple style rules on plain HTML ele- ments. The resulting site will be functional, but we’ll run into several important limitations imposed by working with raw HTML. This will set the stage for the next Learn Enough tutorial, Learn Enough CSS & Layout to Be Dangerous, which creates a fully modern website using Cascading Style Sheets (CSS) to separate the design of the site from its HTML structure, while covering site layouts and advanced styling as well. 1 Basic HTML Underneath every website, no matter how simple or complex, you will find HTML. In this tutorial, by creating and deploying a simple but real website, we’ll gain an understanding of the underlying structure that every site uses to organize and display content online. As a technology standard, HTML has been constantly evolving ever since itsintroductionin1993byTimBerners-Lee,theoriginal“webdeveloper”(Fig- ure 2).1 Nowadays, the specification of what’s in HTML and what isn’t is man- 1Image retrieved from https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:Sir_Tim_Berners-Lee.jpg on2016-01-12. Copyright©2014byPaulClarkeandusedunalteredunderthetermsoftheCreativeCommons Attribution-ShareAlike4.0Internationallicense. 6 aged by the World Wide Web Consortium (W3C). The latest public release, which is what we will be using in this tutorial, is HTML5 (that is, version 5 of HTML). The companies that create web browsers take the specs from the W3C and implement the behaviors that are expected when the browser comes across any of the allowed formatting, such as making text bold or changing its color (or even doing both at the same time). Figure 2: Sir Tim Berners-Lee, the original web developer. Fortunately, we won’t need to get into a lot of specifics or worry about what has changed from version to version. Just know that new features are being added regularly to expand browser functionality and modernize the technology. Commonelements, includingtheoneswe’llbecoveringinthistutorial, haven’t changed much since the beginning, but that doesn’t mean that they will always be safe—the HTML spec is a constantly evolving creature being assembled 7 by a committee (Figure 3).2 We’ll discuss some practical effects of this in Section 1.1. Figure 3: HTML in animal form. 1.1 HTML tags As the name HyperText Markup Language indicates, HTML is a markup lan- guage, not a programming language. HTML allows a web author to organize and define how content should be displayed, which means it can do things like 2Original image retrieved from https://www.flickr.com/photos/ginsnob/2099458654 on 2016-01-07. Copy- right©2007byChrisPalmerandmodifiedunderthetermsoftheCreativeCommonsAttribution-ShareAlike2.0 Genericlicense. Modifiedimagecopyright©2016byLeeDonahoeandreleasedundertheCreativeCommons Attribution-ShareAlike2.0Genericlicense. 8 add text formatting; make headings, lists, and tables; and include images and links. You can think of an HTML file as an ordinary written document that has been carefully annotated by the author. Some of the notes might highlight parts of the text, some might include an image that has been paper-clipped to the document, and others might tell you where to find additional information. The “HyperText” part of the HTML acronym refers to the way links on the Web allow you to move from one document to another in a non-linear fashion. For example, if you are reading the Wikipedia article on HTML and see a highlighted link to a related topic like CSS, you can click on that link and be taken immediately to the other article. It also allows a document like this one to link to Wikipedia. (You might notice that external links in this document open in a new browser tab. We’ll learn how to do this ourselves in Section 3.3.) Technologically, hypertext is a great improvement over non-linked docu- ments, as it eliminates the need to flip or scroll through pages of content to find what you are looking for. These days, the ability to link between documents is something that we all take for granted, but when the HTML specification was created it was an innovation important enough to be included in the name of the technology. HTML source is plain text, which makes it ideal for editing with a text ed- itor (as discussed in Learn Enough Text Editor to Be Dangerous). Instead of using the convenient but inflexible What You See Is What You Get (WYSI- WYG) approach of word processors, HTML indicates formatting using special tags (Figure 4),3 which are the text annotations alluded to above. 3Image retrieved from https://www.flickr.com/photos/jdhancock/3814523970 on 2016-01-09. Copyright © 2009byJDHancockandusedunalteredunderthetermsoftheCreativeCommonsAttribution2.0Genericlicense. 9 Figure 4: HTML uses tags for everything. As we’ll see, HTML supports more than one kind of tags, but the most commonkindconsistofstrings(sequencesofcharacters)enclosedinbeginning and ending tags, like this: <strong>make them strong</strong> Figure 5 illustrates the detailed anatomy of this typical tag, including the name of the tag (strong, in this case), angle brackets, and a forward slash (/). 10