Chapter 4 - A Trip to Webville
"Getting connected"
LT: Using anchors.
class4example.html | |
File Size: | 0 kb |
File Type: | html |
CLASS EXAMPLE
<body>
<a href="#CHAI">Click to go to cost of Chai</a> <h1>Starbuzz Coffee Beverages</h1> <h2>House Blend, $1.49</h2> <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p> <h2>Mocha Cafe Latte, $2.35</h2> <p>Espresso, steamed milk and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and foam.</p> <a id="CHAI">Cost of Chai</a> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </body> |
USING # and id... What does it mean?
The "a" element indicates a hyperlink and the "id" is a unique identifier for the link. # calls or looks for the id REMEMBER links do not have to be links to internet sites, they can be links to other pages, pictures or areas within a web page. The "#CHI", says that we will go to the area of the code that has id="CHAI", like an anchor or pointer that directs you to that area of the page. |
YOUR TURN...
test.html | |
File Size: | 26 kb |
File Type: | html |
CREATING ANCHORS
- download test.html
- Today we are going to recap on how to us <a id=" ">.... <a href="#"> to create an i.d. for a specific area on a web page and then link or "anchor" that area to a link so that way when we click on our link it goes to the area we specified.
- id is a attribute which lets us "name" an area or in this case <a> element
- we use # to reference back to the id name
- EX: <a id="top"> Top of page</a> this would be located at the top of a page
- we also will use the target="_blank" attribute. when coupled with a link it will open a new separate page.
YOU WILL:
- Download test.html in a folder CHAPTER4 in your WEB folder.
- Watch Video as a HOW TO...then
- Create:
- an id top and bottom, with a link at the top of page to move to the bottom and a link at the bottom of page to move to the top
- an id for Sources as seen on the video, and make sure it opens a new web browser
WHEN DONE SAVE AND SUBMIT IT EDMODO - due end of hour
Anchors Away PROJECT
Hi Web Design! Below is your 2 day assignment which is due by the end of class on FRIDAY and MUST be compressed and submitted, if you get done early please find something quite and constructive to do.
- Download this template and save it a new folder named Anchor, which is in your Chapter 4 folder, which is in your WEB main folder
index_template.html | |
File Size: | 0 kb |
File Type: | html |
- You are to create 3 pages about anchors.... that's right about anchors! It can be any type of anchor - boat anchors, news anchors - be creative but appropriate.
- Make sure that you have at least an image folder with the main ANCHOR folder.
- Each of your 3 pages MUST:
- Have a comment at the top that has your name <!-- Name -->
- Have a background color
- Using boarders and padding/margins
- Have a title (for each page)
- Have 3 links at the top which link to your other pages - like a menu or navigation bar
- at least 1 picture for each page
- Overall your project should include:
- at least 500 words about your topic
- demonstrate your use of HTML anchors using "id" at least 3 times ...see above from 9/18 lesson or look at your test.html for help
- at least 3 links to internet pages and all links to internet pages must open in a new browser so you will need to use <a target="_blank" href=" ">
- demonstrate your use of at least 1 quote using <blockquote>
- demonstrate your use of <h1> and <h2> and <p> in all three pages
When you are done with ANCHORS AWAY ASSIGNMENTT. Compress the ANCHOR folder not just the files and submit it using EDMODO - due FRIDAY