IT8078

WEB DESIGN AND MANAGEMENT

PRESENTED BY,
MRS. N. SENTHAMILARASI, M. TECH.
ASSISTANT PROFESSOR/IT,
PANIMALAR INSTITUTE OF
TECHNOLOGY
What Does a Web Designer Do?
• Design :
• User Experience, Interaction, and User Interface design
• These tasks fall under the disciplines of
• Interaction Design (IxD) - to make the site as easy, efficient, and
delightful to use as possible
• User Interface (UI) design - narrowly focused on the functional
• organization of the page as well as the specific tools (buttons, links,
menus, and so on) that users use to navigate content or accomplish
task
• User Experience (UX) design - based on a solid understanding of
users and their needs based on observations and interviews
• Visual (graphic) design - creates the “look and feel” of the site—logos,
graphics, type, colors, layout, etc
• Development
• Authoring/markup - process of preparing content for delivery on the Web,
or more specifically, marking up the content with HTML tags
• Styling - the appearance of the page in the browser is controlled by
• style rules
• Scripting and programming
Test Yourself
• Match these web professionals with the final product they might be
responsible for producing.

• Answer :
• What does the W3C do?
• Answer :

• What is the difference between frontend and backend

web development?

• What is the difference between a web-authoring

program and an HTMLediting tool?
• Match the web technology with its appropriate task:

• Answer :
What Languages Do I Need to Learn?
Web-related technologies:
• Hypertext Markup Language (HTML)
• Cascading Style Sheets (CSS)
• JavaScript/DOM scripting
• Server-side programming
• There are a number of programming languages and frameworks
(listed in parentheses) that are used to create web applications,
including:
• PHP (CakePHP, CodeIngniter, Drupal)
• Python (Django, TurboGears)
• Ruby (Ruby on Rails, Sinatra)
• JavaScript (Node.js, Rhino, SpiderMonkey)
• Java (Grails, Google Web Toolkit, JavaServer Faces)
• ASP.Net (DotNetNuke, ASP.Net MVC)
What Do I Need to Buy?
UNIT I
WEB DESIGN - HTML MARKUP FOR
STRUCTURE

• Working of Web
• HTML Markup for Structure
• Creating simple page
• Marking up text
• Adding Links
• Adding Images
• Table Markup
• Forms
• HTML5
Working of Web

Basic terminology :
• The Internet Versus the Web :
• Internet is a network of connected computers.
• Web (originally called the World Wide Web, thus the
“www” in site addresses) is just one of the ways information
can be shared over the Internet.
• Hypertext- It is unique in that it allows documents to
be linked to one another .
• The Web uses a protocol called HTTP (HyperText
Transfer Protocol)
• Servers – It is a software for “serve up” documents upon request,
these computers.
• Two most popular are
• Apache (open source software) and
• Microsoft Internet Information Services (IIS).
• IP address - Every computer and device (modem, router,
smartphone, cars, etc.) connected to the Internet is assigned a
unique numeric IP Address.
• Domain Name System (DNS) was developed to allow us to refer
to that server by its domain name
• The numeric IP address is useful for computer software, while
the domain name is more accessible to humans.
• DNS server - Matching the text domain names to their
respective numeric IP addresses.
• Browsers - The software that does the requesting is called the
client.
• User agent - The server returns the documents for the browser
(also referred to as the user agent in technical circles) to
display.
• Intranets and Extranets :
• Intranets - Special web-based networks , They are created
and function like ordinary websites, but they use special
security devices (called firewalls) that prevent the outside
world from seeing them.
• Extranet - An extranet is like an intranet, only it allows
access to select users outside of the company.
• Web Page Addresses (URLs) :
• Every page and resource on the Web has its own special address called a
URL(Uniform Resource Locator )
• The parts of a URL :

• Default files :
• When a server receives a request for a directory name rather
than a specific file, it looks in that directory for a default
document, typically named index.html.
• HTML documents:
• Adding descriptive tags to a text document is known as
“marking up” the document. Web pages use a markup
language called HyperText Markup Language, which was
created especially for documents with hypertext links.
1. You request a web page by either typing its URL (for example, http://
jenskitchensite.com) directly in the browser or by clicking on a link on a
page. The URL contains all the information needed to target a specific
document on a specific web server on the Internet.
2. Your browser sends an HTTP Request to the server named in the URL
and asks for the specific file. If the URL specifies a directory (not a file),
it is the same as requesting the default file in that directory.
3. The server looks for the requested file and issues an HTTP response. a. If
the page cannot be found, the server returns an error message. The
message typically says “404 Not Found,” although more hospitable error
messages may be provided. b. If the document is found, the server
retrieves the requested file and returns it to the browser.
4. The browser parses the HTML document. If the page contains images
(indicated by the HTML img element) or other external resources like
scripts, the browser contacts the server again to request each resource
specified in the markup.
5. The browser inserts each image in the document flow where indicated by
the img element. And voila! The assembled web page is displayed for
your viewing pleasure.
Test Yourself
HTML Markup for Structure

• Creating a Simple Page

• Marking up Text
• Adding links
• Adding images
• Table Markup
• Forms
• HTML5
HTML Markup for Structure

• Creating a Simple Page :

• Step by Step for create Web Page:
• Step 1: Start with content - write up raw text content and see what browsers do with it.
• Step 2: Give the document structure- HTML element syntax and the elements that give a
document its structure
• Step 3: Identify text elements - describe the content using the appropriate text elements.
• Step 4: Add an image
• Step 5: Change the page appearance with a style sheet. formatting content with Cascading
Style Sheets
• Launch a Text Editor to write html program.
• Creating a new document in Notepad (Windows)
Step 1: Start with Content
( Raw Text )
index.html

Black Goose Bistro

The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in hip atmosphere. The menu
changes regularly to highlight the freshest ingredients.

Catering
You have fun... we’ll handle the cooking. Black Goose Catering can handle events from
snacks for bridge club to elegant corporate fundraisers.

Location and Hours

Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am tomidnight
Output
Step 2: Give the Document Structure

• An element consists of both the content and its

markup.
• Elements are identified by tags in the text source. A
tag consists of the element name within angle
brackets (< >). The browser knows that any text
within brackets is hidden and not displayed in the
browser window
Step 3: Identify text elements

Introducing…semantic markup:
• The purpose of HTML is to add meaning and structure to the content.
It is not intended to provide instructions for how the content should
look (its presentation).
• Your job when marking up content is to choose the HTML element
that provides the most meaningful description of the content at
hand. In the biz, we call this semantic markup.
• For example, the most important heading at the beginning of the
document should be marked up as an h1 because it is the most
important heading on the page.
Exercise

Defining text elements:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using
the font-size property.</p>

</body>
</html>
output

Heading 1
You can change the size of a heading with the style attribute, using the
font-size property.

28
Excercise
<!DOCTYPE html>
<html>
<body>

<p>In HTML, spaces and new lines are ignored:</p>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

</body>
</html> 29
output

In HTML, spaces and new lines are ignored:

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie
lies over the ocean. Oh, bring back my Bonnie to me.

30
Block and inline elements

• Although it may seem like stating the obvious, it is worth pointing out
that the heading and paragraph elements start on new lines and do
not run together as they did before.
• That is because by default, headings and paragraphs display as block
elements.

31
32
• By contrast, look at the text we marked up as emphasized (em).
• It does not start a new line, but rather stays in the flow of the
paragraph. That is because the em element is an inline element.
Inline elements do not start new lines; they just go with the flow.
• In Figure 4-10, the inline em element is outlined in light blue.

33
Default style

• The other thing that you will notice about the marked-up page in
Figures 4-10 is that the browser makes an attempt to give the page
some visual hierarchy by making the first-level heading the biggest
and boldest thing on the page, with the second-level headings
slightly smaller, and so on.

34
Step 4: Add an Image

35
36
37
Step 5: Change the Look with a Style Sheet

• Depending on the content and purpose of your website, you may

decide that the browser’s default rendering of your document is
perfectly adequate.
• However, I think I’d like to pretty up the Black Goose Bistro home
page a bit to make a good first impression on potential patrons.
• “Prettying up” is just my way of saying that I’d like to change its
presentation, which is the job of Cascading Style Sheets (CSS).

38
39
40
What is HTML?
• HTML is the standard markup language for creating Web pages.

• HTML stands for Hyper Text Markup Language

• HTML describes the structure of Web pages using markup

• HTML elements are the building blocks of HTML pages

• HTML elements are represented by tags

• HTML tags label pieces of content such as "heading", "paragraph",

"table", and so on

• Browsers do not display the HTML tags, but use them to render the
content of the page

41
 HTML Structure

• HTML is comprised of “elements” and “tags”

• Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
• Tags have attributes:
<img src="logo.jpg" alt="logo" />
• HTML describes structure using two main sections:
<head> and <body>

42
 HTML Code Formatting
• The HTML source code should be formatted to
increase readability and facilitate debugging.
• Every block element should start on a new line.
• Every nested (block) element should be indented.
• Browsers ignore multiple whitespaces in the page
source, so formatting is harmless.
• For performance reasons, formatting can be sacrificed

43
First HTML Page

test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

44
 First HTML Page: Tags

<!DOCTYPE HTML>
<html> Opening tag
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the content inside.

45
First HTML Page: Header
HTML header
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

46
First HTML Page: Body

<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body

47
Some Simple Tags

• Hyperlink Tags
<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web site</a>

• Image Tags
<img src="logo.gif" alt="logo" />
• Text formatting tags

This text is <em>emphasized.</em>

<br />new line<br />
This one is <strong>more emphasized.</strong>

48
Some Simple Tags – Example
some-tags.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html> 49
 Some Simple Tags – Example
some-tags.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
50
 Tags Attributes
• Tags can have attributes
• Attributes specify properties and behavior
• Example:

<img src="logo.gif" alt="logo" />

• Few attributes can apply to every element:
• id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the element is hovered with the mouse
• Some elements have obligatory attributes

51
 Headings and Paragraphs
• Heading Tags (h1 – h6)

<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
• Paragraph Tags

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>
• Sections: div and span

<div style="background: skyblue;">

This is a div</div>
52
Headings and Paragraphs – Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>

53
 The <!DOCTYPE> Declaration

• HTML documents must start with a document type

definition (DTD)
• It tells web browsers what type is the served code
• Possible versions: HTML 4.01, XHTML 1.0 (Transitional
or Strict), XHTML 1.1, HTML 5
• Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

54
 The <head> Section
• Contains information that doesn’t show directly on the viewable page
• Starts after the <!doctype> declaration
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• Can contain some other tags, e.g.
• <meta>
• <script>
• <style>
• <!–- comments -->

55
 <head> Section: <title> tag

• Title should be placed between <head> and

</head> tags
<title>Telerik Academy – Winter Season 2009/2010
</title>

• Used to specify a title in the window title bar

• Search engines and people rely on titles

56
<head> Section: <meta>

• Meta tags additionally describe the content contained within the

page
<meta name="description" content="HTML
tutorial" />

<meta name="keywords" content="html, web

design, styles" />

<meta name="author" content="Chris Brewer" />

<meta http-equiv="refresh" content="5;

url=http://www.telerik.com" />

57
<head> Section: <script>

• The <script> element is used to embed scripts into an HTML

document
• Script are executed in the client's Web browser
• Scripts can live in the <head> and in the <body> sections
• Supported client-side scripting languages:
• JavaScript (it is not Java!)
• VBScript
• JScript

58
The <script> Tag – Example
scripts-example.html
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
59
 <head> Section: <style>

• The <style> element embeds formatting

information (CSS styles) into an HTML page
style-example.html
<html>
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html> 60
 Comments: <!-- --> Tag
• Comments can exist anywhere between the <html></html> tags
• Comments start with <!-- and end with -->

<!–- Telerik Logo (a JPG file) -->

<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...

61
 <body> Section: Introduction

• The <body> section describes the viewable portion of the page

• Starts after the <head> </head> section
• Begins with <body> and ends with </body>

<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>

62
 Text Formatting
• Text formatting tags modify the text between the opening tag and the
closing tag
• Ex. <b>Hello</b> makes “Hello” bold

<b></b> bold
<i></i> italicized
<u></u> underlined
 Samplesuperscript
 Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through

63
Text Formatting – Example

text-formatting.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>

64
 Hyperlinks: <a> Tag

• Link to a document called form.html on the same server in the same

directory:

<a href="form.html">Fill Our Form</a>

• Link to a document called parent.html on the same server in the parent
directory:

<a href="../parent.html">Parent</a>
• Link to a document called cat.html on the same server in the subdirectory
stuff:

<a href="stuff/cat.html">Catalog</a>

65
 Hyperlinks: <a> Tag

• Link to a document called apply-now.html

• On the same server, in same directory
• Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>
• Link to a document called index.html
• On the same server, in the subdirectory english of
the parent directory:

<a href="../english/index.html">Switch to
English version</a>

66
 Images: <img> tag
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">

 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

Example:
<img src="./php.png" alt="PHP Logo" />

67
 Miscellaneous Tags
• <hr />: Draws a horizontal rule (line):

<hr size="5" width="70%" />

• <center></center>

<center>Hello World!</center>
• <font></font>

<font size="3" color="blue">Font3</font>

<font size="+4" color="blue">Font+4</font>

68
Miscellaneous Tags – Example
misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
</body>
</html>
69
 Ordered Lists: <ol> Tag

• Create an Ordered List using <ol></ol>:

<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

• Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
70
 Unordered Lists: <ul> Tag

• Create an Unordered List using <ul></ul>:

<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

• Attribute values for type are:

• disc, circle or square

• Apple o Apple  Apple

• Orange o Orange  Orange
• Pear o Pear  Pear
71
Definition lists: <dl> tag
• Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt> tag, definition in
<dd> tag

<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
• Renders without bullets used to …</dd>
<dd>Language
• Definition is indented
</dl>

72
Lists – Example

lists.html
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
73
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
74
Special Characters – Example
special-chars.html
<p>[&gt;&gt;&nbsp;&nbsp;Welcome
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

75
Using <DIV> and <SPAN> Bl
and Inline Elements
Block and Inline Elements

• Block elements add a line break before and after them

• <div> is a block element
• Other block elements are <table>, <hr>, headings, lists, <p> and etc.
• Inline elements don’t break the text before and after them
• <span> is an inline element
• Most HTML elements are inline, e.g. <a>

77
The <div> Tag

• <div> creates logical divisions within a page

• Block style element
• Used with CSS
• Example:

div-and-span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>

78
 The <span> Tag

• Inline style element

• Useful for modifying a specific portion of text
• Don't create a separate area (paragraph) in the
document
• Very useful with CSS

span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>

79
HTML Tables
 HTML Tables

• Tables represent tabular data

• A table consists of one or several rows

• Each row has one or more columns

• Tables comprised of several core tags: <table></table>: begin /

end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)

• Tables should not be used for layout. Use CSS floats and
positioning styles instead
81
HTML Tables

• Start and end of a table

<table> ... </table>
• Start and end of a row

<tr> ... </tr>

• Start and end of a cell in a row

<td> ... </td>

82
Simple HTML Tables – Example

<table cellspacing="0" cellpadding="5">

<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
83
Complete HTML Tables

• Table rows split into three semantic sections: header, body and footer
• <thead> denotes table header and contains <th> elements, instead of <td>
elements
• <tbody> denotes collection of table rows that contain the very data
• <tfoot> denotes table footer but comes BEFORE the <tbody> tag
• <colgroup> and <col> define columns (most often used to set column
widths)

84
Complete HTML Table: Example

<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup> th
<thead>
header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body (data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
85
output

86
 Cell Spacing and Padding
• Tables have two important attributes:

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty

empty space space around the cell
between cells content
87
 Cell Spacing and Padding – Example

table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
88
output

89
 Column and Row Span

• Table cells have two important attributes:

 colspan  rowspan

colspan="1" colspan="1" rowspan="2" rowspan="1"

cell[1,1] cell[1,2] cell[1,2]

cell[1,1]
cell[2,1] cell[2,1]
colspan="2" rowspan="1"
 Defines how  Defines how
many columns many rows the
the cell occupies cell occupies
90
Column and Row Span – Example

table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>

91
output

92
 HTML Forms
Entering User Data from a Web Page
HTML Forms
• Forms are the primary method for gathering data from site
visitors
• Create a form block with

<form></form>
• Example: The “method" attribute tells how the
form data should be sent – via GET
or POST request

<form name="myForm" method="post"

action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
94
Form Fields

• Single-line text input fields:

<input type="text" name="FirstName" value="This
is a text field" />

• Multi-line textarea fields:

<textarea name="Comments">This is a multi-line
text field</textarea>

• Hidden fields contain data not shown to the

user:
<input type="hidden" name="Account" value="This
is a hidden text field" />

95
Form Input Controls

• Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />

• Radio buttons:
<input type="radio" name="title" value="Mr." />

• Radio buttons can be grouped, allowing only

one to be selected from a group:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />
96
Other Form Controls

• Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>

• Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />

97
Other Form Controls
• Password input – a text field which masks the
entered text with * signs
<input type="password" name="pass" />
• Multiple select field – displays the list of
items in multiple lines, instead of one

<select name="products" multiple="multiple">

<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
98
Other Form Controls

• File input – a field used for uploading files

<input type="file" name="photo" />
• When used, it requires the form element to
have a specific attribute:

<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

99
Labels

• Form labels are used to associate an explanatory

text to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
• Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are
checked)
• Labels are both a usability and accessibility
feature and are required in order to pass
accessibility validation.
100
HTML Forms – Example

form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" /> 101
HTML Forms – Example
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>

102
HTML Forms – Example

form.html (continued)

103
html5

what’s new in HTML5, including:

• • A new DOCTYPE
• • New elements and attributes
• • Obsolete 4.01 elements
• • APIs

104
Elements and attributes

105
New form input types:
• We covered the new form input control types in Chapter 9, but
here they are at a glance: color, date, datetime, datetime-local,
email, month, number, range, search, tel, time, url, and week.
New global attributes:
• Global attributes are attributes that can be applied to any
element. The number of global attributes was expanded in
HTML5, and many of them are brand new (as noted in Table 10-
2). The W3C is still adding and removing attributes as of this
writing, so it’s worth checking in with the spec for the latest
(dev.w3.org/html5/spec/global-attributes.html#global-
attributes).

106
107
Meet the APIs

• Media Player API

• Session History API
• Offline Web Application API
• Editing API
• Drag and Drop API
• Canvas API
• Web Storage API
• Geolocation API
• Web Workers API
• Web Sockets API

108
Video and Audio

• Adding a video to a page

• Adding audio to a page
• Canvas

109
Cascading Style Sheets
(CSS)
CSS: A New Philosophy

• Separate content from presentation!

Content Presentation
(HTML document) (CSS Document)

Title
Lorem ipsum dolor sit amet,
Bold
consectetuer adipiscing elit.
Suspendisse at pede ut purus Italics
malesuada dictum. Donec vitae
neque non magna aliquam dictum.
• Vestibulum et odio et ipsum
Indent
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam
nec, interdum vel, mi. Sed nec
quam nec odio lacinia molestie.
Praesent augue tortor, convallis
eget, euismod nonummy, lacinia
ut, risus.

111
CSS Introduction

• Cascading Style Sheets (CSS)

• Used to describe the presentation of documents
• Define sizes, spacing, fonts, colors, layout, etc.
• Improve content accessibility
• Improve flexibility
• Designed to separate presentation from content
• Due to CSS, all HTML presentation tags and
attributes are deprecated, e.g. font, center,
etc.

112
CSS Introduction

• CSS can be applied to any XML document

• Not just to HTML / XHTML
• CSS can specify different styles for different media
• On-screen
• In print
• Handheld, projection, etc.
• … even by voice or Braille-based reader

113
Why “Cascading”?

• Priority scheme determining which style rules apply to element

• Cascade priorities or specificity (weight) are calculated and assigned to the
rules
• Child elements in the HTML DOM tree inherit styles from their parent
• Can override them
• Control via !important rule

114
Why “Cascading”?

115
Why “Cascading”?

• Some CSS styles are inherited and some not

• Text-related and list-related properties are inherited - color,
font-
size, font-family, line-height, text-
align, list-style, etc
• Box-related and positioning styles are not inherited - width,
height, border, margin, padding, position,
float, etc
• <a> elements do not inherit color and text-decoration

116
Style Sheets Syntax

• Style sheets consist of rules, selectors,

declarations, properties and values

• Selectors are separated by commas

• Declarations are separated by semicolons
• Properties and values are separated by colons

h1,h2,h3 { color: green; font-weight: bold; }

117
Selectors

• Selectors determine which element the rule applies to:

• All elements of specific type (tag)
• Those that mach a specific attribute (id, class)
• Elements may be matched depending on how they are nested in the
document tree (HTML)
• Examples:

.header a { color: green }

#menu>li { padding-top: 8px }

118
Selectors

• Three primary kinds of selectors:

• By tag (type selector):
h1 { font-family: verdana,sans-serif; }
• By element id:
#element_id { color: #ff0000; }
• By element class name (only for HTML):
.myClass {border: 1px solid red}
• Selectors can be combined with commas:
h1, .link, #top-link {font-weight: bold}

This will match <h1> tags, elements with class link,

and element with id top-link
119
Selectors

• Pseudo-classes define state

• :hover, :visited, :active , :lang
• Pseudo-elements define element "parts" or are used to generate
content
• :first-line , :before, :after

a:hover { color: red; }

p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }

120
Selectors

• Match relative to element placement:

p a {text-decoration: underline}

This will match all <a> tags that are inside of <p>
• * – universal selector (avoid or use with care!):

p * {color: black}
This will match all descendants of <p> element
• + selector – used to match “next sibling”:

img + .link {float:right}

This will match all siblings with class name link
that appear immediately after <img> tag
121
 Selectors

• > selector – matches direct child nodes:

p > .error {font-size: 8px}
This will match all elements with class error, direct
children of <p> tag
• [ ] – matches tag attributes by regular expression:

Thisimg[alt~=logo]
will match all <img> tagsnone}
{border: with alt attribute
containing the word logo
• .class1.class2 (no space) - matches elements with
both (all) classes applied at the same time

122
 Values in the CSS Rules

• Colors are set in RGB format (decimal or hex):

• Example: #a0a6aa = rgb(160, 166, 170)
• Predefined color aliases exist: black, blue, etc.
• Numeric values are specified in:
• Pixels, ems, e.g. 12px , 1.4em
• Points, inches, centimeters, millimeters
• E.g. 10pt , 1in, 1cm, 1mm
• Percentages, e.g. 50%
• Percentage of what?...
• Zero can be used with no unit: border: 0;

123
Default Browser Styles

• Browsers have default CSS styles

• Used when there is no CSS information or any other style information in
the document
• Caution: default styles differ in browsers
• E.g. margins, paddings and font sizes differ most often and usually
developers reset them

* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding: 0; }

124
 Linking HTML and CSS
• HTML (content) and CSS (presentation) can be linked in three ways:
• Inline: the CSS rules in the style attribute
• No selectors are needed
• Embedded: in the <head> in a <style> tag
• External: CSS rules in separate file (best)
• Usually a file with .css extension
• Linked via<link rel="stylesheet" href=…> tag or @import
directive in embedded CSS block

125
Inline Styles: Example

inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
126
CSS Cascade (Precedence)

• There are browser, user and author stylesheets with "normal"

and "important" declarations
• Browser styles (least priority)
• Normal user styles
• Normal author styles (external, in head, inline)
• Important author styles
• Important user styles (max priority)

a { color: red !important ; }

127
 Embedded Styles
• Embedded in the HTML in the <style> tag:
<style type="text/css">

• The <style> tag is placed in the <head> section of the document

• type attribute specifies the MIME type

• MIME describes the format of the content

• Other MIME types include text/html, image/gif, text/javascript

• Used for document-specific styles

128
Embedded Styles: Example

embedded-stylesheets.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
129
Embedded Styles: Example

…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>

130
 External CSS Styles
• External linking
• Separate pages can all use a shared style sheet
• Only modify a single file to change the styles across
your entire Web site
• link tag (with a rel attribute)
• Specifies a relationship between current document and
another document
• link elements should be in the <head>

<link rel="stylesheet" type="text/css"

href="styles.css">

131
 External CSS Styles
@import
• Another way to link external CSS files
• Example:

<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>
• Ancient browsers do not recognize @import

• Use @import in an external CSS file to workaround the IE 32 CSS file limit

132
 External Styles: Example
styles.css
/* CSS Document */

a { text-decoration: none }

a:hover { text-decoration: underline;

color: red;
background-color: #CCFFCC }

li em { color: red;
font-weight: bold }

ul { margin-left: 2cm }

ul ul { text-decoration: underline;
margin-left: .5cm }

133
External Styles: Example

external-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="styles.css" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<li>Milk</li>
…
134
External Styles: Example

…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
135
Text-related CSS Properties

• color – specifies the color of the text

• font-size – size of font: xx-small, x-
small, small, medium, large, x-large, xx-
large, smaller, larger or numeric value
• font-family – comma separated font names
• Example: verdana, sans-serif, etc.
• The browser loads the first one that is available
• There should always be at least one generic font
• font-weight can be normal, bold, bolder,
lighter or a number in range [100 … 900]
136
CSS Rules for Fonts

• font-style – styles the font

• Values: normal, italic, oblique
• text-decoration – decorates the text
• Values: none, underline, line-trough, overline, blink
• text-align – defines the alignment of text or other content
• Values: left, right, center, justify

137
Shorthand Font Property

• font
• Shorthand rule for setting multiple font properties at the same time

isfont:italic
equal to writing this:normal bold 12px/16px verdana

font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;

138
 Backgrounds

• background-image
• URL of image to be used as background, e.g.:

background-image:url("back.gif");
• background-color
• Using color and image and the same time
• background-repeat
• repeat-x, repeat-y, repeat, no-repeat
• background-attachment
• fixed / scroll

139
Backgrounds

• background-position: specifies vertical and horizontal

position of the background image
• Vertical position: top, center, bottom
• Horizontal position: left, center, right
• Both can be specified in percentage or other numerical values
• Examples:

background-position: top left;

background-position: -5px 50%;

140
 Background Shorthand Property
• background: shorthand rule for setting background
properties at the same time:
background: #FFF0C0 url("back.gif") no-repeat
fixed top;
is equal to writing:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
• Some browsers will not apply BOTH color and image
for background if using shorthand rule

141
Background-image or <img>?

• Background images allow you to save many image tags from the
HTML
• Leads to less code
• More content-oriented approach
• All images that are not part of the page content (and are used only
for "beautification") should be moved to the CSS

142
Borders

• border-width: thin, medium, thick or numerical value (e.g.

10px)
• border-color: color alias or RGB value
• border-style: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset
• Each property can be defined separately for left, top, bottom and
right
• border-top-style, border-left-color, …

143
Border Shorthand Property

• border: shorthand rule for setting border properties at once:

is equal to writing:
border: 1px solid red

border-width:1px;
• border-color:red;
Specify different borders for the sides via shorthand rules:
border-style:solid;
border-top, border-left, border-right, border-
bottom
• When to avoid border:0

144
Width and Height

• width – defines numerical value for the width of element, e.g.

200px
• height – defines numerical value for the height of element, e.g.
100px
• By default the height of an element is defined by its content
• Inline elements do not apply height, unless you change their

display style.

145
Margin and Padding

• margin and padding define the spacing around the element

• Numerical value, e.g. 10px or -5px
• Can be defined for each of the four sides separately - margin-top,
padding-left, …
• margin is the spacing outside of the border
• padding is the spacing between the border and the content
• What are collapsing margins?

146
Margin and Padding: Short Rules
• margin: 5px;
• Sets all four sides to have margin of 5 px;
• margin: 10px 20px;
• top and bottom to 10px, left and right to 20px;
• margin: 5px 3px 8px;
• top 5px, left/right 3px, bottom 8px
• margin: 1px 3px 5px 7px;
• top, right, bottom, left (clockwise from top)
• Same for padding

147