1 / 21

Black Goose Bistro

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)

armen
Télécharger la présentation

Black Goose Bistro

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 you’re 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 <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 …

  7. 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 9pm, Friday and Saturday, 11am to midnight </body> </html> 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 <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 …

  10. Notepad / Text Edit View <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> 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 <em> <em>we’ll handle the cooking.</em> So, It will look like …

  13. Notepad / Text Edit View <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> 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 <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 …

  16. Notepad / Text Edit View <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> 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: <head> <title>Black Goose Bistro</title> <style type= “text/css”> </style> </head>

  19. 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> pg 66

  20. Web BrowserView

  21. You will be adding more toyour Bistro page in upcoming lessons!

More Related