slide1 n.
Download
Skip this Video
Download Presentation
WEB PAGE DESIGN FOR CHIARVELLE PIZZA

Loading in 2 Seconds...

play fullscreen
1 / 25

WEB PAGE DESIGN FOR CHIARVELLE PIZZA - PowerPoint PPT Presentation


  • 107 Views
  • Uploaded on

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.

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 'WEB PAGE DESIGN FOR CHIARVELLE PIZZA' - clare-kinney


Download Now 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
slide1

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

slide2

Type <HTML>

Press ENTER

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

Press ENTER

slide3

Type <META name=“description” content = “Chiarvalle

Pizza is a family owned Italian Restaurant specializing

in original Italian pizza recipes.”>

slide4

Type </HEAD>

Press ENTER

slide5

Type <BODY>

Press the ENTER key twice

Type </BODY>

Press the ENTER key

Type </HTML>

slide6

Heading server to separate text and introduce new topics

Web pages. The sizes range from:

<H1> through <H6>

With H1 being the largest

slide7

One method of maintaining a consistent look to your

Web 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.

slide8

Click the blank line below <BODY> type

<H1> Chiarvelle Pizza </H1>

Press ENTER

slide9

Web pages generally contain a significant amount of text,

most of which will be in paragraph format. The <P> tag

Is 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.

slide10

Peform the following step to enter text in paragraph

Format 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

slide11

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.

slide12

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 and

End of an ordered or numbered list.

slide13

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

slide14

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 will

precede each list item using the <LI> tag

and end each list item with the </LI> tag.

Each item in the list must have the <LI> tag

In front of it and the </LI> tag at the end.

slide15

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

Press ENTER

Type <UL>

Press ENTER

slide16

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

slide17

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.

slide18

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.

slide19

Saving the HTML file :

Saving the HTML file is necessary so the corresponding

Web page can be displayed using a browser. HTML files

Must 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 default

to this name when selecting the first page of a Web site

to display.

slide20

Click File on the menu bar and point to Save As

Navigate to My Documentsin the Save In box

Type page1.htm in the file name text box

Click Save

slide21

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 it

Would if the file was published to the Web.

slide22

To Start Your Browser

Click the Start Button on the taskbar

Point to Programs on the Start menu

Point to Internet Explorer on the Programs menu

Point to Internet Explorer on the browser submenu

Click Internet Explorer

Click the Maximize button

slide23

To Open a Web Page in Your Browser

A browser allows you to open a file located on your

PC and have full browsing capabilities. It gives you

The same look and feel as if you actually had

Published your Web pages to a Web server or the

Internet.

slide24

Click the Address Bar

The Current URL is highlighted in the Address bar

Type c:\page1.htm in the Address text box

Press the ENTER key

The browser displays the Web page, page1.htm

The Web page displays as it would if it had been

Published to the Web. Viewing your Web pages

Periodically during development will ensure that the

Web pages will display in the manner you intend.

slide25

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 size

Because you did not specify otherwise.

You did not specify the type of bullet you wanted in the

Bulleted list, so the default was used,