Web Terminology

Website

• Website is a collection of related web pages that may contain

text, images, audio and video. Each website has specific internet
address (URL) that you need to enter in your browser to access a
website.

• Website is hosted on one or more servers and can be accessed

by visiting its homepage using a computer network. A website is
managed by its owner that can be an individual, company or an
organization.

• A website can be of two types:

– Static Website

– Dynamic Website
 Static Website

• Collection of static webpages.

• Static web pages are coded in markup languages
i.e., HTML, XML, XHTML and javascript.

• You don't need web programming and database

design to create a static website.

• The codes are fixed for each page so the

information contained in the page does not change
and it looks like a printed page.
 Static Website Architecture

 Browser send request for web page to internet/network.

 Internet/Network forward request to web server.
 Web server process the request and return the requested
web page to internet/network.
 Internet/Network forward web page to browser.
 Dynamic Website

• Collection of Dynamic web pages.

• Content of dynamic web pages change dynamically.
• It accesses content from a database or Content
Management System (CMS).
• When you alter or update the content of the web page or
database, the content of the website is also altered or
updated.
• Need for web programming and databases.
• Dynamic website uses both client-side scripting and server-
side scripting to generate dynamic content.
• Dynamic web pages are coded in scripting languages i.e.,
PHP, C/C++, Java and Python etc.
Dynamic Website Architecture
 Dynamic Website

• Client side scripting is performed to generate a code

that can run on the client end (browser) without
needing the server side processing. Basically, these
types of scripts are placed inside an HTML
document.
• Server side scripting is a technique of programming
for producing the code which can run on server side,
in simple words any scripting or programming that
can run on the web server is known as server-side
scripting.
 Static vs Dynamic Website

BASIS FOR COMPARISON SERVER-SIDE SCRIPTING CLIENT-SIDE SCRIPTING

Basic Works in the back end Works at the front end and
which could not be visible at script are visible among the
the client end. users.

Processing Requires server interaction. Does not need interaction

with the server.

Languages involved PHP, ASP.net, Ruby on Rails, HTML, CSS, JavaScript, etc.
ColdFusion, Python,
etcetera.

Affect Could effectively customize Can reduce the load to the

the web pages and provide server.
dynamic websites.

Security Relatively secure. Insecure

 Server

• Web server is a repository where data and

program exist.
• Programs written by programmer and data can be
access with the help of internet.
• Types of servers:
– Web server
– Application server
– Database server
 Web Server

• A web server is a computer that store, process and

deliver web pages to the user.
• Web Server or HTTP Server: a server which is capable
of handling HTTP request send by a client and respond
back with a HTTP response.
• Along with HTTP, it also contain Simple Mail Transfer
Protocol (SMPT) and File Transfer Protocol (FTP) for
emailing and file transfer and storage.
• Web server also contain web container that contain
servlet container.
• Example: Apache Tomcat
Web Server
 Web Container

• In Java: Web Container or Servlet Container or Servlet

Engine : is used to manage the components like
servlets, JSP.
 Application Server

• Application Server or App Server: can handle all application

operations between users and an organization's back end
business applications or databases.
 HTML
(Hypertext Markup Language)
 HTML

• HyperText Markup Language (HTML) is the

language of the web
• HTML is just a document
• Web browsers can display several types of
documents, not just HTML i.e. XML, XHTML, etc.
• the document type is called the Document Type
Declaration, or DTD for short
• The document type for HTML5 is
<!doctype html> <!doctype html5>
15
 HTML (continued)
• < > root element: <html> …. </html>
• HTML documents use a specific structure enabling web
browser to read document
<!doctype html>
<html>
<head>
<title>My First Document </title>
</head>
<body>
<div>My Web Page</div>
</body>
</html>
16
 HTML Tags (Basic)

Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Introduces horizontal line
<!--xyz--> Defines a comment
17
 HTML Tags (Formatting)

Tag Description
<abbr> Defines an abbreviation
Defines contact information for the
<address>
author/owner of a document/article
<b> <i><u> Defines bold text
<bdo> Overrides the current text direction
Defines a section that is quoted from
<blockquote>
another source
<cite> Defines the title of a work
<code> Defines a piece of computer code
18
 HTML Tags (Formatting)

<mark> Defines marked/highlighted text

Defines a scalar measurement within a

<meter>
known range (a gauge)

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<s> Defines text that is no longer correct

<sub> Defines subscripted text

<sup> Defines superscripted text

<time> Defines a date/time 19

 HTML Tags (Lists)

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
Defines a description of a term/name in
<dd>
a description list
<menu> Defines a list/menu of commands
Defines a command button that a user
<command>
can invoke
20
 HTML Tags (Hypertext)

Tag Description
<a> Defines a hyperlink (href, name)
<img> Defines an image (src, alt)
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
Used to draw graphics, on the fly, via scripting
<canvas>
(usually JavaScript)
<audio> Defines sound content
Defines multiple media resources for media
<source>
elements (<video> and <audio>)
Defines text tracks for media elements (<video>
<track>
and <audio>)
<video> Defines a video or movie 21
<TITLE>Bucky Badger’s web page</TITLE>
<BODY>
<H1>Welcome to Bucky's web page</H1>
<IMG SRC="bucky.gif">
<P>I am Bucky, the mascot for University of Wisconsin athletics.
Please visit
<A HREF="http://www.uwbadgers.com/football/index.html"> the
web page of our football team</A>
and <A
HREF="http://www.uwbadgers.com/basketball/index.html"> the
web page of our basketball team</A>.
</BODY>

22
 HTML Tags (Table)
Tag Description
<table> Defines a table
<caption> Defines a table caption
<tr> Defines a row in a table
<th> Defines a header cell in a table
<td> Defines a cell 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
Specifies column properties for each column
<col>
within a <colgroup> element
Specifies a group of one or more columns in a
<colgroup>
table for formatting 23
 Table Example 1

<table border="3">
<tr align="center"><th>Title</th>
<th>Authors</th>
<th>Publisher</th>
</tr>
<tr><td>HTML: The Definitive Guide</td>
<td>Chuck Musciano and Bill Kennedy</td>
<td>O'Reilly &amp; Associates</td>
</tr>
<tr><td>Learning C# 2005</td>
<td>Jesse Liberty and Brian MacDonald</td>
<td>O'Reilly &amp; Associates</td>
</tr>
24
</table>
Table Example 2
<table width="300">
<tr valign="top">
<td rowspan="2" valign="middle">
<i>You can contact the people listed here.</i></td>
<td width="140">
<img src="sohi-mini.jpg" />
<br /><b><a href="/~sohi/">Prof. Gurindar Sohi
</a></b>
<br />Chair</td>
<td width="140">
<img src="horwitz-mini.jpg" />
<br /><b><a href="/~horwitz/">Prof. Susan Horwitz
</a></b>
<br />Associate Chair</td>
</tr>
<tr><td colspan="2" align="center">
<i>There are a few others we should have listed.</i>
</td>
</tr>
</table>
25
 HTML Tags (Form)

Tag Description
<form> Defines an HTML form for user input
Defines an input control
<input>
http://www.w3schools.com/tags/att_input_type.asp
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation 26
<form id="contact-form" action="script.php" method="post">
<fieldset>
<legend>Contact Us:</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<input type="radio" name="gender" value="male"> Male
&nbsp;
<input type="radio" name="gender" value="female"> Female
<textarea name="comments" id="comments" cols="25"
rows="3"></textarea>
<input type="checkbox" checked="checked" id="mailing-list"
value="Yes, sign me up!" />
<select>
<option value="edu">Education</option>
<option value="health">Health</option>
<option value="sports">Sports</option>
</select>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</fieldset> 27
<!DOCTYPE html>
<html>
<body>
<p>An ordered list:</p>
<ol>
An ordered list:
<li>Coffee</li> 1. Coffee
<li>Tea</li> 2. Tea
<li>Milk</li> 3. Milk
</ol> An unordered list:
<p>An unordered list:</p>
•Coffee
<ul>
<li>Coffee</li> •Tea
<li>Tea</li> •Milk
<li>Milk</li>
</ul>
</body>
</html>
28
 CSS
(Cascading Style Sheets)
 Adding Colors to life
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
– HTML was never intended to contain tags for formatting a
document.
– Tags like <font>, and color attributes were added to the HTML
3.2
– Nightmare for web developers adding font/colors to every
single page, long and expensive process.
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
• /*CSS comments*/ 30
 CSS Syntax
• A CSS rule has two main parts
– a selector, normally HTML element you want to style
– and one or more declarations consists of a property:value;
ending with semicolon;
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color:orange;
text-align:center; }
</style>
</head>
<body>
<h1>Heading 1 with CSS</h1>
</body>
</html>
31
 CSS Id and Class
• In addition to setting a style for a HTML element,
CSS allows you to specify your own selectors
called "id" and "class“
• id selector uses the id attribute of the HTML
element, and is defined with a "#“

#mypara1 {
text-align:center;
color:red;
}
<p id="mypara1">Centered Text!</p>
<p>This paragraph is not affected
by the style.</p> 32
 CSS Id and Class
• The class selector is used to specify a style for a
group of elements uses HTML class attribute, and
is defined with a ".“
.center { text-align:center; }
• You can also specify that only specific HTML
elements should be affected by a class.
p.center {text-align:right;}

<div class=“center">Centered Text!</p>

<p>This paragraph is righ align</p>
33
 CSS How To...
• Three Ways to Insert CSS
– Inline Styles
– Internal style sheet
– External style sheet
• Inline Style
– loses many of the advantages of style sheets by mixing content
with presentation.
<p style="color:sienna;">coloured paragraph.</p>
• Internal Style Sheet
– Should be used when a single document has a unique style.
– Define internal styles in the head section of an HTML page, by
using the <style> tag 34
 CSS How To...
• External Style Sheet
– Ideal when the style is applied to many pages.
– Change the look of an entire Web site by changing one file.
– Each page must link to the style sheet using the <link> tag.
– The <link> tag goes inside the head section
– Style sheet should be saved .css should NOT have HTML
<head>
<link rel="stylesheet" type="text/css" href="mystle.css">
</head>

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
35
 CSS Property Groups
• Color • Transform
• Background and Borders • Transition
• Basic Box • Basic User Interface
• Flexible Box • Multi-column
• Text • Paged Media
• Text Decoration • Generated Content
• Fonts • Filter Effects
• Writing Modes • Image/Replaced Content
• Table • Masking
• Lists and Counters • Speech
• Animation • Marquee

36
 CSS Selectors
• Selectors are patterns used to select element(s) to style
.class .intro elements with class="intro"
#id #firstname element with id="firstname"
* * selects all elements
element p all <p> elements
[attribute] [target] all elements with a target attribute
:link a:link all unvisited links
:focus input:focus input element which has focus
:first-letter p:first-letter first letter of every <p> element
:first-line p:first-line first line of every <p> element
current active #news element (clicked on a URL
:target #news:target
containing that anchor name)
:not(selector) :not(p) every element that is not a <p> element

::selection ::selection portion of an element that is selected by user

37