HTML Advanced

HTML Lesson 2 January 2004 Information Processing

This tutorial picks up where Lesson 1 left off, and will lead you step-by-step through the following skills: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

At the end of HTML Lesson 1 , we learned how to create and upload a simple web page that looked similar to this: ,[object Object],[object Object]

Skill 1: Copying Graphics Off the Web ,[object Object]

Go to the Internet to Get a Picture – 5 minutes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Skill 2: Add a Background Color or Image to Your Web Page ,[object Object],[object Object]

Skill 2: Add a Background Color or Image to Your Web Page (cont’d) ,[object Object],[object Object]

We're going to change the background color of your web page to aqua: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Poor Quackers. Did you try black? Did you say "Hey! Where did my words go!?" Don't be embarrased, I said that the first time too! Of course, you can't see black words on a black background! We'll be learning to alter font color in SKILL 3. But first, let's learn the body tag element for using a background image: ,[object Object],[object Object],[object Object]

Skill 3: Changing the Style, Size and Color of the Font ,[object Object],[object Object]

Let's change the color and size of text on your page now, by adding a font tag with color and size attributes: ,[object Object],[object Object],[object Object]

Your text should now be orange and larger, similar to this: ,[object Object],[object Object]

Next we're going to learn how to change the font itself, by adding another attribute to the font tag. This attribute is called "face". ,[object Object],[object Object],[object Object],[object Object]

Note: For the font you choose to display properly to another person visiting your page, they must have the font you named on their OWN computer. So don't pick a font that no one else is likely to have. You can list more than one font in your tag, like this: face="arial, tahoma, helvetica" and the visitor's web browser will just go down the list until it finds a font that is on their computer. If you are just determined to use an unusual font on your page, you can type the text in the font of your choice in a graphics editing software program like Paint Shop Pro , save it as a .gif file to your webpage folder, and then insert it into your document using the image source tag, like this:

Skill 4: Creating Headings, Lines, and Bold, Italicized, or Underlined Text ,[object Object],[object Object],[object Object]

Skill 4: Creating Headings, Lines, and Bold, Italicized, or Underlined Text (continued) ,[object Object]

[object Object],[object Object]

Save/refresh. In your browser, you should now see this: ,[object Object],[object Object],[object Object],[object Object],[object Object]

Skill 5: Creating Hyperlinks ,[object Object],[object Object],[object Object],[object Object]

But before we can complete this exercise, you need to have another page! Create a second page now (this will be a good review): ,[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Skill 5: Creating Hyperlinks ,[object Object],[object Object],[object Object]

Skill 5: Creating Hyperlinks ,[object Object],[object Object],[object Object],[object Object],[object Object]

Note: If you want to use an IMAGE as a link, place the anchor tag around the image tag, like this: <A HREF="page2.html"> <img src="quackers.gif"> </A> If you use an image as a link, and you don't want a link-colored border around your image, you need to add "border=0" to the image tag. The complete tag would look like this: <A HREF="page2.html"> <img src="quackers.gif" border=0> </A> For linking to other pages on the web, place the complete URL address of the page you want to link to between the quotation marks following the HREF attribute. For example, if you wanted to link to the class page, the tag would be: <A HREF="http://www.geocities.com/c525600/">Wow, this woman's a genius!</A>

Skill 6: Create an E-Mail Link ,[object Object],[object Object]

Skill 7: Use a Table to Format Your Page ,[object Object]

Skill 7: Use a Table to Format Your Page ,[object Object],[object Object]

<html> <head> <title>My First Web Page </title> </head> <body background=“bg-water.jpg”> <center> <table> <tr> <td> <img src=“quackers.gif”></td> <td><font color=“darkorange” size=“+1”. Welcome to my first web page.<br> I am thrilled to be learning html. </font></td> </tr> </table> </center> <br> <br> <A HREF=“page2.html” CLICK HERE</A> to go to my second page <A HREF= mailto:youremailaddress >E-MAIL ME!</A> </body> </html>

Skill 7: Use a Table to Format Your Page ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object]

HTML Advanced

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (15)

Similaire à HTML Advanced

Similaire à HTML Advanced (20)

Dernier

Dernier (20)

HTML Advanced