Download presentation
Presentation is loading. Please wait.
1
HTML Lesson 3
2
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
3
Link to a different web site (like google)
On your web page in notepad type: < a href=“ 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
4
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.
5
Adobe Photoshop Tool to edit pictures (and more!)
Start->All Programs->Adobe Design Premium CS3-> Adobe Photoshop CS3 Open a picture (File -> Open) To reduce the size Image ->Image Size Change one dimension, the other will change automatically Save it as “image small.jpg”
6
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> Links < a me </a>
7
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 “Click Here to See Second”. 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 a band, 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 link Make the words “ me” send an to
Similar presentations
