HTML WEB PAGE BASICS 2

If the text you type for your Web page scrolls off Visual editors such as Microsoft FrontPage and the screen in your text editor or word processor, HoTMetaL PRO allow you to create Web pages you can have the program wrap the text to fit on without having to enter HTML tags. Visual SET UP A WEB PAGE the screen. To wrap text in Microsoft WordPad, editors enter the tags for you as you create a select the View menu and then click Options. In Web page. Microsoft FrontPage is available at the Options dialog box, click the Wrap to window the www.microsoft.com/frontpage Web site any people create Web pages using the appearance of the text. HTML tags provide option ( changes to ). and HoTMetaL PRO is available at the a text editor or word processor. instructions for formatting and structuring www.softquad.com Web site. Popular text editors include Notepad a Web page. M HTML editors such as BBEdit and HomeSite for Windows and SimpleText for Macintosh. After entering the text for the Web page, save are also useful for creating Web pages. These Microsoft WordPad, Microsoft Word and programs offer menus and toolbars that help Corel WordPerfect are popular word processors. the Web page as a text document and specify you add HTML tags to a Web page. BBEdit a name for the Web page with the .html or .htm is available at the www.barebones.com Web site To set up a Web page, first enter the text you extension. A Web page name can contain letters and HomeSite is available at the www.allaire.com want to appear on the Web page. Do not and numbers, but no spaces. The main Web Web site. format the text using your text editor or word page, or home page, in a Web site is usually processor. You must add HTML tags to change named index.html.

SET UP A WEB PAGE

Fruit and Flowers, Inc. Fruit and Flowers, Inc. Fruit and Flowers, Inc. Fruit and Flowers, Inc. No garden? No problem! No garden? No problem! No garden? No problem! No garden? No problem! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends! Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills! Our fruit selection includes: Our fruit selection includes: Our fruit selection includes: Our fruit selection includes: Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries. Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis. Our flower selection includes: Our flower selection includes: Our flower selection includes: Our flower selection includes: Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe. Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine.

Text Document

⁄ Start the word processor ‹ Click to save › Type a name for the Web Note: A Web page name can ˇ Click this area to list ‡ Click Save. A dialog box appears, ° Click Yes to save or text editor you want to the Web page. page. Make sure you add contain letters and numbers, the ways you can save stating that all formatting the Web page. use to create a Web page. the .html or .htm extension but no spaces. The home page the Web page. will be removed from the The Save As dialog In this example, we started to the Web page name. is usually named index.html. Web page. Microsoft WordPad. box appears. Á Click Text Document. This area shows ¤ Type the text you want the location where the to appear on the Web page. program will store the CONTINUED Web page. You can click this area to change the 10 location. 11 HTML WEB PAGE BASICS 2

SET UP A WEB PAGE(CONTINUED) The HTML standard also includes the Choose the title for your Web page carefully tag, which you can use to since search tools will use the title to catalog provide Web browsers with information about the Web page. A search tool is a Web site here are some basic HTML tags The No garden? No problem! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Fruit and Flowers, Inc. Fruit and Flowers, Inc. Grow beautiful, exotic flowers and impress your friends! No garden? No problem! No garden? No problem! Fruit and Flowers, Inc. Grow your own fruit and save on your grocery bills! Our special, patented fertilizer lets you grow lush flowers and healthy fruit Our special, patented fertilizer lets you grow lush flowers and healthy fruit No garden? No problem! Our fruit selection includes: INDOORS! INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit Popular berries such as strawberries, raspberries and blueberries. Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends! INDOORS! Exotic fruit such as mangos, papayas and kiwis. Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills! Grow beautiful, exotic flowers and impress your friends! Our flower selection includes: Our fruit selection includes: Our fruit selection includes: Grow your own fruit and save on your grocery bills! Seasonal plants such as poinsettias, holly and mistletoe. Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries. Our fruit selection includes: Tropical flowers such as orchids, birds of paradise and yellow jasmine. Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis. Popular berries such as strawberries, raspberries and blueberries. Our flower selection includes: Our flower selection includes: Exotic fruit such as mangos, papayas and kiwis. Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe. Our flower selection includes: Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine. Seasonal plants such as poinsettias, holly and mistletoe. Tropical flowers such as orchids, birds of paradise and yellow jasmine.

HTML TAGS ¤ Type after all HEAD TAGS ¤ Press Enter twice. TITLE TAGS ¤ Type the title of the BODY TAGS ¤ Type directly the text on the Web page. Web page, using only above the tag. ⁄ Type before ⁄ Type directly ⁄ Type . tags are optional, it is considered proper form to include tags are optional, it is considered proper form to include these tags. considered proper form to include these tags. these tags. CONTINUED

12 13 HTML WEB PAGE BASICS 2

DISPLAY A WEB PAGE

If you cannot locate the Web page you want Although Microsoft Internet Explorer and IN A WEB BROWSER to open, you may not have saved your Web Netscape Navigator are the two most popular page properly. When saving a Web page, you Web browsers, there are several other Web isplaying your Web page in a Web browser each section of HTML code, the browser displays must save the page in a text only format and browsers available, such as Opera and Lynx. For allows you to see how the page will appear the resulting information on the screen. This means add the .html or .htm extension to the name information on Opera, visit the www.opera.com D on the Web. that a Web browser can display part of a Web page of the page (example: index.html). Web site. For information on Lynx, visit the before it has completely finished processing the page. lynx.browser.org Web site. You need a Web browser program, such as Microsoft Internet Explorer or Netscape Navigator, before you You should display your Web page in several Web Refreshing the display of your Web page in a Web browser allows you to see how changes Even though you can display your Web page can display your Web page in a Web browser. The browsers to see how each browser will display you have made will appear on the Web. After in a Web browser on your computer, other most recent versions of Microsoft Internet Explorer the Web page. Each Web browser may interpret saving your changes in your text editor or word people on the Web will not be able to view and Netscape Navigator are available at the HTML tags differently and many Web browsers do processor, click the Refresh or Reload button your page until you transfer the page to a www.microsoft.com/ie and www.netscape.com not support all of the features of HTML. For example, in the Web browser window. If you are using Web presence provider's Web server. Web sites. the most current Web browsers may recognize HTML Netscape Navigator, you may need to press features offered by the latest version of HTML, while the Shift key as you click Reload to properly A Web browser reads the HTML code used to create older Web browsers may not be able to properly refresh your Web page. a Web page and then displays the Web page in the display the features. Web browser window. As a Web browser reads

DISPLAY A WEB PAGE IN A WEB BROWSER

Open... Ctrl+O

C:\My Documents\Web Pages\index.html

Fruit & Flowers, Inc. No garden? No problem! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Grow beautiful, exotic flowers and impress your friends! Grow your own fruit and save on your grocery bills! Our fruit selection includes: Popular berries such as strawberries, raspberries and blueberries. Exotic fruit such as mangos, papayas and kiwis. Our flower selection includes: Seasonal plants such as poinsettias, holly and mistletoe. Tropical flowers such as orchids, birds of paradise and yellow jasmine. index

⁄ Start the Web browser ‹ Click Open. › Click Browse to locate Note: If you are using Netscape This area shows the Á Click Open. The Web page appears If you later make changes you want to use to display the Web page on your Navigator, click Choose File. location of the displayed in the Web browser. to the Web page, you can Note: If you are using Netscape Web pages. To change ‡ Click OK in the Open your Web page. In this computer. The Microsoft Internet refresh the display of the Web Navigator, click Open Page. the location, click this dialog box. example, we started Explorer dialog box appears. page to view the changes. For Microsoft Internet Explorer. The Open dialog box area. Note: If you are using Netscape more information, see the top appears. of this page. ¤ To open your Web page in ˇ Click the Web page Navigator, click Open. the Web browser, click File. you want to open.

14 15 HTML WEB PAGE BASICS 2

START A NEW PARAGRAPH Web browsers automatically wrap the eb browsers usually ignore returns to change the alignment of a paragraph. text in your paragraphs to fit on a user's screen. To make sure certain words or you type in your text editor or word Paragraphs can be left aligned, centered, phrases on your Web page will appear W processor. You must use the

tag right aligned or justified. Changing the on the same line, use the tag. to specify where you want each new paragraph alignment of an important paragraph can to begin. make the paragraph stand out from the TYPE THIS: RESULT: rest of your Web page. When you display your Web page in a Web

Controlling line breaks is useful when you want certain Controlling line breaks is useful when you browser, a blank line will appear between each While the ALIGN attribute is still supported text, such as a name or phone want certain text, such as a name or phone paragraph you defined using the

tag. This by Web browsers, the use of style sheets number, to always appear on number, to always appear on the same line. the same line. In this example, In this example, I want the text can help improve the layout and readability of is now preferred. For information on style I want the text Jennifer your Web page by breaking up large sections sheets, see page 196. Jennifer Stewart, Sales Director to always Stewart, Sales Director appear on the same line. of text. to always appear on the same line.

By default, most Web browsers left align paragraphs. The ALIGN attribute allows you

START A NEW PARAGRAPH

Bird Watchers' Home Page

This paragraph is left aligned. This paragraph is left aligned. This paragraph is left aligned. This paragraph is left aligned.

Bird watchers appreciate the beauty and wonder of birds and are always interested in ways to attract them. One of the best and easiest ways to draw

This paragraph is centered. This paragraph is centered. birds to your backyard is to build a birdhouse. On this page, I will introduce you This paragraph is centered. This paragraph is centered.

to steps you can follow to construct a simple birdhouse.

This paragraph is right aligned. This paragraph is right

STEP ONE: PREPARATION aligned. This paragraph is right aligned. This paragraph is right aligned.

Decide what type of bird you want to attract. This decision will influence the dimensions of the house and the size of the entry hole you must drill. Purchase

This paragraph is justified. This paragraph is justified. This wood. Pine is my favorite choice, but other types of wood are fine.

paragraph is justified. This paragraph is justified. This paragraph is justified. This paragraph is justified. This paragraph is justified. This paragraph is justified.

STEP TWO: CUTTING, DRILLING AND ASSEMBLING Cut the boards so they are the correct dimensions. Select the board that will be the front of the house and drill an entry hole. Carefully assemble the boards to complete the house.

⁄ Type

in front of ¤ Type

after each The Web browser displays CHANGE PARAGRAPH The Web browser each paragraph on your paragraph on your Web a blank line between each ALIGNMENT displays the paragraph Web page. page. paragraph. ⁄ In the

tag for the with the alignment you specified. Note: Although the

tag paragraph you want to change, type is optional, you should include ALIGN="?" replacing with the way the tag if you plan to format ? you want to align the paragraphs using style sheets. paragraph (left, center, For information on style sheets, right or justify). 16 see page 196. 17 HTML WEB PAGE BASICS 2

START A NEW LINE INSERT BLANK SPACES

he
tag instructs a Web browser window. An inline element is an element that eb browsers usually ignore extra spaces The   code creates a non-breaking space. to stop placing text and other elements Web browsers do not automatically place on you add when typing the text for your Web Typing   instead of typing a space between T on the current line and begin a new line a new line, such as an image. W page. If you want to include extra blank two words will prevent the words from being in the Web browser window. The
tag spaces on your Web page, use the   code. separated when a Web browser wraps text to fit is useful for separating short lines of text, such The
tag is also useful for increasing the in the window. This ensures that the two words as the text in a mailing address or poem. Unlike amount of space between elements on your Web Inserting blank spaces is useful for indenting the first will always appear on the same line. many HTML tags, the
tag does not have page. For example, you can use the
tag to line of a paragraph. Blank spaces are also useful for a closing tag. add an extra blank line between two paragraphs. separating elements on a Web page, such as images. The

 tag provides another way to add blank Each 
 tag you add will create an extra line For example, inserting blank spaces between two spaces to your Web page. The 
 tag retains Many people use the 
 tag to place inline of space. images that are side by side can prevent the images the spacing of text you type. For information on elements on their own line in a Web browser from appearing as one large image. the 
 tag, see page 22. 
START A NEW LINE INSERT BLANK SPACES
         My Poetry Web Page 
Welcome to my Web page. Here, you will find a collection of my favorite  poems. Here is the poem of the week:
 
Beethoven
 
The sun 
           Ludwig van Beetho 
shines through the Bonn, Germany in 1770. He spent most of his life in Vienna, where he earned a 
green leaves teaching piano and selling his compositions. 
reflecting the sunshine 
One of the most fascinating aspects of Beethoven's life was his triumph ov 
of this summer afternoon. 
I watch the child struck him during adulthood. in fact, he composed some of his most powerful wo 
as he runs through the sprinkler hearing.
 
carefree, without worries 
remembering my own childhood 
memories I can always carry with me.    
⁄ Type 
 in front of  You can type several  The Web browser displays ⁄ Type   where  To insert multiple  The Web browser each element you want 
 tags in a row to each element you specified you want a blank space to blank spaces, type   displays the blank space(s) to appear on a new line. increase the amount of on a new line. appear on your Web page. for each space you want on your Web page. vertical space that will to add. appear between two elements.
18 19 HTML WEB PAGE BASICS 2
Style sheets can help ensure that the headings on your Web page are consistent. A style sheet allows you to specify in one location how you want your headings to appear. For example, you can have all of your 
 headings display the Arial font and appear underlined.
TYPE THIS: ADD A HEADING    on your Web page. Users can glance through users understand the structure of your Web page.  the headings on a Web page to quickly find To avoid confusion, do not use more than three  H 
First Heading
 information of interest. different heading levels on a single Web page. Style sheets can help you quickly format the headings on your Web page. 
Second Heading
 There are six heading levels you can use. Web browsers usually display headings in bold This saves you from having to format each heading separately. Heading level 1 (
) is the largest and heading text with a blank line above and below the headings. level 6 (
) is the smallest. 
, 
 and In most Web browsers, headings are left aligned by 
 headings are often used for Web page and default. The ALIGN attribute allows you to change RESULT: section titles, while 
 and 
 headings are the alignment of a heading. While the ALIGN attribute First Heading useful for disclaimers and copyright information. is still supported by Web browsers, the use of style Style sheets can help you quickly format the headings on your Web page. 
 headings are usually the same size as the sheets is now preferred. For information on style Second Heading main text on a Web page. sheets, see page 196. This saves you from having to format each heading separately.
ADD A HEADING
C:\My Documents\Web Pages\headings.html C:\My Documents\Web Pages\headings.html      This is heading level one.  This is heading level one.    This is heading level two.  This is heading level two.
 This is heading level one. 
 This is heading level three. 
This is heading level one.
 This is heading level three. 
This is heading level two.
 
This is heading level two.
 This is heading level four. This is heading level four. 
This is heading level three.
 
This is heading level three.
 
This is heading level four.
 This is heading level five. 
This is heading level four.
 This is heading level five. 
This is heading level five.
 
This is heading level five.
 
This is heading level six.
 This is heading level six. 
This is heading level six.
 This is heading level six.
   
⁄ Type  in front of ¤ Type  after the  The Web browser CHANGE HEADING ALIGNMENT  The Web browser the text you want to make text you want to make a displays the heading. ⁄ In the  tag for the displays the heading a heading. Replace ? with heading. Replace ? with heading you want to change, with the alignment you specified. the number of the heading the number you used in type ALIGN="?" replacing ? level you want to use, step 1. with the way you want to from 1 to 6. align the heading (left, center or right). 20 21 HTML WEB PAGE BASICS 2
PREFORMAT TEXT ADD A COMMENT dding a comment to your Web page is useful Many people use comment delimiters to hide Web Web browser usually ignores blank lines and When you preformat text, Web browsers will display when you want to remind yourself to update page elements that some Web browsers may not extra spaces you add when typing the text the text with the exact spacing you typed and will a section of text or indicate why you used recognize. For example, using comment delimiters 
 A A for your Web page. The tag instructs not wrap the text to fit the size of the Web browser a specific tag. allows you to hide JavaScript on your Web pages Web browsers to retain the spacing you type in window. When typing the text, consider that long from older Web browsers that do not recognize your text editor or word processor. lines of text may extend beyond the edge of a Web A comment must be surrounded by the  JavaScript. This will prevent the Web browsers from browser window. delimiters. Web browsers will ignore the information Web browsers display preformatted text in a displaying the code for the JavaScript on your Web between the delimiters. This prevents your comments page. For information on JavaScript, see page 158. monospaced font, such as Courier. A monospaced Preformatting text is useful for creating simple tables. from appearing on your Web page. font is a font in which each character takes up Type the text for your table using spaces to line up Comment delimiters are also useful for temporarily the same amount of space. When typing text you columns of information and then preformat the text. Keep in mind that users who view the HTML code hiding parts of your Web page. For example, you plan to preformat, use a monospaced font so you Using spaces instead of tabs will help ensure that your for your Web page will be able to read your comments. may want to temporarily hide a Web page area you can see the text exactly as it will appear in a Web table will appear correctly in a Web browser, since For information on viewing the HTML code for a Web are revising. browser. the spacing for tabs differs among Web browsers. page, see page 9.
PREFORMAT TEXT ADD A COMMENT
 C:\My Documents\Web Pages\index.html  C:\My Documents\Web Pages\index.html     Fruit & Flowers, Inc.     No garden? No problem!
Movies R Us 
Fruit & Flowers, Inc.
 Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! 
Your one-stop shopping site for videos of all your favorite movies!
 Our fruit selection includes: 
This Week's Top-Selling Titles:
 
No garden? No problem!
 Popular berries such as strawberries, raspberries and blueberries. 
Our special, patented fertilizer lets you grow lush flowers and healthy fru Exotic fruit such as mangos, papayas and kiwis. 
 INDOORS!
 Comedy Radio CNTR starring Mike Stewart $14.99 Our flower selection includes: Drama Golden Fields starring Jane Roddingham $19.99 
Our fruit selection includes: Seasonal plants such as poinsettias, holly and mistletoe. Horror Night Hackers starring Josie McGregor $14.99 
Popular berries such as strawberries, raspberries and blueberries. Tropical flowers such as orchids and yellow jasmine. Sci-Fi Moon Rock starring Alex Rowe $18.99 
Exotic fruit such as mangos, papayas and kiwis.
 Classic Road to Jericho starring Rupert Smith $14.99 Western Dusty Roads starring Mac Highway $14.99  
 
Our flower selection includes:  
Seasonal plants such as poinsettias, holly and mistletoe.
⁄ Type 
 above ¤ Type 
 below  The Web browser ⁄ Type  to complete  The Web browser does the text you want to the text you want to displays the text with want to add a comment. the comment. not display the comment preformat. preformat. the same spacing you on your Web page. used when creating ¤ Type the comment. Note: Adding a space on the Web page. either side of a comment can help make the comment easier to read.
22 23 HTML WEB PAGE BASICS 2
SPECIAL CHARACTERS
INSERT SPECIAL CHARACTERS CHARACTER NUMBER CODE NAME CODE CHARACTER NUMBER CODE NAME CODE CHARACTER NUMBER CODE NAME CODE " " " ¿ ¿ ¿ a´ à à & & & À À À ´a á á he HTML standard provides character Character encoding is useful for adding characters encoding for adding special characters that are used for creating Web pages, such as <, < < < Á Á Á ˆa â â T to your Web page. This lets you include >, " and &, since Web browsers may misinterpret > > > Â Â Â a˜ ã ã characters that do not appear on your keyboard, these characters. For example, Web browsers may ¡ ¡ ¡ Ã Ã Ã a¨ ä ä such as mathematical symbols. interpret the < character as the beginning of a tag. ¢ ¢ ¢ A¨ Ä Ä a˚ å å When adding a special character, you must specify Keep in mind that the appearance of special £ £ £ Å Å Å æ æ æ a number code or name code for the character. A characters you add to your Web page will depend ¤ ¤ Æ Æ Æ ç ç ç number code, also known as a numeric character on the configuration of a user's Web browser ` reference, consists of an ampersand, a number and the fonts installed on the user's computer. ¥ ¥ ¥ Ç Ç Ç e è è ı sign, the number of the character and a semicolon. ı ¦ ¦ È È È é é é A name code, also known as a character entity § § § ´E É É eˆ ê ê reference, consists of an ampersand, the name ¨ ¨ ¨ Ê Ê Ê e¨ ë ë of the character and a semicolon. © © © Ë Ë Ë `ı ì ì a ª ª Ì Ì Ì ´ı í í INSERT SPECIAL CHARACTERS « « « Í Í Í ˆı î î ¬ ¬ ¬ Î Î Î ¨ı ï ï ® ® ® Ï Ï Ï o ð ð – –  ¯ ¯ D Ð Ð ˜n ñ ñ  ° ° ° N˜ Ñ Ñ o` ò ò  Jay's Music Web Site  ± ± ± Ò Ò Ò ´o ó ó  2000 Jay Hanlen 2 ² ² Ó Ó Ó ˆo ô ô Welcome to my Web site, where you can download many songs that I have recorded. 
Jay's Music Web Site
 I have been a musician for more than 20 years, and through this time, I have learned to play many 3 ³ ³ Ô Ô Ô o õ õ instruments. ˜ 
 © 2000 Jay Hanlen
 Today, I create sound files for my Web site and perform in a band. ‘ ´ ´ Õ Õ Õ ¨o ö ö 
Welcome to my Web site, where you can download many songs tha µ µ µ O¨ Ö Ö ÷ ÷ ÷ recorded. 
I have been a musician for more than 20 years, and through this t ¶ ¶ ¶ x × × ø ø ø learned to play many instruments. . · · Ø Ø ù ù 
Today, I create sound files for my Web site and perform in a band Ø u` ¸ ¸ ¸ Ù Ù Ù ´u ú ú   1 ¹ ¹ Ú Ú Ú ˆu û û ˚ º º Û Û Û ¨u ü ü Type the number code   ⁄ Click where you want ¤ The Web browser The appearance of the » » » U¨ Ü Ü ´y ý ý the special character to or name code for the special displays the special special character depends 1 appear on your Web page. character (example: © character. on a user's Web browser /4 ¼ ¼ Y´ Ý Ý þ þ or ©). and font settings. 1 /2 ½ ½ Þ Þ y¨ ÿ ÿ 3 /4 ¾ ¾ ß ß
24 25