HTML

HTML & xHTML
HTML xHTML

ITEC Bayon Hosting
Module 1: HTML Basic
Bayon Hosting

Introduction
HTML HyperText Markup Language
internet
How to Create HTML File

HTML page text editor notepad, wordpad, web
design dreamweaver, frontpage
Notepad
-
Notepad, Wordpad, Dreamweaver, Frontpage

Start Run notepad
Hello World!
o
o
File Save
File Name: extension .html
Save As Type: select All Files
file extension .html
Structure of HTML
structure HTML file
<html>
<head>
</head>
<body>
</body>
</html>
<head> : element <title>, <meta>, <style>, <script>, <link>
<body> : element page <hn>,
<b>,<hr>,<img>,<pre>
General Tags
<title> tag
element page title Title bar
syntax:
<head>
<title> Title Here </title>
</head>
Bayon Hosting
<hn> tag
element n 1-6
page
Syntax:
<hn align="left|right|center|justify"> content </hn>
<h1>Hello
<h2>Hello
<h3>Hello
<h4>Hello
<h5>Hello
<h6>Hello
World</h1>
World</h2>
World</h3>
World</h4>
World</h5>
World</h6>
White Space
white space
Enter, tab, space
1 character spcae HTML White space
<body>
Hello
World!
Welcome to
ITEC Center
</body>
Element Component
Element open tag attributes
closing tag Element elements
Tags
Tag element
(< >) tag
Open tag(<tag>) Closing Tag(</tag>)
Example:
<html> </html>
<h1> </h1>
<tag> closing tag tag self-closing element
replaced element <img>, <br>, <hr>,<meta>
Attribute
Attribute element Attribute Attribute
Name Attribute Value
tags attribute
Bayon Hosting
Core Attribute
id: element document id

class: class element
style sheets
style: style element
title: tooltip mouse
Example:
<h1 title="Heading Text">Hello World!</h1>
<h1 style="color:red"> Hello World!</h1>
Language Attribute
dir: direction text ltr(left to right), rtl(right to left)
lang: attribute content element browser

content
( support font
), quotation marks, and hyphenation

search engines spell-checking
dictionary index
Example:
<h1 dir="rtl" lang="en"> Hello World!</h1>
Core Event Attribute
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onkeypress
onkeydown
onkeyup
Example:
<h1 onclick="alert('Hello')">Hello World</h1>
element
<h1 align = "center"> Hello World! </h1>

attribute name
attribute value
Open Tag
Affected Area
Closing Tag
Bayon Hosting
More Tags
<br />
Line Break
Syntax:
<br clear="left|right|all" />
Example:
Hello <br />
World
<p>
paragraph paragraph paragraph
blank line
Syntax:
<p align=left|center|right|justify>
<p title=Paragraph 1> Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World </p>
<p title=Paragraph 2 align=center> Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World </p>
<p title=Paragraph 3 align=right> Hello World Hello World Hello World
<p title=Paragraph 4 align=justify> Hello World Hello World Hello World
Font

Syntax:
<font face=font-family size=n color=color-code | color-name>
face:
: Limon S1, Limon S2 font
font font
size:
1-7, -1 -7, +1 +7
1-7
+1 - +7 relative size 3 +3 actual size 6
<font size="5">Hello
<font size="+5">Wolrd!</font> from ITEC Center</font>
Bayon Hosting
Color:
color-code #rrggbb colorname red, blue, green
Text-Style
Text Style
Tag
bold
<b>,<strong>
italic
<i>,<em>
Underline
<u>,<ins>

strike
<strike>,<s>,<del>
big
<big>
small
<small>
superscript
subscript
<sup>
<sub>
Horizontal Rule

<hr size=n width=n,n% align=left|center|right noshade=noshade
color=color" />
<hr />
<hr noshade="noshade" />
<hr size="5" />
<hr size="5" width="50%" />
<hr align="right" width="50%" size="5" />
<blockquote>
element text blockquote
line
Syntax:
<blockquote cite=url> Someones statements, Passage </blockquote>
url: location online source document
Example:
Jim said:
<blockquote> I will go to Cambodia next month with his family. I will
visit my relative at the weekend.</blockquote>
Jim also dare his girl friend to come with too.
Bayon Hosting
<q>
q=quote element text quote
line element
Syntax:
<q cite=url> speech, short passage </q>

Example:
Jim said <q> He will come with his girl friend <q> Monica </q> next
week </q>.
Element Type
elements box Box
Inline Elements
elements elements box
content Inline elements <b>, <i>, <strike>, <s>, <del>, <ins>, <u>,
<strong>,<span>
Block Elements
elements elements box
contents parent elements
Block elements <p>, <blockquote>, <center>, <div>
<head>
<title>Untitled Document</title>
<style>
*{
border:1px solid;
}
</style>
</head>
<body>
Bayon Hosting
<p>
The paragraph is block elements so it's width will be equal to it's
container width is <body> and the follow elements width just it's
contents <strong> Strong Text </strong>, <em> Emphasis Text </em>, <del>
deleted Text </del>.
</p>
<div> division tag will have it own line </div>
This <span> span </span> will be with other text
</body>
Divisions and Centering

div
<div> tag block element pre-style document, align content,
apply style sheets
Syntax:
<div align="left|right|center|justify">
Affected Content
</div>
Example:
<div align=right> 1<sup>st</sup>, January 2008 </div>
<center>
element align content
<div align="center">
element
Syntax:
<center> Affected Content </center>
Example:
<center> This text will be center </center>
Special Character
character browser HTML page
special character <,>,,

< : <
>: >
: ®
Bayon Hosting
: ©
Preformatted Text
<pre>
element
text
<p> here is the javascript example</p>
<pre>
<script type=text/javascript>
document.write(Hello, World!)
</script>
</pre>
Phrase Element
<code>
document program statment, keywords...
<P> declare a variable in JavaScript with the <CODE>var</CODE> keyword.</P>
<samp>
element text output computer program script
<P>When you click on its, you will see <SAMP>Hello, world!</SAMP>on the
screen.</P>
<var>
element text varaible computer program
<p> the value of <var> iNum </var> will be 20 </p>
<kbd>
element text user keyboard text field.
<P>If you agree with answer, type <KBD>YES</KBD> into the text box.</P>
<abbr>

title attribute search engine, screen reader
Syntax:
<abbr title=Full Words> abbreviation word </abbr>
Example:
Hello <abbr title=Doctor> Dr. </br> Ann Michel.
<acronym>
abbr acronym
Many technologies were founded in <abbr title=United State of

America> USA </abbr>.
<address>
page authors contact information
Syntax:
<address> Address Info </address>
Bayon Hosting
Example:
<address>
<P>Send comments to: titdara@hotmail.com
</P>
</ADDRESS>
<bdo>
bdo=BiDirectional Override
text dir attribute
Syntax:
<bdo dir=rtl|ltr> Affected Content </bdo>
Exampe:
<bdo dir=rtl> Hello World! </bdo>
<cite>
cite=citation

reference content
Syntax:
<cite> Reference Info </cite>
Example:
<P>Angkor waw built in 1113(<CITE>Khmer History Books</CITE>)</P>
<dfn>
dfn=definition

document
Syntax:
<dfn> definition term </dfn>

Example
The new version of Microsoft Windows that has high security and go a
head of other Windows edition is <dfn> Microsoft Window Vista Ultimate
</dfn>.
Comment

Browser
HTML
Syntax:

Choosing Default Font

font information element basefont element
base font head body document basefont element
base font document
Syntax:
<basefont
color="color"
face="font family"
size="1-7"
/>
Hello
<basefont face="courier new" size="5" color="#000099" />
Hello World!
10
<basefont face="Georgia" size="6" />

Hello World!
<body>
Syntax:
<body background= background
bgcolor= background
bgproperties=fixed background scroll
text=
leftmargin= content browser
topmargin= content browser
link= link
alink= link
vlink= link
>
Internet Explorer :
leftmargin margin
topmargin margin
Fire Fox
leftmargin margin
rightmargin margin
topmargin margin
bottommargin margin
marginheight margin
marginwidth margin
<body background="images/bg103.gif" bgcolor=gray" bgproperties=""

topmargin="200" leftmargin="200" text="#996633">
Hello
<basefont face="courier new" size="5" color="#000099" />
Hello World!
<basefont face="Georgia" size="6" />
Hello World!
</body>
</html>
URL
URL: Uniform Resource Locator
file URL
Bayon Hosting
11
Bayon Hosting
Absolute URL
Absolute URL: scheme (protocol), Server Name, path
Example:
http://www.microsoft.com/mcp/login/login.aspx
scheme
server name
path to file
http://www.microsoft.com:8080/mcp/login/login.aspx
scheme
server name
port
path to file
Protocols
ftp: File Transfer Protocol

http: HyperText Transfer Protocol
https: HyperText Transfer Protocol Secure
mailto: SMTP Protocol Simple Mail Transfer Protocol
file: Local file
80 for http
443 for https
21 for ftp
Port
Relative URL
file current file folder
index.html folder products access file
manufacturer.html url="manufacturer.html"
global.js url = "javascript/global.js"
1.jpg url = "../images/1.jpg
Site Relative URL

file root folder site
12
Bayon Hosting
root folder site URL index.html folder products access

file
manufacturer.html url = "/products/manufacturer.html"

global.js url= "/products/javascript/global.js"
1.jpg url = "/images/1.jpg"
13
Module 2: Images
Bayon Hosting
Module 2: Images
Syntax
<img
src=url
Border=n
Alt=alternate text
Width=x,x%
Height=x,x%
align=left,right
Hspace=x
Vspace=x
longdesc=url
/>
Attribute Name
Src:
Description
Alt
Alternate Text mouse
Source
load
Border:
border pixels
Width=x
pixels
Height=x
pixels
Align=[left|right]
wrap( )
Hspace=x
(Horizotal Space) elements

pixel
Vspace=x
(Vertical Space) elements

pixel
Inserting an Image on a Page

<img
src=angkor.jpg
Border=1
Alt=Angkor Picture, North East at the Enter side
/>
Wrapping Text Around Images

<img
/>
src=angkor.jpg
border=1
alt=Angkor Picture, North East at the Enter side
align=left
14
Module 2: Images
Bayon Hosting
Stopping Text Wrapping

Syntax:
<br clear=left|right|all />
Attribute Name
left
Description
right
all
<img> for Video

<img
dynsrc="sound and video file path"

start="fileopen|mousever"
control="controls"
loop="playcount|-1 for unlimit"
lowsrc="low image download and show before src img"
15
Module 3: Lists
Bayon Hosting
Module 3: Lists
Order Lists
<ol type=1|i|I|a|A start=n>
<li type="1|i|I|a|A" value="n"> List Item </li>
</ol>
Example 1:
<p>HTML Lesson:</p>
<ol>
<li>Lesson 1: HTML Basic</li>
<li>Lesson 2: Images</li>
<li>Lesson 3: Lists</li>
</ol>
Example 2:
<p>HTML Lesson:</p>
<ol type="I" start="10">
<li>HTML Basic</li>
<li>Images</li>
<li>Lists</li>
</ol>
Example 3:
<p>HTML Lesson:</p>
<ol type="I">
<li>HTML Basic</li>
<li type="i">Images</li>
<li type="a" value="5">Lists</li>
</ol>
Unorder Lists
list bulletin circle, disc, square
Syntax:
16
Module 3: Lists
<ul type=disc|circle|square />

<li type=disc|circle|square> List Item 1</li>
</ul>
Example 1:
<h1>Food Type:</h1>
<ul>
<li>Fruit</li>
<li>Vegetable</li>
<li>Meat</li>
</ul>
Example 2:
<h1>Food Type:</h1>
<ul>
<li>Fruit</li>
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
<li>Vegetable</li>
<ul>
<li>Salad</li>
<li>Cabbage<li>
</ul>
<li>Meat</li>
<ul>
<li>Beef</li>
<li>Pork</li>
</ul>
</ul>
Definition Lists
definition list document dl, dt, dd list tag dl
Syntax:
<dl>
<dt> Defintion Term</dt>
<dd> Defition Data </dd>
<dt> Defition Term</dt>
Bayon Hosting
17
Module 3: Lists
<dd> Defition Data </dd>
</dl>
DL: Definition List
DT: Definition Term
DD: Definition Data
Example:
<h1>Definition List</h1>
<dl>
<dt>dl</dt>
<dd>Definition List</dd>
<dt>dt</dt>
<dd>Definition Term</dd>
<dt>dd</dt>
<dd>Definition Data</dd>
</dl>
Bayon Hosting
18
Module 4: Links
Bayon Hosting
Module 4: Links
Links WWW.
page page movie song, download files, e-mail

link destination, label, target
destination URL
user link
link page link
web pages
label link user
destination
label text
Creating a Link to another Web Page

Syntax:
<a href=url target=window_name> Label_Text</a>

page link page page
connetion web page server internet
Targeting Links to Specific Window

<a href=url target=target_option> Label Text </a>
target_option
window_name
Description
_blank
page browser window
_self
_parent
_top
browser window page link

page browser window link
page parent frameset
page top frameset
Setting Default Target

<base target=target_option href=default_path>
Attribute Name
Attribute Value
Target
browser window page
19
Module 4: Links
href
Bayon Hosting
default abosolute url destination
Creating Anchors
anchor
page
anchor
anchor link link anchor
Create an anchors
<a name=anchor_name></a>
Create a link to anchors

page
<a href=#anchor_name> Label Text </a>
page
<a href=file_name.html#anchor_name> Label Text </a>
Keyborad Shortcuts for links

<a href=URL accesskey=char> Label Text </a>
shortcut link
link user ALT key key
Using images to Label Links

label link
<a href=url > <img src=url /></a>
Images Maps

image map
<img> tag usemap attribute

<img src=image file usemap=#map_name />

map usemap attribute pound sign
<map> tag
<map> tag
<map name=map_name />

<area> tag
<area shape=rect|circle|poly|default
cords=coordinate
href=URL|nohref
target=target_option
accesskey=character
/>
cords shape
20
Module 4: Links
Bayon Hosting
shape=rect cords=left,top,right,bottom
shape=circle cords= x,y,r
shape=poly cords= x1,y1,x2,y2,
shape=default cords
Changing the Color of Links

link attribute <body>
<body
link=color
alink=color
vlink=color
> </body>
link
link
vlink

alink
download
21
Module 5: Tables
Module 5: Tables
Tables rows cell HTML table
Creating a Simple Table

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>: table
<tr>: row table
<td><th>: cell table <th>
Example:
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
Bayon Hosting
22
Module 5: Tables
Adding a Border
<table border=n>
</table>
Example:
<table border=1>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
Bayon Hosting
23
Module 5: Tables
Setting the Table Width

<table border=1 width=N|N%>
</table>
Example:
<table border=10 width=50%>
</table>
Setting the Width for individual Cell

<table border=1>
<tr>
<td width=200>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
Centering a Table on the Page

<table border=1 align=center>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
Bayon Hosting
24
Module 5: Tables
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
Wrapping text around a Table

image attribute align wrapping
table
Syntax:
<table align=left|right>
</table>
Spanning Cell Across Columns and Rows

span cell row columns
Syntax:
<td colspan=n rowspan=n></td>
Example:
<table border="1">
<tr>
<td>no span </td>
<td>no span </td>
<td>no span </td>
</tr>
<tr>
<td rowspan="2">row span </td>
<td colspan="2">col span </td>
</tr>
<tr>
<td colspan="2">row and col span </td>
</tr>
<tr>
<td>no span </td>
<td>no span </td>
<td>no span </td>
</tr>
</table>
Bayon Hosting
25
Module 5: Tables
Bayon Hosting
Aligning a Cells Contents

Syntax:
cell attribute align

cell
<td
align=left|right|center|justify
valign=top|middle|bottom|baseline
>
row
<tr
>
Deviding Table into Column Groups (for IE only)
Table columns apply format cell
table Structural Non-Structural colgroup col
apply format column (groups column) cell
colgroup col colgroup control line rule

Syntax: colgroup
<colgroup
span=n
width=n
>
</colgroup>
Syntax: col
<col
span=n
26
Module 5: Tables
Bayon Hosting
width=n
/>
Example
<table border="1">
<colgroup align="right" width="200"></colgroup>
<colgroup span="3">
<col span="2" align="center" width="100" />
<col align="left" width="150" />
</colgroup>
<tr>
<th><br /></th>
<th>Kits</th>
<th>Adults</th>
<th>Total</th>
</tr>
<tr>
<th>Hawley</th>
<td>2</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<th>Becket</th>
<td>5</td>
<td>22</td>
<td>27</td>
</tr>
<tr>
<th>Worthington</th>
<td>7</td>
<td>5</td>
<td>12</td>
</tr>
</table>
Dividing Table into Horizontal Sections (for IE only)
table format
27
Module 5: Tables
row
table
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
Example:
<table border="1">
<thead style="background:green">
<tr>
<th><br /></th>
<th>Kits</th>
<th>Adults</th>
</tr>
</thead>
<tbody style="background:yellow">
<tr>
<th>Hawley</th>
<td>2</td>
<td>4</td>
</tr>
<tr>
<th>Becket</th>
<td>5</td>
<td>22</td>
</tr>
<tr>
<td>7</td>
<td>5</td>
</tr>
</tbody>
<tfoot style="background:blue">
<tr>
<th>total</th>
<td>14</td>
<td>29</td>
</tr>
</tfoot>
</table>
Bayon Hosting
28
Module 5: Tables
Choosing Which Border to Display

external internal table border
<table
border=n
frame=location
rulers=area
></table>
location
void: border
above: border
below: border
hsides:
vsides:
lhs:
rhs:
box, border:
area
none:
rows: row table

cols: column table
groups: table thead, tbody, tfoot

all: cell
<table border="1" rules="all" frame="hsides">

<caption a>Fox Sighting in Westearn</caption>
<thead>
<tr>
<th><br /></th>
<th>Kits</th>
<th>Adults</th>
</tr>
</thead>
<tbody>
<tr>
<th>Hawley</th>
<td>2</td>
<td>4</td>
</tr>
<tr>
<th>Becket</th>
<td>5</td>
<td>22</td>
</tr>
<tr>
<td>7</td>
<td>5</td>
</tr>
</tbody>
Bayon Hosting
29
Module 5: Tables
Bayon Hosting
<tfoot>
<tr>
<th>total</th>
<td>14</td>
<td>29</td>
</tr>
</tfoot>
</table>
Controlling Line Break in a Cell

browser cell attribute nowrap browser

<td nowrap=nowrap></td>
<th nowrap=nowrap></td>
30
Module 6: Frames
Bayon Hosting
Module 6: Frames
Frame user page Frame web
page window
Creating a Simple Frameset

Frameset window pane
panes border pane

scrollbar
window
file pane pane
frame
<frameset
rows=r1,r2
cols=c1,c2
>
<frame src=url name=frame_name>
<frame src=url name=frame_name>
</frameset>
Key
Description
frameset
browser window row column
rows
rows pane
cols
rows pane
r1,r2
row pixel %
c1,c2
col pixel %
<frame>
frame
src
file
frame
name
frame
target link
<frameset rows="100,*">
<frame src="banner.html" />
<frame src="content.html" />
</frameset>
31
Module 6: Frames
Bayon Hosting
<frame src=banner.html />
<frame src=content.html />
Combining Frameset
frameset frameset frameset
frame
Example:
<frameset rows="100,*">
<frame src="banner.html" name="banner" />
<frameset cols="150,*">
<frame src="sidebar.html" name="sidebar" />
<frame src="content.html" name="content" />
</frameset>
</frameset>
32
Module 6: Frames
Bayon Hosting
<frame src=banner.html />

<frame src=sidebar.html />
<frame src=content.html />
Frame Attributes
frame attributes
Attribute
marginwidth:
Description
marginheight
frame pixel
frameborder=0| 1|
yes| no
frame border
bordercolor
border frame
scrolling =
auto|yes|no
noresize =
noresize
scrollbar frame
frame pixel
user frame
frameset attribute
Attribute
frameborder=0| 1|
yes| no
Description
border
border frame
bordercolor
border frame
frame border
Example:
<frameset rows="100,*" bordercolor="#FF9900">
33
Module 6: Frames
<frame src="banner.html" name="banner" noresize="noresize" />

<frameset cols="150,*" border="0">
<frame src="content.html" name="content" marginheight="40"
marginwidth="10" scrolling="no"/>
</frameset>
</frameset>
<noframe>...</noframe>
browser support frameset <noframe> tag
user browser support

Syntax:
<noframe>
</noframe>
Example:
<frameset rows="100,*" bordercolor="#FF9900">
<frame src="banner.html" name="banner" noresize="noresize" />
<frameset cols="150,*" border="0">
<frame src="content.html" name="content" marginheight="40"
marginwidth="10" scrolling="no"/>
</frameset>
</frameset>
<noframes> You need a frame-capable browser.</noframes>
Bayon Hosting
34
Module 7: Forms
Bayon Hosting
Module 7: Forms
form element

Form
Structure or Shell: form field textbox,

label, button user
page user
Processing script: server-side script

form
database
form form element textbox, radio buttons, checkboxes, drop-down menus, text
areas, button field name attribute
process
Creating a Form
Forms
form tag url server-script file process form data
form elements menu
Submit button send server
Syntax:
<form method=post|get action=url>
...
</form>
Method post get get method

security
Creating a Text Box

Syntax:
text box text

<input
>
Attribute
type=text
type=text
name=text_box_name
value=default_value
size=n
maxlength=n
Description
text box
35
Module 7: Forms
Bayon Hosting
name
form element
value
text box page
size
textbox
maxlength
<form action="register.php" method="post">

Name:<input type="text" name="txtName" size="15" maxlength="20"
value="Type your name" />
</form>
Name:
Creating a Password Field

textbox <input> tag attribute textbox
type attribute password text
Password:<input type="password" name="txtName" size="15"
maxlength="20" value="Type your name" />
</form>
Password:
Creating a Text Area

Text area textbox <input> tag
<textarea> tag
Syntax:
<textarea
name=fieldname
rows=n
cols=n
wrap=wrap
readonly=readonly
>
Default Text to view
</textarea>
Description
Attribute
name
form element
rows
cols
textarea
wrap= off | soft |

physical | virtual
| hard
off wrap textarea

soft,physical,virtual wrap textarea
server-side process
hard soft server-side process
36
Module 7: Forms
Bayon Hosting
readonly
user text area

Any Comments:<br />
<textarea cols="38" rows="5" name="comments"> Type your comments here
</textarea>
</form>
Create radio buttons

Syntax:
radio button user

<input
type=radio
name=fieldname
value=fieldvalue
checked=checked
/>
checked
default
value
user radio button
Gender:
<input type="radio" value="male" name="sex" checked="checked" />Male
<input type="radio" value="female" name="sex" checked="checked"
/>Female
</form>
Create checkboxs
Syntax:
checkbox user
<input
type=checkbox
name=fieldname
value=fieldvalue
checked=checked
/>
checked
default
value
user radio button
Example:
Your habbit:<br />
<input type="checkbox" value="football" name="sex" checked="checked"
/>Play Football<br />
<input type="checkbox" value="tennis" name="sex" />Play Tennis<br />
37
Module 7: Forms
Bayon Hosting
<input type="checkbox" value="game" name="sex" />Play Video Game<br />

<input type="checkbox" value="watching" name="sex" checked="checked"
/>Watch Televsion<br />
<input type="checkbox" value="reading" name="sex" />Read books
</form>
Result:
Creating a select menu

Menu drop-down list user
Syntax:
<select name=fieldname size=n multiple=multiple>
<option value=value1 selected=selected> Text</option>
<option value=value2 selected=selected> Text</option>
...
</select>
Attributes <select>
size:
multiple: user (ctrl)
Attributes <option>
value: option
text: option
Vegetable and Foods
<select name="item" multiple="multiple" size="5">
<option value="tomato">tomato</option>
<option value="cucumeber"
selected="selected">Cucumbers</option>
<option value="Lemons">Lemons</option>
<option value="mango" selected="selected">Mango</option>
<option value="apple">Apple</option>
<option value="lichee">Lichee</option>
</select>
</form>
38
Module 7: Forms
Bayon Hosting
<optgroup> tag
<optgroup>

About your favorite food:
<select name="item">
<optgroup label="vegtype">
<option value="tomato">tomato</option>
<option value="cucumeber">Cucumbers</option>
<option value="Lemons">Lemons</option>
</optgroup>
<optgroup label="fruittype">
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="lichee">Lichee</option>
</optgroup>
</select>
</form>
Creating File Uploading field

<form
method=post
action=register.php
enctype=multipart/form-data
>
<input
type=file
name=fieldname
size=n
/>
</form>
size=n: file field character
get method upload file
Example:
39
Module 7: Forms
Bayon Hosting
<form method="post" enctype="multipart/form-data">

<input type="file" name="upFile" size="40" />
</form>
Create a Hidden field

Hidden field field browser window visitor

Hidden
form form
form
<input
type=hidden
name=fieldname
value=field value
/>
Create a Submit Button

Submit button visitor server-side script attribute
action form
submit button form user

<input
type=submit
name=fieldname
value=Submit
>
Using button tag

button type attribute submit button, reset button.

button
<button>
Text or Image as the button label
</button>
Example:
<form method="post" action="register.php">
<button type="submit"><img src="bullet001.gif"/> Submit </button>
</form>
Result:
40
Module 7: Forms
Bayon Hosting
Organizing the Form Elements

Using Fieldset and Legend tag
fieldset group form element
border
<legend> tag
<fieldset>
<legend align=top|bottom|left|right> Title</legend>
</fieldset>
Tab Order
Tab order field focus user tab key
field field
tabindex=n attribute n
focus
Example:
<fieldset>
<legend align="center"> User Info </legend>
User Name:<br />
<input type="text" name="txtName" tabindex="1" /><br />
Password:<br />
<input type="password" name="txtPassword" tabindex="2" />
</fieldset>
</form>
Keyboard Shortcut
alt + key field
attribute accesskey=character character a-z 09
Example:
<fieldset>
User <u>N</u>ame:<br />
<input type="text" name="txtName" tabindex="1" accesskey="n" /><br />
Pass<u>w</u>ord:<br />
<input type="password" name="txtPassword" tabindex="2" accesskey="w" />
41
Module 7: Forms
Bayon Hosting
</fieldset>
</form>
Result:
Using disabled and readonly

disabled: textbox field cursor
readonly:
Exampe:
<fieldset>
User <u>N</u>ame:<br />
<input type="text" name="txtName" tabindex="1" accesskey="n"
disabled="disabled" value="Hello" /><br />
Pass<u>w</u>ord:<br />
<input type="password" name="txtPassword" tabindex="2" accesskey="w"
readonly="readonly" value="Hello" />
</fieldset>
</form>
42
Module 8: Multimedia
Bayon Hosting
Sound
sound
web
Extension
.aiff
Description
.au
Miro-Law
Sun Microsystems computer
Audio-Interchange File Format Computer Apple

MIDI-Musical Instrument Digital Interface ( protocol
.mi

.ra, .ram
Real Audio Real Networds sound played sound

file download
.wav
Microsoft Windows
Embedding Sound in a Page

Syntax:
<embed
src=sound url
controls=form
height=n
width=n
autostart=true|false
loop=n|true
align=left|center|right
/>
controls="form"
form
console, small console, playbutton, pausebutton, stopbutton, volumelever
loop="n|true" n
repeat true repeat
<embed src="a.mp3" autostart="false" loop="true" />
Adding a link to a sound

<a href="a.mp3">Click here to play the sound</a>
link associated play file link
Adding background Sound

Syntax:
<bgsound src=url loop=n />
43
Bayon Hosting
loop:
play file -1
Video
video
web
Description
Quick Time Movie
MPEG Movie
Audio-Video Interleaved
Extension
.mov, .qt
.mpeg, .mpg
.avi
Embedding Internal Video

Syntax:
<embed
src=video url
controls=form
height=n
width=n
autostart=true|false
loop=n|true
align=left|center|right
/>
controls="form"
form
console, small console, playbutton, pausebutton, stopbutton, volumelever
loop="n|true" n
repeat true repeat
<embed src="vdo.mpg" width="320" height="240" />
Marquee
Marquee element child element
Syntax:
<marquee
behavior=alternate|slide|alternate
direction=left|right
loop=n|infinite|-1
scrollamound=n
scrolldelay=n
44
Bayon Hosting
width=n
height=n
hspace=n
vspace=n
align=left|right
bgcolor=color
>
Scrolling Text
</marquee>
Attribute
behavior
Description
alternate:
scroll:
slide:
direction
loop
scrollamount
pixel
scrolldelay
miliseconds
width, height
hspace,
vspace
align
element
bgcolor
background
element wrap
45
Module 9: Getting People to Visit
Bayon Hosting

web pages web pages
resources web search engines web
WebMonkey Paul Boutin
(hotwired.lycos.com/webmonkey/01/23/index1a.html) www.hotwired.com/webmonkey/99/31/index1a.html
site searchenginewatch.com Danny Sulivan
search engine optimization
About Keywords
visitors search engines keywords
keyword page
page search
engines page
keywords
keywords title
keywords headers
content page topic

keywords
keywords meta tag
keywords alt image tag
46
Bayon Hosting
page Barcelonas Market title, h1, src, alt content p tag
header gif file keywords search engines

text key word alt
attribute img tag
keywors
keywords seach engine spamming

seach
47
Bayon Hosting
keyword
Explicitly Listing Keywords

search engines page
keywords
1. head page <meta name="keywords" content="
2. topic page
comma space
3. tag />
search engine
keywords meta tag
48
Bayon Hosting
goolge keywords
meta tag

keywords content page
content page
keyword spell

search visitor

frames keyword frame frameset
49
Bayon Hosting
Providing a Description of Your Page

Search Engines visitor page
url search engines

page
page summary
1. head <meta name="description" content="
2. page
visitor link
3. " /> meta tag.
page frames description frame page

frameset
visitor
list links keyword description page
page
Google description
meta tag
visitors keyword context page
50
Bayon Hosting
Yahoo description
description meta tag
content page
Controlling Other Information

page
HTML Code copyright
page
1. head page <meta name="author" content="name" />

name HTML Code
2. head page <meta name="generator" content="program"
/> program HTML Code
3.
head page <meta name="copyright" content="©year

holder" /> year holder
copyright page HTML Code
51
Bayon Hosting
Generator web page editor

Keeping Visitors Away

Search engines robots or spiders web
page engines index search engine page

page
page search engine robot

page
search engine robot page
1. head <meta name="robots" content=".
2. page index noindex
3. robot links page index page nofollow
4. />
search engins robot page page page link
52
, comma space
page page index
Bayon Hosting
link page site submit search

engine
page index search engine website

Remove URL page
all index robot page link search

engine index default
()
Keeping Pages From Being Archived

Search engines copy web page cache cache version
up to date robot archive
head <meta name="robots" content="noarchive" />
Google search engine archive web page
Google archive page
googlebot robots
name attribute
Search engines Google a copy page index visitor
page page
53
robot search engine page index page

archive cached version visitor
Bayon Hosting
54
Bayon Hosting
Creating a Site map Manually

Search engines submit url follow link
index site site map
links site submit map search engine

page index
1. Bookmarks Favorites Folder

2. Web page site search engine
3. page Folder
4. Export Bookmarks Favorites file
5. file texteditor remove bookmarks site file
site map
6. Upload file Server
7. Submit site map search engine
Browser Firefox opera tools adding bookmarks

export file
Googles Sitemap Generator Tool site map
55
Bayon Hosting
Using Google Sitemaps

Google tool site indexed
sitemap protocol, XML
URLs site
Sitemap Generator Python run site
site map Googles sitemap list site directories sites access
logs, URL site
56
Bayon Hosting
Google tool diagnostic statistical Google Sitemaps
rank rank 20
Google Sitemaps sitemap protocol Sitemap

Generator www.google.com/webmasters/sitemaps/docs/en/about.html
www.google.com/webmasters/sitemaps/docs/en/sitemapgenerator.html
Submitting Your Site to a Search Engin

keywords meta tag page
site site map page search
engine visit site page database
submit search engine:
1. connect search engine
2. Add URL
3. Google http://www.google.com/addurl.html
57
Bayon Hosting
yahoo http://docs.yahoo.com/info/suggest/
4. sitemap url page url text box submit
search engine 2 search site
submit
The most popular general search engines are Google and Yahoo. Also see
http://www.useit.com/about/searchreferrals.html.
You might also want to register your site with a search engine that specializes in a
particular topic. For a list of such engines, see
http://searchenginewatch.com/links/article.php/2156351
58
Bayon Hosting
Improving Your Ranking By Getting Linked

user search
page

page
page link site link
site page page high rank
improve rank link
site content link web site
web rings site content
link site content
submit site search engine

domain link page Search engine
link authoritative, high-traffic sites topic link less

authoritative, less visited site
link web link:yourdomain.com

google
link keywords page

page keyword page
Other Techniques for Publishing Your Site

site
visitor
people page
add your url signature outgoing email

URL
blog , substantive,
topic site link web site

blocg
59
Bayon Hosting
web ring. Web ring web pages

links site Web ring visitor site
site
web ring link site
url web site stationery, business cards, pamphlets promotional material

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML & xHTML

Module 1: HTML Basic

Module 1: HTML Basic

How to Create HTML File

Notepad, Wordpad, Dreamweaver, Frontpage

Save As Type: select All Files

file extension .html

Module 1: HTML Basic

1 character spcae HTML White space

Module 1: HTML Basic

id: element document id

title: tooltip mouse

dir: direction text ltr(left to right), rtl(right to left)

lang: attribute content element browser

), quotation marks, and hyphenation

Core Event Attribute

<h1 align = "center"> Hello World! </h1>

Module 1: HTML Basic

Module 1: HTML Basic

Module 1: HTML Basic

<q cite=url> speech, short passage </q>

Module 1: HTML Basic

Divisions and Centering

special character <,>,,

Module 1: HTML Basic

Many technologies were founded in <abbr title=United State of

Module 1: HTML Basic

<dfn> definition term </dfn>

Choosing Default Font

Module 1: HTML Basic

<basefont face="Georgia" size="6" />

<body background="images/bg103.gif" bgcolor=gray" bgproperties=""

Module 1: HTML Basic

ftp: File Transfer Protocol

index.html folder products access file

Site Relative URL

Module 1: HTML Basic

root folder site URL index.html folder products access

manufacturer.html url = "/products/manufacturer.html"

Alternate Text mouse

(Horizotal Space) elements

(Vertical Space) elements

Inserting an Image on a Page

Wrapping Text Around Images

Stopping Text Wrapping

<img> for Video

dynsrc="sound and video file path"

<ul type=disc|circle|square />

<dd> Defition Data </dd>

page page movie song, download files, e-mail

link destination, label, target

label link user

Creating a Link to another Web Page

<a href=url target=window_name> Label_Text</a>

connetion web page server internet

Targeting Links to Specific Window

page browser window

browser window page link

Setting Default Target

default abosolute url destination

anchor link link anchor

Create a link to anchors

Keyborad Shortcuts for links

link user ALT key key