1copyright © prentice hall 2000 writing your own web page chapter 9 using html or frontpage
TRANSCRIPT
1Copyright © Prentice Hall 2000
Writing Your Own Web Page
Chapter 9Chapter 9
Using HTML or FrontPageUsing HTML or FrontPage
2Copyright © Prentice Hall 2000
Before You Start
• This chapter offers beginning This chapter offers beginning instruction ininstruction in– HyperText Markup Language (HTML)HyperText Markup Language (HTML)– Microsoft FrontPage 2000.Microsoft FrontPage 2000.
3Copyright © Prentice Hall 2000
Requirements
• Writing Vehicle - a software tool to Writing Vehicle - a software tool to write HTML codewrite HTML code
• Browser - to test the code and Browser - to test the code and later access the serverlater access the server
• Server - to test links to other sites.Server - to test links to other sites.
4Copyright © Prentice Hall 2000
Where We Are Headed
• Use HTML to create a simple pageUse HTML to create a simple page• Expand to make a resume using Expand to make a resume using
HTMLHTML• Incorporate more tags as the HTML Incorporate more tags as the HTML
is writtenis written• Eventually change format to Eventually change format to
FrontPage and then to a more FrontPage and then to a more complex example.complex example.
5Copyright © Prentice Hall 2000
The Basic Tags
• HTML consists of HTML consists of a set of a set of commands, or commands, or tagstags
• Tags tell the Tags tell the browser how to browser how to display the display the information information providedprovided
<HTML> </HTML><HEAD> </HEAD><TITLE> </TITLE><BODY> </BODY><Hx> </Hx><P> </P><BR><STRONG>
</STRONG><CENTER> </CENTER>
6Copyright © Prentice Hall 2000
Document Tags
• Very first tag must be <HTML>, Very first tag must be <HTML>, very last tag </HTML>very last tag </HTML>
• Immediately following HTML Immediately following HTML command is command is head tag pairhead tag pair, , <HEAD> and </HEAD><HEAD> and </HEAD>– Encloses <TITLE> and </TITLE>, Encloses <TITLE> and </TITLE>,
which create title in browser’s title which create title in browser’s title barbar
7Copyright © Prentice Hall 2000
Document tags
<HTML><HEAD>
<TITLE> Test Title</TITLE>
</HEAD><BODY></BODY>
</HTML>
• Following HEAD Following HEAD section is section is body body tag pairtag pair, , <BODY> and <BODY> and </BODY></BODY>
• Tags paired Tags paired within other within other tags are tags are nestednested..
8Copyright © Prentice Hall 2000
Text Structure Tags
• All tags from this point All tags from this point forward belong between forward belong between BODY tagsBODY tags
• Heading tagsHeading tags - come - come in pairs, six text sizes, in pairs, six text sizes, larger to smaller larger to smaller – (<H1> and </H1> to ...(<H1> and </H1> to ...– <H6> and </H6>)<H6> and </H6>)
<BODY>
<H1> Biggest Heading </H1>
<H6> Smallest Heading </H6>
</BODY>
9Copyright © Prentice Hall 2000
Text Structure Tags
<P>Paragraph one
</P><P>
Line one in Paragraph one <BR>
Line two in Paragraph two <BR></P>
• Paragraph tagsParagraph tags - - mark an HTML mark an HTML paragraph on a paragraph on a web pageweb page
• Line break tagLine break tag - - Singular tag Singular tag (<BR>), ends a (<BR>), ends a line for a new one line for a new one w/out a new w/out a new paragraph.paragraph.
10Copyright © Prentice Hall 2000
A First Example
Here’s Here’s the the HTML HTML code:code:
11Copyright © Prentice Hall 2000
A First Example
Here’s the Here’s the resulting resulting page:page:
12Copyright © Prentice Hall 2000
Lists
• ListList - a basic HTML text structure - a basic HTML text structure• Unordered listUnordered list - a.k.a. bulleted list. - a.k.a. bulleted list.
– Tags: <UL>, </UL> Tags: <UL>, </UL>
• Ordered listOrdered list - a numbered list. - a numbered list.– Tags: <OL>, </OL>Tags: <OL>, </OL>
• Both varieties of list are preceded Both varieties of list are preceded by single by single list item taglist item tag, <LI>., <LI>.
13Copyright © Prentice Hall 2000
Lists
• Here’s a list in HTML:Here’s a list in HTML:
14Copyright © Prentice Hall 2000
Lists
• Here’s the resulting page:Here’s the resulting page:
15Copyright © Prentice Hall 2000
Improving the Appearance of the Page
• There are many ways to alter There are many ways to alter the appearance of your page.the appearance of your page.
• A list of common tags follows:A list of common tags follows:
16Copyright © Prentice Hall 2000
Style Tags
Logical style tagsLogical style tags - let the browser - let the browser display text its own way. display text its own way. – Example: instead of straight-out Example: instead of straight-out
italics tags, there are italics tags, there are emphasis tagsemphasis tags <EM>, </EM> and <EM>, </EM> and strong emphasis strong emphasis tagstags <STRONG>, </STRONG> <STRONG>, </STRONG> instead of bold tagsinstead of bold tags
17Copyright © Prentice Hall 2000
Style Tags
Physical style tagsPhysical style tags - what most - what most people prefer to use. people prefer to use. – Tell the browser exactly how text Tell the browser exactly how text
should be displayed. (<B> Bold and should be displayed. (<B> Bold and <I> Italic tags). <I> Italic tags).
18Copyright © Prentice Hall 2000
Enhancing the First Example
• You can see some changes in the You can see some changes in the HTML code.HTML code.
• The first heading has been The first heading has been centered.centered.
• The second heading has been The second heading has been centered, made italic.centered, made italic.
19Copyright © Prentice Hall 2000
Enhancing the First Example
• The plays have been put in an The plays have been put in an unordered list and made boldface.unordered list and made boldface.
• The paragraph and break tags The paragraph and break tags were removed from the group of were removed from the group of plays, the code is saved.plays, the code is saved.
20Copyright © Prentice Hall 2000
Enhancing the First Example
• Here’s the Here’s the revised revised HTML:HTML:
21Copyright © Prentice Hall 2000
Enhancing the First Example
• Here’s Here’s the the revised revised page:page:
22Copyright © Prentice Hall 2000
The Resume Example
• HTML example for Computer HTML example for Computer Science student’s resume. Science student’s resume.
• The HTML includes tags you’ve The HTML includes tags you’ve seen already plus,seen already plus,
• Image and link tags, the next two Image and link tags, the next two topics.topics.
23Copyright © Prentice Hall 2000
The Resume Example
• Here’s the Here’s the HTML:HTML:
24Copyright © Prentice Hall 2000
The Resume Example
• Here’s the Here’s the page:page:
25Copyright © Prentice Hall 2000
Obtaining Images
• Images can be downloaded, or Images can be downloaded, or saved to disk, from sites that offer saved to disk, from sites that offer free images.free images.
• Images can be scanned in via Images can be scanned in via scanner to a disk file or a copy scanner to a disk file or a copy service can do this.service can do this.
• Images can be personally created Images can be personally created through software.through software.
26Copyright © Prentice Hall 2000
Image File Formats
• .GIF.GIF and and .JPG.JPG are the most are the most common Internet graphic formats.common Internet graphic formats.
• GIF - short for GIF - short for Graphic Graphic Interchange FormatInterchange Format
• JPG - short for JPG - short for Joint Photographic Joint Photographic Experts GroupExperts Group
27Copyright © Prentice Hall 2000
Image File Formats
• If patent problems arise, GIF files If patent problems arise, GIF files will be replaced by will be replaced by PNGPNG, or , or Portable Network GraphicsPortable Network Graphics
28Copyright © Prentice Hall 2000
The Image Tag
• Inline imageInline image - an image - an image referenced right in, and whose file referenced right in, and whose file is loaded with the HTML codeis loaded with the HTML code
• An image can be included in a An image can be included in a page with the page with the single image tagsingle image tag, , <IMG>.<IMG>.
29Copyright © Prentice Hall 2000
The Image Tag
• Within the image tag must be Within the image tag must be SRCSRC, which stands for , which stands for sourcesource, the , the location of an image.location of an image.– Example: <IMG SRC=“JJMphoto.JPG”>Example: <IMG SRC=“JJMphoto.JPG”>
• Other attribute - ALT, alternative Other attribute - ALT, alternative text.text.
30Copyright © Prentice Hall 2000
Image Sizing and Placement
• HEIGHT and WIDTH are attributes HEIGHT and WIDTH are attributes of the <IMG> tag.of the <IMG> tag.
• Most browsers will stretch the Most browsers will stretch the image to fit the specified HEIGHT image to fit the specified HEIGHT and WIDTHand WIDTH
31Copyright © Prentice Hall 2000
Image Sizing and Placement
• The <IMG> tag has an attribute The <IMG> tag has an attribute called ALIGN, which lets you align called ALIGN, which lets you align the text with an adjacent image.the text with an adjacent image.
32Copyright © Prentice Hall 2000
Image Sizing and Placement
You can align at the top (TOP):You can align at the top (TOP):
33Copyright © Prentice Hall 2000
Image Sizing and Placement
You can align in the middle You can align in the middle (MIDDLE):(MIDDLE):
34Copyright © Prentice Hall 2000
Image Sizing and Placement
You can align at the bottom You can align at the bottom (BOTTOM):(BOTTOM):
35Copyright © Prentice Hall 2000
Image Sizing and Placement
You can also align at a specific You can also align at a specific location (LEFT, RIGHT, HSPACE, location (LEFT, RIGHT, HSPACE, VSPACE)VSPACE)
36Copyright © Prentice Hall 2000
Adding Links
• The power of the Internet is in The power of the Internet is in links.links.
• You can link to any site and vice You can link to any site and vice versa.versa.
• Links can divide a page into more Links can divide a page into more manageable sections.manageable sections.
37Copyright © Prentice Hall 2000
The Anchor Tag
• Links are accomplished through Links are accomplished through the anchor tag pair, <A> and the anchor tag pair, <A> and </A>.</A>.
• Key attribute of this tag is HREF, Key attribute of this tag is HREF, indicating a link destination.indicating a link destination.
38Copyright © Prentice Hall 2000
The Anchor Tag
• The anchor tag includes the text that a The anchor tag includes the text that a visitor will click to go to the intended visitor will click to go to the intended page.page.– Example: <A Example: <A
HREF=“http://www.kodak.com”>Kodak</AHREF=“http://www.kodak.com”>Kodak</A> film> film
– Becomes: Becomes: KodakKodak film film
39Copyright © Prentice Hall 2000
Final Touches to the Resume
• Here are two additions to Joel’s Here are two additions to Joel’s resume.resume.– Means of electronically contacting Means of electronically contacting
Joel, namely, his E-mail address.Joel, namely, his E-mail address.– An optional background comprised of An optional background comprised of
a single image repeated like a single image repeated like bathroom tile, rather than a flat color. bathroom tile, rather than a flat color.
40Copyright © Prentice Hall 2000
Final Touches to the Resume
• One possibility is to use the One possibility is to use the attribute BGCOLOR with a six-digit attribute BGCOLOR with a six-digit hex code to specify color.hex code to specify color.
• Another is the BACKGROUND Another is the BACKGROUND attribute, which creates an attribute, which creates an attractive background texture. attractive background texture.
41Copyright © Prentice Hall 2000
Authoring Software
• This type of software lets you This type of software lets you create web pages without create web pages without requiring any knowledge of HTML.requiring any knowledge of HTML.
• For the examples given after this For the examples given after this point, Microsoft FrontPage 2000 point, Microsoft FrontPage 2000 will be used.will be used.
42Copyright © Prentice Hall 2000
Getting Started in FrontPage
FrontPage calls a web site a FrontPage calls a web site a webweb; a ; a web is a set of related web pages. web is a set of related web pages. Webs and their pages are stored Webs and their pages are stored by default in the by default in the My WebsMy Webs folder. folder.
43Copyright © Prentice Hall 2000
Getting Started in FrontPage
• Create a new web by selecting Create a new web by selecting File>New>Web.File>New>Web.
• Select Empty Web. Call it Select Empty Web. Call it HayesWeb.HayesWeb.
• Now double-click Empty Web.Now double-click Empty Web.• Now click the toolbar’s New Now click the toolbar’s New
button.button.
44Copyright © Prentice Hall 2000
FrontPage WYSIWYG
• Key the Hayes title and other lines Key the Hayes title and other lines in the sizes you want, and use in the sizes you want, and use bullets for the list of plays. bullets for the list of plays.
• Save the page as Hayes_main.Save the page as Hayes_main.• The page needs a title. Right-click The page needs a title. Right-click
the page and select Page the page and select Page properties.properties.
45Copyright © Prentice Hall 2000
FrontPage WYSIWYG
• Fill in the tile as The Hayes Fill in the tile as The Hayes Theater.Theater.
• Now click the preview button on Now click the preview button on the toolbar to see the web page as the toolbar to see the web page as it will look online.it will look online.
46Copyright © Prentice Hall 2000
Navigation and other Views
• Create three subpages: Calender, First-Create three subpages: Calender, First-Nighters, and Support. Be sure to give Nighters, and Support. Be sure to give them titles.them titles.
• Set up the Set up the Navigation viewNavigation view by clicking by clicking the Navigation button under Views.the Navigation button under Views.
• Use your mouse under Folders to drag Use your mouse under Folders to drag to the right frame first the Hayes_main to the right frame first the Hayes_main page, and then (under it) the pages to page, and then (under it) the pages to which it links. which it links.
47Copyright © Prentice Hall 2000
Adding Links in FrontPage
• Re-open Hayes_main.Re-open Hayes_main.• Click on Hayes_main where you Click on Hayes_main where you
want the link names to appear.want the link names to appear.• Select Insert>Navigation Bar and Select Insert>Navigation Bar and
accept the defaults.accept the defaults.• Save the page and preview it.Save the page and preview it.
48Copyright © Prentice Hall 2000
Page Tabs and Loading Time
• The current page tab in use is the The current page tab in use is the Normal tabNormal tab, or WYSIWYG mode., or WYSIWYG mode.
• The The HTML tabHTML tab will show you the will show you the HTML code for Hayes_main.HTML code for Hayes_main.
• The The Preview tabPreview tab will show you how will show you how the page will look in a Web browser.the page will look in a Web browser.
• At the lower right of the page is the At the lower right of the page is the estimated loading timeestimated loading time..
49Copyright © Prentice Hall 2000
Themes
• ThemeTheme - a set of design elements, color - a set of design elements, color schemes applied to a pageschemes applied to a page
• To add a banner, click on the page near To add a banner, click on the page near the top line (to indicate the location where the top line (to indicate the location where you want the banner to be inserted). you want the banner to be inserted).
• Click Insert>Page Banner and insert the Click Insert>Page Banner and insert the banner text.banner text.
• To insert a theme, go to Format>Theme To insert a theme, go to Format>Theme and find one you like.and find one you like.
50Copyright © Prentice Hall 2000
Page Templates
• The Hayes example was simple, The Hayes example was simple, but has one large flaw: there is but has one large flaw: there is only one, full-width column of text, only one, full-width column of text, with no margins.with no margins.
• The following sections cover page The following sections cover page templates in FrontPage.templates in FrontPage.
51Copyright © Prentice Hall 2000
Page Template Selections
• Page templates - pre-designed Page templates - pre-designed pages with page settings, pages with page settings, formatting, and elements.formatting, and elements.
52Copyright © Prentice Hall 2000
Page Template Example
• Select File>New>Page. Select File>New>Page. • Select the page template you Select the page template you
desire.desire.• Make a new web called OrcaWeb. Make a new web called OrcaWeb.
Plot sub-pages: Orca facts, location Plot sub-pages: Orca facts, location maps, photo gallery, and links.maps, photo gallery, and links.
53Copyright © Prentice Hall 2000
Page Template Example
• Create a page with the format Create a page with the format “one-column body with two “one-column body with two sidebars”.sidebars”.
• Save this page as Orca_main.Save this page as Orca_main.
54Copyright © Prentice Hall 2000
Page Template Example
• Replace the placeholder text. You Replace the placeholder text. You can copy text from some other can copy text from some other source if you wish.source if you wish.
• Click on one of the link-text Click on one of the link-text locations, then click the Hyperlink locations, then click the Hyperlink button on the standard toolbar.button on the standard toolbar.
55Copyright © Prentice Hall 2000
Page Template Example
• Click the matching saved-page and Click the matching saved-page and then click OK. then click OK.
• Once all links are created, delete Once all links are created, delete excess placeholder text.excess placeholder text.
56Copyright © Prentice Hall 2000
Page Template Example
• Move Move orca closeup.jpgorca closeup.jpg to to theOrcaWeb’s Images folder. theOrcaWeb’s Images folder. – Be sure to click View>Refresh.Be sure to click View>Refresh.
• Click the sunflower image, click Click the sunflower image, click Insert Picture from File, and then Insert Picture from File, and then double-click on orca-closeup.jpg.double-click on orca-closeup.jpg.
57Copyright © Prentice Hall 2000
Page Template Example
• Save the page.Save the page.• Enlarge the main body text and Enlarge the main body text and
make link text boldface.make link text boldface.
58Copyright © Prentice Hall 2000
Frames
• FramesFrames - rectangular areas that - rectangular areas that hold separate pages.hold separate pages.
• A collection of frames can be A collection of frames can be displayed in just one window called displayed in just one window called a a framesetframeset. .
59Copyright © Prentice Hall 2000
Frame Templates
• Select File>New>Page, and click Select File>New>Page, and click the Frames tab.the Frames tab.
• Select a frame template.Select a frame template.• Some of the frame templates Some of the frame templates
include a frame called include a frame called contentscontents..– The contents frame contains links to The contents frame contains links to
subpages that will be shown, one at a subpages that will be shown, one at a time, in the time, in the target frametarget frame..
60Copyright © Prentice Hall 2000
Orca Redux
• Use the frame template called Use the frame template called “Banner and Contents”,“Banner and Contents”,
• Make seven pages for the target Make seven pages for the target frame at right, the Welcome page, frame at right, the Welcome page, and the six pages - Orca facts, and the six pages - Orca facts, maps, tracking, photo gallery, maps, tracking, photo gallery, Adopt an Orca, and Orca Links. Adopt an Orca, and Orca Links.
61Copyright © Prentice Hall 2000
Adding Pages to the Frames
• Click a frame, then click Click a frame, then click Frames>Frames Properties.Frames>Frames Properties.
62Copyright © Prentice Hall 2000
Adding Pages to the Frames
• From here you can:From here you can:– select the file name of the initial page for select the file name of the initial page for
the framethe frame– change the width of the frame marginschange the width of the frame margins– decide whether scroll bars are needed for decide whether scroll bars are needed for
the frame (If Needed, Never, or Always)the frame (If Needed, Never, or Always)
• Save the page as Orca_main_frame. Save the page as Orca_main_frame.