HTML

HTML
2000/9/14
mubarmej :
HTML HyperText Markup Language

.
HTML ) (Plain Text html.

Notepad pico SimpleText
.HTML
Explorer Internet Netscape Navigator

.
Internet
Explorer Microsoft HTML 4.0 CSS XML Netscape Navigator
Sindbad
Navigator Netscape Explorer 5.0 Internet

.
Netscape Navigator 4.72 Sindbad 4.51

Navigator
.. HTML
HTML HTML HTML
.
HTML :
: .
: .
.. HTML
HTML is a <b>Great</b> Language
..
HTML is a Great Language
HTML HTML is a Great Language

> < b ) bold(
) ( /
..
..
HTML .
Great Font Font
Great ..
HTML is a <font color="red">Great</font> Language
..
HTML is a Great Language

> < =""
color font red
..
HTML is a <font color="red" size="+1">Great</font> Language
..
Great Language
HTML is a
.. HTML
HTML HTML > <b >.<B
) " ( ) ' (
.
HTML
tab .
>! -- <-- .
HTML
HTML :
: Head
.
: Body .
.. HTML
><html
><head
...
></head
><body
...
></body
></html
> <head > <head/
> <body >. <body/
> <title > <title/ > <title
title
.title
meta
.
.body

.. h6 h2 h1
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
P
<p>Paragraph Text </p>
P align
<p align="left">Left aligned paragraph </p>
<p align="center">Centered paragraph </p>
<p align="right">Right aligned paragraph </p>
a href html :http

ftp :ftp :mailto
.
><a href="http://www.microsoft.com/">Microsoft Corp .</a><br
><a href="mailto:mubarmej@hotmail.com">My E-mail</a
a name ) href (
> <""=a name href name
# > <a/><"a name="myname
><"a href="#myname> <a/ )
( ><"a href="salem.html#myname
>.<a/
top# .href
>. <br
&) ;nbsp (
pre
> <pre >. <pre/
> <center ><center/
Font
font
.
font face
><font face="verdana">Verdana Text </font><br
><font face="Courier New">Courier New Text </font
color ) (
>This is <font color="red">Red</font

>and this is <font color="blue">Blue</font
size
font size
3 4 7 1
3 +
7 7
.1
><font size="+4">Size 7</font><br
><font size="0">Size 3</font><br
><font size="-1">Size 2</font><br
><font size="-2">Size 1</font><br
> <big ><small

><big>size 4</big><br
><small>size 2</small><br
><big><big>size 5</big></big><br
relative
size + -

><font size="1">Size 1</font

> <basefont
) (
Verdana 3
>"<basefont color ="Green" size="3" face="Verdana
HTML .
b strong i em tt

><b>This</b> is Bold Text and <strong>this</strong> to!<br
>but <i>This</i> is Italic Text and <em>this</em> to!<br
And <tt>This</tt> is Typewriter Text
hr width width 10 293

%20 %85 size
color noshade

This is the First Line
><hr
This is the Secound Line
>"<hr color="Purple
This is the Third Line
>"<hr width="30%
This is the Fourth Line
>"<hr noshade size ="40
> <body
bgcolor background text link vlink alink
topmargin buttommargin leftmargin .rightmargin
"<body alink="red" link="yellow" vlink="blue
>"bgcolor="black" text="white" topmargin="0
>This is some Text .<br
>And here are some links :<br
><a href="http://www.download.com/">Great Downloads </a><br
><a href="mailto:bgates@hotmail.com">Bill Gates!?</a><br
><a href="http://www.msn.com/">Microsft Network </a><br
><a href="http://www.hotmail.com">Free E-mail</a
></body
HTML

0 255 ) ( ) (Red,Green,Blue rgb
)rgb(R,G,B
R G B
255 ff
00 RRGGBB# .. #

.Windows
16.5 256
216
216
.
141
:
..
>"<font size="+1
><font color="Khaki"> Sample 1 </font><br
><font color="#0066cc"> Sample 2 </font><br
><font color="rgb(204,112,202)"> Sample 3 </font><br
></font

HTML

.HTML
jpg ) gif (.
HTML
HTML .

http://www.microsoft.com/ie/default.asp href download.html
http://www.microsoft.com/ie/download.html href download/english.html
http://www.microsoft.com/ie/download/english.html href
) ( /
) ( .. href windwos.html/..
http://www.microsoft.com/windwos.html /ie /
/http://www.ayna.com .

HTML IMG ) (
src .
>"<img src="/images/sample.gif
width height

.
"<img src="/images/sample.gif
>width=73 height=68><br><br
"<img src="/images/sample.gif
>width=200 height=100
align
HTML align
..
: bottom, baseline, absbottom .

>"<img src="/images/sample.gif" align="bottom
: left .
>"<img src="/images/sample.gif" align="left
: middle, absmiddle .
>"<img src="/images/sample.gif" align="middle
: right .
>"<img src="/images/sample.gif" align="right
: top, texttop .
>"<img src="/images/sample.gif" align="right
border 0
border
"border="0
.
>"<a href="http://www.microsoft.com/
><img src="/images/sample.gif"></a><br
>"<a href="http://www.microsoft.com/
><img src="/images/sample.gif" border="0"></a><br
>"<img src="/images/sample.gif" border="3
.hspace
alt alt
ToolTip .

Hot Spots
.
usemap
.

)(

map name
map area shape
href coords :
: circle ) x, y,
.(radius
: rect
).(x1, y1, x2, y2
: poly
).(x1, y1, x2, y2, .. xn, yn

.
Adobe Photoshop . Paint Shop Pro
:
>"<img src="/images/sample2.gif" usemap="#mymap
>"<map name="mymap
"<area shape="rect" href="http://www.jokes.com/
>"coords="6,10,67,44
"<area shape="circle" href="http://www.story.com/
>"coords="121,93,27
"<area shape="poly" href="http://www.download.com/
coords="37,90,73,105,59,129,15,129,4,105 ">
</map>

alt shape border
.shape alt
<img src="/images/sample2.gif" usemap="#mymap" border="0">
<map name="mymap">
<area shape="rect" href="http://www.jokes.com/"
coords="6,10,67,44"
border="0" alt="Be Happy">
<area shape="circle" href="http://www.story.com/"
coords="121,93,27"
border="0" alt="Enjoy!">
<area shape="poly" href="http://www.download.com/"
coords="37,90,73,105,59,129,15,129,4,105 "
border="0" alt="Best Downloads ">
</map>

HTML ) (
.
ol ul li
type :
.. ,4 ,3 ,2 ,1 : 1
.. ,a, b, c, d : a
.. ,A, B, C, D : A
.. ,i, ii, iii, iv : i
.. ,I, II, III, IV : I
:
: circle
o
: square
: disc
.
>"<ul type="circle
<li>Pepsi
<li>Crash
<li>7 Up
></ul
>"<ol type="I
)<li>Windows (85%
)<li>Linux (10%
)<li>Mac (3%
)<li>Other (2%
></ol
><ol
<li>American Companies
><ol
<li>Microsoft
<li>General Motors
></ol
<li>German Companies
><ol
<li>Dubian
<li>BMW
><ul
<li>6 Class
<li>7 Class
></ul
></ol
></ol

HTML
table tr td
border 0 .0
>"<table border ="1
><tr
<td>First Row - First Data
<td>First Row - Secound Data
></tr
><tr
<td>Secound Raw - First Data
<td>Secound Raw - Secound Data
></tr
></table
cellspacing
.cellpadding
>"<table cellspacing ="10" cellpadding="20" border="1
><tr
><td>First Cell</td
><td>Secound Cell</td
></tr
></table
width height
td .
>"<table width="100%" height="100%" border="1
><tr
<td width="100" height="40%">First Cell
<td width="100%" height="40%">Secound Cell
></tr
><tr
<td width="100" height="60%">First Cell
<td width="100%" height="60%">Secound Cell
></tr
></table
bgcolor background
td bgcolor
.
<table border ="1" background="sample.gif" width="90%" height="80%">

<tr>
<td bgcolor="Yellow">First Cell
<td>Secound Cell
</tr>
</table>
rigth left align valign align

bottom top valign justify center
. middle
<table border ="1" width="90%" height="80%">
<tr>
<td align="right" valign="bottom">First Cell
<td align="left" valign="top">Secound Cell
</tr>
</table>
td
.
<table width="95%" border="1">
<tr>
<td>First Table - First Cell
<td>
<table border ="1">
<tr>
<td>Secound Table - First Cell
<td>Secound Table - Secound Cell

</tr>
</table>
</tr>
<tr>
<td>
<table border ="1">
<tr>
<td>Third Table - First Cell
<td>Third Table - Secound Cell
</tr>
</table>
<td>First Table - Fourth Cell
</tr>
</table>
colspan rawspan
.td
<table border="1">
<tr>
<td rowspan="2" colspan="2">First Cell
<td>Secound Cell
<td>Third Cell
</tr>
<tr>
<td rowspan="3">Fourth Cell
<td colspan="2">Fifth Cell
</tr>
<tr>
<td>Sixth Cell
<td>Seventh Cell
<td>Eighth Cell
<td>Nineth Cell
</tr>
</table>

frames

.

.
frameset frame
src frameset frameset frameset
body frameset
cols ) ( ,

rows cols 100 %10
:
>"*<frameset cols="100,10%,
>"<frame src="sample1.html
></frameset
frameset frame
>"*<frameset rows ="50,
>"*<frameset cols ="100,
></frameset
></frameset
frameborder 0 1
framespacing
0 .
>"<frameset cols ="50%,*" frameborder="0" framespacing="0
></frameset
Scroll Bars scrolling yes

no auto .
>"<frame src="sample1.html" scrolling="no
>"<frame src="sample2.html" scrolling="yes
></frameset
></frameset
name
a target _ blank
_ top _ self ) ( _ parent
.
>--
sample4.html
<!--
"<a href="sample1.html
>target="_blank">Page 1</a><br
>target="_top">Page 3</a><br
>target="main">Page 2</a
>target="main">Page 4</a
>"<frame src="sample3.html" name="main
></frameset
></frameset

body HTML iframe src
name
width height

http
http http
http
name=mubarmej ) (name
) (mubarmej &
country=Kuwait&name=mubarmej name=mubarmej&country=Kuwait
url
url
) ( + States United
country=United+States&name=mubarmej
.
: .
http get post get

http://somewhere.com/script.cgi get
http://somewhere.com/script.cgi?name=mubarmej&country=United+States

get post
get
post )
( post get
) post
(.
) (http://somewhere.com/script.cgi ) get (post

) (submit

.HTML
form input form
action method post get
input type :
: Text .
: Button .
: Checkbox on .
: File .
: Hidden HTML
HTML .
: Image .
: Password
) * (.
: Radio .
: Reset .
: Submit .
form select
textarea select option
.

.
echo.pl action
echo.pl.
.
:
>"<form action="echo.pl
>First Name : <input type="text" name="first_name"><br
>Secound Name : <input type="text" name="secound_name"><br
<input type="radio" name="exact"> Exact Match
><input type="radio" name="all"> All Words<br
>"<input type="hidden" name="todo" value="search
>"<input type="submit" value="Search
></form
get post
) (echo.pl .

input type text
value size .
>"<form action="echo.pl" method="get
>Username <input type="text" size="20" name="username"><br
>Email <input type="text" size="40" name="email"><br
>URL <input type="text" size="40" name="url" value="http://"><br
>"<input type="submit
></form

input type checkbox
name value do=subscribe
name do value subscribe
.
hidden .
><input type="checkbox" name="do" value="subscribe"> Subscribe.<br
></form

input type radio
input name
value name
value .
>"<form action="echo.pl" action="get
>Age : <br
><input type="radio" name="age" value="17"> 10 - 17<br
>Gender : <br
<input type="radio" name="gender" value="male"> Male
><input type="radio" name="gender" value="female"> Female<br
></form
Male Female .name
select name
option value name select
value option .
>"<select name="country
<option value ="kw">Kuwait
<option value ="sa">Saudia
<option value ="ua">Emirates
<option value ="qt">Qatar
<option value ="bh">Bahrain
<option value ="om">Oman
></select
></form

Textarea textarea ) (
post .
rows ) cols (.
<form action="echo.pl" method="get">

<textarea name ="message" rows="6" cols="50">
This Text will appear inside the box !
WOW
It's working :)
</textarea><br>
<input type="submit">
</form>

meta
meta ! meta
meta
meta HTML head
.
meta name http-equiv meta name
http-equiv .
meta content name .http-equiv
keywords ) (
:
"<meta name="keywords" http-equiv="keywords
"=content,,,,,>"
.
name http-equiv :
: keywords .
: description .
: generator .
: author .
: content-type HTML
:
"<meta name="content-type" http-equiv="content-type
>"content="text/html; cahrset=windows-1256
: copyright .

.
windows-1256
Windows Windows 2000
Unicode Unix (Linux( .
meta content-type .
p align right

dir html rtl

Internet Explorer Netscape Navigator Sindbad
dir
.
>"<html dir="rtl
HTML
HTML Web Developing

.

Casscading Style Sheet CSS
H1 Font H1

HTML CSS

/http://www.w3.org/Style/CSS :

eXtensible Markup Language XML
CSS h6

h6 !

XML XML /http://www.w3.org/XML :

) (

/http://javascript.internet.com
./http://www.dynamicdrive.com

Common Gateway Interface CGI
CGI Perl
CGI
PHP
ASP NT UNIX
Perl /http://www.perl.com : PHP /http://www.php.net

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

HTML HyperText Markup Language

HTML ) (Plain Text html.

Navigator Netscape Explorer 5.0 Internet

Netscape Navigator 4.72 Sindbad 4.51

HTML HTML is a Great Language

HTML HTML > <b >.<B

a href html :http

>This is <font color="red">Red</font

> <big ><small

><font size="5">Size 5</font><br

hr width width 10 293

: bottom, baseline, absbottom .

<table border ="1" background="sample.gif" width="90%" height="80%">

rigth left align valign align

<td>Secound Table - Secound Cell

Scroll Bars scrolling yes

) (http://somewhere.com/script.cgi ) get (post

Male Female .name

<form action="echo.pl" method="get">

"<meta name="content-type" http-equiv="content-type

You might also like