a-smarter-way-to-learn-html-css-learn-i-mark-myers.pdf -...

This preview shows page 1 out of 928 pages.

Unformatted text preview: Also by Mark Myers A Smarter Way To Learn HTML & CSS Learn it faster. Remember it longer. Mark Myers Copyright © 2015 Mark Myers All rights reserved, including the right to reproduce this book, or any portions of it, in any form. 1.0 Chapters Learn it faster. Remember it longer. How to use this book 1 HTML & CSS 2 Creating paragraphs 3 Creating headings 4 Specifying fonts 5 Linking your CSS to your HTML 6 Specifying a fontsize 7 CSS classes 8 Classes not tied to an element 9 Font-weight 10 Font-style 11 Styling bits and pieces 12 Colors 13 Spacing 14 Aligning text 15 First-line indent and blockquote 16 Margins 17 Borders 18 Padding 19 Inheritance 20 Grouping 21 ID 22 Div 23 Images 24 Block vs. inline 25 Adding more info to the image tag 26 Positioning an image 27 Centering an image 28 Floating images 29 Links 30 Link addresses 31 Linking to a location on a page 32 Opening a new window 33 Styling links 34 Clickable images 35 Image maps part 1 36 Image maps part 2 37 Bullet lists and numbered lists 38 Styling lists 39 Styling a list’s markers 40 More CSS selectors 41 Tables: basic structure 42 Tables: headings 43 Tables: spanning columns and rows 44 Tables: borders 45 Tables: spacing part 1 46 Tables: spacing part 2 47 Tables: aligning text 48 Tables: background-color 49 Forms: the form tag 50 Forms: text input 51 Forms: textarea 52 Forms: submit 53 Forms: radio buttons 54 Forms: checkboxes 55 Forms: select box 56 Forms: label 57 Grouping related elements 58 Forms: styling 59 Comments 60 Layout: nested boxes 61 Layout: divs 62 Layout: div widths and centering 63 Layout: side-byside divs 64 Layout: a modern header part 1 65 Layout: a modern header part 2 66 Layout: a modern header part 3 67 Layout: a modern header part 4 68 Layout: a modern header part 5 69 A vertical navigation bar part 1 70 A vertical navigation bar part 2 71 A vertical navigation bar part 3 72 A vertical navigation bar part 4 73 A vertical navigation bar part 5 74 A horizontal navigation bar part 1 75 A horizontal navigation bar part 2 76 Background images part 1 77 Background images part 2 78 Iframes 79 Embedding YouTube videos 80 Further customizing YouTube videos 81 Embedding Vimeo videos 82 Audio 83 Ems vs. percentages vs. pixels 84 Relative and static positioning 85 Z-index 86 Media queries 87 Min- and maxwidth, min- and max-height 88 The stuff at the top 89 The meta description 90 Build a site Acknowledgements Learn it faster. Remember it longer. If you embrace this method of learning, you’ll get the hang of HTML and CSS in less time than you might expect. And the knowledge will stick. You’ll catch onto concepts quickly. You’ll be less bored, and might even be excited. You’ll certainly be motivated. You’ll feel confident instead of frustrated. You’ll remember the lessons long after you close the book. Is all this too much for a book to promise? Yes, it is. Yet I can make these promises and keep them, because this isn’t just a book. It’s a book plus 1,800 interactive online exercises. I’ve done my best to write each chapter so it’s easy for anyone to understand, but it’s the exercises that are going to turn you into a real HTML coder. Cognitive research shows that reading alone doesn’t buy you much long- term retention. Even if you read a book a second or even a third time, things won’t improve much, according to research. And forget highlighting or underlining. Marking up a book gives us the illusion that we’re engaging with the material, but studies show that it’s an exercise in selfdeception. It doesn’t matter how much yellow you paint on the pages, or how many times you review the highlighted material. By the time you get to Chapter 50, you’ll have forgotten most of what you highlighted in Chapter 1. This all changes if you read less and do more—if you read a short passage and then immediately put it into practice. Washington University researchers say that being asked to retrieve information increases long- term retention by four hundred percent. That may seem implausible, but by the time you finish this book, I think you’ll believe it. Practice also makes learning more interesting. Trying to absorb long passages of technical material puts you to sleep and kills your motivation. Ten minutes of reading followed by twenty minutes of challenging practice keeps you awake and spurs you on. And it keeps you honest. If you only read, it’s easy to kid yourself that you’re learning more than you are. But when you’re challenged to produce the goods, there’s a moment of truth. You know that you know—or that you don’t. When you find out that you’re a little shaky on this point or that, you can review the material, then re-do the exercise. That’s all it takes to master this book from beginning to end. I’ve talked with many readers who say they thought they had a problem understanding technical concepts. But what looked like a comprehension problem was really a retention problem. If you get to Chapter 50 and everything you studied in Chapter 1 has faded from memory, how can you understand Chapter 50, which depends on your knowing Chapter 1 cold? The read-then-practice approach embeds the concepts of each chapter in your long-term memory, so you’re prepared to tackle material in later chapters that builds on top of those concepts. When you’re able to remember what you read, you’ll find that you learn HTML and CSS quite readily. I hope you enjoy this learning approach. And then I hope you go on to set the Internet on fire with some terrific webpages. How to use this book Since you may not have learned this way before, a brief user manual might be helpful. Study, practice, then rest. If you're intent on mastering the fundamentals of HTML and CSS, as opposed to just getting a feel for it, work with this book and the online exercises in a 15-to-30-minute session, then take a break. Study a chapter for 5 to 10 minutes. Immediately go to the online links given at the end of each chapter and code for 10 to 20 minutes, practicing the lesson until you've coded everything correctly. Then take a walk. Don’t wear yourself out. You learn best when you’re fresh. If you try to cover too much in one day, your learning will go downhill. Most people find they can comfortably cover one to three chapters a day. Your experience may vary. If you find some of the repetition tiresome, skip exercises. I wrote the exercises for people like me, who need a lot of repetition. If you’re a fast learner or a learner with some HTML experience, there’s no reason to burden yourself. Click the Skip Exercise and Get Credit button to jump ahead. Skip whole sets of exercises if you don’t need them. Practice as much as you need to, but no more. If you struggle with some exercises, you know you’re really learning. An interesting feature of your brain is that the harder it is for you to retrieve a piece of information, the better you remember it next time. So it’s actually good news if you have to struggle to recall something from the book. Don’t be afraid to repeat a set of exercises. And consider repeating some exercises after letting a few weeks go by. If you do this, you’ll be using spaced repetition, a powerlearning technique that provides even more long-term retention. Do the coding exercises on a physical keyboard. A mobile device can be ideal for reading, but it's no way to code. Very, very few Web developers would attempt to do their work on a phone. The same thing goes for learning to code. Theoretically, most of the interactive exercises could be done on a mobile device. But the idea seems so perverse that I've disabled online practice on tablets, readers, and phones. (It also simplified my own coding work.) If you have an authority problem, try to get over it. When you start doing the exercises, you'll find that I can be a pain about insisting that you get every little detail right. For example, if you omit a semicolon, the program monitoring your work will tell you the code isn't correct, even though it might run. Learning to write code with fastidious precision helps you learn to pay close attention to details, a fundamental requirement for coding in any language. Subscribe, temporarily, to my formatting biases. Current code formatting is like seventeenth-century spelling. Everyone does it his own way. There are no universally accepted standards. But the algorithms that check your work when you do the interactive exercises need standards. They can't grant you the latitude that a human teacher could, because, let's face it, algorithms aren't that bright. So I've had to settle on certain conventions. All of the conventions I teach are embraced by a large segment of the coding community, so you'll be in good company. But that doesn't mean you'll be married to my formatting biases forever. When you begin coding projects, you'll soon develop your own opinions or join an organization that has a stylebook. Until then, I'll ask you to make your code look like my code. 1 HTML & CSS An HTML (Hypertext Markup Language) document is a text file that tells the browser (Chrome, Firefox, Internet Explorer, Safari, and others) how to assemble a webpage. It says to the browser, “Put this heading here. Put that paragraph there. Insert this picture here. Put that table there.” Though it can create webpages with formatting that is sometimes elaborate and even beautiful, an HTML document itself is pure text, without any formatting whatsoever. This means you can’t use a word processing program like Microsoft Word to write HTML, because Word and other word processors add formatting. Instead, you’ll choose from any number of editing programs that produce pure text. The simplest of these is Notepad on a PC and TextEdit, in Plain Text mode, on a Mac. You can also use fancier editing programs. And there are web development tools like Dreamweaver. They all create the pure text required for HTML. My favorite code editor is the open source Brackets, free at . When I ask you to do something in Brackets, Notepad, or TextEdit, feel free to substitute any of the alternative editors. Each HTML document creates a single webpage in the browser. If a site has a hundred pages, it has a hundred HTML documents. An HTML document’s name ends with the .html extension, as in about.html or products.html. When you’re looking at a webpage, you can see the name of the page’s HTML document in the browser’s address bar. When the line of characters shown above is entered in the browser’s address bar, the browser loads the HTML document 23.html, and that page is assembled in the browser and displayed on the user’s screen. If a user clicks a link on the page for, say help.html, then the file help.html loads, and that page is displayed. There’s one HTML name you usually won’t see in the browser’s address bar, index.html. That’s the name of the page that loads by default when no HTML document is specified. It’s the site’s home page. So if you enter this in the browser’s address bar… …the document that loads (with some exceptions) is index.html. All the HTML documents for a site are stored on the web hosts’s server, or, in the case of a big, important site, often on the site owner’s own server. When the browser is pointed to a page on the site, the browser fetches the appropriate HTML file from the server and displays that page. A browser will also display an HTML document stored on your computer’s hard drive. That will prompt your browser to display the page on your screen. Whereas an HTML document specifies the contents of a webpage—the headings, paragraphs, images, tables, etc.—A CSS (cascading stylesheets) file specifies the styling of that page—fonts, colors, column widths, and the like. Like an HTML document, a CSS file is plain text. You can create it with the same editor you use to create an HTML document. A CSS file has the extension .css. When an HTML document loads, it calls the CSS file that styles its contents. Rather than creating a separate CSS file, it’s possible to include all of the styling specifications in an HTML document. But the preferred way to style webpages is to put all the styling information in a separate CSS file, so that’s what I’m going to teach you. These are the rules I’m going to ask you to follow for naming both HTML and CSS files: Use only lower-case characters. Avoid spaces. Stick to 0-9, a-z, and _. Find the interactive coding exercises for this chapter at: 2 Creating paragraphs Let’s get your feet wet. 1. On your hard drive create a folder called my-smarter-site. (If you’re unclear how to create a folder in your particular operating system, Google it. There’s plenty of good Windows and Mac instruction for this online.) 2. Under the my-smartersite folder create a subfolder called css. (Again, if this isn’t something you know how to do, Google it.) 3. Online, go to . 2-0.html 4. Copy all the text on the page. 5. Open your plain-text editor (see the last chapter) and create a new document. 6. Paste the copied text into it. 7. Save the document in your my-smarter-site folder as practice.html 8. On the empty line between <body> and </body> type your name. 9. Save the file. 10. Go to Windows Explorer (PC) or Finder (Mac) and double-click the file. And voila! There’s your name, displayed in the browser. You’ve just created and displayed your first webpage. If it doesn’t work, take a look at the sample code at: 2-1.html Now, on a new line, add a few more words to your code, so it looks like this. <html> <head> <title>Practice</ </head> <body> Mark Myers That’s my name. </body> </html> Save the file and display the page, following steps 8 and 9 above. Sample code, if you need it, is at: 2-2.html. But wait! You wrote the text on two lines… Mark Myers That’s my name. But the browser displayed it all on one line. Mark MyersThat’s my name. The problem is that the browser doesn’t recognize a carriage return. When you hit a carriage return in a word processor or your text editor, the application breaks the text you write next into a new paragraph, but when you enter a carriage return in an HTML document, the browser ignores it. If you want to display your two sentences in two separate paragraphs, you have to explicitly tell the browser to do it. You do this with paragraph tags. <html> <head> <title>Practice</ </head> <body> <p>Mark Myers</p> <p>That’s my name </p> </body> </html> Revise your practice.html text document to include the tags shown above. Save the file. Display the page in your browser. If you coded correctly, the page will now display the text in two separate paragraphs. Sample code is at: 2-3.html. Tags are the commonest feature of an HTML document. You use them for all kinds of things. Look at the 9 lines of HTML above. There are tags on every line. Usually—but not always— HTML tags come in pairs, an opening tag paired with a closing tag. The opening tag consists of some characters enclosed by and >. For example, <p>. The closing tag is the same as the opening tag, except a / follows the opening <. For example, </p>. The opening tag tells the browser, “Begin here.” The closing tag tells the browser, “End here.” So, for example, if you write… <p>These directions a </p> …you’re telling the browser to begin the paragraph at “These” and to end it at “carefully.” The browser doesn’t care whether you put separate paragraphs on separate lines. As I mentioned above, it ignores carriage returns. But it’s conventional to break paragraphs in your code, like this. <p>Hi.</p> <p>Ho.</p> Things to keep in mind: It’s legal to write <P> instead of <p> but I’ll ask you to stick to lower-case tags. There are no spaces between the tags and the text that they enclose. Good housekeeping demands that whenever the browser expects a closing tag, you provide it. Sometimes you can get away with writing <p> without closing with </p>, but it can produce unpredictable results. Take good care of the HTML and CSS files you created in this chapter. You’ll be revising the files on a regular basis as you make your way through this book. When you complete the book and finish coding the files, you will have the worstlooking webpage in Internet history. But it will be a detailed demonstration—a demonstration that you made —of the most important concepts in HTML and CSS coding. Find the interactive coding exercises for this chapter at: 3 Creating headings A heading on a webpage serves the same purpose as a heading in a newspaper or magazine. It shows the user what’s important and gives her a sense of what the paragraphs underneath it are about. Headings also help search engines understand a page. HTML gives you six sizes of headings to choose from, h1 through h6. h1 is the largest, h6 is the smallest. You don’t have to include all the different sizes of headings in your HTML document, but you should include an h1 heading, because search engines look for it. You can have as many h2, h3, h4, h5, and h6 headings in your document as you want, but you should have only one h1 heading. Otherwise, search engines might get confused. This is how you code the largest heading. <h1>This is the large </h1> Notice that there’s both an opening and a closing tag. Here’s a longer one, in h3 size. <h3>This is a long he </h3> Let’s look at another heading. If you write… <h3>All the king’s ho </h3> …the browser will break the lines according to how much width is available. It might break the heading like this: All the king’s horses and all the king’s men couldn’t put Humpty together again. Or it might break it like this: All the king’s horses and all the king’s men couldn’t put Humpty together again. Or maybe it’ll break it some other way. But you won’t control, and may not be able to predict, how the heading breaks. If you’re at all fussy, you might want to tell the browser how to break it. Maybe you want it broken this way: All the king’s horses and all the king’s men couldn’t put Humpty together again. So you try writing… <h3>All the king’s ho and all the king’s me couldn’t put Humpty together again.</h3> But this way of writing the heading has no effect on the browser. It still breaks the heading the way it wants to. The browser ignores carriage returns. If you want the browser to break the heading a certain way, you have to tell it to do so explicitly, using the tag <br>. <h3>All the king’s ho </h3> Note that there’s no space between the text and <br>. And there’s no closing br tag. By default, browsers separate paragraphs by adding space between them. For example, if you write… <p>Slow lorises are a </p> <p>They have a round dependent.</p> …the two paragraphs might come out looking something like this: Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are speciesdependent. If you wanted a break at the end of the first sentence, but no space between it and the next sentence, you’d consolidate both sentences into a single paragraph and use <br>. <p>Slow lorises are a <br>They have a round dependent.</p> Then it would display like this: Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are speciesdependent. The browser displays each heading on its own line. The browser doesn’t care whether you put each heading on its own separate line, but for human-readability, please do. For example: <h1>Our Mission</h1> <h2>Helping People He In your practice.html document replace the two paragraphs about your name with an h1 heading, an h2 heading, and a multi-line paragraph. Save the file and display it in your browser. Sample HTML code: 3-1.html. Find the interactive coding exercises for this chapter at: 4 Specifying fonts Browsers display headings and paragraphs in the font of their own choosing. But you can specify the font...
View Full Document

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture