Initiation html css

INITIATION HTML / CSS
Created by Thamer Belfkih

DOCTYPE
le seule type de document à utiliser.
<!doctype html>

STRUCTURE
TECHNIQUE
Le HTML a une structure arborescente qui commence par
<html>

Elle est composée de 2 grandes parties :

TITRE ET DESCRIPTION
les 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ÔNE
le 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 CSS
Pour inclure une feuille de styles (stylesheet) :
<link rel="stylesheet" href="style.css">

MAUVAISES PRATIQUES :
<style> </style>
<p style="color:red;"></p>
p{color: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 DE
LIENS
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 pixels
alt : text alternatif (accessibilité)
title : text au survol

DIV
signifiant division du document
<div>

IDENTIFIANTS & CLASSES
Toute balise HTML peut :
id : avoir un identifiant unique
class : appartenir à un ou plusieurs groupes
<div id="header" class="main">

Sélecteurs principaux
p
#idname
.classname

Pseudo-classes
a:hover
ul>li:first-child

TEXTE & POLICES
Polices
font-style : normal | italic ;
font-weight : normal | bold
font-size :12px;
font-family :'Tahoma' , 'Arial' , 'sans-serif';

Couleurs & unités
color : red;
rgb(0,255,0) :red,green,blue
red :simple coleur
#00FF00 : hexadécimal

Fonds
background-image: url(img.png);
background-repeat : repeat |repeat-x|repeat-y|no-repeat
background-color:rgb(0,255,0);

Bordures et arrondis
border-width:1px;
border-style: none |solid |dotted |dashed |double
border-color :#FFFFFF;
border :1px solid red ;
border-radius :5px ;

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;

TABLEAU
thead : 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>

Input
<input type="" name="" placeholder="" value=""/>

Type input :
text
checkbox
radio
number
date
email
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 UTILES
https://developer.mozilla.org/fr/docs/Web/HTML
https://developer.mozilla.org/fr/docs/Web/CSS
w3schools.com

CONTACT
Thamer.belfkih@hotmail.com

Initiation html css

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Initiation html css (20)

Initiation html css