Download PowerPoint Presentation - Starting BBEdit (Notepad) and Opening

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