R303: Web Techs
Fall 2026 - IUT - University of Lille, BUT2 SD
Material based on the material of Initiation au développement web by Laure Petrucci and Initiation Web by Carlos Olarte at USPN.
Slides (with blanks to fill) [fr]
TPs are based on Fatima Belkouch-Ameline's TPs for the same class at University of Lille's IUT.
Cheat Sheet
Essential HTML tags
| Tag | Role | Type |
|---|---|---|
<html> <head> <body> | Global document structure | — |
<title> <meta> | Title and metadata (SEO) | — |
<h1> … <h6> | Headings (only one <h1>) | block |
<p> <br> | Paragraph, line break | block / void |
<blockquote> | Long indented quotation | block |
<pre> | Pre-formatted text (spaces and line breaks preserved) | block |
<code> <small> <sub> <sup> | Code, small text, subscript, superscript | inline |
<strong> <em> <mark> | Text emphasis (bold, italic, highlighted) | inline |
<div> <span> | Block / inline sections | block / inline |
<ul> <ol> <li> | Lists (and type attribute: 1, A, a, I, i) | block |
<dl> <dt> <dd> | Glossary / definition list | block |
<a href="..."> | Hyperlink (absolute, relative, #id, mailto:) | inline |
<img> <figure> <figcaption> | Image and caption | inline / block |
<map> <area> | Image maps (rect, circle, poly) | inline |
<table> <caption> <thead> <tbody> <tfoot> <tr> <td> <th> | Tables (colspan, rowspan) | block |
<header> <footer> <nav> <aside> <section> | Semantic structure | block |
<hr> | Horizontal rule (deprecated attributes: size, width, color) | void |
<form> <fieldset> <legend> <label> | Forms (GET/POST methods) | block |
<input> <select> <option> <textarea> <button> | Form fields | inline |
<audio> <video> | Multimedia | block |
Essential CSS properties
| Property | Example |
|---|---|
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 / elements | :hover, :first-child, :nth-child(even), ::first-letter |
@media | @media only screen and (max-width: 480px) { ... } |