TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Piste: • html_00

Panneau latéral

Accueil

Contribuer

Agenda DSAA commun

Agenda DSAA1 DG

Agenda DSAA2 DG

Agenda DNMADe2 ÉNI

Agenda DNMADe3 ÉNI

Administration lycée

Fournisseurs

Cours

Emprunt Livre

Emprunt Matériel

Projets

Tutoriels

FlossManuals

Accréditations

Mémoires

Macro-projets

Projet DNMADe

Karma

Textes

Lexique

Ressources

http://www.tonerkebab.fr/

wiki:tutoriels:html:html_00

Table des matières

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.

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 :

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

Des ressources HTML/CSS Open Source

Fonts Libre de droit

Gérer la couleur

É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 :

wiki/tutoriels/html/html_00.txt · Dernière modification: 2020/03/17 18:22 (modification externe)

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial 4.0 International
CC Attribution-Noncommercial 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki