Remerciez-le!

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

18/10/2018 MEMENTO DE HTML5/CSS3, PHP ET MYSQL WEB PROGRAMMING KAMDEM KAMDEM LA

18/10/2018 MEMENTO DE HTML5/CSS3, PHP ET MYSQL WEB PROGRAMMING KAMDEM KAMDEM LANDRY GAETAN MEMENTO DE HTML5/CSS3, PHP ET MYSQL MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN 1 HTML  Les balises et attributs (options) :<balise attribut=‘’valeur’’>  Structure de base d'une page HTML5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> // Titre de l’onglet. </head> <body> </body> </html>  Paramétrage >Préférences, onglet Nouveau document/Dossier. Sélectionnez UTF-8 sans BOM (pour l’encodage appliqué sur tous les fichiers dans notepad)  Insérer un commentaire :  Le paragraphe :<p></p>  Retour à la ligne ou saut de ligne: <br/>  Les titres (Niveau de titres) : <h1></h1>: signifie « titre très important » <h2></h2>: signifie « titre important ». <h3></h3>: titre un peu moins important <h4></h4>: titre encore moins important. <h5></h5>: titre pas important. <h6></h6>: titre vraiment, mais alors là vraiment pas important du tout.  La mise en valeur du texte : - Mettre un peu en valeur : <em></em> - Mettre bien en valeur :<strong></strong> - Marquer le texte : <mark></mark>  Les listes : - Liste non ordonnée : <ul><li></li></ul> <ul></ul>délimite toute la liste ; <li></li>délimite un élément de la liste (une puce). - Liste ordonnée :<ol><li></li></ol> - Liste de définitions : <dl></dl>délimite la liste de définition <dt></dt>délimite un terme <dd></dd>délimite la définition de ce terme  Créer des liens :<a href=’’valeur’’></a> (la valeur de « href » indique l’adresse de la page cible.) NB : Pour un lien contenant des « & » remplacer par « &amp » - Lien vers un autre site : Ex : <a href="http://www.siteduzero.com">Site du Zéro</a> - Un lien vers une autre page de son site : Si les pages sont dans un même dossier<a href="page.html"></a> Si la page cible est dans un sous dossier(s) :<a href="contenu/autredossier/page.html"></a> Si la page cible est dans un dossier parent :<a href="../page2.html"> MEMENTO DE HTML5/CSS3, PHP ET MYSQL MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN 2 - Un lien vers une ancre (Lien vers un élément d’une même page) : <a href="#mon_ancre">Aller vers l'ancre</a> (Pour créer une ancre on utilise la balise « id » dont la valeur sera le nom de l’ancre) - Lien vers une ancre située dans une autre page : Ex : <a href="page.html#mon_ancre"> - Un lien qui affiche une info bulle au survol : Ex:<ahref="http://www.siteduzero.com" title=" ">Sitedu Zéro</a> (Une info bulle s’affiche grâce à l’attribut «title» dont La valeur est le message affiché par l’info bulle) Cas pratiques d’utilisations des liens - Lien qui ouvre une nouvelle fenêtre : on rajoute l’attribut et sa valeur ; target=’’blank’’ - Un lien pour envoyer un e-mail : Ex : <a href="mailto:votrenom@bidule.com"></a> - Un lien pour télécharger un fichier :<a href="monfichier.zip">Télécharger le fichier</a>  Insertion d’image : <img/> Ex : <img src=’’valeur ‘’ alt= ‘’valeur’’> ; Les valeurs des attributs « src » et « alt » indique ou le fichier se trouve et le texte alternatif à l’image respectivement. E x : <img src="images/montagne.jpg" alt="Photo de montagne" /> Miniature cliquable <a href="montagne.jpg"><img src="montagne_mini.jpg" alt="Photo de montagne" title="Cliquez pour agrandir" /></a>  Création d'une figure (tous ce qui illustre un texte ou apporte plus amples information) : <figure></figure> - Ex : <figure> <img src="images/blocnotes.png" alt="Bloc-Notes" />(l’image blocnotes.png fait office de figure) <figcaption>Le logiciel Bloc-Notes</figcaption>(<figcaption>permet d’insérer une légende) </figure>  Les balises universelles :<span></span>et<div></div>  Mettre en exposant :<sup>< /sup>  Insérer une légende :<figcaption></figcaption>  Appeler un script: <script src="monscript.js"></script> LES BALISES STRUCTURANTES Les balises structurantes sont au sein de la balise <body></body>  L'en-tête :<header></header>(contient bannières, logo et slogan du site)  Le pied de page : <footer></footer>(contient les contacts par exemple)  Principaux liens de navigation :<nav></nav>  Une section de page :<section></section>(permet de regrouper le contenu en fonction de leur thématiques)  Informations complémentaires : <aside></aside> (information complémentaire sur ledocument que l’on visualise)  Un article indépendant : <article></article> (Les différentes balises structurantes peuvent êtres imbriqués sagement les uns dans les autres) Pour la reconnaissance des balises structurantes  (a placer dans la balise « head ») MEMENTO DE HTML5/CSS3, PHP ET MYSQL MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN 3 CSS  Inclure un fichier .css dans sa page html :<link rel="stylesheet" href="nom_du_fichier.css" />  Appliquer un style à une balise sélectionnée: - balise { Propriété: valeur; }  Appliquer un style à plusieurs balises sélectionnées (balise1 et balise2 sont sélectionnées) : - balise1, balise2 { Propriété : valeur ; }  Les commentaires : /* Ceci est un commentaire */  Les attributs spéciaux (permettent de nommer des balises) : « class » et « id »(leurs valeurs seront les noms des balises dans lesquelles elles font office d’attributs)  Appliquer un style : LES SELECTEURS SIMPLES - P { (Sélectionne tous les paragraphes) } - h1, em { (Sélectionne tous les titres et les textes important) } Les deux sélecteurs ci-dessous sont des sélecteurs spécifiques - .class { } - #id { } LES SELECTEURS AVANCES : - * : sélecteur universel : Ex : * { (Sélectionne toutes les balises sans exceptions) } - A B : une balise contenue dans une autre : Ex : h3 em { (Sélectionne tous les balises <em> dans <h3>) } - A + B : une balise qui en suit une autre : Ex :h3 + p { (Sélectionne la première balise <p>située après un titre <h3>) } MEMENTO DE HTML5/CSS3, PHP ET MYSQL MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN 4 - A[attribut] : une balise qui possède un attribut E x : a[title] { (Sélectionne tous les liens <a>qui possèdent un attribut « title ») } - A[attribut="Valeur"] : une balise, un attribut et une valeur exacte Ex : a[title="Cliquez ici"] { (Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».) } - A[attribut*="Valeur"] : une balise, un attribut et une valeur Ex : a[title*="ici"] { (Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position)) } - A:last-child : cible le dernier élément A FORMATAGE DU TEXTE  Les différentes propriétés en CSS et leurs valeurs Description Propriétés Valeurs La Taille font-size - taille absolue : en pixels, en centimètres ou millimètres - *taille relative : en « % », « em » ou « ex » ou aussi - xx-small : minuscule ; - x-small : très petit ; - small : petit ; - medium : moyen ; - large : grand ; - x-large : très grand ; - xx-large : euh… gigantesque La police font-family - Sans-serif; - Arial Black ; - “Comic Sans MS” ; - “Courier New” ; - Georgia ;Ex1: font-family: police; - Impact ;Ex2: font-family: police1, police2, police3; - ‘’Times New Roman’’ ; Police perso. @font-face - @font-face (création de police perso. en un seul format) { font-family: 'MaSuperPolice'; src: url('MaSuperPolice.eot'); } font-family : ‘MaSuperPolice’ - @font-face(création de police perso. en plusieurs formats) { font-family: 'MaSuperPolice'; src :url(‘MaSuperPolice.eot’) ; src: url('MaSuperPolice.eot?#iefix') format('eot'), url('MaSuperPolice.woff') format('woff'), url('MaSuperPolice.ttf') format('truetype'), url('MaSuperPolice.svg#Masuperpolice') format('svg'); } font-family : ‘MaSuperPolice’ - italic: le texte sera mis en italique. MEMENTO DE HTML5/CSS3, PHP ET MYSQL MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN 5 Italique font-style - oblique: le texte sera passé en oblique - normal: le texte sera normal (par défaut). Gras font-weight - bold : le texte sera en gras ; - normal : le texte sera écrit normalement (par défaut). Soulignement Et décoration text-decoration - underline: souligné. - line-through : barré. - overline: ligne au-dessus. - blink : clignotant. - none: normal (par défaut). Alignement text-align - left: le texte sera aligné à gauche (par défaut). - center: le texte sera centré. - right: le texte sera aligné à droite. - justify: le texte sera « justifié ». Les flottantes float - left: l'élément flottera à gauche. - right : l'élément flottera à droite Stopper une flottante clear - left : le texte se poursuit en-dessous après un float: left; - right: le texte se poursuit en-dessous après un float: right; - *both: le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right; text-transform: - uppercase - lowercase FAIRE FLOTTER UNE IMAGE <p><img src="flash.gif" class="imageflottante" alt="Image flottante"/>texte qui habillera l'image flottante.</p> (CODE HTML) .imageflottante (CODE CSS) { float: left; } STOPPER UN FLOTTANT <p class="dessous">Ce texte est écrit sous l'image flottante.</p> .dessous { clear: both; } COULEUR ET LE FOND Descriptions Propriétés valeurs Couleur de texte color - En anglais : Ex : red, brown, yellow… - En hexadecimal : Ex : #FF5A28 - En RGB : Ex : rgb(rouge, vert, bleu) Couleur de fond background-color - Même principe que pour la propriété color - rgba(rouge, vert, bleu, opacité) Image de fond background-image (charge le fond d’écran) url("mon_image.format") (le chemin de l’image est indiqué par apport au fichier .css) background-attachment (fixer le fond) - fixed : l'image de fond reste fixe uploads/Litterature/ memento-2-html5-css3-php-mysql.pdf