xhtml and css n.
Skip this Video
Loading SlideShow in 5 Seconds..
XHTML and CSS PowerPoint Presentation
Download Presentation

Loading in 2 Seconds...

play fullscreen
1 / 31

XHTML and CSS - PowerPoint PPT Presentation

  • Uploaded on

XHTML and CSS. Overview. Hypertext Markup Language. A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe actions or logic You can only describe information structure and context Markup tags also called elements

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
hypertext markup language
Hypertext Markup Language
  • A set of markup tags and associated syntax rules
  • Unlike a programming language, you cannot describe actions or logic
  • You can only describe information structure and context
  • Markup tags also called elements
  • <element>Data goes here</element>
cascading style sheets
Cascading Style Sheets
  • Used to define attributes of elements in HTML and XML
    • Common attributes: height, width, font-size, alignment, color, etc.
  • Documents can have multiple style sheets with overlapping and sometimes conflicting definitions
  • Cascading refers to the set of rules for resolving conflicts.
  • Priority is given to the most specific definitions and then the definitions or rules cascade down to the less specific rules.
  • Priority is also given to definitions that are “closer” to the content, i.e., embedded and inline styles can be used to override global or attached styles.
  • HTML was supposed to be a structural or “semantic” language,
    • But, the Browser Wars lead to the introduction of “style” or formatting tags.
    • “style” tags are bad!
    • They are being removed from the HTML standards (called deprecation).
  • Cascading Style Sheets
  • Used to specify the style/appearance of structural elements (HTML tags).
  • CSS was part of the original design of the web,
  • but its use was almost entirely abandoned between 1997 and 2003.
why are style tags bad
Why are “style” tags bad?
  • The best answer is very complicated
  • Short Answer:
    • Leads to bloated HTML code that is hard to maintain.
semantic vs style
Semantic = Has Meaning

Style =Specifies Appearance

Semantic vs Style
semantic vs style1
Semantic  Meaning

<img src=“tiger.jpg”>

<span class=“caption”>

This is a picture of a tiger


A caption is meaningful.

Images typically have a caption that describes the image.

Style   Appearance

<img src=“tiger.jpg”>

<font type=“Arial” style=“italic” size=“10pt”>

This is a picture of a tiger


Here, we specify how to display the caption but not the fact that it’s actually a caption.

Semantic vs Style
semantics css is better
Semantics + CSS is better!

<span class=“caption”>Figure 1</span>

<span class=“caption”>Figure 2</span>

<span class=“caption”>Figure 3</span>

<span class=“caption”>Figure 99</span>

.caption {

font-size: 10pt;

font-style: italic;


this is why the font tag sucks it s a style tag
This is why the font tag sucks!(it’s a style tag)

<font type=“Arial” style=“italic” size=“10pt”> Figure 1 </font>

<font type=“Arial” style=“italic” size=“10pt”> Figure 2 </font>

<font type=“Arial” style=“italic” size=“10pt”> Figure 3 </font>

<font type=“Arial” style=“italic” size=“10pt”> Figure 999 </font>

<font type=“Arial” style=“bold” size=“10pt”> Sub-title </font>

Imaging if you wanted to change the font size to 12pt for all image captions?

Good luck!

xhtml css syntax
General Structure



element {

property: value;

property: value;



h1 {

font-size: 10pt;

color: red;


XHTML & CSS syntax
extensible html xhtml
Extensible HTML  XHTML
  • XHTML is a reformulation of HTML according to XML standards.
  • Only four differences
    • Inclusion of an XML header
    • Single tags end with />, instead of just >
    • Attribute values must have quotes: “value”
    • Tags must be in lowercase
why use xhtml
Why use XHTML?
  • It is the recommended standard (W3C) since 1999
    • HTML 4.01 (1998)
    • XHTML 1.0 (1999)
  • Allows your web page to be parsed by a general XML parser.
    • Lots of applications support XML parsing.
web s 4 commandments
Web’s 4 Commandments
  • Make sure your code validates as XHTML
  • Use Semantic Markup
    • Use tags that describe the content, not the content’s appearance
  • Structure Documents Logically
    • The HTML code should be in a logical order; Style sheets can reposition items for presentation
  • Use CSS, not <font> or <table> to layout and decorate your pages.
xhtml rules

<elementname> Content content</elementname>

  • In XHTML all element names must be lower case.
    • In HTML tag case didn’t matter.
  • In XHTML all element must have a closing tag
    • Most web browsers are forgiving about closing tags, which makes it possible to forget about them
    • Example <p>Here is paragraph with no ending tag<p>Here is another paragraph</p>
html single tags
HTML single tags
  • HTML has a few tags that are standalone, i.e., no closing tag.
  • Image: <imgsrc=“imagename.jpg”>
  • Line break: <br>
  • Link: <link type="text/css”>
    • Used to link/insert a Cascading Style Sheet
xhtml single tags
XHTML single tags
  • To meet XML guidelines HTML single tags must to closed with a />
  • Image: <imgsrc=“imagename.jpg” />
  • Line break: <br />
  • Link: <link type="text/css" />
  • Note the space before the />

<element attribute=“value”> content </element>

XHTML requires that all attribute values be enclosed in quotes.

HTML: <imgsrc=tiger.jpg>

XHTML: <imgsrc=“tiger.jpg” />

Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)

browsers ignore whitespace
Browsers ignore whitespace
  • An XHTML document is an ASCII Text document.
  • XHTML renderers ignores, tabs, spaces and line breaks
    • Allows a web designer to format XHTML code without having an effect on the web page’s rendered appearance.
  • To render tabs, spaces, and line breaks requires using tags and style sheets.
basic xhtml document
Basic XHTML document

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<title> Title Displays in Browser’s Top Bar </title>

<link type="text/css" href="part5.css" rel="stylesheet"/>



Page content here



text structure blocks
Text Structure (blocks)

<h1>Most Important Header</h1>

<p>A paragraph in the literal sense.</p>


<h3>Smaller Sub-heading</h3>

<h6>Smallest Sub-heading</h6>

Ordered Lists (ol)

Unordered Lists (ul)


<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>



<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>


terms and definitions




<dd>black hot drink</dd>


<dd>white cold drink</dd>


dl – definition list

dt – definition term

dd – definition description

Used heavily in early HTML documents which were most scientific papers with lost of definitions and terms

Terms and Definitions
text formatting style
Text Formatting (style)

<tt> Teletype text </tt>

<i> Italic text </i>

<b> Bold text </b>

<big> Big text </big>

<small> Small text </small>

text identity semantic
Text identity (semantic)

<em> Emphasized text </em>

<strong> Strong text </strong>

<dfn> Definition term </dfn>

<code> Computer code text </code>

<samp> Sample computer code </samp>

<kbd> Keyboard text </kbd>

<var> Variable </var>

<cite> Citation </cite>

  • Called the anchor tag

<a href=“http://www.espn.com”>ESPN</a>

  • href stands for hypertext reference
  • What is the element name?
  • What is the attribute?
  • What is the attribute’s value
  • What is the content?
elements we ll learn about later
Elements we’ll learn about later







<form action=“program.php”>

<input type=“text”>

<input type=“submit”>



  • Deprecated!
  • Removed from the standard
  • Most browsers will still render deprecated tags
    • However, browsers do not have to according to the standards
  • Do not use deprecated tags unless you have no choice
divisions and spans
Divisions and Spans
  • Divisions <div> used to break your webpage into logical blocks or boxes
  • Spans<span> used to create custom in-line tags, i.e., within the flow of a paragraph of text.


  • This is paragraph with a table reference. <span class=“tableref”>Table 2.4</span> is a lovely table.
css attributes

BOXES (usually <div> elements)

  • Font family,
  • size,
  • alignment,
  • weight,
  • sytle,
  • variant,
  • line-height,
  • indent, spacing,
  • direction
  • Height,
  • width,
  • margins,
  • padding,
  • borders,
  • border color,
  • border styles,
  • background color,
  • background image.
CSS Attributes