WT Module1
Uploaded by
Sam AlexWT Module1
Uploaded by
Sam AlexModule 1
XHTML
Prepared By,
Ashji S Raj
AP, CSE,AJCE
AJCE/2014/WT
Web languages / technologies
Hypertext Markup Language (HTML): used for writing
web pages
Cascading Style Sheets (CSS): stylistic info for web pages
PHP Hypertext Preprocessor (PHP): dynamically create
pages on a web server
Java Script: interactive and programmable web pages
Asynchronous JavaScript and XML (Ajax): accessing
data for web applications
eXtensible Markup Language (XML): meta-language for
organizing data
Structured Query Language (SQL): interaction with
databases
AJCE/2014/WT
Origins and Evolution of HTML
HTML was defined with SGML[Std. Generalized Markup
Language]
Describes the content and structure of information on a web
page / HTML document
Original intent of HTML: General layout of documents that
could be displayed by a wide variety of computers
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML versions: HTML 4, HTML 5
XHTML 1.0, XHTML 1.1
AJCE/2014/WT
Reasons to use XHTML, rather than HTML
1. HTML has lenient syntax rules, leading to careless and
sometime ambiguous documents
- XHTML syntax is much more strict, leading
to clean and clear documents in a standard form
2. HTML processors do not even enforce the few syntax
rule that do exist in HTML
3. The syntactic correctness of XHTML documents can be
validated
AJCE/2014/WT
Basic Syntax
Elements are defined by tags (markers)
- Tag format:
- Opening tag: <tag_name>
- Closing tag: </tag_name>
The opening tag and its closing tag together
specify a container for the content they enclose
syntax: <element> content </element>
example: <p>This is a paragraph</p>
most whitespace is insignificant in HTML (ignored or
collapsed to a single space)
AJCE/2014/WT
Basic Syntax (Cont…)
Not all tags have content [ Empty Tags]
- If a tag has no content, its form is <tag_name />
- The container and its content together are called an element
If a tag has attributes, they appear between its name and the
right bracket of the opening tag
- <a href="default.htm"> this is a link </a>
Comment form: <!-- comment -->
AJCE/2014/WT
HTML Document Example
<!DOCTYPE html>
<html> <! -- defines the whole HTML document -- >
<head>
information about the page
</head>
<body> <! -- defines the body of the HTML doc. -- >
page contents
</body>
</html>
The header describes the page and the body contains the page's
contents
An HTML page is saved into a file ending with extension .html
DOCTYPE tag tells browser to interpret our page's code as
HTML5, the latest/greatest version of the language
AJCE/2014/WT
XHTML Document Example
XHTML stands for Extensible HyperText
Markup Language
<?xml version = ″1.0″ encoding = ″utf-8″ ?>
<!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> Title of document </title>
</head>
<body>
......
</body>
</html>
AJCE/2014/WT
XHTML Document Structure
- Every XHTML document must begin with: xml declaration
<?xml version = ″1.0″ encoding = ″utf-8″ ?>
<!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
XML DOCTYPE Command
- <html>, <head>, <title>, and <body> are required in every
document
The whole document must have <html> as its root
html must have the xmlns attribute: xml namespace
<html xmlns = ″http://www.w3.org/1999/xhtml″>
A document consists of a head and a body
The <title> tag is used to give the document a title, which is
normally displayed in the browser’s window title bar (at the top of
the display)
AJCE/2014/WT
XHTML Elements
An HTML element is everything from the start tag to the end
tag:
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
<p> this is a paragraph </p>
AJCE/2014/WT
XHTML Attributes
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"
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com"> This is a link </a>
</body>
</html>
AJCE/2014/WT
Basic Text Markup
- Describes how the text content of an XHTML document can be
formatted with XHTML tags
1. Paragraphs
2. Line Breaks
3. Preserving white space
4. Headings
5. Block Quotes
6. Font styles & size
7. Character Entities
8. Horizontal Rules
9. Meta Element
AJCE/2014/WT
Paragraph
<p> PARAGRAPH </p>
- Paragraph Elements
- The <p> tag breaks the current line and inserts a blank
line
- The new line gets the beginning of the content of the
paragraph
- The browser puts as many words of the paragraph’s
content as will fit in each line.
- Multiple spaces in the source paragraph elements are
replaced by single spaces in the display.
AJCE/2014/WT
Example
AJCE/2014/WT
Line Breaks
Use the <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.
AJCE/2014/WT
Preserving Whitespace
The <pre> tag defines preformatted text.
Text in a <pre> element preserves both spaces and
line breaks. </pre>
It blocks the browser from eliminating multiple
spaces
AJCE/2014/WT
Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading.
1, 2, and 3 use font sizes that are larger than the default
font size
4 uses the default size & 5 and 6 use smaller font sizes
AJCE/2014/WT
Block Quotations
Content of <blockquote> can be made look different from the
surrounding text <blockquote> </blockquote>
To set a block of text off from the normal flow and
appearance of text
Browsers often indent, and sometimes italicize
AJCE/2014/WT
Font Styles and sizes [Formatting Tags]
Emphasis - <em> (often set in italics)
Strong - <strong> (often set in boldface)
Monospace - <code> (often set in Courier)
<em>, <strong>, and <code> are not affected if they appear in
the content of a <blockquote>
Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered
in a way that the user understands as "important". Today, all
major browsers render strong as bold and em as italics.
AJCE/2014/WT
Cont…
AJCE/2014/WT
Example: text formatting tags
AJCE/2014/W
T
Character Entities
These are special characters needed in a document but cannot be
typed as themselves. These special characters are defined as entities.
An entity in a document is replaced by its associated character by the
browser.
Char. Entity Meaning
& & Ampersand
< < Less than
> > Greater than
" " Double quote
' ' Single quote
¼ ¼ One quarter
½ ½ One half
¾ ¾ Three quarters
° Degree
(space) Non-breaking space
AJCE/2014/WT
Horizontal Rules
The <hr> tag creates a horizontal line in an HTML
page.
The hr element can be used to separate content:
AJCE/2014/WT
The meta Element
The meta element (for search engines)
Used to provide additional information about a document, with
attributes, not content.
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be
machine parsable.
Two attributes that are used to provide information are name
and content
User selects a name as the value of the name attribute and
specifies information through the content attribute.
<meta name=“keyword” content=“binary trees, stack” />
AJCE/2014/WT
Block and inline elements
Block elements contain an entire large region of content
examples: paragraphs, lists, table cells
the browser places a margin of whitespace between
block elements for separation
Inline elements affect a small amount of content
examples: bold text, code fragments, images
the browser allows many inline elements to appear on
the same line
must be nested inside a block element
AJCE/2014/WT
IMAGES
Inserts a graphical image into the page.
Which is an inline tag, specifies an image that is to
appear in a document.
Which includes two attributes
src - attribute specifies the image URL ie. File
containing the image
Alt - attribute describing the image and displays when it
is not possible to display the image.
The <img> tag has 30 different attributes, including
width and height (in pixels)
AJCE/2014/WT
Example : image
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"
width="304“ height=“228”/ >
AJCE/2014/WT
Image - Formats:
GIF (Graphic Interchange Format)
o 8-bit color (256 different colors)
JPEG (Joint Photographic Experts Group)
o 24-bit color (16 million different colors)
o JIF & JPEG use compression, but JPEG compression is
better
PNG (Portable Network Graphics)
o Relatively new
o Should eventually replace both gif and jpeg
o Files are bigger than jpeg – no lost data!
AJCE/2014/WT
XHTML Document Validation
W3C HTML Validation Service
http://validator.w3.org/file-upload.html
This <url> shows a browser display of file-uploaded.
Enter the file_name of the document to be validated.
Specified file is uploaded to the validator server, where
the validation system is run on it.
Then the browser displays the document returned by the
validation system.
AJCE/2014/WT
Hypertext Links
Hypertext links / links act as a pointer to some resources.
That resource can be an XHTML document or another place in
the current document.
A link pointing to a different document specifies the address of
that document. Address could be a filename, a directory path & a
filename or a complete URL.
Links are specified in an attribute of an anchor <a> </a>tag,
which is an inline tag. The anchor tag that specifies a link is called
the source of that link. The document that whose address is
specified in a link is called the target of that link.
One main attribute of anchor tag is href [Hypertext Reference]
The value assigned to href specifies the target of the link. If the
target is in another document in the same directory, the target is
just filename
AJCE/2014/WT
Example: link
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
AJCE/2014/WT
Targets within Documents
If the target is not at the beginning of the document, the target spot
must be marked
Target labels can be defined in many different tags with the id
attribute, as in <a id = "baskets"> Baskets </a>
The link to an id must be preceded by a pound sign (#); If the id is in
the same document, this target could be
<a href = "#baskets"> What about baskets? </a>
If the target is in a different document, the document reference must
be included <a href = "myAd.html#baskets”> Baskets </a>
Style note: a link should blend in with the surrounding text, so
reading it without taking the link should not be made less pleasant
Links can have images:
<a href = "c210data.html">
<img src = "smallplane.jpg" alt = "Small picture of an airplane" />
</a>
AJCE/2014/WT
Lists
XHTML provides simple and effective ways to specify
lists in documents
The most common HTML lists are ordered and unordered
lists.
Unordered lists
The list is the content of the <ul> tag
List elements are the content of the <li> tag
AJCE/2014/WT
Cont…
Ordered lists
The list is the content of the <ol> tag
Each item in the display is preceded by a sequence value
AJCE/2014/WT
Cont…
Nested lists
Any type list can be nested inside any type list
The nested list must be in a list item
Definition lists (for glossaries, etc.)
Definition lists are used to specify list of terms and
their definitions
List is the content of the <dl> tag
Terms being defined are the content of the <dt> tag
The definitions themselves are the content of the <dd>
tag
AJCE/2014/WT
Example
AJCE/2014/WT
Tables
A table is a matrix of rows and columns, in which each
intersection of a row and a column is called cell.
The cells in the top row contain column labels & cells in the
leftmost column contain row labels. Rest of the cells contain
the data of the table.
A table is specified as the content of a <table> tag
Two attributes : border [line around the whole table]and rule
[lines that separate the cells each other]
The rule lines are set to 1 for any non-zero border value
If border is set to "border", the browser’s default width border
is used. The border attribute can be set to a number, which will
be the border width. Border=“3”
Without the border attribute, the table will have no lines!
AJCE/2014/WT
Tables cont…
<caption> tag :- title of the table and which can immediately
follow the opening <table> tag.
<tr> - specifies row of a table
<th>- specifies the table heading
<td>- specifies the data cell of each row
The first row of the table has the column labels.
AJCE/2014/WT
Tables cont…
rowspan & colspan
colspan : make the cell as wide as the specified number of
columns below it in the table
rowspan : make the cell as wide as the specified number of
rows adjacent to it.
<table>
<caption> </caption>
<tr>
<td rowspan=“2”></td>
<th colspan=“3”> </th>
</tr>
</table>
AJCE/2014/WT
Tables cont…
align and valign attributes
align: horizontal placement of the content within a cell
valign: vertical alignment of the content
align can use with <tr>,<th> and <td>
align attributes has possible values left, right & center
If align specifies in a <tr> tag, it applies to all the cells in
the row.
The default alignment for <th> is center & <td> is left
valign can use with <th> and <td> tags and has possible
values top and bottom.
Default vertical alignment for both <th> and <td> is center.
AJCE/2014/WT
Tables cont…
cellpadding and cellspacing Attributes
The cellspacing attribute of <table> is used to specify the
distance between cells in a table
The cellpadding attribute of <table> is used to specify the
spacing between the content of a cell and the inner walls of
the cell
Cellpadding is often used to prevent text in a cell from being
too close to the edge of the cell.
Can use with <table> tag
<table border=“4” cellspacing=“10” cellpadding=“30”>
AJCE/2014/WT
Table sections
Tables naturally has two or three parts: header, body, and
footer: thead, tbody, tfoot
If a document has multiple tbody elements, they are
separated by thick horizontal lines
Header includes column labels; tbody includes data of
the table and row labels; the footer sometimes has the
column labels repeated after the body
AJCE/2014/WT
Forms
Forms are used to sent information from a web browser to
web server.
XHTML tags are used to create forms and are called as
controls or widgets (e.g., radio buttons textbox and
checkboxes)
All control tags are inline tags & they collect information
from the user.
When the Submit button of a form is clicked, the form’s
values are sent to the server for processing
All of the widgets, or components of a form are defined in
the content of a <form> tag.
<form> …… </form> is a block tag.
AJCE/2014/WT
Forms Cont…
The only required attribute of <form> is action, which specifies
the URL of the application that is to be called when the Submit
button is clicked.
<form action = "http://www.cs.ucp.edu/cgi-bin/survey.pl" >
If the form has no action, the value of action is the empty
string.
The method attribute of <form> specifies one of the two
possible techniques of transferring the form data to the server,
get and post
Get: return specified document and post: execute the target
program and return result
AJCE/2014/WT
Form- Controls
Many controls are created with the inline tag <input>
The type attribute of <input> specifies the kind of widget
being created
1. Text
Creates a horizontal box for text input
Default size is 20; it can be changed with the size
attribute; name attribute specifies the name of the value
of the control
If more characters are entered than will fit, the box is
scrolled (shifted) left
If you don’t want to allow the user to type more
characters than will fit, set maxlength, which causes
excess input to be ignored
AJCE/2014/WT
Form- Controls
Example
<form action=“ ” >
<input type = "text" name = "Phone“ size = "12“
maxlength=“25” />
</form>
Widgets should be placed in label elements
<form>
<label> <input type = "text” name = "phone" />
Phone:</label>
</form>
2. Password – just like text except asterisks are displayed,
rather than the input characters
<label> <input type = “password” name = “pwd" />
PWD:</label>
AJCE/2014/WT
Form- Controls
3. Checkboxes - to collect multiple choice input
Every checkbox requires a value attribute, which is the
widget’s value in the form data when the checkbox is
‘checked’
A checkbox button doesn’t contribute to the form if it is off
To initialize a checkbox to ‘checked’, the checked attribute
must be set to "checked” .By default, no checkbox is initially
‘checked’
Every checkbox requires a name attribute and value attribute
in its <input> tag. Name identifies the button and value is
its value.
Checkbox elements should also appear in label elements.
AJCE/2014/WT
Form- Controls
AJCE/2014/WT
Form- Controls
4. Radio Buttons – similar to collections of checkboxes but only
one button can be ‘checked’ at a time
Every button in a radio button group MUST have the same
name
The type value of the radio button is ‘raido’
If no button in a radio button group is ‘pressed’, the browser
often ‘presses’ the first one [default]
<label> <input type = "radio" name = "age“
value = "under20" checked = "checked" />
0-19 </label>
AJCE/2014/WT
Form- Controls
5. The <select> tag
There are two kinds of menus, those that behave like
checkboxes and those that behave like radio buttons (the
default)
Menus that behave like checkboxes are specified by
including the multiple attribute, which must be set to
"multiple“
The name attribute of <select> is required
The size attribute of <select> can be included to specify the
number of menu items to be displayed (the default is 1)
If size is set to > 1 or if multiple is specified, the menu is
displayed as a pop-up menu
AJCE/2014/WT
Form- Controls
Each item of a menu is specified with an <option> tag,
whose pure text content (no tags) is the value of the item
An <option> tag can include the selected attribute, which
when assigned "selected“ specifies that the item is preselected
AJCE/2014/WT
Form- Controls
6. Text areas - created with <textarea>
Usually include the rows and cols attributes to specify the
size of the text area
Default text can be included as the content of <textarea>
Scrolling is implicit if the area is overfilled
AJCE/2014/WT
Form- Controls
7. Reset & Submit buttons [The action buttons]
Both are created with <input>
<input type = "reset"
value = "Reset Form" />
<input type = "submit”
value = "Submit Form" />
Submit has two actions:
1. Encode the data of the form & sent to the server
2. Request the server to execute the server-resident pgm
server-resident program specified as the value of the action
attribute of <form>
A Submit button is required in every form
Reset button clears all the controls in the form to their initial
state
AJCE/2014/WT
Frames
Frames are used to display more than one document at a time
in a browser display window
Frames are rectangular sections of the display window, each
of which can display a different document
Because frames are no longer part of XHTML, you cannot
validate a document that includes frames
The <frameset> tag specifies the number of frames and their
layout in the window
<frameset> takes the place of <body> . A document has
either a body or a frameset but cannot have both
AJCE/2014/WT
Frames Cont …
• <frameset> must have either a rows attribute or a cols
attribute, or both (usually the case)
• Row attribute specifies the number of rows of the frames
• Cols attribute specifies the number of columns of frames.
• The possible values for rows and cols are numbers,
percentages, and asterisks
• A number value specifies the row height in pixels - Not
terribly useful!
• A percentage specifies the percentage of total window
height for the row - Very useful!
• When an asterisk is used as the value of rows, it means
the remainder of the window height
AJCE/2014/WT
Frames Cont …
Examples:
<frameset rows = "150, 200, 300">
<frameset rows = "25%, 50%, 25%">
<frameset rows = "50%, 20%, *" >
The <frame> tag specifies the content of a frame
The first <frame> tag in a <frameset> specifies the content of
the first frame, etc.
Row-major order is used
Frame content is specified with the src attribute
Without a src attribute, the frame will be empty (such a frame
CANNOT be filled later)
If <frameset> has fewer <frame> tags than frames, the extra
frames are empty
AJCE/2014/WT
Frames Cont …
Scrollbars are implicitly included if needed (they are
needed if the specified document will not fit)
If a name attribute is included, the content of the frame
can be changed later (by selection of a link in some other
frame)
<frame src=“fruit.html” name=“descriptions”/>
<a href = “apple.html” target=“descriptions”>apple</a>
Note: the Frameset standard must be specified in the
DOCTYPE declaration
AJCE/2014/WT
Syntactic Differences between HTML & XHTML
Property HTML XHTML
Tags and attributes are Case insensitive Tags and attributes must be in lower case
Case sensitivity <FORM> <Form>
It can be omitted if the processing agents can All the elements must have closing tags
infer their presents eg:<p> first paragraph … <input type=”text”
Closing tags <p> second paragraph … name=”address”></input>
Or <input type=”text” name=”address” / >
Attribute_value must be quoted only if it All Attribute_value must be quoted
Quoted attribute values contains any special characters regardless of characters in it.
Some attribute values are implicit; they need Explicitly state the default value.
not be explicitly stated <table border=”border”>
Explicit attribute values
<table border>
Allows the use of both id and name attributes Use of id attribute is encouraged
id and name attributes & name is discouraged
Nesting rules are not strictly enforced. Nesting rules are strictly enforced.
Eg: An anchor element cannot contain another Syntactic rules are checked by the W3C
Element nesting
<a> and <form> element cannot contain validation software.
another form element
AJCE/2014/WT
Cascading Style Sheets [CSS]
AJCE/2014/W
T
Cascading Style Sheets
CSSs provide the means to control and change presentation of
XHTML documents
Style sheets allow you to impose a standard style on a whole
document, or even a whole collection of documents
Style is specified for a tag by the values of its properties
XHTML is concerned primary with content rather than the details of
how that content is presented by browsers.
Tags and associated properties stores presentation information for
the browsers. Browser use the default values if the document does
not specify any style sheet. A style sheet would override the default
value.
XHTML style sheets are called cascading style sheets because they
can be defined at three different levels to specify the style of a
document.
AJCE/2014/WT
Levels of Style Sheets
There are three levels of style sheets
• Inline - specified for a specific occurrence of a tag and
apply only to that tag [lower-level style]
– This is fine-grain style, which defeats the purpose of
style sheets - uniform style
• Document-level style sheets - apply to the whole
document in which they appear
• External style sheets - can be applied to any number of
documents [higher-level style]
When more than one style sheet applies to a specific tag in a
document, the lowest level style sheet has precedence
Lower-level style sheets can override higher-level style
sheets
AJCE/2014/WT
Levels of Style Sheets (continued)
Inline style sheets appear in the tag itself
Document-level style sheets appear in the head of the
document
External style sheets are in separate files, potentially on any
server on the Internet type = text/css
A <link> tag is used to specify that the browser is to fetch and
use an external style sheet file. appear in the head of the doc.
<link rel = "stylesheet" type = "text/css"
href = "http://www.wherever.org/termpaper.css">
</link>
External style sheets can be validated
http://jigsaw.w3.org/css-validator/ validator-upload.html
AJCE/2014/WT
Style Specification Formats
Format depends on the level of the style sheet
Inline: Style sheet appears as the value of the style attribute
in the tag itself
General form:
style = "property_1: value_1;
property_2: value_2;
…
property_n: value_n"
<h1 style="font-size:10px">My First CSS Example</h1>
AJCE/2014/WT
Format for Document-level
Style sheet appears as a list of rules that are the content of a
<style> tag
The <style> tag must include the type attribute, set to text/css"
General form:
<style type = "text/css">
rule list
</style>
The list of complicated CSS rules must be placed in an HTML
comment, because it is not HTML
Comments in the rule list must have a different form - use C
comments (/*…*/)
AJCE/2014/WT
Form of the rules:
selector {list of property/values}
Each property/value pair has the form: property: value
Pairs are separated by semicolons
If property is given more than one value, separate them by
spaces/commas
Selector { property_1:value_1; property_2:value_2}
AJCE/2014/WT
External style sheets
It has a form similar to that of document style sheets.
The external file contains a list of style rules, as in the
content of a <style> tag for document-level style sheets
The <link> tag is used to specify the external style sheets
<link rel = "stylesheet" type = "text/css"
href = "http://www.wherever.org/termpaper.css">
</link>
AJCE/2014/WT
Selector Forms
Simple Selector Forms
The selector is a tag name or a list of tag names, separated
by commas.
h1{font-size:10px;}
h2, h3 {font-size:10px }
AJCE/2014/WT
Class Selectors
Used to allow different occurrences of the same tag to
use different style specifications
A style class has a name, which is attached to a tag name
p.narrow {property/value list}
p.wide {property/value list}
The class you want on a particular occurrence of a tag is
specified with the class attribute of the tag
For example,
<p class = "narrow">
...
</p>
...
<p class = "wide">
...
</p>
AJCE/2014/WT
Generic Selectors
• A generic class can be defined if you want a style to
apply to more than one kind of tag
• A generic class must be named, and the name must
begin with a dot.
Example,
.really-big {property/value list}
Use it as if it were a normal style class
<h1 class = "really-big"> … </h1>
...
<p class = "really-big"> … </p>
AJCE/2014/WT
id Selectors
An id selector allow the application of a style to one
specific element
General form:
#specific-id {property-value list}
Example:
#section14 {font-size: 20}
<h2 id=“section14”> id_selector example </h2>
AJCE/2014/WT
Universal Selector & Pseudo Classes
Universal Selector
Denoted by asterisk(*) and applies its style to all elements in
the document
* {color:red}
Makes all elements in the document red.
Pseudo Classes
Pseudo classes are styles that apply when something
happens, rather than because the target element simply exists
Names begin with colons
hover classes apply when the mouse cursor is over the
element
focus classes apply when an element has focus
AJCE/2014/WT
Pseudo Classes example
<!-- pseudo.html -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Checkboxes </title>
<style type = "text/css">
input:hover {color: red;}
input:focus {color: green;}
</style>
</head>
<body>
<form action = "">
<p>
Your name:
<input type = "text" />
</p>
</form>
</body>
</html>
AJCE/2014/WT
Property Value Forms
There are 60 different properties in 7 categories:
Fonts
Lists
Alignment of text
Margins
Colors
Backgrounds
Borders
AJCE/2014/WT
Property Value
Keyword property values [predefined]- left, Right, large,
small, … [only few possible values]
Not case sensitive but tags are case sensitive
Number values are used when there is no meaningful
units can be attached to the property values
Length - numbers, maybe with decimal points followed
by two-character abbreviation of a unit name
Units:
px – pixels
in - inches
cm - centimeters
mm - millimeters
pt – points pc - picas (12 points)
AJCE/2014/WT
Property Value
Percentage - just a number followed immediately by a percent
<frameset rows = "25%, 50%, 25%">
URL values – use a different form compared to url links
Placed in parentheses and preceded by url
url(protocol://server/pathname)
Colors [3-ways]
Color name {red,blue}
rgb(n1, n2, n3) [rgb(176, 200,224)
Numbers can be decimal or percentages
Hex form: #XXXXXX [6-digit] [#43AF00]
Property values are inherited by all nested tags, unless
overridden
AJCE/2014/WT
Font Properties
font-family
This property is used to specify list of font names -
browser uses the first in the list it has
font-family: Arial, Helvetica, Courier
Generic fonts: serif, sans-serif, cursive, fantasy, and
monospace (defined in CSS)
Each Browser has a specific font for each of these specific
names font-family: Arial, Helvetica, Courier, serif
AJCE/2014/WT
Font Properties (continued)
If a font name has more than one word, it should be single-
quoted font-family : ‘ Times New Roman’
font-size -- Possible values: a length number or a name, such as
smaller, xx-large, etc. font-size:10pt
Font-variants - [default value : normal]
normal, small-caps
font-style
italic, oblique (useless)
font-weight – used to specify degrees of boldness
bolder, lighter, bold, normal [default]
Could specify as a multiple of 100 (100 – 900)
font-weight:bold
AJCE/2014/WT
Font Properties (continued)
font
This property is used for specifying a list of font
properties [ eg: font: bolder 14pt Arial Helvetica]
Specifies font weight should be bold, font size should be 14pt,&
either Arial / Helvetica font should be used.
Order in which the property values are given is important.
Order must be: font style, font variant font weight, font size,
font name(s)
The text-decoration property
Specifies some special features of text
line-through, overline, underline, none
AJCE/2014/WT
Colors
Color is a problem for the Web for two reasons:
1. Monitors vary widely
2. Browsers vary widely
- There are three color collections
1. There is a set of 16 colors that are guaranteed to be displayable by all
graphical browsers on all color monitors called NAMED COLORS
AJCE/2014/WT
Colors (continued)
2. There is a much larger set, the WEB PALETTE
216 colors . These colors are displayed by Windows and Macintosh
based browsers
Use hex color values of 00, 33, 66, 99, CC, and FF
3. Any one of 16 million different colors
The color property specifies the foreground color of elements
<style type = “text/css”>
th.red {color: red}
</style>
<table border = "5">
<tr>
<th class = "red"> Apple </th>
</tr>
</table>
The background-color property specifies the back ground color of
AJCE/2014/WT
elements
List properties
Property_name : list-style-type
Unordered lists
Bullet can be a disc (default), a square, or a circle
Set it on either the <ul> or <li> tag
On <ul>, it applies to list items
<h3> Some Common Single-Engine Aircraft </h3>
<ul style = "list-style-type: square">
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
On <li>, list-style-type applies to just that item
AJCE/2014/WT
List properties (continued)
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li style = "list-style-type: disc">
Cessna Skyhawk </li>
<li style = "list-style-type: square">
Beechcraft Bonanza </li>
<li style = "list-style-type: circle">
Piper Cherokee </li>
</ul>
AJCE/2014/WT
List properties (continued)
Could use an image for the bullets in an unordered list
Example:
<li style = "list-style-image:
url(bird.jpg)">
On ordered lists - list-style-type can be used to change
the sequence values
AJCE/2014/WT
Alignment of Text
The text-indent property allows indentation
Takes either a length or a % value
The text-align property has the possible values, left (the
default), center, right, or justify
Sometimes we want text to flow around another element - the
float property
The float property has the possible values, left, right, and
none (the default)
If we have an element we want on the right, with text
flowing on its left, we use the default text-align value (left)
for the text and the right value for float on the element we
want on the right
AJCE/2014/WT
Alignment of Text
text-indent
Eg: <style type = “text/css”>
p.indent {text-indent: 0.5in}
</style>
. . .
<p class=indent>
this paragraph shows indentation
</p>
text-align
float
<style type = “text/css”>
p {text-align: left}
img {float: right}
</style>
AJCE/2014/WT
The Box Model
Borders – every element has a border-style property
Controls whether the element has a border and if so, the
style of the border
border-style -values: none, dotted, dashed, solid and double
(e.g. border-top-style, border-bottom-style, border-left-
style, border-right-style)
border-width –values: thin, medium (default), thick, or a
length value in pixels
Border width can be specified for any of the four borders
(e.g., border-top-width)
border-color – any color
Border color can be specified for any of the four borders
(e.g., border-top-color)
AJCE/2014/WT
The Box Model: Margins & Padding
Margin – the space between the border of an element and its
neighbor element
Padding -- the space between content of an element and its
border
Margin property applies to all four sides of an element
The margins around an element can be set with margin-left,
margin-right, margin-top , margin-bottom etc. - just assign
them a length value
Padding property applies to all four sides of an element
The Padding around an element can be set with Padding -left,
Padding -right, Padding -top , Padding -bottom etc. - just
assign them a length value
AJCE/2014/WT
The Box Model
AJCE/2014/WT
Background Images
The background-image property is used to place an image in
the background of an element.
body {background-image: url(image.gif)}
The background image is replicated as necessary to fill the
area of the element. This replication is called tiling.
Repetition can be controlled
background-repeat property
Possible values: repeat (default), no-repeat, repeat-x [repeat
horizontally], or repeat-y [repeat vertically]
background-position property [to control the position of a non-
repeated background image]
Possible values: top, center, bottom, left, or right
AJCE/2014/WT
The <span> and <div> tags
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
One problem with the font properties is that they apply to
whole elements, which are often too large
Solution: a new tag to define an element in the content
of a larger element - <span>
Use <span> to apply a document style sheet to its content
There is no default layout for the content of <span> tag
The <span> tag is similar to other XHTML tags, they can
be nested and they have id and class attributes
AJCE/2014/WT
The <span> and <div> tags (continued)
<style type = "text/css">?
.bigred {font-size: 24pt;
font-family: Arial; color: red}
</style>
---------------------------------------------
<p>
Now is the
<span class = "bigred">
best time </span> ever!
</p>
AJCE/2014/WT
The <span> and <div> tags (continued)
Another tag that is useful for style specifications: <div>
Used to create document sections (or divisions) for
which style can be specified
There is no default layout for the content of <div> tag
e.g., A section in a document that will be displayed
in blue:
<body>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
AJCE/2014/WT
Conflict Resolution
When two or more rules apply to the same tag there are rules for
deciding which rule applies
Document level
In-line style sheets have precedence over document style sheets
Document style sheets have precedence over external style
sheets
Within the same level there can be conflicts
A tag may be used twice as a selector
A tag may inherit a property and also be used as a selector
Style sheets can have different sources
The author of a document may specify styles
The user, through browser settings, may specify styles
Individual properties can be specified as important
AJCE/2014/WT
Precedence Rules
From highest to lowest
1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent) origin
Tie-Breakers
Specificity
1. id selectors
2. Class and pseudo-class selectors
3. General selectors
4. Universal Selectors
Position [precedence to the most recently seen specification]
Essentially, later has precedence over earlier
AJCE/2014/WT
AJCE/2014/WT
You might also like
- Tzul - Exp22 - Word - Ch04 - ML1 - Design (1) 2No ratings yetTzul - Exp22 - Word - Ch04 - ML1 - Design (1) 29 pages
- Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseFrom EverandHypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseNo ratings yet
- Accelerated Spanish Learn Fluent Spanish PDF11% (9)Accelerated Spanish Learn Fluent Spanish PDF7 pages
- Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp ShareNo ratings yetVisit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share36 pages
- IT4409: Web Technologies and E-Services: Lec 2: HTMLNo ratings yetIT4409: Web Technologies and E-Services: Lec 2: HTML45 pages
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- HTML and CSS: Click To Edit Master Subtitle StyleNo ratings yetHTML and CSS: Click To Edit Master Subtitle Style34 pages
- Chapter 1 Introduction To Web TechnologyNo ratings yetChapter 1 Introduction To Web Technology134 pages
- Chapter 02-MARKUP LANGUAGE HTML and CSSNo ratings yetChapter 02-MARKUP LANGUAGE HTML and CSS23 pages
- 6.implementing Lexical Analyzer Using Finite AutomationNo ratings yet6.implementing Lexical Analyzer Using Finite Automation15 pages
- Specification of Tokens Using Regular ExpressionsNo ratings yetSpecification of Tokens Using Regular Expressions8 pages
- IBP Certification Request Form TINSAY, JEORGIANo ratings yetIBP Certification Request Form TINSAY, JEORGIA1 page
- Reference Writing Styles: Mrs. Monika Sharma Lecturer, DMCH, CON, Ludhiana. PunjabNo ratings yetReference Writing Styles: Mrs. Monika Sharma Lecturer, DMCH, CON, Ludhiana. Punjab82 pages
- Irctcs E-Ticketing Service Electronic Reservation Slip (Personal User)No ratings yetIrctcs E-Ticketing Service Electronic Reservation Slip (Personal User)2 pages
- MAPEH 9 Second Quarter Reviewer PDF Classical Period (Music) Substance AbuseNo ratings yetMAPEH 9 Second Quarter Reviewer PDF Classical Period (Music) Substance Abuse1 page
