Beruflich Dokumente
Kultur Dokumente
Internet – History
• 1989 networking is started with ARPA net to provide three services: file transfer, remote printing
and telnet
• 1972, e-mail service is added to that
• 1973, TCP/IP was proposed as a standard
• Regional network called SURAnet (Southern University Research Associations) was developed by
university of Maryland
• Another network called CSNET was also developed by NSF(National Science Foundation)
• Several protocols like FTP, SMTP were developed under ARPAnet
• January 1 1982. TCP/IP became standard protocol for ARPAnet on that day Internet was said to be
born. That time, TCP/IP was used to connect computers within the LAN and later it permits
outside regional network to communicate with it.
• Later, computers at several institution connected to it by phonenet(modem)
• And later, leased telephone lines were used.
• 1985, NSFNET was developed by NSF that connects super computer center placed in different
locations
• Regional networks line SURA net, JuNcNet, NYSERnet, SDSCnet were developed with the
capability of data transmission at 56kb/s
• Later, data transmission updated to 1.5mb/s
• 1990, ARPAnet decommissioned and NSF became the center of internet
• 1990, internet was used for commercial purpose with dial up access
• 1995, internet services offered by Internet Service Providers(ISP)
Internet Protocols
Protocol means a detailed specification of how communication between computers will be carried out in
order to serve specific purpose.
TCP/IP
There are two protocols: Transmission Control Protocol and Internet Protocol.
TCP works on IP protocol. It offers services such as e-mail, web browsing, and file download, accessing
remote data bases etc., It is a higher-level Protocol more reliable and connection oriented. Before
transmitting any msg. a connection between s->d will be established using a ‘three way handshake’
method. At the end of the transmission, the same connection will be detached using the three way
handshaking method. TCP/IP is analogous to telephone service.
Analogies:
• IP is the fundamental protocol defining the Internet (as the name implies!)
• IP address:
– is a 32-bit number (in IPv4)
– Associated with at most one device at a time (although device may have more than one)
– Written as four dot-separated bytes, e.g. 192.0.34.166
When application on source wants tom transmit msg. it calls the IP s/w on the source machine and
provides its data to it. The ip s/w then creates a packet. After constructing the packet, it will be sent to
the destination via the network. If the destination is on another n/w, ip will deliver the packet to the
gateway. Then the packet will be routed to the correct destination by the gateway. The IP s/s running on
the destination machine will receive the packet and pass it to an application waiting for the data in the
destination. IP also adds some error detection information called checksum to each packet so that if a
packet is corrupted can be detected by the destination.
TCP
• Limitations of IP:
– IP provides a no guarantee of packet delivery (packets can be dropped)
– In which the communication is one-way (source to destination)
• TCP adds concept of a connection on top of IP to overcome the draw backs of IP
– It provides guarantee that packets delivered
– It provides a two-way (full duplex) communication
DNS
• DNS is the “phone book” for the Internet
– It maps between host names and IP addresses
– DNS often uses UDP for communication
• Host names are in human understandable form. Easier to remember rather than representing it
in numeric form.
– e.g., www.example.org where labels separated by dots
– Final label is top-level domain. The domains are classified into:
• Generic domain: .com, .org, etc.
• Country-code domain: .us, .il, etc.
• Domains are divided into second-level domains, which can be further divided into subdomains,
etc.
– E.g., in www.example.com, example is a second-level domain
• A host name plus domain name information is called the fully qualified domain name of the
computer
– Above, www is the host name, www.example.com is the FQDN
• nslookup is a program that provides a command-line access to DNS A single host may have
multiple IP addresses.
• The Web is the collection of machines (Web servers) on the Internet that provide information,
particularly HTML documents, via HTTP.
• Machines that access information on the Web are known as Web clients. A Web browser is
software used by an end user to access the Web.
• Distinctive feature of Web: support for hypertext (text containing links)
• It communicates via Hypertext Transport Protocol (HTTP)
• It uses Hypertext Markup Language (HTML)for Document representation
HTTP
• Normally implemented over a TCP connection (80 is standard port number for HTTP)
• The following is the typical browser-server interaction using HTTP:
• The information transmitted using HTTP that is reguest-response message is often entirely text
as shown below:
• It uses URI to trace the requested resource from the web server.
HTTP Request
Each request message begins with a request line, which contains three critical pieces of information: A
start line (which contains the method the client is requesting; the URI of the resource upon which the
client wishes the action to be performed and the version of HTTP that the client is using). After the start
line come a set of message headers related to the request, followed by a blank line and then optionally,
the message body of the request as shown below
After the request line come any of the headers that the client wants to include in the message; it
is in these headers that details are provided to the server about the request. The headers all use
the same structure as
– Syntax
• Field name is not a case sensitive
• Field value may continue on multiple lines by starting continuation lines with white
space
• Field values may contain MIME types (Multipurpose Internet Mail
Extensions), quality values. MIME is a convention for specifying content type
of a message. In HTTP, typically used to specify content type of the body of
the response. MIME content type organized as
• type / subtype where type and subtype define the Content-Type.
Some common content types:,
request/response
Content-Type: MIME type of (POST) body, normally
application/x-www-form- url encoded
Content-Length: bytes in body
Referer: URL of document containing link that supplied
URI for this HTTP request
Agent: MIME types of acceptable documents
HTTP Response
After receiving and interpreting a request message, a server responds with an HTTP response message.
start line
header field(s)
blank line
optional body
• Status line: The first line of a Response message is the Status-Line, consisting of the protocol
version followed by a numeric status code and its associated textual phrase.
– Example: HTTP/1.1 200 OK
– HTTP version
– status code
– reason phrase in text (intended for human use)
• Status code: to display the status of the response message
– is a three-digit number
– Classified into five classes. First digit is class of the status code:
200: OK.
302: This code indicates that a page has been temporarily redirected to
another URL. This means that the page is still active, just temporarily
moved to another URL.
403: Some of you may have come across this, also known as the
“Forbidden Request”. Basically it means that you have made a legal
request, but the server is refusing to respond to it.
404: The most common of the Broken Site Errors! Basically this is where
the URL no longer exists or cannot be found, so you will be redirected to a
broken holding page.
500: Just a generic Server error message, this comes up when there is
nothing else to explain a problem.
501: This is where the Server you a requesting information from does not
understand the method in which you are requesting the information, or
there is not a fulfilled request.
502: Simply an invalid response was received by the server, from the
request that you have made.
• Common header fields:
Cache Control
It stores the copy of the loaded page for a specific amount of time (during which it’s considered
adequate) allowing user to use it instead of reloading this page from the server. Most of the web clients
(browsers) can cache received server responses and store the content on the user’s hard disk drive for
further reuse.
To provide efficient caching one should take into consideration two main principles: adequacy and
validation. Adequacy means that the cached objects must be up-to-date, i.e. the same as on the server.
Validation is an operation to check whether stored data still corresponds to that on the web server. If the
data is fresh, the local resource is used, otherwise the data needs to be reloaded from the server.
• Cache advantages
– Reduces response time
– Less network traffic
– Less load on server
• Cache disadvantage
– Cached copy of resource may be invalid (inconsistent with remote version)
Cache Validation can be used to check whether a cached response is still good after it becomes stale.
For example, if the response has a Last-Modified header, a cache can make a conditional request using
the If-Modified-Since header to see if it has changed. The ETag (entity tag) mechanism also allows for
both strong and weak validation.
Character Sets
Character sets are standards that map specific real world characters (code elements) to specific
numbers (code points) and then encode those code points as bytes (character encoding or encoding
schemes). EG: ANSI and Unicode. The physical file of a page is encoded in bytes according to a character
set. The HTML of a page can also specify which character set to use with a meta tag of this syntax in the
<head> tag of the page:
IANA maintains complete list of Internet-recognized character sets/encodings for web documents. US-
ASCII character set can be also used for such documents, but is not recommended. UTF-8 and ISO-8859-
1 are supersets of US-ASCII and provide international compatibility. UTF-8 can represent all ASCII
characters using a single byte each and arbitrary Unicode characters using up to 4 bytes each ISO-8859-
1 is 1-byte code that has many characters common in Western European languages, such as é
Web Clients
It typically refers to the Web browser in the user's machine. It is a software application for retrieving,
presenting, and traversing information resources on the web server. It is used to create a HTTP request
message and for processing the HTTP response message.
User agent: Any web client is designed to directly support user access to web servers is known as user
agent. Web browsers can run on desktop or laptop computers. Some of the browsers are: Internet
Explorer, Mozilla, FireFox, Chrome, Safari, Opera, Netscape Navigator
Web Browsers:
Browsers are software programs that allow you to search and view the many different kinds of
information that's available on the World Wide Web. The information could be web sites, video or audio
information.
The following list explains the various parts that make up a web browser and an explanation of their
purpose.
Status Bar: You will find the status bar at the very bottom of your browser window. It basically tells you
what you are doing at the moment. Mainly, it shows you load speed and the URL address of whatever
your mouse is hovering over.
Title Bar: You will find this bar at the absolute top of your browser and in will be the colour blue for the
major browsers. The purpose of the Title bar is to display the title of the web page that you are currently
viewing.
Navigational tool: A bar contains standard push button controls that allow the user to return to a
previously viewed page, to reverse and refresh the page, to display the home page and to print the page
etc.
Toolbar Icons: You will find the Toolbar directly under the Title Bar. The Toolbar is where you will find the
back button, home button and the refresh button etc.
Client area: It is a display window which is the space in which you view the website.
Scroll Bars: The Scroll bars, usually located to the right of the Display Window, allows you to "scroll"
(move down or up the web page) so you can view information that is below or above what is currently in
the Display Window.
• Primary tasks:
– Convert web addresses (URL’s) to HTTP requests
– Use DNS to map the web site address into its appropriate IP addresas
– Render (appropriately display) documents returned by a server
– Establish a TCP connection using IP address
Additional functionality:
HTTP URL’s
Web Servers
• Basic functionality:
– It receives HTTP request via TCP
– It maps Host header to specific virtual host (one of many host names sharing an IP
address)
– It maps Request-URI to specific resource associated with the virtual host
• File: Return file in HTTP response
• Program: Run program and return output in HTTP response
– It maps type of resource to appropriate MIME type and use to set Content-Type header in
HTTP response
– It Logs information about the request and response
• Secure Servers
– Since HTTP messages typically travel over a public network, to carry private information
(such as credit card numbers) it should be encrypted to prevent eavesdropping
• The protocol https URL scheme tells the browser to use encryption. Some of the
other common encryption standards are
• Secure Socket Layer (SSL)
• Transport Layer Security (TLS)
• Tomcat:
– A Java-based web server
– It provides container called as Catalina for running Java servlets (HTML-generating
programs) as back-end to Apache or IIS
– It can be used as a stand-alone using Coyote package. Some Coyote communication
parameters are:
• Allowed/blocked IP addresses
• Max. simultaneous active TCP connections
• Max. queued TCP connection requests
• “Keep-alive” time for inactive TCP connections
– Some Catalina container parameters are:
• Virtual host names and associated ports
• Logging preferences
• Mapping from Request-URI’s to server resources
• Password protection of resources
• Use of server-side caching
– These parameters can be modified to tune the server performance
– Tomcat is a HTML-based server administration
– It can be viewed by using the url http://localhost:8080.
– localhost is a special host name that means “this machine”
The admintool utility is used to configure the behavior of the Tomcat Java Servlet/JSP container while it is
running. Changes made to Tomcat using admintool can be saved persistently so that the changes
remain when Tomcat is restarted, or can be saved for the current session only.
Running admintool
In the Web browser, point to the following URL: http://localhost:8080/admin, which displays in the Web
browser window:
Perform Tomcat Web Server Administration tasks. After you have made changes to Tomcat, select the
Save button on that page to save the attributes for the current Tomcat process. Select the Commit
Changes button to write the changes to the <JWSDP_HOME>/conf/server.xml file so that the changes to
the Tomcat server are persistent and will be retrieved when Tomcat is restarted. To log out of
admintool, click Log Out button
Select Tomcat Server in the left pane. The Server Properties display in the right pane. The Server
element represents the entire JSP/Servlet container. The server properties are shown in following table
Server Properties
Property Description
The TCP/IP port number on which this server waits for a shutdown command. This connection
Port must be initiated from the same server computer that is running this instance of Tomcat. The
Number default value is 8005. Values less than 1024 will generate a warning, as special software
capabilities are required when using this port
Debug The level of debugging detail logged by this server. Higher numbers generate more detailed
Level output. If not specified, the default debugging detail level is zero (0).
The command string that must be received via a TCP/IP connection to the specified port
Shutdow
number in order to shut down Tomcat. The value for this property must contain at least 6
n
characters. The default value is SHUTDOWN.
Configuring Services
Service elements are nested with the Server element. The Service element represents the combination
of one or more Connector components that share a single engine component for processing incoming
requests.
For each Service element defined, you can create or delete the following elements:
• Connector elements represent the interface between the Service and external clients that send
requests to it and receive responses from it.
• Host elements represent a virtual host, which is an association of a network name for a server
(such as www.mycompany.com) with the particular server on which Tomcat is running.
• Logger elements represent a destination for logging, debugging, and error messages for Tomcat.
• Realm elements represent a database of user names, passwords, and roles assigned to those
users.
• Valve elements represent a component that will be inserted into the request processing pipeline
for the associated container.
Connector Attributes
When you create or modify any type of Connector, the attributes shown in flowing table may be set, as
needed.
Attribute Description
The maximum queue length for incoming connection requests when all possible request
Accept Count processing threads are in use. Any requests received when the queue is full will be
refused. The default value is 10.
Connection The number of milliseconds this Connector will wait, after accepting a connection, for the
Timeout request URI line to be presented. The default value is 60000 (i.e. 60 seconds).
Specifies which address will be used for listening on the specified port, for servers with
IP Address more than one IP address. By default, this port will be used on all IP addresses associated
with the server.
The TCP port number on which this Connector will create a server socket and await
Port Number incoming connections. Your operating system will allow only one server application to
listen to a particular port number on a particular IP address.
Minimum The number of request processing threads that will be created when this Connector is first
started. This attribute should be set to a value smaller than that set for Maximum. The
default value is 5.
The Host element represents a virtual host, which is an association of a network name for a server (such
as www.mycompany.com) with the particular server on which Tomcat is running.
Host Attributes
The attributes shown in following table may be viewed, set, or modified for a Host.
Host Attributes
Attribute Description
The network name of this virtual host, as registered in your Domain Name Service server.
Name One of the Hosts nested within an Engine MUST have a name that matches the defaultHost
setting for that Engine.
The Application Base directory for this virtual host. This is the path name of a directory that
Application may contain Web applications to be deployed on this virtual host. You may specify an
Base absolute path name for this directory, or a path name that is relative to the directory under
which Tomcat is installed.
The level of debugging detail logged by this Engine to the associated Logger. Higher
Debug
numbers generate more detailed output. If not specified, the default debugging detail level
Level
is zero (0).
A Logger element represents a destination for logging, debugging, and error messages for Tomcat.
Logger Attributes
Common attributes for all of the Logger types are outlined in the following table
Logger Attributes
Attribute Description
Directory The absolute or relative path name of a directory in which log files created by this logger will
be placed. If a relative path is specified, it is interpreted as relative to the directory in which
Tomcat is installed. If no directory attribute is specified, the default value is logs (relative to
the directory in which Tomcat is installed).
The prefix added to the start of each log file's name. If not specified, the default value is
Prefix
catalina. To specify no prefix, use a zero-length string.
The suffix added to the end of each log file's name. If not specified, the default value is .log.
Suffix
To specify no suffix, use a zero-length string.
Timestam Whether or not all logged messages are to be date and time stamped. Set to True to cause all
p logged messages to be date and time stamped. Set to False to skip date/time stamping.
Tomcat writes the log information in a log file which in a plain text format. In general, the log entry has
the following format:
%h %l %t “%r” %s %b
HTML introduction
HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language. A markup language is a set of markup
tags. HTML uses markup tags to describe web pages. HTML markup tags are usually called HTML tags.
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag, the second
tag is the end tag. Start and end tags are also called opening tags and closing tags.
HTML documents describe web pages. HTML documents contain HTML tags and plain text
HTML documents are also called web pages. HTML tags are not case sensitive: <P> means the same as
<p>.
An HTML element starts with a start tag / opening tag. An HTML element ends with an end tag / closing
tag. The element content is everything between the start and the end tag. Some HTML elements have
empty content. Empty elements are closed in the start tag. Most HTML elements can have attributes.
HTML elements can be nested
Root of HTML document must be html. XHTML 1.0 requires that this element contain the xml namespace
xmlns attribute specification (name/value pair) as shown below.
The body element contains information displayed in the browser client area
The head element contains information used for other purposes by the browser:
title (shown in title bar of browser window)
scripts (client-side programs)
style (display) information
HTML History
HTML Versions
HTML 4.01 syntax defined using Standard Generalized Markup Language (SGML)
XHTML 1.0 syntax defined using Extensible Markup Language (XML)
Primary differences between HTML and XHTML:
HTML allows some tag omissions (e.g., end tags)
XHTML element and attribute names are lower case (HTML names are case-insensitive)
XHTML requires that attribute values be quoted
The following figure illustrates the relationship between the markup languages
For HTML 4.01 and XHTML 1.0, the document type declaration can be used to select one of three
“flavors”:
Strict: W3C ideal
Transitional: Includes deprecated elements and attributes (W3C recommends use of style
sheets instead)
Frameset: Supports frames (subwindows within the client area)
Strict:
Frameset:
Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“
"http://www.w3.org/TR/html4/loose.dtd">
There are four white space characters: carriage return, line feed, space, horizontal tab
All white space is converted to space characters
Leading and trailing spaces are trimmed
Multiple consecutive space characters are replaced by a single space character
For example,
Browsers ignore tags with unrecognized element names, attribute specifications with
unrecognized attribute names. It is best to use an HTML validator to check syntax
HTML References
Since < marks the beginning of a tag, how do you include a < in an HTML document? For that use
markup known as a reference
Two types:
Character reference specifies a character by its Unicode code point
For <, use < or < or <
Entity reference specifies a character by an HTML-defined name
For <, use <
HTML elements with no content are called empty elements. Empty elements can be closed in the start
tag. Example:
HTML Attributes
Attributes provide additional information about HTML elements. HTML elements can have attributes.
Attributes provide additional information about an element. Attributes are always specified in the start
tag. Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but
single style quotes are also allowed. Attribute names and attribute values are case-insensitive. Below is
a list of some attributes that are standard for most HTML elements:
<h1> defines the largest heading. <h6> defines the smallest heading.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Browsers automatically add an empty line before and after a heading. H1 headings should be used as
main headings, followed by H2 headings, then the less important H3 headings, and so on.
Use pre to retain format of text and display using monospace font
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page. The hr element can be used to separate
content:
Example
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable.
Comments are ignored by the browser and are not displayed. Comments are written like this:
Example
HTML Paragraphs
Example
<p>This is a paragraph</p>
Use the <br> or <br /> tag if you want a line break (a new line) without starting a new paragraph. The
<br /> element is an empty HTML element. It has no end tag. Even if <br> works in all browsers, writing
<br /> instead is more future proof.
Example
–margin
–padding
–border
–height
–width
•Remember, HTML is for content and HTML tags are for describing that content to non-human or
visually-impaired readers. <span> is just used to make things “pretty.
Meta Tag
HTML interacts with the search engines through using meta tag
HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page to page.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document
or a new section within the current document. When you move the cursor over a link in a Web page, the
arrow will turn into a little hand. Links are specified in HTML using the <a> tag.
The HTML code for a link is simple. It looks like this: <a href="url">Link text</a>
Example
which will display like this: Visit Billabong international schools Clicking on this hyperlink will send the
user to Billabong international schools ' homepage. The "Link text" doesn't have to be text. You can link
from an image or any other HTML element
HTML Links - The target attribute
The target attribute specifies where to open the linked document. The example below will open the
linked document in a new browser window:
Example
The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark
inside an HTML document. Bookmarks are not displayed in any special way. They are invisible to the
reader.
Example
HTML Images
HTML The <img> Tag and the Src Attribute In HTML, images are defined with the <img> tag. The
<img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an
image on a page, you need to use the src attribute. Src stands for "source". The value of the src
attribute is the URL of the image you want to display. Syntax for defining an image:
The URL points to the location where the image is stored. An image named "boat.gif", located in the
"images" directory on "www.ex3.com" has the URL: http://www.ex3.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first paragraph, then the image, and then the second
paragraph.
The alt attribute provides alternative information for an image if a user for some reason cannot view it.
HTML Tables
Used to organize data into rows and columns. Tables are defined with the <table> tag. A table is divided
into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for
"table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms,
other tables, etc.
The HTML code for the construction of above table is shown below:
<caption><strong>Price of Fruit</strong></caption>
<thead>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th> <!—the use of th here defines the content of header or footer cells
<th>$3.75</th>
</tr>
</tfoot>
</table>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Header information in a table are defined with the <th> tag. The text in a th element will be bold and
centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Header 1 Header 2
row 1, cell row 1, cell
1 2
row 2, cell row 2, cell
1 2
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can
be useful, but most of the time, we want the borders to show.
<table border="1">
<tr>
</tr>
</table>
<colspan=“number”>
Example:
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables.
Spacing defines the width of the border, while padding represents the distance between cell borders and
the content within. Color has been added to the table to emphasize these attributes.
HTML Code:
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</table>
Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
And now we will change the cellpadding of the table and remove the cellspacing from the previous
example.
HTML Code:
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</table>
Cell Pads:
Column 1 Column 2
Row 1 Cell
Row 1 Cell 2
1
Row 2 Cell
Row 2 Cell 2
1
The value you specify for padding and spacing is interpreted by the browser as a pixel values. So a value
of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use
pixels.
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Nesting Elements
If one element is nested within another element, then the content of the inner element is also
content of the outer element
XHTML requires that elements be properly nested. The following code is not a valid code
Absolute URL
The word absolute, in English, means "not dependent on anything else". It also means “a complete and
free from doubt".
When you use an absolute URL, you point directly to a file. Hence, an absolute URL specifies the exact
location of a file/directory on the internet. It also follows that each absolute URL is unique, which means
that if two URLs are identical, they point to the same file.
scheme:// host:port/path/filename
For example:
http://www.webdevelopersnotes.com/images/email.gif specifies an image file email.gif located in the
images directory, under www.webdevelopersnotes.com domain name.
Similarly, the absolute URL of the document you are viewing is http://www.webdevelopersnotes.com/
design/ relative_and_absolute_urls.php3 which is a page in the directory called design on this web site.
Relative URL’s
Look at the two URL above. We want to display the image file email.gif stored in the images directory of
www.webdevelopersnotes.com domain on this relative_and_absolute_urls.php3 page which is stored in
the design directory page of the same domain.
How it works?
Now to access email.gif file from relative_and_absolute_urls.php3 page using a relative URL we put
../images/email.gif in the SRC attribute. We, thus, instruct the browser to first go one level up (i.e. to the
document root) and then move to the images directory and pick up the file email.gif.
The two peroids (..) instruct the server to remove design/ relative_and_absolute_urls.php3 from the base
URL and then enters /images/email.gif and finally includes the image.
In general, a string that is consistent with the URL path syntax given earlier is known as relative URL. It
is a shorthand of absolute URL. The following table shows the different form of relative URL
Different form of
Relative URLs
d/e.html
../h/i.html
../f.html
/j.html
../../g.html
/k/l.html
If a relative URL begins with the slash /, it is interpreted as relative to the server root. If a relative URL
contains the special notation .., it means that one hierarchic part is removed from the URL which is
similar to cd.. command
Base URL
Also, it's easy to transfer a web site from one domain name to another. If you had used absolute URLs in
all links and SRC attributes, you'd have a difficult time updating each link on each page. With the use of
relative URLs you have no such problems.
Also, relative URLs would be shorter than absolute URLs and hence the file size of the web page would
reduce
Web forms
A form element is inserted into a web page by the <form> tag. The syntax:
Attributes:
– method = “post” or “get”
Indicates the way the Web server will organize and send you the form output
post: causes changes to server data, e.g., update a database
get: does not cause any changes in server-side data, e.g., make a database
request
– action = “”
Specifies the URL. When the user submits the form, the values entered in the form
should be sent to script that in the url
For example,
Form Controls
Example:
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
Password Field
<form>
Password: <input type="password" name="pwd" />
</form>
Password:
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited
number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Male
Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a
limited number of choices.
Submit Button
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the received
input:
Username:
Submit
If you type some characters in the text field above, and click the "Submit" button, the browser will send
your input to a page called "html_form_action.asp". The page will show you the received input
Form Controls: Label, hidden, text, submit button, reset button
Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
HTML Frames
HTML frames allow authors to present documents in multiple views, which may be independent windows
or subwindows. Multiple views offer designers a way to keep certain information visible, while other
views are scrolled or replaced. For example, within the same window, one frame might display a static
banner, a second a navigation menu, and a third the main document that can be scrolled through or
replaced by navigating in the second frame.
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
</HEAD>
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<UL>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
The frameset element holds one or more frame elements. Each frame element can hold a separate
document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH
percentage/pixels of space will occupy each of them.
The <frame> tag defines one particular window (frame) within a frameset.
The first column is set to 25% of the width of the browser window. The second column is set to 75% of
the width of the browser window. The document "frame_a.htm" is put into the first column, and the
document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can be set
to use the remaining space, with an asterisk (cols="25%,*").
HTML Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame /> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
The src attribute specifies the initial document the frame will contain.
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>
Navigational frame
The navigation frame contains a list of links with the second frame as the target. The file called
"tryhtml_contents.htm" contains three links. The source code of the links:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
The second frame will show the linked document.
Unit II
CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to
HTML elements. Every element type as well as every occurance of a specific element within that type
can be declared an unique style, e.g. margins, positioning, color or size.
Style Sheets are templates, very similar to templates in desktop publishing applications, containing a
collection of rules declared to various selectors (elements).
– Often used to transform one XML document to another form, but can also add style
Why CSS?
•Reduce workload by centralizing commands for visual appearance instead of scattered throughout the
HTML doc.
Types
Inline CSS
The first way to use CSS on your website is known as Inline CSS and is used inside the html tag directly
and only affects what is inside that element. This is a useful method when you are doing something like
adding a Drop Cap or something which will only be used once or twice however this isn't ideal if you are
working on a large site.
The second way to utilize CSS on your site is the Internal Style Sheet which is placed in head of your
page between the <head>and</head> tags. You might want to use this when you only have one page
on your website or you need a page to look differently than the other pages which use your main CSS
External Style sheet You could then use your Inline Style Sheets to overwrite anything on a line by line
basis should you need to. Remember, the Inline CSS takes priority over the others.
<style type="text/css">
body {
font-size: 12px;
color: #FFFFFF;
</style>
The THIRD method is the External Style Sheet. This is a document that lives outside of your web page.
By placing some code in the head of your web page between the <head>and</head> tags, you tell
your web page to look for and use the instructions from that file to interpret how to display your page.
This method is useful when you have two or more pages and will allow you to control the look across all
of your pages maintaining a consistent look throughout.
Using an external style sheet changes to the HTML document format can be done easily. one alteration
to one file is enough to change the entire site design.
Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows
creating one main sheet containing declarations that apply to the whole site and partial sheets
containing declarations that apply to specific elements (or documents) that may require additional
styling. By importing partial sheets to the main sheet a number of sources can be combined into one.
To import a style sheet or style sheets include the @import notation or notations in the STYLE element.
The @import notations must come before any other declaration. If more than one sheet is imported they
will cascade in order they are imported - the last imported sheet will override the next last; the next last
will override the second last, and so on. If the imported style is in conflict with the rules declared in the
main sheet then it will be overridden.
<STYLE TYPE="text=css">
<!--
@import url(http://www.and.so.on.partial1.css);
@import url(http://www.and.so.on.partial2.css);
-->
</STYLE>
Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as
persistent and/or preferred .
Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of
an alternate style, e.g.:
Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute
to the LINK element. There can only be one preferred style, e.g.:
Alternate style gives an user the choice of selecting an alternative style - a very convenient way of
specifying a media dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.:
To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value
to the LINK element. The combined style will apply as a preferred style, e.g.:
CSS Ruleset
There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares
style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS
rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.
CSS Rule
-Parts of a style rule (or statement)
• Type Selectors:
• Universal selectors:
• ID selectors:
• Class selectors
• Descendent selectors
Where rule applies to li element that is part of the content of an ol element that is part o
the content of a ul element
At-rule
Style sheets referenced by <link> element are called external style sheets
Style sheets can be embedded directly in HTML document using <style> element
• The CSS rule cascade determines which style rule’s declaration applies
Rule cascading
Let us consider a style sheet that contains the following rules,
..........
* { font-weight:bold;}
.............
#p3 { background-color:red;}
..........
In such a case, both the rules can be applied to an element with id attribute value p3. That is, if multiple
rules apply to an element, and those rules provide declarations for different properties, then all of the
declarations are applied to the element. But if the rule,
#p3 {font-weight:12pt;}
also appears in the same style sheet for the document, then a conflict will occur and it is important to
know which rule will be applied to the font-weight property of the p3 element. In such situation, the
browser will apply a ‘rule cascading’ in order to choose the appropriate declaration from multiple
declarations.
Rule cascading: is a multistage sorting process that selects a single declaration from the multiple
declarations and that will apply the property value.
The following rules are used to determine which style rules will apply to a selector, given that it has
more than one style in conflict for that selector.
Step 1:
Find all the style declarations that implicitly or explicitly apply to the element or selector
Step 2:
This is the primary Cascade sorting method. The origin of the declaration is one of the following:
User Agent: It refers any one of the browser software. Style rules occurring in the browser is a
default style sheet that has the lowest precedence. In Mozilla 1.4, the menu View | Use Style
offers a default style sheet.
User: it refers a person who is viewing the document. In Mozilla 1.4, the menu Edit|Preferences|
Appearence allows the user to provide a style sheet. Such user style sheets take precedence over
browser style sheets.
Author: It refers a person who wrote the HTML document and if the style sheet is a kind of
external or embedded style sheet then the origin of the declaration is from Author which takes
precedence over both of these.
A style rule with higher precedence will win over an identical style rule with lower precedence as
shown below:
Lowest Highest
<===========
preceden precedenc
=====>
ce e
Origin(Ownership Browser User’s Author's
s): Defaults Style Sheet Style Sheet
Linked
Specification Embedded Inline
Style Shee
Method: Style Sheet Styles
t
Element Contextual
Selector Selector CLASS ID
Specificity: Depth
'important'
Style sheet designers can increase the weights of their declarations using ‘important’
In the example above, the first declaration has increased weight, while the last declaration has
normal weight.
• A user rule with an important declaration will override an author rule with a normal
declaration.
• An author rule with an important declaration will override a reader rule with an important
declaration.
Step 3:
More specific CSS selectors will override more general ones. To determine the "specificity" of a
CSS selector, use the following steps:
Example:
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
Step 4:
If two or more style rules have the same importance, origin and specificity, then the rule that is
specified last wins.
Style Inheritance
All selectors which are nested within selectors will inherit the property values assigned to the outer
selector unless otherwise modified. For example,
<head>
<style type="text/css">
li { font-style : italic; }
p { font-size : larger; }
</style>
</head>
<body>
<ul>
<p>
</p>
</li>
<ul>
</body>
The word “inside” appears with a normal font weight while all other text is bold spaced. The first <span>
will inherit the italic property from its parent <li> element, while the second inherits the larger font size
property from its parent <p> element and italic property from its grandparent element <li>
Similarly the <p> element inherits the italic property from its parent element <li>.
There are some cases where the inner selector does not inherit the surrounding selector's values, but
these should stand out logically. For example,
P{ margin-top: 15px; }
property is not inherited; naturally, a paragraph would not have the same top margin as the document
body.
Inline elements: Elements which do not have line breaks. Can occur in block elements or other inline
elements, cannot contain block elements.
Inline elements in HTML 3.2; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG,
SMALL, SUB, SUP, A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA
Block: Elements which do have line breaks. May occur in other block elements, cannot occur in inline
elements, may contain both block and inline elements.
Block elements in HTML 3.2; H1, H2, H3, H4, H5, H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI,
DIV, CENTER, BLOCKQUOTE, PRE, HR, ISINDEX, TABLE, FORM.
Parents and children: Elements which either contain (parents) or are in the content of (children) other
elements. For example,
<P>text<STRONG>text</STRONG>text</P>.
P is a parent of STRONG. STRONG is a child of P. If not specified otherwise, children will inherit parent's
properties
CSS Properties
Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH.
There must always be a corresponding value or values set to each property, e.g. font: bold or font: bold
san-serif.
Shorthand property
Shorthand property is a property made up of individual properties that have a common "addressee". For
example properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font. To
reduce the size of style sheets and also save some keystrokes as well as bandwidth they can all be
specified as one shorthand property font, e.g.:
H1 {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 160%;
font-family: serif}
Note: To make things even simpler the line-height property can be specified together with the font-size
property:
Value
Value is a 'physical' characteristic of the property. Property declares what should be formatted, e.g.
FONT while value suggests how the property should be formatted, e.g. 12pt. By setting the value 12pt
to the property FONT it is suggested that the formatted text be displayed in a 12 point font. There must
always be a corresponding property to each value or set of values.
In the example above the H1 selector is declared the FONT property which in its turn is declared the
values BOLD and 180%.
The values suggesting alternatives are specified in a comma separated list, e.g.
Text Properties
General Comments: These properties let you control basic text formatting. Some of these can also
be applied to non-text elements.
Property Description Values Example
text- Set the case of the text. capitalize p {text-transform:
transform uppercas capitalize}
e
lowercas Capitalizes the first
e character of each word in
none the paragraph.
H2 {text-transform:
uppercase}
Font Properties
General Comments: These properties let you control basic font characteristics.
Propert Description Values Example
y
font- Specifies the font family, or typeface, to family p {font-family: futura, helvetica,
family use for the element. name arial, sans-serif}
You can specify a series of names and Display the paragraph in Futura, if
the first available font is used. available. If not, try Helvetica,
generic Arial, and finally, any sans-serif
name: display.
serif
sans-serif
cursive
fantasy
monospac
e
font- Specifies the style of type to use for the normal H2 {font-family: futura, helvetica,
style element. italic arial; font-style: italic}
oblique
Uses the italic variation of the
typeface for all level two headlines.
font- Lets you select the small caps style of normal H2 {font-family: futura, helvetica,
variant the typeface. small-caps arial; font-variant: small-caps}
background- Specifies
**Note: an image
We have url(URLname)
had limited success (with blockquote {background-image:
Sets all button class
image to use for the
Netscape; no success in IE3.0) applying url(..images/sand.gif)}images to be 70 pixels
background
width and height ofto
an<div> tags, and no high.
element.
success with images. Displays the image "sand.gif" in the
background area of the blockquote.
width Sets the width of the element. CSS length img.button {width:
background- Specifies how and if repeat blockquote {background-image:
100px}
repeat a background
** See note for height. repeat-x url(..images/sand.gif); background-repeat:
image is repeated. repeat-y repeat} Sets all button class
no-repeat images to be 100 pixels
Displays the image "sand.gif"
wide. in the
float Places the element to the left or right and background
right area of the blockquote and left}
img.button {float:
flows text around it. repeats
left the image vertically and horizontally
to fill
nonethe entire background
Places area.
a button class
image to the left margin
background- Sets the initial vertical % body {background-image: and flows text around it.
position position of the horizontal % url(..images/sand.gif); background position:
background image. center center}
top
center Centers the background image vertically and
bottom horizontally on the initial body screen.
left
center
right