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.
HTML tags
Exercises
With any Learn Enough purchase, you can access free solutions to exercises at learnenough.com/solutions To browse others’ answers and to submit your own, join the Learn Enough Society at learnenough.com/society.
Note: Unlike most other Learn Enough tutorials, the results of some exer- cises will appear in future screenshots.
1 Identify all the tags inListing 2 Notice that you don’t have to know what a tag does to be able to identify it correctly (This is a good example of technical sophistication (Box 1).)
2 Some HTML tags don’t contain any content, and instead are known as void elements, also called self-closing tags Which tag in Listing 2 is a void element?
3 HTML tags can be nested, which means that one tag can be put inside another Which tags in Listing 2 are nested? Don’t include any self- closing tags.
Listing 2: Shall I compare thee to a summer’s day?
William Shakespeare's Sonnets consists of 154 poems, each fourteen lines long (three
quatrains followed by a rhyming
couplet)
Sonnet 18 is perhaps the most famous, and begins like this:
Shall I compare thee to a summer's day?
Thou art more lovely and more temperate.
Rough winds do shake the darling buds of May,
And summer's lease hath all too short a date
Starting the project
Exercises
Solutions to exercises are available for free at learnenough.com/solutionswith own, join the Learn Enough Society atlearnenough.com/society.
1 Figure 9 shows a section for a README file about the project Add and commit a file called README.md , taking care to use at least a few Markdowntags What is the result at GitHub?
2 What happens if you visit .github.io//- README.md in a browser? What does this imply about including sensi- tive information in a public website repo?
The first tag
Exercises
Solutions to exercises are available for free at learnenough.com/solutions with any Learn Enough purchase To view other people’s answers and to record your own, join the Learn Enough Society at learnenough.com/society.
1 Replace the contents of index.html with the markup from Listing 2. Can you guess what the a tag does?
2 Use your browser’sweb inspectorto inspect the source from the previous exercise (Google for “ web inspector” to learn how to use your browser’s web inspector Or just right-click.) Does it differ in any way fromListing 2?
An HTML skeleton
Exercises
Free solutions to exercises are available 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.
1 Using theHTML validator, confirm that Listing 6 is valid HTML.
2 Remove fromListing 9and verify that it breaks the page (Fig- ure 23) This underscores the importance of closing your tags Confirm using the HTML validator that the resulting code fails validation.
3 By pasting in the contents ofListing 10 into index.html , confirm that the browser ignores the extra whitespace (including newlines) in the mailing address shown inListing 10.
4 By adding the break tag to the end of each of the first two lines of the address, obtain the nicely formatted address shown inFigure 24.
Listing 9: The index page with a missing closing tag. index.html
Figure 23: The look of failure Close your tags!
2 Filling in the index page
After validating and deploying a clean HTML page, the next step is building the sample website by first outlining the index page structure and adding a standard-length paragraph (Section 2.1), then formatting that content (Section 2.2) and enriching the page with links (Section 2.3) and images (Section 2.4), and starting in Section 3 we expand the site by adding two more pages to pair with the index while introducing several additional HTML tags to improve structure and semantics.
Headings
Exercises
Get free exercise solutions at learnenough.com/solutions with any Learn Enough purchase, and join the Learn Enough Society at learnenough.com/society to view other learners’ answers and submit your own.
1 Listing 12 uses headings h1 down to h3 By experimenting directly in index.html , determine how many levels of headings HTML supports.
Text formatting
Emphasized text
Listing 13 contains the correct content, but it currently emphasizes terms with italics; to improve semantic markup and accessibility, replace italics with the em tag, as noted in Box 2, for example, emphasized terms are conveyed with proper emphasis by screen readers while maintaining SEO benefits This approach keeps styling consistent and makes the content more crawlable and user-friendly.
Applying this idea toListing 13gives the result shown inListing 14.
Listing 14: Emphasized text. index.html
Learn Enough to Be Dangerous is a leader in the movement to teach
Technical sophistication is the seemingly magical ability to take command of your computer and make it do your bidding It spans everything from mastering the command line and coding to spotting keyboard shortcuts, Googling error messages, and knowing when a reboot is the right move.
We believe there are at least a billion people who can benefit from learning technical sophistication, probably more To join our movement, sign up for our official email list now
We can confirm that this worked by refreshing the browser, which shows that technical sophisticationis properly emphasized (Figure 27).
Strong text
As noted earlier, you can draw attention to specific text by using the strong tag, which browsers render as bold This approach lets us emphasize the belief that at least a billion people could benefit from learning technical skills, and we can convey that conviction by applying strong emphasis to the key phrase.
at least a billion people
Listing 15: Strong text. index.html
Learn Enough to Be Dangerous is a leader in the movement to teach
Technical sophistication is the seemingly magical ability to take command of your computer and get it to do your bidding, spanning everything from mastering command lines and coding to discovering efficient keyboard shortcuts, effectively Googling error messages, and knowing when a simple reboot is the right move Cultivating these practical skills lets you troubleshoot faster, optimize performance, and approach technology with greater confidence.
We believe there are at least a billion people who can benefit from learning technical sophistication, and the number may be even higher as access expands To join our movement, sign up for our official email list today and stay informed about new opportunities and resources.
Refreshing the browser confirms that the text is now set in bold (Figure 28).
Exercises
Solutions to exercises are available for free at learnenough.com/solutions, and you can access them 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.
1 Add the paragraph shown in Listing 16 under founders, then make the textat least a billion people bold (Figure 29).
2 What happens if you nest the em and strong tags? Is is possible to make something both italicand bold?
Listing 16: A paragraph with something to be made stronger. index.html
Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee Donahoe, and Nick Merwin, with the aim of teaching technical sophistication through its tutorials The team believes the knowledge shared in Learn Enough tutorials can benefit at least a billion people, and probably more.
Figure 29: The appearance of a properly modifiedListing 16.
Links
As noted in Section 1.1, the Web is built on hypertext, with hyperlinks that move you from one page to another These hyperlinks—often simply called links—are created using the HTML anchor tag, the a element, which is the standard way to define clickable destinations on a webpage While some wonder why it's not called a 'link,' the concise a tag remains the common choice for embedding hyperlinks.
Reviewing Listing 13, you may notice that the line "sign up for our official email list" practically begs for a link to the signup page The exact wording for the link has been debated, with some preferring noun-based anchor text and others favoring a direct call to action whenever possible We take a pragmatic approach, prioritizing anchor text that reads most naturally to readers while also supporting SEO In this case, we'll link the text "sign up for our official email list" to the signup page, demonstrating how clear, action-oriented link text can improve user experience and click-through rates.
sign up for our official email list
This contains our first example of an attribute, which is a bit of text inside an
In HTML, tags can carry extra information through attributes that guide how the element should be processed The href attribute, short for hypertext reference, specifies the URL a link points to, such as the Learn Enough email list signup form.
To add the email list link, insert the anchor from Listing 15 into the target paragraph to produce Listing 17 The link text may wrap onto two lines, as seen in Listing 1, but because HTML treats whitespace as the same, the rendered output is effectively identical to a single-line link This approach keeps the content clean and accessible while preserving the intended navigation flow.
Learn Enough to Be Dangerous leads the movement to teach technical sophistication—the ability to take command of your computer and have it do your bidding Our program covers practical skills from mastering command lines and coding to recognizing keyboard shortcuts, efficiently Googling error messages, and knowing when a simple reboot is the right move.
We believe that at least a billion people could benefit from learning technical sophistication, and the number is likely even higher; if you share this vision, join our movement by signing up for our official email list at http://learnenough.com/email today.
The result ofListing 17 appears inFigure 30.
Figure 30: The result of adding a link.
With the basics of link creation in place, we now present the background of Learn Enough to Be Dangerous—a section rich with internal links and additional examples of the text-formatting tags introduced in Section 2.2 The resulting paragraph, shown in Listing 18, should be placed under the second-level heading from Listing 12 and serves as a practical showcase of how these tags work in context, including emphasis, code formatting, lists, hyperlinks, and block quotes Because it contains so many representative tag examples we’ve covered so far, we recommend typing it by hand to internalize the syntax and to produce clean, accessible markup that supports SEO through clear structure and natural keyword usage.
Listing 18: Adding a paragraph using several useful tags.
Learn Enough to Be Dangerous is an outgrowth of the
Ruby on Rails Tutorial and the
Softcover publishing platform
This page is part of the sample site for
Learn Enough HTML to
Be Dangerous, which teaches the basics of
HyperText Markup
Language, the universal language of the World Wide Web Other related tutorials can be found at
learnenough.com
It’s worth noting thatListing 18contains an example of tag nesting, in the form of the link to the present tutorial:
Learn Enough HTML to Be Dangerous
Figure 31 shows that this approach creates a link to emphasized text, and you can see that some links in Figure 31 are a different color, indicating they have been followed This default link-color behavior can be overridden with CSS, as discussed in Learn Enough CSS & Layout to Be Dangerous and briefly noted in Section 4.6.1.
Figure 31: Adding a paragraph with formatting and links.
Exercise solutions are free at learnenough.com/solutions with any Learn Enough purchase, and you can view others’ answers and record your own by joining the Learn Enough Society at learnenough.com/society.
1 Using the content shown in Listing 19, add short founder bios to the index page.
2 Now add Twitter follow links as shown in Listing 20 Does the content appear as shown inFigure 32?
External links can be convenient when opened in a new browser tab, and this is achieved by adding the attribute target="_blank" to each Twitter link from Listing 20; does clicking on one of the links open in a new tab, as shown in Figure 32?
Listing 19: Adding short founder biographies. index.html
Michael is the creator of the
Ruby on Rails Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence He is an advanced student of
Krav Maga and has a three-step plan for world domination Rumors that he's secretly a supervillain are slightly exaggerated
When he's not swimming with sharks or chasing powder on his snowboard, Lee spends time at his computer designing interfaces, doing front-end development, and writing interface-focused Learn Enough tutorials.
Nick is the guitarist who fans may have seen shredding live with Capital Cities on Jimmy Kimmel, Conan, or The Ellen Show, but he’s a true nerd at heart He’s just as happy shredding well-spec’d lines of code from a tour bus as he is riffing from his kitchen table.
Listing 20: Adding Twitter links to the bios. index.html
You should follow Michael on Twitter
here
You should follow Lee on Twitter
here
You should follow Nick on Twitter
here
Figure 32: The index page after the completion of the exercises.
Adding images
Hotlinking
Hotlinking is the practice of linking directly to images hosted on the Web To do this, you use a fully qualified URL in the image’s src attribute, for example: This method lets you display external images on your site without hosting them yourself.
Hotlinking is generally discouraged because an image will only load if it sits on the exact external site, making your page dependent on that site's bandwidth and uptime, which can lead to broken images and slower load times It also places the external host at your page’s mercy and can be seen as inconsiderate For these reasons, the recommended approach is to host images locally on your own server or a CDN, giving you control over delivery, improving reliability and speed, and benefiting SEO by avoiding hotlink restrictions.
Hotlinking is generally restricted, but there are notable exceptions, notably Gravatar, the globally recognized avatar service Gravatar lets you attach a standard image to an email address and use it as a profile picture across a wide range of sites, including GitHub and WordPress Some Gravatar images are specifically designed for hotlinking, so the practice is encouraged; if you update your picture, the new image automatically propagates to every site using the matching Gravatar URL—it's a deliberate feature, not a bug.
Gravatar URLs include a long string of hexadecimal digits (base 16, mean- ing 0–9 and a–f), like this: https://gravatar.com/avatar/ffda7d145b83c4b118f982401f962ca6
The string ffda7d145b83c4b118f982401f962ca6 is a unique identifier derived from the email address associated with Gravatar, and Gravatar URLs can include query parameters added after the main URL to customize how the avatar is served, such as providing display options like ?s0; for example: https://gravatar.com/avatar/ffda7d145b83c4b118f982401f962ca6?s0.
Query parameters come after a question mark ? , in this case s0 , which consists of a key s and a value 150 16 As you might be able to guess, s stands
13 Here “local” means “local to the site” (which might be a remote server like GitHub Pages), not necessarily local to your development machine.
14 Indeed, Gravatar was originally developed by GitHub cofounder Tom Preston-Werner, and was later acquired by Automattic, the parent company of WordPress.
15 It’s calculated using something called the MD5 message-digest algorithm, which is covered in the Ruby on Rails Tutorial.
Query parameters are appended to URLs after the question mark and separated by the ampersand symbol, as in http://example.com?foo=1&bar=2 If you look at the address bar in your browser, you’ll see these query parameters everywhere For the size parameter, the s0 value sets the Gravatar size to 150 pixels, and since Gravatars are square by design, a single parameter uniquely determines the size.
Using our newly acquired Gravatar knowledge, we add avatar images to the index page beneath each Learn Enough to Be Dangerous founder bio (as shown in Listing 19 from the Section 2.3.1 exercises) In a typical dynamic web application, such as the Ruby on Rails Tutorial, these avatar URLs would be generated on the fly from users’ email addresses, but for convenience we provide the exact URLs The result is demonstrated in Listing 22, with the leading indentation removed to fit the URLs, though you should retain the original indentation in index.html.
Listing 22: Adding Gravatar hotlinks for the Learn Enough founders.
The result of adding the contents of Listing 22 should look something like Figure 35, although your page may not match exactly (Section 2.4.2).
With the sample website’s index page nearly in its final form, now is the moment to commit the changes and push them to the live server on GitHub Pages, ensuring the latest updates are published and accessible to visitors.
$ git commit -m "Add some images"
The result should look something likeFigure 36.
Figure 36: The sample index page on the live Web.
Exercises
You can access free solutions to exercises at learnenough.com/solutions with any Learn Enough purchase If you want to see other people’s answers and record your own, join the Learn Enough Society at learnenough.com/society.
1 Why might the images shown in Figure 35 not match your results ex- actly? Hint: It’s not a bug, it’s a feature.
2 The kitten image in Figure 33 is available under a Creative Commons license that requires attribution We’ll fulfill this requirement by link- nesting the a and img tags, as shown in Listing 23 (Be sure to replace
FILL_IN with the right URL.) How does this change the page’s (a) ap- pearance and (b) behavior?
3 Under the first paragraph on index.html , let’s add a link to the Learn Enough Twitter account First, download the Twitter logo as shown in Listing 24 Then, add a link to both the page and the logo image, as shown in Listing 25 Be sure to replace FILL_IN with the right path to the image Note that Listing 25 introduces inline styling, which is the subject ofSection 4 Extra credit: Follow Learn Enough on Twitter here.
Listing 23: Linking an image. index.html
HTML was created by the original "web developer", computer scientist
Tim
Berners-Lee It's not true that Sir Tim invented HTML in order to share pictures of his cat, but it would be cool if it were
Listing 24: Downloading the Twitter logo.
$ curl -o images/small_twitter_logo.png \
> -OL cdn.learnenough.com/small_twitter_logo.png
Note that the backslash \ should be typed, but your shell will include > auto- matically, so don’t just copy and paste the whole thing.
Listing 25: Adding links to the Learn Enough Twitter account. index.html
for our official email list now
You should follow Learn Enough on Twitter
here
Having completed a full index page in Section 2 and learned a range of HTML tags, it's time to add a couple more pages to our website This step will introduce several additional HTML tags and reveal the limitations of our purely hand-edited approach.
Two updates are introduced: a meta-page about HTML tags that reinforces the earlier material as it’s built, and a second page featuring a lighthearted report on Moby-Dick, one of Softcover’s free books The Moby-Dick page is especially suitable for styling, which we will address in Section 4.
An HTML page about HTML
Exercises
With any Learn Enough purchase, you get free access to exercise solutions at learnenough.com/solutions, and you can join the Learn Enough Society at learnenough.com/society to view other users’ answers and submit your own.
1 Does the HTML inListing 26 validate?
2 As with the kitten image, the Stormtrooper tag image is used under a Cre- ative Commons license that requires attribution By following the model in Listing 23, fulfill this requirement by linking the image in Listing 26 to theoriginal image URL.
Tables
Block elements
An HTML table is created with opening and closing table tags, and each row is defined by a tr element Typically, the first row functions as the header row, with its cells using th elements to label the columns as table headers, as shown in Listing 27.
Listing 27: Defining a table with headers. tags.html
The tables below don't include all HTML tags, but they do list many of the most important ones
Figure 39 presents the results of Listing 27 Since the file’s data are laid out vertically while the display is horizontal, it can be challenging to mentally map the table contents to the visual result at first; with practice, though, this mapping becomes easier to understand.
After optionally defining the table headers, HTML tables consist of a sequence of table data cells defined by the td tag To begin filling the table content, add a row for the heading tags (th) first introduced in Section 2.1; the result, which also solves the exercise from Section 2.1.1, appears in Listing 28.
Listing 28: Adding a row of data. tags.html
The tables below don't include all HTML tags, but they do list many of the most important ones
h1–h6
include a heading (levels 1–6)
Listing 28uses the code tag we saw inListing 26, and also introduces uses
The en dash is represented in HTML by the character entity reference –, a dash roughly the width of the letter “n” (–) Since our HTML document uses the UTF-8 character set (Listing 7), you can also insert the literal en dash –, but the entity reference remains common, and it’s useful to know how to use both.
Taking in a lot at once can feel overwhelming, but this is a valuable practice for learning to visualize how HTML markup renders in the browser Once you form a mental image of the expected result, refresh your browser to see the actual output and compare it to your expectations, using Figure 40 as your reference.
Figure 40: Adding a row of table data.
Having identified the most important table tags, we’re ready to fill the table with rows for the other block-level tags we’ve covered, including the paragraph tag (p) and the table tag itself, and the resulting table is shown in Listing 29.
Listing 29: A more complete table of HTML block elements. tags.html
17 Technically, the td tag is more like an “inline block”, but this distinction isn’t important for our purposes.
18 Some code listings include yellow highlights for important lines, but we’ll avoid the “wall of yellow” by omitting the highlights when there are as many new lines as there are in listings like Listing 29.
The tables below don't include all HTML tags, but they do list many of the most important ones
h1–h6
include a heading (levels 1–6)
include a paragraph of text
table
tr
include a row of data
th
make a table header
td
include a table data cell
There are a lot of new rows inListing 29, so you can copy and paste if you it can be quite cumbersome, which is one reason many real-world tables are generated from databases using programming languages like Ruby.) The result appears inFigure 41.
Figure 41: A table for some HTML block elements.
Figure 41 shows that the spacing around the table data cells isn’t ideal, a formatting detail that Cascading Style Sheets (CSS) are designed to fix; this topic—how CSS controls table spacing—is covered in Learn Enough CSS & Layout to Be Dangerous and is key to improving table presentation and readability.
Inline elements
Having learned how to create a basic table, you’re ready to add a table of inline elements Inline elements don’t start a new line, so it’s easy to include examples of the tags alongside their definitions For instance, a working example of the em tag is shown in Listing 30.
Listing 30: A start at a table of inline tags. tags.html
em
make emphasized text
<em>technical sophistication</em>
technical sophistication
Listing 30 presents a solution to the challenge of rendering literal angle brackets in HTML It works by escaping the less-than and greater-than signs with the HTML entities < and >, ensuring the browser displays the content as text rather than interpreting it as markup (for example, <em>technical sophistication</em>) The result appears in Figure 42.
Figure 42: A good start at a table of inline elements.
Some other inline elements we’ve encountered so far are strong , a , img ,and code Adding them to the table inListing 30is left as an exercise.
Exercises
Free exercise solutions are available at learnenough.com/solutions with any Learn Enough purchase To view other users’ answers and submit your own, join the Learn Enough Society at learnenough.com/society.
1 Follow the template in Listing 31 to add information on the strong , a ,and img tags Why does the img tag example use the Bitly link short- ener?
2 Add an additional row for the code tag Does the page validate?
Listing 31: Template for adding strong , a , and img tags. tags.html
em
make emphasized text
<em>technical sophistication</em>
technical sophistication
strong
make strong text
<strong>at least a billion people</strong>
<a href="http://learnenough.com/">Learn Enough</a>
img
include an image
<img src="http://bit.ly/1MZAFuQ" alt="Michael Hartl">
Divs and spans
Exercises
With any Learn Enough purchase, you can access free exercise solutions at learnenough.com/solutions To see other students’ answers and to submit your own, join the Learn Enough Society at learnenough.com/society.
1 Validate the HTML in Listing 32 and confirm that there’s one warning and one error Apply the fixes suggested by the validator and confirm that the new page validates with no warnings.
2 Which of the changes in the previous exercises also affects the other two pages in our site? Update them accordingly.
3 Add header , div , and span to the tables in tags.html Hint: Like div , header is a block element.
Lists
Exercises
Access free exercise solutions with any Learn Enough purchase at learnenough.com/solutions To view other learners’ answers and to submit your own, join the Learn Enough Society at learnenough.com/society.
1 Add ol , ul , and li tags to tags.html Which are block elements are which are inline?
A navigation menu
Exercises
Solutions to exercises are available for free at learnenough.com/solutions; with any Learn Enough purchase, you gain access to these solutions To see other people’s answers and to record your own, join the Learn Enough Society at learnenough.com/society.
1 Add the menu links to the Home page.
2 In the menu links, change the order of the links so that the tags page comes second How many files do you have to edit?
Now that we’ve added the content for our pages and blocked out the basic structure, we’re ready to add styling, and our basic approach involves inline styles—applying CSS directly inside the site’s HTML elements via the style attribute to keep presentation tied to the markup and allow quick testing of the layout.
Using HTML tags lets you understand exactly how styling affects each element, delivering immediate results without the overhead of adding Cascading Style Sheets Inline styles and CSS styling commands operate on essentially the same principles, so everything covered here applies to the industrial-grade styling discussed in Learn Enough CSS & Layout to Be Dangerous (Box 7).
Box 7 Separating style and content
If adding styles directly to elements gives you the results that you want, why is it considered bad practice to do it?
Styling in a separate CSS file from your content and layout makes HTML cleaner and easier to maintain While the payoff is small for a single developer on one page, it becomes essential in a team where many developers edit multiple pages, because changes can be applied quickly and consistently Imagine needing to adjust the site’s font size and having to update every page individually; with centralized styling, a single CSS rule can update the font across the entire site, saving time and reducing errors.
Separating style from content enables greater flexibility and efficiency by letting you apply styles across multiple elements with ease Instead of styling each tag individually, you can use site-wide CSS to enforce a consistent design or selectively target specific elements, making updates faster and the design more scalable and maintainable.
For example, you can make a table extend across the full width of the page by using the CSS rule width: 100% If you want every table on the site to share the same styling, you would need to copy and paste that rule into every tag on every page.
With CSS, we can tell the browser to style every table with a small bit of code. table { width: 100%;
This represents a massive gain in simplicity and efficiency.
Every web page lives on a remote server that sends data to visitors, so each word or line of code added to a page increases the amount to download over the network By removing repetitive elements, you shrink the page size, which reduces load times and improves overall site performance, a key factor for better user experience and SEO.
Text styling
Exercises
Solutions to exercises are available for free at learnenough.com/solutions with any Learn Enough purchase To view other learners’ answers and to record your own, join the Learn Enough Society at learnenough.com/society.
1 Verify that color: red; has the same effect as color: #ff0000; What are the advantages of each approach?
2 What would you guess the color of #cccccc is? Temporarily modify the color of the span inListing 37 to check your guess How does it differ from #ccc ?
Floats
Exercises
Free solutions to exercises are provided with any Learn Enough purchase at learnenough.com/solutions, and you can view other users’ answers as well as submit your own by joining the Learn Enough Society at learnenough.com/society.
1 What happens if you change float: left to float: right inListing 39?
Applying a margin
Exercises
Solutions to exercises are free with any Learn Enough purchase at learnenough.com/solutions To see other people's answers and to record your own, join the Learn Enough Society at learnenough.com/society.
1 How does the margin in Listing 41change if we replace the margin with margin-right: 40px ?
2 Add the style rule padding: 10px; to the td elements for the first two block elements elements in the table in tags.html How annoying would it be to add them to every td ? How annoying is changing from
10px to 20px everywhere? (This is one reason why in real life you always use CSS.)
More margin tricks
Exercises
Get free solutions to exercises with any Learn Enough purchase at learnenough.com/solutions, and join the Learn Enough Society at learnenough.com/society to view other readers’ answers and to record your own.
1 What happens if you use margin: 0 auto for the book cover im- age (together with display: block ) without changing the float rule?What does this tell you about the precedence of the two rules?
Box styling
Exercises
Solutions to exercises are available for free at learnenough.com/solutions with any Learn Enough purchase, providing quick access to model solutions as you study To see other people's answers and to record your own, join the Learn Enough Society at learnenough.com/society.
1 Temporarily change padding to margin inListing 44 What difference does this make in the appearance?
2 Add and style a blockquote with padding and background color as shown inListing 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 inFigure 63.
Listing 45: Styling a famous quotation. index.html
In 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.
Figure 63: Styling a famous quote from an American president.
Navigation styling
Exercises
Free exercise solutions are available at learnenough.com/solutions with any Learn Enough purchase, helping you verify answers as you learn To browse other learners’ solutions and to record your own, join the Learn Enough Society at learnenough.com/society.
1 Change margin: 0 0 0 10px; to margin-left: 10px in List- ing 48 What if anything changes in the appearance?
2 It’s conventional for navigation links not to change color after being fol- lowed, and they also look better if they’re not underlined like normal links Using your Google-fu and thew3schoolsreference, guess the style rules for making these changes, and apply them to each element in the menu Hint: The property you’ll have to modify to remove underlining is text-decoration The result should look something likeFigure 65.
3 Add a new table for the “document tags” that define the properties of the document Include html , head , body , and meta
4 Add any missing tags to tags.html (By my count there two.)
Figure 65: Styling the menu links.
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"
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 inTable 2 andTable 3, respectively.
HTML provides a set of tags to structure content and improve accessibility Headings h1 through h6 create a clear content hierarchy, while p defines a paragraph of text Tables are composed of table rows (tr) containing header cells (th) and data cells (td) to organize tabular data A div serves as a generic block-level container for grouping elements, and header marks the page header area The label element associates a text label with a form control for usability Lists are represented with ol for ordered lists (items in numerical order) and ul for unordered lists (items where order doesn’t matter), with li denoting each list item For quotations, blockquote formats the quoted text, and br inserts a line break for a new line without starting a new paragraph.
Table 2: The block-level tags covered in this tutorial.
Tag Name Purpose Example Result em emphasized make emphasized text
technical sophistication technical sophis- tication strong strong make strong text
at least a billion people at least a billion people a anchor make hyperlink
Learn Enough img image include an image
code code format as source code table table span span define inline sec- tion in document
Table 3: The inline tags covered in this tutorial.