Learn Html5 and Css3 (Arabic)
Uploaded by
AliLearn Html5 and Css3 (Arabic)
Uploaded by
Ali:
HTML5 & CSS3
( )
...
.
, ( jQuery
) ,
,
()PDF
- -
//
,
,
,
Web
, ,
- - Web - -
,
Web Web 2.0
,
Web
"
Web ,
."Web
HTML CSS
Web HTML5 HTML
XHTML ,
CSS3 CSS ,
:
:HTML5 - ( )
HTML
:CSS3 - ( )
CSS ,
.
- Client Side
Java Script
( ) "
jQuery " jQuery
, jQuery Java Script.
, ,
.
//
HTML 5
HTML5 ,
HTML5 HTML XHTML ,
.HTML
HTML
HTML abbreviation Hyper Text Markup
Language ( ) ,
, , ,Markup Language
HTML
Tags .
Tags Keywords ,
> < > <b > ,<html
> <b Begin Tag
> <b > ,</b
,Opening Tag > </b End Tag
.Closing Tag
HTML ( )notepad
(
DreamWaver ,)Visual Studio extension
.html : ,.htm .
HTML
,HTML HTML ( ) ,Web Pages
Web
Browser Internet Explorer Firefox .. Google chrome.
HTML ,
HTML
.HTML
HTML
HTML ( )Notepad
( ,)Internet Explorer
-
.
HTML
HTML :
Notepad
:
><html
><head
><title
My first HTML page
></title
></head
><body
><p
!Welcome to my first HTML page
></p
></body
></html
firstPage.html
: 1 HTML
: .txt ,
* *. Save as type
firstPage.html
Internet Explorer 8
:
HTML
: 2
HTML
! ,Welcome to my first HTML page
p
.
HTML
HTML
HTML Elements
Tags
> <p Paragraphs
HTML
.
> < > <html > <head
> <title > <body >.<p
HTML Begin Tag End Tag
> <
/ Slash > </
> </html > </head > </title > </body > </p
( p
HTML
) HTML
,
( ) ,
:
><html
><body
><p
!
></p
></body
></html
> </p > <p ,
> </body > ,<body
> </html >.<html
:
><html
><body
><p
!
></body
></html
></p
> </body > <body
> </html >.</p
.
:
White Spaces
HTML ( Space .. Tab)
, HTML :
><html
><body
><h1
!Hi
></h1
></body
></html
HTML:
><html><body><h1>Hi!</h1></body></html
.
:
Tab
( .)Space
HTML
HTML , :HTML
HTML .Begin Tag
HTML .End Tag
HTML
.
.
HTML
.Attributes
: , HTML .Lower Case
></p
Welcome to my website.
><p
></a
Go to index
>"<a href="index.htm
><hr /
HTML ,
> <p > </p Welcome to
my website >" <a href="index.htm ></a
Go to index index.htm ,href
>.<hr /
HTML
HTML :
:Body Section
> <body > </body
HTML .
:Head Section
> <head > </head
HTML
.
:
().
> <html > </html
() .HTML
HTML:
><html
><head
></head
><body
></body
></html
Attributes
HTML
, HTML
.. Links ,
,HTML .
,Attributes
>"<p align="center
></p
p
align p center
:
: 3 > <p align
, HTML Attributes
,
align > <p
left right center
,
"name="value
name
value
" " .
: HTML .Lower Case
HTML
,Headings
HTML , :
id
( )
Java Script ,jQuery
dir
ltr
align
left
ltr ,
rtl
rtl
right
center
justify
class
CSS
name
CSS3
: 1 HTML
Headings
HTML h1 : h2 h3 h4
h5 h6
h1 h6
, h ,Heading
:
><html
><head
><title
></title
></head
>'<body dir='rtl
><h1
></h1
></h2 ><h2
></h3 ><h3
></h4 ><h4
></h5 ><h5
></h6 ><h6
></body
></html
: 4 h1 h6
> <body dir
rtl right to left
,
ltr .
: > <h1 > <h6 ,
.
Horizontal Line
HTML > <hr / , :
><html
><head
><title
></title
></head
>'<body dir='rtl
></p ><p
><hr /
></p ><p
><hr /
></p ><p
></body
></html
: 5 ><hr /
Comments
,
, ,Comments
HTML
,
:
><!-- comment --
:HTML
><html
><head
><title
></title
></head
>'<body dir='rtl
> -- <!--
></p> <hr / ><p
> -- <!--
></p> <hr / ><p
> -- <!--
></p ><p
></body
></html
(
" <-" ":)"View->source
: 6
.
:
Paragraphs
,
> <p , ><br /
Enter
HTML .
Text Formatting
HTML , Bold
>( <b > ,)<strong Italic >( <i
Delete ,<u> ,)<em>
: ,<del>
<html>
<head>
<title> < /title>
</head>
<body>
<p>
This is a sample text to demonstrate
<b>bold</b>,
<i>italic</i>,
<u>underline</u> and
<del>delete</del> tags.
<!--
< br/> -->
<br/>
You may use other tags to generate the same output:
<br/>
This is a sample text to demonstrate
<strong>bold</strong>,
<em>italic</em>,
<u>underline</u> and
<del>delete</del> tags.
</p>
</body>
></html
: 7
: HTML
.
Special Characters
, HTML
; &value value
:
http://www.w3schools.com/tags/ref_symbols.asp
XHTML
<
<
>
>
≠
™
©
HTML : 2
:
<html>
<head>
<title>
</title>
</head>
<body>
<p>
3 < 5 and 10 > 2 and also 3 ≠ 4 ....
all rights reserved for © Mukhtar ™
</p>
</body>
</html>
: 8
Hyper Links
HTML ,Hyper Links
, " "
, > ,<a a , Anchor
(
) href ,Hyper Reference
:
><html
><head
><title
></title
></head
><body
></a><br />"<a href="http://www.microsoft.com
></a><br />"<a href="http://www.google.com
><a href="http://www.msn.com" target="_blank" >MSN</a
><br /
></a >"<a href="firstPage.html" target="_self
></body
></html
: 9
( Absolute ) Relative
( ) Path
firstPage.html
.
URL href
,
target
(
,)_self (
,)_blank (
).
Resource
, E-Mail
mailto: , :
><html
><head
><title
></title
Paths
http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx
></head
><body
>"<a href="http://www.somesite.com/files/file1.zip
></a
><br /
></a<a href ="mailto:[email protected]">
></body
></html
Save File Dialog
( Outlook
)Express .
Images
HTML
>( <img/ )Image
( src ,)Source
> <img/
> <br/
> ,<img src="path" / :
><html
><head
><title
></title
></head
><body
><img src="myPic.jpg" /
>" / "=<img src="myPic2.gif" alt
"" width="100px "=<img src="myPic.jpg" alt
>height="50px" /
>" / "=" alt "=<img src
></body
></html
: 11
> ,<img/ alt
src
,
img height width
( px
).
:
.
> <a
> <img/ > <a
:
><html
><head
><title
></title
></head
><body
>"<a href = "mailto:[email protected]
>" /"=<img src="myPic.jpg" alt
></a
></body
></html
: 11
Image Maps
, ,
> ,<img/
> <map name
> <area
,
usemap , :
><html
><body
></p ><p
"<img src="planets.gif" width="145" height="126
>" usemap="#planetmap" /"=alt
>"<map name="planetmap
""=<area shape="rect" coords="0,0,82,126" alt
>href="sun.htm" /
""=<area shape="circle" coords="90,58,3" alt
>href="mercur.htm" /
""=<area shape="circle" coords="124,58,8" alt
>href="venus.htm" /
></map
></body
></html
: 12
,
:
>"<map name="planetmap
area
shape ( , ..) ,
coords
,
,
( ), ( )82,126
,
.
: 13
usemap .
: usemap #
Internal Linking
, HTML
Internal Links
> <a
href :
></a
<a href="#id"> id
id
><html
><head
><title
></title
></head
><body
></a >"<a href="#Para4
></h1 <h1>
></p <p>
></h1 ><h1
></p ><p
></h1 ><h1
></p ><p
></h1 >"<h1 id="Para4
></p ><p
></body
></html
Lists
HTML :
- Unordered List >.<ul
- Ordered List >.<ol
> <li
,List Item :
><html
><head
></title ><title
></head
>"<body dir="rtl
></p ><p
><ul
><li>HTML</li
><li>HTML5</li
><li>XHTML</li
><li>CSS</li
><li>CSS3</li
></ul
></body
></html
: 14
> <ul > </ul > <ol > </ol
:
: 15
HTML
, :
><html
><head
></title ><title
></head
>"<body dir="rtl
></p ><p
><ol
><li
HTML
><ul
></li><li
></li><li
><li
><ul
></li><li
></li ><li
></ul
></li
></ul
></li
><li>HTML 5</li
><li>XHTML</li
><li>CSS</li
><li>CSS 3</li
></ol
></body
></html
: 16
type
square : disc circle
A a I i type ,
, , ,
.
> <dl
> <dt > <dd ,
:
><html
><head
></title ><title
></head
>"<body dir="rtl
><dl
><dt>HTML</dt
><dd>Hyper Text Markup Language</dd
><dt>XHTML</dt
><dd>eXtensible Hyper Text Markup Language</dd
><dt>CSS</dt
><dd>Cascading Style Sheet</dd
></dl
></body
></html
: 17
Tables
HTML > <table
> <table width border ,
table rows
table data
> ,<tr
> ,<td :
: 18
<html>
<head>
<title> < /title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<tr>
<td>< /td>
<td></td>
</tr>
<tr>
<td>< /td>
<td>051</td>
</tr>
<tr>
<td>< /td>
<td>011</td>
</tr>
<tr>
<td>< /td>
<td>051</td>
</tr>
<tr>
<td>< /td>
<td>51</td>
></tr
></table
></body
></html
: 19
> <table % width
( !),
> ,<tr></tr
border ,
> <td></td " " "" ,
,
.
:
HTML .
HTML :
- :Table Head > <thead
> </thead > <tr></tr
> <th > ,<td
> <td table data > <th
.table heading
- :Table Body > <tbody
> </tbody > <tr
>.<td
- :Table Foot > <tfoot
> </tfoot > <tr></tr
>.<th
- :Caption
> <caption > ,</caption
:
: 21 HTML
: HTML
<html>
<head>
<title> < /title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<caption>< /caption>
<thead>
<tr>
<th>< /th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>< /td>
<td>150</td>
</tr>
<tr>
<td>< /td>
<td>200</td>
</tr>
<tr>
<td>< /td>
<td>350</td>
</tr>
<tr>
<td>< /td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>750</th>
</tr>
</tfoot>
</table>
</body>
</html>
: 21 HTML
,
.bold
, ,
, HTML rowspan
.colspan
rowspan colspan > <td > <th
( ..)
.. , rowspan , colspan .
:
<html>
<head>
<title> < /title>
</head>
<body dir="rtl">
<table border="1" width="100%">
<tbody>
<tr>
<td>< /td>
<td> jQuery 021 </td>
<td rowspan="3">
<img src="jQuery120.png">
</td>
</tr>
<tr>
<td></td>
<td> < /td>
</tr>
<tr>
<td>< /td>
<td>2010</td>
</tr>
<tr>
<td colspan="3">
jQuery
......
></td
></tr
></tbody
></table
></body
></html
: 22 rowspan colspan
( ,)"rowspan="3
,)"colspan="3 rowspan colspan ,
rowspan colspan
.
: HTML .
Forms
Forms HTML Inputs
, ><form
> </form > <input
text boxes check boxes buttons
..select lists.
> <form action
Server Side PHP
ASP.NET JSP .. ( ),
method
- get
/ ,
:
http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin
eer
http://www.site.com/file.php
:
name = Mukhtar age = 23 job = ComputerEngineer
post
( .)HTTP
- -
method .
> <form
> <input
type
name ,id
:
button
checkbox
file
hidden
password
radio
reset
) (
submit
text
>input< type : 3
:
<html>
<head>
<title>
</title>
</head>
<body dir="rtl">
<form method="get" action="file.php">
:
<input type="text" name="nameText" id="nameText" />
<br/>
:
<input type="password" name="pass" id="pass" />
<br/>
<input type="submit" name="okButton" id="okButton"
value=" "/>
</form>
</body>
</html>
: 23
,
, :
><html
><head
></title ><title
></head
>"<body dir="rtl
>"<form method="get" action="file.php
" <input type="text" name="nameText:
>id="nameText" /
><br/
" <input type="password" name="pass :
>id="pass" /
><br/
" <input type="file" name="pic :
>"id="pic
><br/
"<input type="reset" name="resBtn" id="resBtn
>" /"=value
"<input type="submit" name="okButton" id="okButton
>" /"=value
></form
></body
></html
: 24
! .. radio checkbox
,
( )radio
( )checkbox
: ,value name
<html>
<head>
<title> radio checkbox < /title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p> < /p>
<input type="checkbox" name="wrKnow" value="nPaper" />
<input type="checkbox" name="wrKnow" value="wbSite" />
<input type="checkbox" name="wrKnow" value="frnd" />
<input type="checkbox" name="wrKnow" value="srEng" />
<p> < /p>
<input type="radio" name="rate" value="good" />
<input type="radio" name="rate" value="mid" />
<input type="radio" name="rate" value="bad" />
></form
></body
></html
: 25 checkbox radio
radio
( )
> <option
> <select
" selected="selected ,
:
><html
><head
></title <title>select
></head
>"<body dir="rtl
<form method="post" action="file.php">
<p> < /p>
<select name="nationality">
<option selected="selected"></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</body>
</html>
select : 26
> <textarea
> <input text
.
> <textarea cols rows
, :
><html
><head
><title
textarea
></title
></head
>"<body dir="rtl
>"<form method="post" action="file.php
></p ><p
>"<textarea cols="30" rows="10" name="bio
></textarea
></form
></body
></html
: 27 textarea
HTML > <fieldset > </fieldset
> ,<legend
> <label for
> ,<label :
><html
><head
><title
fieldset
></title
></head
<body dir="rtl">
<form method="get" action="">
<fieldset>
<legend>< /legend>
<label for="nameTXT"></label>
<input type="text" name="nameTXT" id="nameTXT"
maxlength="50" />
<br/><br/>
<label for="ageTXT"></label>
<input type="text" name="ageTXT" id="ageTXT"
maxlength="2" />
</fieldset>
<br/>
<fieldset>
<legend>< /legend>
C#
<input type="checkbox" name="prog" value="cs"/>
VB.NET
<input type="checkbox" name="prog" value="vb"/>
F#
<input type="checkbox" name="prog" value="fs"/>
C++.NET
<input type="checkbox" name="prog" value="cpp"/>
></fieldset
><fieldset
>" /"=<input type="submit" value
></fieldset
></form
></body
></html
: 28 fieldSet
Frames
HTML ,
.Frames
,
> <frameset ,
, ,
> <frameset
> <frame , src
%
:
><html
>"*<frameset cols="30%,
><frame src="page_1.htm" /
><frame src="page_2.htm" /
></frameset
></html
: 29
: >.<body
( ,)
" noresize="noresize >.<frame
cols
> ,<frameset cols
,rows :
: 31
: target
>( <a .)Links
> <frameset > <frame
HTML > <iframe
, > <iframe
:
><iframe src="URL"></iframe
URL ,
height width .
,
, .
Meta
> <head > </head
, ,meta
meta meta name content
meta ,
meta
keywords ,description :
><html
><head
<meta name="keywords" content="xhtml website test
>meta head"/
<meta name="description" content="this page
>demonstrates how to use meta elements"/
></head
><body
></body
></html
Meta Keywords
,
Meta Description .
Meta
.
Meta - - HTML
, HTML
, HTML5 HTML ,XHTML
HTML .
HTML
><!-- --
><!DOCTYPE
( )XHTML
><a
><abbr
><acronym
><address
><applet
Applet
><area /
><b
><base /
><basefont /
//
><bdo
><big
> <blockqoute
><body
><br /
><button
><caption
><center
><cite
><code
><col /
><colgroup
><dd
><del
><dfn
><dir
><div
><dl
><dt
><em
><fieldset
><font
//
><form
><frame /
><frameset
> <h1 > <h6
><head
><hr /
><html
><i
><iframe
><img /
><input /
><ins
><isindex
><kbd
><label
><legeng
><fieldset
><li
><link /
( )
><map
><menu
><meta /
><noframes
><noscript
><object
><ol
><optgroup
><option
><p
><param /
><pre
><q
><s
><samp
><script
( Java Script jQuery)
><select
><small
><span
><strike
><strong
><style
( )
><sub
><sup
><table
><tbody
><td
><textarea
><tfoot
><th
><thead
><title
><tr
><tt
teletype
><u
><ul
><var
><xmp
: 4 HTML
XHTML
XHTML eXtensible HTML HTML (
HTML) , HTML
, HTML
,)eXtensible Markup Language( XML
, XHTML
-
, -
,
: ,
XHTML .
- - :
><hTml
><heaD
></title HTML ><title
><BODY
<h1>Bad HTML
<p>This is a paragraph
></boDy
HTML
, XHTML .
XHTML
XHTML
,XHTML XHTML
HTML
:
.Lower Case
.
.
> <html > <body >.<head
DOCTYPE ( ).
><!DOCTYPE
XHTML
> <!DOCTYPE Document Type
Definition DTD ,
, xmlns
> <html Name Space.
XHTML
,xmlns
XHTML:
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
>""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
>"<html xmlns="http://www.w3.org/1999/xhtml
></head ><head
></body ><body
></html
Transitional
> <!DOCTYPE
.
<!DOCTYPE> : .
XHTML :
:XHTML 1.0 Strict .
HTML > <applet > <basefont
> <center > <dir > <font > <iframe > <isindex > <menu
> <noframes > <s > <strike > ,<u
> ,<frameset :
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
>""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
:XHTML 1.0 Tansitional .
HTML
> ,<frameset :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>"transitional.dtd
:XHTML 1.0 Frameset .
HTML ,
:
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN
>""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
:XHTML 1.1 .
( Ruby)
Strict
, :
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN
>""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
XHTML
( )
XHTML
XHTML :
http://www.w3schools.com/xhtml/default.asp
: XHTML
.
HTML5
HTML (
)HTML 4.01 ,
, ,Web 2.0
( ) ,
HTML
.HTML 5
HTML 5
.
HTML 5
HTML 5 ( )
,
, - HTML 5 -
:
Google Chrome Firefox Opera Internet Explorer .Safari
HTML 5
Video
HTML 5
> ,<video height width
> <source
src ,type :
><html
><head
><title
></title
></head
><body
>"<video width="320" height="240" controls="controls
><source src="movie.mp4" type="video/mp4" /
, !
></video
></body
></html
( > )<video
:
,HTML 5
:31
: > <video
MPEG4 Ogg .WebM
>:<video
audio
muted
autoplay
autoplay
controls
controls
height
loop
loop
poster
src
width
: 5 ><video
Audio
HTML 5
> <audio :
><html
><head
></title ><title
></head
><body
>"<audio controls="controls
><source src="song.mp3" type="audio/mp3" /
, !
></audio
></body
></html
: 32
> <audio .
: > <audio MP3 Ogg
.Wav
>:<audio
autoplay
autoplay
controls
controls
loop
loop
preload
preload
src
: 6 ><video
Forms
HTML 5 Forms
> ,<input
> <input :
type
url
number
range
date
(//)
month
(/)
week
time
(/)
datetime
(///) ,
datetime-local
search
text
color
: 7 HTML 5
:
><!DOCTYPE HTML
><html
><body
>"<form action="" method="get
Name:
><input type="text" name="stdnt_name" /><br /
E-Mail:
><input type="email" name="stdnt_email" /><br /
Website:
><input type="url" name="stdnt_url" /><br /
Points:
"<input type="range" name="points" min="1
>max="10" /><br /
Date:
><input type="date" name="user_date" /><br /
><input type="submit" /
></form
></body
></html
:33
HTML5
> <datalist
> <option
> ,<select ( > )<datalist
,list :
<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
name:
<input type="text" list="names_list"
name="stdnt_name" /><br />
<datalist id="names_list">
<option label="A" value="nameA" />
<option label="B" value="nameB" />
<option label="C" value="nameC" />
</datalist>
</form>
</body>
</html>
,<output> < keygen> HTML5
< keygen>
) / ( Authentication
: ,
<keygen name="security" />
Outputs < output>
: Java Script
<output id="result" onforminput="resCalc()"></output>
Canvas
HTML 5 > <Canvas
Java Script Plugins Flash
.
height width :
><canvas id="myCanvas" width="200" height="100"></canvas
Java Script :
>"<script type="text/javascript
;)"var c=document.getElementById("myCanvas
;)"var cxt=c.getContext("2d
;"cxt.fillStyle="#FF0000
;)cxt.fillRect(0,0,150,75
></script
id :
;)"var c=document.getElementById("myCanvas
Object 2D :
;)"var cxt=c.getContext("2d
Methods cxt :
;"cxt.fillStyle="#FF0000
;)cxt.fillRect(0,0,150,75
Java Script
, )#FF0000
( ).
:
><!DOCTYPE HTML
><html
><body
>"<canvas id="myCanvas" width="200" height="100
></canvas
>"<script type="text/javascript
;)"var c=document.getElementById("myCanvas
;)"var cxt=c.getContext("2d
;"cxt.fillStyle="#FF0000
;)cxt.fillRect(0,0,150,75
></script
></body
></html
Methods :
.HTML
fillStyle
;"cxt.fillStyle="#FF0000
fillRect
;)cxt.fillRect(0,0,150,75
moveTo
createLinearGradient
;)cxt.moveTo(10,10
cxt.
)createLinearGradient(0,0,170,50
addColorStop
drawImage
lineTo
;)"cxt .addColorStop(0,"#FF0000
;)cxt.drawImage(img,0,0
;)cxt.lineTo(150,50
: 8 ><canvas
HTML 5 Client :
. :localStorage
:
;"localStorage.varName="value
varName value
:
;localStorage.varName
. :sessionStorage
, :
;"sessionStorage.varName="value
varName value
:
;sessionStorage.varName
: .Java Script
HTML 5
:HTML 5
><article
><aside
><audio
><canvas
><datalist
><details
><embed
plugin
> <command
> <figcaption ><figure
><figure
><footer
><header
><hgroup
><keygen
><mark
><meter
><nav
><output
><progress
><rp
Ruby
><rt
Ruby
><ruby
Ruby
><section
><source
><summary
detail
><time
><video
><wbr
Ruby
: 9 HTML 5
CSS 3
HTML5
,
CSS
,CSS3 - -
CSS3 CSS.
CSS
CSS Cascading Style Sheet
" " , HTML
CSS ,
,
.
CSS
HTML
, HTML
, - -
,
> <font
() Font ,
,
,
,
, .CSS
,
CSS HTML
.CSS
,
CSS
CSS :
CSS . :Inline CSS
,
CSS style
></p >";<p style="color:red
- - .CSS
CSS . () :Embeded CSS
font
""
"" font
CSS Head > <style
> </style :
><html
><head
>"<style type="text/css
CSS
></style
></head
><body
></body
></html
.
CSS . :External CSS
CSS .css ,
> <link
href stylesheet:
><html
><head
"<link rel="stylesheet" type="text/css
>href="style.css" /
></head
></body ><body
></html
CSS.
CSS
CSS ,Rules
, CSS:
{ selector
;property:value
;property:value
;property:value
{ }
.selector
:
CSS
CSS ,
id #link1 #header1 #searchForm
HTML h1 a ,p
,
.
CSS / :
;property:value
property value ,
, .
: HTML CSS
.
CSS :
text-align :
};h1 {text-align:center
h1 > <h1 , right
text-align left center
justify .width
() text-decoration :
};p a {text-decoration:overline
p a > <a
> <p , overline ,
none : underline
line-through .
direction :
Decor
"" , .
};p {direction:rtl
( rtl right to
,)left ltr
.direction
text-transformation :
};p {text-transformation:uppercase
> <p ,
uppercase lowercase capitalize
.
text-indent :
};p {text-indent:20px
,
.
color :
};p {color:red
p > <p ,
color red green white
.. , Hexadecimal #FF0000
A a
.
#00FC00 .. #FFFFFF , rgb
) rgb(255,0,0 ) rgb(0,255,0 ).. rgb(255,255,255.
: ,
// ,
,
, , 00
FF ,
#FF00FF
#8B008B
, rgb ,
, 0 255 .
:
><html
><head
><title
></title
>"<style type="text/css
{ p
;text-align:justify
;color:#ff0000
;text-decoration:underline
;direction:rtl
}
></style
></head
><body
><p
.
></p
></body
></html
: 34
Fonts
CSS ,Fonts
CSS " " ,font-family
comma font-family
,
.
CSS Serif Sans-serif
Monospace
.
CSS font-style
( italic ) ( normal ) ,
font-size ( em = em
) , :
><html
><head
><title
></title
>"<style type="text/css
p {
font-family:"Tahoma","Simplified Arabic",sans-serif;
font-size:1.5em;
font-style:italic;
direction:rtl;
}
</style>
</head>
<body>
<p>
.
</p>
</body>
</html>
: 35
: sans-serif
.sans-serif
,
, :
a:link a
.
a:visited .
a:hove
.
a:active .
:
><html
><head
><title
></title
>"<style type="text/css
};a:link{text-decoration:none;color:blue
};a:visited{color:green
};a:hover{text-decoration:underline
};a:active{font-size:120%
></style
></head
><body
><a href="#">normal link</a> <br/
><a href="www.google.com">visited link</a> <br/
><a href="#">hover link</a> <br/
><a href="#">normal link 2</a> <br/
></body
></html
: 36
: a:hover a:link ,a:visited a:active .a:hover
Backgrounds
CSS ,
background-color
:
;background-color:#CF1A11
background-
image:
;)background-image:url(image.jpg
()
background-repeat repeat-x
repeat-y repeat
no-repeat ,
background-position
left top left center left bottom center top center center
center bottom right top right center ,right bottom
> <p :
><html
><head
><title
></title
>"<style type="text/css
{ .firstP
;background-color:black
;color:white
}
{ .secondP
;)background-image:url(image1.jpg
;background-repeat:no-repeat
;background-position:center center
}
};p {direction:rtl
></style
></head
><body
>"<p class="firstP
></p
>"<p class="secondP
> <br/><br/
> <br/
><br/
></p
></body
></html
: classes
class ,CSS ( )
class .
: 37
CSS /
, :
:list-style-type /
, circle square disc none
, upper-roman lower-roman lower-
alpha upper-alpha lower-latin upper-latin decimal
.
:list-style-image
, :
;)'list-style-image:url('image.gif
:
<html>
<head>
<title>
</title>
<style type="text/css">
ul {list-style-type:square;}
ol {list-style-image:url('dot.gif');}
</style>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</body>
</html>
: 38
HTML CSS
, :
CSS
><html
><head
>"<style type="text/css
table
{
;font-family:"Trebuchet MS", sans-serif
;width:100%
;border-collapse:collapse
direction:rtl;
text-align:center;
}
td, th
{
font-size:1em;
border:1px solid #98bf21;
}
th
{
font-size:1.1em;
background-color:#A7C942;
color:#ffffff;
}
.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
></th><th
></th><th
></tr
><tr
></td ><td
></td><td
></td><td
></tr
>"<tr class="alt
></td ><td
></td><td
></td><td
></tr
><tr
></table
></body
></html
: 39 CSS
CSS :
: border
( ,solid ,dashed
.. dotted) , (
).
:border-collapse
( )collapse .
:
, , .alt
Zebra-stripping
Positioning
,
CSS
, ,
CSS :
:Static
, .
:Fixed
top left right bottom fixed
,position .
:Relative
top left right bottom relative
,position
.
:Absolute
top left right bottom absolute
,position
,
> <html .
:
><html
><head
>"<style type="text/css
};* {direction:rtl
h1
} ;{ position:absolute; left:100px; top:150px
></style
></head
><body
></h1 ><h1
><p
></p
></body
></html
CSS
: 41
: * .
z-index
, z-index ,
:
><html
><head
>"<style type="text/css
};* {direction:rtl
img
{
;position:absolute
;left:100px
;top:50px
;z-index:-1
}
></style
></head
><body
></h1 ><h1
><img src="image1.jpg" width="100" height="140" /
><p
z-index
></p
></body
></html
: 41 z-index
,
scroll ,overflow :
><html
><head
>"<style type="text/css
};* {direction:rtl
div
{
;background-color:#00FFFF
;width:250px
;height:100px
;overflow:scroll
}
></style
></head
><body
><div
><p
></p .
></div
></body
></html
: 42
CSS
width height
:
px
150px
50%
em
1.5em
em
in
1in
cm
1cm
mm
100mm
pt
( =
pc
( = =
30pt
)
)
15pc
: 11 CSS
CSS Box Model
" "
box model , HTML
:
- :content .
- :padding .
- :border .
- :margin
.
: 43 box model
CSS
border
CSS border-width
border-style ,border-color
border-width ,
border-style dotted dashed
solid double groove ridge
inset outset , ,
:
><html
><head
<style type="text/css">
* { direction:rtl; }
.one
{ border-style:solid; }
.two
{ border-style:dashed; }
</style>
</head>
<body>
<p class="one"> </p>
<p class="two"> </p>
</body>
</html>
: border-style
border-style
:
;border-style: dotted dashed groove double
border-left-style border-right-style border-top-style
,border-bottom-style border-color
.border-width
padding
( )
padding-left padding-right padding-
top padding-bottom ,
padding ,
, :
><html
><head
>"<style type="text/css
p
} ;{ direction:rtl; background-color:black; color:white
.padding
{
;padding-top:25px
;padding-bottom:25px
;padding-right:50px
;padding-left:50px
}
></style
></head
><body
><p
></p
>"<p class="padding
></p
></body
></html
: 44
margin
( )
margin-left margin-right
margin-top margin-bottom ,
margin ,
auto ,
:
><html
><head
>"<style type="text/css
p
} ;{ direction:rtl; background-color:black; color:white
.margin
{
;margin-top:100px
;margin-bottom:100px
;margin-right:50px
;margin-left:50px
}
></style
></head
><body
></p ><p
></p >"<p class="margin
></body
></html
:45 margin
HTML CSS:
none .display
hidden .visibility
.
HTML:
:block
> <h1 > <p >...<div.
:inline
> <a >... <span.
CSS block inline
block inline .display
opacity
CSS opacity
0.0 1.0 , . .
.
floating
float CSS
,
CSS right .left
() ,
, :
><html
><head
>"<style type="text/css
} ;p { direction:rtl; text-align:justify
} ;img { float:right
></style
></head
><body
><p
><img src="picture1.gif" /
.
></p
></body
></html
: 46 float
,
.
:
,
.
float
,
,
/
CSS clear
, left
right both
.
CSS
CSS * / */:
*/
comment
*/
Media types
,
CSS
()....
media ,CSS
media CSS
,@media :
><html
><head
>"<style type="text/css
@media screen
{
{p
text-align:justfy
;direction:rtl
color:white;
}
body {
background-color:green;
}
}
@media print
{
p
{
text-align:justfy;
direction:rtl;
color:white;}
}
</style>
</head>
<body>
<p>
./
</p>
</body>
</html>
: 47 @media
( ) :
: 48 @media
@media :
all
aural
braille
embossed
handheld
projection
screen
( )
tty
( ).
tv
: 11 @media
Media - - CSS
, CSS
CSS
,CSS3
CSS
.class
.Mukhtar
#id
#name
"class="Mukhtar
"id="name
tag
><p
tag,tag
a,p
> <a
tag tag
div a
tag>tag
div>a
tag+tag
div+p
> <p
][attribute
][src
><div
src
][attribute=v
][src=image.jpg
src
][attribute~=v
][target~=_blank
][attribute|=v
][href|=http://
:link
a:link
:visited
a:visited
:active
a:active
:hover
a:hover
:focus
input:focus
:first-letter
p:first-letter
><p
:first-line
p:first-line
><p
><p
> <a
><div
> <a
> <div
image.jpg
target
_blank
target
http://
:first-child
p:first-child
> <p
:before
p:before
><p
:after
p:after
><p
):lang(language
)p:lang(en
> <p
lang en
: 12 CSS
CSS 3
( )Web 2.0
.CSS3
CSS3 CSS
,Module
CSS3
.HTML5
CSS3 Borders
) Round Corner Borders( CSS3
) Photoshop (
border-radius
, ,
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded
>corners to elements.</div
></body
></html
: 49 border-radius
: Firefox -moz-border-radius
CSS3
:
:repeated .
:stretch .
: 51 CSS3
repeat ,border-image-source
,border-image-repeat stretch
border- ,border-image-width
border-image-outset image-slice
.
border-image :
border-image:source slice width outside repeat;
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border-width:15px;
width:250px;
padding:10px 20px;
-webkit-border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div> Here, the image is stretched to fill the area.</div>
></body
></html
: 51
: Firefox -moz- ,
Safari Chrome -webkit- Opera -o-
CSS3 box-shadow
, :
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
>""http://www.w3.org/TR/html4/loose.dtd
><html
><head
>"<style type="text/css
div
{
;width:300px
;height:100px
;background-color:yellow
;-webkit-box-shadow: 10px 10px 5px #888888
}
></style
></head
><body
><div></div
></body
></html
: 52
: Safari Chrome -webkit-
CSS3 Backgrounds
CSS3
, background-size
,CSS3 :
;background-size: 80px 60px
.
: Firefox -moz-
background-origin
context-box
padding-box
border-box
.
: 53 CSS3
: Safari Chrome -webkit-
CSS3
:
;)background-image:url(back1.gif),url(back2.png
CSS3
CSS3
:
hanging-punctuation
none first
last allow- ><p
end force-
end
punctuation-trim
start end
><p
allow-end
adjacent
none
text-justify
auto inter-
word inter- text-align
ideograph
Justify
distribute
inter-cluster
kashida trim
text-outline
text-overflow
clip ellipsis
string
text-shadow
text-wrap
none normal
unrestricted
suppress
word-break
normal
break-all
hyphenate
word-wrap
normal
word-break
word-break
: 13 CSS3
:
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
>""http://www.w3.org/TR/html4/loose.dtd
><html
><head
>"<style type="text/css
h1
{
;text-shadow: 5px 5px 5px #FF0000
}
></style
></head
><body
></h1 ><h1
></body
></html
CSS3
CSS
, CSS3
src
@font-face :
- .@font-face
font-family .
-
: Internet Exploer .eot
.ttf .otf
:
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
>""http://www.w3.org/TR/html4/loose.dtd
><html
><head
>"<style type="text/css
@font-face
{
;font-family: myFont
)'src: url('Sansation_Light.ttf
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
div
{
;font-family:myFont
}
></style
></head
><body
><div
></div
></body
></html
2D Transformation
CSS3
translate rotate scale
.transform
: Internet Explorer -ms- , Firefox
-moz- Opera -o- Chrome Safari
-webkit-
)translate(x,y
)translateX(n
X n
)translate(n
Y n
)scale(x,y
)scaleX(n
X n
)scaleY(n
Y n
)rotate(
)skew(X,Y
X Y
)skewX(
)skewY(
Y
: 14 CSS3
:
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
>""http://www.w3.org/TR/html4/loose.dtd
><html
><head
>"<style type="text/css
div
{
;)-webkit-transform:skew(30deg,20deg
;width:100px
;height:75px
;background-color:red
;border:1px solid black
}
></style
></head
><body
><div>It is CSS3 Magic!</div
></body
></html
: 54 Skew
: deg degree
rad
3D transformation
CSS3
:
)translate3d(x,y,z
)translateX(n
n X
)translateY(n
n Y
)translateZ(n
n Z
)scale3d(x,y,z
)scaleX(n
X n
)scaleY(n
Y n
)scaleZ(n
Z n
)rotate3d(x,y,z,
)rotateX(
)rotateY(
)rotateZ(
)perspective(n
: 15 CSS3
Transition
CSS3
transition CSS
.
:
transition: property duration;
duration property
:
transition: property1 duration1, property2 duration2, etc;
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s, height 2s;
}
div:hover
{
width:200px;
height:200px;
webkit-transform:rotate(180deg);
}
></style
></head
><body
><div>Hover over me to see the transition effect!</div
></body
></html
:
s second
CSS3
CSS3
.gif flash ,
:
- @keyframe
from ,to
.
- animation .
:
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
>""http://www.w3.org/TR/html4/loose.dtd
><html
><head
>"<style type="text/css
div
{
;width:100px
;height:100px
;background:red
;-webkit-animation:myAnimation 5s
}
@-webkit-keyframes myAnimation
{
};from {background:red
};to {background:yellow
}
></style
></head
><body
><div></div
></body
></html
CSS
@keyframes:
@-webkit-keyframes myAnimation
{
};0% {background:red
};15% {backgroung:green;width:150px;color:white
};50% {height:350px
};100% {background:yellow
}
0% 100%
.
:
CSS3
CSS3 ( Multi-Columns
) :
- :
column-count ,
.
- :
column-width ,column-gap
.
. :
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.newspaper
{
-webkit-column-count:3;
}
</style>
</head>
<body>
<div class="newspaper">
this is a sample content
sample content this is a
this is a sample content
sample content this is a
this is a sample content
sample content this is a
this is a sample content
sample content this is a
this is a sample content
sample content this is a
this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content this is a
sample content this is a sample content
this is a sample content.
></div
></body
></html
: 55 .
column-rule
:
;column-rule: 4px dotted black
CSS3 User Interface
CSS3
:
appearance
normal icon ()
window button
menu field
icon
auto inherit
nav-down
auto
nav-right
nav-left
inherit
nav-up
nav-index
resize
none horizontal
Tab
Tab
div
vertical both
: 56 CSS3
CSS3
CSS3 :
tag1~tag2
p~ul
]tag[attribute^=v
]"a[href^="https
href https
]tag[attribute$=v
]"a[href$=".xml
]tag[attribute*=v
]"a[href*="micro
:first-of-type
p:first-of-type
:last-of-type
p:last-of-type
:only-of-type
p:only-of-type
:only-child
p:only-child
):nth-child(n
)p:nth-child(2
):nth-last-child(n
)p:nth-last-child(2
):nth-of-type(n
)p:nth-of-type(2
> <p
:last-child
p:last-child
> <p
:root
:root
:empty
p:empty
> <p
.xml
micro
> <p
> <p
> <p
> <p
> <p
> <p
:target
#news:target
:enabled
input:enabled
:disabled
input:disabled
:checked
input:checked
):not(selector
):not(p
><p
::selection
::selection
#news
(
)
: 16 CSS3
CSS3
HTML5 CSS3
, : ( )
Java Script jQuery
PHP ASP.NET % "
,"Web Developer % - -
.
HTML5 CSS3
: HTML .......................
............. HTML
:
: > <p ................ align
: .................................................
: > .................................................. <hr /
: .
: .........................................
: ..............................
: ...................................................
: ..................................................
: ...........................
: ................................................
: ...........................
: ..................................................
: ..................................................
: .........................................................
: ...................................
: ..........................
: ...................................................
: ..................................... HTML
: HTML ..............................................
: rowspan . colspan
: ..................................................
: ........................................................
: checkbox ...................................... radio
: .............................................select
: ......................................... textarea
: .................................................. fieldSet
: ...............................................
: ..................................................
: ..............
: ............
: ...........................
: ..........................................
: ..................................................
:
....................................................................................
: ...................................
: .........
: CSS ........................................
.................... CSS
:
: ...................................... z-index
: ...............
: ...............................................box model
: ................................
: .......................... margin
: ..................................... float
: .................................................. @media
: .................................................. @media
: border-radius .......................
: ............................................... CSS3
: ...................................
: ...................................
: ......................... CSS3
: Skew ..........................
: .................................... .
: ............................... CSS3
: ........................... HTML
: ........................................... HTML
: type < ......................... >input
: .............................................................HTML
: > .................................................... <video
: > .................................................... <video
: .................................. HTML 5
: > ......................................... <canvas
: ............................................. HTML 5
: ................................................... CSS
: ...................................................... @media
: ............................................................. CSS
: ............................. CSS3
: ...............................CSS3
: ............................... CSS3
: .............................................. CSS3
.........................................................................
...........................................................................
...............................................................
........................................................................
HTML ...............................................................
HTML ......................................
.................................................... HTML
................................................................HTML
....................................................... WHITE SPACES
................................................... HTML
.................................................. HTML
................................................... ATTRIBUTES
.................................................... HEADINGS
.......................................... HORIZONTAL LINE
.......................................................... COMMENTS
............................................... PARAGRAPHS
.................................... TEXT FORMATTING
...............................SPECIAL CHARACTERS
.................................................. HYPER LINKS
....................................................... IMAGES
..............................................
IMAGE MAPS
.................................................
.............................................. INTERNAL LINKING
.................................................................. LISTS
...............................................................TABLES
.........................................................
FORMS
...............................................................
.........................................
............................................................. FRAMES
.............................................................. META
............................................................. HTML
...................................................................... XHTML
................................................................ XHTML
> ............................................. <!DOCTYPE
.......................................................
............................................ XHTML
HTML5
......................................................................
HTML 5
.........................................
..........................................................VIDEO
........................................................ AUDIO
....................................................... FORMS
........................................................ CANVAS
...............................................
............................................... HTML 5
........................................................................
CSS ................................................................
................................................ CSS
........................................................ CSS
............................................................... CSS
.................................................
................................................... FONTS
....................................................
........................................... BACKGROUNDS
.....................................................
...................................................
............................................ POSITIONING
.....................................................CSS
........................................... CSS BOX MODEL
................................................... BORDER
.......................................... PADDING
.......................................... MARGIN
.............................................................
.......................................................
............................................................ OPACITY
............................................................ FLOATING
............................................................... CSS
.................................................. MEDIA TYPES
CSS
.........................................................
..................................................................... CSS 3
.......................................................
.............................................. CSS3 BORDERS
....................................... CSS3 BACKGROUNDS
................................ CSS3
........................................ CSS3
........................ 2D TRANSFORMATION
....................... 3D TRANSFORMATION
................................................ TRANSITION
.............................................................. CSS3
.................................................. CSS3
...................................... CSS3 USER INTERFACE
............................................................. CSS3
.....................................................................
.............................................................
..............................................................
...........................................................
( )
:
:
.
- -.
- -
.
-
. -
. -
- -
-
.
-
.
- -
-
.
HTML5 & CSS3
. -
jQuery
- -
. -
3D Game Studio
F1
. -
Desktop: C#, VB.NET, VB6, Java.
Server-Side: ASP.NET classic and ASP.NET MVC,
PHP Classic & PHP MVC using CodeIginiter
framework., JSP.
Web:
o
Client-Side: HTML 5, CSS 3, java script & jQuery.
Technologies: XML, JSON.
Smart phones: Android programming.
-Access.
-Word, MS-PowerPoint, Photoshop, Maintenance
skills
ASP.NET
vb4arab.com -
. -
-
. -
-
-
. -
-
. -
- -
-
.
)
(
-
.
: -
You might also like
- الأمن و الحماية في الإنترنت - الجزء الأولNo ratings yetالأمن و الحماية في الإنترنت - الجزء الأول18 pages
- تعلم أساسيات الأندرويد بالعربية بإستخدام منصة Android StudioNo ratings yetتعلم أساسيات الأندرويد بالعربية بإستخدام منصة Android Studio116 pages
- مشاركة قواعد البيانات اكسيس على الشبكة - قواعد بيانات Microsoft Access - منتديات الفريق العربي للبرمجة PDFNo ratings yetمشاركة قواعد البيانات اكسيس على الشبكة - قواعد بيانات Microsoft Access - منتديات الفريق العربي للبرمجة PDF26 pages
- php تعلم كيف تقوم ببرمجة موقع بنفسك من الصفر للاحترافNo ratings yetphp تعلم كيف تقوم ببرمجة موقع بنفسك من الصفر للاحتراف45 pages
- إختبار منتصف الفصل - الوحدة الأولى - أساسيات علم الحاسبNo ratings yetإختبار منتصف الفصل - الوحدة الأولى - أساسيات علم الحاسب8 pages
- أهم أوامر Run التي يجب على كل مستخدم للويندوز أن يعرفهاNo ratings yetأهم أوامر Run التي يجب على كل مستخدم للويندوز أن يعرفها12 pages
- مقدمة إلى برمجة الحاسب باستخدام لغة بايثون.. شرائح عرض المحاضرة الأولى67% (18)مقدمة إلى برمجة الحاسب باستخدام لغة بايثون.. شرائح عرض المحاضرة الأولى11 pages
- Guid To Microsoft® Servers - شرح عملي باللغة العربية100% (1)Guid To Microsoft® Servers - شرح عملي باللغة العربية295 pages
- تعلم لغة HTML 5 تصميم المواقع الالكترونية شرح مبسط وشاملNo ratings yetتعلم لغة HTML 5 تصميم المواقع الالكترونية شرح مبسط وشامل46 pages
