Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Université Hassan I Faculté des Sciences et Techniques de Settat Filière d’ingé

Université Hassan I Faculté des Sciences et Techniques de Settat Filière d’ingénieur : Télécommunications et Systèmes Embarqués Réalisée par : _ Tasra Hamid _ Znida Imane Encadrée par : Mr. Ahmed Mouhsen Plan : Introduction HTML Les éléments en html Les attributs en html Les tableaux Création des formulaires CSS Utilité Syntaxe ( Sélecteurs, Propriétés, Valeurs) Attribut « style » Id et Class Div et Span 2 POURQUOI APPRENDRE LE HTML & LE CSS ? • LES LANGAGES HTML ET CSS SONT INCONTOURNABLES CAR N’ONT PAS DE CONCURRENT ET SONT À LA BASE DE TOUT PROJET DE DÉVELOPPEMENT WEB • FACILE À APPRENDRE HTML & CSS : DEFINITION HTML = HyperText Markup Language. Créé en 1991 Fonction : donner du sens et structurer le contenu CSS = Cascading Style Sheets Créé en 1996 Fonction : mettre en forme le contenu en lui ajoutant des styles 4 5 HTML + CSS LES VERSIONS ACTUELLES : HTML & CSS HTML5 & CSS3 En cours de développement Introduisent de nouvelles fonctionnalités très attendues : insérer des vidéos, audio, etc. 6 L’EDITEUR DE TEXTE Pour coder en HTML ou en CSS, nous n’avons besoin que d’un éditeur de texte, gratuit Windows = Komodo, NotePad++, Sublime text 3 .... Mac = Komodo, TextWrangler ... Linux = Komodo, gEdit … 7 APPRENDRE LE HTML 8 Les éléments en HTML : Définissent des objets dans notre page web : 1. L’élément p définit un paragraphe, 2. Les éléments h1, h2, … , h6 définissent des titres, 3. L’élément a définit un lien… 9 Les balises en HTML Un élément en HTML Paire de Balise : Balise ouvrante : <p> Balise fermante : </p> Balise orpheline: <br/> 10 Paire de balises et contenu : Balise orpheline : 11 LES ATTRIBUTS : La balise ouvrante d’un élément HTML peut contenir des attributs . C’est quoi des attributs ? ATTRIBUT : Propriétés utilisées pour donner des indications supplémentaires aux éléments. <a href=http://www.youtube.com> Le site YouTube </a> 12 HEADING, PARAGRAPH, BREAK L’élément p définit un paragraphe. L’élément br crée un retour à la ligne. Les éléments h1, h2,… jusqu’à h6 définissent des titres (par ordre d’importance). 13 EXEMPLES DES TITRES DE h1 à h6 14 STRONG, MARK, EMPHASIS L’élément strong est utilisé pour définir un contenu comme important. L’élément em est utilisé pour définir un contenu comme assez important. L’élément mark est utilisé pour faire ressortir du contenu. 15 L’IMPORTANCE DES TEXTES : STRON G MARK em 16 STRUCTURE D’UNE PAGE EN HTML5 <! DOCTYPE html > Balise qui précise le language à utiliser dans notre cas HTML < html > < head > <title > Page HTML </title> Titre de la page HTML <meta charset = ‘’utf-8’’ > Le codage de la page </head> < body > <h1> Titre </h1> <p> Paragraphe : <br/> blablablabla </p> < /body > < /html > 17 LES COMMANTAIRES :  Tout le monde peut voir votre code HTML ! N’écrivez donc pas d’infos sensibles en commentaires comme des mots de passe ! 18 EXEMPLE : <!DOCTYPE html> <html> <head> <title> Première page HTML </title> <meta charset= "utf-8" > </head> <body> < !– Ceci est un commantaire -- > <h1> Je viens d'écrire un titre en HTML ! </h1> <p> Et voilà mon premier paragraphe :) </p> </body> </html> A la sortie 19 LES LISTES : Les listes HTML vont nous permettre d’ordonner du contenu en l’affichant sous forme de liste. Liste Non-ordonnées Ordonnées Définitions Imbriquées 20 Les listes non-ordonnées : ... <body> <h1> Les listes </h1>  <ul> <li>Pomme</li> <li> Vélo </li> <li>Guitare</li> </ul> </body> … 21 Les listes ordonnées … <body> <h1> ma listes </h1>  <p> Liste n°1 : </p> <ol> <li> On naît </li> <li> On grandit </li> <li> On meurt </li> </ol> < /body> … 22 Les listes de définitions : Role : Lister des termes et ajouter des définitions ou descriptions pour chacun de ces termes. … <body> <h1> Les listes </h1>  <dl> <dt>HTML : </dt> <dd> HyperText Markup Language </dd> </dl> </body> … Terme de description Terme de définition 23 Les listes imbriquées : <body> <h1> Les listes </h1>  <ol> <li> Introduction </li> <li>Partie I <!-- On imbrique une liste non-ordonnée dans une liste ordonnée -- > <ul> <li> Définitions </li> <li> Auteurs </li> <li> Exemples </li> </ul> </li> <li> Partie II </li> <li> Conclusion </li> </ol> </body> 24 LIENS INTERNES ET EXTERNES EN HTML : Role : Un llien en html va sérvir à transporter l’utilisateur vers un autre endroit en cliquant au-dessus . Pour créer un lien en HTML nous utilisons l’élement a (Adresse) avec l’attribut href . Lien Externe Interne 25 Les liens externes en HTML : Les liens externes vont être des liens ramenant vers des pages d’autres sites. Exp : <body> <h1> Les liens </h1> <p> Cliquez sur <a href=http://wikipedia.org >ce lien </a> pour aller sur Wikipédia. </p> </body> Elément a Attribut href 26 Les liens internes en HTML : Les liens internes vont être des liens ramenant vers d’autres pages au sein d’un même site . Pour créer des liens internes, il faut donc distinguer trois cas : La page de départ et celle de destination sont dans le même dossier ; La page de destination est dans un sous-dossier par rapport à la page de départ ; La page de destination est dans un dossier parent par rapport à la page de départ. 27 Envoyer un mail en HTML : <body> <h1> Envoyer un mail </h1> <p> M'envoyer <a href="mailto:hamidtasra1@gmail.com" > un mail </a></p> </body> 28 Télécharger un fichier : <body> <h1> Télécharger un fichier </h1> <p> Telecharger : <a href="java.pdf" >Livre java </a></p> </body> 29 Insérer des images en HTML : L’Ajout du élément img avec deux attributs src et alt < img src = ‘’ source de l’image ‘’ alt = ‘’ Description de l’mage’’ /> L’élément img est représenté par une balise orpheline. 30 Les tableaux en HTML Les tableaux en HTML servent à arranger des données en lignes et colonnes . Les balises utilisées : 1. <table> : Pour la création de notre table. 2. <tr>(table row ) : Pour la création des lignes de tableaux. 3. <td>( table data ) : Pour la création des données utilisées dedans. Les attributs utilisées (optionnel ) : cellpadding, border, cellspacing 31 Ajouter du contenu media 1. Pour ajouter un audio : <audio src="source du audio" controls></audio> 2. Pour ajouter une vidéo : <video src= " source du video" width= "375" height="280" controls></video> Les attributs utilisées (optionnel ) : Width et height : Pour la taille de la vidéo . Controls : Controller la vidéo. Loop : Lire la piste audio ou la vidéo en boucle. Autoplay: lancer la vidéo ou la piste audio lors du chargement de la page. Muted : Cet attribut permet de lancer le média avec le son désactivé par défaut. 32 Créer des formulaires On utilise l’attribut <form ></form> . Les type de form : Text . Email . Liste déroulante . Checkbox. Radio . Exemple 33 APPRENDRE DU CSS 34 Pourquoi le CSS ??? Donner de la vie à votre page web . Gagner du temps . Facile à faire de modifications 35 Où écrire le code CSS ? Dans un élément HTML style Dans la balise ouvrante des éléments HTML Dans un fichier CSS séparé 36 Syntaxe : Sélecteur, Propriétés, Valeurs sélecteur p propriétés color font-size valeurs : blue ; : 14px; détermine à quel élément un style doit être appliqué détermine le style qui va être appliqué à un élément détermine le comportement d’une propriété 37 CSS – Arrière-plan (background): background-color : Propriété utilisée pour définir la couleur d'arrière-plan d'un élément. (background-color : red) background-image : Propriété utilisée pour définir l'image d'arrière-plan d'un élément. background-repeat : Propriété utilisée pour contrôler la répétition d'une image en arrière-plan. background-position : Propriété utilisée pour contrôler la position d'une image en arrière-plan. 38 CSS – Polices (fonts) : font-style : Propriété est utilisée pour faire une police italique ou oblique.(font-style : italic ). font-weight : Propriété utilisée pour augmenter ou diminuer la manière dont une police est en gras ou claire. (font-weight : bold) font-size : Propriété utilisée pour augmenter ou diminuer la taille d'une police. ( font-size : 20px ou font-size : small … ) 39 CSS – Texte (text) : Color : Propriété utilisée pour définir la couleur d'un texte. letter-spacing : Propriété utilisée pour ajouter ou soustraire de l'espace entre les lettres qui composent un mot. word-spacing : Propriété utilisée pour ajouter ou soustraire de l'espace entre les mots qui composent une phrase. text-align : Propriété utilisée pour aligner le texte d'un document. ( text-align : center ou text-align : right) text-indent : Propriété utilisée pour indenter le texte d'un paragraphe. 40 CSS – Marges (Margins) : margin-left : Spécifie la marge gauche d'un élément. margin-right : Spécifie la marge droite d'un élément. margin-top : uploads/s3/ html 2 .pdf