Ré-introduction de l'html : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
 
(4 révisions intermédiaires par un autre utilisateur non affichées)
Ligne 6 : Ligne 6 :
 
Http: protocole conçu par Tim Berner Lee qui utilise la notion d'hypertexte introduite par Ted Nelson à travers son projet [https://fr.wikipedia.org/wiki/Projet_Xanadu Xanadu] qui interroge les relations rizomiques de l'information.
 
Http: protocole conçu par Tim Berner Lee qui utilise la notion d'hypertexte introduite par Ted Nelson à travers son projet [https://fr.wikipedia.org/wiki/Projet_Xanadu Xanadu] qui interroge les relations rizomiques de l'information.
  
−
UTF-8: norme d'encodage des caractères typographiques étendue qui accepte, entre autres, les caractères non latin.
+
UTF-8: norme d'encodage des caractères typographiques étendue qui accepte, entre autres, les caractères non latins.
−
Les balises peuvent avoir des attributs comme src, alt... <img alt="ceci est une image" src="chemin_image.jpg">
+
 
 +
Les balises CSS peuvent avoir des attributs comme src, alt... <img alt="ceci est une image" src="chemin_image.jpg">
 +
Rmq: Attention, pour remonter d'un dossier dans le chemin, utilise ../ sinon utiliser le chemin en absolu depuis "home"
 
Les chaines de caractères sont délimitées par des guillemets pour que le navigateur ne les interprète pas comme une instruction.
 
Les chaines de caractères sont délimitées par des guillemets pour que le navigateur ne les interprète pas comme une instruction.
  
 
Le code html vu au cours
 
Le code html vu au cours
−
<code>
+
<source>
 
<!doctype html>
 
<!doctype html>
 
<html>
 
<html>
Ligne 53 : Ligne 55 :
 
   </body>
 
   </body>
 
</html>
 
</html>
 +
</source>
 +
 +
Le code css
 +
 +
<source>
 +
body{
 +
 +
  font-size:24pt;
 +
  font-family: "Times New Roman";
 +
 +
}
 +
 +
 +
 +
html, body, p{
 +
  margin:0;
 +
  padding:0;
 +
}
 +
 +
h1, h2, h3, h4, h5, h6{
 +
  font-weight:normal;
 +
  margin:0;
 +
  padding:0;
 +
}
 +
 +
 +
p{
 +
  background-color:red;
 +
}
 +
main section article p{
 +
  background-color:yellow;
 +
}
 +
main section article h3:first-child{
 +
  background-color:grey;
 +
}
 +
main section article p:nth-child(2){
 +
  background-color:green;
 +
}
 +
 +
 +
#paragraphe1{
 +
  background-color:blue;
 +
}
 +
 +
p.intro{
 +
  font-style: italic;
 +
}
 +
p.intro.pouet{
 +
  font-size:48pt;
 +
}
  
−
</code>
+
</source>

Version actuelle datée du 2 octobre 2020 à 17:03

L'html répond à une norme antérieure: le SGML

l'XML: également basé sur le SGML -> langage plus précis que l'html pour partager des données de manière plus précises entre les applications (ex: partage de documents, articles de journaux...). Standard de recommandations pour des bases de données. Par exemple le SVG est de l'XML et permet de décrire des dessins vectoriels. (voir cours SVG to print

Http: protocole conçu par Tim Berner Lee qui utilise la notion d'hypertexte introduite par Ted Nelson à travers son projet Xanadu qui interroge les relations rizomiques de l'information.

UTF-8: norme d'encodage des caractères typographiques étendue qui accepte, entre autres, les caractères non latins.

Les balises CSS peuvent avoir des attributs comme src, alt... <img alt="ceci est une image" src="chemin_image.jpg"> Rmq: Attention, pour remonter d'un dossier dans le chemin, utilise ../ sinon utiliser le chemin en absolu depuis "home" Les chaines de caractères sont délimitées par des guillemets pour que le navigateur ne les interprète pas comme une instruction.

Le code html vu au cours 

<!doctype html>
<html>
  <head>
    <title>Corps machine</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <meta charset="utf-8">
  </head>
  <body>
    <header>
      <nav>

      </nav>
    </header>

    <main>
      <h1>Le titre de la page</h1>
      <p class="intro">Le texte principal de ma page</p>
      <section>
        <h2>Le titre de la section</h2>
        <article>
          <h3>
            Le titre de l'article
          </h3>
          <p id="paragraphe1" class="intro pouet">
            <a href="page2.html">Le texte</a> de l'article (premier paragraphe)
          </p>
          <p>
            Second paragraphe
            <img alt="ceci est un raspberry" src="images/rpi.jpg">
          </p>
          <p>
            Troisième paragraphe
            </p>
        </article>
      </section>

    </main>
    <footer>
    </footer>
  </body>
</html>

Le code css 

body{

  font-size:24pt;
  font-family: "Times New Roman";

}



html, body, p{
  margin:0;
  padding:0;
}

h1, h2, h3, h4, h5, h6{
  font-weight:normal;
  margin:0;
  padding:0;
}


p{
  background-color:red;
}
main section article p{
  background-color:yellow;
}
main section article h3:first-child{
  background-color:grey;
}
main section article p:nth-child(2){
  background-color:green;
}


#paragraphe1{
  background-color:blue;
}

p.intro{
  font-style: italic;
}
p.intro.pouet{
  font-size:48pt;
}
Récupérée de « https://designnumerique.be/w/index.php?title=Ré-introduction_de_l%27html&oldid=2627 »