Cours HTML Pas à Pas
COURS HTML
Réaliser par Hassan Saal
SOMMAIRE
I/ HTML
1) Qu’est qu’un langage HTML et A quoi sert-t-il ?
2) Quels logiciels utilisés pour HTML
3) Première pas en HTML
4) Les Balises HTML
5) TD 1 : formulaire d’inscription en ligne
TD 2 : Annexe
TD 3 : Un tableau
| Cours faite pour : |
| Les élèves du Terminale GSI Les passionnés qui aimeraient débuter à apprendre le langage Web |
| <3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3<3 |
HTML
1) Qu’est que HTML et a quoi sert-t-il ?
Html est un langage crée pour communiquer avec le machine, Donc il est un intermédiaire entre homme et machine.
HTML veut dire L’Hypertext Markup Languag , il est conçu pour créer de page web .
2) Quels logiciels utiliser pour HTML ?
Je suis sûr que vous pensez qu’un logiciel spécifié existe pour HTML
Mais la réponse est non, HTML peut être écrit soit dans le bloc note qui se trouve dans l’accessoire de votre PC ou soit dans le Notepad++ (je vous le recommande) et exécuter sur le navigateur Web (Google chrome, internet explore, mozilla…).
Et ne pas oublier pour qu’un document HTML s’ouvre sur le navigateur web, il faut l’enregistrer sur « .html » on verra dans la suite avec plus de précision.
3) Premier pas avec HTML
Pour faire le premier pas avec HTML on va créer un document HTML très facile. Vous êtes prêt on n’y va :
<HTML>
<HEAD>
<TITLE>ma première page</TITLE>
</HEAD>
<BODY>
Bonjour les amis
</BODY>
</HTML>
Vous avez compris quelque chose ??? A mon avis je crois que vous n’avez rien capté Alors on explique :
Un document HTML commence toujours par la balise <HTML> et se termine par </HTML> qui annonce la fin.
Donc tout les autres balises se mettront entre <HTML> et </HTML>.
<HEAD> veut dire « en-tête » et vient toujours après la balise <HTML>. Dans <HEAD> il faut préciser que « ma première page » est un titre d’ou il faudra le mettre dans la balise <TITLE> et </TITLE qui se trouve lui-même dans la balise <HEAD>.
Une fois écrit l’en-tête du page, on va aller au balise <BODY> qui signifie corps du page alors toutes choses écrites entre <BODY> et </BODY> se mettront sur la surface de la page.
Il me reste plus qu’à vous expliquer comment enregistrer cette page.
De que vous avez fini de rédiger le code HTML appuyer sur « fichier » qui se trouve en haut du logiciel (bloc note ou Notepad++) puis sur « enregistrer sous » et enfin écrire dans la
fenêtre qui apparaitra « ma première page.html » et enregistre Ne jamais oublier d’écrire « .html » après le titre du page.
4) Les balises HTML
Cette partie du cours vous permettra de connaître toutes balises possibles dans HTML et de plus apprendre les Attributs facultatifs qui se mettront dans les balises.
<HTML>……………………………………………Document HTML
<HEAD>………………………………………….....En-tête du document HTML
<TITLE>…………………………………………….Titre du document HTML
<BODY>…………………………………………….Corps du page
<B>…………………………………………………..Mettre en gras
<I>……………………………………………………Mise en italique
<BR/>………………………………………………..Saut à la ligne
<H1>…………………………………………………Titre de niveau 1
<H2>…………………………………………………Titre de niveau 2
<H3>…………………………………………………Titre de niveau 3
<H4>…………………………………………………Titre de niveau 4
<H5>…………………………………………………Titre de niveau 5
<H6>…………………………………………………Titre de niveau 6
LES ATTRIBUTS DES BALISES HTML
| balise | Description | attributs |
| Basefont | Définition d’une police generales | Color (= « couleur ») Face (= « nom police ») Size (= « nombre police ») |
| font | Définition d’une police generale | |
| Bit/Small | Police plus grosse/plus petit | |
| Center | centrage | |
| dd | tabulation | |
| P | Nouveau paragraphe | Align(= « center »/ « right »/ « left »/ « justify ») |
| Div | Creation d’une section | |
| marque | Text défilant | Loop (= « nb de difilement ») Behavior (= « slide »/ « scrett »/ « atternati ») Scrollamount (= « vitesse ») Height (= « largeur ») Width (= « longueur ») Color (= « couleur ») |
| Body | Corps du document | Background (= « url image ») Bgcolor (= « couleur ») |
| H1 à H6 | Titre du niveau 1 à 6 | |
| Hr | Ligne horizontale | Color (= « couleur ») Size (= « nombre ») Width (= « longueur en px ou % ») |
| Ul | Liste non ordonnées | Type (= « disc »/ « square »/ « circle ») |
| Ol | Liste ordonnées | Type (= « 1 », « a », « A », « i », « I ») |
| Li | Element de liste |
IMAGE
| img | Image | Src (= « url de l’image ») obligatoire Width (= « longueur en pixel ») Height (= « largeur en pixel ») |
Les hyperliens
| balise  | Description | attributs |
| a | Cree un lien source avec href | Href (= « url ») |
| Attributs facultatif | Balise concerne | Valeur par defaut | descriptin |
| Alink (=« couleur ») | Body | rouge | Couleur liens actif |
| Link (=« couleur ») | Body | bleu | Couleur liens non visités |
| vlink(=« couleur ») | Body | pourpre | Couleur liens deja visités |
TABLEAUX
| Balise | Description |
| Caption | Titre de tableau |
| Table | Tableau |
| Tr | Ligne d’un tableau |
| Th | Titre de colonnes |
| Td | Cellule d’un tableau |
| Attribut facultatif | Balise concernée | Valeur | Description |
| Border (= « nombre ») | Table | Epaisseur de la bordure | |
| Width (= « nb pixel) | Tale | Adapter au contenu | Longueur du tableau |
| Align (= « left »/ « center »/ « right » | Table,tr,th,td | left | Alignement horizontal |
| Cellpadding (nb pixel) | Table | 1 | Marge horigental et verticales des cellules |
| Colspan (=nb de colonne a fusionnees) | Th, td | 1 | Fusion du colonnes |
| Rowspan (=nb de ligne a fusionnees) | Th,td | 1 | Fusion de ligne |
| Valign (« top »/ »middle »/ | Td, th, tr | 1 | Fusion de ligne |
| « buttom ») | |||
| Bgcolor(=couleur) | Table, tr, td, th, | blanc | Couleur de fond |
CADRES
Les cadres fractionnement d’un document HTML en plusieurs zones independantes les unes des autres.
• Balises <framset> remplace la balise body
• A l’interieur de la balise <framset>, chaque balise <frame> definie un cadre • La division en cadre peut etre horizentale et/ou verticale
| balise | description | Attributs |
| framset | structure des cadres | Rows (= » »nb pixel ou % ») |
| Frame | Cadre | Src(=URL) obligatoire Name (=nom cadre) Scrolling(= « yes », « non ») Noresize (redimensionnement interdit) |
LES FORMULAIRES
La zone texte script
Ex : Nom : <input type= « text » name= »nom » value= « »>
La zone de mot de passe
Ex : mp : <input type=password’ name= « mp » value= « »>
La zone de texte long
Vos motivation : <textarea type= « text » name= « motivation » Rows= 3 cols= 25> </textarea>
Les boutons radio <input type="radio" name="sexe" value="1">femme
<input type="radio" name="sexe" checked= "checked">homme Ex :
Liste déroulante
Ex : Statut :<select name="statut">
<option value=1> ETUDIANT</option>
Zone de liste
Ex :
JOUR DISPO :</BR><select size=3 multiple>
<option value=1> LUNDI</option>
<option value=2>MARDI</option>
<option value=3>MERCREDI</option>
<option value=4>JEUDI</option>
</select>
Le fichier joint
Ex :
PJ:<input type="file" value="fichier"
Le bouton d’exécution
Le bouton d’annulation
Ex :
Ex :
<input type="checkbox" name="filiere">lycee de gabode
<input type="checkbox" name="filiere"> lycée d'etat
<input type="checkbox" name="filiere"> cem d'ambouli
5) TD 1: FORMULAIRE EN LIGNE
L’université de Djibouti souhaite maitre en ligne sur son site un formulaire d’inscription pour que l’inscription se passe dans la bonne condition.
Ce formulaire doit comporte le nom d’élèves, adresse, date de naissance, nom du responsable, téléphone, les filières choisie.
Aller s’y, au boulot les gars ! Que le meilleur gagne
Pour votre bien regarde la correction une fois terminer, ce comme ça que vous allez apprendre Et je préviens aux tricheurs que sa leur servira a rien parce que j’ai aucune cadeau à offrir, Alors travaillez !!!!!!!!!!!!
La correction se trouve juste sur la page suivante.
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
CORRECTION TD 1 :
Code :
Une fois saisi le code il faut enregistrer comme d’habitude et ne pas oublier de marquer à la fin du nom «.html » puisqu’il s’agit de HTML.
Et voila ce qui apparaitra :
J’espère que vous avez juste ou presque juste, comme même ce n’est pas pour rien qu’on a fait 8 pages de cours.
En tout cas je dis chapeau et félicitation aux élèves qui ont y justes
Les autres je leur demande de passer un certain temps sur ce TD avant de passer pour la deuxième, Merci.
TD 2 : ANNEXE
ANNEXE 1
INTRODUCTION
Les données personnelles sont les informations qui permettent d'identifier directement ou indirectement une personne physique.
Ces données personnelles étaient en libre circulation, elle ne posait donc aucun problème de confidentialité et les données étaient acheminées en clair sur le réseau. Mais, l'ouverture d’internet à un usage commercial a modifié les comportements. Des informations confidentielles circulant sur les liaisons, la sécurité des communications est devenue une préoccupation importante des internautes et des entreprises. Tous cherchent à se protéger contre une utilisation frauduleuse de leurs données ou contre des intrusions malveillantes dans les systèmes informatiques.
Cet usage commerciale, est appelé e-commerce est, comme son nom l'indique, du commerce électronique. C'est à dire que l'on a à faire à un ensemble d'échanges numérisés liés à des activités commerciales. Le support principal de ces échanges est l'Internet. Après une courte période du « tout gratuit » sur Internet, les négoces et l'argent ont fait irruptions sur cette scène encore relativement vierge et innocente que représentait le réseau des réseaux pour s'y imposer de plus en plus solidement comme une nouvelle alternative commerciale.
Qui dit échange dit communications et transferts d'informations, Qui son caractériser par les données, l’ensemble d’élément d’information d’un individu sous plusieurs forme (numérique, Alphanumérique, logique, date …etc.)
Rédiger d’après les informations retirées du site : www.wikipédia.com
La question dans ce TD est de d’écrire le code HTML qui permettra d’écrire exactement cette texte comme il l’est.
Correction juste sur la page suivante :
CORRECTION TD 2 :
Le code :
Et voila les gars !!!!!!!!!!!!!!!
Il faut juste vouloir pour en arrivé
TD 3 : TABLEAU
| Actif (EMPLOIS) | Passif (RESSOURCES) | |
| Cycle D’investissement Et de financement | Immobilisation (valeur brute) | • Capitaux propre • Amortissement • provisions |
Trouvez le code permettant de tracer ce tableau
Tout les balises sont citer dans le cours, il vous faut seulement des jouer avec…. §§§§ !!!!!!
Correction juste sur la page suivante :
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
CORRECTION TD 3 :
ET VOILA !!!!!!!!!!!!!!!!!!!!
Enfin nous arrivons à la fin du cours HTML……SACHEZ QUE « HTML » ne s’arrête pas là, mais ça commence d’ici…………………………………….
ET pour les élèves de Terminale GSI, on vous demandera que ça cet année mais je vous conseil pas de s’arrête là ………….. Continuez à découvrir PLUSSS !!!!!!!!
C’été Hassan Hamad Mohamed au micro (comme on le dit),
JE VOUS DIS AUREVOIR ET à la prochaine, DANS D’AUTRE COURS.
« JE SUIS TOUJOURS AVEC VOUS DE LOIN MES AMIES. »
Prochainement on se verra dans le cours PHP
QU’est ce que signifie PHP ??? À découvrir dans le prochain cours.
