black goose bistro l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Black Goose Bistro PowerPoint Presentation
Download Presentation
Black Goose Bistro

Loading in 2 Seconds...

play fullscreen
1 / 21

Black Goose Bistro - PowerPoint PPT Presentation


  • 261 Views
  • Uploaded on

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)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Black Goose Bistro' - armen


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
black goose bistro

Black Goose Bistro

Creating a Web page with HTML code

files you will need
Files You Will Need:

Black Goose Bistro Logo

(located in bistro / images )

notepad
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
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

slide5

Select Save As. Save the File as index.html

  • Locate the folder titled Bistro
adding basic structure
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 …

slide7

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!

defining text elements
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 …

slide10

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!

emphasize text
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 …

slide13

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!

adding an image
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 …

slide16

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!

adding a style sheet
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 sheet19
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