cours2018

Cours sur l’utilisation de HTML ET de CSS

HTML

L’objectif de ce cours est de permettre aux lecteurs , d’être capable de créer leur propre site web avec HTML, et de pouvoir apporter des modifications de mises en forme sur leur site pour le rendre plus jolie à l’aide de CSS.

Le langage HTML est un langage structuré qui décrit un document grâce à des balises. Les balises sont des valeurs entourées de deux caractères, < et >, qui décrivent, à partir de paramètres propres à la balise appelés ‘attributs’, le contenu sémantique de la donnée.

Afin de vous guider dans l’élaboration, pour certains de votre première page web, nous allons vous présenter les notions structurantes de HTML et de CSS, plutôt que de vous donner un catalogue de balises dans lequel vous iriez piochez pour réaliser votre site.

Structures de bases d’un page en HTML

En guise d’introduction, voici un rappel de la structure de toutes les pages html. Elles se présentent toutes sous la même forme.

La structure de base d’une page en html5 se présente ainsi sous cette forme :

Titre de votre page web

Insérer du texte

Insérer une Image

Insérer un Lien

Les deux prochaines parties s’adressent aux personnes qui auront finis le TP en moins d’une heure et qui voudront continuer à personnaliser leur site.

Insérer un tableau

Le tableau est défini par les balises <table> et </table>.

<tr> formate une ligne dans un tableau et nécessite un marqueur de fin.

<td> formate une colonne dans un tableau et nécessite un marqueur de fin.

Les informations entre les balises <tr> </tr> et <td> </td> sont les contenus de tableau.

Exemple

<table>
    <tr>
        <td>donneée1</td>
        <td>donnée 2</td>
    </tr>
    <tr>
        <td>donnée 3</td>
        <td>donnée 4</td>
    </tr>
</table>
donnée 1 donnée 2
donnée 3 donnée 4

Insérer un formulaire

Toute page HTML peut être enrichie de formulaires interactifs, qui invitent vos visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton.

<form> et </form> sont les balises principales du formulaire, elles permettent d’en indiquer le début et la fin.

Le texte

<form>
Identifiant: <input type="text" name="identifant"><br>
Surnom: <input type="text" name="surnom">
</form>

Les mots de passe

<form>
Mot de passe: <input type="password" name="pwd">
</form>

La sélection unique des options

<form>
<input type="reflexion" name="intelligence" value="humaine">humain<br>
<input type="reflexion" name="intelligence" value="artificielle">robot
</form>

La sélection multiple des options

<form>
<input type="game" name="entertainment" value="fortnite">I play fortnite<br>
<input type="game" name="entertainment" value="league of legends">I play league of legends  
</form>

Le bouton envoyé

<form name="input" action="html_form_action.php" method="get">
Identifiant: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Conclusion :

Source : HTML-W3SCHOOLS

CSS

Créer un menu :

Conclusion

TP/Examen :

L’objectif de ce tp sera de réussir à créer un site internet avec un certain nombre de fonctionnalités. Vous utiliserez la plateforme de travail collaboratif Plunker. Cette plateforme permet de compiler le code en temps réel. Des codes à « trous » vous seront remis afin de gagner du temps. C’est à vous de remplir le code, et ceci grâce aux connaissances disponibles dans le cours. Il y a une suite pour ceux qui finiront le tp ! Pour commencer un petit questionnaire les questions avec une étoile nécéssite une réponse écrite :

  1. Lequel de ces éléments rencontre-t-on en premier dans un code HTML ? • <head> • <html> • <!Doctype> • <body>

  2. A quoi sert le langage CSS ? • A réaliser des pages dynamiques • A ajouter du style aux documents web • A insérer du contenu dans une page internet

  3. Il y a une ou plusieurs erreurs sur cette ligne de code (le code ne compile pas)

reference link

Avec le nom des variables assez explicites de la question suivante, a quoi sert la ligne de code présentée*:

  1. Que va faire la ligne de code CSS suivante* ? reference link

  2. Lequel de ces liens permet d’amener le visiteur à un endroit précis de la même page web ayant l’identifiant details ? reference link

6-Comment fait-on télécharger un fichier à un visiteur en HTML ?

• On crée un lien vers le fichier avec la balise “a” • On utilise la balise “download” • On insère le contenu du fichier à télécharger directement dans le code HTML • On ne peut pas faire cela en HTML

1- On commence doucement il faut choisir un titre pour votre page il devra être en relation avec le thème des objets perdus. 2- Maintenant, il faut créer un titre global à l‘intérieur de votre page et plusieurs sous-titres mais de même degré. • Remarque : il y a ici une structure d’arborescence (relation d’enfant parent) entre tous les titres et les sous-titres 3- A présent, vous allez devoir établir un menu que vous placerez en haut de la plage. Bien sûr, vous choisirez un menu avec des onglets logiques (page d’accueil, contact par exemple) 4- Ensuite dans le premier sous-titre vous devez insérer une image : vous devez choisir un logo 5- Dans un autre sous-titre, insérer un paragraphe en choisissant la police Arial, de taille 30px et de couleur rouge. 6- Dans le dernier sous-titre, créer un tableau que vous remplirez : première colonne propriétaire, deuxième objets perdus colonne, troisième date de perte et quatrième lieu de perte. (facultatif) 7- Ajouter un fond d’écran au site web. 8- Ajouter un formulaire qui contient les mêmes champs que le tableau. (facultatif)

Sources :

Site web Menu Cours html/css