Cour HTML/CSS
Cours : Cour HTML/CSS. Recherche parmi 300 000+ dissertationsPar le_prince • 23 Mars 2021 • Cours • 18 764 Mots (76 Pages) • 519 Vues
HTML 5 – CSS 3 et le WEB |
1- Introduction.
L’objectif de ce cours est l’apprentissage du langage de
description HTML5, associé à CSS3.
On se consacre uniquement, dans un premier temps, à
l’apprentissage de HTML et, dans un deuxième temps, à
l’apprentissage de CSS.
HTML et CSS sont interprétés sur la machine client, c’est
standardisé par le World Wide Web Consortium (W3C), et
peuvent être utilisés par différents logiciels (navigateurs,
etc.) sans contrainte sur l’OS du système. [pic 1]
L’invention du HTML date de 1991 par Tim Berners-Lee qui
travaillait au CERN. Ci-dessous, la première page WEB :
[pic 2]
http://info.cern.ch/hypertext/WWW/TheProject.html
Mais pourquoi ne pas utiliser ?
Un framework : WordPress
Un éditeur WYSIWYG : Dreamweaver
Une agence ou un freelance
Les Objectifs :
A l'issue de ce cours, l’étudiant est capable de :
Réaliser des pages et/ou un site web « à la main », à l’aide d'un éditeur de texte comme Atom (atom.io) ou VisualStudioCode (code.visualstudio.com) et leurs ajouts :
Atom : atom-beautify, atom-ternjs, autoclose-html, emmet, csslint, pigments, language-ejs
VSCode : esbenp.prettier-vscode, formulahendry.auto-close-tag, hex ci.stylelint-plus, dbaeumer.vscode-eslint, naumovs.color-highlight, DigitalBrainstem.javascript-ejs-support
Consulter l’aide en ligne de site : Avec un moteur de recherche mdn html
https://developer.mozilla.org/fr/docs/Web/HTML/Element
https://developer.mozilla.org/fr/docs/Web/CSS
https://devdocs.io/
https://www.w3schools.com/html/
https://www.w3schools.com/css/
SNIR1 HTML5 & CSS3 Page 1
2- En bref.
HTML = Hyper Text Markup Language – CSS = Cascading Style Sheets |
HTML est un langage de description de page qui permet de décrire l'aspect d'un document (ceci est un paragraphe, ceci est un titre, ceci est une image, etc.), d'y inclure des informations variées (textes, images, sons, animations, etc.) et d'établir des relations cohérentes entre ces informations grâce aux liens hypertextes (changer de page en interne ou externe, etc.).
CSS vient compléter le langage HTML en permettant la gestion de la mise en forme d’un site (couleur du texte, sélection de(s) police(s) de caractères utilisée(s), apparence des tableaux, ajouter des bordures, etc.).
Les avantages du langage HTML sont nombreux :
Peu coûteux : en effet un simple éditeur de texte suffit à écrire ses premiers documents HTML.
Apprentissage simple.
Portabilité : Pas de problème de compatibilité entre des systèmes et des formats informatiques différents.
La description d'un document HTML passe par l'utilisation de balises (ou "tags" en anglais). https://devdocs.io/html/element/heading_elements
<h1>Hello World !</h1>
<br> ou <br/>
<hr>
<hr size=’’3’’>
SNIR1 HTML5 & CSS3 Page 2
Aller sur le site codepen.io et copier/coller dans la fenêtre HTML, le texte ci-contre :
https://codepen.io/pen/
https://jsbin.com/?html,css,output
THE ADVENTURES OF SHERLOCK HOLMES by
SIR ARTHUR CONAN DOYLE
Observer la mise en page, dans le navigateur virtuel.
Tester avec l’élément h1 sur la première ligne.
3- Un peu d’histoire : www.yahoo.com le 17/10/1996 https://web.archive.org/
4- Structure d’une page en HTML 5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
…
</head>
<body>
…
</body>
</html>
Avec un moteur de recherche, entrer le texte ci-contre : mdn
Observer le texte en dessous du 1er lien de résultat de recherche.
Cliquer sur le 1er lien et demander au navigateur de visualiser le code source de la page.
Rechercher dans la page HTML, le mot clef : description
Conclure sur le lien entre la ligne HTML contenant l’élément meta et le mot clef description.
Valider votre réponse par la consultation du lien sous w3schools.com : https://www.w3schools.com/tags/default.asp
5- Applications des balises.
5.1- Identifier un titre : h1 à h6 représente 6 niveaux de titre dans un document.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
...