1 / 43

Enhancing Your Web Site

Enhancing Your Web Site. Banneker High School. More Basic HTML Tags. Today you will learn these tags: <ul> <ol> <li> <img src> & add-on (alt, height, width & align) <a> and “href” add-on Add a text link to a Web page on another Web site Describe linking terms and definitions

oralee
Download Presentation

Enhancing Your Web Site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Enhancing Your Web Site Banneker High School

  2. More Basic HTML Tags Today you will learn these tags: • <ul> • <ol> • <li> • <img src> & add-on (alt, height, width & align) • <a> and “href” add-on • Add a text link to a Web page on another Web site • Describe linking terms and definitions • Create a home page and enhance a Web page using images

  3. Adding Lists

  4. Ordered List or Numbered List • used when a specific order is needed. • Tags are <ol> </ol>. • Open <li> is between them for each listed item. • Variation of Numbers: Lowercase Letters - <ol type=a> Uppercase Letters – <ol type=A> Uppercase Roman No. - <ol type=I> Lowercase Roman No. - <ol type=i>

  5. Let’s Practice Adding Order List

  6. Viewing HTML Notepad from the Web Page’s Browser 6 • Open your My1stWebPage.html Browser • Click on the “Blue E” • Now, Click View on the menu bar • Then, Click Source on the View menu • Your My1stWebPage Notepad should now be opened.

  7. If needed, open both the browser and notepad of My1stWebPage.html After the heading codes and closing horizontal ruled line tag hit enter and type <br> <hr size=20 color=“your choice” width=50%> <font size=5> I would recommend Web Design to my friends because... <ol> <li>It's super fun <li>I get to be creative <li>I get to use the computer </ol> Save the Notepad & Refresh the Browser

  8. Remember: your colors can be different

  9. Unordered List or Bulleted List • List makes information better on a web page because it’s organized and easier to read. • use if no specific order is needed. • Tags are <ul> </ul>; will make single space. • Open <li> is between them for listed item; it’s a single

  10. Let’s Practice Adding Unordered List

  11. After the last list you typed: <br> 3 Things I have learned so far... <ul> <li>Information can travel the web on dial-up or dedicated lines</li> <li>WYSiWYG means "what you see is what you get".</li> <li>Publishing info on the Web can be much cheaper than print.</li> </ul> </font> <hr size=20 color=“your choice”> Save the Notepad & Refresh the Browser

  12. Remember: your colors can be different

  13. Adding Images

  14. Adding Images Images: • can be moving (animated) or non-animated (not moving). • can be considered cartoons, graphics, pictures (real), buttons or icons. Image Source tag will appear as such– <img src> • It isn’t a set, so don’t close it.

  15. Images Extensions • Images must use the image filename’s and the extension either .jpg, .gif, .bmp or .png <imgsrc=“flowers.gif”> • .gif & .bmp are mostly for clip arts, icons & graphics. • .jpg (jpeg) is for photos & takes up more disk/file space. • .png is for graphics & photos; updated version of gif, but can’t be animated.

  16. Filename plus the graphic’s extension Choose a good descriptive name Images “Alt” • Alternative Text Image – a way to ID your graphic or image in case it’s not loading or if it’s turned off. • Roll over your picture and it’s shown • You MUST ALWAYSalt= with <img src> • This is required for disabled people. • Alt is a word or words used to describe your picture <img src=”rose.jpg” alt=”rose”>

  17. Steps to Adding an Image 1st Findan image. 2ndSave the image by RIGHT-CLICKING on it. Then • Switch to the file location then • RENAME to something shorter but sensible. • Look at the extension given such as .gif,.jpg • 3rd on the Notepad Add the Image Source Tag with image’s filename.ext & Alternative Text image <img src=”filename.ext” alt=”description”>

  18. Changing the Image Size to the <img src> add on • Height = number or percentage % • Width=number or percentage % <img src = ”flower.gif” alt =”rose” width=100 height=150%>

  19. Aligning the Image with Words or Text • Images can be placed any where in your text. Use the “align” add-on with the below options: • Top – text is aligned with image’s top. • Middle – text is aligned with image’s middle. • Bottom – text is aligned with images’ bottom. • Left – image on left & text wraps on right. • Right – image on right & text wraps on left. <imgsrc=”flowers.gif” alt=”rose” align=”top, bottom or middle or right or left”>

  20. Don’t Forget to Combine When Possible <img src=”flower.gif” alt =”rose” width=100 height=150% align =“top”> Some cool animation websites: • www.iconbazaar.com (graphics, animation & backgrounds) • www.artie.com (graphics, animation & backgrounds)

  21. Let’s Practice Adding Images

  22. Before you begin • To get an image to add to your web page go to Google images. • Search your favorite animal • Right click the image and choose Save Picture as • Go to your folder in the Save In section • Make sure it is in the SAME LOCATION of your My1stWebPage file. • Type a name for the image • Be sure the type is .jpg

  23. After the last list you typed: <br> <br> <br> <img src=“the name you typed.jpg" alt=”favorite animal Middle" Height=25% Width=25% align="middle"> This image is adjusted using percentages and the text is aligned with the image's middle. <br> <br> <br> This image is adjusted using numbers <img src=“the name you typed.jpg " alt=” favorite animal Bottom" Height=85 Width=85 align= "bottom"> and the text is aligned with the image's bottom. <br> <br> <br>

  24. <imgsrc=“the name you typed.jpg" alt=” favorite animal right" Height=your decision Width= your decision align= "right"> I adjusted this images and the text is on the right, but the text wraps on the left. <br><br><br><br><br> <imgsrc=“the name you typed.jpg" alt= " favorite animal top“ align=“top”> When you use align="top", only the first line of text will be at the top of the image. If you have more than one line of text, the others will jump down to the bottom of the image! <br> <br> <hr your of size, width and color> Save the Notepad & Refresh the Browser

  25. Remember: your colors and picture can be different

  26. Close both your Browser & Notepad

  27. Adding Links

  28. Hyperlinks • Main way to connect web pages and move throughout a web site. • Uses the Anchor Tag <a> which is a set. <a> </a> • Must have the href add-on (Hypertext Reference) • The tag will appear as <a href=“URL, Filename or Email Address”>

  29. Hyperlinks Continues • The text after the <a href> is the Target or Active Hyperlink & will become the color Blue and Underline. • Then after Clicking on the link, it will turn Purple.

  30. Linking to the Net • <a href =”page’s URL”> Word to be linked </a> • The URL has to be the exact web site’s address including the http:// example: <a href=”http://www.yahoo.com”> Yahoo! </a>

  31. Linking to Open in a Different Browser Window To make the Web Page Open in a Different Browser Window: • put the add-on target=“_blank” after the url in the anchor tag. example: <a href=“http://www.yahoo.com” target=“_blank”> Yahoo! </a>

  32. Let’s Practice Adding Links

  33. Creating a New Web Page • Open a New Notepad StartProgramsAccessoriesNotepad • Click Format  check Word Wrap • Save the new file as My2ndWebPage.html • When finished typing, don’t forget to Save the Notepad and Refresh your New Browser.

  34. <html> <head> <title> Your Name Second Web Page</title> </head> <body bgcolor="gray" text="white"> <font size=6> This text is a <a href="http://www.yahoo.com"> link </a> to a page on the World Wide Web. <br><br> This is a link to the <a href = "http://www.barrow.k12.ga.us" target=“_blank"> Barrow County School System's </a> website & it will open in a different Browser Window (Screen). </body> </html> Save the new Web Page & Refresh it’s Browser

  35. Adding Linksto Connect Web Pages

  36. Linking to Pages (Files) on your Disk/Computer • The computer file location has to be the exact including the drive’s name such as a:\ or c:\ or e:\ or f:\ Example of using a File on a your disk, computer or flash: <a href=”a:\Marquee Practice.html”>Marquee</a> • If using a Folder’s Name: Example <a href=”a:\WebPage\Marquee Practice.html”> Marquee</a>

  37. Let’s Practice Linking Pages

  38. After the last thing you typed on My2ndWebPage add:<br> <br> <br> I have created a link that will go my <a href="My1stWebPage.html"> 1st Web Page </a> Now, Save, Refresh & Click onyour Link. You should now be on your 1st WebPage!

  39. Linking Page Practice Cont’ • Let’s try creating a Link from the 1st Page back to the 2nd page. • With My1stWebPage Browser showing, click on View, Source to Open the Notepad • When you clicked the link on My2ndWebPage and it took you to My1stWebPage • If you wanted to return to My2ndWebPage you could press the BACK button OR Simply create a link!

  40. Make sure you’re still on My1stWebPage • After the last thing you typed add: • <br> <br> <br> <font size=6> Click here to go back to the <a href ="My2ndWebPage.html"> 2nd Page </a> </font> Save the Notepad & Refresh the Browser

  41. Recap Activity • If you need to review any tags or concepts learned throughout this and the other tutorials, you can use the HTML files you have created. • Now, close your browser and notepad. • Proceed to the HTML Web Page Assignment given from your teacher.

More Related