|
|
|
Chapter 2 Preview This chapter will go over formatting of webpages. Though some of these features are deprecated in HTML 4.0, I will include them anyways. For a better tutorial on formatting, go to my CSS Tutorial. Also, I will go over images, which help enliven webpages. Lesson White Space Formatting a webpage is a bit more complex than formatting a word proccessor or text editor. Carriage returns, spaces beyond the first, and tabs are completely ignored by the browser (this is called 'stripping out the white space'). For example, I put 2 spaces between the end period of this sentence and the first word of the next sentence, but only 1 space shows up. Also, I put a carraige return after this word, and it is a new line now, but there is none on the document. So, to do basic formatting, you have to use a combination of tags and special entities. To create carriage returns, you have to use the tag <br>. This creates a new line in the document. And to make extra spaces, (non-breaking space) must be used. This is an example that shows how these formatting features can be used. That example was created using this source code. This is an example that<br>shows how these formatting features can be used.So, as you can see it is slightly more complex to format a webpage. However, if you have something that you need to be in a very specific positioning, and you don't care about the font, you can use the tag <pre>. This flags the browser that it shouldn't strip the white spacing. The font is then set to a monospaced font. All my source code is inside <pre></pre> tags. So, you can see what it looks like in the above code. Text Formatting Text in a document can take on a lot of styles, sizes, fonts, positions, and spacing. This will cover a few of the basics for formatting text, but the best (and soon to be only) way to format text is to use CSS. Many of these features are deprecated in HTML 4.0, so be wary of using them. Rather use a style attribute to set them, but if you really want to, you can use these tags. To make a section of text bold, enclose it in <b> and </b> tags. Same with italics, underline, and Images Images are used to make pages much more appealing, and if they weren't supported, the web wouldn't be nearly as popular as it is. They are fairly easy to insert into a page, but difficult to use effectively. It takes some experimenting to figure out what works best. Some people fill their pages with images, making the download time be enormous for even the fastest connections; other people have only a few images for their entire page, but have quite dull pages. So, be very careful about where you have your images, and how many there are. Now, to insert an image, there is the <img> tag. It is a standalone tag, and doesn't need a </img> tag. The only necessary attribute for an image element is the src attribute. This defines the image's source (the file). An example image tag would be: <img src="pics/neatoPic.gif">Which would render an image called neatoPic.gif in the document. If you are making an image hyperlink (an <img> tag surronded by a <a> tag), then another attribute is suggested. It is the border attribute, which would set the border size. If you don't set it to 0, then a border will be around the image, and it isn't very appealing. Here is an example:  Border Attribute Set To 0 Ignored Border Attribute
As you can see, the image without the border around it is a lot nicer looking than the one that has the border attribute ignored. This is just a design issue, but things like that are key if you want people to come back to your page. Another design issue is the alt attribute. This sets text to be used for a browser that can't display images, and also comes up as a tooltip for browsers that can render images. Each of the images on my navigation bar are examples of using the alt attribute. The top image is rendered using this code. <img src="http://nscp.iwarp.com/navImgs/seals.jpg" border="0" alt="Navy SEALs">That's about all that is needed for basic image displaying. Note I want to say this again: Use CSS instead of the formatting tags, because, not only are style sheets more effective, they are legal in HTML 4.0. So, using style sheets/style attributes, is much better than using tags like <u> and <strike>.
|
