wooldridge/tyv html & css

15
Click here to buy the book. Sample Chapter

Upload: john-wiley-and-sons

Post on 30-Mar-2016

245 views

Category:

Documents


1 download

DESCRIPTION

sample chapter

TRANSCRIPT

Page 2: Wooldridge/TYV HTML & CSS

1 chapter

Getting Familiar withHTML and Web PageBasics

Are you interested inbuilding your own Webpages? This chapterintroduces you to HTML,the language used to createWeb pages. It also explainsthe basics behind HTMLeditors and Web browsers,which you use to designand view your Web content.

HTML Basics1.2.3.

03 285886-ch01.qxp 5/19/08 3:35 PM Page 2

COPYRIG

HTED M

ATERIAL

Click here to buy the book.

Page 3: Wooldridge/TYV HTML & CSS

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

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

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

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

Understanding HTML Syntax ..........................10

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

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

03 285886-ch01.qxp 5/19/08 3:35 PM Page 3

Click here to buy the book.

Page 4: Wooldridge/TYV HTML & CSS

The Internet is a worldwide collectionof interconnected computer networksthat enables businesses, organizations,governments, and individuals tocommunicate in a variety of ways.One of the most popular ways userscommunicate on the Internet is bypublishing and interacting with Webpages. You can also use the Internetto send and receive e-mail, chat withother users, and transfer files betweencomputers.

connecting...

The Internet began as a militaryresearch project in the late 1960s. In2007, the number of Internet usersaround the globe topped 1.2 billion.

Internet Basics

4

Connection SpeedsConnection speeds play an important part in a user’sInternet experience because slower connections resultin slower file transfers and Web page viewing. Dialupconnections offer the slowest access to the Internet atup to 56 kilobits per second, or Kbps, followed byISDN connections at 64 to 128 Kbps. DSL usually offersconnection speeds of up to 3 megabits per second, orMbps, while cable modems can achieve speeds of upto 6 Mbps. A Web page that takes about 20 seconds todownload via dialup can take less than a second usinga cable modem.

Types of ConnectionsUsers connect to the Internet through a variety ofmethods. A relatively inexpensive but slow way toconnect is with dialup service, which involves using amodem and a phone line. Faster ways to connectinclude DSL (digital subscriber line), cable modem,satellite, and ISDN (integrated services digital network).Networks include special wireless transmitters that allowcomputers to access the Internet wirelessly. Companiesthat help you connect to the Internet are known asInternet service providers, or ISPs.

56kbps56kbps

3.0M3.0M3.0M3.0M 56kbps56kbps

03 285886-ch01.qxp 5/19/08 3:35 PM Page 4

Click here to buy the book.

Page 5: Wooldridge/TYV HTML & CSS

5

The World Wide WebThe World Wide Web is a giant collection ofdocuments, or pages, stored on computers aroundthe globe. Commonly called the Web, this collectionof pages represents a wealth of text, images, audio,and video available to anyone with a computer andan Internet connection. Web pages are stored onservers, which are Internet-connected computersrunning software that allows them to serve upinformation to other computers. When you place atext file, image, or other document in a special Webdirectory on a server, that information is available forother Web users to view. Chapter 15 talks about howto transfer information to a Web server.

TRANSMISSION CONTROL/INTERNET PROTOCOL

TRANSMISSION CONTROL/INTERNET PROTOCOL 2008

2008

TTRANSMISSION CONTROL/INTERNET PROTOCOL

TRA N CONTN CONTTT ARARAAAAA SSSSRR OOSSMMNNNN MM CCOOTT SSRR NSMISSION CONTROL/INTERNET PROTO

NSMISSION CONTROL/INTERNET PROTOOSMISSION CONTROL/

SMISSION CONTROLIOIOSSIOSSIOSION CONSION CONON CONTRON CONTRCOCOCCOO ROL/INROL/INTROL/INTERNET PROTROL/INTERNET PROOL/INTEROL/INTER OONN CCOOTERNET PROTOCOL

TERNET PROTOCOLERNET PROTOCOERNET PROTOCOTRANSMISSION CONTROL/INTERNET PROTOCOL 08 008000808 00

8Rules of TCP/ IPRules of TCP/ IP 2008

2008

PRR l f TCP/ IPR l f TCP/ IPRR PPRRR Pl f TCP/ IPR l f TCPPP/P/ PPPTCP/ IPIP

8000 088 08

TCP/IP for short 2008

TCP/IP for short 08

URLs and LinksEvery page on the Web has a unique address called aURL, which is short for Uniform Resource Locator. AURL looks like this:

http://www.example.com/index.html

If you know a page’s URL, you can type it into a Webbrowser to view that page over the Internet. You canalso view pages by way of hyperlinks, or simply links,which are clickable words or images on Web pages.Every link on a Web page is associated with a URLthat leads to another page on the Internet. Users canjump from one Web page to another by clicking links.Chapter 6 discusses how to create links with HTML.

BrowsersA Web browser is software that allows you to viewand interact with Web pages. When you type a URLor click a link in a Web browser, the browser retrievesthe appropriate page from a server on the Internetand displays that page. Microsoft Internet Explorer,Mozilla Firefox, and Apple Safari are the three mostpopular browsers in use today. Each program hasevolved through a number of versions, with newerversions supporting more recent Web features. As youbuild your pages using HTML code, remember thatdifferent browsers may display your pages slightlydifferently depending on the version.

2 .com1 .com

Link to 2Link to 2

Getting Familiar with HTML and Web Page Basics chapter1Communication StandardsThe Internet infrastructure relies on a variety ofprotocols that dictate how computers and networkstalk to each other. For example, Transmission ControlProtocol/Internet Protocol, or TCP/IP, is a set of rulesthat control how Internet messages flow betweencomputers. HyperText Transfer Protocol, or HTTP, is aset of rules that determine how browsers shouldrequest Web pages and how server computers shoulddeliver them. Having agreed-upon protocols allowsseamless communication among the many differenttypes of computers that connect to the Internet.

03 285886-ch01.qxp 5/19/08 3:35 PM Page 5

Click here to buy the book.

Page 6: Wooldridge/TYV HTML & CSS

You build Web pages using HTML,which is short for HyperTextMarkup Language. HTMLdocuments are made up of textcontent and special codes known astags that tell Web browsers how todisplay the content. HTMLdocuments are identified by their.html or .htm file extensions.

<TITLE>

<HEAD>

</BODY>

<TITLE>

</HEAD>

<BODY>For the most part, HTML is platformindependent, which means you canview Web pages on any computeroperating system, including Windows,Mac, and Linux.

An Introduction to HTML

6

Rendering HTMLWhen a browser displays a Web page, it retrieves theHTML file for that page from a server, parses theHTML tags to determine how the content should beformatted, and renders the page. The HTML tags tellthe browser what images, video, audio, and othercontent need to be downloaded and integrated intothe page. The HTML may also tell the browser todownload style sheets and interactive scripts tofurther enhance the page. To view the HTMLunderlying a Web page, see the section “View HTMLCode in a Browser.”

HTML TagsHTML consists of text interspersed with specialinstructions known as tags. Surrounded by brackets,< >, HTML tags tell a browser how to organize andpresent text, images, and other Web page content.Many tags are written using an opening tag and aclosing tag that surround content that appears onthe page. When writing HTML tags, you can useupper- or lowercase letters. To make the codingeasy to distinguish from other text in the page, youcan type tag names in uppercase. For details, seethe section “Understanding HTML Syntax.”

StandardsXHTMLHTML

<Tag>W3C

<body>

<titl

e> <head>

<img>

<tab

le>

03 285886-ch01.qxp 5/19/08 3:35 PM Page 6

Click here to buy the book.

Page 7: Wooldridge/TYV HTML & CSS

7

HTML StandardsThe World Wide Web Consortium, or W3C, is theprimary group guiding the evolution of the HTMLlanguage. The W3C is made up of hundreds ofcompanies and organizations including Web industryleaders such as Microsoft, Apple, and Google. Thestandards developed by the W3C give developers ofWeb servers and browsers a set of commonguidelines with which to develop their products. Youcan visit the W3C’s Web site at www.w3.org.

HTML VersionsThe most recent version of HTML is 4.01. Version 4.01includes rules for using more than 90 HTML tags, mostof which are covered in this book. It improves onprevious versions by adding better support formultimedia, scripting, and style sheets. Support forstyle sheets is especially important because it allowsdevelopers to apply more precise formatting to Webpages. It also allows developers to keep complexstyling information separate from the rest of the HTML.Style sheets are covered in Chapters 10, 11, and 12.

HTML 4.0

FormattingRoom

CSS

3CSS

2CSS

1

W3C

StandardsHTML

XHTMLXHTML, or Extensible HyperText Markup Language, isan alternative language for coding Web pages thatconforms to the stricter standards of XML, orExtensible Markup Language. XHTML is tag-basedand uses many of the same tags as in HTML.However, in XHTML, all tags must be closed, tagnames and attributes must be coded in lowercase,and attribute values for tags must be surrounded byquotes. Most modern browsers can read both HTMLand XHTML. Although XHTML is not covered in thisbook, you can read more about it at the W3C site atwww.w3.org.

Next Generation of HTMLAs this book is being published, the W3C isdeveloping the specification for HTML 5, the nextversion of HTML. This version will introduce featuresto help Web designers more easily create andmaintain the dynamic pages seen in many of today’sWeb sites. HTML 5 will include tags for definingheaders, footers, and navigation sections, along withtags for adding interactive elements such as editableand sortable tables. For more information, seewww.whatwg.org/html5.

HTML4

TMLMLHTML5

TMLML

XHTML

XHTML

XHTML

SECURITYHIGHRESTRICTED

AREATAGS REQUIRED

Getting Familiar with HTML and Web Page Basics chapter1

03 285886-ch01.qxp 5/19/08 3:35 PM Page 7

Click here to buy the book.

Page 8: Wooldridge/TYV HTML & CSS

A Web browser is software thatcan retrieve HTML documentsfrom the Web, parse the HTMLinstructions, and display theresulting Web pages. You can alsouse a browser to display HTMLdocuments you save locally onyour computer. When codingyour HTML, you can use a Webbrowser to test your work.

HTMLHTML

Explore Web Browsers

8

Browser DiscrepanciesThere are many Web browsers in use today, andnumerous versions of each. While most of theminterpret HTML essentially the same way, slightdifferences in interpretation mean that not all ofthem display Web pages exactly the same way. Also,some more recent browser versions recognize newerHTML features that older browsers do not. You canavoid surprises by writing clean, well-formed HTMLcode and testing your pages in different browsers asyou work. The Wikipedia offers a detailed comparisonof Web browser features at http://wikipedia.org/wiki/Comparison_of_web_browsers.

Finding a BrowserMost computer operating systems come with a Webbrowser already installed. Microsoft Windows Vistacomputers include the Internet Explorer browser,while Apple Mac computers include the Safaribrowser. (The examples in this book use InternetExplorer.) Mozilla Firefox is another Web browserthat has become increasingly popular in recentyears. You can learn more about Firefox anddownload it free at www.mozilla.com/firefox. Formore information about the Web browsers in usetoday, see the Wikipedia at http://wikipedia.org/wiki/Web_browser.

BrowsersFor Good

Homes

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

03 285886-ch01.qxp 5/19/08 3:35 PM Page 8

Click here to buy the book.

Page 9: Wooldridge/TYV HTML & CSS

9

<title> <body>

<head><table>

<body>

<table>

e>

Because HTML documents areplain-text documents, you canuse any text-editing program tocode HTML and create a Webpage. You can also use a varietyof Web-specific codingenvironments that will writeyour HTML code, validate it,and upload it to a Web server.

Simple Text EditorsSimple text editors, also calledplain-text editors, are easy to find.Microsoft Windows Vista comeswith Notepad, while Apple Maccomputers come with TextEdit.Simple text editors offer no-frillsword processing and are often thebest choice when you are learningto write HTML. This book uses theWindows WordPad and Notepadtext editors in its examples. TheWikipedia has a list of free andcommercial text editors athttp://wikipedia.org/wiki/List_of_text_editors.

Word Processing ProgramsYou can also use word processingprograms, such as Microsoft Word,to write HTML. In Word, you canselect HTML as the file type whenyou save a document, and theprogram automatically adds theappropriate HTML tags. However,commercial word processors tendto store lots of extra informationwith your HTML, which can makeit a challenge to edit the files inother editors.

Word Perfect Word

Microsoft

H L M T

H L M T H L

M

T H L M T H

LLLLLLLMMMT

HHHLMHHH

MMLLLLLLLMMMMMM

M

MMMMTTTHHMMHHLLLLLLMMMMMMM

TTTTTTHH MMMM

MMMMTTTTTTMMMMTHMM

TTTTHHLLMMM

L

M

TMMMMM

L

M

TMMHHHHHHH

M

H

Process

TextPad

EditPadLite

Explore HTML Editors Getting Familiar with HTML and Web Page Basics chapter1

HTML EditorsHTML editors, such as AdobeDreamweaver and MicrosoftExpression, are dedicated programsfor writing HTML code andmanaging Web pages. Theseprograms can shield you fromhaving to write HTML code byoffering a graphical environment forbuilding Web pages as well as atext-based environment. Most HTMLeditors will also color your HTMLtags for easier viewing, validate yourcode, and help you upload finishedpages to a server.

<HTML Code>

EDITOR

Dreamweaver

FrontPage

03 285886-ch01.qxp 5/19/08 3:35 PM Page 9

Click here to buy the book.

Page 10: Wooldridge/TYV HTML & CSS

Rules syntax=1.2.3.

Tag StructureCertain structural HTML tags identify different parts ofyour HTML document. For example, the <BODY> and</BODY> tags surround the main body content thatappears in the browser window. Many tags, such asthe paragraph tags (<P> and </P>), are written usingan opening tag and a closing tag while others, such asthe image tag (<IMG>), stand alone. Closing tagsmust always include a slash (/) before the tag name.

Writing HTMLIn HTML, tags determine how page content isorganized and formatted. Tags consist of words orabbreviations surrounded by angle brackets, < >.Tags can be written using upper- or lowercaseletters. You can type tag names in uppercase todistinguish the code from other text. This HTMLcode creates a paragraph in your page:

<P>Hello, world!</P>

MY HTML

<html><head>

<t i t le>>

<head>

<title>

</div> <p> </p> </b

</title> </head> <body>

id=>

10

Understanding HTML Syntax

HTML is a language fordescribing Web page content.HTML rules, or syntax, governthe way in which code is written.Learning the right way to writeyour code can save you time andconfusion later.

03 285886-ch01.qxp 5/19/08 3:35 PM Page 10

Click here to buy the book.

Page 11: Wooldridge/TYV HTML & CSS

11

EntitiesYou can add special characters to a page, such as acopyright symbol or a fraction, by using special codescalled entities. Entities represent characters not readilyavailable on the keyboard. All entities are preceded by anampersand (&) and followed by a semicolon (;). Forexample, the following code adds a copyright symbol toyour page:

&copy;

For more about entities and special characters, seeChapter 3.

Avoiding Syntax ErrorsTo avoid HTML errors, always take the time to proofreadyour code. Most HTML editors have features that highlightbad syntax. Make sure your tags have brackets, yourclosing tags include a slash, and your attribute values aresurrounded by quotation marks. Multiple HTML tagsshould be properly nested, meaning your closing tagsshould be in the reverse order of the opening tags. Forexample:

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

To help make your HTML readable, consider using newlines to type code instead of running everything togetheron one long line. Doing so will not affect how your page isdisplayed, because Web browsers ignore extra white space.

Attributes and ValuesYou can assign specific attributes to each HTML tag tocustomize its behavior. Most attributes work by setting anumeric or descriptive value. For example, you can set aparagraph’s alignment on the page using the ALIGNattribute along with a type of alignment: left, right, orcenter. The code for creating a centered paragraphlooks like this:

<P ALIGN=”center”>My centered text.</P>

Attributes always go inside the opening HTML tag, andit is good form to enclose attribute values in quotationmarks.

<p align="left">

Attributes & Values

GLUE

<HTML><HEAD><TITLE>OLD EN<META HTTP-EQ <META NAME=”

</HEAD><BODY BGCP;

Getting Familiar with HTML and Web Page Basics chapter1

03 285886-ch01.qxp 5/19/08 3:35 PM Page 11

Click here to buy the book.

Page 12: Wooldridge/TYV HTML & CSS

You can view the HTML code for any Web pagethat you have loaded into your Web browser.Viewing HTML from different Web sites is agood way to learn how to write your own codeand can spawn new ideas for your own pages.You can also save a Web page locally for use as atemplate or to study later.

<HTML>

<HEAD> <TITLE> MY WEB PAGE </TITLE> </HEAD>

<HTML>

<HEAD> <TITLE> MY WEB PAGE </TITLE> </HEAD>

View HTML Code in a Browser

View HTML Code in a Browser

12

VIEW THE SOURCE CODE

1 Open a Web page in yourbrowser window.

2 Click View.

3 Click Source.

44

22

33

A Notepad window appearsdisplaying the HTML source codefor the page.

4 Click the Close button ( )when finished.

The window closes.

In Microsoft Windows Vista, Internet Explorer opens theHTML code in the Notepad text editor. To view an HTMLpage that you have saved locally, see Chapter 2.

03 285886-ch01.qxp 5/19/08 3:35 PM Page 12

Click here to buy the book.

Page 13: Wooldridge/TYV HTML & CSS

13

Getting Familiar with HTML and Web Page Basics chapter1SAVE THE SOURCE CODE

1 In the Notepad window thatdisplays the source code, clickFile.

2 Click Save As.

33

44

55

11

22

The Save As dialog box appears.

3 Click here to navigate to thefolder where you want to storethe page.

4 Type a name for the page.

HTML pages should have an.html or .htm file extension.

5 Click Save.

Notepad saves the page.

Will the HTML documents that I save to mycomputer work when I open them in abrowser?Possibly. It depends on how the HTML is coded. Inaddition to the HTML, you may have todownload images, style sheets,scripts, and other external contentseparately, and then edit the HTMLso that the page references themcorrectly. For more about referencingcontent, see Chapter 6.

How else can I save a Web page in my browser?In Internet Explorer, you can click Fileand then Save As. The browsergives you several ways to saveyour page. “Complete” saves theHTML and embedded content,“HTML only” saves just theHTML, and “Web Archive” savesthe HTML and other content as asingle file.

WEB PAGE

WEB PAGE

WEB PAGE

03 285886-ch01.qxp 5/19/08 3:35 PM Page 13

Click here to buy the book.

Page 14: Wooldridge/TYV HTML & CSS

A Web site is a group of relatedWeb pages, all hyperlinkedtogether and hosted on a server.Before you start writing theHTML to create a site’s pages, itis a good idea to do someplanning. TEXT

IMAGES

COLORS

MUL

TEXTMY Web Page

TextImages

Multimedia

Colors

T

C

Plan a Web Site

14

Plan a Home PageThe home page is usually the first page a visitor seeswhen visiting a Web site, so it is important that itconcisely communicate the site’s purpose and whatinformation users can expect to find. It should alsoinclude prominent links to the other important pageson your site. Optimally, users should be able to seeall of this information without having to scroll in theirbrowser window. Clear communication is importanton all of your site’s pages, but especially on the homepage.

Know Your AudienceIt is important to understand the audience that willvisit the pages on your Web site. It is important toknow their technical ability so that you can uselanguage they are comfortable with. It is alsoimportant to know their interests so that you canpresent imagery and other content that will keepthem interested and at your site. You can conductinterviews with potential users early on to get ideasfor your site designs. You can also have users testout your site after it launches to get feedback onhow to improve it.

POPCORNPOPCORNPOPCORN

Griffin’s HomPage.com

Linda’s HomePage.com

Mike’s HomePage.com

03 285886-ch01.qxp 5/19/08 3:35 PM Page 14

Click here to buy the book.

Page 15: Wooldridge/TYV HTML & CSS

15

Site MapA useful tool for planning your site’s overall structureis a site map, which represents your Web pages asboxes and the hyperlinks as arrows. The home pageof a site is usually placed at the top of a site map. Asite map gives you an overview of the pages youneed to build and also shows the navigationalstructure. You should arrange your pages so thatimportant content is easy to get to from the homepage. You can sketch your site map using pencil andpaper or using software such as Microsoft Visio,which has tools specifically made for creating sitemaps.

Linear StructureA linear site layout moves the user through yourcontent in a step-by-step fashion, like pages in abook. Linear layouts are good for presentingsequential instructions or a narrative story. In a linearlayout, each Web page usually links to the next pageand the previous page. The site map of a linear sitewill have the pages arranged one after the other in aline.

Plan 1

Home Page

Plan 3 Home Page

Plan 2

Home Page me Pageme ge

Hierarchical StructureA hierarchical layout resembles a pyramid, with thehome page at the top and other pages fanning outfrom there. A hierarchical site map looks like acompany’s organizational chart or a family tree.Hierarchical layouts are appropriate for sites withcategorized content, such as online merchants. Eachbranch in such a site represents a product categorywith the for-sale items at the end of the branches.

Gathering ContentAfter you plan the pages and structure of your site,you need to gather the content. For simple sites, thismay involve writing text and shooting digital photos.More complex sites may require recording audio andvideo, creating illustrations, and programminginteractive media. You can organize all of this contentinto your Web pages using HTML.

Getting Familiar with HTML and Web Page Basics chapter1

03 285886-ch01.qxp 5/19/08 3:35 PM Page 15

Click here to buy the book.