Synthèse du thème Web

  • World Wide Web (WWW) : appelé simplement Web, permet de consulter, avec un navigateur, des pages accessibles sur des sites

  • URL (Uniform Resource Locator) :  est un format de nommage universel pour désigner une ressource sur Internet à saisir dans la barre d’adresse du navigateur :

  • Cookie informatique : permet de conserver des données utilisateur afin de faciliter la navigation et de permettre certaines fonctionnalités

Bases du langage de description HTML :

Bases du langage de description CSS :

Structure d'un document HTML

<html>

  <head>
    <title>Titre du document</title>
  </head>

  <body>
      Le texte visible sur la page
  </body>

</html>

Ecrire des titres

<h1>Le plus grand titre</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Le plus petit titre</h6>

Eléments de texte

<p>Ceci est un paragraphe</p>
<br> (retour à la ligne)
<b>Ce texte est en gras</b>
<i>Ce texte est en italique</i> Images

<img src="URL">

Liens

<a href="http://lti.epfl.ch/">Ceci est un lien</a>

Listes (ol pour puces numérotées)

<ul> ou <ol>
  <li>Premier élément</li>
  <li>Elément suivant</li>
</ul> ou </ol>

Commentaires

<!--Commentaires-->

Syntaxe CSS

selecteur{propriété:valeur}
Principaux sélecteurs

p (paragraphe), hx titres,#id,.class

Grouper des sélecteurs

h1,h2{color:blue}

Lier HTML et CSS

Feuille de style externe :

  • Créer un nouveau fichier avec l'extension .css : mon_fichier_css.css
  • Dans la partie head du fichier .html:
    <link rel="stylesheet" href="mon_fichier_css.css" />

Quelques propriétés

Arrière-plan :

  • Mettre une couleur : 
    p{background-color:red}
  • Mettre une image : 
    p{background-image:url('image.jpg')

Taille texte : {font-size:40px}

Couleur : {color: red }

Commentaires

/*Commentaires*/