En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour assurer le bon fonctionnement de nos services.
En savoir plus

ISN Spécialité TS

TD WEB : Premiers pas en HTML5 et en CSS3

Par VALERIE MORDASINI-CARIVEN, publié le mardi 14 novembre 2017 05:43 - Mis à jour le dimanche 23 septembre 2018 17:37

Premiers pas en HTML5

HTML5 = Hyper Text Marquer Language5

La référence pour tous les sites : https://www.w3schools.com/default.asp

Pour valider une page et voir si elle respecte les codes en vigueur : https://validator.w3.org

  • La page HTML est définie par le DOM

 

 

Se connecter à l'espace partagé : 

Accès en consultation sur le navigateur de votre future page  https://pbellevue.libreedu.ovh/dev/isn2017/votreloginreseau/ => par défaut, le navigateur ouvre la page index.html présente dans le dossier

Pour les modifier à votre convenance et y accéder via le navigateur de fichier, cliquer sur connexion à un serveur :

  • davs://pbellevue.libreedu.ovh/devpub/isn2017/votreloginreseau
  • Entrer nom d'utilisateur et mot de passe du réseau
  • Ensuite ouvrir Bluefish (éditeur de pages avancé) et créer une page index.html dans votre espace sur le serveur ouvert précédemment
  • D'autres éditeurs de texte (gedit aucune aide fournit) ; notepad++ (windows)
  •  La structure type d’une page à copier coller:

 

<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

Dans votre page : 

  • Insérer un court paragraphe sur les caractéristiques d'une station de travail. Les infos ici : http://www.imedias.pro/cours-en-ligne/informatique/ordinateur/composants-ordinateur/
  • Enregistrer (Ctrl + S) puis ne pas oublier de recharger la page –F5
  • Associer des balises de titre <h1></h1> et <h2></h2> aux titres des différentes parties et sous-parties
  • Créer un tableau pour présenter quelques éléments clés
  • La structure d'un tableau 

 

Toto 17 ans TS1
Tutu 19 ans TS2
 

<table>                                 <!-- Balise tableau -->
   <tr>                                    <!-- Balise qui définit une ligne -->
       <td>Toto</td>               <!-- Balise qui définit une cellule -->
       <td>17 ans</td>
       <td>TS1</td>
   </tr>
   <tr>
       <td>Tutu</td>
       <td>19 ans</td>
       <td>TS2</td>
   </tr>

</table>

(Pour aller plus loin dans la réalisation de tableaux : ici)

 

COMPLEMENTS : 

Des balises pour la mise en page

Nom

Détails

<section>

Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête

<article>

Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension

<nav>

Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages)

<aside>

Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.

<header>

Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).

<footer>

Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

</br> Saut de ligne
<figure> Insertion d'une image
  • Insérer une image puis un lien vers la page de l'ENT, ISN par exemple
  • ·         Insérer des images : <img src="…/….png" alt="…" /> 

Il faut créer dans votre espace un sous-dossier pour l’ensemble des images.

Mémento pour créer des liens entre pages d’un même site :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Source :

 

  • Créer des liens : <a href="http://www....></a>

 

  • 2 balises utiles :

<span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Dans le même esprit, on retrouve les balises  <strong>.

<div> </div> : c'est une balise de type block, qui entoure un bloc de texte comme <p> (paragraphe)  ou <h1>. Ces balises créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne.

 

  • les attributs id et  class sont utiles pour mettre en forme sa page avec le CSS (voir ci après)

*un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page. Exemple de code : <div id="unique"></div>, l'élément de la balise aura une mise en forme unique

*une classe peut caractériser plusieurs objets (identiques ou non). Exemple de code : <div class="toto"></div>, tous les éléments de la classe toto auront la même mise en forme

 

 

Créer une feuille de style en CSS3

Réalisez maintenant une page plus jolie en travaillant la mise en forme. Dans Bluefish, créer un nouveau fichier, enregistrez le sous monstyle.css dans un dossier css à créer dans votre espace sur le réseau

  •  CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).
  •  <link rel="stylesheet" href="css/monstyle.css" />  indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme
  •  
  • La structure générale se présente d'un document css se présente sous cette forme : 

 

1

2

3

4

5

6

7

8

9

10

11

balise1

{

    propriete1: valeur1;

    propriete2: valeur2;

    }

 

balise2

{

    propriete1: valeur1;

}

 

  • Les règles seront écrites avec la syntaxe #nom_id pour les id et .nom_de_classe pour les class.

 

  • S'aider dans le navigateur firefox du débogeur firebug pour mettre en parallère le HTML5 et le CSS3
  • Tester votre travail dans différents navigateurs.        

COMPLEMENT : CSS3 - Quelques propriétés pour démarrer une feuille de style :

Propriétés de texte

Valeurs (exemples)

Description

font-family

police1, police2, police3, serif, sans-serif, monospace

Nom de police

font-size

1.3em, 16px, 120%...

Taille du texte

font-weight

bold, normal

Gras

font-style

italic, oblique, normal

Italique

text-decoration

underline, overline, line-through, blink, none

Soulignement, ligne au-dessus, barré ou clignotant

text-transform

capitalize, lowercase, uppercase

Capitales

font

-

Super propriété de police. Combine : font-weight,font-style, font-size, font-variant, font-family.

text-align

left, center, right, justify

Alignement horizontal

vertical-align

baseline, middle, sub, super, top, bottom

Alignement vertical (cellules de tableau ou éléments inline-block uniquement)

line-height

18px, 120%, normal...

Hauteur de ligne

text-shadow

5px 5px 2px blue

(horizontale, verticale, fondu, couleur)

Ombre de texte

 

 

Propriété de couleur et de fond

Valeurs (exemples)

Description

color

nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20...

Couleur du texte

background-color

Identique à color

Couleur de fond

background-image

url('image.png')

Image de fond

 

Propriétés des boîtes

Valeurs (exemples)

Description

width

150px, 80%...

Largeur

height

150px, 80%...

Hauteur

min-width

150px, 80%...

Largeur minimale

max-width

150px, 80%...

Largeur maximale

min-height

150px, 80%...

Hauteur minimale

max-height

150px, 80%...

Hauteur maximale

margin-top

23px

Marge en haut

margin-left

23px

Marge à gauche

margin-right

23px

Marge à droite

margin-bottom

23px

Marge en bas

margin

23px 5px 23px 5px

(haut, droite, bas, gauche)

Super-propriété de marge.

 Combine : margin-top, margin-right,margin-bottom, margin-left.

padding-left

23px

Marge intérieure à gauche

padding-right

23px

Marge intérieure à droite

padding-bottom

23px

Marge intérieure en bas

padding-top

23px

Marge intérieure en haut

padding

23px 5px 23px 5px

(haut, droite, bas, gauche)

Super-propriété de marge intérieure.

 Combine : padding-top, padding-right,padding-bottom, padding-left.

border-width

3px

Épaisseur de bordure

border-color

nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20...

Couleur de bordure

border-style

solid, dotted, dashed, double, groove, ridge, inset, outset

Type de bordure

border

3px solid black

Super-propriété de bordure. Combine border-width, border-color, border-style.

 Existe aussi en version border-top, border-right, border-bottom, border-left.

 

  • Pour la gestion des couleurs, dans Bluefish/Dialogue/Général/Sélectionner une couleur
  •       
  • Pour mettre en forme rapidement, il existe des templates ("patrons") d'utilisation libre à télécharger comme BOOTSTRAP: 

     

  • Un lien très utile : 

·         Alsacreations : http://www.alsacreations.com/tutoriels/

·      

Catégories
  • seances