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

XHTML and CSS PowerPoint PPT Presentation


  • 45 Views
  • 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

XHTML and CSS

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


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

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


Cascading

  • 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

Example

<element>Content</element>

element {

attribute: value;

attribute: value;

}

<h1>ESPN</h1>

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.


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


Attributes

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

<head>

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

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

</head>

<body>

Page content here

</body>

</html>


Text Structure (blocks)

<h1>Most Important Header</h1>

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

<h2>Sub-heading</h2>

<h3>Smaller Sub-heading</h3>

<h6>Smallest Sub-heading</h6>


Ordered Lists (ol)

Unordered Lists (ul)

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ol>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

Lists


Example

Meaning

<dl>

<dt>Coffee</dt>

<dd>black hot drink</dd>

<dt>Milk</dt>

<dd>white cold drink</dd>

</dl>

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>


Hyperlinks

  • 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

Tables

<table>

<tr><td></td></tr>

<tr><td></td></tr>

</table>

Forms

<form action=“program.php”>

<input type=“text”>

<input type=“submit”>

</form>

Frames

  • Deprecated!


Deprecation

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

    Example:

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


TEXT

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


CSS

  • Best way to learn is by example.

  • Let’s take a peak at the lab.


  • Login