Hyperlinks, Lists, Hotspots, and Internal Styles

1. Hyperlinks, Lists, Hotspots, and Internal Styles CS 2 – 20/May/2010

2. Agenda • Quick Review of how to create basic XHTML elements on web pages. • Setting up your FTP and testing it. • Learn how to hyperlink sites, pages, and parts of the same document. • Learn how to create different types of lists • Learn how to create hotspots (hyperlink images) • Learn how to stylize web pages using Cascading Style Sheets – start with internal style sheets • Making a simple table on your web page.

3. Hyperlinks – using the anchor tags • There are different ways to define hyperlinks in HTML • Linking a specific local page (that is how you create a web site) • Linking to a different outside web-page (or web-site) • Linking to parts of the same page • Linking from one page to a specific part of another local page. • All of the above are done using the “anchor” or <a> and </a> tag-pair.

4. Hyperlinks to pages • For a local file – need to know the name of the file and the folder-path to that file • <a href=“page2.htm”> Page 2 </a> • Assumes that the file “page2.htm” is in the same folder as this web page that contains this element. • <a href=“f2/page2.htm”> Page 2 </a> • Assumes that the file “page2.htm” is in a folder “f2” which is in the same folder as this web page that contains this element. • <a href=“../page2.htm”> Page 2 </a> • Assumes that the file “page2.htm” is a folder that contains the folder in which this web page containing the element is stored. • <a href=“www.amazon.com”> Amazon </a>

5. Hyperlinks to parts of the same page • You first define an anchor at a specific part of the page • <a name=“top”></a> • - notice there is nothing between the tags • - this would go, say, at the top of your page. • Anywhere else in the page, you can define the link to go to the top of the page! • <a href =“#top”>Go to the top of page </a> • - notice that # symbol just before the name. • - notice that both names (inside the circles) must be the same.

6. Hyperlink - concluded • <a href=“page2.htm#top”>Top of Page 2 </a> • Will take you to the top of another linked page. • Assumes there is a “page2.htm” with an anchor named as “top”. • <a href=“mailto:gshankar@babson.edu”> Email Me </a> • The “href” is “mailto:gshankar@babson.edu” • Will try to open your local email system (e.g., outlook).

7. Lists on Web Pages • There are 3 types of lists: • Unordered lists • Bulleted list of items • Ordered Lists • Numbered list of items • Definition Lists • List of terms and their definitions

8. Un-Ordered Lists • Defined by the <ul> and </ul> tags • Each item on the list is marked using <li> and </li> tags • Combination of both defines the list. • E.g., ingredients for lemonade: <ul> <li> lemons </li> <li> sugar </li> <li> pinch of salt </li> <li> water </li> <li> ice </li> </ul>

9. Ordered Lists • Defined by the <ol> and </ol> tags • Each item on the list is marked using <li> and </li> tags • Combination of both defines the list. • E.g., top 4 things to do today in specific order: <0l> <li> brush teeth </li> <li> breakfast</li> <li> lunch</li> <li> dinner </li> </0l>

10. Definition Lists • Defined by the <dl> and </dl> tags • Each term is PREFIXED by the <dt> tag • Each definition is PREFIXED by <dd> tag • E.g., web terminology <dl> <dt> Web Page <dd> A stand-alone page with content and a URL <dt> Web Site <dd> A collection of hyperlinked web pages <dt> Web Server <dd> A computer that stores and disseminates web pages </dl>

11. Image Maps • Image maps… • …divide an image into two or more clickable areas; or • …specify part of an image as the clickable area. • The clickable areas are also called “hotspots.”

12. Image Maps

13. <area shape="rect" coords=“320,320,400,400" href=“www.ci.newton.ma.us" alt=“City of Newton/> Image Maps 320, 320 400, 400

14. Image Maps -Putting It Together <map name=“cities" id=“mymap"> <area shape="rect" coords=“320,320,400,400" href=“http://www.ci.newton.ma.us" alt=“City of Newton"/> <area shape="rect" coords=“200,200,300,300" href=“wellesley.htm" alt=“Wellesley"/> </map> Names must match Id is required alt is required New Attribute <imgsrc=“middlesexcounty.gif" usemap="#tcities" alt=“Middlesex County" />

15. Image Maps • Other Shapes • Circle • Polygon (x,y) • x,y (center position) • r (radius distance) r shape="circ"coords="x,y,r" (x2,y2) (x1,y1) (x3,y3) shape="poly"coords="x1,y1,x2,y2,x3,y3"

16. Try This – heads up • This exercise will require you to: • Create a new web page (saved as CS2TT1.htm) • Add a nested list consisting of 3 ordered lists nested within one unordered list. • Add an image and define a hotspot • Add a hyperlink

17. Try This……..(save file as CS2TT1.htm) • Download and save the image (babson-map) provided in today’s class folder. • Open the template file. • Title the page as “CS2-20-May-2010” • Add a heading line “Babson College” (use h1) • Add a horizontal rule • Add a smaller heading “Academic Divisions and Courses” (use h2) • Create a list that looks like the following: (see next page) – make the list in a separate paragraph. Use <h3> font for the entire list.

18. Try This……..continued • Management • MOB3535 – Management Strategies • MOB1000 – General Management • MOB3582 – Global Business Communications • TOIM • MIS3690 – Web Technologies • MIS3640 – Software Design • MIS1000 – Introduction to Information Systems • Arts and Humanities • VSA3602 – European Art • AHF1300 – A&H-Foundation • Please link “Arts and Humanities” to (http://www3.babson.edu/Academics/Divisions/ahhs/default.cfm)

19. Try This……..continued • Add another horizontal rule <hr/> • Add the image (Babson map) to the page. Do not change its size in anyway (no width, height definitions) • See if you can find “Babson Hall” and hyperlink it to the TOIM division’s web page (http://www3.babson.edu/Academics/Divisions/itm/default.cfm) • Save the file as CS2TT1.htm. • Test the file on your browser.

20. Introduction to Style Sheets

21. Why Styles? • Styles define how to display HTML elements • Easily change look of a page • Provide consistency in look among pages on a site • Do more than you can with XHTML tags

22. Same Page, Different Styles

23. Same Page, Different Styles

24. Creating Style Definitions • There are 3 ways to add styles to your document. • Internal Styles –styles in the <head> section of the document. • External Styles – styles in a separate style sheet outside your document. • Inline Styles – styles in the same line as the elements in your document. • You can use all 3 for a single document – styles will cascade to provide a single style.

25. Internal Style Sheet • Defined within the <head> and </head> tags in your document. • All style definitions are enclosed within <style type=“text/css”> and </style> tags • You define styles for each TAG that appears in the body of the document.

26. For example…. • <style type=“text/css”> • body {color : yellow; background-color: blue; } • h1 {font-family : arial; font-style: italic; font-weight: bold; text-align: center;} • p {font-family: verdana; color: purple; text-indent:20px;} • hr {height:10px; width: 60%; color : red;} • </style>

27. Style Definitions - Font Styles • font-family: name • font-style: normal, oblique, italic • font-weight: normal, bold, bolder, lighter, or multiple of 100 (400 is normal) • font-size: size* * Number followed by px, pt, em, or %

28. More Font Styles • text-transform: capitalize, uppercase, lowercase, none • font-variant: small-caps, or none • text-decoration: underline, overline, line-through, or none

29. Text Spacing • letter-spacing: normal, or size* • word-spacing: normal, or size* • white-space: pre, nowrap, normal • line-height: size* • text-align: left, right, center, justify • text-indent: size* * Number followed by px, pt, em, or %

30. Specifying colors • Using named colors • color : yellow • Using Hexadecimal (or Hex) format • color:#FFFF00 • Using RGB format • color:rgb(255,255,0) • Reference: http://cloford.com/resources/colours/500col.htm

31. Style Rule Reference • CSS examples • http://www.w3schools.com/css/css_reference.asp

32. Try This….CS2-trythis2.htm • Download and save the base file from our course web page. • Let us practice styles with this document. • All instructions will be provided in class on the white board!