Post on 23-Jan-2017
HTML and XHTMLHyperText Markup Language
Mechanism
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 DeclarationsHTML5<!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
HTML & 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 contentWhat 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>
COMMENT
• <!-- -->
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=hello">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"><frame src="frame2.html"></frameset><frameset cols="50%,*"><frame src="frame2.html"> <frame src="frame2.html"></frameset></frameset>
</html>
• Index.html<html><head><title></title></head><frameset rows="10%,*">
<frame src="top.html"><frameset cols="10%,*">
<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="Link\link1.html">Link1</a></li><li><a target="right" href="Link\link2.html">Link2</a></li><li><a target="right" href="Link\link3.html">Link3</a></li><li><a target="right" href="Link\link4.html">Link4</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>
<frameset cols="50%,*"><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”>
<input type=“button” value=“…” name=“….” ></input>
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><option label=“….”>….</option></optgroup><optgroup label=“..”><option label=“….”>….</option><option label=“….”>….</option></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.comPassword: frpr5685
• SearchButton.com • add a search engine to your site• getting too large to navigate easily
<!-- Atomz HTML for Search --><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>
HTML Layouts
table
Div
Definition and UsageThe <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's1. 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.
THANKS
DAY 1 Question1. 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 Answer1. 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 HTMLis 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 Answer3. 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 Question1. 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 Answer1. 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.