Introduction to Windows XP CIS 100: Introduction to Computers Mr. A. Craig Dixon Spring 2006.
XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking...
-
Upload
dorcas-bates -
Category
Documents
-
view
212 -
download
0
Transcript of XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking...
![Page 1: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/1.jpg)
XP
1
Developing a Basic Web Developing a Basic Web PagePage
Tutorial 1
![Page 2: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/2.jpg)
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
![Page 3: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/3.jpg)
XP
3
Introducing the World Wide WebIntroducing the World Wide Web
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)
![Page 4: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/4.jpg)
XP
4
Introducing the World Wide WebIntroducing the World Wide Web
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
![Page 5: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/5.jpg)
XP
5
Structure of the InternetStructure of the Internet
![Page 6: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/6.jpg)
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
![Page 7: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/7.jpg)
XP
7
Linear versus hypertext Linear versus hypertext documentsdocuments
![Page 8: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/8.jpg)
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
![Page 9: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/9.jpg)
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
![Page 10: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/10.jpg)
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
![Page 11: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/11.jpg)
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
![Page 12: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/12.jpg)
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.
![Page 13: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/13.jpg)
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
![Page 14: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/14.jpg)
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
![Page 15: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/15.jpg)
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
![Page 16: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/16.jpg)
XP
16
Creating an HTML DocumentCreating an HTML Document
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
![Page 17: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/17.jpg)
XP
17
Creating an HTML DocumentCreating an HTML Document
![Page 18: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/18.jpg)
XP
18
Creating an HTML DocumentCreating an HTML Document
•Element - distinct objectElement - distinct object•DocumentDocument•ParagraphParagraph•HeadingHeading•Page titlePage title
![Page 19: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/19.jpg)
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 -->
![Page 20: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/20.jpg)
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
![Page 21: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/21.jpg)
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
![Page 22: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/22.jpg)
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
![Page 23: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/23.jpg)
XP
23
Initial HTML code in chem.htmInitial HTML code in chem.htm
![Page 24: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/24.jpg)
XP
24
Initial Web page viewed in Internet Initial Web page viewed in Internet ExplorerExplorer
![Page 25: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/25.jpg)
XP
25
Creating HeadingsCreating Headings
HTML supports six heading elementsHTML supports six heading elements
![Page 26: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/26.jpg)
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
![Page 27: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/27.jpg)
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
![Page 28: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/28.jpg)
XP
28
Applying a Style to a ListApplying a Style to a List
![Page 29: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/29.jpg)
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
![Page 30: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/30.jpg)
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
![Page 31: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/31.jpg)
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
![Page 32: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/32.jpg)
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
![Page 33: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/33.jpg)
XP
33
Working with Special CharactersWorking with Special Characters
![Page 34: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/34.jpg)
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
![Page 35: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/35.jpg)
XP
35
Summary:Summary:Tips for Good HTML CodeTips for Good HTML Code
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
![Page 36: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/36.jpg)
XP
36
Summary:Summary:Tips for Good HTML CodeTips for Good HTML Code
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
![Page 37: XP 1 Developing a Basic Web Page Tutorial 1. XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers,](https://reader035.fdocuments.us/reader035/viewer/2022070418/5697bfb81a28abf838c9f1a1/html5/thumbnails/37.jpg)
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).