1 / 32

Hyperlinks, Lists, Hotspots, and Internal Styles

Hyperlinks, Lists, Hotspots, and Internal Styles . CS 2 – 20/May/2010. 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.

sanura
Download Presentation

Hyperlinks, Lists, Hotspots, and Internal Styles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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!

More Related