Scribd
Upload
52 views36 pages

HTML Cours

cours html

Uploaded by

Daniel Williams
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
52 views36 pages

HTML Cours

cours html

Uploaded by

Daniel Williams
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 36

- - Messenger

- - -
/http://www.sh3bwah.com


HTML
14/9/2000

mubarmej :

HTML HyperText Markup Language


.

HTML ) (Plain Text html.


Notepad pico SimpleText
.HTML
Internet Explorer Netscape Navigator



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

Netscape Navigator 4.72 Sindbad 4.51


Navigator
.. HTML
HTML HTML HTML
.
HTML :

: .

: .
.. HTML

- - Messenger
- - -
/http://www.sh3bwah.com
HTML is a <b>Great</b> Language
..
Great Language HTML is a

HTML HTML is a Great Language


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

> < =""
color font red
..
HTML is a <font color="red" size="+1">Great</font> Language
..

Great HTML is a

Language

.. HTML

HTML HTML > <b >.<B

) " ( ) ' (
.

- - Messenger
- - -
/http://www.sh3bwah.com

HTML
tab .

>! -- <-- .

HTML
HTML :

: Head
.

: Body .

.. HTML

><html
><head
...
><head/
><body
...
><body/
><html/
> <head > <head/
> <body >. <body/
> <title > <title/ > <title
title
.title
meta
.
.body

- - Messenger
- - -
/http://www.sh3bwah.com



h1 h2 .. h6
><h1>Heading 1</h1
><h2>Heading 2</h2
><h3>Heading 3</h3
><h4>Heading 4</h4
><h5>Heading 5</h5
><h6>Heading 6</h6

- - Messenger
- - -
/http://www.sh3bwah.com

P
><p>Paragraph Text</p

align P
><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

- - Messenger
- - -
/http://www.sh3bwah.com
><a href="mailto:[email protected]">My E-mail</a

a name ) href (
> <""=a name href name
# ><a name="myname"></a
> <"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 ) (

- - Messenger
- - -
/http://www.sh3bwah.com
<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="+3">Size 6</font><br
><font size="+2">Size 5</font><br
><font size="+1">Size 4</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

- - Messenger
- - -
/http://www.sh3bwah.com

relative
size + -
><font size="7">Size 7</font><br
><font size="6">Size 6</font><br
><font size="5">Size 5</font><br
><font size="4">Size 4</font><br
><font size="3">Size 3</font><br
><font size="2">Size 2</font><br
><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

- - Messenger
- - -
/http://www.sh3bwah.com

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:[email protected]">Bill Gates!?</a><br

- - Messenger
- - -
/http://www.sh3bwah.com
><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 f
00 RRGGBB# .. #

.Windows
16.5 256
216
216
.
141
:

..

- - Messenger
- - -
/http://www.sh3bwah.com
><"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

- - Messenger
- - -
/http://www.sh3bwah.com
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

- - Messenger
- - -
/http://www.sh3bwah.com

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

- - Messenger
- - -
/http://www.sh3bwah.com

: 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

- - Messenger
- - -
/http://www.sh3bwah.com

.hspace
alt alt
ToolTip .


Hot Spots
.

usemap.

)(

- - Messenger
- - -
/http://www.sh3bwah.com


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/

- Messenger -
- - -
/http://www.sh3bwah.com


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/>

- - Messenger
- - -
/http://www.sh3bwah.com


HTML ) (
.
ol ul li
type :
.. ,4 ,3 ,2 ,1 : 1
.. ,a : a, b, c, d
.. ,A : A, B, C, D
.. ,i : i, ii, iii, iv
.. ,I : I, II, III, IV
:

: circle
o

: square

: disc

.
><"ul type="circle
>li>Pepsi
>li>Crash
>li>7 Up
><ul/
><"ol type="I
>)li>Windows (85%

- Messenger -
- - -
/http://www.sh3bwah.com
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/>

- - Messenger
- - -
/http://www.sh3bwah.com

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/

- - Messenger
- - -
/http://www.sh3bwah.com
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/

- - Messenger
- - -
/http://www.sh3bwah.com

align valign align left


rigth center justify valign top
bottom 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

- Messenger -
- - -
/http://www.sh3bwah.com
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>

- - Messenger
- - -
/http://www.sh3bwah.com
>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
><"frame src="sample2.html
><"frame src="sample3.html
><frameset/

- - Messenger
- - -
/http://www.sh3bwah.com

frameset frame
><"*,frameset rows="50
><"frame src="sample1.html
><"*,frameset cols="100
><"frame src="sample2.html
><"frame src="sample3.html
><frameset/
><frameset/

frameborder 0 1
framespacing
0 .
><"frameset cols="50%,*" frameborder="0" framespacing="0
><"frame src="sample1.html
><"frame src="sample2.html
><frameset/

- - Messenger
- - -
/http://www.sh3bwah.com

Scroll Bars scrolling yes


no auto .
><"*,frameset rows="20
><"frame src="sample1.html" scrolling="no
><"*,frameset cols="100
><"frame src="sample2.html" scrolling="yes
><"frame src="sample3.html
><frameset/
><frameset/

name
a target _ blank
_ top _ self ) ( _parent
.
>!--

sample4.html

<--

>"a href="sample1.html
<target="_blank">Page 1</a><br
>"a href="sample3.html
<target="_top">Page 3</a><br

- - Messenger
- - -
/http://www.sh3bwah.com
>"a href="sample2.html
<target="main">Page 2</a
>"a href="sample4.html
<target="main">Page 4</a
><"*,frameset rows="20
><"frame src="sample1.html
><"*,frameset cols="200
><"frame src="sample4.html
><"frame src="sample3.html" name="main
><frameset/
><frameset/


body HTML iframe src
name

width height

http
http http
http
name=mubarmej ) (name
) ( mubarmej &
name=mubarmej&country=Kuwait

- - Messenger
- - -
/http://www.sh3bwah.com
country=Kuwait&name=mubarmej
url
url )
( + United States name=mubarmej&country=United+States
.

: .
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 .

- - Messenger
- - -
/http://www.sh3bwah.com

: 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/

- - Messenger
- - -
/http://www.sh3bwah.com

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 .
><"form action="echo.pl" method="get
><input type="checkbox" name="do" value="subscribe"> Subscribe.<br
><"input type="submit

- - Messenger
- - -
/http://www.sh3bwah.com
><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
><input type="radio" name="age" value="50"> 18 - 50<br
><input type="radio" name="age" value="100"> 51 - 100<br
<Gender : <br
>input type="radio" name="gender" value="male"> Male
><input type="radio" name="gender" value="female"> Female<br
><"input type="submit
><form/

Male Female .name

select name
option value name select
value option .
><"form action="echo.pl" method="get

- Messenger -
- - -
/http://www.sh3bwah.com
<"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/>
<"input type="submit>
<form/>


) ( textarea Textarea
. post
.( ) cols rows
<"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/>

- - Messenger
- - -
/http://www.sh3bwah.com


meta
meta ! meta
meta
meta HTML
head .
meta name http-equiv meta
name http-equiv .

- - Messenger
- - -
/http://www.sh3bwah.com
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 Linux) Unix( .
meta content-type .
p align right

dir html rtl

Internet Explorer Netscape Navigator
Sindbad
dir .

- - Messenger
- - -
/http://www.sh3bwah.com
><"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

- - Messenger
- - -
/http://www.sh3bwah.com
CGI Perl
CGI
PHP
ASP NT
UNIX Perl /http://www.perl.com : PHP
/http://www.php.net

You might also like