Introduction To Internet Technology Gy and Markup Languages

Introduction to Internet Technology
gy
and Markup Languages
SCCS426 Internet Technology and Its Applications, ICT Programme, Semester 2/2008 1
` Comp ter net
Computer network
ork
◦ Any technology that allows people to connect computers to
each
h other
h
` The Internet
◦ A large system of interconnected computer networks
spanning the globe
` World Wide Web
◦ A subset of computers on the Internet
◦ A collection of network applications that primarily
communicate using HTTP
` Early 1960s
◦ U.S. Department of Defense funded research to
explore creating a worldwide network
` In 1969, Defense Department researchers
◦ Connected four computers into network called
ARPANET
` Th
Throughout
h 1970 and
1970s d 1980s
1980
◦ Academic researchers connected to ARPANET and
contributed
b d to its technological
h l lddevelopments
l
` I 1972
In
◦ E-mail was born
` Mailing list
◦ E-maill address
dd that
h fforwards
d any message received
d
to any user who has subscribed to the list
` Usenet
◦ Started by
b group
gro p of students
st dents and programmers at
Duke University and the University of North Carolina
` In 1986
◦ NSFnet was created by funding from National Science
Foundation
` In 1991, NSF
◦ Eased restrictions on commercial Internet activity
◦ Began implementing plans to privatize the Internet
` In 1992,
◦ Coordination of the Internet was transferred to a
nonprofit organization which later on has evolved into
the Internet Society (ISOC)
` What
h the
h Internet is:
x A world-wide network of computer
p networks
x At the lowest level, since 1982, all connections use
TCP/IP
x TCP/IP hides the differences among devices connected
to the Internet
Picture from: Web Applications: Concepts & Real World Design by Craig D. Knuckles and David S. Yuen, John Wiley & Sons, 2005.
Source: www.nectec.or.th
Source: www.nectec.or.th
Source: http://internet.nectec.or.th
` The Web
◦ Software that runs on computers connected to the Internet
` In 1945
◦ V
Vannevar Bush
B h speculated
l t d that
th t engineers
i would
ld eventually
t ll
build a memory extension device (the Memex)
"Consider a future device for individual use, which is a sort of mechanized

private file and library. It needs a name, and, to coin one at random, 'memex'
will do. A memex is a device in which an individual stores all his books,
records, and communications, and which is mechanized so that it may be
consulted with exceeding speed and flexibility. It is an enlarged intimate
supplement to his memory" (Bush, 1945).
Suggested Reading: Bush's original article “As we may think”

((one version can be found at
http://www.theatlantic.com/doc/194507/bush)
` In the 1960s
◦ Ted Nelson described a similar system called hypertext
◦ The term was coined in 1963 and published
in 1965.
` Hypertext most often refers to text on a computer

that will lead the user to other, related information
on demand
d d th
through
h links
li k andd connections
ti called
ll d
hyperlinks.
His motto is:
A user interface should be so simple that a beginner in an
emergency can understand it within ten seconds.
Source: http://en.wikipedia.org/wiki/Ted_Nelson
` In 1989
◦ Tim Berners-Lee developed code for hypertext server program
` Hypertext server
◦ Stores files written in hypertext markup language
◦ Lets other computers connect to it and read files
` H
Hypertext
t t Markup
M k L
Language (HTML)
◦ Includes set of codes (or tags) attached to text
` Web browsers
◦ Mosaic in 1993, Netscape Navigator in 1994 and Internet
Explorer soon after
` In 1994
◦ the World Wide Web Consortium (W3C) was formed to set
standards for all to use
www.netcraft.com
See more statistics from http://www.internetworldstats.com/stats.htm

` Internet2
◦ Experimental
p test bed for new networking
g
technologies
◦ Has achieved
h d bandwidths
b d d h off 10 Gbps
b and
d more on
parts of its network
◦ Used by universities to conduct large collaborative
research projects
` Internet Protocol (IP) Addresses
◦ Every node has a unique numeric address
◦ Form: 32-bit
32 bit binary number
x New standard, IPv6, has 128 bits (1998)
` Organizations are assigned groups of IPs for
their computers
` Problem: By the mid-1980s,
mid 1980s, several different
protocols had been invented and were being
used on the Internet,, all with different user
interfaces (Telnet, FTP, Usenet, mailto
` Internet Protocol version 4 (IPv4)
◦ Uses a 32-bit number to identify computers
connected to the Internet
` Base 2 (binary) number system
◦ Used by
y computers
p to p
perform internal calculations
` Subnetting 255.255.255.255 Dotted Decimal
◦ Use of reserved private IP addresses within LANs and

WANs to provide additional address space
` Internet Protocol version 6 (IPv6)
◦ Uses a 128-bit number for addresses Colon Hex
CD18:0000:0000:AF23:0000:FF9E:61B2:884D CD18:::AF23::FF9E:61B2:884D
or
` IP addresses are assigned by
◦ American Registry for Internet Numbers (ARIN) –
ARIN Whois
◦ Reséaux IP Européens (RIPE) – RIPE Whois
◦ Asia-Pacific Network Information Center (APNIC) –
APNIC Whois
` Domestic IP addresses
◦ Thailand Network Information Center (THNIC) –
THNIC Whois
` Domain names
◦ Form: host-name.domain-names
◦ First domain is the smallest; last is the largest
◦ Last domain specifies the type of organization
x Top-level domain (or TLD) - Rightmost part of a domain name
` Internet Corporation for Assigned Names and Numbers
(ICANN)
◦ Responsible for managing domain names and coordinating
them with IP address registrars
◦ Fully qualified domain name - the host name and all of the
domain names
` DNS servers - convert fully qualified domain names to IPs
Picture from: Programming of the World Wide Web, 3rd edition by Robert W. Sebesta, Addison-Wesley, 2006.
Picture from: Electronic Commerce, 5th Edition by Gary Schneider, Course Technology, 2003.
u Two useful application layer services on
th W
the Web.
b
l Domain Name Service (DNS) -- Uses
UDP for transport.
transport
l Virtual Hosting -- Maps Domain
Names onto folders on the Web
server.
` How: The application layer protocol. Example:
Browsers and Web servers use httpp ((hypertext
yp
transfer protocol)
` Where: The named address of the resource --
Translated to IP address for internet travel, then
used to locate the virtual space (folder) on the Web
server.
` What: Path to specific resource in that folder.
htt //
http://www.mahidol.ac.th
hid l th 202 28 162 1
202.28.162.1
` The What part of a URL identifies a particular resource
g
within the folder assigned to the domain name (Where
part of URL).
` The request for a directory loads a default file in that
di t
directory. If th
there is
i no ddefault
f lt file,
fil then
th the
th directory
di t
contents may be listed.
` The request for a file loads that file.
` Originally developed for email
` Used to specify to the browser the form of a file returned by
the server (attached by the server to the beginning of the
d
document) )
` Type specifications
◦ Form: type/subtype
◦ Examples: text/plain, text/html, image/gif, image/jpeg
` Server gets type from the requested file name’s suffix (.html
i
implies
li ttext/html)
t/ht l)
` Browser gets the type explicitly from the server
` Experimental types - Subtype begins with x x-
◦ e.g., video/x-msvideo
◦ Experimental types require the server to send a helper application or
plug in so the browser can deal with the file
plug-in
` The protocol used by ALL Web communications
` Request Phase
- Form:
HTTP method domain part of URL HTTP ver.
Header fields
blank line
Message body
- An example of the first line of a request:
GET /cs.uccp.edu/degrees.html HTTP/1.1
` M
Most commonly
l used
d methods:
h d
◦ GET - Fetch a document
◦ POST - Execute the document, using the data in body
◦ HEAD - Fetch just the header of the document
◦ PUT - Store a new document on the server
◦ DELETE - Remove a document from the server
` Response Phase
- Form:
Status line
Response
p header fields
blank line
Response body
` Status line format: HTTP version status code explanation
- Example: HTTP/1.1 200 OK
` Status code is a three-digit number; first digit specifies the genera
status
1 => Informational
2 => Success
3 => Redirection
4 => Client error
5 => Server error
` The header field, Content-type,
Content type, is required
` Four categories
g of header fields: General,, request,
q , response,
p ,
& entity
` Common request fields:
Accept:
p text/plain
p
Accept: text/*
If-Modified_since: date
` Common response fields:
Content-length: 488
Content-type: text/html
` Can communicate with HTTP without a browser
>telnet blanca.uccs.edu http
GET /respond.html HTTP/1.1
Host: blanca.uccs.edu
` An example of a complete response header:
HTTP/1.1 200 OK
Date: Tues, 18 May 2004 16:45:13 GMT
Server: Apache (Red-Hat/Linux)
Last-modified: Tues, 18 May 2004 16:38:38 GMT
Etag: "841fb-4b-3d1a0179"
841fb 4b 3d1a0179
Accept-ranges: bytes
Content-length: 364
Connection: close
Content-type: text/html, charset=ISO-8859-1
` Both request headers and response headers must be followed
by a blank line
HTTP GGET -- Data
ata
in query string
sent in packet
header
HTTP POST --
Data is part of
message payload
payload.
` Secure HTTP (HTTPS)
` Secure Sockets Layer (SSL)
◦ Invented by Netscape
◦ Operates in conjunction with TCP/IP at both the
transport and internetwork layers to prevents IP
spoofing
` Document languages and programming
languages that are the building blocks of the
web and web programming
` XHTML
` Plug ins
Plug-ins
` Filters
` XML
` Javascript
` Java, Perl, Ruby, PHP
` The spectrum of Web application approaches
can be divided into:
◦ Scripting or programmatic approaches
◦ Template approaches
◦ Hybrid approaches
◦ Frameworks
` In scripting or programmatic approaches,
approaches the
source associated with the page object
consists predominantly of code written to
express app logic, while the page formatting
(e.g. HTML) is generally produced using
output statements in the associated
programming language.
` Examples are:
◦ CGI
◦ Java Servlet API
` This category of web development approaches utilizes a
source object (the template) that consists predominantly of
formatting structures, with limited embedded constructs that
add programming power.
power
` Unlike the programmatic approaches, the focus of the source
object of template approaches is on formatting, not app
logic.
` Examples are:
◦ Server
Server-Side
Side Includes (SSI)
◦ Cold Fusion
◦ WebMacro/Velocity
` Combine scripting elements with template
structures.
` Examples are:
◦ PHP Hypertext Preprocessor (PHP)
◦ Active Server Pages (ASP)
◦ Java Server Pages (JSP)
` In the old days,
days authors scribbled markup
instructions on paper in the margins of hand-
written works
works.
` With the advent of electronic documents, the
markup instructions are included in the
binary files.
` Word processing files are binary blobs
blobs. The
markup languages are proprietary. Only the
programmers know how the markup
instructions are encoded as bytes.
` Some word processors give a graphical view of how
it is including markup instructions, however, what
the corresponding bytes look like in the binary blob
the software creates may be unknown
unknown.
WYSIWYG
` Word processing files tend not to be interoperable

among different software packages. Some do have
translators which attempt to transform different
markup languages into their own.
own
` Text markup language
◦ Specifies set of tags that are inserted into text
` Standard Generalized Markup Language
(SGML)
◦ Older and complex text markup language
◦ A meta language
` World Wide Web Consortium (W3C)
◦ Not-for-profit group that maintains standards for
the Web
` Offers a system of marking up documents that is
independent of any software application
` Nonproprietary and platform independent
` Offers user-defined tags
` ISO
SO standard
d d 8879
88 9
` Key
ey idea:
dea Separate
Sepa ate content
co te t from
o ppresentation
ese tat o
` Costly to set up and maintain
` HTML was defined with SGML
` O g
Original intent of HTML: General
G layout
y of documents
that could be displayed by a wide variety of
computers
` Recent versions:
◦ HTML 4.0 – 1997
x Introduced many new features and deprecated many older features
◦ HTML 4.01 - 1999 - A cleanup of 4.0
◦ XHTML 1.0 - 2000
x Just 4.01 defined using XML, instead of SGML
1 1 – 2001
◦ XHTML 1.1
x Modularized 1.0, and drops frames
x We
We’ll
ll stick to 1.1,
1 1 except for frames
` HTML tags
◦ Interpreted by Web browser and used by it to format the display of
the text
` HTML Links
◦ Linear hyperlink structure
◦ Hierarchical hyperlink structure
` Scripting languages and style sheets

◦ Most common scripting languages: JavaScript, JScript, Perl, and
VBScript
p
◦ Cascading Style Sheets (CSS)
x Sets of instructions that give Web developers more control over the
f
format t off displayed
di l d pages
x Style sheet
x Usually stored in a separate file
x Referenced
R f d using
i the
h HTML style
l tag
` The Web was created to be text based
(ASCII,Unicode 8,…) so the markup language
used to format Web pages is all text
text.
` Here is how the address on the previous slide
would be formatted in HTML,
HTML the markup
language used to format Web pages.
<FONT
FONT SIZE
SIZE=14
14 FACE
FACE=Swing>
Swing
<B>Bryan Moore</B><BR>
</FONT>
<FONT SIZE=12 FACE=Textile>
1234 Sunset Ave<BR>
WalaWala, WA 12345<BR>
(123)123.4567<BR>
</FONT>
<FONT SIZE=14 FACE=Swing>
<B>Bryan Moore</B><BR>
</FONT>
<FONT SIZE=12 FACE=Textile>
1234 Sunset Ave<BR>

WalaWala WA 12345<BR>
WalaWala,
(123)123.4567<BR>
</FONT>
` HTML specifies how to render a document
document,
but it does not specify what is in the
document.
document
◦ Alternative as a solution: XML
` The structure of parse tree for HTML code
may
y be inefficient in some cases.
◦ For example, A 100 of such addresses would
require a 100 instances of the markup instructions
instructions.
◦ Alternative as a solution: CSS
` U
Uses paired
i d start and
d stop tags
` Includes data management capabilities that

HTML cannot provide
` Differences between XML and HTML

◦ XML is not a markup language with defined tags
◦ XML tags do not specify how text appears on a Web

page
` XML features a total separation of data content and
style.
XML
FpML WML
FIXML
HTML OFX XMI VoiceXML
CML MathML
…
SGML
` XHTML is aimed to replace HTML
` XHTML is almost identical to HTML 4.01
` XHTML is a stricter and cleaner version of
HTML so the XHTML documents are well-
formed, and can thus be processed by XML
parsers
` XHTML is HTML defined as an XML
pp
application
` XHTML is a W3C Recommendation
` Case sensitivity
` Closing tags
` Quoted attribute values
` Explicit attribute values
` id and name attributes
` Element nesting
` Reasons to use XHTML,, rather than HTML:
1. HTML has lax syntax rules, leading to sloppy
and
d sometime
ti ambiguous
bi d
documents
t
x XHTML syntax is much more strict, leading
to clean and clear documents in a standard
form
2 HTML processors do not even enforce the few
2.
syntax rule that do exist in HTML
3. The syntactic correctness of XHTML documents
can be validated
<UL>
<li>Coffee</li>
<li>Tea
<ul>
ul
<li>Black tea</li>
<li>Green tea</li>
</ul>
l
<li>Milk</li> <ul>
</UL> <li>Coffee</li>
<li>Tea
<ul>
<li>Black
li Bl k ttea</li>
li
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
` A combination of HTML,
HTML Javascript and CSS
used to create dynamic and interactive Web
sites.
sites
` Sample implementation of onmouseover
behavior
<A HREF=“…”
onMouseOver=“document.images[‘picture1’].src=‘images/pic1a.gif’;”
onMouseOut=“document.images[‘picture1’].src=‘images/pic1.gif’;”
>
<IMG NAME=“picture1” SRC=“images/pic1.gif”>
</A>
http://www.w3schools.com/dhtml/dhtml_examples.asp
Self-Reading…
` El
Elements
t are d
defined
fi d bby ttags ((markers)
k )
` Tag format:
- Opening tag: <name>
- Closing
g tag:
g </name>
` The container and its content together are called an element
` Exactly one title element must appear in the head element

element.
` Syntax for empty elements (no closing tag): <element />

` If an element is not empty, it must have a closing tag:
<element></element>
` All elements
l t and
d attribute
tt ib t names mustt b
be iin llower case.
` All attribute values must be quoted (single or double)
attribute="value" or attribute='value'
` Every attribute must have a value.
◦ For example,
<hr noshade> must be <hr noshade="noshade">

noshade= noshade >
` Comment form: 

` Browsers ignore comments, unrecognizable tags, line breaks,
multiple spaces, and tabs
` Every XHTML document must begin with:
<?xml version = ″1.0″?>
<!DOCTYPE html PUBLIC ″-//w3c//DTD XHTML 1.1//EN″
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
` <html>, <head>, <title>, and <body> are required in every
document
` The whole document must have <html> as its root
` html must have the xmlns attribute:
<html xmlns = ″http://www.w3.org/1999/xhtml″
` A document consists of a head and a body
` The <title> tag is used to give the document a title, which is normally
displayed in the browser’s window title bar (at the top of the display)
` Prior to XHTML 1.1, a document could have either a body or a frameset
` Text is normally placed in paragraph elements
` Paragraph
P h El
Elementst
◦ The <p> tag breaks the current line and inserts a blank line - the new line gets the
beginning of the content of the paragraph
◦ The
Th bbrowser puts
t as many words
d off th
the paragraph’s
h’ content
t t as will
ill fit iin each
h line
li
<?xml version = ″1.0″?>
<!DOCTYPE html PUBLIC ″-//w3c//DTD XHTML 1.1//EN″
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<!

<html xmlns = ″http://www.w3.org/1999/xhtml″>
<h d> <title>
<head> <titl > Our
O first
fi t ddocument
t </titl
</title>
>
</head>
<body>
<p>
G
Greetings
ti f
from your W
Webmaster!
b t !
</p>
</body>
</html>
` W3C HTML Validation Service
http://validator.w3.org/file-upload.html
` Line breaks
◦ The effect of the <br /
/> tag
g is the same as that of <p>
p , except
p for the blank line
x No closing tag!
` Example of paragraphs and line breaks
On the plains of hesitation <p> bleach the
bones of countless millions </p> <br />
who, at the dawn of victory <br /> sat down
to wait, and waiting, died.
` Typical display of this text:

On the plains of hesitation
bleach
bl h th
the b
bones of
f countless
tl millions
illi
who, at the dawn of victory
sat down to wait, and waiting, died.
` Headings
◦ Six sizes, 1 - 6, specified with <h1> to <h6>
◦ 1, 2, and 3 use font sizes that are larger than the default font size
◦ 4 uses the default size
◦ 5 and 6 use smaller font sizes

<head> <title>
i Headings
i </title>
/ i
</head>
<body>
<h1> Aidan’s Airplanes (h1) </h1>
<h2> The best in used airplanes (h2) </h2>
<h3> "We’ve got them by the hangarful" (h3)
</h3>
<h4> We’re the guys to see for a good used
airplane (h4) </h4>
<h5> We offer great prices on great planes
(h5) </h5>
<h6> No returns, no guarantees, no refunds,
all sales are final (h6) </h6>
</body>
</html>
` Blockquotes
◦ Content of <blockquote>
◦ To set a block of text off from the normal flow and appearance of text
◦ Browsers often indent, and sometimes italicize
` Font Styles and Sizes (can be nested)
◦ Boldface - <b>
◦ Italics - <i>
◦ Larger - <big>
◦ Smaller - <small>
◦ Monospace - <tt>
The <big> sleet <big> in <big> <i> Crete
</i><br /> lies </big> completely </big>
in </big> the street
The sleet in Crete

lies completely in the street
x These tags are not affected if they appear in the content of a <blockquote>,
unless there is a conflict (e.g., italics)
◦ Superscripts and subscripts
x Subscripts with <sub>
x Superscripts with <sup>
Example: x<sub>2</sub><sup>3</sup>
Display: x23
` Inline versus block elements
◦ Block elements CANNOT be nested in inline elements
` All of this font size and font style stuff can be done with style sheets, but these tags are
not yet deprecated
` Character Entities
Char. Entity Meaning
& &
p Ampersand
p
< < Less than
> > Greater than
” " Double quote
’ ' Single quote
¼ ¼ One quarter
½ ½ One half
¾ ¾ Th
Three quarters
t
° ° Degree
(space) Non-breaking space
` Horizontal rules
◦ <hr /> draws a line across the display, after a line break
` The meta element (for search engines) Used to provide additional information about a
document, with attributes, not content
` GIF (Graphic Interchange Format)
◦ 8-bit color (256 different colors)
` JPEG (Joint Photographic Experts Group)
◦ 24-bit color (16 million different colors)
` Both
B h use compression,
i b
but JPEG compression
i iis b
better
` Images are inserted into a document with the <img /> tag with the src attribute
◦ The alt attribute is required by XHTML
x Purposes:
1. Non-graphical browsers
2. Browsers with images turned off
<img
i src = "comets.jpg"
j
alt = "Picture of comets" />
` The <img> tag has 30 different attributes, including width and height (in pixels)
` Portable Network Graphics (PNG)
◦ Relatively new
◦ Should eventually replace both gif and jpeg

<head> <title> Images </title>
</head>
<body>
<h1> Aidan's Airplanes </h1>
<h2> The best in used airplanes </h2>
<h3> "We've got them by the hangarful"
</h3>
<h2>
h2 Special of the month </h2>
/h2
<p>
1960 Cessna 210 <br />
577 hours since major engine overhaul
<br />
1022 hours since prop overhaul
<br /><br />
<img src = "c210new.jpg"
alt = "Picture of a Cessna 210"/>
<br />
Buy this fine airplane today at a
remarkably low price <br />
/
Call 999-555-1111 today!
</p>
</body>
</html>
• Hypertext
H t t is
i th
the essence off the
th Web!
W b!
• A link is specified with the href (hypertext reference)
attribute of <a> (the anchor tag)
• The content of <a> is the visual link in the document
• If the target is a whole document (not the one in which the link
appears) the target need not be specified in the target
appears),
document as being the target
• Note:
N t Relative
R l ti addressing
dd i off ttargets
t iis easier
i tto
maintain and more portable than absolute addressing

<head> <title> Links </title>
</head>
<body>
<h1> Aidan's Airplanes </h1>
<h2> The best in used airplanes </h2>
/
<h3> "We've got them by the hangarful"
</h3>
<h2> Special of the month </h2>
<p>
1960 Cessna 210 <br />
<a href = "C210data.html">
Information on the Cessna 210 </a>
</p>
</body>
</html>
• If the target
g is not at the beginning
g g of the document,, the target
g spot
p must be
marked
• Target labels can be defined in many different tags with the id attribute, as in
<h1 id = "baskets"> Baskets </h1>
• The link to an id must be preceded by a pound sign (#); If the id is in the same
document, this target could be
<a href = "#baskets">
What about baskets? </a>
• If the target is in a different document, the document reference must be included
<a href = "myAd.html#baskets”> Baskets </a>
• Style
y note: a link should blend in with the surrounding
g text,, so reading
g it without
taking the link should not be made less pleasant
• Links can have images:
<a href = "c210data.html“>
<img src = "smallplane.jpg"
alt = "Small picture of an airplane " />
Info on C210 </a>
• Unordered lists
• The list is the content of the <ul> tag
• List elements are the content of the <li> tag
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
• Ordered lists
• The list is the content of the <ol> tag
• Each item in the display is preceded by a sequence value
<h3> Cessna 210 Engine Starting Instructions
</h3>
< l>
<ol>
<li> Set mixture to rich </li>
<li> Set propeller to high RPM </li>
<li> Set ignition switch to "BOTH" </li>
<li> Set auxiliary fuel pump switch to
"LOW PRIME" </li>
<li> When fuel pressure reaches 2 to 2.5
PSI, push starter button </li>
</ol>
• Nested lists
• Any type list can be nested inside any type list
• The nested list must be in a list item
` Definition lists (for glossaries
glossaries, etc
etc.))
◦ List is the content of the <dl> tag
◦ Terms being defined are the content of the <dt> tag
◦ The definitions themselves are the content of the <dd> tag
<h3> Single-Engine Cessna Airplanes </h3>
<dl >
<dt> 152 </dt>
<dd> Two-place trainer </dd>
<dt> 172 </dt>
<dd> Smaller four-place airplane </dd>
<dt>
dt 182 </dt>
/dt
<dd> Larger four-place airplane </dd>
<dt> 210 </dt>
<dd> Six-place airplane - high performance
</dd>
</dl>
• A table is a matrix of cells,
cells each possibly having content
• The cells can include almost any element
• Some cells have row or column labels and some have data
• A table is specified as the content of a <table> tag
• A border attribute in the <table> tag specifies a border between the
cells
ll
• If border is set to "border", the browser’s default width border is used
• The border attribute can be set to a number,
number which will be the border
width
• Without the border attribute, the table will have no lines!
• Tables are given titles with the <caption> tag, which can immediately
follow <table>
` Each row of a table is specified as the content of a <tr> tag
` The
Th row hheadings
di are specified
ifi d as th t t off a <th> tag
the content t
` The contents of a data cell is specified as the content of a <td> tag
<table border = "border">
<caption> Fruit Juice Drinks </caption>
<tr>
<th> </th>
<th> Apple </th>
<th> Orange </th>
<th>
h Screwdriver
d i </th>
/ h
</tr>
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>
<tr>
<th> Lunch </th>
<td> 1 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
</table>
` A table can have two levels of column labels
◦ If so, the colspan attribute must be set in the <th> tag to specify that the
label must span some number of columns
<tr>
<th colspan = "3"> Fruit Juice Drinks </th>
</tr>
<tr>
<th> O
Orange </th>
<th> Apple </th>
<th> Screwdriver </th>
</tr>
• If the rows have labels and there is a spanning column label
label, the
upper left corner must be made larger, using rowspan
<table border = "border">

border >
<tr>
<td rowspan = "2"> </td>
<th colspan = "3"> Fruit Juice Drinks
</th>
</tr>
<tr>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
…
</table>
` The align attribute controls the horizontal placement of the contents
in a table cell
◦ Values are left, right, and center (default)
◦ align is an attribute of <tr>, <th>, and <td> elements
` The valign attribute controls the vertical placement of the contents of

a table cell
◦ Values are top, bottom, and center (default)
◦ valign is an attribute of <th> and <td> elements
Æ SHOW cell_align.html and display it
• The cellspacing attribute of <table> is used to specify the distance
between cells in a table
` The cellpadding attribute of <table> is used to specify the spacing
between the content of a cell and the inner walls of the cell
<table cellspacing = "50">
<tr>
<td> Colorado is a state of …
</td>
/
<td> South Dakota is somewhat…
</td>
</tr>
</table>
- Table Sections
- Header, body, and footer, which are the elements: thead, tbody, and tfoot
- If a document has multiple tbody elements, they are separated by thicker horizontal lines
` A form is the usual way information is gotten from a browser to a server
` HTML has tags to create a collection of objects that implement this
information gathering
g g
◦ The objects are called widgets (e.g., radio buttons and checkboxes)
` When the Submit button of a form is clicked, the form’s values are sent
to the server
` All of the widgets, or components of a form are defined in the content of
a <form> tag
◦ The only required attribute of <form> is action, which specifies the URL of the
application that is to be called when the Submit button is clicked
action =
"http://www.cs.ucp.edu/cgi-bin/survey.pl"
x If the form has no action, the value of action is the empty string
` The method attribute of <form> specifies one of the two possible
techniques of transferring the form data to the server, get and post
` Widgets
◦ Many are created with the <input> tag
x The type attribute of <input> specifies the kind of widget being
created
1.Text
x Creates a horizontal box for text input
x Default size is 20; it can be changed with the size attribute
x If more characters are entered than will fit, the box is scrolled
(shifted) left
◦ If you don’t
don t want to allow the user to type more characters than
will fit, set maxlength, which causes excess input to be ignored
<input type = "text" name = "Phone"
size = "12" >
2. Checkboxes - to collect multiple choice input
◦ Every checkbox requires a value attribute, which is the widget’s
value in the form data when the checkbox is ‘checked’
x A checkbox
h kb th thatt iis nott ‘‘checked’
h k d’ contributes
t ib t no value
l tto th
the
form data
◦ By default, no checkbox is initially ‘checked’
checked
◦ To initialize a checkbox to ‘checked’, the checked attribute must
be set to "checked"
` Widgets (continued)
Grocery Checklist
<form action = "">
<p>
<input type = "checkbox" name ="groceries"
value = "milk" checked = "checked">
Milk
<input type = "checkbox" name ="groceries"
value = "bread">
Bread
<input type = "checkbox" name = "groceries"
value= "eggs">
Eggs
</p>
</form>
3. Radio Buttons - collections of checkboxes in which only one button can

b ‘‘checked’
be h k d’ att a titime
x Every button in a radio button group MUST have the same name
3. Radio Buttons (continued)
◦ If no button in a radio button group is ‘pressed’, the browser often
‘presses’
presses the first one
Age Category
<form action = "">
<p>
<input type = "radio" name = "age"
value = "under20" checked = "checked"> 0-19
value = "20-35">
20-35 > 20-35
value = "36-50"> 36-50
value = "over50"> Over 50
</p>
</form>
4. Menus - created with <select> tags
` There are two kinds of menus, those that behave like checkboxes and
those that behave like radio buttons (the default)
◦ Menus that behave like checkboxes are specified by including the
multiple attribute, which must be set to "multiple"
` The name attribute of <select> is required
` The size attribute of <select> can be included to specify the number
of menu items to be displayed (the default is 1)
◦ If size is set to > 1 or if multiple is specified
specified, the menu is displayed
as a pop-up menu
◦ Each item of a menu is specified with an <option> tag, whose pure text
content (no tags) is the value of the item
◦ An <option> tag can include the selected attribute, which when
assigned
g "selected”
se ected specifies
p that the item is p
preselected
` Widgets
g ((continued))
4. Menus (continued)
Grocery Menu - milk, bread, eggs, cheese
<form action = "">
< >
<p>
With size = 1 (the default)
<select name = "groceries">
<option> milk </option>
<option>
i b
bread
d </option>
/ i
<option> eggs </option>
<option> cheese </option>
</select>
</p>
</form>
- Widgets
g ((continued))
` After clicking the menu:
` After changing size to 2:
- Widgets (continued)
5 Text areas - created with <textarea>
5.
◦ Usually include the rows and cols attributes to specify the size
of the text area
◦ Default text can be included as the content of <textarea>
◦ Scrolling is implicit if the area is overfilled
Please provide your employment aspirations
<form action = "">
<p>
<t t
<textarea name = "
"aspirations"
i ti " rows = "3”
cols = "40">
(Be brief and concise)
/
</textarea>
</p>
</form>
6. Reset and Submit buttons
◦ Both are created with <input>
<input type = "reset" value = "Reset Form">
put type = "submit”
<input sub t value
a ue = "Submit
Sub t Form">
o
` Submit has two actions:
1. Encode the data of the form
2. Request that the server execute the server-resident program
specified as the value of the action attribute of <form>
◦ A Submit button is required in every form
--> SHOW popcorn.html and display it
• Frames are rectangular sections of the display window
window, each of which
can display a different document
• Because frames are no longer part of XHTML, you cannot validate a
document that includes frames
• The <frameset> tag specifies the number of frames and their layout in
the window
• <frameset> takes the place of <body>
• Cannot have both!
• <frameset> must have either a rows attribute or a cols attribute, or both
(usually the case)
• Default is 1
• The possible values for rows and cols are numbers, percentages, and asterisks
• A number value specifies the row height in pixels - Not terribly useful!
• A percentage specifies the percentage of total window height for the row - Very
useful!
◦ An asterisk after some other specification gives the remainder of the
height of the window
◦ Examples:
<frameset rows = "150, 200, 300">
<frameset rows = "25%, 50%, 25%">
<frameset rows = "50%, 20%, *" >
<frameset rows = "50%, 25%, 25%“ cols = "40%, *">
` The <frame> tag specifies the content of a frame
` The first <frame> tag in a <frameset> specifies the content of the first
frame, etc.
◦ Row-major order is used
◦ Frame content is specified with
ith the src attribute
attrib te
◦ Without a src attribute, the frame will be empty (such a frame CANNOT be filled
later)
` If <frameset>
<f t> has fewer <frame>
<f > tags than frames,
frames the extra frames are
empty
` Scrollbars are implicitly included if needed (they are needed if the
specified document will not fit)
` If a name attribute is included, the content of the frame can be
changed later (by selection of a link in some other frame)
ÆSHOW frames.html
` Note: the Frameset standard must be specified in the DOCTYPE
declaration
` Nested frames - to divide the screen in more interesting ways
Æ SHOW nested_frames.html

<head> <title> Table of Contents Frame
</title>
</head>
<body>
<h4> Fruits </h4>
<ul>
<li> <a href = "apples.html"
target = "descriptions">
apples </a>
<li> <a href = "bananas.html"
bananas.html
bananas </a>
<li> <a href = "oranges.html"
oranges </a>
</ul>
</body>
</html>

Introduction To Internet Technology Gy and Markup Languages

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introduction To Internet Technology Gy and Markup Languages

Enviado por

Direitos autorais:

Formatos disponíveis

Introduction to Internet Technology

"Consider a future device for individual use, which is a sort of mechanized

Suggested Reading: Bush's original article “As we may think”

` Hypertext most often refers to text on a computer

See more statistics from http://www.internetworldstats.com/stats.htm

◦ Use of reserved private IP addresses within LANs and

` Word processing files tend not to be interoperable

` Scripting languages and style sheets

<FONT SIZE=12 FACE=Textile>

1234 Sunset Ave<BR>

` Includes data management capabilities that

` Differences between XML and HTML

◦ XML tags do not specify how text appears on a Web

- Opening tag: <name>

` Exactly one title element must appear in the head element

` Syntax for empty elements (no closing tag): <element />

<hr noshade> must be <hr noshade="noshade">

` Comment form:

` Typical display of this text:

The sleet in Crete

<table border = "border">

` The valign attribute controls the vertical placement of the contents of

3. Radio Buttons - collections of checkboxes in which only one button can

` After clicking the menu:

` After changing size to 2:

Você também pode gostar