By Angelina Quansah
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
By Angelina Quansah
Definition Brief History XHTML CSS
EXtensible HyperText Markup Language A reformation of HTML in XML instead of SGML XML was designed to structure data
HTML was designed to display data.
Cascading Style Sheet A simple mechanism of adding style to a web
document
Separates presentation from content of documents
HTML
Tim Berners-Lee invented the Web in 1989 and HTML in 1992 at CERN.
(The European Laboratory for Particle Physics in Geneva, Switzerland)
- lots of people, organizations and companies joined in its
development. Dave Raggett from Hewlett-Packard's Labs in Bristol, England got
involved
- It grew from HTML 1.0 to HTML 2.0, HTML 3.0 . . .
- problems arose because lots of browsers added their own syntax and the language became ill-defined.
- w3 consortium was formed in 1994 to standardize the language.
- HTML 3.2 was introduced then HTML 4.0
HTML - is based on SGML by ISO. (Standard Generalized Mark Up Language by International Organization
for Standardization)
Examples of SGML elements in HTML are as
follows: <P> - paragraphs <H1> to <H6> - headings <OL> - ordered list <UL> - unordered list <LI> - list
HTML - is embedded into text to add formatting and link information.
HTML elements begins with an open tag and
ends with a closing tag. Examples: <h1> This is a heading </h1>
<p> This is a sentence </p>
<html> This is an html document</html>
HTML documents are divided into two sections:
- the header contains the introductory information like titles
<head> This is the heading </head>
- the body contains the main information <body> This is the main information</body>
Titles add to the search ability of the page and identifies the page when users add to their favorites
The are well-formed cleaner versions of HTML enforcing the following:
-All tags are paired - All elements and attributes must be in lower case only - All attributes are quoted - All attributes are presented as name = “value” pairs - XHTML elements must be properly nested
The strengths of HTML and XML were combined to bring sanity to the mark up language
Tags Meaning
<h1> …. </h1> to <h6>….</h6>
Defines header 1 to header 6
<b> ….</b> Defines bold text
<i> ….</i> Defines italic text
<u> ….</u> Defines underlined text
<em> ….</em> Defines emphasized text
<sub> ….</sub> Defines subscripted text
<sup> ….</sup> Defines superscripted text
<blockquote > ….</blockquote> Defines a long quotation
<small>….</small> Defines small text
<pre> …. </pre> Defines preformatted text
<strike> ….</strike> Defines strikethrough text
<strong> ….</strong> Defines strong text
<font> ….</font> Defines text font, size, and color
<tt>….</tt> Defines teletype text
Tags Meaning
<dd> …. </dd> Defines a definition description
<dl> ….</dl> Defines a definition list
<dt> ….</dt> Defines a definition term
<ul> ….</ul> Defines an unordered list
<ol> ….</ol> Defines an ordered list
<li> ….</li> Defines a list item
<table> ….</table> Defines a table
<tbody > ….</tbody> Defines a table body
<tfoot>….</tfoot> Defines a table footer
<thead> …. </thead> Defines a table header
<td> ….</td> Defines a table cell
<th> ….</th> Defines a table header
<tr> ….</tr> Defines a table row
XHTML elements with no content are empty tags elements.
Examples: <br /> - for break in lines
<hr /> - for horizontal rule
XHTML documents have one root <html>……..</html>
root
XHTML elements may have attributes - attributes give additional information about the element - attributes are specified as name = “value” pairs
Examples: <h1 align="center">This is a heading </h1>
<a href="http://www.utpa.edu">UTPA</a>
- The element <a> (anchor) and href attribute is Tim’s own invention for linking web pages
A link to the specified URL
Initiates e-mail message
The <img> element with attribute src is for adding images to web page
Like the <hr /> is has no closing tag.
<img src = “textbook.gif” />
An alt attribute must be quoted with the img element
- This indicates an alternative text to display if image cannot be rendered.
<img src = “textbook.gif” alt = “E-commerce Textbook” />
The width and height may be quoted in pixels - The browser uses the images actual size if note quoted.
<img src = “textbook.gif” width = “92 height = “120”alt = “E-commerce Textbook” />
Table are composed of data cells and organized into rows and split into three sections
- head <thead></thead> - table titles - column headers
- body <tbody></tbody> - primary table data
- foot <tfoot></tfoot> - calculation results - foot notes
Table are composed of data cells and organized into rows and split into three sections
- data cells are defined within <td></td>
- table rows are defined within <tr></tr>
- header cells are defined within <th></th>
Attribute colspan and rowspan can be used to merge data cells
- value of the attribute specifies the rows or column to be merged
All are nested in the table element
comments
Merge columns
Merge rows
Definition list tags are nested within each other
<dt></dt> definition term and <dd></dd> definition description are nested within <dl></dl>
This list tags are nested within either the ordered list tags or unordered list tags.
<ol><li>ordered list</li></ol> <ul> <li>unordered list</li></ul>
WYSIWYG editor - what you see is what you get
Only the document’s content and structure appears in the XHTML document
- formatting are mostly specified with CSS
Comments begin with <!--- and end with --> - the browser ignores the text within
XHTML documents with syntax errors are not guaranteed to display properly.
XHTML documents can be validated with W3C's validator.
W3C provides a validation service for checking to check correct syntax
- files can be uploaded for validation using: validator.w3.org/file-upload.html
- files can be validated by specifying the url to the files location using: validator.w3.org
Forms unable users to enter information and send to server
Form is surrounded by the <form> tag which is specified as:
<form action = “url” method = “method” </form> - method is specified as either “get” or “post” get - url produced after submission includes information entered
post – does not return information entered
Input fields within the form are specified with input tags with different attributes
- text input - inserts a text box that allows user to enter data
- label element - provides information about the input element’s purpose
- size attribute - specifies the number of characters visible in the input element
- optional attribute - limits the number of characters input into a text box
- submit input - submits data entered to the web server for processing
- reset input - allows user to reset all form elements to their default values
- password - user input displayed at asterisks or bullets for security
- checkbox attribute - allows user to make group or single selection
- hidden - submits data entered to the web server for processing
- radio - allows user to select only one option at a time
- textarea element - inserts a multiline text box called text area into form
- number of rows is specified with row attribute
- number of columns with cols attribute
- select input - provides a drop down list of items
- the name element identifies the drop down list
- the option element adds items to the drop down list
checkboxradio
method = post
method = get
Meta Element has - name attribute identifies the type of meta element - content attribute - of a keyword of the meta element provide search engines with list
of words that describe the page
- of a description meta element provides a three to four line of a
site in a sentence form
Unlike the HTML, the XHTML document has three main parts
- The doctype declaration - The head - The body
doctype
head
body
There are three document type definitions (DTD)
- The strict - The transitional - The frameset
The strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The strict DOCTYPE is used when the document is written in clean mark up language free of any presentational errors normally made in HTML
The transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The transitional DOCTYPE is used when document still has html presentational features.
The frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The frameset DOCTYPE is used if you want to use HTML Frames to split the web page into two or more frames.
Defines how to display XHTML documents and are saved in style sheets with extension css
mystyles.css
Style sheet allow style information to be specified in many ways
Attributes are inherited
CSS specifications are case sensitive and appear in the same format as
name: value; -> color: blue;
Style block elements have style attributes
defined in curly braces b {color: blue}
Multiple properties are separated with a semicolon
b {color: blue; font-family: arial}
CSS rule consist of two parts: - the selector is the element that receives the style
h1{color: blue}
- the declaration which has two parts
- the property “color” and value “blue”
Styles are mostly declared in the following tags: <div></div>
<span></span>
div is used as a block container like a paragraph
span is used within a block
Types of CSS - Inline CSS - Embedded Style Sheets - External Style Sheets
This allows the specification of a style in a single element
<b style = “color: blue”></b>
CSS styles of elements are specified in a style block in the header section of the document
All occurrence of the element inherit the style
style sheet
document
results
Most styles are inherited from parent elements
Styles defined for children overwrite parent specifications
Classes can be specified as subtags
Classes can be used several times in the same document
Classes allow authors to apply rule to a particular element within the document
The class declaration in the style block is preceded with a period
.camera { font-size: 120%;color: #ff6666;} <span class =“camera">Sony</span>
Relative length measurements: - px (size depends on screen resolution)
- em (usually the size of a font’s uppercase) - ex (usually the size of a font’s lowercase) - percentage (of font’s default size)
Absolute length measurements: - inches
- centimeters - millimeters - points
Its advisable to use relative length measurement for text to ensure readability on all user agents
Separate documents containing only CSS rules
Separate web pages in separate website can all use the same style
Several website can be modifies with the edit of a single style sheet
The link element is used to reference a separate style sheet
<link type = “text/css” href =“mystyles.css” />
where mystyles.css is a separate style sheet store in the same directory on the same server.
A url can also be used to reference style sheets <link rel = “text/css”
href =“http://www.cs.panam.edu/library/mystyles.css” />
CSS has control over lists ul { list-style-type: disc; } ol { list-style-type: lower-roman; }
CSS values for unordered lists are - disc - circle - square
Can reference a bullet from a graphic file form a server.
ul { list-style-image: url(diamond.jpg) line-height: 1.5 }
There are many possibilities and values for the ordered lists
decimal - 1,2,3…lower-roman - i, ii, iii…upper-roman - I, II, III…
Text Formatting
Other properties
- Bold text - specified as font-weight - normal - lighter - bold - bolder
It can also be specified in increments of 100, from 100 to 900
<div style = “font-weight:bold”>
- italics - specified as font-style - normal - italics - oblique
<div style = “font-style:italics”>
typeface - specified as font-family - serif - san serif - cursive - fantasy
<div style = “font-family:arial”>
size - specified as font-size - xx small, xx large - x small, x large - small, medium, large
text color - specified as color - specified either in name or hexadecimal values
- its two hexadecimal digit representing red, green and
blue respectively where 00 is the least and ff is the most #RRGGBB as 009900
Text alignment - specified as text-align - left - right - center - justify
<div style = “font-family:arial”>
Text decoration - specified as text-decoration - underline - overline - line-through
h1{text-decoration overline}
text transformation -specified as text-transform - capitalize - uppercase - lowercase - none h1{text-transform: capitalize}
Each element has the is surrounded by - margin - is the distance between the elements edge and any outside text - margin-top, margin-right, margin-left and margin-bottom
- padding - is the distance between an elements and the edge of the element. - padding-top, padding-right, padding-left and padding-bottom
border - border-width
May be set to any of the CSS lengths or to the predefined value of thin, medium or thick
- border-color
sets the color used for the border
- border-style
Options are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset
Positioning - absolute position have greater control on where on the page an element resides - absolute positioning place the element according to specifications on the top, left, right or bottom of its parent element
Positioning - relative positioning places an element relative to its normal position. - overflow property is used when content of element exceeds specified area. - associated attributes are for overflow are visible, hidden, scroll, inherit or auto
Backgrounds - background-image indicates the url of the image background-image: url(textbook.jpg)
- background-position places image on the page with top, bottom, center, left and right as desired. background-position: bottom right
Backgrounds - background-repeat control titling of the background image. background-repeat: no-repeat
- setting background repeat as repeat tiles the image vertically or horizontally. - repeat-x for horizontal - repeat-y for vertical
Backgrounds - background-attachment fixes the image in the position specified and scrolling the browser cannot affect it
background-attachment: fixed
The image is fixed so scrolling does not move it
Float property - an element can be floated to the right or left using the float property.
Media types - a programmer can specify different style rules for
different media types in the same style sheet.
Indicates that font should be 14px on screen
Indicates that font should be 10px when printed
Indicates that they should both be bold
Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tv Used for television-type devices
Pages load faster- Less code means faster download times.
Easy maintenance - To change the style of an element, you only have to
make an edit in one place.
www.w3schools.com www.intuitive.com www.w3.org/People/Raggett/book4/ch02.html
Internet & World Wide Web, How to Program - Deitel, Deitel, & Goldberg
Creating Cool Web Sties with HTML,XHTML and CSS - Dave Taylor
Related Documents
