XHTML

Aug 15 2014- POSTED BY projecth 0 Comment

Lesson 1: Introducing XHTML and HTML

HTML created in the early 1990’s for scientists to share papers based on SGML (Standard Generlizaed Markup Language), then HTML developped to HTML 4. XHTML (eXtensible Hyper Text Markup Language), the X is there because it’s an extension of XML.

Why XHTML ?

HTML is forgiving on sloppiness, while XHTML is strict which makes websites work better on more devices

History

HTML 4.01 The most recent version of HTML XHTML 1.0 Based on HTML 4.01 XHTML 1.1 Stripped down, very strict, and relies on CSS for all layout XHTML 2.0 Clean break from HTML (abandoned in 2006) HTML 5 Unfinished and stuck in committee, includes Xforms

This course will use XHTML 1.0

The Top of an XHTML Document

<?xml version="1.0" encoding=utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Other types than "Transitional" are "Strict" and "Frameset" Transitional: the usual type Strict: only and only by CSS Frameset: for pages with frames

Templates

It is wise to save a basic structure of each website you design, to save time each time you want to start a new page in that website.

Lesson 2: Text Tags

Types of Tags

Block-level element: like <div>, <center> and <h1> Inline-level element: like <em>, <strong>, and <img />

<p> tag is the only block-level element that can not contain other block-level elements

No-Break tag (Non-standard element)

<nobr> Text line here</nobr>

This tag makes the text inside of it a full line without wrapping it into multiple lines.

Phrase Markup Elements

<q>		For "quote" text lines
<code>		Makes the text look like programming code
<abbr>		Abbreviation element that allows you to abbreviate a word with a few letters, 
		and shows the meaning on mouse-over. Works like this:
		<abbr title="United States of America"> USA <abbr>
<acronym>	Does that <abbr> does
<dfn>		To define a word in a document; works on mouse-over as well.
<var>		For variables

Font Markup Elements

<b> = <strong>
<i> = <em>
<tt> = <pre> 
<big> <small> <strike> <u>

the HTML police don’t like you to use Font Markup elements.

Headings

<h1> <h2> <h3> ...etc They are important for text formatting and search engine rendering.

Quotes

<blockquote> is a block-level element (mostly used for quick text-indent) <q> in an inline-level element (is not supported well in all browsers)

Generic Font Faces: (these are defaul values of fonts on all systems)

sans-serif which tells the system to use the font that looks like Arial serif which tells the system to use the font that looks like Times Roman monospace which tells the system to use the font that looks Courier New

Lists

<ul> <ol> <dl>

Lesson 3: Images, Links, and Frames

Image Tags

Previously known attributes of the <img> tag: src, width, height, alt, title, align, border

hspace="10" Stands for "Horizaontal Space", adds 10px side margins to the image. <br clear="all"> Adds a break to the text wrapped around the image, and makes the text after it positioned under the image.
 

Hyper Links

URL (Uniform Resource Locator):

scheme: //host :port /path : parameters ?query #fragment

http://www.google.com/maps

http: = scheme: google.com = //host /maps = /path part of the page = #fragment

?query are for programming purposes

The "Base" Tag

<base /> is used inside the <title> tag, it contains an href="" of a URL on the web server that all links in your current document will be relative to. so in a way, the <base> tag saves you from typing the website url everytime you want add a new link, all you have to do is add the path to that link and the <base> tag will do the rest for you.

#Fragments

Document fragments need 2 things: a name, and link to it:

<a name="top"></a>
.
.
.
<a href="#top">Top</a>

 

Frames

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TY/xhtml11/DTD/xhtml11-frameset.dtd">
<frameset cols="130,*">
	<frame src="content/nav.html" name="nav" />

	<frameset cols="75,*">
		<frame src="content/titlebar.html" name="titlebar" scrolling="no" />
	</frameset >

<noframe>
	<body>
		<p>This is 
	</body>
</noframe>
</frameset >

CGI stands for common gateway interface, which is a protocol which is responsible for accepting the data sent by the user through the contact form. Simply put, it is how the browser talks to the server and passes back and forth the information.