HTML Anchors

Anchors

Follow the video tutorial to add content to your Develop page and use http://www.flickr.com/creativecommons (search) to find your two hobby location photos.

After your H1 Develop page title write a few sentences about how hobby and use a couple of <BR> tags to put a line space between your title and paragraph:

Sentence 1: what first interested you in your hobby

Sentence 2: what you specifically like about your hobby

Sentence 3: what you have accomplished with your hobby

Images

In your paragraph, mention a key word or phrase that describes the second image on the bottom of your develop page and make the word an anchor so when you click on the word it takes you to that picture.

For the first image, create a link so when you click on the image it takes you to your home index.html page.

Then delete your anchor link if you made one for your Develop title according to the video tutorial above.

Color

In your paragraph, every time you mention your hobby (e.g. "volleyball"), bold it using the <b> tag and change it to one color that is not blue. You can either type the name of the color (e.g. "blue") or the hex code.

Color Examples

Heading: <h1 style="color:#0000ff">Heading</h1>

Paragraph: <p><font color="blue">This is some text!</font></p>

Highlight: <div style="background-color:#0000ff"></div>

For future reference, to center or align text to the left or right you would add the following:

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered Heading</p>

Also for future reference, <i> is for italicize and <u> is underline.

Take a screenshot of your code and html page to post to Schoology.

Internet

If you want to work ahead on the next tutorial (not due for this assignment) you can watch & take Cornell notes on the Internet.

Do not do:

Go to your develop.html page and type Develop at the top of the page as an H5 heading.

Under it, insert an image from http://www.flickr.com/creativecommons (search) that represents the place you developed your hobby. For example, if you developed the skill of dribbling a basketball, maybe you did that on an outdoor playground or if you learned how to paint at an art studio.

This time instead of taking a screenshot, click on the image you want

then ctrl + click on the image and choose a the "Large" size

Ctrl + click on the image again and select copy image URL/location

then in HTML under the Develop H5 heading add three <br> tags and then type the following:

<img src="paste the copied URL picture link here">

Example: <img src="http://farm7.staticflickr.com/6106/6260632318_57e4cbf62b_b.jpg">

Now under the image you just inserted, add a few <br> tags and add a 1-3 word title description in bold of the location photo and then add a <br> tag and a couple sentences describing the location where you developed your hobby.

Outdoor Court

I developed my skills for dribbling a basketball by dribbling balls on the city outdoor court for hours after school. Many times I would play a game where my friends would have to try and steal the ball from me as I dribbled on the court near my house.

Now add an anchor (which is a link to a a different place on the same page) immideiatly before your bold location title description (Outdoor Court)

<a name="typeAoneWordDescriptionHere"> Outdoor Court </a>

Then go back up to Develop and add the HTML:

<a href="#Same1WordDescriptionHere"> Develop </a>

Now when you click on Develop, it should bring you down the page, past the photo, to the description.

If you don't understand how to do this you can watch the video tutorial and follow the directions to add your anchors but the content may be a little different but follow the directions above.

Directly below the title, add the following links (do not apply a heading to the links): Inspire, Develop, Detail. Insert a symbol (do not use Greek or math symbols) between each link.