Computers Tools for an Information Age

Size: px

Start display at page:

Download "Computers Tools for an Information Age"

Hope Jackson
7 years ago
Views:

1 Before You Start Writing Your Own Web Page Chapter 9 Using HTML or FrontPage This chapter offers beginning instruction in HyperText Markup Language (HTML) Microsoft FrontPage Requirements Where We Are Headed Writing Vehicle - a software tool to write HTML code Browser - to test the code and later access the server Server - to test links to other sites. Use HTML to create a simple page Expand to make a resume using HTML Incorporate more tags as the HTML is written Eventually change format to FrontPage and then to a more complex example. 3 4 The Basic Tags Document Tags HTML consists of a set of commands, or tags Tags tell the browser how to display the information provided <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> <Hx> </Hx> <P> </P> <BR> <STRONG> </STRONG> <CENTER> </CENTER> Very first tag must be <HTML>, very last tag </HTML> Immediately following HTML command is head tag pair, <HEAD> and </HEAD> Encloses <TITLE> and </TITLE>, which create title in browser s title bar 5 6 1

2 Document tags Text Structure Tags <HTML> <HEAD> <TITLE> Test Title </TITLE> </HEAD> <BODY> </BODY> </HTML> Following HEAD section is body tag pair, <BODY> and </BODY> Tags paired within other tags are nested. All tags from this point forward belong between BODY tags Heading tags - come in pairs, six text sizes, larger to smaller (<H1> and </H1> to... <H6> and </H6>) <BODY> <H1> Biggest Heading </H1> <H6> Smallest Heading </H6> </BODY> 7 8 Text Structure Tags A First Example <P> Paragraph one </P> <P> Line one in Paragraph one <BR> Line two in Paragraph two <BR> </P> Paragraph tags - mark an HTML paragraph on a web page Line break tag - Singular tag (<BR>), ends a line for a new one w/out a new paragraph. Here s the HTML code: 9 10 A First Example Lists Here s the resulting page: List - a basic HTML text structure Unordered list - a.k.a. bulleted list. Tags: <UL>, </UL> Ordered list - a numbered list. Tags: <OL>, </OL> Both varieties of list are preceded by single list item tag,, <LI>

3 Lists Lists Here s a list in HTML: Here s the resulting page: Improving the Appearance of the Page Style Tags There are many ways to alter the appearance of your page. A list of common tags follows: Logical style tags - let the browser display text its own way. Example: instead of straight-out italics tags, there are emphasis tags <EM>, </EM> and strong emphasis tags <STRONG>, </STRONG> instead of bold tags Style Tags Enhancing the First Example Physical style tags - what most people prefer to use. Tell the browser exactly how text should be displayed. (<B> Bold and <I> Italic tags). You can see some changes in the HTML code. The first heading has been centered. The second heading has been centered, made italic

4 Enhancing the First Example Enhancing the First Example The plays have been put in an unordered list and made boldface. The paragraph and break tags were removed from the group of plays, the code is saved. Here s the revised HTML: Enhancing the First Example The Resume Example Here s the revised page: HTML example for Computer Science student s s resume. The HTML includes tags you ve seen already plus, Image and link tags, the next two topics The Resume Example The Resume Example Here s the HTML: Here s the page:

5 Obtaining Images Image File Formats Images can be downloaded, or saved to disk, from sites that offer free images. Images can be scanned in via scanner to a disk file or a copy service can do this. Images can be personally created through software..gif and.jpg are the most common Internet graphic formats. GIF - short for Graphic Interchange Format JPG - short for Joint Photographic Experts Group Image File Formats The Image Tag If patent problems arise, GIF files will be replaced by PNG,, or Portable Network Graphics Inline image - an image referenced right in, and whose file is loaded with the HTML code An image can be included in a page with the single image tag,, <IMG> The Image Tag Within the image tag must be SRC, which stands for source,, the location of an image. Example: <IMG SRC= JJMphoto.JPG > Other attribute - ALT, alternative text. HEIGHT and WIDTH are attributes of the <IMG> tag. Most browsers will stretch the image to fit the specified HEIGHT and WIDTH

6 The <IMG> tag has an attribute called ALIGN, which lets you align the text with an adjacent image. You can align at the top (TOP): You can align in the middle (MIDDLE): You can align at the bottom (BOTTOM): Adding Links You can also align at a specific location (LEFT, RIGHT, HSPACE, VSPACE) The power of the Internet is in links. You can link to any site and vice versa. Links can divide a page into more manageable sections

7 The Anchor Tag The Anchor Tag Links are accomplished through the anchor tag pair, <A> and </A>. Key attribute of this tag is HREF, indicating a link destination. The anchor tag includes the text that a visitor will click to go to the intended page. Example: <A HREF= :// >Kodak</A> film Becomes: Kodak film Final Touches to the Resume Final Touches to the Resume Here are two additions to Joel s resume. Means of electronically contacting Joel, namely, his address. An optional background comprised of a single image repeated like bathroom tile, rather than a flat color. One possibility is to use the attribute BGCOLOR with a six-digit hex code to specify color. Another is the BACKGROUND attribute, which creates an attractive background texture Authoring Software Getting Started in FrontPage This type of software lets you create web pages without requiring any knowledge of HTML. For the examples given after this point, Microsoft FrontPage 2000 will be used. FrontPage calls a web site a web; ; a web is a set of related web pages. Webs and their pages are stored by default in the My Webs folder

8 Getting Started in FrontPage FrontPage WYSIWYG Create a new web by selecting File>New>Web. Select Empty Web. Call it HayesWeb. Now double-click Empty Web. Now click the toolbar s New button. Key the Hayes title and other lines in the sizes you want, and use bullets for the list of plays. Save the page as Hayes_main. The page needs a title. Right-click the page and select Page properties FrontPage WYSIWYG Navigation and other Views Fill in the tile as The Hayes Theater. Now click the preview button on the toolbar to see the web page as it will look online. Create three subpages: Calender, First- Nighters, and Support. Be sure to give them titles. Set up the Navigation view by clicking the Navigation button under Views. Use your mouse under Folders to drag to the right frame first the Hayes_main page, and then (under it) the pages to which it links Adding Links in FrontPage Page Tabs and Loading Time Re-open Hayes_main. Click on Hayes_main where you want the link names to appear. Select Insert>Navigation Bar and accept the defaults. Save the page and preview it. The current page tab in use is the Normal tab,, or WYSIWYG mode. The HTML tab will show you the HTML code for Hayes_main. The Preview tab will show you how the page will look in a Web browser. At the lower right of the page is the estimated loading time

9 Themes Page Templates Theme - a set of design elements, color schemes applied to a page To add a banner, click on the page near the top line (to indicate the location where you want the banner to be inserted). Click Insert>Page Banner and insert the banner text. To insert a theme, go to Format>Theme and find one you like. The Hayes example was simple, but has one large flaw: there is only one, full-width column of text, with no margins. The following sections cover page templates in FrontPage Page Template Selections Page templates - pre-designed pages with page settings, formatting, and elements. Select File>New>Page. Select the page template you desire. Make a new web called OrcaWeb. Plot sub-pages: Orca facts, location maps, photo gallery, and links Create a page with the format one- column body with two sidebars. Save this page as Orca_main. Replace the placeholder text. You can copy text from some other source if you wish. Click on one of the link-text locations, then click the Hyperlink button on the standard toolbar

10 Click the matching saved-page and then click OK. Once all links are created, delete excess placeholder text. Move orca closeup.jpg to theorcaweb s Images folder. Be sure to click View>Refresh. Click the sunflower image, click Insert Picture from File, and then double-click on orca-closeup.jpg Frames Save the page. Enlarge the main body text and make link text boldface. Frames - rectangular areas that hold separate pages. A collection of frames can be displayed in just one window called a frameset Frame Templates Orca Redux Select File>New>Page, and click the Frames tab. Select a frame template. Some of the frame templates include a frame called contents. The contents frame contains links to subpages that will be shown, one at a time, in the target frame. Use the frame template called Banner and Contents, Make seven pages for the target frame at right, the Welcome page, and the six pages - Orca facts, maps, tracking, photo gallery, Adopt an Orca, and Orca Links

11 Adding Pages to the Frames Adding Pages to the Frames Click a frame, then click Frames>Frames Properties. From here you can: select the file name of the initial page for the frame change the width of the frame margins decide whether scroll bars are needed for the frame (If Needed, Never, or Always) Save the page as Orca_main_frame

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short