All of the text fields below (e.g. ) contain HTML. Use you mouse or keyboard to copy and paste the HTML into a "plain text editor" (e.g. notepad, textpad).
Save the file to your desktop as an HTML file, (e.g. file_name.html). Once they are saved, you can double click on them or use your keyboard to open them. They will automatically open in your default Web browser. When the files are open in your Web browser, you will be able to see how the HTML works in your browser.
Various Web browser types will display the HTML differently.
************************************************************************************************************
Lesson 8:
Aligning Text With Images:
Now that you have learned about adding an image to your Web page and have learned about different image file types, lets start controlling the images on your page!
In the following examples, fictitious image file names are used. You will need to supply real images and file names for the code to work in your HTML pages. The "file path" will need to be accurate as well. For more on file paths, use a search engine and these key words (HTML file path syntax).
Copy the above source code to your text editor and save it as lesson8a.html
Open the file in you browser to see the results!
The images referenced will be accompanied by the text that follows the image tag. Each tag gives an alignment attribute for the text that follows it. Top, middle and bottom are given as examples above
Wrapping:
If you are experience with creating other forms of documents that utilize images, you may be familiar with creating a column of text that rests on the side of an image. However, with HTML, if you use top, middle or bottom alignment you may notice an unnerving effect at the end of a line! If you key a line that is longer than the page is wide your text will "wrap" to the next available line beneath the image, not beneath the preceding line of text. This may create an undesirable effect, therefore you can use two other attribute's to prevent this:
ALIGN options: "right" and "left"
Using align right and left will keep the text beside the image, but at some point you may wish to discontinue this affect and get your text back up against a left or right page margin. To accomplish this you can use the CLEAR=ALL option.
By adding a <BR> tag to the end of a line of text, you create a line break that starts a new line. By adding the CLEAR=ALL attribute to the <BR> tag, the alignment defaults back to the left margin beneath the image.