Scribd
Upload
2 views

summary html&css (1)

The document provides an overview of HTML and CSS, detailing the structure of HTML documents, including the head and body sections, as well as various HTML elements such as headers, footers, links, and forms. It also covers CSS basics, including how to apply styles to HTML elements, the use of classes and IDs, and examples of styling with CSS. The document emphasizes the importance of these technologies in web development and provides resources for further learning.

Uploaded by

Abdellah Harricou
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

summary html&css (1)

The document provides an overview of HTML and CSS, detailing the structure of HTML documents, including the head and body sections, as well as various HTML elements such as headers, footers, links, and forms. It also covers CSS basics, including how to apply styles to HTML elements, the use of classes and IDs, and examples of styling with CSS. The document emphasizes the importance of these technologies in web development and provides resources for further learning.

Uploaded by

Abdellah Harricou
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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

You might also like