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 Exe.
Learn Enough HTML to Be Dangerous Michael Hartl and Lee Donahoe Contents Basic HTML 1.1 HTML tags 1.1.1 Exercises 1.2 Starting the project 1.2.1 Exercises 1.3 The first tag 1.3.1 Exercises 1.4 An HTML skeleton 1.4.1 Exercises Filling in the index page 2.1 Headings 2.1.1 Exercises 2.2 Text formatting 2.2.1 Emphasized text 2.2.2 Strong text 2.2.3 Exercises 2.3 Links 2.3.1 Exercises 12 13 19 20 27 27 39 42 43 45 46 47 49 51 53 57 2.4 Adding images 2.4.1 Hotlinking 2.4.2 Exercises More pages, more tags 3.1 An HTML page about HTML 3.1.1 Exercises 3.2 Tables 3.2.1 Block elements 3.2.2 Inline elements 3.2.3 Exercises 3.3 Divs and spans 3.3.1 Exercises 3.4 Lists 3.4.1 Exercises 3.5 A navigation menu 3.5.1 Exercises Inline styling 4.1 Text styling 4.1.1 Exercises 4.2 Floats 4.2.1 Exercises 4.3 Applying a margin 4.3.1 Exercises 4.4 More margin tricks 4.4.1 Exercises 4.5 Box styling 4.5.1 Exercises 4.6 Navigation styling 4.6.1 Exercises Conclusion 60 65 69 71 71 74 75 76 83 84 86 92 92 95 96 100 101 102 110 111 114 114 118 119 122 123 126 127 130 132 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 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 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: Learn Enough Command Line to Be Dangerous on the Unix command line Learn Enough Text Editor to Be Dangerous on text editors 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) If you’re just getting started with HTML, the Developer Fundamentals sequence 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 We’ll then fill in an index page with formatted text, links, and images in Section 2, expanding it into a multiple-page site with more advanced features like tables and lists in Section 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 elements 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 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 its introduction in 1993 by Tim Berners-Lee, the original “web developer” (Figure 2).1 Nowadays, the specification of what’s in HTML and what isn’t is man1 Image retrieved from https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:Sir_Tim_Berners-Lee.jpg on 2016-01-12 Copyright © 2014 by Paul Clarke and used unaltered under the terms of the Creative Commons Attribution-ShareAlike 4.0 International license 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 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 Common elements, including the ones we’ll be covering in this tutorial, 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 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 language, not a programming language HTML allows a web author to organize and define how content should be displayed, which means it can things like Original image retrieved from https://www.flickr.com/photos/ginsnob/2099458654 on 2016-01-07 Copyright © 2007 by Chris Palmer and modified under the terms of the Creative Commons Attribution-ShareAlike 2.0 Generic license Modified image copyright © 2016 by Lee Donahoe and released under the Creative Commons Attribution-ShareAlike 2.0 Generic license 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 this ourselves in Section 3.3.) Technologically, hypertext is a great improvement over non-linked documents, 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 editor (as discussed in Learn Enough Text Editor to Be Dangerous) Instead of using the convenient but inflexible What You See Is What You Get (WYSIWYG) approach of word processors, HTML indicates formatting using special tags (Figure 4),3 which are the text annotations alluded to above Image retrieved from https://www.flickr.com/photos/jdhancock/3814523970 on 2016-01-09 Copyright © 2009 by JD Hancock and used unaltered under the terms of the Creative Commons Attribution 2.0 Generic license Figure 4: HTML uses tags for everything As we’ll see, HTML supports more than one kind of tags, but the most common kind consist of strings (sequences of characters) enclosed in beginning and ending tags, like this: make them strong Figure 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 Note that we’ve also taken this opportunity to hoist the style text-align: center into the header tag The result appears in Figure 59 Figure 59: Adding a margin under the header The second margin trick is the use of margin: auto;, which inserts a margin with a size that is automatically the same on all sides Its most common application is probably in the rule margin: auto; which arranges for no top or bottom margin and automatic margins on the left and right The result of equal left and right margins is that the element 121 is centered, which is especially useful for elements like images that can’t be centered using the text-align: center; rule we saw in Listing 38 One restriction of margin: auto is that it works only on block elements, but recall from Box that the img tag is an inline element We can fix this with the style display: block;, which overrides the default Putting this together with the margin rule leads to Listing 43, with the result shown in Figure 60 Listing 43: A centered image moby_dick.html 122 Figure 60: A centered image 4.4.1 Exercises Solutions to exercises are available for free at learnenough.com/solutions with any Learn Enough purchase To see other people’s answers and to record your own, join the Learn Enough Society at learnenough.com/society What happens if you use margin: auto for the book cover image (together with display: block) without changing the float rule? What does this tell you about the precedence of the two rules? 123 4.5 Box styling So far, the changes we’ve made have had a relatively minor impact on the appearance of the book report page In this section, we’ll see how a set of only four style rules can make a surprisingly big difference Recall from Listing 32 that we wrapped the bulk of the report in a div tag, which defines a block element that doesn’t get any default styling from the browser, thereby making it perfect to use as a wrapper for styling other content In this case, we’ll use the width style to restrict the size of the main report to 500 pixels, and it turns out this lets us use the automatic margin trick from Section 4.4 to center it using margin: 20px auto (thereby also putting a 20 pixel margin on the top and bottom) Finally, we’ll combine a padding rule with a change in the background-color using the hexadecimal color convention covered in Box The resulting style rules appear in Listing 44 Listing 44: Adding styling to the book report box moby_dick.html Moby-Dick: A classic tale of the sea Comparing the before (Figure 61) and after (Figure 62) shows what a difference a few style rules can make 124 Figure 61: The report box before adding styling 125 Figure 62: The report box after adding styling As we see in Figure 62, the report content has now been set apart from the rest of the page in a styled box To recap what happened, we set a width for the box, and because of this we were able to set the left and right margins to auto Then we added padding to the box, which pushed the content inside away from the edges (Investigating the difference between padding and margins is left as an exercise (Section 4.5.1).) We also added a light gray background color with the hexadecimal code #fafafa (Box 8) (Don’t worry about trying to visualize the color corresponding to a hex code; that’s what color pickers are for.) Finally, because of the narrower width, the text of the Moby-Dick quote now flows around the floated cover image, thereby fulfilling the promise made at the end of Sec126 tion 4.2 4.5.1 Exercises Solutions to exercises are available for free at learnenough.com/solutions with any Learn Enough purchase To see other people’s answers and to record your own, join the Learn Enough Society at learnenough.com/society Temporarily change padding to margin in Listing 44 What difference does this make in the appearance? Add and style a blockquote with padding and background color as shown in Listing 45 Fill in TAG with the right level tag for that location in the document, and replace FILL_IN with a reasonable color of your choice The result for one color choice appears in Figure 63 Listing 45: Styling a famous quotation index.html The Learn Enough Story QuotationsIn addition to hosting most of the world's supply of kitten videos, the Web is also full of inspiring quotes, perhaps none more so than this one:
Don't believe every quote you read on the Internet. Abraham Lincoln
127 Founders Figure 63: Styling a famous quote from an American president 4.6 Navigation styling As a final change to our sample website, we’ll make a change across all three pages by adding styling to the navigation menu added in Section 3.5 In the process, we’ll yet again feel the pain of having to make the same change in 128 several places, further preparing us to appreciate the value of the template system developed in Learn Enough CSS & Layout to Be Dangerous To style the nav menu, we’ll first move it from the top left of the page to the more conventional top right This will involve adding a style rule to the div tag that wraps the whole menu (Listing 34) At the same time, we’ll add a left margin to the second and third nav link in order to improve the spacing The changes to the book report page appear in Listing 46, and the result appears in Figure 64 Listing 46: Styling the navigation menu on the book report page moby_dick.html Home HTML Tags Moby Dick 129 Figure 64: The styled navigation on the book report page Of course, we’re not done yet, as we need to make the same edits to the nav menu on the Home page (Listing 47) and HTML tags page (Listing 48) Listing 47: Styling the navigation menu on the Home page index.html Home HTML Tags Moby Dick 130 Listing 48: Styling the navigation menu on the HTML tags page tags.html Home HTML Tags Moby Dick The results on the nav menu are exactly the same as shown in Figure 64 This is not surprising given that the changes represented by Listing 46, Listing 47, and Listing 48 are all identical This sort of repetition is cumbersome and error-prone—definitely a Bad Thing As mentioned several times before, we’ll solve this problem with a templating system in Learn Enough CSS & Layout to Be Dangerous 4.6.1 Exercises Solutions to exercises are available for free at learnenough.com/solutions with any Learn Enough purchase To see other people’s answers and to record your own, join the Learn Enough Society at learnenough.com/society Change margin: 0 10px; to margin-left: ing 48 What if anything changes in the appearance? 10px in List- It’s conventional for navigation links not to change color after being followed, and they also look better if they’re not underlined like normal links Using your Google-fu and the w3schools reference, guess the style rules for making these changes, and apply them to each element in the 131 menu Hint: The property you’ll have to modify to remove underlining is text-decoration The result should look something like Figure 65 Add a new table for the “document tags” that define the properties of the document Include html, head, body, and meta Add any missing tags to tags.html (By my count there two.) Figure 65: Styling the menu links 132 Conclusion Congratulations! You know know enough HTML to be dangerous All that’s left is to commit and deploy the final sample website: $ git commit -am "Finish the sample website" $ git push The result is a full website running in a production environment (Figure 66) For reference, summary tables of all the block-level tags and inline tags appear in Table and Table 3, respectively Figure 66: A production website 133 Tag h1–h6 p table tr th td div header ol ul li blockquote br Name headings paragraph table table row table header table data division header ordered list unordered list list item block quotation break Purpose include a heading (levels 1–6) include a paragraph of text include a table include a row of data make a table header include a table data cell define block-level section in document label the page header list elements in numerical order list elements whose order doesn’t matter include a list item (ordered or unordered) show formatted quotation enter line break Table 2: The block-level tags covered in this tutorial Tag Name em emphasized strong strong a anchor Purpose make emphasized text make strong text make hyperlink img image include an image code code span span format as source code define inline section in document Example technical sophistication at least a billion people Learn Enough table Call me Ishmael. Table 3: The inline tags covered in this tutorial 134 Result technical sophistication at least a billion people Learn Enough table Call me Ishmael At this point, you’ve got a solid foundation in the basics of HTML To learn how to make industrial-strength websites, though, you’ll need to take the one additional step of reading Learn Enough CSS & Layout to Be Dangerous And if you really want to take things as far as they can go, we recommend the full Learn Enough sequence: Developer Fundamentals (a) Learn Enough Command Line to Be Dangerous (b) Learn Enough Text Editor to Be Dangerous (c) Learn Enough Git to Be Dangerous Web Basics (a) Learn Enough HTML to Be Dangerous (you are here) (b) Learn Enough CSS & Layout to Be Dangerous (c) Learn Enough JavaScript to Be Dangerous Intro Ruby Web Development (a) Learn Enough Ruby to Be Dangerous (b) Learn Enough Sinatra to Be Dangerous (c) Learn Enough Ruby on Rails to Be Dangerous Professional Ruby Web Development • The Ruby on Rails Tutorial Good luck! Learn Enough HTML to Be Dangerous Copyright © 2016 by Michael Hartl and Lee Donahoe 135 ... Web: Learn Enough Command Line to Be Dangerous on the Unix command line Learn Enough Text Editor to Be Dangerous on text editors Learn Enough Git to Be Dangerous on version control with Git To. .. command mkdir -p is covered in Learn Enough Git to Be Dangerous Every command we use in Learn Enough HTML to Be Dangerous is covered somewhere in a previous Learn Enough tutorial (unless otherwise... Text Editor to Be Dangerous) these days all the cool kids open the full HTML project directly at the command line (Figure 11):8 $ atom (Recall from Learn Enough Command Line to Be Dangerous