WEB PAGE DESIGN FOR CHIARVELLE PIZZA Open Notepad Click on Start Point to Accessories Point to Notepad Click Notepad Click the Maximize button Click Edit

WEB PAGE DESIGN FOR CHIARVELLE PIZZA

Open Notepad

Click on Start

Point to Accessories

Point to Notepad

Click Notepad

Click the Maximize button

Click Edit

Click Wordwrap

Type <HTML>

Press ENTER

Type <TITLE> Chiarvalle Pizza Home Page </TITLE>

Press ENTER

Type <META name=“description” content = “Chiarvalle Pizza is a family owned Italian Restaurant specializing in original Italian pizza recipes.”>

Type </HEAD>

Press ENTER

Type <BODY>

Press the ENTER key twice

Type </BODY>

Press the ENTER key

Type </HTML>

Heading server to separate text and introduce new topics Web pages. The sizes range from:

<H1> through <H6>

With H1 being the largest

One method of maintaining a consistent look to yourWeb site is to use the same sized heading for the Same level of topic.

Six sizes of heading tags are used when entering headings.The <H1> tag is used for the main heading on a Web page because it is the largest sized heading.

The main heading may contain the name of a business, or school, or the main idea of that Web page.

Click the blank line below <BODY> type

<H1> Chiarvelle Pizza </H1>

Press ENTER

Web pages generally contain a significant amount of text, most of which will be in paragraph format. The <P> tagIs one of the few tags that did not originally have a Corresponding ending tag. Newer versions of HTML Have added a </P> tag.

When the browser finds a <P> tag, it starts a new line and adds some additional vertical space between the line that it just displayed and the following line. This gives enough of a break in the text to indicate that there is a new paragraph. It is not a good idea to type large sections of text without having paragraph breaks.

Peform the following step to enter text in paragraphFormat in your Web page:

Type <P>Chiarvelle Pizza has been in business for the Past 50 years. We specialize in unique pizzas and other Italian dishes. Located on Main Street, Chiarvalle Pizza is proud to be on the city’s “Ten Best Restaurants” list for the past seven years. Call 1-219-555-2510 for Reservations or orders today! </P>

Press ENTER

Another tag that is used to break text is the <BR> tag. This tag breaks a line of text exactly at the point at which the <BR> displays. As soon as the browser encounters a <BR> tag, it starts a new line with the text that follows the tag.

We will use this tag in late lessons.

CREATING A LIST

Lists structure your text in an outline format, which helps itemize information. Lists can be of two types:

Unordered lists – also known as bulleted lists. Ordered lists – also known as numbered lists.

The <UL> and </UL> tags must be at the beginning and end of an unordered or bulleted list.

The <OL> and </OL> tags are used at the beginning andEnd of an ordered or numbered list.

The format without a tag chosen is <UL> or <OL>.

To change the default bullet or number type, you use the TYPE attribute within the <OL> or <UL> tags. The tag would be <UL TYPE = “ “> or <OL TYPE = “ “ > where the selected type is found within the quotes

e.g. <UL TYPE = “square”>

The <LI> and </LI> tags define a list item within both ordered and unordered lists.

After you have defined the type of list you want (ordered or unordered) , you then willprecede each list item using the <LI> tagand end each list item with the </LI> tag.

Each item in the list must have the <LI> tagIn front of it and the </LI> tag at the end.

Type <H2> Our services include: </H2>

Press ENTER

Type <UL>

Press ENTER

Type <LI> A 100 seating capacity restaurant </LI>

Press ENTER

Type <LI> Take out orders </LI>

Press ENTER

Type <LI>Delivery services at no charges </LI>

Press ENTER

Type </UL> as the tag

Lists are useful for information that is not suited in Paragraph format.

If you have a list of steps or items, it is appropriate to use a bulleted list or an ordered list.

You now will view the Web page in your browser to see what the Web page looks like up to this point.

It is a good idea to view the Web page periodically as you develop it so you can see the effect of the HTML tags on the text.

If you continue developing without ever viewing the page, you could be using tags that do not give the desired effect. In order to view your Web page in your browser, you first must save the HTML file.

Saving the HTML file :

Saving the HTML file is necessary so the correspondingWeb page can be displayed using a browser. HTML filesMust end with an extension of .htm or .html.

For the projects in this class you will always use .htm

Generally, the home page of a Web site is called index.html or index.htm. Many service providers defaultto this name when selecting the first page of a Web site to display.

Click File on the menu bar and point to Save As

Navigate to My Documents in the Save In box

Type page1.htm in the file name text box

Click Save

Using a Browser to View a Web Page

After you have saved the HTML file, you can Use the browser to view your Web page. The HTML file displays in the browser just as itWould if the file was published to the Web.

To Start Your Browser

Click the Start Button on the taskbarPoint to Programs on the Start menuPoint to Internet Explorer on the Programs menuPoint to Internet Explorer on the browser submenuClick Internet ExplorerClick the Maximize button

To Open a Web Page in Your Browser

A browser allows you to open a file located on yourPC and have full browsing capabilities. It gives youThe same look and feel as if you actually hadPublished your Web pages to a Web server or theInternet.

Click the Address BarThe Current URL is highlighted in the Address barType c:\page1.htm in the Address text boxPress the ENTER keyThe browser displays the Web page, page1.htm

The Web page displays as it would if it had beenPublished to the Web. Viewing your Web pagesPeriodically during development will ensure that the Web pages will display in the manner you intend.

All the information between the <BODY> AND </BODY> tags now displays in the browser window.

This is the body of the Web page.

The heading, Chiarvalle Pizza, is larger because you Tagged it as <H!> whereas the heading, Our services Include; was tagged was <H2> and therefore smaller.

Your paragraph of text displays in the normal font sizeBecause you did not specify otherwise.

You did not specify the type of bullet you wanted in the Bulleted list, so the default was used,