Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 • <LINK> 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 <LINK REL=stylesheet TYPE=“text/css” HREF=“style1.css”> 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 <LINK REL=stylesheet TYPE=“text/css” HREF=“style1.css”> 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 <LINK> 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 <LINK> Tag and Saving the Remaining HTML Files • Type <LINK REL=stylesheet TYPE=“text/css” HREF=“style1.css”> 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 <LINK> 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