![]() | BASIC TEXT FORMATTING! | ![]() |
Sponsor Links Free Image Hosting Your source for free image hosting - upload your images! Poker Strategies and Tips Poker, online poker, poker terms, poker accessories, poker tips and tricks. Photoshop Tutorials Over 3,000 tutorials for Photoshop, Flash and 3DS Max! 6,000 Free Fonts Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com Buy Website Visitors 1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed. Reading Tarot Cards Videochat with certified tarot readers & psychics - unlimited tarot cards readings! Affiliate Software Start an affiliate program and design to maximize affiliates' productivity PPC Search Engine Low cost advertising for your website! Technical Service Provider Your number one source for computer repairs and network solutions | LESSON 1-03-02: Line Breaks, Paragraphs & Headings Web Design Lessons > Lesson 1-03-02: Line Breaks, Paragraphs & Headings
In this section of our free online web design course, we're going to learn how to arrange our text by adding line breaks by using the <br> tag, adding paragraphs with the <p> and </p> tags and adding headings with the <h> and </h> tags. HTML Line BreaksA line break is, simply put, going to the next line in your document. It's what happens when you press the "Enter" key on your keyboard when typing text into a text editor (i.e. "Notepad") or a word processor (i.e. "Microsoft Word"). For now, copy & paste the below HTML code into your text editor:
Now... When you save the above HTML code as an HTML file (with an .htm or .html extension), would you expect the output to be like this:
Or like this:
...? Believe it or not, the output would be the latter. Line breaks in HTML are achieved by a special tag - the <br> tag. To get the former output, we'll need to put two <br> tags between each of the words, like this:
Now, we'll get the former output:
So... "Double spaces", "tabs" or "returns" inside the source HTML code mean nothing to the web browsers. You can leave as much space as you want between the words inside your text, but that'll count as only one character-long space for the browser. You can use "tabs" or "returns" to arrange your source HTML code in a nice and tidy fashion, but that won't show up in the output. Formatting your source HTML code is redundant - you have to format your output, that is, by using HTML tags like the one we just learned. To get the line breaks, we use the <br> tag. Note that down to somewhere :) HTML ParagraphsNext in our online web design course, we'll learn how to add paragraphs to our web pages. In HTML, you can define a paragraph by using the <p> and </p> tags. Everything inbetween these tags will be considered a paragraph and will be two line breaks (two <br> tags) apart from the rest of the document. Let's try it out:
And the output is:
The same as using two <br> tags... There is not much else to the <p> tag, apart from the fact that we can use them along with the "align" and "style" attributes to format a piece of text as we like. We'll learn more about that as we go along in our online web design course. HTML HeadingsYou can also add headings to your HTML documents by using the <h> tag. The size of your heading is determined by a number you put next to the "h" inside the tag marks. <h1> is the biggest size and <h6> is the smallest. Also note that you do not need a line break tag after a heading - the heading tag automatically creates a line break after itself. Let's try the different sizes out:
The output should be:
Sidenote #1: Check out my web design resources page to download a superb eBook! Sidenote #2: If you enjoyed this lesson, please link to it :) And the bells are ringing! This lesson is over. Next lesson of your free web design course will cover how to make ordered and unordered lists by using HTML. Let's go!
Nearby Lessons: • Lesson 1-02 Fundamental HTML Tags• Lesson 1-03 Basic Text Formatting • Lesson 1-04 Web Colors Unleashed • Lesson 1-05 HTML Tables Back To Top Home | Resources | Articles | Lessons | Directory | Forums Copyright© 2004 Onur Özcan. All Rights Reserved. | Partner Links |