CNIT 133

1
CNIT 133

• Introduction Internet
• XHTML
• CSS

2
Objectives

• Introduction Internet
• XHTML
• CSS
• Publish web pages

3
Introduction Internet

• How does Internet work?
• Client/Server
• Web browser
• Mozilla Firefox for Windows Linux
• Microsoft - Internet Explorer for Windows
• Netscape for Windows
• Opera for mobile phones
• Safari for Apple
• Web server
• Microsoft IIS (Internet Information Services)
• Apache

4
XHTML

• A Web page is simply a text file written in a
  language called Hypertext Markup Language (HTML).
• Markup Language is a language that describes a
  documents structure and content.
• Hypertext Markup Language (HTML) a
  nonproprietary markup language that a Web browser
  interprets and uses to display the content as a
  Web page.
• A group of Web developers, programmers, and
  authors formed the World Wide Web Consortium or
  the W3C. (http//www.w3c.org)
• The World Wide Web Consortium (W3C) developed
  specifications, or sets of standards, that
  identify how a browser interprets the HTML code.
• http//www.w3.org/tr/html401
• http//www.w3.org/tr/html401/interact/forms.html

5
XHTML

• Extensible Markup Language (XML) a popular
  markup language that began in 1998 to describe
  the format and structure of data.
• Extensible Hypertext Markup Language (XHTML) or
  XHTML 1.1
• the most recent markup language specification
  from the W3C
• combines the formatting features of HTML with a
  stricter syntax that works to combine HTML and
  XML so that Web content is more readily and
  easily delivered to all devices that are
  connected to the Internet
• is compatible with the HTML 4.01 specification

6
XHTML
7
XHTML
8
XHTML

• Elements distinct object in the document, like a
  paragraph, a heading, or the pages title. Even
  the whole document can be considered an element.
• Tags codes that indicate different elements on a
  Web page such as headings, paragraphs, and
  bulleted lists.
• Tags are either two-sided and require a a tag at
  the beginning and the end of the element, or they
  are one-sided.
• A two-sided tag ltelementgtcontentlt/elementgt
• ltpgtA new paragraph herelt/pgt
• A one-sided tag (also called empty elements since
  they contain no content) ltelement /gt
• ltbr /gt

9
XHTML

• A third type of tag is the comment tag. They are
  not displayed or used by the Web browser.
• lt!-- This is a comment line --gt
• lt! this is a multiple
• comment lines --gt
• White space the blank spaces, tabs, and line
  breaks.
• When a browser encounters consecutive occurrences
  of white space, it collapses them into a single
  occurrence.
• Some tags include attributes that specify
  additional information about the content to be
  formatted by the tag.
• ltelement attribute1value1 attribute2value2gt
  contentlt/elementgt
• ltp idnew_para aligncentergtThis is a new
  paragraphlt/pgt
• NOTE element refers to an object in a Web
  page, and tag refers to the HTML code that
  creates the object. We can create a p
  (paragraph) element in a Web page by using a ltpgt
  tag.

10
XHTML

• lt?xml version"1.0" encoding"UTF-8"
  standalone"no" ?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lt!-- Sample Web Page
• Author Hans Yip
• Date 7/1/2007
• --gt
• lttitlegtSample Web pagelt/titlegt
• lt/headgt
• ltbodygt
• Web page content
• lt/bodygt
• lt/htmlgt

11
XHTML

• In a Web page, most content is marked as either
  a block-level element or an inline element.
• A block-level element contains content displayed
  in a separate section within the page, setting it
  off from other blocks. For example, Paragraph ltpgt
  lt/pgt, Heading lth1..6gt lt/h1..6gt, Ordered List ltolgt
  lt/olgt, Unordered List ltulgt lt/ulgt
• An inline element is part of the same block as
  its surrounding contentfor example individual
  words or phrases within a paragraph. Such as,
  Bold text ltbgt lt/bgt, Citation text ltcitegt lt/citegt,
  Deleted text ltdelgt lt/delgt, Italic text ltigt lt/igt,
  Subscript text ltsubgt lt/subgt, Superscript text
  ltsupgt lt/supgt

12
XHTML
13
XHTML

• lth1gt lt/h1gt..lth6gt lth6gt
• ltpgt lt/pgt
• lta href target_blankgt lt/agt
• ltimg srcfile.gif alttext width100
  hight100 /gt
• ltulgt ltligt lt/ligt ltligt lt/ligt lt/ulgt
• ltolgt ltligt lt/ligt..ltligt lt/ligt lt/olgt
• lttable border2 width100gt
• lttrgtltthgt lt/thgtlt/trgt
• lttrgtlttdgt lt/tdgtlt/trgt
• lt/tablegt
• ltform action method gt
• ltinput typetext/hidden/password/checkbox/radio/b
  utton/reset/submit value /gt
• lttextarea rows colsgtinitial datalt/textareagt
• ltselectgtltoption valuegtOpt namelt/optiongt.ltoptio
  ngt lt/optiongt lt/selectgt
• lt/formgt

14
CSS (Cascading Style Sheets)

• Style sheets are files or forms that describe the
  layout and appearance of a document.
• Cascading Style Sheets, or CSS, is a style sheet
  language used on the Web.
• CSS Statement
• Selector Property value
• Example p, address color red
• CSS Comments
• / CSS comments /
• CSS specifications are maintained by the World
  Wide Web Consortium (W3C)
• Three versions of CSS exist CSS1, CSS2, and CSS3

15
CSS

• CSS1 introduced styles for the following document
  features
• Fonts
• Text
• Color
• Backgrounds
• Block-level Elements

16
CSS

• CSS2 introduced styles for the following document
  features
• Positioning
• Visual Formatting
• Media Types
• Interfaces

17
CSS

• CSS3 (which is still in development) will
  introduce styles for the following document
  features
• User Interfaces
• Accessibility
• Columnar layout
• International Features
• Mobile Devices
• Scalable Vector Graphics

18
CSS

• Three ways to apply a style to an HTML or XHTML
  document
• Inline Styles
• Embedded Styles
• External Styles

19
CSS

• Inline Styles
• Inline styles are easy to use and interpret
  because they are applied directly to the elements
  they affect.
• ltelement stylestyle1 value1 style2
• value2 style3 value3gt
• ltp stylebackground blue
• color white gt Paragraph text
  lt/pgt

20
CSS

• Embed Styles
• You can embed style definitions in a document
  head using the following form
• ltstylegt
• style declarations
• lt/stylegt
• Where style declarations are the declarations of
  the
• different styles to be applied to the document.
• ltstyle typetext/cssgt
• p background blue
• color white
• lt/stylegt

21
CSS

• Because an embedded style sheet only applies to
  the content of a single htm file, you need to
  place a style declaration in an external style
  sheet to apply to the headings in the rest of the
  Web site.
• An external style sheet is a text file that
  contains style declarations.
• It can be linked to any page in the site,
  allowing the same style declaration to be applied
  to the entire site

22
CSS

• Use the link element to link a Web page to an
  external style sheet.
• ltlink relstylesheet type"text/css"
• href../style/css_external.css /gt
• You can import the content of one style sheet
  into another.
• ltstyle type"text/css"gt
• _at_import url(../style/css_external.css)
• lt/stylegt

23
CSS

• Use an id to distinguish something, like a
  paragraph, from the others in a document.
• CSS style definition id property value
  
• head text-align right
• For example, to identify a paragraph as head,
  use the code
• ltp idheadgt lt/pgt

24
CSS

• HTML and XHTML require each id be unique
  therefore an id value can only be used once in a
  document.
• Style definition .class style
• title color blue font-style italic
• You can mark a group of elements with a common
  identifier using the class attribute.
• ltelement classclassgt lt/elementgt
• lth1 classtitlegtHeader 1 titlelt/h1gt
• lth2 classtitlegtHeader 2 titlelt/h2gt

25
CSS

• Pseudo-class (Rollover effect)
• Anchor (link) has 4 states
• link
• visited
• hover
• active
• Pseudo-class definition a state_name
  style
• a link color red
• a visited color green
• a hover color blue
• a active color yellow
• Must be defined in correct orders

26
CSS

• CSS1 Font properties
• font-family arial, verdana, times new roman
• font-style normal or italic
• font-variant normal or small-caps
• font-weight normal or bold or bolder or 100
  900 with 400 as normal
• font-size small or medium or large or 20 or
  30pt or 0.5 in or 3.5 mm or 2pc or 0.8em

27
CSS

• CSS1 Text properties
• letter-spacing normal or 0.5in or 3.5 mm
• text-decoration none or underline or overline or
  line through
• vertical-align sub or super or top or bottom or
  20 or -30
• text-transform capitalize or uppercase or
  lowercase or none
• text-align left or right or center or justify
• text-ident 0.5in or 3.5 mm or 5
• line-height normal or 0.5in or 3.5mm or 12

28
CSS

• CSS2 Position properties
• position absolute or relative
• left 0.5in or 3.5mm or 20 or auto
• top 0.5in or 3.5mm or 20 or auto
• width 0.5in or 3.5mm or 20 or auto
• height 0.5in or 3.5mm or auto
• visibility visible or hidden
• z-index auto or 1 or 2 or 3 (the highest number
  closer to the screen)