Embed Size (px)
Citation preview
web111a_chapt01.ppt
Definitions
Hypertext DocumentsDocuments containing elements that can be selected
LinksActive pointers to other documents or files
InternetNetwork of servers around the world
Web PageSingle document displayed by a browser
Web SiteGroup of Web Pages (can consists of a Home Page only)
Home PageBeginning (door) to a Web Site
Elements of a Web Page
• Text
• Images
• Links
• Programs (JavaScript, VBScript, ASP, etc.)
Internet Service Provider (ISP)
• Direct connect to the Internet network
web111a_chapt01.ppt
Wide World Web
ISP
ISP
ISP
Web Server
Web Server
Web Server
Internet
* Phone line, DSL, Cable, etc. connections
# High speed connection
*
*
*
*
*
*
*
#
# #
web111a_chapt01.ppt
ISPWeb
ServerUser
1. User request web page (www.sample.htm)
2. Server locates requested page
3. Server returns requested page
4. Browser decodes HTML code and displays page
Process repeats
12
3 31
4
Internet Access
web111a_chapt01.ppt
Internet Access
Computer Hardware
Operating System
Applications
MS Word
PowerPoint
Netscape
Internet Explorer
Excel
web111a_chapt01.ppt
Language of the Web
HTMLHypertext Markup Language
Describes the content and format of documents
• Interpreted by the browser
• Frees designers of programming for specific browsers
• Speed in download
• Smaller files
• Problem: cannot control how each browser will display the page
• Brand differences (Netscape, Internet Explorer)
• Version of the browser
• Syntax
• <sometag properties>data of some kind</end of sometag>
• Extensions (new tags) to HTML
• Browser proprietary
• Decrease compatibility between browsers
• HTML tools
• Text editor (MS Word Pad, MS Word, etc.)
• HTML Converters (MS Word, Excel, PowerPoint)
• HTML Editors (Frontpage, Hot Dog, CuteHTML)
web111a_chapt01.ppt
HTML Syntax
Basic page layout
<HTML>
<HEAD>
<TITLE>this displays in the heading of the browser</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF"> background color
HTML tags, data, images, links
</BODY>
</HTML>
web111a_chapt01.ppt
HTML Syntax
TagsHTML codes to control the appearance of the document content
Two-Sided Tags
• Opening Tag: tells the browser when to begin the tag function
• Closing Tag: tells the browser when to stop the tag function
• <tagname properties> Opening Tag
• </tagname> Closing Tag
• Example
• <h1 align=“center”>WEB111A</h1>
• One-Sided Tags (Empty Tags)• Opening Tag: tells the browser when to begin the tag function
• <UL> begin list
• <LI> line 1 of list one-sided tag
• <LI> line 2 of list one-sided tag
• </UL> end list
web111a_chapt01.ppt
Heading Tags
Format:
<h?>heading-text</h>
? = size of heading desired
1 – 6
Smaller the #, the larger the text
1 = largest text
6 = smallest text
<center><font size=? Color=?>some Text</font></center>
web111a_chapt01.ppt
Paragraph Tags
Format: Paragraph Tag
<p>paragraph tag: inset text between the opening and closing tag - puts a blank line between paragraphs</p>
Puts a blank line between paragraphs
<br> Line returns (carriage returns)
web111a_chapt01.ppt
Lab I
Page 1.12 – 1.22
web111a_chapt01.ppt
1.this is line 1 2.this is line 2 3.this is line 3 4.this is line 4
This is an ORDERED LIST with no TYPE attribute
<ol><li>this is line 1<li>this is line 2<li>this is line 3<li>this is line 4</ol>
This is an ORDERED LIST with TYPE = 1
<ol type="1"><li>this is line 1<li>this is line 2<li>this is line 3<li>this is line 4</ol>
1.this is line 1 2.this is line 2 3.this is line 3 4.this is line 4
Ordered Lists
web111a_chapt01.ppt
Ordered Lists
This is an ORDERED LIST with TYPE = A or a
<ol type="A"><li>this is line 1<li>this is line 2<li>this is line 3<li>this is line 4</ol>
A.this is line 1 B.this is line 2 C.this is line 3 D.this is line 4
This is an ORDERED LIST with TYPE = I or i
<ol type="I"><li>this is line 1<li>this is line 2<li>this is line 3<li>this is line 4</ol>
I. this is line 1 II. this is line 2 III. this is line 3 IV. this is line 4
web111a_chapt01.ppt
Unordered Lists
This is an UNORDERED LIST with no TYPE attribute
<ul><li>this is line 1<li>this is line 2<li>this is line 3<li>this is line 4</ul>
• this is line 1 • this is line 2 • this is line 3 • this is line 4
This is an UNORDERED LIST with TYPE square
<ul type="square"><li>this is line 1<li>this is line 2<li>this is line 3<li>this is line 4</ul>
• this is line 1 • this is line 2 • this is line 3 • this is line 4
This is an UNORDERED LIST with TYPE circle
<ul type="circle"><li>this is line 1<li>this is line 2<li>this is line 3<li>this is line 4</ul>
o this is line 1 o this is line 2 o this is line 3 o this is line 4
web111a_chapt01.ppt
Definition Lists
This is a DEFINITION LIST
<dl>
<dt>First line <dd>First line data
<dt>Second line <dd>Second line data
<dt>Third line <dd>Third line data
</dl>
First line First line data
Second line Second line data
Third line Third line data
web111a_chapt01.ppt
Character Tags
Not used much
<em>, <strong>, <code>, <kbd>, <var>, <cite>
More often used
<b>…</b> Bold Displayed data
<I>…</I> Italic Displayed data
<U>…</U> Underlined Displayed data
Typewriter Text<tt>Displayed data</tt> Displayed data
<big>Displayed data</big>
<small>Displayed data</small>
<sub>12</sub> Subscript X12
<sup>12</sup> Superscript X12
web111a_chapt01.ppt
Image Tag
Format:
<img src=“filename”>
img = Imagesrc = Source location
<img src=“dube.jpg”>
<img src=“http://www.somesite.com/dube.jpg
<img src=“../dube.jpg”>
web111a_chapt01.ppt
Special Characters
Preceded by an &
Format: &#code-numeric
&code-name
© © © Copyright symbol
® ® ® Registered Trademark
™ ™ &trade Trade Mark
Page 132Appendix B
web111a_chapt01.ppt
Horizontal Lines
Format: line across screen
<hr>
<hr parameters>
Align= center, left, rightSize= heightwidth= widthcolor=noshade
web111a_chapt01.ppt
Lab II
Page 1.22 – 1.34
Homework Assignment
Case Problems
Case 1. ChildLink, Inc.
Page 1.39
