Starting BBEdit (Notepad) and Opening an HTML File Open the Public Folder Start Notepad or BBEdit Click File on the menu bar, and then click Open In the Project 7 folder, open menu.htm

Adding an Embedded Style Sheet

Setting the Paragraph Style P {text-indent: 8pt}  Indents the first word of each paragraph 8 points from the left edge of the browser window You can specify a fixed value in inches, centimeters, or pixels You can specify a relative value for a text indent using a percentage

Setting a Style for All Links Text-decoration  Blink  Line-through  Overline  Underline You can apply multiple text-decorations: {text-decoration: underline overline}

Setting a Style for All Links Font-family property  Allows you to define a font for use in a Web page  Best to specify more than one font-family value {font-family: “Times New Roman”,Verdana} Font-size property Color property

Adding an Embedded Style Sheet Click line 4 and then press the ENTER key

Enter the CSS code on the following slide

Saving an HTML File Click “Save As” and save your changes to menu.htm Click the Save button in the Save As dialog box

Viewing an HTML File in the Browser Start your browser Open index.htm

Printing an HTML File Click the Notepad button on the taskbar or click on BBEdit in the dock Click File on the menu bar and then click Print

Adding an External Style Sheet Ideal for giving multiple pages in a Web site a common look Two-part process  Create the external style sheet  Link the style sheet to the Web page tag

Setting a Body Style BODY {margin:8pt}  The margin is the amount of transparent space between elements on the page  Can set margins for individual sides  Can be set as a fixed or relative length Background-color property  Sets the background color of the Web page Can be referenced by RGB code, hexadecimal, or color name

Setting a Table Style TABLE {font-family: Verdana, Garamond; font-size: 11pt } TH {color: navy} Oblique font  Font style that is slanted to the right by the browser when the font itself does not provide an italic version

Creating an External Style Sheet If necessary, click the Notepad button on the taskbar or BBEdit in the dock. Click File on the menu bar and then click New Enter the CSS code on the following slide

Creating an External Style Sheet Click File on the menu bar and then click Save As. Type styles1.css in the File name text box.

Linking to an External Style Sheet You must include a link tag in each of the pages to which you wish to apply the external style sheet

Linking to an External Style Sheet If necessary, click the Notepad button on the taskbar or BBEdit in the dock Click Open and open calendar.htm

Linking to an External Style Sheet Click line 4 and then press the ENTER key Type and then press the ENTER key

Saving and Printing an HTML File Save the file with calendar.htm as the file name Click File on the menu bar and then click Print

Page without External Style Sheet Page with External Style Sheet

Adding a Tag and Saving the Remaining HTML Files Open contact.htm in the the Project 7 folder Click line 4 and then press the ENTER key

Adding a Tag and Saving the Remaining HTML Files Type and then press the ENTER key Click File on the menu bar and then click Save As. Type contact.htm in the File name text box. Click the Save button in the Save As dialog box

Adding a Tag and Saving the Remaining HTML Files One at a time, open the remaining HTML files, services.htm, staff.htm, and welcome.htm, and repeat the last three steps, replacing the file name appropriately