Html and Xhtml

HTML and XHTML
HyperText Markup Language

1. You enter a web page address in your browser’s location bar.
2. Your browser breaks apart that address and sends the name of the page to the
web server. For example, http://www.phone.com/directory.html would request
the page directory.html from www.phone.com.
3. A programon the web server, called the web server process, takes the request
for directory.html and looks for this specific file.
4. The web server reads the directory.html file from the web server’s hard drive.
5. The web server returns the contents of directory.html to your browser.
6. Your web browser uses the HTML markup that was returned from the web
server to build the rendition of the web page on your computer screen.

Introduction
• HTML is a markup language for describing web documents (web
pages).
– HTML stands for Hyper Text Markup Language
– A markup language is a set of markup tags
– HTML documents are described by HTML tags
• The computer coding language used to convert ordinary text into
active text for display and use on the web and also to give plain,
unstructured text the sort of structure human beings rely on to
read it.
– tags: marked up
– free, open standard, not owned or controlled by any company or
individual.
– rules are maintained by the World Wide Web Consortium (W3C)
– in the early 1990s
– Standard Generalized Markup Language (SGML) First
– HTML, 1.0, HTML 2.0, HTML 3.0, HTML 4.0, HTML 5(early stage), HTML
4.01, eXtensible HTML( can be created their own customized tags),
XHTML 1.1, XHTML 2.0

Introduction
• XHTML are Strict, Transitional, and Frameset: Extensible
– Strict ,most stringent in its rules. Deprecated features are forbidden outright, and the rules
must be followed to the letter if a document is to be well formed.
– HTML toTransitional, a bit more relaxed than Strict, allowing some outdated
features to still linger in a well-formed document. This variant is intended for authors making
the transition from earlier versions of XHTML 1.0.
– Frameset are a feature from earlier versions of HTML that allowed a
page to be split into multiple panes, each displaying a different document. They’ve
been deprecated in XHTML Strict and Transitional, which is why this special flavor
exists.

tag
• Tags, Elements, and Attributes

Morphology of HTML
• Block-Level and Inline Elements
– <p><em>I LOVE U</em></p>
• Nesting Elements
– <p><em>Hello, world!</em></p>
• White Space
<p>
Wide open
spaces !
</p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My first web page</title>
</head>
<body>
<p>XHTML is easy!</p>
</body>
</html>
• The Doctype: standardized rules the document intends to follow. Each “flavor” of XHTML has
its own corresponding doctype: strict, Transitional, Frameset. Not an element in XHTML
• XML declaration
• The html Element(no property): root element
– xmlns: A URL specifying an XML namespace, which is http://www.w3.org/1999/ xhtml for XHTML documents

The DOCTYPE declaration defines the document type to be HTML
•<!DOCTYPE> declaration helps the browser to display a web page correctly.
•To display a document correctly, the browser must know both type and version.
•The doctype declaration is not case sensitive.
•Common Declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML

The DOCTYPE declaration defines the document type to be HTML
•<html> and </html> describes an HTML document
•<head> and </head> provides information about the document
•<title> and </title> provides a title for the document
•<body> and </body> describes the visible page content
What is HTML tag?
•HTML tags are keywords (tag names) surrounded by angle brackets:
•HTML tags normally come in pairs like <p> and </p>
•The first tag in a pair is the start tag, the second tag is the end tag
•The end tag is written like the start tag, but with a slash before the tag name
HTML & XHTML

Selecting a Web Hosting Provider
• Hosting provider is usually a quick, painless, and relatively inexpensive process.
Own domain name and a year of web hosting for just slightly more than the cost
.Type web hosting provider in your search engine of choice, you will get millions of
hits and an endless list of sponsored search results .
• Some selection criteria for a web hosting provider are
– Reliability/server ”uptime”—if you have an online presence, you want to
make sure people can actually get there consistently.
– Customer service—look for multiple methods for contacting customer service
(phone, email, chat) as well as online documentation for common issues.
– Server space—does the hosting package include enough server space to hold
all the multimedia files (images, audio, video) you plan to include in your web
site (if any)?
– Bandwidth—does the hosting package include enough bandwidth so that all
the people visiting your site and downloading files can do so without you
having to pay extra?

Selecting a Web Hosting Provider
– Domain name purchase and management—does the package include a
custom domain name, or must you purchase and maintain your domain name
separately from your hosting account?
– Price—do not overpay for hosting. You will see a wide range of prices offered
and should immediately wonder “what’s the difference?” Often the difference
has little to do with the quality of the service and everything to do with
company overhead and what the company thinks they can get away with
charging people. A good rule of thumb is that if you are paying more than $75
per year for a basic hosting package and domain name, you are probably paying
too much.
– Example:
• A Small Orange (http://www.asmallorange.com)—their “Tiny” and “Small” hosting
packages are perfect starting places for the new web content publisher.
• DailyRazor (http://www.dailyrazor.com)—their RazorLIMIT and RazorSTARTER
hosting packages are full-featured and reliable.
• LunarPages (http://www.lunarpages.com)—the Basic hosting package is suitable
for many personal and small business web sites.

BODY
• <BODY BACKGROUND="URL" BGCOLOR="#rrggbb or colorname"
TEXT="#rrggbb or colorname" LINK="#rrggbb or colorname"
ALINK="#rrggbb" or colorname" VLINK="#rrggbb or
colorname">document-body</BODY>

HTML
<html>
<head><title></title> </head>
<body>
<h1 align=“center”>header1</h1>
<h2 align=“left”>header2</h2>
<h3 align=“right”>header3</h3>
<h4>header4</h4>
<h5>header5</h5>
</body>
</html>

Header
• <h1><h2><h3><h4><h5><h6>
• Attribute: align=“LEFT”,”RIGTH”,”CENTER”.

BLOCKQUOTE
• <blockquote>fdgfdgdfgdf</blockquote>

Paragraph
• <p>………..Text………………</p>
• Attribute: ALIGN=“JUSTIFY,LEFT,RIGHT,CENTER”

Special Characters
•  
• < < > > & & " "

Horizontal Rule
• <hr align=“LEFT,RIGHT,CENTER” size=“x”
width=“y” color=“colorname or colorCode”>

PREFORMATED TEXT(PRE)
• <pre>
(…O… …O…)
</pre>

CENTER
• <center><h1>Header1</h1></center>

ADDRESS
• <address>….Tel: 011 22 33 44..</address>

FONT
• <font face=“fontName” color=“name or code”
size=“number1-7 default=3”>…….</font>
• <basefont face=“fontName” color=“#00ffff”
size=“number”>
<font….>
……………………
</font>
• </basefont>

BIG, SMALL, BOLD, ITALIC
• <big>….<big><big>….</big></big></big>
• <small><small><small>….</small></small></small>
• <b>…</b>
• <i>…..</i>

SUPERSCRIPT & SUBSCRIPT
• <sup>….</sup>
• <sub>….</sub>

Tag Description
<abbr>
<acronym>
<cite>
<code>
<dfn>
<del>
<em>
<ins>
<kbd>
<samp>

LIST: UNUMERIC LIST, NUMERIC LIST,
Directory lists
• UNUMERIC LIST
– <ul type=“CIRCLE, DISC, SQUARE,Disc=Default”>…………</ul>
• NUMERIC LIST
– <ol type=“A, a, I, i,” start=n>……………….</ol>
• <li style=“list-style-type: disc, none, circle,
square”>…………….</li>

Image
• <img src=“pathImage” align=“right, top, middle,
bottom, left” width=“n” height=“n” alt=“sth”
vspace=n hspace=n>

table
• <table align=“center, left, right” background=“a.jpg”
bgcolor=“color” border=“n” bordercolor=“color”
bordercolorlight=“color” bordercolordark=“color”
cellspacing=n cellpadding=n
frame=“void,above,below,hsides, vsides,lhs,rhs,box or
border” rule=“none, rows, cols, all” width=“n%” >
<caption align=“bottom, top, right, left”></caption>
<tr><th></th><td></td></tr>
<tr><td align=“left,right,center, justify”
valign=“top,middle,bottom,baseline” bgcolor=“color”
colspan=“n” rowspan=“n”></td><td></td></tr>
</table>

Example
>> Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

LINK
• <a target=“_blank” href=“filename and path”
title=“---”></a>
• <a name=“anchor_name”>-----------</a>
<a href=“#anchor_name”>……………</a>
• <head><title></title><base
target=defaulttarget></head><body>..</body>
• <a href="mailto:abc@yahoo.com?subject=Question
&cc=th@yahoo.com&bcc=cc@yahoo.com&body=hel
lo">click here for mail here for mail</a>

LINK
• <a target=“_blank, _self, _parent, _top”></a>
target="
_blank" Opens new page in a new browser window
_self" Loads the new page in current window
_parent"
Loads new page into a frame that is superior to where
the link lies
_top"
Loads new page into the current browser window,
cancelling all frames

Iframe: Defines an inline sub window (frame)
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>

FRAME
• Top.html
• Left.html
• Right.html
• <frameset rows=“30%,*” border=“n” framespacing=n >
<frame src=“top.html” name=“mainwindows”
scrolling=“yes/no” >
<frameset cols=“30%,*”>
<frame src=“left.html”>
<frame src=“right.html”>
</frameset>
</frameset>

FRAME
<html>
<head><title></title></head>
<frameset rows="50%,*">
<frameset cols="50%,*">
<frame src="frame1.html">
</frameset>
</frameset>
</frameset>
</html>

• Index.html
<html><head><title></title></head>
<frameset rows="10%,*">
<frame src="top.html">
<frame src="left.html">
<frame name="right" src="right.html">
<frameset>
</frameset>
</html>
• Top
<html><head><title></title><base target="top“></head>
<body><h1 align="center">TITLE</h1></body>
</html>
• Left
<html><head><title></title><base target="right“></head>
<ol>
<li><a target="right" href="Linklink1.html">Link1</a></li>
</ol>
• Right

A.html
<html>
<head><title></title></head>
<body>
<a href="hello.htm" target="_self">Click here</a>
</body>
</html>
B.Html
<h1>B</h1>
Index.html
Index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<frame src="a.html">
<frame src="b.html" name="right">
</frameset>
</html>

Target=“_selef_blank_parent_top”
• "_top“ tag causes the new page to load in the
full body of the window, which is useful if you
ever want to break out of the frameset you
have created and have a frameless page.
• "_parent" is similar to target="_top"
• "_blank" causes the link to open in a totally
new browser window .
• "_self" loads the page within the same frame
as the link tag.

Form
• <form method=“post/get” action=“www.cam.com”>
Method: how to send data?
action: locate the URL for send data
</form>
• POST may involve storing or updating data, or ordering a product,
or sending E-mail and invisible of sending process.
• POST method, browser sends the data in two steps: the browser
first contacts the forms-processing server specified in the action
attribute and then, once contact is made, sends the data to the
server in a separate transmission.
– file:///C:/Users/Administrator/Desktop/www.google.com
• Post, which sends the data without displaying any of the
information to the visitor.

• METHOD="GET" (the default)
• Get: contacts the forms-processing server and sends the form
data in a single transmission step: the browser appends the
data to the form's action URL, separated by the question mark
character.
• Get visible of sending processing.
– http://www.kumquat.com/cgi-
bin/upate?x=27&y=33d
• Action: the URL to send the data to. We will
be sending our information to a fake email
address.

INPUT
• <input name=“” maxlength=“n” size=“n” value=“values”
type=“button, checkbox, radio, hidden, image, text, password,
file,submit, reset” checked=“” disabled=“” readonly align=“”>

TEXT
• <input type=“text” name=“” size=“n”>

password
• <input type=“password” name=“” size=“n” >

CHECKBOX
• <input type=“checkbox” name=“name”
value=“value” >

SELECT BOX
• <select size=“n” name=“…”>
<option selected>….</option>
<option> ………………..</option>
<option>…………………</option>
</select>
Multiple:
• <select size=“n” name=“…” multiple>
<option selected>….</option>
<option> ………………..</option>
<option>…………………</option>
</select>

OPTION
• <input type=“radio” name=“same” value=“…” checked>Male</input>
<input type=“radio” name=“same” value=“…” checked>Female</input>
<input type=“radio” name=“notsame” value=“…” checked>Male</input>

OPTGROUP
• <select name=“”>
<optgroup label=“..”>
<option label=“….”>….</option>
</optgroup>
<optgroup label=“..”>
</optgroup>
</select>

FILE INPUT
• <input type=“file” name=“..”>

Text Area
• <textarea name=“…” row=n cols=n >
………………
</textarea>

SUBMIT
• <input type=“submit” value=“….” name=“…”>
<input type=“button” value=“….” name=“…”>

RESET
• <input type=“reset” value=“…” name=“..”>

IMAGE BUTTON
• <button type=“button” name=“…”><img
src=“…” width=“n”
height=“n”></img></button>

MULTIMEDIA
• <embed src=“pathsong” width=“n”
height=“n” autostart=“true/false” >
• <bgsound src="audio/tadum.wav" loop=10>
• <embed src=music.wav hidden autostart=true
loop=true>

Text Run
• <marquee align=“…” height=n behavior=“scroll>->/alternate>-
</slide>-” direction=“left/right/up/down width=“n” loop=“infinite”
vspace=“n” hspace=“n”>…………….</marquee>
• <marquee scrollamount=1 scrolldelay=345>HELLO, how are
you?</marquee>
– Smooth(scrollamount)
– Delay(scrolldelay)

HTML script
• < < > > & & " " ' '

Redirects
• Placement in search engines. In addition, you
can specify who owns the copyright, how
often the page is to be visited by search
engines and many other useful pieces of
information.
<head>
<meta name="keywords" content="keyword, key keywords, etc" />
</head>

Redirects
<head>
<meta http-equiv="refresh" content="10 ; url=http://www.tizag.com" />
</head>
<meta http-equiv="refresh" content="10; URL=http://www.html2000.iwarp.com/">
This tag will display the web page and after ten seconds the browser will automatically
take the visitor to HTML 2000. You can change the URL to redirect a visitor to any
page on the internet. To adjust the amount of time (in seconds) the page is
displayed, edit the content's value.

Imagemaps
• use a picture for a link
<html><head><title></title>
<body>
<IMG SRC="map.jpg" USEMAP="#map" WIDTH=175 HEIGHT=75 BORDER=0>
<MAP NAME="map">
<AREA SHAPE=CIRCLE COORDS="26,26,22" HREF="1.html">
<AREA SHAPE=POLY COORDS="62,32,41,64,93,64" HREF="2.html">
<AREA SHAPE=RECT COORDS="114,32,171,70" HREF="3.html">
</MAP>
</body>
</html>

Search Engines
• Atomz.com
Ex:
Username: chhomkarath@gmail.com
Password: frpr5685
• SearchButton.com
• add a search engine to your site
• getting too large to navigate easily

<form method="get" action="http://search.atomz.com/search/">
<input type="hidden" name="sp_a" value="sp1004a47f">
<input size="15" name="sp_q"><br>
<input type="submit" value="Search">
<input type="hidden" name="sp_p" value="all">
<input type="hidden" name="sp_f" value="UTF-8">
</form>

Secure Your Images
<TABLE BACKGROUND="person.jpg" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD> </TD></TR>
</TABLE>
Or
<TABLE BACKGROUND="person.jpg" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD><IMG SRC="clear.gif" HEIGHT="50" WIDTH="50"></TD></TR>
</TABLE>

Definition and Usage
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
•<SPAN STYLE="background-color: #ffffcc">Here's What You Get</SPAN>
•<SPAN STYLE="color: green; font-size: 10pt">Here's What You Get</SPAN>
•SPAN STYLE="background-image: url(/img/background2.gif)">Here's What You Get</SPAN>
Icon favor
<HEAD>
<link rel=“ shortcut icon” href=“a.ico” />
<link rel=“ shortcut icon” href=“a.gif” />
</HEAD>

Do's and Dont's
1. Think about tags before you use them, some tags only work in some browsers.
2. Look at your pages on different computers with different browsers. You might be surprised at the differences
browsers, operating systems, and screen sizes effect your pages!
3. Organize you pages for quick scanning
1. Use headings
2. Use lists
3. Make a menu with all the links on one place
4. Important information should stand out!
5. But don't use too much emphasis, people won't know where to look
4. Make each page be independent. People might jump to a specific page while missing information on the
pages between.
5. Check your spelling and grammar. Some free HTML editors have spell check built in! If you use Notepad,
make sure you double check your spelling.
6. Group related information. Use tables, graphics, or horizontal rules to split up separate areas on a page.
7. Be consistent. This will create a general "feel" for your site. Use of style sheets can help.
8. Describe links when possible.
9. Don't use too many links in your text, it gets distracting.
10. Think about your links before you make them. Is it useful?
11. Avoid using phrases like: click this link or click here.
12. Don't use too many images, these pages take a long time to load. Also, keep images as small as possible.
13. Use the same image twice when possible, the computer doesn't have to download it each time you use it, it
keeps recent images close by.
14. Always use the ALT attribute of <img> in case someone has pictures turned off, or doesn't have time to wait
for the page to load.
15. Be cautious with backgrounds and colored text. Everything should be easily readable.
16. Each page should have a link back to your home page in case someone gets "lost."
17. Each page should also have a standard signature on the bottom of each page. This can provide contact or
copyright information
18. Don't say "Under Construction." Every web page is always under construction.

DAY 1 Question
1. You’ve said “web content” instead of “web page,” but I hear people refer to “web
pages.” So what do they mean? And how are these terms different from a “home
page” or a “web site”?
2. I’ve looked at the HTML “source” of some web pages on the Internet and it looks
frighteningly difficult to learn. Do I have to think like a computer programmer to
learn this stuff?
3. Define the term web content?
4. How many files would you need to store on a web server to produce a single web
page with some text and two images on it?
5. Look for reliability, customer service, web space and bandwidth, domain name
service, site management extras, and price.

DAY 1 Answer
1. A The metaphor of the World Wide Web as a library has always been easy for people
to understand; in that library, individual web sites are books, and the individual
content files on web sites as “pages.” A “web site” is comprised of one or more pages
that are created together and related in content. A “home page” usually means the
first page people visit when they look at a web site. Problems arise, however, when
people say “visit my web page” when really they mean “come to my web site” sites
are full of pages. Referring to a collection of web content as a page instead of a site
can tip someone off that you really don’t understand how the web works—either
because you don’t understand the way web content works together to create a site,
or because you’ve planned, designed, and implemented a site in which your content
really is all on one page!
2. Although complex HTML pages can indeed look daunting, learning HTML
is much easier than learning actual software programming languages (such as C++ or
Java). HTML is a markup language rather than a programming language; you mark-up
text so that the text can be rendered a certain way by the browser. That’s a
completely different set of thought processes than developing a computer program.
You really don’t need any experience or skill as a computer programmer to be a
successful web content author. One of the reasons the HTML behind many
commercial web sites looks complicated is because it was likely created by a visual
web design tool—a “what you see is what you get” or “WYSIWYG” editor that will use
whatever markup its software developer told it to use in certain circumstances—as
opposed to being hand-coded, in which you are completely in control of the resulting
markup. In this book, you are taught fundamental coding from the ground up, which
typically results in clean, easy-to-read source code. Visual web design tools have a
knack for making code difficult to read, and also for producing code that is convoluted
and non-standards compliant.

DAY 1 Answer
3. Web content is a term that describes the full range of text, image, audio, video,
and other media files delivered from web servers to web browsers.
4. You would need three: one for the web page itself, which includes the text and the
HTML markup, and one for each of the two images.
5. Look for reliability, customer service, web space and bandwidth,domain name
service, site management extras, and price.

DAY 2 Question
1. All the tests you recommend would take longer than creating my pages! Can’t I
get away with less testing?
2. Seriously, who cares how I organize my web content?
3. What three pieces of information do you need to connect to your web server via
FTP?
4. What is the purpose of the index.html file?
5. Does your web site have to include a directory structure?

DAY 2 Answer
1. If your pages aren’t intended to make money or provide an important service, it’s
probably not a big deal if they look funny to some users or produce errors once in
a while. In that case, just test each page with a couple of different browsers and
call it a day. However, if you need to project a professional image, there is no
substitute for rigorous testing.
2. Believe it or not, the organization of your web content does matter to search
engines and potential visitors to your site—you’ll learn more about this in Hour
24, “Helping People Find Your Web Pages.” But overall, having an organized web
server directory structure will help you keep track of content that you are likely to
update frequently. For instance, if you have a dedicated directory for images or
multimedia, you will know exactly where to look for a file you wish to update—no
need to hunt through directories containing other content.
3. What is the purpose of the index.html file? The hostname, your account
username, and your account password.
4. The index.html file is typically the default file for a directory within a web server. It
allows users to access http://www.yourdomain.com/somedirectory/ without using
a trailing file name and still end up in the appropriate place.
5. No. Using a directory structure for file organization is completely up to you,
although it is highly recommended to use one because it simplifies content
maintenance.

Html and Xhtml

More Related Content

What's hot

Similar to Html and Xhtml

More from Chhom Karath

Recently uploaded

Html and Xhtml

Editor's Notes