1copyright © prentice hall 2000 writing your own web page chapter 9 using html or frontpage

1Copyright © Prentice Hall 2000

Writing Your Own Web Page

Chapter 9Chapter 9

Using HTML or FrontPageUsing HTML or FrontPage


Before You Start

• This chapter offers beginning This chapter offers beginning instruction ininstruction in– HyperText Markup Language (HTML)HyperText Markup Language (HTML)– Microsoft Front000.Microsoft FrontPage 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.


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.


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>


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


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


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>


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.


A First Example

Here’s Here’s the the HTML HTML code:code:


A First Example

Here’s the Here’s the resulting resulting page:page:


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


Lists

• Here’s a list in HTML:Here’s a list in HTML:


Lists

• Here’s the resulting page:Here’s the resulting page:


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:


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


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


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.



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



• Here’s the Here’s the revised revised HTML:HTML:



• Here’s Here’s the the revised revised page:page:


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.


The Resume Example

• Here’s the Here’s the HTML:HTML:


The Resume Example

• Here’s the Here’s the page:page:


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.


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


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


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


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.


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



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



You can align at the top (TOP):You can align at the top (TOP):



You can align in the middle You can align in the middle (MIDDLE):(MIDDLE):



You can align at the bottom You can align at the bottom (BOTTOM):(BOTTOM):



You can also align at a specific You can also align at a specific location (LEFT, RIGHT, HSPACE, location (LEFT, RIGHT, HSPACE, VSPACE)VSPACE)


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.


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.


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


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.


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.


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.


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.


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.


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.


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.


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.


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.


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


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.


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.


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.


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.



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



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



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



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



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


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


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


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.


Adding Pages to the Frames

• Click a frame, then click Click a frame, then click Frames>Frames Properties.Frames>Frames Properties.


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.

1copyright © prentice hall 2000 writing your own web page chapter 9 using html or frontpage

Documents

tags tags

basic tags html

html paragraph

copyright prentice hall

text structure tags

web page paragraph tags

smaller heading tags

body tagsall tags