Theme 2 - Le Web - HTML & CSS

Thème 2 : le web - cours
HTML ET CSS
I. Langage HTML
Structure de base d’une page web :
<!DOCTYPE html>
<html>
<head>
<title>Titre</title>
</head>
<body>
<p>Ceci est mon paragraphe</p>
</body>
</html>
BALISE OU Fonction Utilisation

ATTRIBUT
Toujours obligatoire Explications Exemples
Ne se ferme pas
< !DOCTYPE html > Obligatoire dès le début du code. Il < !DOCTYPE html >
indique au navigateur que le site est en
code html. <html>
<html> Déclaration du document HTML. Elle </html>

englobe tout le contenu de la page.
<head> Destiné au navigateur, il fournit des <head>
informations générales sur le document
comme son titre, sur l’onglet, les feuilles …
de style…
</head>
<title> Définit le titre du document, tel qu'il <title>Nom onglet </title>

apparaît dans la barre de titre du
navigateur ou sur l'onglet de la page.
<body> Partie principale du document HTML. <body>.

C’est entre ces balises qu’on trouvera tout
le contenu de la page web : le texte, les …
images, les liens hypertextes…
</body>
<p> Définit un paragraphe contenant une ou <p>Texte d’un paragraphe</p>

plusieurs phrases.
<br/> Revient à la ligne. Cette balise peut aussi <p>Texte du paragraphe</p>

permettre de sauter des lignes
<br/>
<p>Texte d’un autre

paragraphe</p>
<h1> <h2> Permet de faire ressortir 6 niveaux de <h1></h1> ou <h2></h2> ou

titres. h1 étant le plus important et h6, le <h3></h3> ou <h4></h4> ou
<h3> <h4> moins important. Elles sont utilisées pour <h5></h5> ou <h6></h6>
faire ressortir la hiérarchisation des titres.
<h5> <h6>
<u> Pour souligner un texte <u>Texte à souligner</u>
<b> Utilisée dans faire apparaître un partie du <b>Texte à écrire en gras</b>

texte en gras.
<em> Fait apparaître un texte en italique. <em>Texte à écrire en

italique</em>
<strong> Est utilisé pour donner de l'importance à <strong>Texte à faire

un texte, cela se traduit généralement par ressortir</strong>
un affichage en gras.
id Cet attribut permet d’insérer dans une <h2 id="signet-chat">Le
balise, un signet vers lequel on orientera chat</h2> ou
un lien hypertexte.
<p id="signet-chat">Le chat</p>
<a href="#… Définit un lien hypertexte sur le texte <a href="#signet-chat">Matou</a>

Matou qui conduit au signet nommé
signet-chat.
<a Définie un lien hypertexte sur le texte <a href="les_chats/chat.html

Chat vers le fichier chat.html qui est ">chat</a>
href="dossier/fichi
placé dans le dossier les_chats
er…
<a href="https://... Définit un lien vers un site web. <a href="https://fr.wikipedia.org

/wiki/Chat">chat</a>
<img src="…"/> Insérer dans la page, une image dont le <img src="chien.jpg"/>
fichier est placé à côté de la page html.
Les formats jpg, png et gif sont les plus

couramment utilisés dans les sites web.
Pour insérer une image rangée dans un <img src="les_chiens/chien.jpg"/>

dossier à côte de la page html.
<img
Pour insérer dans la page web une src=”https://fr.wikipedia.org/wiki/C
image dont on connaît l’adresse URL. hien#/media/File:My_dog.jpg”/>
<ul>
<ul> <ul> permet de créer une liste non
ordonnée <li>Texte</li>
<li>Texte</li>
<li> <li> permet de créer une ligne de la liste </ul>
<ol>
<ol> <ol> permet de créer une liste ordonnée
<li>Texte</li>
<li>Texte</li>
</ol>
II. Langage CSS
Le langage CSS permet de faire la mise en page du site web.
Taper <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

dans la partie head de fichier html
Présentation
Explications Exemple
Balise {
Il peut s’agir de p, de h1, de body… p{
propriete1: valeur 1;
{ font-size: 16px ;
font-family: Verdana, Arial ;
Propriétés et valeurs, voir ci-dessous. text-align: right;
etc.
etc. ;
}
} }
Ne pas oublier de terminer la ligne de programme avec un ;
Propriétés Valeurs Utilisation
Explications Exemples
font-size 18px pour une valeur absolue font-size: 18px;
Permet de modifier la
taille de la police small pour une valeur relative font-size: small;
em pour s’adapter à la taille de l’écran. font-size: em;
font-family Nommer une police sans oublier les font-family: Comic Sans MS;
majuscules.
Impose la police de
caractère.
Nommer plusieurs polices pour avoir font-family: Comic Sans MS,Black,
plus de chance d’être lu. Arial, Verdana;
font-style Italic, oblique, normal Font-style: italic;
font-weight Bold pour gras ou une valeur font-weight: bold;
font-weight: 700;
text-decoration underline, line-through, overline, none text-decoration: overline;
Place une ligne sous,

sur ou au travers du
texte.
text-align center, left, right, justify text-align: center;
Color Taper une couleur en anglais ou taper color: #cccccc;

une valeur hexadécimale.
Donne une couleur au color: blue;
texte
background-color Dans body, taper une couleur en anglais background-color: #cccccc;

ou taper une valeur hexadécimale.
background-color: blue;
background-image Enregistrer l’image dans le dossier des background-image:

images du site. url("images/couleur-bois.jpg");
Permet d’utiliser une
image pour
l’arrière-plan.
/*C’est un commentaire*/
/* */ Ce qui est tapé n’a aucune importance.
Permet de faire des

commentaires non
apparents sur les
sites.
Width Nombre de pixels (px) ou width:500px;
Définir la largeur de la Pourcentage (%) ou width:30%;

page ou d’un cadre.
s’adapte au contenu (relative) width:relative;
height Nombre de pixels (px) ou s’adapte au
contenu (relative)
Définir la hauteur d’un
cadre.
float Gauche ou droite float:left;
Impose
l’emplacement dans
la page ou dans la
division de page.
Padding Nombre de pixels (px) padding:5px;
Laisse un espace
entre une division de
page et son contenu.
Border Nombre de pixels (px) border-width:6px;
Epaisseur ou style ou Solid ou dotted ou dashed ou double border-style : solid ;

couleur de la bordure
boder-color :red ;
Margin Nombre de pixels (px) margin : 10px ;
Marge par rapport

aux autres éléments.
Display Inline ou inline-block ou block display : inline-block;
Positionnement
III. Pour aller plus loin
A. HTML - COMPLEMENT
Balise Fonction Exemple
< div Crée une division de page avec l’attribut <div class="presentation">
class="…’’> class
</div> <p>J’écris mon texte</p>
Crée une division de page qui peut être
mise en forme et complété avec du texte et </div>
des photos. On peut facilement obtenir un
rectangle. Quand il y en a plusieurs, le
résultat obtenu peu se rapprocher d’un
tableau.
<span class=’’ Contrôler le style de petites parties de la <p>blabla blabla <span> important
‘’> </span> page (par exemple une phrase) : important </span> blabla blabla </p>
sélectionner une partie du texte et changer
le style.
B. METTRE EN FORME LES SELECTEURS class ET span

Une fois qu’ils ont été nommés dans la page html, ils peuvent être mis en forme dans la feuille style, en
n’oubliant pas de placer un point devant un class et devant span.
Dans la page html Dans la feuille de style css Résultat
<div class="cadre-titre"> .cadre-titre { Une division de page grise entourera le

texte. On peut aussi bien-sûr imposer sa
<p>la montagne est background:grey; taille et son emplacement.
belle</p>
}
</div>
<p>blabla blabla <span .surligne { Les mots « important important » seront

class= ‘’surligne’’> important surlignés en gris.
important </span> blabla background:grey;
blabla </p>
}

Theme 2 - Le Web - HTML &amp; CSS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Theme 2 - Le Web - HTML &amp; CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Thème 2 : le web - cours

BALISE OU Fonction Utilisation

Toujours obligatoire Explications Exemples

<html> Déclaration du document HTML. Elle </html>

<title> Définit le titre du document, tel qu'il <title>Nom onglet </title>

<body> Partie principale du document HTML. <body>.

<p> Définit un paragraphe contenant une ou <p>Texte d’un paragraphe</p>

<br/> Revient à la ligne. Cette balise peut aussi <p>Texte du paragraphe</p>

<p>Texte d’un autre

<h1> <h2> Permet de faire ressortir 6 niveaux de <h1></h1> ou <h2></h2> ou

<u> Pour souligner un texte <u>Texte à souligner</u>

<b> Utilisée dans faire apparaître un partie du <b>Texte à écrire en gras</b>

<em> Fait apparaître un texte en italique. <em>Texte à écrire en

<strong> Est utilisé pour donner de l'importance à <strong>Texte à faire

<a href="#… Définit un lien hypertexte sur le texte <a href="#signet-chat">Matou</a>

<a Définie un lien hypertexte sur le texte <a href="les_chats/chat.html

<a href="https://... Définit un lien vers un site web. <a href="https://fr.wikipedia.org

Les formats jpg, png et gif sont les plus

Pour insérer une image rangée dans un <img src="les_chiens/chien.jpg"/>

<li> <li> permet de créer une ligne de la liste </ul>

Taper <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

Ne pas oublier de terminer la ligne de programme avec un ;

Propriétés Valeurs Utilisation

font-size 18px pour une valeur absolue font-size: 18px;

em pour s’adapter à la taille de l’écran. font-size: em;

font-weight Bold pour gras ou une valeur font-weight: bold;

text-decoration underline, line-through, overline, none text-decoration: overline;

Place une ligne sous,

text-align center, left, right, justify text-align: center;

Color Taper une couleur en anglais ou taper color: #cccccc;

background-color Dans body, taper une couleur en anglais background-color: #cccccc;

background-image Enregistrer l’image dans le dossier des background-image:

Permet de faire des

Width Nombre de pixels (px) ou width:500px;

Définir la largeur de la Pourcentage (%) ou width:30%;

float Gauche ou droite float:left;

Padding Nombre de pixels (px) padding:5px;

Border Nombre de pixels (px) border-width:6px;

Epaisseur ou style ou Solid ou dotted ou dashed ou double border-style : solid ;

Margin Nombre de pixels (px) margin : 10px ;

Marge par rapport

Display Inline ou inline-block ou block display : inline-block;

Balise Fonction Exemple

B. METTRE EN FORME LES SELECTEURS class ET span

Dans la page html Dans la feuille de style css Résultat

<div class="cadre-titre"> .cadre-titre { Une division de page grise entourera le

<p>blabla blabla <span .surligne { Les mots « important important » seront

Das könnte Ihnen auch gefallen

Theme 2 - Le Web - HTML & CSS

Theme 2 - Le Web - HTML & CSS