A Smarter Way To Learn HTML & CSS(2015)
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-smarter-site folder create a subfolder called css. (Again, if this isn’t something you know how to do, Google it.)
3. Online, go to http://asmarterwaytolearn.com/htmlcss/practice-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:
http://asmarterwaytolearn.com/htmlcss/practice-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</title>
</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:
http://asmarterwaytolearn.com/htmlcss/practice-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</title>
</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:
http://asmarterwaytolearn.com/htmlcss/practice-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 are important. Read them carefully.</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 worst-looking 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:
http://www.ASmarterWayToLearn.com/htmlcss/2.html