1chapter

HTML and Web Page Basics

Are you interested inbuilding your own Webpages? This chapterintroduces you to basicHTML concepts andmethods for creating yourown Web content.

HTML BBasics1.22.3.

03_579843 ch01.qxd 6/18/05 12:09 AM Page 2

COPYRIG

HTED M

ATERIAL

Internet Basics ......................................................4

An Introduction to HTML ....................................6

Explore Web Browsers ........................................8

Explore HTML Editors ..........................................9

Understanding HTML Syntax and Rules........10

View HTML Code in a Browser........................12

Plan a Web Site ..................................................14

03_579843 ch01.qxd 6/18/05 12:09 AM Page 3

4

Connection SpeedsConnection speeds play an important part in a user’sInternet experience. Slower connections result in slowerfile transfers and Web page viewing. Modem connectionsoffer the slowest connection speeds to the Internet, upto 56 Kbps (Kilobits per second), followed by ISDNconnections at 64–128 Kbps. Cable modems can achieveconnection speeds up to 1.5 Mbps, while DSL offersspeeds of 1,000–9,000 Kbps.

1.5 Mbps

56 KbpsSTART

The Internet has grown from amilitary research project in thelate 1960s to a global networkof computers today. The numberof Internet users around theglobe is expected to reach over 1billion by the year 2005.

WWWConnecting...

ISP

Internet Basics

Offering everything from e-mail to information tocommerce, the Internet brings users an unprecedentedway to communicate and exchange data. Constructedof thousands of networks and computers around theworld, the Internet connects organizations,governments, businesses, and individuals.

Types of ConnectionsUsers connect to the Internet through a variety ofsources. Individuals can connect through a modem anda phone line, cable, or satellite. If you use a modem toconnect to the Internet, you typically utilize an Internetservice provider, also called an ISP, or a commercialservice, such as America Online. You can also use cableTV companies to connect to the Internet through acable modem, or you can connect through digitalphone lines, such as ISDN (Integrated Services DigitalNetwork) and DSL (Digital Subscriber Line).

03_579843 ch01.qxd 6/18/05 12:09 AM Page 4

HTML and Web Page Basics chapter1

5

TCP/IPInternet connection relies on a collection of protocolsthat govern how computers and networks talk to eachother. Transmission Control Protocol/Internet Protocol,or TCP/IP for short, is simply a set of rules that controlhow information flows between computers and allowsfor individual computers to communicate with theInternet as if they are directly connected.

InternetInternetInternet

TCP/IP

File Edit View Favorites Tools Help Back

My Computere

Address Goe http://www.website.com/

2 .com1 .com

Liinnk ttoo 22Link to 2

.edu.edu.edu

.gov.gov.gov .org.org.org .com

.com

.com

Browser

eeNNWee bb PPa gg eeWee bb PPa gg eeWe b Pa g e

WeebPaaggeeWeebPaaggeeWebPage

URLS and LinksEvery page on the Web has a unique address, called aURL, short for Uniform Resource Locator. If you knowa page’s URL, you can view it over the Internet. Youcan also view pages using links. Hyperlinks, or links,connect pages through embedded URLs presented astext or images on a page. Users can jump from onepage to another by clicking links. The activity ofviewing Web pages is casually called Web surfing.

BrowsersTo view Web pages, you must use a Web browser.Browsers are specialized programs that retrieve Webpages from servers and display them on a user’scomputer. Microsoft Internet Explorer and NetscapeNavigator are the two most popular browsers used today.Other browsers are available, including Apple’s Safari,Mozilla’s Firefox, and Opera. Each program has evolvedthrough a myriad of versions, each improving over the last.As you write HTML code, just remember that not all usershave the most recent version of a particular browser.

The World Wide WebThe World Wide Web is a giant collection of documents,or pages, stored on computers around the globe.Commonly called the Web, this collection of pageshouses a wealth of text, images, audio, video, and more.Web pages are stored on servers, which are computersdesigned for holding and transferring data. When youplace a document on a server, it is accessible for otherusers to view. Typically, companies, government agencies,organizations, and individuals maintain Web pages.

03_579843 ch01.qxd 6/18/05 12:09 AM Page 5

Web pages are built using HTML,short for HyperText MarkupLanguage. HTML documents arecomprised of text and coding thatinstruct a Web browser how todisplay the data. HTML documentsare identified by their .html or .htmfile extension. Because any Webbrowser can read an HTMLdocument, you do not need a specialplatform, such as Windows, UNIX,or Mac, to view the information.

6

HTML StandardsThe World Wide Web Consortium, or W3C for short, setsHTML standards. This international group consists of theWeb’s founders and industry leaders, includingcompanies such as Microsoft and Netscape. Webdevelopers look to the W3C to establish standards andintroduce new Web technologies. The W3C is responsiblefor maintaining and guiding HTML standards.

W3C

StandardsHTML

HTML CodingHTML coding consists of tags. Tags are individualinstructions to the browser and are surrounded bybrackets, < >. Many tags include an opening tag and aclosing tag. When writing tags, you can use upper- orlowercase letters. To make the coding easy to read,most users type it in uppercase to distinguish thecoding from regular text data on the page. Tags canalso include attributes you can define, such as colorvalues or measurements.

StandardsXHTMLHTML

<Tag>W3C

<TITLE>

<HEAD>

</BODY>

<TITLE>

</HEAD>

<BODY>

An Introduction to HTML

03_579843 ch01.qxd 6/18/05 12:09 AM Page 6

HTML and Web Page Basics chapter1

7

HTML 4.0

FormattingRoom

CSS

3CSS

2CSS

1

XHTML

XHTML

XHTML

SECURITYHIGHRESTRICTED

AREATAGS REQUIRED

XHHTMLXHHTMLXHTMLXMMLLXMMLLXML

HTTMMLLHTTMMLLHTML

HTMLV.4XHTML

XHTMLAlthough XHTML is technically an XML application, itclosely copies much of HTML 4 — so much so, thatmany view XHTML as a stricter version of HTML. WithXHTML, you cannot leave off tags, and the order oftags is strictly enforced. Tags are closed in the reverseorder in which they were opened. You must also writeXHTML coding in lowercase letters, and all attributesmust be enclosed in quotes. These are just a fewexamples of code-writing details users must follow tocreate XHTML documents.

HTML versus XHTMLVersion 4 is the last version of HTML the W3C willintroduce. The future of Web page development lies inXHTML. However, billions of Web pages are alreadywritten in HTML, and browser support is morecommon for HTML, so HTML documents are not likelygo away for quite some time. If you learn HTML, thetransition to XHTML is an easy one, requiring only adedication to detail when writing well-formed code.

HTML EvolutionSeeing a need for additional structure for HTMLdocuments, the W3C next introduced XML (ExtensibleMarkup Language). XML is a meta-markup languagefor creating other languages; however, it is not aslenient as HTML, so the W3C rewrote HTML in XMLand called it XHTML. XHTML has all the features ofHTML but gains XML’s power and flexibility.

HTML VersionsThe most recent version of HTML is version 4. Version4 allows for separate formatting instructions, calledcascading style sheets (CSS) and other presentationcontrols. By moving all the formatting controls to stylesheets, HTML 4 frees up the Web developer to assignformatting to not only paragraphs of text, but also tothe entire page or every page on the Web site. Movingformatting to a separate style sheet makes it easier tomaintain other coding on the HTML document.

03_579843 ch01.qxd 6/18/05 12:09 AM Page 7

8

Web browsers are designed toread HTML instructions anddisplay the content on yourscreen. You can use a browser todisplay HTML files you save onyour computer, called local pages,or HTML pages transferredthrough a Web server. You canalso use a browser to test yourHTML pages.

HTMLHTML

Inntteernneet

Expllorreer

NettssccaappeNaaviiggaattoorr

Oppeerra

AmmaayaaMoozziillllaaBrowser 1

Browser 2

Ipsum ad consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer ad consectetueradipiscing elit, sed nit nisl ut aliquip ex ea.

Ipsum ad consectetuer adipiscing

Lorem ipsum dolor sit amet,

consectetuer ad consectetuer

adipiscing elit, sed nit nisl ut

aliquip ex ea.

Explore Web Browsers

Browser DiscrepanciesThere are many different Web browsers around today,and numerous versions of each. Each browserinterprets HTML code in its own way, which meansWeb pages do not always appear the same from onebrowser to another. HTML standardization helpsalleviate some of the discrepancies, but not all. For thisreason, you need to write clean, well-formed HTMLcode and be sure to test your pages in differentbrowsers to see the varying results.

Finding BrowsersMicrosoft Internet Explorer (www.microsoft.com/ie) andNetscape Navigator (www.netscape.com) are the twomost popular browsers available today. You should alsotest your pages in a few of the lesser-known browsers,such as Opera (www.opera.com) and Amaya(www.w3.org/Amaya/). For a complete list of browsers,visit http://dir.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/Browsers.

03_579843 ch01.qxd 6/18/05 12:09 AM Page 8

HTML and Web Page Basics

9

chapter1In the early days of Webdevelopment, plain old texteditors were the application ofchoice. Today, you can use avariety of programs to writeyour HTML code.

EXPPLOORE

EXPPLOORE

Explore HTML Editors

Word Processing ProgramsYou can also use word processingprograms, such as Microsoft Word,to write HTML. Use caution,however, because commercialword processors can storeextraneous information with yourfiles, some of which interferes withHTML.

WordPerfect Word

Microsoft

HLMT

HLMTH LM

THLMTH

LLLLLLLMMMT

HHHLMHHH

MMLLLLLLLMMMMMM

M

MMMMTTTHHMMHHLLLLLLMMMMMMM

TTTTTTHH MMMM

MMMMTTTTTTMMMMTHMM

TTTTHHLLMMM

L

M

TMMMMM

L

M

TMMHHHHHHH

M

H

Process

<HTML Code>

EDITOR

Dreamweaver

FrontPage

Simple Text EditorsSimple text editors, also calledplain-text editors, are easy to find.Most computers come with one,such as Windows Notepad. You canalso find shareware and freewareversions on the Internet, such asTextPad, EditPad Lite, and UltraEdit.Simple text editors offer no-frillsword processing and are often thebest choice for writing HTML code.

TeexttPaad

EddiittPaadLLite

HTML EditorsHTML editors are dedicatedprograms for writing HTML code.Microsoft FrontPage and MacromediaDreamweaver are examples of HTMLeditors. HTML editors can shield youfrom learning HTML code in detail byoffering a graphical environment forbuilding Web pages. However, mostalso allow you to switch to text-based editing as well.

03_579843 ch01.qxd 6/18/05 12:09 AM Page 9

The HTML language is a simplelanguage for describing Webpage content. HTML rules,called syntax, govern the way inwhich code is written. Learningthe right way to write your codecan save you confusion anderrors later.

10

ElementsElements identify the different parts of your HTMLdocument. For example, <BODY> and </BODY> aretags defining the body text element on a page. Thebrowser reads any text between the two tags as part ofthe body element. Many elements use tag pairs, anopening and closing tag, such as <P> and </P>, whileothers, such as the Image tag (<IMG>) do not. Closingtags must always include a slash (/).

B<Body>

H<Head>

F<Form>

O<Object>

M<Map>

L<Link>

T<Table>

S<Style>

Writing HTMLThe instructions you write in HTML are called tags. Tagsare surrounded by angle brackets, < >. You can writetags in upper- or lowercase letters. Many users preferto write their tags in uppercase to make them easier toidentify on the document page. If you create a page inXHTML, a stricter variation of HTML, you need to uselowercase letters for your tags.

MY HTML

<html><head>

<t i t le>>

RRuulleess syynntaax=1.22.3.

Understanding HTML Syntax and Rules

03_579843 ch01.qxd 6/18/05 12:09 AM Page 10

HTML and Web Page Basics chapter1

11

<all ignn = "" leefftt"">>

Atttrr ibuuteess && Vaalluuees

GLUE

Avoid Syntax ErrorsTo avoid HTML errors, always take time to proofreadyour code. Make sure you have brackets on your tagsand that your closing tags include a slash. You mustsurround any values you define for attributes withquotation marks. It also helps to write your closingtags in reverse order of the opening tags. For example:

<P ALIGN="center"><B>My text.</B></P>

To help make your HTML readable, consider using newlines to enter code instead of running everythingtogether on one long line. Using white space can alsohelp, without increasing the file size.

EntitiesAny special characters you add to a page, such as acopyright symbol or a fraction, are called entities.HTML uses entities to represent characters not readilyavailable on the keyboard. All entities are precededwith an ampersand (&) and ended with a semicolon(;). For example, to add a copyright symbol to yourpage, the code looks like this:

&copy;

Attributes and ValuesEach element has unique attributes you can assign.Many attributes require that you set a value, such as ameasurement or specification. For example, you canset a paragraph’s alignment on the page using theALIGN attribute, and set a value for the alignment byspecifying the value as left, right, or center. Forexample, the code might read:

<P ALIGN="center">My paragraph text.</P>

Values are always enclosed in quotation marks andappear within the element’s start tag.

03_579843 ch01.qxd 6/18/05 12:09 AM Page 11

VIEW THE SOURCE CODE

1 Open your browser window to the page you want to view.

2 Click View.

3 Click Source (Internet Explorer) or Page Source (Navigator).

44

22

33Source

View HTML Code in a Browser

12

A window appears displaying the HTMLsource code for the page.

4 Click the Close button ( ) whenfinished.

The window closes.

You can view the HTML code forany Web page using your browserwindow. Viewing other Webdevelopers’ code is a good way tolearn how to write your own code,and it can help you generate newideas for your own pages. You canalso save a Web page to study later.

<html>

<head> <t i t le> my web page </tit le> </head>

<html>

<head> <t i t le> my web page </tit le> </head>If you generate HTML code using a

program, such as Microsoft FrontPageor Macromedia Dreamweaver, the codecan appear overwhelmingly complex.

View HTML Code in a Browser

03_579843 ch01.qxd 6/18/05 12:09 AM Page 12

SAVE AN HTML DOCUMENT

1 With the source code window open, click File.

2 Click Save As (Internet Explorer) or Save Page As (Navigator).

11

22Save As...

33

44 55

HTML and Web Page Basics

13

chapter1

The Save As dialog box appears.

3 Navigate to the folder where you want tostore the page.

4 Type a name for the page.

5 Click Save.

The page is saved.

Can I copy the source codefrom another page?You can copy HTML code yousee on other pages; however,you should always obtainpermission to reuse ityourself. Most Web pageauthors are happy to sharetheir code with others,especially somethingcomplex and innovative, butmake sure it is okay beforeattempting to do so.

How do I print the HTMLcode from the viewerwindow?You can print the code fromthe text viewer window byclicking File and clickingPrint. This opens the Printdialog box, where you canchoose a printer or clickPrint to print your code. This technique works in bothInternet Explorer and Navigator.

<CODE>

03_579843 ch01.qxd 6/18/05 12:09 AM Page 13

14

Design OptionsWhen designing your site, you need to decide how youwant your pages organized in terms of flow. Forexample, do you want the user to start with a homepage and progress to each page on the site, or do youwant to allow the user to jump to different pagesradiating off the home page? Take time to sketch outthe flow of your site and how each page is connected,starting with the main page.

PPlaann 11

Home Page

Pllann 33Home Page

Plann 22

Home Pageme Pageme ge

A Home PageMost Web sites start with a home page, the main pageof the site. A home page includes an introduction tothe site as well as links to other pages on the site. Thehome page is usually the first page users see whenthey visit your Web site, and it often uses index.html orindex.htm as the filename.

My HHomePaggee.ccoomm

Monk’’ss HHoommeePaaggee..ccom

Ritaa’’s HHoomPaagee.coom

Planning is essential for creatinga Web site, whether your siteconsists of one page or many.Start by deciding what your goalis for the site and the type ofinformation you want to convey.Next, gather all the necessaryinformation you need to buildyour pages, including text,images, multimedia files, andother pertinent data. Choose atext editor in which to writeyour HTML code and you areready to begin.

TEXT

IMAGES

COLORS

MUL

TEXTMY Web Page

TextImages

Multimedia

Colors

T

C

Plan a Web Site

03_579843 ch01.qxd 6/18/05 12:09 AM Page 14

HTML and Web Page Basics chapter1

15

BBaacckkBaacckk

Hoommee Paagee

Nextt Nexxtt

Home Paggee 22

Spider WebA Web layout flows out from the home page much likea spider web. Users can link to different pages withoutprogressing from page to page in a certain order. Witha Web layout, pages include links to other pages onthe site, which allow the user to move freely fromtopic to topic.

Study Other Web SitesResearch can really help you determine how you wantyour site to flow and help you gather ideas for pagedesign. Visit your favorite Web sites and study how theWeb developer lays out the content. Take note of thedesign details that make some Web sites more user-friendly and appealing than others, and try to emulatethose same principles in your own pages.

HierarchicalA hierarchical layout resembles a pyramid, with the homepage at the top and other pages linking out from the toppage. Hierarchical layouts are good for introducing brieftopics on the top page in the layout and presentinggreater topic details in subsequent pages.

LinearA linear site layout moves the user through your pagesin a linear fashion. Linear layouts are good forpresenting a series of steps or graduated information.Linear layouts usually link the user to the next orprevious page, allowing your visitor to move forwardand backward in the site.

03_579843 ch01.qxd 6/18/05 12:09 AM Page 15