HTML
What you’ll learn today Link to a different page of your site Link to a different web sites More about attributes and elements Using photoshop to scale images Link to a picture Thumbnails (small picture links to a big picture) Email link
Links to a different web page in your site Make another page using notepad: page2.html Here’s how to connect (link) your pages together On page1.html type the following tag <a href=“page2.html”> Click here for the next page </a> Words that show up as A link on the page The link tag The page to jump to
Link to a different web site (like google) On your web page in notepad type: < a href=“http://www.google.com”> Click here for google </a> What’s the difference between this and a link to another page in your site? Words that show up as a link on the page The site to jump to The link tag
Attributes and Elements extra bits of information inside a tag. <img src=“name picture“ / > <body bgcolor=“red” > <a href=“page2.html”> I’m a link </a> Elements Another name for the begin and end tag and everything in between Everything that is in-between and includes the <body> and </body> tags is the body element. <title> and </title> are tags, BUT <title>Rumple Stiltskin</title> is a title element.
Some other useful links you might want to make Links to a picture(click on words and open a picture) < a href=“picture.jpg”> Click here to see my picture </a> Thumbnail (click on small pic to open big pic) < a href=“BigPicture.jpg”> <img src = “SmallPic.jgp” /> </a> Email Links < a href=“mailto:jhubbard@yahoo.com”> Email me </a>
Let’s Use this stuff - LINKS! Make a second page for your site by opening notepad and creating page2.html (file-> new, file -> save as) Add all the required tags (what are they) Add a title and a comment to your page Open the first page and add a link called “Page 2”. When you click on this link, it should open the second page Open the second page and add a link called “Click Here to See My First Page”. When you click on this link, it should open your first page On the second, create a link that opens a picture. For example, if your second page is about music bands, you can have the words “see the band”open a picture of the band. Don’t forget to download the picture into your project folder. Create a thumbnail. Use photoshop to make a small version of your picture. Put the small picture on your second page and when you click on it, make a big version of the same picture open. On your first page, add an email link Make the words “Email me” send an email to “slewis@Marietta-city.k12.ga.us”