1. By Angelina Quansah

2.  Definition  Brief History  XHTML  CSS

3.  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.

4.  Cascading Style Sheet  A simple mechanism of adding style to a web document  Separates presentation from content of documents

5.  HTML

6.  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...

7. - 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

8.  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: - paragraphs to - headings - ordered list - unordered list - list

9.  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: This is a heading This is a sentence This is an html document

10.  HTML documents are divided into two sections: - the header contains the introductory information like titles This is the heading - the body contains the main information This is the main information Titles add to the search ability of the page and identifies the page when users add to their favorites

12.  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

13. TagsMeaning …. to …. Defines header 1 to header 6 …. Defines bold text …. Defines italic text …. Defines underlined text …. Defines emphasized text …. Defines subscripted text …. Defines superscripted text …. Defines a long quotation …. Defines small text …. Defines preformatted text …. Defines strikethrough text …. Defines strong text …. Defines text font, size, and color …. Defines teletype text

14. TagsMeaning …. Defines a definition description …. Defines a definition list …. Defines a definition term …. Defines an unordered list …. Defines an ordered list …. Defines a list item …. Defines a table …. Defines a table body …. Defines a table footer …. Defines a table header …. Defines a table cell …. Defines a table header …. Defines a table row

15.  XHTML elements with no content are empty tags elements. Examples: - for break in lines - for horizontal rule  XHTML documents have one root ……..

16. root

17.  XHTML elements may have attributes - attributes give additional information about the element - attributes are specified as name = “value” pairs Examples: This is a heading UTPA - The element (anchor) and href attribute is Tim’s own invention for linking web pages

19. A link to the specified URL Initiates e-mail message

20.  The element with attribute src is for adding images to web page  Like the is has no closing tag.

21.  An alt attribute must be quoted with the img element - This indicates an alternative text to display if image cannot be rendered.

22.  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” />

24.  Table are composed of data cells and organized into rows and split into three sections - head - table titles - column headers - body - primary table data - foot - calculation results - foot notes

25.  Table are composed of data cells and organized into rows and split into three sections - data cells are defined within - table rows are defined within - header cells are defined within  Attribute colspan and rowspan can be used to merge data cells - value of the attribute specifies the rows or column to be merged

26. All are nested in the table element comments

27. Merge columns Merge rows

28.  Definition list tags are nested within each other definition term and definition description are nested within  This list tags are nested within either the ordered list tags or unordered list tags. ordered list unordered list

31.  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

32.  Comments begin 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.

33.  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

34.  Forms unable users to enter information and send to server  Form is surrounded by the tag which is specified as: - method is specified as either “get” or “post” get - url produced after submission includes information entered post – does not return information entered

35.  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

36. - 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

37. - 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

38. - 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

39. checkbox radio

42.  method = post

43. method = get

44.  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

46.  Unlike the HTML, the XHTML document has three main parts - The doctype declaration - The head - The body

47. doctype head body

48.  There are three document type definitions (DTD) - The strict - The transitional - The frameset

49.  The strict The strict DOCTYPE is used when the document is written in clean mark up language free of any presentational errors normally made in HTML

50.  The transitional The transitional DOCTYPE is used when document still has html presentational features.

51.  The frameset The frameset DOCTYPE is used if you want to use HTML Frames to split the web page into two or more frames.

52.  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

53.  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}

54.  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”

55.  Styles are mostly declared in the following tags:  div is used as a block container like a paragraph  span is used within a block

56.  Types of CSS - Inline CSS - Embedded Style Sheets - External Style Sheets

57.  This allows the specification of a style in a single element

59.  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

60. style sheet document results

61.  Most styles are inherited from parent elements  Styles defined for children overwrite parent specifications

62.  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

63.  The class declaration in the style block is preceded with a period.camera { font-size: 120%;color: #ff6666;} Sony

65.  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)

66.  Absolute length measurements: - inches - centimeters - millimeters - points

67.  Its advisable to use relative length measurement for text to ensure readability on all user agents

68.  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

69.  The link element is used to reference a separate style sheet where mystyles.css is a separate style sheet store in the same directory on the same server.

70.  A url can also be used to reference style sheets <link rel = “text/css” href =“http://www.cs.panam.edu/library/mystyles.css” />

72.  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

73.  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…

74.  Text Formatting  Other properties

75.  - Bold text - specified as font-weight - normal - lighter - bold - bolder It can also be specified in increments of 100, from 100 to 900

76.  - italics - specified as font-style - normal - italics - oblique

77.  typeface - specified as font-family - serif - san serif - cursive - fantasy

78.  size - specified as font-size - xx small, xx large - x small, x large - small, medium, large

79.  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

80.  Text alignment - specified as text-align - left - right - center - justify

81.  Text decoration - specified as text-decoration - underline - overline - line-through h1{text-decoration overline}

82.  text transformation -specified as text-transform - capitalize - uppercase - lowercase - none h1{text-transform: capitalize}

83.  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

84.  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

86.  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

87.  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

88.  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

89.  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

90.  Backgrounds - background-attachment fixes the image in the position specified and scrolling the browser cannot affect it background-attachment: fixed

91. The image is fixed so scrolling does not move it

92.  Float property - an element can be floated to the right or left using the float property.

94.  Media types - a programmer can specify different style rules for different media types in the same style sheet.

95. Indicates that font should be 14px on screen Indicates that font should be 10px when printed Indicates that they should both be bold

96. Media TypeDescription allUsed for all media type devices auralUsed for speech and sound synthesizers brailleUsed for braille tactile feedback devices embossedUsed for paged braille printers handheldUsed for small or handheld devices printUsed for printers projectionUsed for projected presentations, like slides screenUsed for computer screens tvUsed for television-type devices

97.  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.

98.  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