HTML Advanced


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML Advanced

  1. 1. HTML Lesson 2 January 2004 Information Processing
  2. 2. This tutorial picks up where Lesson 1 left off, and will lead you step-by-step through the following skills: <ul><li>Skill 1: how to copy graphics and backgrounds from the web </li></ul><ul><li>Skill 2: how to add background images or colors to your web page </li></ul><ul><li>Skill 3: how to change font appearance, color, and size </li></ul><ul><li>Skill 4: how to make headings, lines, and bold, italicized, or underlined text </li></ul><ul><li>Skill 5: how to add additional pages and links between them </li></ul><ul><li>Skill 6: how to make an e-mail link </li></ul><ul><li>Skill 7: how to position text and images on your page using tables. </li></ul>
  3. 3. <ul><li>I hope you are excited to be learning html. By now, you're probably realizing that the time and effort you spend actually learning to write html is a much better investment than time and effort spent learning a beginner's web page publisher. You're not &quot;learning how to make a web page&quot; with one of those, anymore than you would be &quot;learning how to make pastry&quot; by toasting a pop-tart! </li></ul>
  4. 4. At the end of HTML Lesson 1 , we learned how to create and upload a simple web page that looked similar to this: <ul><li>My First Web Page - Microsoft Internet Explorer </li></ul><ul><li>_____________________________________________________________Welcome to my first web page. I am thrilled to be learning html. </li></ul>
  5. 5. Skill 1: Copying Graphics Off the Web <ul><li>There are many sites on the web where graphics, animations, and background images are offered. Some may place a limitation on the images' use, some may ask for a credit or a link back to their page if you use one of their graphics, and some are offered free for the taking. You should NEVER steal graphics off of someone's web site if they are not being offered for your use. That having been said, we're going to learn the procedure for copying graphics for you to use on your web page. </li></ul>
  6. 6. Go to the Internet to Get a Picture – 5 minutes <ul><li>Open Internet Explorer </li></ul><ul><li>Search for a picture using a search engine such as Google </li></ul><ul><li>When you find a picture you may want for your webpage place your mouse directly over the image &quot; and right-click. </li></ul><ul><li>From the pop-up menu, click &quot;save picture as&quot;. You'll get a save window. </li></ul><ul><li>Use the drop-down menu arrow in the &quot;save in&quot; field box to locate your webpage folder on your hard drive. (C --> webpage) </li></ul><ul><li>Confirm that the &quot;File name&quot; field reads: samplepic, and the &quot;Save as type&quot; field reads: GIF(*.gif) </li></ul><ul><li>Click save. </li></ul>
  7. 7. <ul><li>Note: Even if you are already familiar with copying graphics, the important point here is to always save graphics that you plan to use on your web page to the same folder where your html page is. Then you will be able to use just the file name on your html pages (as we did in Step 7 of HTMLLesson1), and you will not need to include path or address names. </li></ul>
  8. 8. <ul><li>Ok, let's do another one: You're going to need a background image to complete SKILL 2, so go to and scroll down and save the blue background image shown on the right to your webpage folder, using the same 5 steps from before. Note that this is a .jpg, not a .gif. Make sure you have the correct extension (.jpg) in the &quot;Save as type&quot; field before you click &quot;save&quot;. </li></ul>
  9. 9. Skill 2: Add a Background Color or Image to Your Web Page <ul><li>The <body> tag in your html document is where you can add &quot;instructions&quot; that affect the appearance of the whole page. Two such elements are background color (bgcolor=) and background image (background=). </li></ul><ul><li>Colors in html-land are converted to their hexidecimal values. Your browser will also recognize the names of about 140 colors as plain words. At the end of this lesson, I will give you some links to hexidecimal and literal-word color resources, but here's a few we can play with for right now: </li></ul>
  10. 10. Skill 2: Add a Background Color or Image to Your Web Page (cont’d) <ul><li>Plain Word white black red blue yellow aqua orange palegreen </li></ul><ul><li>Hexidecimal FFFFFF 000000 FF0000 0000FF FFFF00 55F0E9 FF5500 8CFDB9 </li></ul>
  11. 11. We're going to change the background color of your web page to aqua: <ul><li>Open your local (off-line) copy by double-clicking on the index.html file in your webpage folder. It will open in MIE. </li></ul><ul><li>Right-click in an open space on the browser page and select &quot;view source&quot; from the pop-up menu. “index.html-Notepad&quot; will open. </li></ul><ul><li>In the notepad document, find your existing <body> tag near the top of the document, and change it to read as follows: </li></ul><ul><li><body bgcolor=&quot;55F0E9&quot;> </li></ul><ul><li>Save notepad, (File--> Save) and refresh MIE. The background should now be aqua. </li></ul><ul><li>Try changing the bgcolor= tag to several other colors and view the results. Use either the plain words, or the hexidecimal values between the quotation marks in the tag. Don't forget to save and refresh with each change </li></ul>
  12. 12. Poor Quackers. Did you try black? Did you say &quot;Hey! Where did my words go!?&quot; 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: <ul><li>In the notepad document, change the <body> tag to read as follows: </li></ul><ul><li><body background=&quot;bg-water.jpg&quot;> </li></ul><ul><li>Save notepad and refresh MIE. The background image you saved to your webpage folder in SKILL 1 should now be visible as the background of the page, provided you saved it with the same name as shown above. </li></ul>
  13. 13. Skill 3: Changing the Style, Size and Color of the Font <ul><li>We're going to learn another new tag: <font> </li></ul><ul><li>Open and close font tags allows you to give instructions to your browser that will affect the appearance of the text between the tags. Within the font tag, you can specify elements to change the type of font, it's color, or size. </li></ul>
  14. 14. Let's change the color and size of text on your page now, by adding a font tag with color and size attributes: <ul><li>In your index.html-notepad document, place your cursor directly before the word &quot;Welcome&quot;, and hit enter. </li></ul><ul><li>Type the bold, blue items, before and after your text, exactly as shown: <font color=&quot;FF5500&quot; size=&quot;+2&quot;> Welcome to my first web page.<br>I am thrilled to be learning html. </font> </li></ul><ul><li>Save notepad (File -->Save) then switch to your browser window and refresh. (I'll be calling this sequence &quot;save/refresh&quot; from now on, ok?) </li></ul>
  15. 15. Your text should now be orange and larger, similar to this: <ul><li>Welcome to my first web page. I am thrilled to be learning html. </li></ul><ul><li>Try a few other size and color combinations on your own. You can also use negative numbers (size=&quot;-1&quot;, size=&quot;-2&quot;) to specify smaller font sizes. Don't forget to save/refresh after each change. </li></ul>
  16. 16. Next we're going to learn how to change the font itself, by adding another attribute to the font tag. This attribute is called &quot;face&quot;. <ul><li>In your index.html-notepad document, change your font tag to read as follows: </li></ul><ul><li><font face=&quot;comic sans ms&quot; color=&quot;navy&quot; size=&quot;+1&quot;> Welcome to my first web page.<br>I am thrilled to be learning html. </font> </li></ul><ul><li>After you save/refresh, your text should look like this: </li></ul><ul><li>Welcome to my first web page. I am thrilled to be learning html. </li></ul>
  17. 17. 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=&quot;arial, tahoma, helvetica&quot; 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:
  18. 18. <ul><li>You wouldn't want to do that for the whole page or large sections of text, however, as the image file size would be very large, and would slow the loading of your page considerably. </li></ul>
  19. 19. Skill 4: Creating Headings, Lines, and Bold, Italicized, or Underlined Text <ul><li>Now we’ll create a horizontal rule. It will appear anyplace you type: <HR> in your notepad document. It does not require closing. </li></ul><ul><li>Bold, italics, and underline require open and close tags. Simply place the tags at the beginning and end of the text you want affected: </li></ul><ul><li><b> Bold </b> <i> Italics </i> <u> Underline </u> </li></ul>
  20. 20. Skill 4: Creating Headings, Lines, and Bold, Italicized, or Underlined Text (continued) <ul><li>The heading tag is used to enlarge text, such as you might for a title or a heading. It requires an open and a close tag. There are 6 sizes of headings, h1 through h6, with h1 being the biggest (go figure). Unlike the font size tag, the heading tag forces horizontal space above and below the text to which you apply the tag. </li></ul>
  21. 21. <ul><li>Ok, we're going to try all of the above: In your notepad document, let's choose a different font, add a heading tag around the word &quot;Welcome&quot;, and then add the other bold, blue text-effect tags as shown: </li></ul><ul><li><center> <font face=&quot;arial&quot; color=&quot;navy&quot; size=&quot;+1&quot;> <H1> Welcome </H1> <HR> to my <b> first </b> web page.<br> I am <i> thrilled </i> to be learning <u> html. </u> </font> </center> </li></ul>
  22. 22. Save/refresh. In your browser, you should now see this: <ul><li>My First Web Page - Microsoft Internet Explorer </li></ul><ul><li>________________________________________________________ </li></ul><ul><li>Welcome </li></ul><ul><li>________________________________________________________ </li></ul><ul><li>to my first web page. I am thrilled to be learning html . </li></ul>
  23. 23. <ul><li>Pretty busy, huh? Hopefully, you also just learned that you don't want to use every text-effect tag you know in every sentence you write. </li></ul><ul><li>Note the way to properly nest tags: If you wanted text bolded and underlined, you would type <b><u>text</u></b>, not <b><u>text</b></u> </li></ul>
  24. 24. Skill 5: Creating Hyperlinks <ul><li>We're about to learn a new tag - the anchor tag. </li></ul><ul><li>The anchor tag creates a link on your page to another page. </li></ul><ul><li>The page can be another of your own pages, or it can be a page anywhere on the web. </li></ul><ul><li>The anchor tag, which is a paired tag (open-anchor <A > and close-anchor </A >), can be placed around any text or any image on your page. </li></ul>
  25. 25. But before we can complete this exercise, you need to have another page! Create a second page now (this will be a good review): <ul><li>Open a new notepad window (Start--> Programs--> Accessories--> Notepad) </li></ul><ul><li>Add the required html document tags, and a few sentences. Don't worry about the content, this is just so we'll have something to practice linking to. </li></ul>
  26. 26. <ul><li>untitled - Notepad ______________________________________________________<html> </li></ul><ul><li><head> </li></ul><ul><li><title>My Second Page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><center> </li></ul><ul><li>Welcome to my second web page.<br> </li></ul><ul><li>Hey, cool, this is linked from my first page. </li></ul><ul><li></center> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  27. 27. Skill 5: Creating Hyperlinks <ul><li>Save this page to your webpage folder (File--> Save as). Let's name it page2.html </li></ul><ul><li>Close page2.html, and return to index.html-notepad. </li></ul><ul><li>Type the following text on the line before the </body> tag: </li></ul><ul><li>CLICK HERE to go to my second page. </li></ul>
  28. 28. Skill 5: Creating Hyperlinks <ul><li>Save/Refresh. </li></ul><ul><li>We're going to turn the words CLICK HERE into a link to your second page using the anchor tag. Within the open-anchor tag, we will add an attribute (HREF=) to tell your browser where the link should point. Add the bold blue text, exactly as shown to the CLICK HERE sentence in your index.html-notepad document: </li></ul><ul><li><A HREF=&quot;page2.html&quot;> CLICK HERE </A> to go to my second page. </li></ul>
  29. 29. Skill 5: Creating Hyperlinks <ul><li>As shown above, you only need the file name, and not the page's complete URL, if the html page you are linking to is uploaded to the same directory where your index.html page is. </li></ul><ul><li>Save/Refresh. Did &quot;CLICK HERE&quot; turn into a link? Click on it - there's your second page! </li></ul><ul><li>Right click and select &quot;View Source&quot; on your second page, and add the following tags and text to your page2.html-notepad document: </li></ul><ul><li><A HREF=&quot;index.html&quot;>RETURN TO HOME PAGE </A> </li></ul><ul><li>Save/Refresh. Now you have a link leading back! </li></ul>
  30. 30. Note: If you want to use an IMAGE as a link, place the anchor tag around the image tag, like this: <A HREF=&quot;page2.html&quot;> <img src=&quot;quackers.gif&quot;> </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 &quot;border=0&quot; to the image tag. The complete tag would look like this: <A HREF=&quot;page2.html&quot;> <img src=&quot;quackers.gif&quot; 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=&quot;;>Wow, this woman's a genius!</A>
  31. 31. Skill 6: Create an E-Mail Link <ul><li>Now that you know how to make links, the e-mail tag is a cinch. The e-mail tag is just a variation of the anchor tag. You'll write it like this: <A HREF=&quot;mailto:youremailaddress&quot;> text or image here </A> </li></ul><ul><li>If your email address contains spaces, you must remove them and type your address as one word (all lower case) for the email link to work. When the text or image link is clicked on, an e-mail form addressed to you will automatically open. </li></ul>
  32. 32. Skill 7: Use a Table to Format Your Page <ul><li>Tables are a complicated subject, and pretty advanced for a beginner's html lesson, but sooner or later you're going to get tired of placing all your text and images in a long vertical row down your page, and you'll yearn to place text ALONGSIDE an image. That requires a table. </li></ul>
  33. 33. Skill 7: Use a Table to Format Your Page <ul><li>Let's learn another new tag, <table></table>, and its basic attributes, and then we'll use this new tag to create a simple table that will place text alongside an image. </li></ul><ul><li>A table consists of rows of cells. A cell is a container for information. You can place text, images, links, background color, other tables, or any of the other tags we've learned, inside a table cell. </li></ul>
  34. 34. Skill 7: Use a Table to Format Your Page <ul><li>The basic tags found in a table are: </li></ul><ul><li><table> - Begins a table <tr> - begins a new row in the table <td> - begins a cell in the row. </td> - ends a cell in a row (You can put as many cells as you want in a row.) </tr> - marks the end of a row. (You can put as many rows as you want in a table.) </table> - Ends the table </li></ul>
  35. 35. Skill 7: Use a Table to Format Your Page <ul><li>Return to your index.html-notepad document. We're going to delete all of those text-effect tags (if you haven't already on your own), and then use a table to place Quackers alongside the text on the page: While we're at it, we'll add an e-mail link, too. </li></ul><ul><li>Edit your page to read as follows: </li></ul>
  36. 36. <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>
  37. 37. Skill 7: Use a Table to Format Your Page <ul><li>Save/Refresh. </li></ul><ul><li>Congratulations! </li></ul><ul><li>If you've completed Lessons 1 and 2, you've got the skills you need to start your personal web page. Let the creativity begin! There's a lot more to learn about html when you are ready.  In fact, there's a lot more to learn about the tags I've taught you! These tutorials were meant to get you started, and I hope they've done that to your satisfaction. </li></ul><ul><li>When you're ready to learn a lot more fun stuff, check out HTMLLesson3 </li></ul>
  38. 38. <ul><li>As promised, here's some links to hexidecimal and literal-word color resources: </li></ul><ul><li>The WebSupport Color Table has a table of color samples, including each color's name and hexidecimal value. </li></ul><ul><li>The hIdaho Design Color Center lets you click on a color, view it as a background or link color, and learn it's hexidecimal value. </li></ul><ul><li>The HTML Literal Word Color Center offers a color chart of 140 plain-text words that are recognizable by most popular browsers. </li></ul>