Post on 12-Apr-2017
INITIATION HTML / CSSCreated by Thamer Belfkih
HyperText Mark-Up Language
Cascading Style Sheets
CRÉATION DU PROJET
DOCTYPEle seule type de document à utiliser.
<!doctype html>
STRUCTURETECHNIQUE
Le HTML a une structure arborescente qui commence par <html>
Elle est composée de 2 grandes parties :
TITRE ET DESCRIPTIONles informations complémentaires (meta).
invisible pour l utilisateur.sont destinées aux moteurs de recherche.
<title>Titre de la page </title><<meta name="description" content="description de la page ">
ICÔNEle titre de la page s affiche également dans l onglet du
navigateur avec une icône (favion) .<<link rel="icon" href="favion.png">
FEUILLES DE STYLES CSSPour inclure une feuille de styles (stylesheet) :
<link rel="stylesheet" href="style.css">
MAUVAISES PRATIQUES :<style> </style><p style="color:red;"></p>
pcolor:red;
CONTENU HTML & SÉMANTIQUE
titres et paragraphes
h1 à h6 : titres et sous titres ( Headings)
p: contenu classique ( Paragraph)
br: revenir à la ligne (break) dans une paragraphe
listes et menus
ul : liste à puces ( unordered list)
ol : liste numérotée (ordered list)
li : élément dans une liste (list item)
##Example :
<ul> <li>R1</li> <li>R2 <ul> <li>R2.1</li> <li>R2.2</li> <li>R2.3</li> </ul> </li> <li>R3</li></ul>
CONTENUS MULTIMÉDIA ET INTERACTIF
LIENS HYPERTEXTES :IL EXISTE PLUSIEURS TYPES DELIENS
lien vers une autre page de site<a href="page.html">
lien vers un site externe (nouvel onglet) :<a href="http://example.com/" target="_blank">
lien vers un fichier<a href="fichier.pdf">
IMAGES
Image se place ainsi :<img src="image.png" width="50" height="100" alt="img not visible" title=
On indique :
la source (src)les dimentions en pixelsalt : text alternatif (accessibilité)title : text au survol
DIVsignifiant division du document
<div>
SELECTEURS CSS
IDENTIFIANTS & CLASSESToute balise HTML peut :
id : avoir un identifiant uniqueclass : appartenir à un ou plusieurs groupes
<div id="header" class="main">
Sélecteurs principaux
p#idname.classname
Pseudo-classes
a:hoverul>li:first-child
LE GRAPHISME EN CSS
TEXTE & POLICESPolices
font-style : normal | italic ;font-weight : normal | boldfont-size :12px;font-family :'Tahoma' , 'Arial' , 'sans-serif';
texte
text-align : left | center | right;text-decoration : none | underline| line-throughtext-transform : none | capitalize |uppercase |lowercasefont-family :'Tahoma' , 'Arial' , 'sans-serif';
Listes
list-style-type : disc | circle | square |none;list-style-image : none | url(img.jpg)list-style-position : outside | inside
Couleurs & unités
color : red;
rgb(0,255,0) :red,green,bluered :simple coleur#00FF00 : hexadécimal
Fonds
background-image: url(img.png);background-repeat : repeat |repeat-x|repeat-y|no-repeatbackground-color:rgb(0,255,0);
Bordures et arrondis
border-width:1px;border-style: none |solid |dotted |dashed |doubleborder-color :#FFFFFF;border :1px solid red ;border-radius :5px ;
POSITIONNEMENT
POSITIONNEMENT
position
position:static |relative |fixed |absolute;
margin
margin:10px 10px 10px 10px;margin-left:10px;margin-top:10px;
padding
padding:10px 10px 10px 10px;padding-left:10px;padding-top:10px;
TABLEAUthead : tableau header
tbody : tableau body
tr : indique le début et la fin d'une ligne du tableau
td : indique le début et la fin du contenu d'une cellule
##Example :
<table> <thead> <tr> <th>Item</th> <th>Value</th> <th>Quantity</th> </tr> </thead> <tbody> <tr> <td>Apples</td> <td>$1</td> <td>7</td> </tr> <tr> <td>Lemonade</td> <td>$2</td>
FORMULAIRES
Input<input type="" name="" placeholder="" value=""/>
Type input :
text
checkbox
radio
number
date
file
submit
...
##Select box :
<select name="" multiple>
<option value="val1">option1</option>
<option value="val2">option2</option>
</select>
##textarea :
<textarea name="" row="" cols="">
</textarea>
LIENS UTILEShttps://developer.mozilla.org/fr/docs/Web/HTML
https://developer.mozilla.org/fr/docs/Web/CSS
w3schools.com
CONTACTThamer.belfkih@hotmail.com