Learn Web Desiging: 12/01/2010

Wednesday, December 15, 2010

How to Use the Required XHTML Tags for a Web Page


There are only a few XHTML tags needed to build a Web page. These tags are: <html></html> <head></head> <title></title> <body></body> Once you've finished reading about how to use these elements, try out the tags in your text editor or online.
HTML vs. XHTML When you create a Web page you are essentially writing text. But you have to provide instructions for how that text will look. For example, when you write a letter in Word, the default font is usually something like "Times New Roman". But if you change that font, you have given a directive to Word to change how the text looks on the page. Word hides these directives inside the actual meat of the document, but in XHTML they are all out in the open. XHTML is written as text, surrounded by tags that define how the text should be interpreted by the browser. You can recognize an HTML tag because it is surrounded by less-than (<) and greater-than (>) signs. A line of XHTML might look like this: <p>This text is <i>italic</i> and <b>bold</b>.</p> NOTE: Some email clients do not display the code correctly, go to the online page for most accurate examples. The browser would write just the sentence "This text is italic and bold." and would do special things to the words surrounded by the <i> </i> and the <b> </b>. There are also some differences between XHTML and HTML. Read the above link to learn more about the differences between XHTML and HTML.
Web Hosting
What is Web Hosting? Where you keep your Web page is called "hosting". There are all different types of hosting options, from very expensive commercial Web hosts, to free Web hosts. In order to work on your Web page, you need a hosting option. There are lots of free Web hosting providers. 110MB is free and dis one of the top 10 most highly rated hosts by my readers. Or you can use your own hosting service through your ISP. For this class, you will need a place to host your Web pages.
Transferring Your Files to Your Web Host Once you have a hosting provider, you'll need to get an FTP client or use an online file transfer program provided by your hosting service. Many hosts offer a Web based file transfer program that is easy to use.

Windows, Macintosh, WebTV and Online

When building a Web page there are only a few things you need:

a computer or Web appliance with Internet access

a text editor, such as Notepad (Windows) or TextEdit (Mac0S X) SimpleText (older Macs)

a Web browser

For this class, you should use Notepad if you are on Windows or TextEdit/SimpleText if you are on a Macintosh. You may use any Web browser you are comfortable with.

Monday, December 13, 2010

Paragraphs, Headings, and Emphasis

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.

Your Guide to Web Design / HTML

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.