Learn Web Desiging: Dec 13, 2010

We will learn how to modify the text of the page we wrote in lesson 1. If you created a page using just the basic XHTML tags, the paragraphs you wrote all blurred together into one long line. This is because XHTML requires tags to define where the paragraphs begin and end.





Paragraphs and Spacing
Using P and BR Tags The P and BR tags are the most basic text tags available in XHTML. The P tag puts your text in a paragraph, and the BR tag adds line breaks.
Paragraphs Most tags in XHTML are called paired tags, this means that they have a start tag and an end tag that surrounds the text that is to be affected. In lesson 1 you learned about the four basic paired tags: <html></html>, <head></head>, <title></title>, and <body></body>. The next tag we'll learn about is the paragraph tag: <p></p> Like the basic tags, it is a paired tag. You should surround all text you want in paragraphs with this tag. For example, to write the above paragraph in XHTML, you would write: <p> The next tag we'll learn about is the paragraph tag. </p>
Line Breaks The <p></p> tag doesn't always do exactly what you want. It adds additional space after the paragraph in question, and sometimes you just want to drop down one line of text, such as in a street address. For this you would use the non-paired line-break tag: <br /> Notice that because this is a non-paired tag, it includes the closing slash (/) at the end of the tag itself. This is valid XHTML.
Headings and Emphasis
What is an HTML Heading? There is more to XHTML than just paragraphs and line breaks. You can organize your Web pages in specific ways to make them easier to read and understand. There are six headings in XHTML <h1></h1> through <h6></h6> Read more about HTML heading tags: http://webdesign.about.com/od/htmltags/p/bltags_headings.htm
What is an Emphasis Tag? Another way to modify your text is to use strong <strong></strong> and emphasis <em></em> tags to change the way words and phrases look. These tags are easy to use and make your text easier to read as you highlight specific elements.

We have been working a lot with SEO the last week at the About.com offices. And one thing that came up was the value (or possibly, lack thereof) of linking to sites outside your own. You see, About.com Guides are just like you in that we don't want to lose customers any more than you do. And one of the biggest concerns about linking to sites outside your own is that you're going to lose customers. While I'll admit, it is a risk, I believe that the benefits outweigh the risks. Adding external links to your pages adds value to your site beyond what you have written. But there are lots of other reasons. Plus, this week, I give you a new tutorial on creating tabbed navigation that looks pretty snazzy in CSS 3 enabled browsers and still looks like good tabs in IE.

Learn Web Desiging

Monday, December 13, 2010

Paragraphs, Headings, and Emphasis

Your Guide to Web Design / HTML