XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,

XP

1

Developing a Basic Web Developing a Basic Web PagePage

Tutorial 1

XP

2

Introducing the World Wide WebIntroducing the World Wide Web

NetworkNetwork -- linking computers, sharing linking computers, sharing resourcesresources

hosthost or or nodenode -- access networkaccess network ServerServer - resources available to network- resources available to network Client-server networkClient-server network

XP

3


linked within a local area network linked within a local area network (LAN)(LAN) Metropolitan area network Metropolitan area network (MAN)(MAN) linked across a wide area network linked across a wide area network (WAN)(WAN) Personal area network Personal area network (PAN)(PAN) Wireless Wireless (WLAN)(WLAN)

XP

4


Internet -global network - connects IP networksInternet -global network - connects IP networks IP - internet protocol - basic protocolIP - internet protocol - basic protocol

WEB - internet-based distributed information WEB - internet-based distributed information systemsystem

Network is computerNetwork is computer

XP

5

Structure of the InternetStructure of the Internet

XP

6

The Development of the Word Wide WebThe Development of the Word Wide Web

WWW - grows rapidly - extent, capabilities, WWW - grows rapidly - extent, capabilities, applications, global expansionapplications, global expansion Powerful tool - mass communication, e-business, e-Powerful tool - mass communication, e-business, e-

commercecommerce Strength - openness, speed, low cost of entryStrength - openness, speed, low cost of entry

InternetInternet IntranetIntranet ExtranetExtranet HyperlinksHyperlinks Virtual office or store - always open, supported Virtual office or store - always open, supported

by workers from anywhereby workers from anywhere

XP

7

Linear versus hypertext Linear versus hypertext documentsdocuments

XP

8

Hypertext DocumentsHypertext Documents

Enabling technologiesEnabling technologies Networking protocolsNetworking protocols Data encoding formatsData encoding formats Clients (browsers)Clients (browsers) ServersServers Markup and styling languagesMarkup and styling languages Client-side and server-side programmingClient-side and server-side programming

HTTP - hypertext transfer protocolHTTP - hypertext transfer protocol CSSCSS JavascriptJavascript CGI - common gateway interfaceCGI - common gateway interface

XP

9

Hypertext DocumentsHypertext Documents

Web siteWeb site Web pageWeb page Web - consists of vast collection of documents Web - consists of vast collection of documents

located on computers throughout the world - in located on computers throughout the world - in special formats and retrieved through server special formats and retrieved through server programs on each computerprograms on each computer

XP

10

Web Servers and Web BrowsersWeb Servers and Web Browsers

A A Web pageWeb page is stored on a is stored on a WebWeb serverserver, which in turn makes , which in turn makes it available to the networkit available to the network

To view a To view a WebWeb pagepage, a client runs a software program called , a client runs a software program called a a WebWeb browserbrowser, which retrieves the page from the server and , which retrieves the page from the server and displays itdisplays it

Text-based browser - LynxText-based browser - Lynx Graphical browser - opera, firefox, IE, Netscape, SafariGraphical browser - opera, firefox, IE, Netscape, Safari Sufficient understanding - master new communication mediumSufficient understanding - master new communication medium

Artistic designArtistic design Visual communicationVisual communication Information architectureInformation architecture Color and graphicsColor and graphics programmingprogramming

XP

11

Using a browser to view a Web document from Using a browser to view a Web document from a Web servera Web server

XP

12

HTML: The Language of the WebHTML: The Language of the Web

Hypertext Markup LanguageHypertext Markup Language A A markupmarkup languagelanguage - language that - language that

describes a document’s structure and contentdescribes a document’s structure and content HTML - not a programming language or a HTML - not a programming language or a

formatting languageformatting language StylesStyles - format descriptions written in a - format descriptions written in a

separate language from HTML that tell separate language from HTML that tell browsers how to render each element. browsers how to render each element.

XP

13

The History of HTMLThe History of HTML

The first version of HTML - The first version of HTML - Standard Standard Generalized Markup Language (SGML)Generalized Markup Language (SGML)

DeprecatedDeprecated XML - extensible markup languageXML - extensible markup language XHTML - extensible hypertext markup XHTML - extensible hypertext markup

languagelanguage

XP

14

Tools for CreatingTools for CreatingHTML DocumentsHTML Documents

Basic text editor - NotepadBasic text editor - Notepad HTML ConverterHTML Converter - converts formatted text into - converts formatted text into

HTML codeHTML code HTML EditorHTML Editor – create an HTML file by inserting – create an HTML file by inserting

HTML codes for you as you workHTML codes for you as you work

XP

15

Creating an HTML DocumentCreating an HTML Document

Core - web site developmentCore - web site development Visual communication designVisual communication design ProgrammingProgramming

Good web siteGood web site Serve intended purposeServe intended purpose Structure and organize content of site - effective Structure and organize content of site - effective

and efficient deliverand efficient deliver ConvenientConvenient PleasingPleasing FunctionalFunctional AttractiveAttractive

XP

16


To achieve goals - expertly produced site - more cost To achieve goals - expertly produced site - more cost effective than other mass communicationseffective than other mass communications Information architectureInformation architecture Visual communication designVisual communication design Color and graphicsColor and graphics FontsFonts LayoutLayout Visual hierarchyVisual hierarchy SymmetrySymmetry BalanceBalance UnityUnity VariationVariation

XP

17


XP

18


•Element - distinct objectElement - distinct object•DocumentDocument•ParagraphParagraph•HeadingHeading•Page titlePage title

XP

19

Marking Elements with TagsMarking Elements with Tags

The core building block of HTML - The core building block of HTML - tagtag, which marks , which marks each element in a documenteach element in a document

A A two-sided tagtwo-sided tag - - <element>content</element><element>content</element>

A two-sided tag’s opening tag (<p>) and closing tag A two-sided tag’s opening tag (<p>) and closing tag (</p>) - completely enclose its content(</p>) - completely enclose its content

A one-sided tag contains no content; general syntax A one-sided tag contains no content; general syntax for a one-sided tag:for a one-sided tag:

<element /><element /> A third type of tag is the comment tag, which you can A third type of tag is the comment tag, which you can

use to add notes to your HTML codeuse to add notes to your HTML code<!– comment --><!– comment -->

XP

20

White Space and HTMLWhite Space and HTML

HTML file documents - composed of text HTML file documents - composed of text characters and characters and white spacewhite space

WhiteWhite spacespace - blank space, tabs, and line - blank space, tabs, and line breaks within the filebreaks within the file

HTML treats each occurrence of HTML treats each occurrence of whitewhite spacespace as a single blank spaceas a single blank space

Use Use whitewhite spacespace - document more readable - document more readable

XP

21

Element AttributesElement Attributes

Many tags contain attributes that control Many tags contain attributes that control the behavior, and in some cases the the behavior, and in some cases the appearance, of elements in the pageappearance, of elements in the page

Attributes are inserted within the tag Attributes are inserted within the tag bracketsbrackets

<element attribute1=“value1” attribute2=“value2” …/><element attribute1=“value1” attribute2=“value2” …/>for one-side tagsfor one-side tags

<element attribute1=“value1” attribute2=“value2” <element attribute1=“value1” attribute2=“value2” …>content</element>…>content</element>

for two-sided tagsfor two-sided tags

XP

22

The Structure of an HTML FileThe Structure of an HTML File

<html><html> - - </html></html> Anything between these two tags makes up the Anything between these two tags makes up the

content of the document, including all other content of the document, including all other elements, text, and commentselements, text, and comments Head element - information about documentHead element - information about document

Title elementTitle element Body element - contains all content of web pageBody element - contains all content of web page NestingNesting Block level elements - separate sectionBlock level elements - separate section Inline elementsInline elements

XP

23

Initial HTML code in chem.htmInitial HTML code in chem.htm

XP

24

Initial Web page viewed in Internet Initial Web page viewed in Internet ExplorerExplorer

XP

25

Creating HeadingsCreating Headings

HTML supports six heading elementsHTML supports six heading elements

XP

26

StylesStyles

InlineInline stylesstyles Text-alignText-align stylestyle - horizontally align - horizontally align PresentationalPresentational attributesattributes specify exactly specify exactly

how the browser should render an elementhow the browser should render an element Creating paragraphs - start a new lineCreating paragraphs - start a new line

XP

27

Creating ListsCreating Lists

HTML supports three kinds of lists: HTML supports three kinds of lists: ordered, ordered, unordered, and definitionunordered, and definition

OrderedOrdered listlist - appear in a particular sequential - appear in a particular sequential orderorder

UnorderedUnordered listlist - do not need to occur in any - do not need to occur in any special orderspecial order

One One listlist can contain another list; this is called can contain another list; this is called a nested lista nested list

XP

28

Applying a Style to a ListApplying a Style to a List

XP

29

Creating a Definition ListCreating a Definition List

The The definitiondefinition listlist contains a list of contains a list of definition terms, each followed by a definition terms, each followed by a definition descriptiondefinition description

Web browsers typically display the Web browsers typically display the definition description below the definition definition description below the definition term and slightly indentedterm and slightly indentedChemistry IChemistry I

An introductory course requiring solid algebra An introductory course requiring solid algebra skillsskills

XP

30

Working with Inline ElementsWorking with Inline Elements

Character formatting elements - format text Character formatting elements - format text characterscharacters

A A logical elementlogical element describes the nature of the describes the nature of the enclosed content, but not necessarily how that enclosed content, but not necessarily how that content should appearcontent should appear

A A physicalphysical elementelement describes how content should describes how content should appear, but doesn’t indicate the content’s natureappear, but doesn’t indicate the content’s nature

You should use a You should use a logicallogical elementelement that accurately that accurately describes the enclosed content whenever possible, describes the enclosed content whenever possible, and use and use physicalphysical elementselements only for general content only for general content

XP

31

Working with Empty ElementsWorking with Empty Elements

To display a graphic - To display a graphic - inlineinline imageimage - displays a - displays a graphic image located in a separate file within the graphic image located in a separate file within the contents of a block-level elementcontents of a block-level element

Horizontal line - the one-sided tag Horizontal line - the one-sided tag <hr /><hr /> A A pixelpixel - - dot on your computer screen that dot on your computer screen that

measures about 1/72” squaremeasures about 1/72” square Other Other empty elementsempty elements - - lineline breaksbreaks and and metameta

elementselements MetaMeta elementselements are placed in the document’s head are placed in the document’s head

and contain information about the document that and contain information about the document that may be of use to programs that run on Web serversmay be of use to programs that run on Web servers

XP

32

Occasionally you will want to include Occasionally you will want to include special characters in your Web page that special characters in your Web page that do not appear on your keyboarddo not appear on your keyboard

HTML supports the use of character HTML supports the use of character symbols that are identified by a code symbols that are identified by a code number or namenumber or name

₤ ®

Working with Special CharactersWorking with Special Characters

&code

XP

33

Working with Special CharactersWorking with Special Characters

XP

34

Summary:Summary:Tips for Good HTML CodeTips for Good HTML Code

Use line breaks and indented text to make Use line breaks and indented text to make your HTML file easier to readyour HTML file easier to read

Insert comments into your HTML file to Insert comments into your HTML file to document your workdocument your work

Enter all tag and attribute names in Enter all tag and attribute names in lowercaselowercase

Place all attribute values in quotesPlace all attribute values in quotes Close all two-sided tagsClose all two-sided tags

XP

35


Make sure that nested elements do not crossMake sure that nested elements do not cross Use styles in place of presentational elements Use styles in place of presentational elements

whenever possiblewhenever possible Use logical elements to describe an element’s Use logical elements to describe an element’s

content content Use physical elements to describe the Use physical elements to describe the

element’s appearanceelement’s appearance

XP

36


Include the alt attribute for any inline image to Include the alt attribute for any inline image to specify alternative text for non-graphical specify alternative text for non-graphical browsersbrowsers

Know your market and the types of browsers Know your market and the types of browsers that your audience will use to view your Web that your audience will use to view your Web pagepage

Test your Web page on all relevant browsersTest your Web page on all relevant browsers

XP

37

Assign #1Assign #1 - Chapter 1, Tutorial 1, print html - Chapter 1, Tutorial 1, print html code only (due 9/26/06).code only (due 9/26/06).

Assign #2Assign #2 - Case Problem #1, pg. 46-48, - Case Problem #1, pg. 46-48, Case Problem #2, pg. 48-50, print HTML code Case Problem #2, pg. 48-50, print HTML code only (due 10/3/06).only (due 10/3/06).