SlideShare a Scribd company logo

xhtml-documentation

1 of 6
Download to read offline
XHTML: Extensible Hypertext Markup Language -- Page 1




XHTML:                                                What is Markup?
                                                      Markup is the process of providing context for
Extensible                                            pieces of information. Markup provides semantic
                                                      weight to elements within information while still
Hypertext Markup                                      keeping the association between all of the ele-
                                                      ments within information. If we think about a
Language                                              physical letter that would be sent to someone as
                                                      an example, the letter itself is one piece of infor-
Brian Talbot
Web Designer                                          mation, but there are various elements that make
Simmons College Web Services                          up a letter such as the Greeting, Address, Body,
July 2005
                                                      Signature and so forth. All of these elements are
                                                      understood to mean different things and that un-
                                                      derstanding comes from the formatting associated
This document is meant to serve primarily as a
                                                      with them.
guide to using XHTML (Extensible Hypertext
Markup Language) and CSS (Cascading Style-
sheets) to create web pages, sites and interfaces.
                                                      What is the difference between HTML,
There are three portions to this guide. The first      XTHML, and XML?
portion details what exactly XHMTL is, its purpose,   XHTML is a transitional step from previous
its history and its future.                           markup languages such as SGML (Standard Gener-
                                                      alized Markup Language) and HTML (Hypertext
The second portion walks through the various          Markup Language). XHTML is very similar to HTML
parts of a correctly written XHTML file. How to        as it shares the same expressive possibilities, but
markup content within an XHTML page and using         has a stricter syntax (more rules/practices to fol-
hypertext and media within an XHTML webpage           low). Whereas HTML was an application of SGML,
will be discussed as well.                            a very flexible markup language, XHTML is an ap-
                                                      plication of XML, a more restrictive subset of
The third portion of this guide begins to focus on
                                                      SGML. Currently web browsing technologies sup-
using Cascading Style Sheets to visually style and
                                                      port XHTML and HTML, but cannot however sup-
display the markup created in an XTHML Docu-
                                                      port XML in it’s original form. XML must be trans-
ment.
                                                      formed and delivered into a document browsing
                                                      technologies can understand, the general choice is
                                                      XHTML.

What is XTHML?
XHTML, or Extensible Hypertext Markup Language        The benefits of XHTML - A Sound
is one of the most modern building materials for      Structure
creating web pages. As a computer programming
                                                      Because XHTML is based on a stricter language
language that is supported by web browsers and a
                                                      (XML), there is a much stricter format that must be
growing number of other applications, XHTML’s
                                                       followed when marking up information and pre-
purpose it to provide formatting to content using
                                                      senting it in an XHTML file.
Markup.
                                                      A stricter format adopted from XML allows for the
Note: Visually styling a web document is not a
                                                      separation of content and the visual presentation
direct responsibility of XHTML, rather CSS (Cas-
                                                      of this content. This has many benefits as an
cading Style Sheets) are used to define the visual
                                                      XTHML page can be visually styled by multiple CSS
style of the markup used in an XHTML document.
                                                      documents actively or invisibly providing users
XHTML: Extensible Hypertext Markup Language -- Page 2



with formatting options based on their particular      closing tag is that the command in the closing tag
situations. This comes in handy in some of the
following situations:

‣ Printing Documents

‣ Projection/Presentation Situations

‣ People with disabilities/accessibility issues



This stricter formatting of XHTML also allows the
emergence of a systematic troubleshooting and
validation service. This creates a standard practice
of coding and marking information up.
                                                       is preceded by a forward slash (“ / ”).

                                                       Note: As we will see, there are some variations to

Creating XHTML                                         this rule where an XHTML tag can close itself,
                                                       these are called ‘self closing tags”. However, all
XTHML can be written in any text editing software      tags in an XHTML document must be closed.
or in specially designed applications such as Mac-
romedia Dreamweaver. Generally XHTML files are
saved as .html files. But,, dynamically produced
pages such as .php files can also use XHTML.




XHTML Markup
XHTML markup is written in the form of tags. Tags
are commands that tell the web agent how to
process the information (content, media, and me-       Document Structure
tadata) of the webpage.
                                                       An XHTML document has a pre-formatted docu-

Think of tags as wrapper on pieces of candy.           ment structure. All this means is that there are
When looking at the wrappers of candy you know         certain pieces that every XHTML page must have
                                                       in order to be properly formatted as XHTML (which
what flavors and how a candy would taste. A web
                                                       will give all of the benefits listed above).
agent, in many cases a web browser, knows how
information should be processed because of the
                                                       An XTHML Document needs to have the following
tag that it is surrounded by. This gives context to
                                                       elements within it:
the information being presented just as the wrap-
per on a piece of candy gives you understanding
                                                       A Document Type (DocType) definition
as to what type of candy it is or may be.
                                                       The first thing placed in an XHTML file, the Doc-
A tag command is written within angle brackets         Type definition tells the web agent (A web
(“<” & “>”) and most work like bookends with an        browser, mobile phone, other online devices) what
opening tag and a closing tag. What sits between        type of markup language a page is using. The
the opening and closing tags is what is effected by    agent then takes that information into considera-
that tag. The difference between and opening and       tion when rendering the page and its information
                                                       for the user. A DocType looks like the following
                                                       and is placed at the beginning of the XHTML file:
XHTML: Extensible Hypertext Markup Language -- Page 3



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0            -->
Strict//EN"                                             </style>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict          </head>
.dtd">
                                                        Body Tag
<html xmlns="http://www.w3.org/1999/xhtml">
                                                        The Body tag houses all of visible of an XHTML
Note: The code behind a DocType is a bit more           web-page. This is where the bulk of the markup
complicated and can be examined closer by some          will occur. For now a blank body tag looks like the
of the links at the end of this section of the guide.   following.

                                                        <body>
There are various DocType Definitions each with
                                                        This is where the content of a webpage would
their own function. HTML has its own document           go and it will be marked up using other XHTML
type definition as does RSS (Rich Site Summary).         tags.
                                                        </body>
The point of a DocType is provide the framework
for what type of code can and can’t be placed be-       Note: When writing XTHML, line breaks in the code
low and to prepare a user’s web agent to handle         do not affect visual display or formatting.
the markup in the best manner possible.
                                                        If all of these elements are placed together, they
Note: The <html> tag that is opened in the ex-          look something like this -
ample above must be closed after everything else
on the page. Thus everything else to follow would       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
                                                        Strict//EN"
be wrapped in an <html></html> tag as every             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict
other tag.                                              .dtd">


Head Tag                                                <html xmlns="http://www.w3.org/1999/xhtml">

The next piece of standard XHTML that is needed         <head>
is the Head Tag portion of the webpage. The Head        <title>The Web Page’s Title</title>

Tag contains information about the page such as         <meta http-equiv="Content-Type" content="text/
its title, any extra information (called metadata)      html; charset=iso-8859-1" />
                                                        <meta name="author" content="Author’s Name" />
about the page as well as references to external
                                                        <meta name="Description" content=”A Descrip-
files that provide functionality to the page. These      tion of the Webpage"/>
files include references to Cascading Style Sheets
                                                        <style type="text/css" media="screen">
(CSS) which contains the rules on how the page is       <!--
visually styled as well as JavaScript which adds        @import "css.css";
                                                        -->
additional web behaviors such as opening new
                                                        </style>
windows.                                                </head>


The Head Tag generally looks like the following,        <body>
                                                        This is where the content of a webpage would
with the paths to external CSS files changing de-        go and it will be marked up using other XHTML
pending on where they are stored.                       tags.
                                                        </body>

<head>
                                                        </html>
<title>The Web Page’s Title</title>

<meta http-equiv="Content-Type" content="text/          Note: You can make notes and comments in
html; charset=iso-8859-1" />                            XHTML by placing a “<!--” at the beginning of
<meta name="author" content="Author’s Name" />
<meta name="Description" content=”A Descrip-            your comment and a “-->” at the end of your
tion of the Webpage"/>                                  comment. A comment will not be seen by the web
                                                        agent and is used commonly to keep track of
<style type="text/css" media="screen">
<!--                                                    things within the code.
@import "css.css";
XHTML: Extensible Hypertext Markup Language -- Page 4



Common XHTML Markup                                 <ol>
                                                    <li>Eggs</li>
The following are tags that are used within the     <li>Milk</li>
                                                    <li>Bread</li>
<body> of an XHTML document.                        <li>Tomatoes</li>
                                                    <li>Figs</li>
Paragraph                                           </ol>

Denotes that the contents within the tag are a      Links
paragraph of text.
                                                    To create a hyperlink to another webpage or
<p>This is a paragraph</p>                          document you would use the anchor tag (<a>),
                                                    which is made up of 2 different parts.
Strong and Emphasis (Bold and Italics)
                                                    1.   Anchor <a> - This is the opening and clos-
To place emphasis on content there are two ways
                                                         ing tag, what makes the text clickable.
to do so, to bold content, you would place strong
tags around the content. To italicize content you
                                                    2.   HyperText Reference “href” – An attribute to
would place emphasis tags (<em>) around it.
                                                         the opening anchor tag that tells where to
<strong>This is bolded text</strong>                     link to.

<em>This is italicized text</em>                    If you wanted to have a sentence that linked to
                                                    another website, here is what it would look like
Lists
                                                    in XHTML:
Lists are used to display short amounts of in-
formation that relate to each other in one sense    <a href=”http://www.anotherwebsite.com/”>This
                                                    link will take you to another website</a>
or another, much as they do in real-life situa-
tions. There are various kinds of lists used in     Images
XHTML, The ordered and the unordered lists
                                                    Images can be placed in an XHTML webpage using
are two of the most common. The ordered is
                                                    the following two part <img> tag can be used to
listed with numbers, the unordered is bulleted.
                                                    reference images inside of XHTML.
Two create these lists you need two tags:

                                                    img – Indicates to the browser, the following is an
1.   <ul> or <ol> - Depending on which list you
                                                    image
     want. These are needed to open and close
     your list.
                                                    src – Indicates to the browser where the image is
                                                    actually stored.
2.   <li> - Within the above tag, the list item
     precedes each item you are listing.
                                                    If you had a picture of a flag called flag.gif, to
                                                    place this within your page, the tag would look
Here’s an example with the days of the week
                                                    like the following
listed in an unordered list:
                                                    <img src=”flag.gif” />
<ul>
<li>Monday</li>
<li>Tuesday</li>                                    Note: The <img> tag is one of a few “self-closing
<li>Wednesday</li>                                  tags” in XHTML which do not have an end tag. In
<li>Thursday</li>
<li>Friday</li>                                     this case there is no such thing as a </img> tag,
</ul>                                               but rather the tag is closed by a “/” at the end of
                                                    the initial tag, <img src />. Please see above in
Here’s an example of a grocery list arranged by
                                                    this guide for further information.
most important item to least important in an or-
dered list:
XHTML: Extensible Hypertext Markup Language -- Page 5



For information on more specific XHTML markup           World Wide Web Consoritum (W3C) Official XHTML
you may consult the following list of additional       documentation
resources.                                             http://www.w3.org/MarkUp/

Divisions                                              World Wide Web Consoritum (W3C) XHTML/HTML
Divisions are logical separations of content within    Validator
a page. If for instance there was both a piece of      http://validator.w3.org
content that had numerous paragraphs of infor-
mation which pertained directly to the topic of        Too Easy XHTML - Lowter’s Guide

your web-page, you may want to separate that           http://www.lowter.com/articles/178?PHPSESSID=f
from a list of links to supplemental topics that are   088f5baf6035254fde1679764ab2968
not directly related to the main content of the
page and would be placed visually on the right of
the page. This type of content separation can be
obtained by placing each group of content in a         Styling XHTML with Cas-
<div> tag. See the example below:                      cading Style Sheets
<div>                                                  All of the presentational information that is con-
<p>This is my main content</p>
<p>This is more of my main content</p>                 tained and displayed through a webpage are de-
</div>                                                 livered not by the XHTML of a page, but by the

<div>                                                  CSS (Cascading Style Sheets) that are linked in the
<p>This is a set of links to supplemental              <head> tag of an XHTML file.
information</p>

                                                       CSS handles both physical layout, placing ele-
<ul>
<li><a href=”link”>Link 1</a></li>                     ments next to each other the page and also the
<li><a href=”link”>Link 2</a></li>                     look of things, such as color, font-size and bor-
<li><a href=”link”>Link 3</a></li>
</ul>                                                  ders.
</div>
                                                       Using CSS allows for far greater accessibility ef-
                                                       forts and allows designers and creators of web-
IDs and Classes                                        page to carefully and universally tailor elements of
                                                       webpages according to their various audience’s
Once an XTHML tag has been written, you can
                                                       needs.
then assign one id and as many classes as you
want to the tag if you wish. IDs and classes are
                                                       Generally the best practice is to keep CSS as ex-
used to further distinguish content and help in the    ternal files that are referenced inside XHTML files
visual styling of content with CSS. The way you        but stored outside somewhere else. This makes
would add a class or ID can be seen in the exam-       things easier to manage and maintain.
ple below.
                                                       CSS files also have a certain format that they need
<p class=”food, frozen” id=”peas”>This is a
paragraph about frozen peas in the                     to be written in, however this format is more of a
supermarket.</p>                                       list of definitions and can be as extensive or sim-
                                                       ple as the author chooses.


Additional XHTML Resources                             Below is an example of a basic CSS definition
                                                       which is telling a web agent to place a border
W3Schools XHTML Tutorial
                                                       around any paragraph and also setting a width of
http://www.w3schools.com/xhtml/
                                                       a paragraph to 80% of the entire window.
XHTML: Extensible Hypertext Markup Language -- Page 6



p {
border: 10px solid black;                              Further Information /
width: 80%;
}                                                      Questions, Comments,
The general anatomy of a CSS definition or rule         etc.
can be seen below. All parts of the definition must
                                                       If you have any questions concerning the creation
be in place for the rule to work and function prop-
                                                       of this guide or anything included below, you may
erly.
                                                       contact the me via the following information:

                                                       Brian Talbot
                                                       Web Designer
                                                       Simmons College Web Services
                                                       300 The Fenway
                                                       Boston, MA 02115

                                                       617-521-2678
                                                       brian.talbot@simmons.edu


A CSS file is merely an entire list of these defini-
tions. There are numerous combinations of styles
and definitions you can use to style XHTML. We
will explore the idea of the cascade of styles along
with some other CSS principles in class further.




More Information on Cascading Style
Sheets
W3Schools CSS Tutorial
http://www.w3schools.com/css/

Styleguide CSS property and value encyclopedia
http://www.stylegala.com/features/css-reference

World Wide Web Consortium (W3C) Official CSS
Documentation
http://www.w3.org/Style/CSS/

World Wide Web Consoritum (W3C) CSS Validator
http://jigsaw.w3.org/css-validator/

An Example of the Power of CSS - CSS Zen Garden
http://csszengarden.com/

Recommended

Understanding Dom
Understanding DomUnderstanding Dom
Understanding DomLiquidHub
 
2010 Glossary of E-Publishing Terms
2010 Glossary of E-Publishing Terms2010 Glossary of E-Publishing Terms
2010 Glossary of E-Publishing TermsKrista Coulson
 
AAUP 2011 Ebook Basics Introduction/Handout
AAUP 2011 Ebook Basics Introduction/HandoutAAUP 2011 Ebook Basics Introduction/Handout
AAUP 2011 Ebook Basics Introduction/Handoutearkin
 
XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)
XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)
XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)Beat Signer
 
Jaxp Xmltutorial 11 200108
Jaxp Xmltutorial 11 200108Jaxp Xmltutorial 11 200108
Jaxp Xmltutorial 11 200108nit Allahabad
 

More Related Content

What's hot (20)

Xhtml
XhtmlXhtml
Xhtml
 
XML Technologies
XML TechnologiesXML Technologies
XML Technologies
 
Web programming by Najeeb ullahAzad(1)
Web programming by Najeeb ullahAzad(1)Web programming by Najeeb ullahAzad(1)
Web programming by Najeeb ullahAzad(1)
 
Web app development_html_01
Web app development_html_01Web app development_html_01
Web app development_html_01
 
ITFT_Wireless markup language
ITFT_Wireless markup languageITFT_Wireless markup language
ITFT_Wireless markup language
 
Html tag
Html tagHtml tag
Html tag
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
Wsdl1
Wsdl1Wsdl1
Wsdl1
 
Web programming unit IIII XML &DOM NOTES BY BHAVSINGH MALOTH
Web programming unit IIII XML &DOM NOTES BY BHAVSINGH MALOTHWeb programming unit IIII XML &DOM NOTES BY BHAVSINGH MALOTH
Web programming unit IIII XML &DOM NOTES BY BHAVSINGH MALOTH
 
Web Design
Web DesignWeb Design
Web Design
 
Html book2
Html book2Html book2
Html book2
 
HTML
HTMLHTML
HTML
 
Unit 2.2
Unit 2.2Unit 2.2
Unit 2.2
 
Xml
XmlXml
Xml
 
XML and Related Technologies - Web Technologies (1019888BNR)
XML and Related Technologies - Web Technologies (1019888BNR)XML and Related Technologies - Web Technologies (1019888BNR)
XML and Related Technologies - Web Technologies (1019888BNR)
 
Xml ppt
Xml pptXml ppt
Xml ppt
 
Document object model
Document object modelDocument object model
Document object model
 
Introduction to xml
Introduction to xmlIntroduction to xml
Introduction to xml
 
Dom structure
Dom structureDom structure
Dom structure
 
HTML
HTMLHTML
HTML
 

Similar to xhtml-documentation

Introdution to HTML
Introdution to HTMLIntrodution to HTML
Introdution to HTMLyashh1402
 
Html for Beginners
Html for BeginnersHtml for Beginners
Html for BeginnersSriram Raj
 
Lecture 4 - Adding XTHML for the Web
Lecture  4 - Adding XTHML for the WebLecture  4 - Adding XTHML for the Web
Lecture 4 - Adding XTHML for the Webphanleson
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...webre24h
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtmlFkdiMl
 
Introduction to Web Services Protocols.ppt
Introduction to Web Services Protocols.pptIntroduction to Web Services Protocols.ppt
Introduction to Web Services Protocols.pptDr.Saranya K.G
 
Rc064 010d Core Html 1
Rc064 010d Core Html 1Rc064 010d Core Html 1
Rc064 010d Core Html 1troopergreen
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusNANDINI SHARMA
 

Similar to xhtml-documentation (20)

Introdution to HTML
Introdution to HTMLIntrodution to HTML
Introdution to HTML
 
Xml
XmlXml
Xml
 
light_xml
light_xmllight_xml
light_xml
 
Xhtml
XhtmlXhtml
Xhtml
 
Html
HtmlHtml
Html
 
WEB Module 1.pdf
WEB Module 1.pdfWEB Module 1.pdf
WEB Module 1.pdf
 
Why XML is important for everyone, especially technical communicators
Why XML is important for everyone, especially technical communicatorsWhy XML is important for everyone, especially technical communicators
Why XML is important for everyone, especially technical communicators
 
Html for Beginners
Html for BeginnersHtml for Beginners
Html for Beginners
 
Presentation
PresentationPresentation
Presentation
 
XML | Computer Science
XML | Computer ScienceXML | Computer Science
XML | Computer Science
 
Lecture 4 - Adding XTHML for the Web
Lecture  4 - Adding XTHML for the WebLecture  4 - Adding XTHML for the Web
Lecture 4 - Adding XTHML for the Web
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 
Web standards
Web standards Web standards
Web standards
 
UNIT-1 Web services
UNIT-1 Web servicesUNIT-1 Web services
UNIT-1 Web services
 
XML
XMLXML
XML
 
XML Introduction
XML IntroductionXML Introduction
XML Introduction
 
Introduction to Web Services Protocols.ppt
Introduction to Web Services Protocols.pptIntroduction to Web Services Protocols.ppt
Introduction to Web Services Protocols.ppt
 
Rc064 010d Core Html 1
Rc064 010d Core Html 1Rc064 010d Core Html 1
Rc064 010d Core Html 1
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV Syllabus
 

More from tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 

More from tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 

Recently uploaded

ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31shyamraj55
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoProduct School
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...Fwdays
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro KozhevinFwdays
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Jay Zhao
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfinfogdgmi
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 

Recently uploaded (20)

ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdf
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 

xhtml-documentation

  • 1. XHTML: Extensible Hypertext Markup Language -- Page 1 XHTML: What is Markup? Markup is the process of providing context for Extensible pieces of information. Markup provides semantic weight to elements within information while still Hypertext Markup keeping the association between all of the ele- ments within information. If we think about a Language physical letter that would be sent to someone as an example, the letter itself is one piece of infor- Brian Talbot Web Designer mation, but there are various elements that make Simmons College Web Services up a letter such as the Greeting, Address, Body, July 2005 Signature and so forth. All of these elements are understood to mean different things and that un- derstanding comes from the formatting associated This document is meant to serve primarily as a with them. guide to using XHTML (Extensible Hypertext Markup Language) and CSS (Cascading Style- sheets) to create web pages, sites and interfaces. What is the difference between HTML, There are three portions to this guide. The first XTHML, and XML? portion details what exactly XHMTL is, its purpose, XHTML is a transitional step from previous its history and its future. markup languages such as SGML (Standard Gener- alized Markup Language) and HTML (Hypertext The second portion walks through the various Markup Language). XHTML is very similar to HTML parts of a correctly written XHTML file. How to as it shares the same expressive possibilities, but markup content within an XHTML page and using has a stricter syntax (more rules/practices to fol- hypertext and media within an XHTML webpage low). Whereas HTML was an application of SGML, will be discussed as well. a very flexible markup language, XHTML is an ap- plication of XML, a more restrictive subset of The third portion of this guide begins to focus on SGML. Currently web browsing technologies sup- using Cascading Style Sheets to visually style and port XHTML and HTML, but cannot however sup- display the markup created in an XTHML Docu- port XML in it’s original form. XML must be trans- ment. formed and delivered into a document browsing technologies can understand, the general choice is XHTML. What is XTHML? XHTML, or Extensible Hypertext Markup Language The benefits of XHTML - A Sound is one of the most modern building materials for Structure creating web pages. As a computer programming Because XHTML is based on a stricter language language that is supported by web browsers and a (XML), there is a much stricter format that must be growing number of other applications, XHTML’s followed when marking up information and pre- purpose it to provide formatting to content using senting it in an XHTML file. Markup. A stricter format adopted from XML allows for the Note: Visually styling a web document is not a separation of content and the visual presentation direct responsibility of XHTML, rather CSS (Cas- of this content. This has many benefits as an cading Style Sheets) are used to define the visual XTHML page can be visually styled by multiple CSS style of the markup used in an XHTML document. documents actively or invisibly providing users
  • 2. XHTML: Extensible Hypertext Markup Language -- Page 2 with formatting options based on their particular closing tag is that the command in the closing tag situations. This comes in handy in some of the following situations: ‣ Printing Documents ‣ Projection/Presentation Situations ‣ People with disabilities/accessibility issues This stricter formatting of XHTML also allows the emergence of a systematic troubleshooting and validation service. This creates a standard practice of coding and marking information up. is preceded by a forward slash (“ / ”). Note: As we will see, there are some variations to Creating XHTML this rule where an XHTML tag can close itself, these are called ‘self closing tags”. However, all XTHML can be written in any text editing software tags in an XHTML document must be closed. or in specially designed applications such as Mac- romedia Dreamweaver. Generally XHTML files are saved as .html files. But,, dynamically produced pages such as .php files can also use XHTML. XHTML Markup XHTML markup is written in the form of tags. Tags are commands that tell the web agent how to process the information (content, media, and me- Document Structure tadata) of the webpage. An XHTML document has a pre-formatted docu- Think of tags as wrapper on pieces of candy. ment structure. All this means is that there are When looking at the wrappers of candy you know certain pieces that every XHTML page must have in order to be properly formatted as XHTML (which what flavors and how a candy would taste. A web will give all of the benefits listed above). agent, in many cases a web browser, knows how information should be processed because of the An XTHML Document needs to have the following tag that it is surrounded by. This gives context to elements within it: the information being presented just as the wrap- per on a piece of candy gives you understanding A Document Type (DocType) definition as to what type of candy it is or may be. The first thing placed in an XHTML file, the Doc- A tag command is written within angle brackets Type definition tells the web agent (A web (“<” & “>”) and most work like bookends with an browser, mobile phone, other online devices) what opening tag and a closing tag. What sits between type of markup language a page is using. The the opening and closing tags is what is effected by agent then takes that information into considera- that tag. The difference between and opening and tion when rendering the page and its information for the user. A DocType looks like the following and is placed at the beginning of the XHTML file:
  • 3. XHTML: Extensible Hypertext Markup Language -- Page 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 --> Strict//EN" </style> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict </head> .dtd"> Body Tag <html xmlns="http://www.w3.org/1999/xhtml"> The Body tag houses all of visible of an XHTML Note: The code behind a DocType is a bit more web-page. This is where the bulk of the markup complicated and can be examined closer by some will occur. For now a blank body tag looks like the of the links at the end of this section of the guide. following. <body> There are various DocType Definitions each with This is where the content of a webpage would their own function. HTML has its own document go and it will be marked up using other XHTML type definition as does RSS (Rich Site Summary). tags. </body> The point of a DocType is provide the framework for what type of code can and can’t be placed be- Note: When writing XTHML, line breaks in the code low and to prepare a user’s web agent to handle do not affect visual display or formatting. the markup in the best manner possible. If all of these elements are placed together, they Note: The <html> tag that is opened in the ex- look something like this - ample above must be closed after everything else on the page. Thus everything else to follow would <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" be wrapped in an <html></html> tag as every "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict other tag. .dtd"> Head Tag <html xmlns="http://www.w3.org/1999/xhtml"> The next piece of standard XHTML that is needed <head> is the Head Tag portion of the webpage. The Head <title>The Web Page’s Title</title> Tag contains information about the page such as <meta http-equiv="Content-Type" content="text/ its title, any extra information (called metadata) html; charset=iso-8859-1" /> <meta name="author" content="Author’s Name" /> about the page as well as references to external <meta name="Description" content=”A Descrip- files that provide functionality to the page. These tion of the Webpage"/> files include references to Cascading Style Sheets <style type="text/css" media="screen"> (CSS) which contains the rules on how the page is <!-- visually styled as well as JavaScript which adds @import "css.css"; --> additional web behaviors such as opening new </style> windows. </head> The Head Tag generally looks like the following, <body> This is where the content of a webpage would with the paths to external CSS files changing de- go and it will be marked up using other XHTML pending on where they are stored. tags. </body> <head> </html> <title>The Web Page’s Title</title> <meta http-equiv="Content-Type" content="text/ Note: You can make notes and comments in html; charset=iso-8859-1" /> XHTML by placing a “<!--” at the beginning of <meta name="author" content="Author’s Name" /> <meta name="Description" content=”A Descrip- your comment and a “-->” at the end of your tion of the Webpage"/> comment. A comment will not be seen by the web agent and is used commonly to keep track of <style type="text/css" media="screen"> <!-- things within the code. @import "css.css";
  • 4. XHTML: Extensible Hypertext Markup Language -- Page 4 Common XHTML Markup <ol> <li>Eggs</li> The following are tags that are used within the <li>Milk</li> <li>Bread</li> <body> of an XHTML document. <li>Tomatoes</li> <li>Figs</li> Paragraph </ol> Denotes that the contents within the tag are a Links paragraph of text. To create a hyperlink to another webpage or <p>This is a paragraph</p> document you would use the anchor tag (<a>), which is made up of 2 different parts. Strong and Emphasis (Bold and Italics) 1. Anchor <a> - This is the opening and clos- To place emphasis on content there are two ways ing tag, what makes the text clickable. to do so, to bold content, you would place strong tags around the content. To italicize content you 2. HyperText Reference “href” – An attribute to would place emphasis tags (<em>) around it. the opening anchor tag that tells where to <strong>This is bolded text</strong> link to. <em>This is italicized text</em> If you wanted to have a sentence that linked to another website, here is what it would look like Lists in XHTML: Lists are used to display short amounts of in- formation that relate to each other in one sense <a href=”http://www.anotherwebsite.com/”>This link will take you to another website</a> or another, much as they do in real-life situa- tions. There are various kinds of lists used in Images XHTML, The ordered and the unordered lists Images can be placed in an XHTML webpage using are two of the most common. The ordered is the following two part <img> tag can be used to listed with numbers, the unordered is bulleted. reference images inside of XHTML. Two create these lists you need two tags: img – Indicates to the browser, the following is an 1. <ul> or <ol> - Depending on which list you image want. These are needed to open and close your list. src – Indicates to the browser where the image is actually stored. 2. <li> - Within the above tag, the list item precedes each item you are listing. If you had a picture of a flag called flag.gif, to place this within your page, the tag would look Here’s an example with the days of the week like the following listed in an unordered list: <img src=”flag.gif” /> <ul> <li>Monday</li> <li>Tuesday</li> Note: The <img> tag is one of a few “self-closing <li>Wednesday</li> tags” in XHTML which do not have an end tag. In <li>Thursday</li> <li>Friday</li> this case there is no such thing as a </img> tag, </ul> but rather the tag is closed by a “/” at the end of the initial tag, <img src />. Please see above in Here’s an example of a grocery list arranged by this guide for further information. most important item to least important in an or- dered list:
  • 5. XHTML: Extensible Hypertext Markup Language -- Page 5 For information on more specific XHTML markup World Wide Web Consoritum (W3C) Official XHTML you may consult the following list of additional documentation resources. http://www.w3.org/MarkUp/ Divisions World Wide Web Consoritum (W3C) XHTML/HTML Divisions are logical separations of content within Validator a page. If for instance there was both a piece of http://validator.w3.org content that had numerous paragraphs of infor- mation which pertained directly to the topic of Too Easy XHTML - Lowter’s Guide your web-page, you may want to separate that http://www.lowter.com/articles/178?PHPSESSID=f from a list of links to supplemental topics that are 088f5baf6035254fde1679764ab2968 not directly related to the main content of the page and would be placed visually on the right of the page. This type of content separation can be obtained by placing each group of content in a Styling XHTML with Cas- <div> tag. See the example below: cading Style Sheets <div> All of the presentational information that is con- <p>This is my main content</p> <p>This is more of my main content</p> tained and displayed through a webpage are de- </div> livered not by the XHTML of a page, but by the <div> CSS (Cascading Style Sheets) that are linked in the <p>This is a set of links to supplemental <head> tag of an XHTML file. information</p> CSS handles both physical layout, placing ele- <ul> <li><a href=”link”>Link 1</a></li> ments next to each other the page and also the <li><a href=”link”>Link 2</a></li> look of things, such as color, font-size and bor- <li><a href=”link”>Link 3</a></li> </ul> ders. </div> Using CSS allows for far greater accessibility ef- forts and allows designers and creators of web- IDs and Classes page to carefully and universally tailor elements of webpages according to their various audience’s Once an XTHML tag has been written, you can needs. then assign one id and as many classes as you want to the tag if you wish. IDs and classes are Generally the best practice is to keep CSS as ex- used to further distinguish content and help in the ternal files that are referenced inside XHTML files visual styling of content with CSS. The way you but stored outside somewhere else. This makes would add a class or ID can be seen in the exam- things easier to manage and maintain. ple below. CSS files also have a certain format that they need <p class=”food, frozen” id=”peas”>This is a paragraph about frozen peas in the to be written in, however this format is more of a supermarket.</p> list of definitions and can be as extensive or sim- ple as the author chooses. Additional XHTML Resources Below is an example of a basic CSS definition which is telling a web agent to place a border W3Schools XHTML Tutorial around any paragraph and also setting a width of http://www.w3schools.com/xhtml/ a paragraph to 80% of the entire window.
  • 6. XHTML: Extensible Hypertext Markup Language -- Page 6 p { border: 10px solid black; Further Information / width: 80%; } Questions, Comments, The general anatomy of a CSS definition or rule etc. can be seen below. All parts of the definition must If you have any questions concerning the creation be in place for the rule to work and function prop- of this guide or anything included below, you may erly. contact the me via the following information: Brian Talbot Web Designer Simmons College Web Services 300 The Fenway Boston, MA 02115 617-521-2678 brian.talbot@simmons.edu A CSS file is merely an entire list of these defini- tions. There are numerous combinations of styles and definitions you can use to style XHTML. We will explore the idea of the cascade of styles along with some other CSS principles in class further. More Information on Cascading Style Sheets W3Schools CSS Tutorial http://www.w3schools.com/css/ Styleguide CSS property and value encyclopedia http://www.stylegala.com/features/css-reference World Wide Web Consortium (W3C) Official CSS Documentation http://www.w3.org/Style/CSS/ World Wide Web Consoritum (W3C) CSS Validator http://jigsaw.w3.org/css-validator/ An Example of the Power of CSS - CSS Zen Garden http://csszengarden.com/