HTML – La Base

Initié par Thomas Ricordeau. Date : jadis

Complété par Damien MUTI DESGROUAS. Date : 16/03/2020 --- effet coronavirus

Un peu d'histoire...

Le langage HTML (HyperText Markup Language) ou langage de balisage hypertexte est un système de codes en texte structurant les pages web sur internet. Créé en 1989 en Suisse au CERN (Conseil européen pour la recherche nucléaire) par le britannique Tim Berners-Lee, il est utilisé sur le Web (World Wide Web).

Le Web, à ne pas confondre avec Internet est une invention conjointe du britannique Tim Berners-Lee et du belge Robert Cailliau. Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de normalisation à but non lucratif, fondé en 1994. HTML5 est la dernière révision majeure d'HTML. Cette version a été finalisée en octobre 2014.

sources Wikipédia

Les outils

On peut utiliser n'importe quel traitement de texte pour rédiger du code html, par exemple notepad pour PC. Il est toutefois conseillé d'utiliser un logiciel dédié comme notepad++ ou Sublime Text (payant mais la version gratuite est largement suffisante) afin de disposer d'outils d'assistance durant la rédaction du code.

http://notepad-plus-plus.org/fr/

https://atom.io/

http://www.sublimetext.com/

...

Liens

Les excellents cours de Nicolas Brignol : http://www.neeko.fr/cours/, qui ont très largement servi à la préparation de ces tutoriels.

Les cours de Johan Segura, enseignant de mathématiques au lycée St Exupéry: http://segura.ddns.net/lycee/index.php?d=about

hello world!

<!DOCTYPE html>
<html lang = "fr">
<head>
<title> hello world! </title>
</head>
<body>
hello world!
</body>
</html>

Créer une page HTML basique

Le code est commenté pour favoriser la compréhension.

<!-- Commentaire -->

<!-- nature du document, ouverture balise html et langue-->
<!DOCTYPE html>
<html lang = "fr">
<!-- ouverture balise entête -->
<head>
<!-- titre: basic.html -->
<title>basic.html</title>
<!-- encodage Unicode permettant de gérer la plupart des caractères-->
<meta charset = "utf-8"/>
<!-- fermeture balise entête -->
</head>
<!-- ouverture balise corps -->
<body>
<!-- titre -->
<h1>titre de niveau 1</h1>
<!-- ouverture balise paragraphe -->
<p>
Ceci est un paragraphe.
Notez que le texte est automatiquement aligné.
<!-- fermeture balise paragraphe -->
</p>
<!-- fermeture balise corps -->
</body>
<!-- fermeture balise html -->
</html>

Les balises

Le langage html est composé de balises qui encadrent les parties du code, balise ouvrante <head>, balise fermante </head>. Les balises peuvent contenir des attributs, des balises enfants ou du texte. On dit d'une balise “contenante” qu'elle est parent. L'ensemble constitue une arborescence, autrement dit un arbre d'où l'importance de hiérarchiser votre code pour révéler son organisation (imbrication), par une indentation et des sauts de ligne clairs.

Si vous êtes contributeur du wiki, vous êtes déjà sans le savoir familier de ce type de langage balisé!

<balise ouvrante>

</balise fermante>

<!-- commentaire -->

html: balise encadrant tout le document

head: balise d'entête de la page, définissant les propriétés du document

meta: balise définissant un aspect du document

title: balise de titre

body: balise du corps du document

h1, h2, h3 ... h6: différents niveaux de titres

p: paragraphes

La suite ici: HTML - Images, listes, liens...

Un Cours et des liens utiles sur le HTML et la CSS

Par Damien MUTI DESGROUAS (17/03/2020)

Une présentation du HTML et de la CSS

Les cours suivants sont une compilation de cours de HTML/CSS effectués à l'IUT Multimédia d'Arles (par Zeineb EL KHALFI), du site de référence W3scools W3scools et MozzilaDevelopper.com :

Cours : chap_html_css.pdf

Présentation : cours_html_css_1.2.pdf

Présentation : cours_html_css_1.2.pptx

Des fonctionnalités plus poussées utilisant la CSS

Afin de rendre vos pages dynamique, les possibilités données par la CSS sont très importante, sans avoir à utiliser le JavaScript. Voici quelques documents utiles :

Créer un site “Responsive, c'est à dire dont la mise en page dépend de la taille de l'écran utilisé pour visionner le site : chap_responsive_web_design.pdf

Incorporer des animations et des transitions, très utiles pour rendre le pages dynamiques : animation_css.pdf

How to ?...Quelques liens utiles

Introduction au HTLM

Introduction à la CSS

Site "Responsive"

Inclure des barres de navigation, et des menus (fixes, déroulants, etc.)

Transitions

Animations

Rendre vos pages les plus dynamiques possibles en incluant les effets liés aux pseudo-classes ( :over, etc...)

Slider d'images, et les fichiers sources associés : slider_images.zip

Images de fond qui défilent avec des parallaxes différentes : Aiga Trebola - Amandine Long

Des ressources HTML/CSS Open Source

OpenWebDesign - Structures libres de droit

Arcsin Web Templates - CSS libres de droit

Fonts Libre de droit

Font-Squirel - Des fonts libres de droit

Dafont - Des fonts pas forcément libres

velvetyne.fr- Des fonts libres de droit

Gérer la couleur

HTML Color Codes

Éditeurs WYSIWYG ... ou pas

Il est possible de développer un site à partir d'un éditeur en WYSIWYG (What you see is what you get) tel que WordPress etc... Si vous utilisez ce genre d'outils, vous devez être capables de commenter chaque ligne de code.

Dans la mesure du possible, je vous conseille tout de même de développer votre site à partir des modèles développés en cours sur les éditeurs de votre choix (NotePad++, SublimeText, etc...). En effet, l'objectif est que vous sortiez de cette expérience avec une véritable compréhension et des compétences solides en programmation HTML/CSS.

En utilisant un éditeur WYSIWYG , vous êtes esclave de vos outils qui se comportent comme des boites noires dans lesquelles le contenu et la mise en forme sont noyés dans du code JavaScript...

Des exemples d'Éditeurs WYSIWYG :

Quelques éditeurs Open Source