Black Goose Bistro

1
Black Goose Bistro

• Creating a Web page with HTML code

2
Files You Will Need
Black Goose Bistro Logo (located in ?bistro /
images )
3
Notepad

• Click on the Start Menu and navigate to Notepad
  (it is in Accessories)
• Clicking on Notepad will open a new window, and
  youre ready to start typing.

4
Entering Content

• Type the content for the home page into the new
  document in your text editor.
• Black Goose Bistro
• The Restaurant
• The Black Goose Bistro offers casual lunch and
  dinner fare in a hip atmosphere.
• Catering Services
• You have fun... we'll handle the cooking. Black
  Goose Catering can handle events from snacks for
  bridge club to elegant corporate fundraisers.
• Location and Hours
• Seekonk, Massachusetts
• Monday through Thursday 11 am to 9pm, Friday and
  Saturday, 11am to midnight

pg 55
5

• Select Save As. Save the File as index.html
• Locate the folder ?titled Bistro

6
Adding Basic Structure

• Put the entire document in an HTML root element
  by adding an lthtmlgt start tag at the very
  beginning and an end lt/htmlgt tag at the end of
  the text.
• Create the document head that contains the title
  of the page. Insert ltheadgt and lt/headgt tags
  before the content. Within the head element, add
  the title, Black Goose Bistro, surrounded by
  the opening and closing lttitlegttags.
• Define the body of the document by wrapping the
  content in ltbodygt and lt/bodygt tags.

So, It will look like
7
Notepad / Text Edit View

• lthtmlgt
• ltheadgt
• lttitlegt Black Goose Bistrolt/titlegt
• lt/headgt
• ltbodygt
• Black Goose Bistro
• The Restaurant
• The Black Goose Bistro offers casual lunch and
  dinner fare in a hip atmosphere.
• Catering Services
• You have fun... we'll handle the cooking. Black
  Goose Catering can handle events from snacks for
  bridge club to elegant corporate fundraisers.
• Location and Hours
• Seekonk, Massachusetts
• Monday through Thursday 11 am to 9pm, Friday and
  Saturday, 11am to midnight
• lt/bodygt
• lt/htmlgt

Save!
8
Web BrowserView
9
Defining Text Elements

• The first line of text, Black Goose Bistro, is
  the main heading for the page, so mark it up as a
  Heading 1 or h1. Put the opening tag lth1gt, at
  the beginning of the line and the closing tag
  lt/h1gt at the end. (if you havent done so
  already)
• This page also has three subheads. Mark them up
  as Heading 2 or h2. Put the opening tag lth2gt, at
  the beginning of the line and the closing tag
  lt/h2gt at the end. Ex. lth2gtThe Restaurantlt/h2gt.
• Each h2 element is followed by a brief paragraph
  of text, so mark them up as a paragraph ltpgt
  element as an opening tag before the paragraph
  and lt/pgt as an ending tag after the paragraph.

So, It will look like
10
Notepad / Text Edit View

• lthtmlgt
• ltheadgt
• lttitlegt Black Goose Bistrolt/titlegt
• lt/headgt
• ltbodygt
• lth1gtBlack Goose Bistrolt/h1gt
• lth2gtThe Restaurantlt/h2gt
• ltpgtThe Black Goose Bistro offers casual lunch and
  dinner fare in a hip atmosphere.lt/pgt
• lth2gtCatering Serviceslt/h2gt
• ltpgtYou have fun... we'll handle the cooking.
  Black Goose Catering can handle events from
  snacks for bridge club to elegant corporate
  fundraisers.lt/pgt
• lth2gtLocation and Hourslt/h2gt
• ltpgtSeekonk, Massachusetts
• Monday through Thursday 11 am to 9pm, Friday and
  Saturday, 11am to midnightlt/pgt
• lt/bodygt
• lt/htmlgt

Save!
11
Web BrowserView
12
Emphasize Text

• In the Catering section, emphasize that visitors
  should just leave the cooking to us. To make the
  text emphasized, mark it up in an emphasis
  element ltemgt
• ltemgtwell handle the cooking.lt/emgt

So, It will look like
13
Notepad / Text Edit View

• lthtmlgt
• ltheadgt
• lttitlegt Black Goose Bistrolt/titlegt
• lt/headgt
• ltbodygt
• lth1gtBlack Goose Bistrolt/h1gt
• lth2gtThe Restaurantlt/h2gt
• ltpgtThe Black Goose Bistro offers casual lunch and
  dinner fare in a hip atmosphere.lt/pgt
• lth2gtCatering Serviceslt/h2gt
• ltpgtYou have fun... ltemgtwe'll handle the
  cookinglt/emgt. Black Goose Catering can handle
  events from snacks for bridge club to elegant
  corporate fundraisers.lt/pgt
• lth2gtLocation and Hourslt/h2gt
• ltpgtSeekonk, Massachusetts
• Monday through Thursday 11 am to 9pm, Friday and
  Saturday, 11am to midnightlt/pgt
• lt/bodygt
• lt/htmlgt

Save!
14
Web BrowserView
15
Adding an Image

• Insert the image at the beginning of the
  first-level heading by typing in the img element
  and its attributes.
• Type lth1gtlt img alt"Black Goose
  logo"src"file///F/Bistro/images/blackgoose.gif
  "gtBlack Goose Bistrolt/h1gt your flash drive
  driver (j/)

So, It will look like
16
Notepad / Text Edit View

• lthtmlgt
• ltheadgt
• lttitlegt Black Goose Bistrolt/titlegt
• lt/headgt
• ltbodygt
• lth1gt lt img alt"Black Goose logo"src"file///F/
  Bistro/images/blackgoose.gif"gtBlack Goose Bistro
  Black Goose Bistrolt/h1gt
• lth2gtThe Restaurantlt/h2gt
• ltpgtThe Black Goose Bistro offers casual lunch and
  dinner fare in a hip atmosphere.lt/pgt
• lth2gtCatering Serviceslt/h2gt
• ltpgtYou have fun... ltemgtwe'll handle the
  cookinglt/emgt. Black Goose Catering can handle
  events from snacks for bridge club to elegant
  corporate fundraisers.lt/pgt
• lth2gtLocation and Hourslt/h2gt
• ltpgtSeekonk, Massachusetts
• Monday through Thursday 11 am to 9pm, Friday and
  Saturday, 11am to midnightlt/pgt
• lt/bodygt
• lt/htmlgt

Save!
17
Web BrowserView
18
Adding a Style Sheet

• The style element is placed inside the head of
  the document. It uses the required type
  attribute to tell the browser the type of
  information in the element (text/css is currently
  the only option).
• Type ltheadgt
• lttitlegtBlack Goose Bistrolt/titlegt
• ltstyle type text/cssgt
• lt/stylegt
• lt/headgt

19
Adding a Style Sheet

• Type the following style rules within the style
  element.
• ltstyle type"text/css"gt
• body
• background-colorc2a7f2
• font-family sans-serif
• h1
• color2a1959
• h2
• color474B94
• font-size1.2em
• h2, p
• margin-left120px
• lt/stylegt

pg 66
20
Web BrowserView
21
You will be adding more toyour Bistro page in
upcoming lessons!