Web 2017-02-02 : Différence entre versions
(→Exercice pour le prochain cours) |
m (1 révision importée) |
(Aucune différence)
| |
Version actuelle en date du 6 mai 2019 à 20:57
Sommaire
Inscriptions
- Veuillez noter vos coordonnés ici
- compte FTP
- compte wiki
Quelques repères
- Fin des années 50: émergence de l'idée d'un réseau des réseaux
- Fin des années 60: premières applications pratiques
- Fin des années 80: adoption mondiale de l'internet moderne
- Début des années 90: popularisation de l'internet via le World Wide Web
Pour en savoir plus, rendez-vous sur la page Une brève histoire d'Internet.
Lexique
En pratique
Voici un exemple de document HTML minimal:
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Titre du document</h1>
<p>Premier paragraphe</p>
</body>
</html>
Le mieux est sans doute de lire la très bonne introduction sur le site de Lionel Maes. Les sites W3schools (en anglais) et Openclassroom sont de bonnes ressources.
Exercice en cours
Consulter les sites de son choix. Regarder leur code source et coller les balises dans l’éditeur de texte commun. Chercher sur le web la signification de ces balises et documenter leur utilisation.
Pour information, à l'aide du programme "Terminal" (mac) vous pouvez obtenir un classement des balises les plus fréquentes d'une page (pensez à remplacer l'adresse de la page en question).
curl https://www.theguardian.com/world/2017/feb/02/romanians-clash-with-police-in-biggest-protests-since-fall-of-communism | sed 's/</\n</g' | sed 's/>/>\n/g' | sed 's/ //g' | grep "</" | sort | uniq -c | sort -nr
Balises de base
Balises en bloc
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
<p>Paragraphe</p>
<div>Bloc générique (sans sémantique particulière)</div>
Balises en ligne
<em>Texte en emphase</em>
<span>Balise générique</span>
<img src="http://exemple.com/image.jpg" />
<a href="http://exemple.com">Lien</a>
Exercice pour le prochain cours
- Télécharger l´edition spéciale des yes men en PDF.
- Sur la une, surlignez (numériquement) les différent types de contenu avec un code couleur. Essayer de nommer les différents type de contenu (en vous appuyant éventuellement sur un site de glossaire du journalisme).
- En vous basant sur la liste de balises que nous avons repéré, tentez de déterminer les balises appropriées pour chaque type de contenu.
- Retranscrivez en HTML la structure d'un des articles de la une
Enregistrer l'image et le document au format HTML. Cet exercice est a rendre au cours suivant et sera noté.
