Xhtml and css
Sponsored Links
This presentation is the property of its rightful owner.
1 / 25

XHTML and CSS PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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

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

  • 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

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

General Structure



element {

attribute: value;

attribute: value;



h1 {

font-size: 10pt;

color: red;


XHTML & CSS syntax

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?

  • It is the recommended standard (W3C) since 2000

    • HTML 4.01 (1999)

    • XHTML 1.0 (2000)

  • Allows your web page to be parsed by a general XML parser.

    • Lots of applications support XML parsing.

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.


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

  • 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

  • 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

<!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)

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







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

<tt> Teletype text </tt>

<i> Italic text </i>

<b> Bold text </b>

<big> Big text </big>

<small> Small text </small>

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







<form action=“program.php”>

<input type=“text”>

<input type=“submit”>



  • Deprecated!


  • Removed from the standard

  • Most browsers will still render deprecated tags

  • However, there are no guarantees

  • Do not use deprecated tags unless you have no choice

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.


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


  • Best way to learn is by example.

  • Let’s take a peak at the lab.

  • Login