Web 2017-02-02

De an
Révision de 8 février 2017 à 15:08 par 127.0.0.1 (discussion) (Exercice pour le prochain cours)

(diff) ← Version précédente | Voir la version courante (diff) | Version suivante → (diff)
Aller à : navigation, rechercher

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

600px


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é.