2. Anatomy of a web page
• HTML or XHTML is the language used to
write web pages.
• HTML stands for Hypertext Markup
Language which is basically a language that
you can use to markup or format hypertext.
• XHTML or HTML pages can be written in
word processing programs or in
WYSIWYG programs like Dreamweaver.
• All information in a web page is saved as
text including links to other pages and
images.
3. Anatomy of a web page
Text paths indicate where images
can be found
Live text is included as text
Colors are indicated by number
4. Anatomy of a web page
blog.html The text file is edited and saved on
your local computer.
The files and folders of your
website are uploaded to a web
server via an ftp program.
blog.html
QuickTime™ and a
decompressor
blog.html
are needed to see this picture.
~sweeneys QuickTime™ and a
decompressor
are needed to see this picture.
~sweeneys
Your local
computer Remote
web server
5. How a web page is delivered
Domain QuickTime™ and a
decompressor
Name
are needed to see this picture.
Server
Web
Server Users
QuickTime™ and a
decompressor
blog.html
are needed to see this picture.
~sweeneys
Step 1
User enters in URL
6. URL: Uniform Resource Locator
http://www.mccc.edu/~sweeneys/blog.html
Protocol Domain name Directory File name &
(hypertext (folder name) type
transfer
protocol)
7. How a web page is delivered
Step 2
Domain QuickTime™ and a
decompressor User request is
Name
are needed to see this picture.
routed to a Domain
Server Name Server
Web
Server Users
QuickTime™ and a
decompressor
blog.html
are needed to see this picture.
~sweeneys
8. How a web page is delivered
Step 3
Domain Name Server
translates domain Domain QuickTime™ and a
decompressor
name into IP address Name
are needed to see this picture.
and routes the
request to correct Server
web server
7 0 .1
3 3 .1
.1
Web 1 98
u=
c. ed Users
Server mc
c
w .
ww
QuickTime™ and a
decompressor
blog.html
are needed to see this picture.
~sweeneys
9. How a web page is delivered
Domain QuickTime™ and a
decompressor
Name
are needed to see this picture.
Server
Web
Server Users
QuickTime™ and a
decompressor
blog.html
are needed to see this picture.
~sweeneys
Step 4
198.133.170.1 Web server locates
the correct folder &
file. If no file is
specified it will display
the index.html file.
10. How a web page is delivered
Domain QuickTime™ and a
decompressor
Name
are needed to see this picture.
Server
Web
Server Users
QuickTime™ and a
decompressor
are needed to see this picture.
blog.html
198.133.170.1 Step 5
Web server sends the
file back to user
11. How a web page is delivered
Domain QuickTime™ and a
decompressor
Name
are needed to see this picture.
Server
Web
Server Users
QuickTime™ and a
decompressor
are needed to see this picture.
Step 6
User’s web browser
198.133.170.1 interprets HTML and
displays it
12. User display factors
What are some of the
factors that make a
web page display
differently?
13. User display factors
Browser
Internet Explorer
Firefox
Safari
Chrome
Mozilla
Opera
Netscape
AOL
PDA Browsers
Courtesy of W3.org
14. User display factors
Screen size & resolution
• 240x160
• 320x240
• 480x320
• 640x480
• 800 x 600
• 1024 x 768
• Larger
Courtesy of W3.org
15. User display factors
Color depth
• Most computers 24/32 bits:
16,777,216 colors
• Older computers/laptops 16bits:
• 65,536 colors
• Handheld 8 bit: 256 colors
Courtesy of W3.org
16. User display factors
Javascript
• On - most computers
• Off - some work computers
Courtesy of W3.org
17. User display factors
Gamma
• PC - 2.2 (darker)
• Mac - 1.8 (lighter)
Courtesy of Creative Bits
