Links Old

Links & Symbols

Watch and follow the video tutorial directions and set up your hyperlinks on your hobby website. There is also a slideshow at the bottom of the page that can be used as a helpful reference.

Create three new web pages and save them as detail.html, develop.html, & inspire.html inside your classIDhtml folder. For each of the files, type the name of the file (e.g. detail) for the title with no content in the body of the HTML document.

Change your index.html home page so there is a horizontal banner at the top, an A1 heading with the title of your page (e.g. Capturing a Shot of the World).

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.

Email & Symbols

Watch the video tutorial and follow the directions to setup your email and symbols.

At the bottom of the home page type the following:

All Rights Reserved (insert the Copyright Symbol) 2010

Site Created by Your Full Name (insert an email link with the text "Full Name" to your class email)

Anchors

Watch the video tutorial and follow the directions to add your anchors etc.

Go to your develop.html page and create three anchor links on one line at the top of the page: Past - Present - Future, which are all H2 headings. Insert any symbol between each of the words.

Then insert any image relating to your topic or preferably your landing page screenshot from the MF Picasa album below these past, present, and future links at the top although do not take a screenshot. Simple click on your photo online and then ctl + click on your about.me screenshot and select copy image link. Then in your html code below your Past, Present, and future links insert the code except change the link to your copied image link:

<img src="https://lh6.googleusercontent.com/-X2ng_BtcJdc/Twv3q0U8hWI/AAAAAAAA5go/lohM3iJUG1U/s719/Screen+shot+2012-01-10+at+5.26.46+PM.png">

Note: When you use an image website reference link like the one above, it will only work if you are connected to the Internet.

Then go down and use Past, Present, & Future as headings and describe your skill in reference to each using 3 sentences (not long) like the example below. Add <br> tags before the top links after the top links, between the image and between the paragraphs to make it look similar to the example below although bold the headings before the paragraphs.

Anchors Example (HTML code shown for Past, do the same for Present and Future)

<a href="#thepast"> Past </a> | Present | Future

Place any image relating to the content or your about.me screenshot here below the links

<a name="thepast"> Past </a>

My interest in photography first started when I graduated high school and went on a trip to Europe. I was inspired by the architecture and wanted a way to capture it and show friends and family back home. I later took some classes at the University of Hawaii and purchased my first SLR camera, the Nikon D90. I then worked at a studio taking photographs to earn money and learn more.

<a name="thepresent"> Present </a>

I currently help others learn about photography and enjoy inspiring others. I still go on trips and take photographs of cultures and customs in places such as Thailand, Singapore, and South Korea. I have upgraded my photography equipment which enables me to take better photographs.

<a name="thefuture"> Future </a>

I hope to some day publish a photo book of my work on a specific project in another country. Photography can inspire others and I want to continue to help others improve their photos. I want to someday take a hiking trip to the mountains of Western China and photograph the journey.

Submit

Take a screenshots of the index and develop pages, both the html code and the webpage. Make sure to take the screenshots so they are next to each other.

HTML code next to each other. Email the HTML text/web file(s) you created or edited and send to posterous and the link to the spreadsheet. The HTML file will never show on posterous, which is fine since I will see & grade from the screenshots...but if you ever need the file, you

Directions

Image Maps

Watch and follow the directions in the video tutorial part I & part II. There is also a helpful sideshow resource to help you.

Wordle

Go to www.wordle.net. Write down the names of two or three people who have inspired you in your hobby. Write their names together (e.g. JoeShin). Repeat the names of those who have inspired you more. Lastly, type the letter H and repeat it five times with a space. Create the wordle and take a screencapture of the words. Save the image as "wordle" in the images folder. Open your inspire.html file and insert the wordle image into the body and center it.

Text

Above the wordle image, insert the text, "People who have inspired me" at the top center of the page. Use an H2 heading.

Image Map

Build an image map with the wordle image. Create a rectangle area link around each name and have it link to the person's name and have their image below the name. Write one or two sentences about how the person has inspired you. Insert an image of the person using the url of the image or one of your own. Make sure the image map area of the name is no more than a pinky finger off the area of the name or the letter H.

Take a screenshot of the webpage and the HTML code next to each other and also upload the text file(s) to posterous.

can go to your sent gmail and you will find it.

Optional Resources:

ITC HTML Lesson 2 ‎(links)‎_