HTML / CSS / XML / LESS

Image

HTML est le langage de balisage de base du développement Web, créé en 1993.

Il permet essentiellement de réaliser des pages Web, voire des contenus multimédias.

Exemples de codes

Nous commencons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués.

C 0001 - Bonjour tout le monde !

Dîtes bonjour...

<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Bonjour tout le monde !</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

 

⇒ Voir le résultat

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0002 - Jouer avec les couleurs

Utilisez des couleurs...

<!DOCTYPE html>
<html>
<body>
<h3 style="color:blue;">TITRE</h3>
<p style="color:black;">Lorem ipsum dolor sit amet</p>
</body>
</html>

 

⇒ Voir le résultat

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0003 - Les listes

Réalisez une liste...

<!DOCTYPE html>
<html>
<body>
<h1>Liste de voitures</h1>
<ul>  
<li>Rolls-Royce</li>
 
<li>Maserati</li>
 
<li>Ferrari</li>
</ul>  
</body>
</html>

 

⇒ Voir le résultat

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0004 - Créer un formulaire

Un formulaire avec un traitement en PHP...

<!DOCTYPE html>
<html>
<body>
<h3>Petit formulaire</h3>
<form action="processing.php">
<label for="fname">PRENOM:</label>
<
br>
<input type="text" id="fname" name="fname" value="John">
<
br>
<label for="lname">NOM:</label>
<
br>
<input type="text" id="lname" name="lname" value="Smith">
<
br>
<
br>
<input type="submit" value="Soumettre">
</form>
<p>Si vous cliquez sur le bouton Soumettre, un fichier en PHP traitera les informations soumises dans ce formulaire (pour l'instant inactif)...</p>
</body>
</html>

 

⇒ Voir le résultat

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

Info+

Origine
» Date de création : 1993
* Créé par World Wide Web Consortium & WHATWG
* Basé sur Standard Generalized Markup Language
* Format ouvert

Cas pratiques

Afin de vous entraîner, nous ajoutons chaque semaine dans cette section des petits programmes pour vous maintenir à niveau.

CAS 1

NIVEAU BASE

Présenter du contenu sur une page

Ce petit programme vous permettra de développer du contenu éditorial dans une page HTML classique, en utilisant notamment CSS.

ESSAYEZ

CAS 2

NIVEAU INTERMÉDIAIRE

Créer un petit site Web

Ce petit kit vous permettra de concevoir un site HTML classique et l'éditer en ligne.

ESSAYEZ

CAS 3

NIVEAU EXPERT

Développer une librairie CSS, puis travailler avec PHP

Concevoir et développer une librairie de fichiers en CSS, pour vous permettre d'embellir un site Web en HTML, puis intégrer dans le corps de ces pages des scripts en PHP liés à une base de données MySQL.

ESSAYEZ
2021 (C) Fond of Code tm (marque déposée) - Reflex001 / Diego Piccini (da Todi).
Tous droits réservés. Contenu éditorial protégé (www.lewebethique.com).

À propos...

À propos...
Reflex001

Programmation
Développement Web

Rappels

Rappels

Légal/Support

Légal/Support
Image