Black Goose Bistro Creating a Web page with

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. p g 5 5 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 9 pm, Friday and Saturday, 11 am 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 …

Notepad / Text Edit View <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 9 pm, Friday and Saturday, 11 am to midnight </body> </html>

Web Browser View

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 h 1. Put the opening tag <h 1>, at the beginning of the line and the closing tag </h 1> at the end. (if you haven’t done so already) • This page also has three subheads. Mark them up as Heading 2 or h 2. Put the opening tag <h 2>, at the beginning of the line and the closing tag </h 2> at the end. Ex. <h 2>The Restaurant</h 2>. • Each h 2 element is followed by a brief paragraph of text, so mark them up as a paragraph element as an opening tag before the paragraph and as an ending tag after the paragraph. So, It will look like …

Notepad / Text Edit View <html> <head> <title> Black Goose Bistro</title> </head> <body> <h 1>Black Goose Bistro</h 1> <h 2>The Restaurant</h 2> The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. <h 2>Catering Services</h 2> You have fun. . . we'll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. <h 2>Location and Hours</h 2> Seekonk, Massachusetts; Monday through Thursday 11 am to 9 pm, Friday and Saturday, 11 am to midnight </body> </html>

Web Browser View

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 we’ll handle the cooking. So, It will look like …

Notepad / Text Edit View <html> <head> <title> Black Goose Bistro</title> </head> <body> <h 1>Black Goose Bistro</h 1> <h 2>The Restaurant</h 2> The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. <h 2>Catering Services</h 2> You have fun. . . we'll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. <h 2>Location and Hours</h 2> Seekonk, Massachusetts; Monday through Thursday 11 am to 9 pm, Friday and Saturday, 11 am to midnight </body> </html>

Web Browser View

Adding an Image • Insert the image at the beginning of the first-level heading by typing in the img element and its attributes. – Type <h 1>< img alt="Black Goose logo" src="file: ///F: /Bistro/images/blackgoose. gif">Black Goose Bistro</h 1> your flash driver (j: /) So, It will look like …

Notepad / Text Edit View <html> <head> <title> Black Goose Bistro</title> </head> <body> <h 1> < img alt="Black Goose logo" src="file: ///F: /Bistro/images/blackgoose. gif">Black Goose Bistro</h 1> <h 2>The Restaurant</h 2> The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. <h 2>Catering Services</h 2> You have fun. . . we'll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. <h 2>Location and Hours</h 2> Seekonk, Massachusetts; Monday through Thursday 11 am to 9 pm, Friday and Saturday, 11 am to midnight </body> </html>

Web Browser View

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: #c 2 a 7 f 2; font-family: sans-serif; } h 1{ color: #2 a 1959; } h 2{ color: #474 B 94; font-size: 1. 2 em; } h 2, p{ margin-left: 120 px; } </style> pg 66

Web Browser View

You will be adding more to your Bistro page in upcoming lessons!