Summary HTML And CSS
السالم عليكم
ﷺ صلوا على النبي
HTML </…>
Hyper Text Markup Language
Code html kaytkwn mn 2 hwayj principal (Head ) and (body) safi .
Kaybda b<html> ola <!DOCTYPE> <html> o kayssalli b </html> .
Fhad resume ghandir ghir dakchi li 9rina , hit html fih bzaaaf..
Head
Taykon fih Tiltle <title> li hwa 3onwan dyal site li taykon lfo9 ,ola <style>,ola <link rel="stylesheet" href="style.css" >
(3la hssab css ) ola <script > (3la hssab javascript) .
Body
Hna fin taykon kolshi , text , image , link , everything ….
Ila maknach khdamin b CSS n9dro nzido fih chi style li ghaytb9 3la site kaml .
I. <header>
Matkhltoch ma bin <head> o <header> , head dkrnah 9bl , header hwa section li katkon fo9 dyal site .
Taykon fiha text , menu , logo , image ….
II. <footer>
Bhalo bhal header ghir footer taykon ltht machi lfo9 .
III. <h(1,2,3,4,5,6)>
hado homa l heading , h1 hwa lkbir h6 hwa sghir ga3 .
h1>h2>h3>h4>h5>h6
IV. <p>
Hna fin tanktbo text li bghina n9dro nzido fih heading ola image ola li bghima walakin hwa tayb9a khass ghir b l text
Text n9dro ndiro lih <i> text mayl ,<b> text ghlid ,<u> text msstr , <br> no9ta rj3 lsstr .
V. Link <a>
_Kayn link externe bhal hada :
link <a href=”https://www.google.com “ target=”blank” >hna lwst kandiro text li bghina yban lina fblast link
</a>
darori ndiro (https://) , bach ikhdm .
_O kayn link interne bhal hada : <a href=”new.html” target=”blank”>
Kanlinkiw bih chi fichier li 3ndna , kandiro (/new.html) ila kan dakhl dossier li m3a file html , (../new.html)
ila kan bra doosier li fih file html .
(Tilte=”…”) 3onwan dyal link ,(target=”blank”) hada bach nhlo link fpage khra.
VI. <div>
Bhalo bhal <p> ghir hwa general n9dro ndiro fih kolchi hta <p> ,<figure> ,<form> <,table> ….
VII. <span>
Span hwa khass bhaja whda , matalan chi haja bghity t3zlha bohda mn jiht alwan ola forme kadirha wst span .
VIII. List
3ndna 3 dyal lists ordered list <ol>, unordered list <ul> , definition list <dl> baynin mn smyathom .
1. <ol>
List m9ada mrtba trtib dyalha 3la hassab type <ol type= 1,A,a,i,I>..
2. <ul>
L3kss dyal ol mamrtbach hya 3la hassab achkal <ul type=circle, square …..>
Dakchi li dakhl ol , ul kandiroh f <li> list content .
3. <dl>
Had list fiha <dt> lhaja li bghina ndiro liha définition wstha kayn <dd> definition dyal dik lhaja .
IX. <figure>
Howa ghaliban kandiro fih <video>,<audio>,<img>
Bach n3yto 3la Img ola video ola audio kandiro fwst <source> src=”image.png” , 3ndak itkhlt likom m3a href dyal
link rah mkhtalfin .
Ex : <img src=”image.png” title=”image” alt=”this Is an image ”></img>
(Tilte=”…”) hwa 3nwan dyal image , (Alt=”..”) hwa message ola ktba li katl3 fi halat makhdmatch image
<video >, <audio> 3ndhom nafss parameter
Ex :<video title=”video” controls , autoplay , loop>
<source src=”video.mp4” type=”video/mp4”></video>.
Ex :<audio title=”audio” controls , autoplay , loop>
<source src=”audio.mp3” type=”audio/mp3”></audio>.
controls : buttonat dyal tahakom , autoplay: ikhdm ghir bohdo , loop : ib9a it3awd ggir bohdo
<video>,<audio>,<img> N9dro ndirohom bra dyal figure machi mochkil .
X. <table>
Table kaytkwn mn 2 <tr><td>
<tr> howa bhal line ligne .rows
<td>howa cellule dyal table ola colons , taykono wst <tr> hna</tr>
Parameter dyalhom :
Rowspan : hya tjm3 joj ola bzaf dyal ligne or line , hadok lkhanat vertical.
Colspan : hya tjm3 joj ola bzaf dyal colon , khnat horizontal .
Cellspacing : masafa mabin table o cellules hta masafa bin cellule o cellule .
Cellpadding : surface dyal cellule .
Border , background , width, height,, dakchi ghamchrhoh f CSS mn b3d ..
XI. <form>
1. <input>
Hwa li kayt3awd bzaf flform , hwa dik lkhna li kan3mro fchi form , kaykhtalf 3la hassab type :
• Text
Nom , prenom ….
<input type="text">
• Email
Email khasso tkon fih @exemple.com
<input type="email">
• Password
Password ay haja dkhltiha maghatbanch ,normal rah password hada.
<input type="password">
• Checkbox
Multiple selection , khtar li 3jbk wakha tkhtarhom kamlin machi mochkil,
<input type="checkbox">
• Radio
Unique selection , khtar li 3jbk walakin ghir whda safi .
<input type="radio">
• Number
Ar9am safi
<input type="number">
• Date
<input type="date">
• Time
<input type="time">
• Color
<input type="color">
• Range
<input type="range">
2. Mn ghir type 3ndna :
• Minlength
Max dyal letter o number li t9dr tdkhl.
• Maxlength
Min dyal letters o numbers li t9dr tdkhl .
• Placeholder
Text li kaytl3 9bl madir walo.
• Autofocus
Lkhana li kay9tarho 3lik , t3mrha matalan .
• Required
Y3ni daroooori khassk t3mr hna .
Hado li dkrna 9bl taykono fwst <input type=”…” maxlength=””; minlength >
3. <fieldset>
Hada t9dro diroh b3d <form> , howa kay9ssm form ila bghito o kayzid titre fo9ha
4. <legend>
Taykon fih titre li kaytzad fo9 , ila kan wst fieldset .
5. <button>
Hwa button 3adi
Kaykhtalf 3la hassab type
• Submit :
Button kayssift form.
<button type="submit">
• Reset :
Bitton kaymss data li dkhlna flform .
<button type="reset">
CSS <style>
Cascading Style Sheets
CSS hwa deja taykon f html bla mandkhlo file “style.css” ..
1-Kandkhlo fcss mli kandiro style wst chi element dyal html
Ex : < table style=”backround-color:blue; border:2; width:400px; height:300px”>
2-Ola kandiro <style >fl <head>
Ex : <head>
<title>3EV</title>
<style>
table {
backround-color:blue;
border:2;
width:400px;
height:300px}
</head>
3-kandiro fichier css bohdo ondiro lih link lhtml
<head>
<title>3EV</title>
<link rel="stylesheet" href="style.css" >
</head>
➢ File css (style.css) , taykon bhal haka :
Bnissba l selector , bhal <p>,<div>,<table>, <form>…. , fcss tankbohom nichan o nzido styles li bghina (
color , background …..)
Ex :
p{
Color:red;
Background-color:blue;
}
table{
border:solid 2px red ;
cellspacing :2 ;
cellpadding :5 ;
Background-color:blue;
}
CLASS , ID
Class o id , khdma dyalhom bhal bhal ikhtilaf hwa , kifach nktbohom f file dyal (style .css) ,
Class : f css kan3yto 3lih b( .class) , o n9dro ndiroh lbzaf dyal elements .
Ex : Html : <div class="all">
Css : .all{
margin: 10px;
padding: 10px ;
padding-left: 20px ;
background-color: #cccccc;
border: 0px solid black;
border-radius: 15px ; }
ID : kan3yto 3lih f css b (#id) , o taykon khass b element wahd .
Ex: Html : <div id="all">
Css : #all{
margin: 10px;
padding: 10px ;
padding-left: 20px ;
background-color: #cccccc;
border: 0px solid black;
border-radius: 15px ; }
Exemple File (style.css) :
Site bla CSS :
Site m3a CSS :
Form bla CSS :
Form m3a CSS :
Li ma3ndoch PC , T9dr tkhdm fhad applications , fihom cour , quiz , exercices , hta pratique :
HTML : https://a2zapk.io/dload/1328289/file/
CSS: https://www.apkshub.com/down/com.codeliber.csspro_1.1.7_free
Saffi…… , hawlt nlkhss lmaximum , mohim i9dr nkon nssit chi haja , ila nssit chi haja rah cour kayn fplateforme fih
kolchi .
GOOD LUCK
From : Mohammed
