 Chapter 4

 External Style Sheet o Used to define styles for multiple pages in a Web site. o Also called Linked Style Sheets o Crete the style sheet in a separate file with a.css extension

 Tables o Allow you to organize information into rows and columns. o Create newspaper-type columns of text or structured lists on information. o Row: Horizontal line o Column: vertical line o Cell: intersection of row and column 2 types: Heading or Data Heading: bold & center-aligned Data: normal text left-aligned

 Table border: o the line that encloses the perimeter of the table.  Table header: o same as a cell heading; bold and centered text.  Table caption: o descriptive text located above or below the table.

Sketch your table BEFORE you code!

TagFunction Start and end of table All other table tags are inserted within these Start and end of a row Row consist of heading or data cells Start and end of a table heading (called heading cell) Default to bold, center-aligned Start and end of a data cell Defaults to normal text, left-aligned

TagAttributeFunction border=“1”;Adds a 1 pt border on the table * border-spacing: 5px;5px between cells padding: 5px;5px spacing between border & contents None **colspan=“2”Spans text over 2 columns rowspan=“2”Spans text over 2 rows *border attribute can only have a border of “1” or “ “. ** can also include styles effecting the look of text (color, size, weight, etc.)

ValueDescription h-shadowRequired. Position of the horizontal shadow. Negative values are allowed. Positive = right of box, Negative = left of box v-shadowRequired. Position of the vertical shadow. Negative values are allowed. Positive = below the box, Negative = above the box blurOptional. The blur distance. 0 = sharp, higher the number = more blur spreadOptional. The size of the shadow colorOptional. The color of the shadow insertChanges the shadow from an outer shadow to inner one.

h-shadow v-shadowspreadcolor 1 st shadow 2 nd shadow

 2 step process o Creating the style sheet o Linking it to the desired pages  The style tags are not needed  For each page you want to link you need to put a tag in the section:

 Open a default document with the tags: o Section and Article tags not needed. o Title is: Oceanside Hotel and Sports Club  Add a div style to align text to the center  Insert the image oceansidelogo.jpg with the following attributes: o Width: 866Alt: Oceanside logo o Height: 259

After the alt text insert the following style: style=“box-shadow: 10px 10px 12px #888888” /> Close the div

 You will need to break and then declare a table with no border style  You will do one long row with 4 images as links and a “pipe” to separate graphics.

| | |

Oceanside Hotel and Sports Club offers luxury hotel accommodations and premier golf and tennis facilities together in one unique location. Year -round recreational activities are perfect for families to enjoy together. Oceanside Hotel offers an exclusive golf experience for you and your business colleagues.

Explore our website to learn more about our golf and tennis programs, or to review our dining menu. Thinking about visiting? Call us at (999)555-OCEAN or send an to

 Link to CSS sheet Link to CSS sheet

 Open Oceanside.html  Add the following tag in the section:

 Open oceanside.html.  Copy from the very top of the document down through the menu table. Do NOT copy the paragraphs.  Paste into the new document that you just created.  In the title, add ~Golf after the word Club o Don’t forget to close the tags!  Save the new document as: golf.html

ActivitiesDays and TimesRates Regular playWednesday through Saturday,7am – 5 pm$40.00/round Shotgun playSundays, 7am – 3 pm$25.00/round Private lessonsSunday through Friday,8 am – 2 pm$30.00/hour Group lessonsMondays and Thursdays, 8 am – noon$20.00/hour Open a table How many are there? How many do you need? How many are on each row? Close your table

 Click the tag on the Regular play row.  Alter it so it adds the class “stripe” o  Do the same for the Private lessons row.

 Open tennis.html  Add the link code in the section to link the Style sheet to the page.  Update the table so it uses the “Stripe” class in every other row as the one on golf.html did.  Add the link code but do not add the classes to dining.html

 On dining.html, highlight the green comment that reads: o and add the following html to insert a caption o Additional menu items available upon request

 Find: o Add the following html to create a new table heading that spans 3 rows Lunch Menu The allows a break without putting a blank line between Lunch & Menu. Find: Add similar html to denote the Dinner Menu.

 In the tags for the BLT line and the Chicken croissant menu items add the html to link it to the Bolder class: o