R303: Technologies Web
S1 2026-2027 - IUT - Université de Lille, BUT2 SD
Cours basé sur les cours d'Initiation au développement web de Laure Petrucci et d'Initiation Web de Carlos Olarte à l'USPN.
Les TPs sont basés des TPs de Fatima Belkouch-Ameline's pour le même cours à l'IUT de l'Université de Lille.
Aide-mémoire
Balises HTML essentielles
| Balise | Rôle | Type |
|---|---|---|
<html> <head> <body> | Structure globale du document | — |
<title> <meta> | Titre et métadonnées (référencement) | — |
<h1> … <h6> | Titres (un seul <h1>) | bloc |
<p> <br> | Paragraphe, retour à la ligne | bloc / vide |
<blockquote> | Longue citation mise en retrait | bloc |
<pre> | Texte pré-formaté (espaces et sauts conservés) | bloc |
<code> <small> <sub> <sup> | Code, petit texte, indice, exposant | en ligne |
<strong> <em> <mark> | Sens du texte (gras, italique, marqué) | en ligne |
<div> <span> | Sections de bloc / en-ligne | bloc / en ligne |
<ul> <ol> <li> | Listes (et attribut type : 1, A, a, I, i) | bloc |
<dl> <dt> <dd> | Glossaire / liste de définitions | bloc |
<a href="..."> | Hyperlien (absolu, relatif, #id, mailto:) | en ligne |
<img> <figure> <figcaption> | Image et légende | en ligne / bloc |
<map> <area> | Zones réactives (rect, circle, poly) | en ligne |
<table> <caption> <thead> <tbody> <tfoot> <tr> <td> <th> | Tableaux (colspan, rowspan) | bloc |
<header> <footer> <nav> <aside> <section> | Structure sémantique | bloc |
<hr> | Ligne horizontale (attributs dépassés : size, width, color) | vide |
<form> <fieldset> <legend> <label> | Formulaires (méthodes GET/POST) | bloc |
<input> <select> <option> <textarea> <button> | Champs de formulaire | en ligne |
<audio> <video> | Multimédia | bloc |
Propriétés CSS essentielles
| Propriété | Exemple |
|---|---|
color / background-color | #D04A0B, rgb(208,74,11), rgba(...,0.5) |
background-image / background-repeat | url('img/x.png'), repeat-y |
font-family | Calibri, sans-serif, 'Courier New', monospace |
font-size / font-weight / font-style | 14px, 2em, bold, italic |
text-align / text-indent | justify, center, 1em |
text-decoration | underline, none |
list-style-type | none, upper-alpha, lower-roman |
padding / margin | 1em 2em, 10px, 0 auto |
border / border-radius / border-collapse | 1px solid black, 8px, collapse |
width / height | 80%, 300px, 100px |
float / clear | left, right, both |
display | block, inline, inline-block, none, flex |
flex / flex-direction / gap | 1, column, 20px |
| Pseudo-classes / éléments | :hover, :first-child, :nth-child(even), ::first-letter |
@media | @media only screen and (max-width: 480px) { ... } |