LTP

HTML formatting, images and links

By now you should understand how to write any text to a web page. This lesson will teach you how to format text, add images, create links between other web pages you create, and links with other people's web pages. Once you learn the basics of formatting, image placement, and linking, it will be up to you to view the souce code (HTML) of other pages to learn new specific HTML code that you prefer on your site. Let's take the example from lesson 1:

FORMATTING

<html>
<head>
<title>Your web page title goes here</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<center>Your web page content: Hello thank you for visiting my website!</center><p>
I like swimming, running, and hiking.
</body>
</html>

Notice the new command HTML code/tag in bold. Again, also notice the closing command. This tells the web page to center the stuff between the commands: <center>The stuff here is centered.</center> so the page should look something like this:

Your web page content: Hello thank you for visiting my website!

I like swimming, running, and hiking.

If you forgot to close the center command, or if you purposely place it after the word hiking, then your page would look something like this. Notice that the web page does not know when to stop centering without the ending center command (</center>).

Your web page content: Hello thank you for visiting my website!

I like swimming, running, and hiking.

The <p> command/tag is a hard "carriage" return. Again, it is good practice to be specific about your HTML tags even though HTML will assume things for you and will even create hard/soft returns for you.

IMAGES

Now lets add an image:

....
<body bgcolor="#FFFFFF" text="#000000">
<center>Your web page content: Hello thank you for visiting my website!</center><p>
I like swimming, running, and hiking.<p>
<img src="images/yourpicture.gif" alt="This is a picture of me!">
</body>
.....

The above bold command/tag tells the page to add a picture after the word hiking. Type in the bold command, and then in quotes, type in the name of the picture file (GIF or JPG only, PNG is not supported on all browsers yet.). You can type "images/yourpicture.gif"(Relative pathing-you choose files relative to where this htm file is.) if you made a folder in your web folder called images. The page looks into the images folder and then looks for the gif or jpg. If you just made one web folder and put your htm files and your picture files in the same web folder, then you would type <img src="yourpicture.gif">. You do not need to specify the folder that you are in. The alt command is a description of the picture. If you rollover an image and leave it there for a few second, the description of the picture will appear. This is especially important in complying with Section 508 (site accessability). Blind people can still understand the importance of the picture by using a special web reader that looks for alt tags associated with pictures.


		Teacher's Corner Home \| Teacher created Web pages \| Educator's Workshop \| Standards \| Educational Technology Creation
	Educational Technology Creation Education Technology Home \| Web Home \| Videoconference Home \| Inquiry Based Learning Lesson 2: Web Development (Level: Beginner) - Back to Lesson 1 \| Go to Lesson 3 HTML formatting, images and links By now you should understand how to write any text to a web page. This lesson will teach you how to format text, add images, create links between other web pages you create, and links with other people's web pages. Once you learn the basics of formatting, image placement, and linking, it will be up to you to view the souce code (HTML) of other pages to learn new specific HTML code that you prefer on your site. Let's take the example from lesson 1: FORMATTING <html> <head> <title>Your web page title goes here</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <center>Your web page content: Hello thank you for visiting my website!</center><p> I like swimming, running, and hiking. </body> </html> Notice the new command HTML code/tag in bold. Again, also notice the closing command. This tells the web page to center the stuff between the commands: <center>The stuff here is centered.</center> so the page should look something like this: Your web page content: Hello thank you for visiting my website! I like swimming, running, and hiking. If you forgot to close the center command, or if you purposely place it after the word hiking, then your page would look something like this. Notice that the web page does not know when to stop centering without the ending center command (</center>). Your web page content: Hello thank you for visiting my website! I like swimming, running, and hiking. The <p> command/tag is a hard "carriage" return. Again, it is good practice to be specific about your HTML tags even though HTML will assume things for you and will even create hard/soft returns for you. IMAGES Now lets add an image: .... <body bgcolor="#FFFFFF" text="#000000"> <center>Your web page content: Hello thank you for visiting my website!</center><p> I like swimming, running, and hiking.<p> <img src="images/yourpicture.gif" alt="This is a picture of me!"> </body> ..... The above bold command/tag tells the page to add a picture after the word hiking. Type in the bold command, and then in quotes, type in the name of the picture file (GIF or JPG only, PNG is not supported on all browsers yet.). You can type "images/yourpicture.gif"(Relative pathing-you choose files relative to where this htm file is.) if you made a folder in your web folder called images. The page looks into the images folder and then looks for the gif or jpg. If you just made one web folder and put your htm files and your picture files in the same web folder, then you would type <img src="yourpicture.gif">. You do not need to specify the folder that you are in. The alt command is a description of the picture. If you rollover an image and leave it there for a few second, the description of the picture will appear. This is especially important in complying with Section 508 (site accessability). Blind people can still understand the importance of the picture by using a special web reader that looks for alt tags associated with pictures. Technically speaking, if you were doing a web page that is local to your PC, you can type in <img src="C:/MYWEBPAGES/web/images/yourpicture.gif">, (Absolute pathing-you choose files using the absolute path to the file name form the root directory.) but if you decide to move the web page to a different computer, then you would have to hunt all the code that includes the reference to C: and change it to the correct folder structure. The only time you really want and have to use absolute pathing is when you are linking to an image (or file) on someone elses computer or website like so: <img src="http://www.nasa.gov/yourpicture.gif"> LINKING WEB PAGES A link allows the user to jump to other web pages. Using the same idea as above, a link command must surrount the text or images that will act as the hot-spot that the user will click on. .... <body bgcolor="#FFFFFF" text="#000000"> <center>Your web page content: Hello thank you for visiting my website!</center><p> I like swimming, running, and hiking.<p> *<a href="http://www.nasa.gov">This text and everything around the a href and ending a command will be a link to the nasa web page...including the following picture since it is also between the commands. <img src="images/yourpicture.gif" alt="This is a picture of me!"></a>* </body> ..... Relative pathing vs. Absolute pathing also applies with the lnks. The nasa link above is an absolute link to the nasa web page, but a line like this: <a href="page2.htm> Whatever link! </a> will take the user to page 2 of your web page. Extra information: <a href="sgweb3.htm" target="_blank"> You can add the extra command target to specify how your new page will be displayed. If you do not include this command, your existing web page will be replaced with the new linked page. If you write target="_blank" like above, your new web page will open in a new window, so there will actually be two web pages diplayed at the same time. Go back to Lesson 1 \| Go on to Lesson 3. -Steven Gutierrez - Author Please send any comments to: Web Related: David.Mazza@grc.nasa.gov Technology Related: Thomas.J.Benson@grc.nasa.gov Responsible NASA Official: Kathleen.A.Zona@grc.nasa.gov

Educational Technology Creation