Black Goose Bistro
advertisement
Black Goose Bistro
Creating a Web page with HTML code
Files You Will Need:
Black Goose Bistro Logo
(located in bistro / images )
Notepad
• Click on the Start Menu and navigate to
Notepad (it is in Accessories)
• Clicking on Notepad will open a new window,
and you’re ready to start typing.
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
• Select Save As. Save the File as index.html
• Locate the folder titled Bistro
Adding Basic Structure
• Put the entire document in an HTML root element by
adding an <html> start tag at the very beginning and
an end </html> tag at the end of the text.
• Create the document head that contains the title of
the page. Insert <head> and </head> tags before
the content. Within the head element, add the title,
“Black Goose Bistro,” surrounded by the opening
and closing <title>tags.
• Define the body of the document by wrapping the
content in <body> and </body> tags.
So, It will look like …
<html>
<head>
<title> Black Goose Bistro</title>
</head>
<body>
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
</body>
</html>
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 <h1>, at the beginning of the line and the closing
tag </h1> at the end. (if you haven’t done so already)
• This page also has three subheads. Mark them up as Heading
2 or h2. Put the opening tag <h2>, at the beginning of the line
and the closing tag </h2> at the end. Ex. <h2>The
Restaurant</h2>.
• Each h2 element is followed by a brief paragraph of text, so
mark them up as a paragraph <p> element as an opening tag
before the paragraph and </p> as an ending tag after the
paragraph.
So, It will look like …
<html>
<head>
<title> Black Goose Bistro</title>
</head>
<body>
<h1>Black Goose Bistro</h1>
<h2>The Restaurant</h2>
<p>The Black Goose Bistro offers casual lunch and dinner fare in a hip
atmosphere.</p>
<h2>Catering Services</h2>
<p>You have fun... we'll handle the cooking. Black Goose Catering can handle events
from snacks for bridge club to elegant corporate fundraisers.</p>
<h2>Location and Hours</h2>
<p>Seekonk, Massachusetts;
Monday through Thursday 11 am to 9pm, Friday and Saturday, 11am to midnight</p>
</body>
</html>
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 <em>
<em>we’ll handle the cooking.</em>
So, It will look like …
<html>
<head>
<title> Black Goose Bistro</title>
</head>
<body>
<h1>Black Goose Bistro</h1>
<h2>The Restaurant</h2>
<p>The Black Goose Bistro offers casual lunch and dinner fare in a hip
atmosphere.</p>
<h2>Catering Services</h2>
<p>You have fun... <em>we'll handle the cooking</em>. Black Goose Catering can
handle events from snacks for bridge club to elegant corporate fundraisers.</p>
<h2>Location and Hours</h2>
<p>Seekonk, Massachusetts;
Monday through Thursday 11 am to 9pm, Friday and Saturday, 11am to midnight</p>
</body>
</html>
Adding an Image
• Insert the image at the beginning of the first-level heading by
typing in the img element and its attributes.
– Type <h1>< img alt="Black Goose logo"
src="file:///F:/Bistro/images/blackgoose.gif">Black Goose
Bistro</h1> your flash drive driver (j:/)
So, It will look like …
<html>
<head>
<title> Black Goose Bistro</title>
</head>
<body>
<h1> < img alt="Black Goose logo"
src="file:///F:/Bistro/images/blackgoose.gif">Black Goose Bistro Black Goose
Bistro</h1>
<h2>The Restaurant</h2>
<p>The Black Goose Bistro offers casual lunch and dinner fare in a hip
atmosphere.</p>
<h2>Catering Services</h2>
<p>You have fun... <em>we'll handle the cooking</em>. Black Goose Catering can
handle events from snacks for bridge club to elegant corporate fundraisers.</p>
<h2>Location and Hours</h2>
<p>Seekonk, Massachusetts;
Monday through Thursday 11 am to 9pm, Friday and Saturday, 11am to midnight</p>
</body>
</html>
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: <head>
<title>Black Goose Bistro</title>
<style type= “text/css”>
</style>
</head>
Adding a Style Sheet
• Type the following style rules within the style element.
<style type="text/css">
body{
background-color:#c2a7f2;
font-family: sans-serif;
}
h1{
color:#2a1959;
}
h2{
color:#474B94;
font-size:1.2em;
}
h2, p{
margin-left:120px;
}
</style>
