Lesson 3: Text and Images


In case you haven't noticed, many of the more popular web sites use text somewhere on their page; after completing this chapter, you too will be able to employ this vital tool.

To display text, simply type whatever you wish to say somewhere between the two Body tags.  You may also place text in your title bar by typing between the Title tags and even in a browser's status bar (down at the bottom) by filling out complex JavaScript.  But regular, ordinary, un-edited words will make for boring reading.

To align words, you insert a tag before the text in the form <p align = "left">.  In order to place it in the center or the right of the line, change the word in parentheses to "center" or "right."  This is one of the few commands that does not require two tags.

To place words in Italics, put a <i> before the text and a </i> after.  The second tag is very important, if it is not included, all of the remaining text on the page will be italicized.  Bold uses <b> and </b> and <u> and </u> underlines.  Easy enough?  HTML is a higher level language, adapted to the words of the user rather than the code of the computer. 

Some people write in long, continuous sentences.  Others use paragraphs to add some coherency to their ideas.  If you're part of that latter group, you might want to insert a <p> at the beginning of each new section.  Also, HTML provides no direct code for indenting, so if this is important to you, feel free to insert the code "&nbsp;" several times at the beginning of each paragraph.  Since spaces in HTML code are meaningless, this is the only way to insert them in the finished product.  Other codes that you might find useful are the "&quot;" ("), "&lt;" (<), "&gt;" (>), and of course "&amp;" (&).  If you are prone to nausea, I suggest you don't look at the code for the last sentence.

"Mankind could attain perfection if it were not for those farm animals!"

                                                                    --Thomas Jefferson

To form a separate quote like the one above, type in <blockquote> before the brilliant thought and of course </blockquote> at the end.

Despite all the fascinating formatting, the text on this page isn't all that interesting thus far.  If you want to add color to your words (without using profanity), there are several things you can do.  You may choose to highlight your text by typing in <span style = "background-color: #FFFF00">, the bizarre letters and numbers at the end represent the combination of colors used to form yellow, This will be explained in the chapter on backgrounds in greater detail.  Luckily, all you have to type to stop this is </span>.

To change the color of the basic text, like so, all you must do is insert the tag <font color ="#00FFFF">  But this changing of colors often irritates people, so you might want to stop it as soon as possible with the code </font>.

Font is another important part of adding to the aesthetics of your page.  To make your text bigger or smaller, type in <font size="2"> where 2 is the size (ranging from the 1 to 6) of the text.  Changing the font is not recommended because not everyone has the same fonts on their computer, but it can be done by inserting a tag like <font face="Arial">, both of these effects can be stopped by </font>.

While text can be very interesting, I recommend pictures if you want people to return to your site.  Simply by adding this picture of a bowl of soup, I have undoubtedly increased the popularity of my site by many-fold.

 

Like the soup, most images for web use should either be .jpeg or .gif format and should be fairly small in size, otherwise the page will load painfully slow.  The HTML code for pictures is  <img src ="bowlsoup.jpg">, there is no ending tag because a picture is a one-time event.  There are also various parameters that can be placed within the image code snippet.  For example, <img border = "0" src="bowlsoup.jpg"> determines the size of the border surrounding the picture, a value of 0 yields no border.  You can decide the size of the image by using <height = "199" width = "320"> inside of the img code block.

Well, now you hopefully understand the fundamentals of what are certainly the two most important elements of any web page.  It's probably a good idea to try out these new skills with the Practice Web Site #1.  You can also continue on to the next chapter on Backgrounds, Bars and Bullets or return to the Table of Contents to review old material.