Xhtml and css
Download
1 / 25

XHTML and CSS - PowerPoint PPT Presentation


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

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

PowerPoint Slideshow about 'XHTML and CSS' - erol


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

XHTML and CSS

Overview


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.


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


Xhtml css syntax

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


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

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


Lists

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


Terms and definitions

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


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


Css attributes

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


Xhtml and css
CSS

  • Best way to learn is by example.

  • Let’s take a peak at the lab.