Initiation html css

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';

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

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 UTILEShttps://developer.mozilla.org/fr/docs/Web/HTML

https://developer.mozilla.org/fr/docs/Web/CSS

w3schools.com

[email protected]

Initiation html css

Technology

Transcript of Initiation html css