Chapter 5 HTML Basics
-
Upload
ayenachew-legesse -
Category
Documents
-
view
231 -
download
0
Transcript of Chapter 5 HTML Basics
-
8/3/2019 Chapter 5 HTML Basics
1/24
Chapter 5: HTML Basics
October 2011
-
8/3/2019 Chapter 5 HTML Basics
2/24
Introduction
The Internet a network of networks An infrastructure (connectivity among a large number of
machines world wide)
Several applications:
E-mail www
File transfer (FTP)
Remote login
E-commerce
Instant messaging (chat)
Mailing lists
2 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
3/24
Introduction (contd)
www (world wide web) A collection of websites
A website
A collection of resources:
Web pages (static / dynamic) Media files (images, animations, sound, )
Style files (CSS)
Documents (pdf, doc, txt, rtf, )
Has a globally unique name
E.g. www.aau.edu.et
Stored on machines called web servers
3 Internet Programming
http://www.aau.edu.et/http://www.aau.edu.et/ -
8/3/2019 Chapter 5 HTML Basics
4/24
Introduction (contd)
A web page A document with a mark-up language called HTML The basic unit of information storage on the www
How does the www work Websites (with unique names) are stored on web servers
Users access these websites via the Internet usingsoftware called a web browser.
A user sends requests for resources from a server with
the help of the a user agent (browser) The server sends the requested resource to the user
agent
The user agent renders the resource for the user to view.
4 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
5/24
Introduction (contd)
Software involved: At the server:
Web server software : listens for incoming requests for resourcesfrom clients and serves the requests Apache - open source IIS (Internet Information Services) Microsoft Squid
At the client: Web browser : sends/receives requests/responses to/from web
servers on behalf of the client and renders content as necessary Microsoft Internet Explorer Mozilla Firefox Opera Safari
5 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
6/24
Introduction (contd)
Communication protocol HTTP (HyperText Transfer Protocol)
Client (web browser) and Server (web server) communicate viathe HTTP to exchange request/response messages
The web is governed by the w3c (world wide webconsortium) (www.w3.org)
6 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
7/24
Introduction (contd)
How are websites uniquely named? DNS (Domain Name System)
Resolves a human friendly name (eg www.google.com) to amachine friendly IP address (eg 64.233.187.99)
Phone book of the Internet
For this purpose, DNS servers store a table containing name-IP(among other things) pairs and do a look-up when requested
A DNS server may communicate with other server to resolve agiven name
There are about 12 root DNS servers (http://www.root-servers.org/)
7 Internet Programming
http://www.google.com/http://www.root-servers.org/http://www.root-servers.org/http://www.root-servers.org/http://www.root-servers.org/http://www.root-servers.org/http://www.google.com/ -
8/3/2019 Chapter 5 HTML Basics
8/24
Introduction (contd)
DNS name structure
Hierarchical in nature (eg. cs.aau.edu.et)
cs is under aau (a subdomain of aau), aau is under edu, edu is under et.
The highest level is the last component of the DNS address
Labels separated by . (dot)
Labels can be up to 63 characters long and are case insensitive
A maximum of 255 characters is allowed in total
The last (highest) labels of a DNS name can be:
Three letter code top level domains (TLDs): indicating the type of
organization com, edu, gov, net, org, biz,
Two letter country codes (CCTLDs): indicating the country
et, us, za, uk, tv,
8 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
9/24
Introduction (contd)
URL (Uniform Resource Locator) The exact address of a resource on the web Format:
://[:][][?] E.g. http://www.somedomain.com/search.php?q=dns&lang=en
Protocol identifies the type of protocol to be used for communication http, ftp, mailto,
Host identifies the machine on which the requested resource is stored Domain names (eg. www.google.com) IP address
Port identifies the port number of the web server software on the webserver machine
Default port for http: 80 Path identifies the name and path of the resource on the server Query specifies parameters, if any, that should be sent to the server
along with the request has the form: ?var_name1=value1&var_name2=value2&
9 Internet Programming
http://www.somedomain.com/search.php?q=dns&lang=enhttp://www.google.com/http://www.google.com/http://www.somedomain.com/search.php?q=dns&lang=en -
8/3/2019 Chapter 5 HTML Basics
10/24
HyperText Markup Language (HTML)
A markup language, i.e. its used to markup content.
Composed of several tags.
HTML Document
A text document containing markup tags
The tags tell the browser how to display the document
Should have an .htm or .html file name extension
Can be created using a simple text editor
10 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
11/24
HTMLDocument Structure
An HTML document has the following basicstructure:
page title
11 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
12/24
-
8/3/2019 Chapter 5 HTML Basics
13/24
HTML Tags
html everything in the document should be within
&
head
contains information which is not displayed in the browserdisplay area
may contain other tags in it
format:
title sets the title of the web page to be displayed in the
browsers title bar.
found within the tag.
format: 13 Internet Programming
-
8/3/2019 Chapter 5 HTML Basics
14/24
HTML Tags (contd)
body contains the visible part of the web page
displayed in the display area of the browser
contains several other tags and content in it
format: attributes:
bgcolor=color
background=img url
text=text color
link=link color
alink=active link color
vlink=visited link color
Internet Programming14
-
8/3/2019 Chapter 5 HTML Basics
15/24
HTML Tags (contd)
headings predefined formats for text presentation
six heading formats defined in HTML: up to
the largest font size
the smallest font size
Format:
E.g. a text in heading two
bold makes a text appear in bold
Format: or
E.g. a text in bold
Internet Programming15
-
8/3/2019 Chapter 5 HTML Basics
16/24
HTML Tags (contd)
italics makes a text appear in italics
Format: or
E.g. a text in italics
underline makes a text appear underlined
Format:
E.g. underlined text
paragraph defines a paragraph
Format:
Internet Programming16
-
8/3/2019 Chapter 5 HTML Basics
17/24
HTML Tags (contd)
E.g.
this is a paragraph of text. it has a new linebefore and after it.
The browser inserts a new line before and after the text inthe paragraph tag.
attribute:
align=alignment {left, right, center, justify}
line break
inserts a new line Format:
E.g. line one
line two
line three
line fourInternet Programming17
-
8/3/2019 Chapter 5 HTML Basics
18/24
HTML Tags (contd)
horizontal rule inserts a horizontal line
Format:
attributes:
width=width {absolute: in pixels or relative: in %} noshade
color=color {browser dependent}
E.g.
sub/sup define either a subscript or a superscript
Format: ;
E.g. X12 + 2X3
Internet Programming18
-
8/3/2019 Chapter 5 HTML Basics
19/24
HTML Tags (contd)
lists Unordered Lists (ul)
define bulleted lists
Format:
Atribute: type=bullet type {disc, circle, square}
E.g.
bookmarkerchalkInternet Programming19
-
8/3/2019 Chapter 5 HTML Basics
20/24
HTML Tags (contd)
Ordered Lists (ol)
define numbered lists
Format:
Atribute:
type=number type {1, i, I, a, A}
E.g.
bookmarkerchalk
Internet Programming20
-
8/3/2019 Chapter 5 HTML Basics
21/24
HTML Tags (contd)
Definition Lists (dl)
define a list of term-description pairs
Format:
E.g.
booksomething that we read
markersomething we write with
Internet Programming21
-
8/3/2019 Chapter 5 HTML Basics
22/24
HTML Tags (contd)
images insert images in an html document
Format: {no end tag}
Attributes:
src=img url alt=alternate text
border=border width
width=image width
height=image height
supported image formats:
gif, jpg/jpeg, png
E.g.
Internet Programming22
-
8/3/2019 Chapter 5 HTML Basics
23/24
HTML Tags (contd)
anchor defines a hyperlink or a named anchor
used for navigation
Format:
Attributes: href=url
target=target { _self, _blank }
name=anchor name
E.g.
Go to home
Google
Internet Programming23
-
8/3/2019 Chapter 5 HTML Basics
24/24
HTML Tags (contd)
Navigation with anchors named anchors
named places in an html document
Format:
E.g.
linking to anchors
Format:
link text {on the same page}