Enhance your website
Tags and Features (Add-Ons) Tags (singles or sets) can have CSS Properties or Features. Let’s call the tag features “CSS Add-On’s”. CSS Add-On’s allow tags to have additional features such as size, color, width, etc… CSS Add-On’s will always go after the opening tag only and never in the closing tag, if it’s a set.
Changing the Appearance of the Horizontal Rule To Change the Length (width property)– <hr style=“width:number or %”> Thickness (height property) - <hr style=“height:number in pixels”> Alignment (align property)– <hr style=“align:right or center or left”> Combine the CSS properties when needed - <hr style=“width:200;height:10;text-align:right”>
Changing the Appearance of <body>, <p> or <h1>-<h6> Font size ranges: x-small, small, medium, large x-large, xx-large small is little font medium is normal - like Word size 12 large is big To change the Font Size(font-size property) <body style=“font-size:small”>text here </font>
Font Family – changes the appearance of the font such as Arial or Comic Sans. <body style=’’font-family:arial’’>text </body> You can combine all of the font tag’s CSS properties in one tag if they apply to the same text: <body style=“font-size:small;font- family:arial”> text </font>
ALIGNING TEXT To Align using the Paragraph Tag: <p style=“align:right or center or left”> type here </p> To Align using the Heading Tag: <h1 style=“align:right or center or left”> type here </h1>
How to Insert Color??? Use the tag: <Body BGColor = “Color”> Go to www.colorpicker.com Pick color want by pointing: then use the HEX Number instead of the “Color Name”.
Try Inserting color Now you try with your Presidential website! Use color picker.
Adding Images
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.
<img src=“flowers.gif”> Images Extensions Images must use the image filename’s and the extension either .jpg, .gif, .bmp or .png <img src=“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.
Choose a good descriptive name Filename plus the graphic’s extension 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 ALWAYS alt= with <img src> Alt is a word or words used to describe your picture <img src=”rose.jpg” alt=”rose”> Choose a good descriptive name Filename plus the graphic’s extension
Steps to Adding an Image 1st Find an image. 2nd Save 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”>
Changing the Image Size to the <img src> add on Height = number or percentage % Width=number or percentage % <img src = ”BillGates.gif” alt =”Bill Gates” width=100 height=150%>
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. <img src=”flowers.gif” alt=”rose” align=”top, bottom or middle or right or left”>
Don’t Forget to Combine When Possible <img src=”Gates.gif” alt =”Bill Gates” width=100 height=150% align =“top”> Some cool animation websites: www.iconbazaar.com (graphics, animation & backgrounds) www.artie.com (graphics, animation & backgrounds)
Let’s Practice Adding Images
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
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. 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.
Save the Notepad & Refresh the Browser <img src=“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> <img src=“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
Remember: your colors and picture can be different
Close both your Browser & Notepad
Adding Links
Hyperlinks To link webpage to webpage: Type hyperlink code: <a href=“filename.html”>Name of link</a> Put at bottom or top of webpage! <a href=“Nerd.html">Home</a> | <a href=“Nerd1.html">Nerd1</a> | | <a href=“Nerd2.html">Nerd2</a> Now you try!
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”>
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.
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>
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>
Let’s Practice Adding Links
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.
<title> Your Name Second Web Page</title> </head> <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.polk.k12.ga.us" target=“_blank"> Polk 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
Adding Links to Connect Web Pages
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>
Let’s Practice Linking Pages
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!
Linking Page Practice Cont’ 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! 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
Save the Notepad & Refresh the Browser Make sure you’re still on My1stWebPage After the last thing you typed add: <br> <br> <br> <font style=“font-size:large”> Click here to go back to the <a href ="My2ndWebPage.html"> 2nd Page </a> </font> Save the Notepad & Refresh the Browser
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.