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 <p> element as an opening tag before the paragraph and </p> 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> <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. </p> <h 2>Catering Services</h 2> <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> <h 2>Location and Hours</h 2> <p>Seekonk, Massachusetts; Monday through Thursday 11 am to 9 pm, Friday and Saturday, 11 am to midnight</p> </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 <em>we’ll handle the cooking. </em> 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> <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. </p> <h 2>Catering Services</h 2> <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> <h 2>Location and Hours</h 2> <p>Seekonk, Massachusetts; Monday through Thursday 11 am to 9 pm, Friday and Saturday, 11 am to midnight</p> </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> <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. </p> <h 2>Catering Services</h 2> <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> <h 2>Location and Hours</h 2> <p>Seekonk, Massachusetts; Monday through Thursday 11 am to 9 pm, Friday and Saturday, 11 am to midnight</p> </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!
- Slides: 21