250 likes | 372 Views
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.
E N D
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 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.
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> 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.
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
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 and End 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 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.
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 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.
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
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.
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
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.
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.
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,