Cours Complet HTML & CSS [PDF]

Zitiervorschau

---

République Algérienne Démocratique et Populaire

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique Université Ibn Khaldoun de Tiaret - Algérie Faculté des Mathématiques et de l’Informatique, Département d’informatique

Formation des agents de la santé Techniciens Supérieurs & Adjoints d’Ingénieurs Enseignant : Dr. Cheikh KHERICI. ---- MCB ----

Juin 2022. -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Université Ibn Khaldoun de Tiaret, Faculté des Mathématiques et de l’Informatique, Tiaret - Algérie 14000. E-mail: [email protected], Tel.: (+213) 46 22 57 49.

I. Introduction

II. Présentation du cours et de ses objectifs

III. 1ère Partie : Les Bases en HTML et en CSS.

IV. 2ème Partie : Formater du texte & positionner des éléments grâce au CSS. V. 3ème Partie : Fonctionnalités Avancées.

VI. 4ème Partie : Aller plus loin.

Introduction  HTML est l’abréviation de ‘’HyperText Markup Language’’, soit en français ‘’langage hypertexte de balisage’’.  Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu.  CSS signifie ‘’Cascading Style Sheets’’, soit ‘’feuilles de style en cascade’’. Il a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles.  Le HTML sert, à indiquer aux navigateurs quel texte doit être considéré comme un paragraphe, quel texte doit être considéré comme un titre, que tel contenu est une image ou une vidéo.  Le CSS, quant-à-lui, est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le mettre en forme.  Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte, positionner tel contenu à tel endroit de notre page web ou ajouter des bordures ou des ombres autour d’un contenu.

Présentation du cours et de ses objectifs  Le but du cours est de vous apprendre pas à pas à coder en HTML5 et en CSS3.  A l’issue du cours « conception des sites Web » vous allez êtes capable de faire une conception qui comporte des paragraphes, des menus, des images, des vidéos, des articles de presse, …etc.  Ce cours est divisé en trois parties, progressives :  Une première partie avec un peu de théorie dans laquelle nous poserons les bases pour un apprentissage solide ;  Une deuxième partie dans laquelle nous verrons comment positionner les différents éléments de notre site et comment personnaliser nos textes ;  Une dernière partie où nous explorerons les fonctionnalités avancées du HTML5 et du CSS3 (insertion de vidéos, formulaires, responsive design, etc.).

 Les langages HTML et CSS sont véritablement le socle de tout projet de développement web par exemple : créer un site e-commerce, un blog, une application mobile.  Donc vous serez obligé de passer par les langages HTML et CSS.

Les bases d’un site Web  Une page Web c’est …  Un fichier HTML est un format de fichier « texte » éditable dont les éléments ont du sens.  Au format .html  Peut contenir du texte, des images, des liens, des médias, etc.  Peut être liée à une autre page via des liens.  Un ensemble de pages liées entre elles.  Accessible en ligne depuis n’importe où.

 Mettre votre site en ligne ….

 Le principe de « serveur web »

 Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web.

 FTP : File Transfer Protocol, protocole de communication destiné à l'échange de fichiers sur un réseau TCP / IP.  Permet de « mettre en ligne » votre site web.  Une sorte d’explorateur sur un serveur à distance (Ex : Filezilla).

 Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et mot de passe pour y accéder.

 Générer du HTML avec un éditeur 1. Bloc Note ou TextEdit : pas de coloration syntaxique. 2. Brackets : est un éditeur spécialisé dispose:  Auto-complétion.  Retour à la ligne.  Coloration syntaxique, plugins etc.  Gratuit pour Mac et Windows – open source. 3. Atom : est un éditeur spécialisé dispose:  Auto-complétion.  Retour à la ligne.  Coloration syntaxique, plugins etc.  Gratuit pour Mac et Windows – open source.

4. Sublime Text : est un éditeur spécialisé dispose :  Auto-complétion.  Retour à la ligne.  Colorisation syntaxique, plugins.  30 jours d’essai sur Windows/Mac/ Linux puis payant. 5. Coda : uniquement sur Mac (payant) http://panic.com/coda/ 6. Geany (Windows) gratuit http://www.geany.org/Download/Releases 7. Notepad ++ : gratuit. 8. Komodo : (Windows et Mac) http://www.activestate.com/komodo-ide 9. Netbeans : (Windows et Mac) gratuit http://netbeans.org/ 10. WYSIWYG : What You See Is What You Get:  Permet de visualiser le rendu directement.  Code parfois pas toujours propre ou optimisé, exp.: Dreamweaver (payant), Blue Griffon (gratuit). 11. Autres éditeurs « visuels » sans avoir besoin de notions de code, exp.: WordPress, Drupal, Joomla, Prestashop, …etc.

La syntaxe HTML : balises, éléments et attributs

Le principe de balise :  Les balises structurent le contenu de la page (texte, images, etc.)  Chaque balise a un rôle et donne du sens au contenu présenté.

Le principe de balise :  On peut imbriquer les balises (on y reviendra) les unes dans les autres:

Un bloc !!

Un joli paragraphe

Autre un joli paragraphe

 Touche < du clavier pour ouvrir : <  Touche maj + < pour fermer : >  Le nom des balises est prédéfini dans les spécifications HTML, donc on ne peut PAS en inventer !  Quelques exemples : , , ,

, , , … etc.

Le principe de balise :  Par convention et pour faciliter la lecture du code, toute balise ouverte doit être fermée (sauf exception).  Certaines balises bien particulières n’ont pas besoin d’être fermées, on les dit « auto-fermantes », elles n’ont ni contenu ni balise fermante.

Attributs et valeurs :  Certaines balises peuvent être complétées par des attributs précisant certains paramètres (l’adresse des liens, source d’une image à afficher, etc.).  Une balise peut contenir plusieurs attributs.

Bonjour !

balise attribut valeur

Attributs et valeurs :  Les attributs sont des éléments prédéfinis dans le HTML on ne peut en « inventer ».  On peut les mettre entre simple quote, double quote ou rien. Par convention nous choisissons les doubles quotes " "

//  Les attributs sont toujours dans la balise ouvrante.

Exemples d’Attributs :  src=" " : donner la source (d’une image par exemple):