Remerciez-le!

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

pour creer un fichier html il faut: clique sur "file" en suite sur "save as" et

pour creer un fichier html il faut: clique sur "file" en suite sur "save as" et ecrire le nom du fichier avec ".html" exemple: "nom.html" <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>titre</title> </head> <body> </body> </html> quelques balises: <u>:pour souligné <br/>:pour aller a la ligne <p></p>: pour les paragraphes <h1></h1>:titre <figure>:sert a contenir une "image, tableau..." a la quel on rajoute une legende(l'image pourra etre manipulé dans le css comme un texte) <strong></strong>:mettre en gras <em></em>:en italique <ul></ul>:pour listé <li></li>:pour separé les mots lister <ol></ol>:pour numéroté <a href="url du site"></a>:creer un lien vers un notre site,(si c'est un lien vers une autre page de votre site alors "nom du fichier.html") <h2 id="nom de l'ancre" >titre</h2> :pour l'ancre(pour se servir de repere vers l'ancre) <a href="#nom de l' ancre">allez vers titre</a> :allez vers l'ancre <a href="url du site" target="_blank" :pour que le lien ouvre un nouvel onglet <img src="nom_de_l'image_dans_le_dossier.son extension"> :pour ajouter une image <img src="nom_de_l'image_dans_le_dossier.son extension" style="width: 400px;height:400px;"> :pour imposer une taille a l'image INTRODUCTION au CSS pour creer un fichier css il faut: clique sur "file" en suite sur "save as" et ecrire le nom du fichier avec ".css" exemple: "nom.css" <link rel="stylesheet" href="nom du fichier.css"/>:pour associé un fichier css dans une page HTML(a ecrire dans le <head> de votre HTML) dans le css pour modifier les attribues d'une balise, on appelle la balise dans le css exemple: p(balise situé dans le html) { color: blue; } (tout les endroits ou apparaitra la balise <p> seront en bleu) c'est a dire balise { proprieté1:valeur1; proprieté2:valeur2; } l'attribue <h1 class="example"> titre</h1>: pour specifié la partie a modifier; ensuite allé dans le css a la place de la balise(comme plus haut) mettez [.example] <span></span>: pour specifié un mot dans un paragraphe pour pouvoir y ajouter des attribues css <div></div>: pour specifié un bloc de texte pour pouvoir y ajouter des attribues css QUUELQUES PROPRIETES CSS pour la mise en forme du texte *font-size:pour la taille du texte(exemple:1.3em ou 13px) *font-family:pour la police (comme:arial,arial black,impact,verdana,times new roman,georgia,comic sans MS) on peut ecrire plusieur police separer par des virgules grace au site FONT SQUIRREL on peut telecharge de nouvelle police *font-style:pour mettre par exemple en italic *font-weight:bold; :pour mettre en gras *text-decoration:(avec underline:souligner,overline:souligner au dessu,line- trough:barrer) *text-align:popour aligne le texte (center:centrer le texte, left:a gauche,right:a droite,justify:pour justifier) *float:pour changer l'emplacement d'une image ou d'un bloc de texte *clear:pour dire que le texte continue en bas de l'image( avec "both" comme attribut) //POUR EMBELIR LE TEXTE *color:pour mettre la couleur a un texte(on peut ecri le nom de la couleur en "anglais" ou en hexadecimal "enxample:#4A28CD" ou en rgb(255 00 255) alle dans le le logiciel paint pour avoir des detaille *background-color:la couleur du fond ecran (d'une ligne de notre page ou de la page entiere) *background-image: ajouter une image en fond (syntaxe:back.... :url("le nom de l'img.son extension")) on peut ajouter plusieur image en les separant par des virgules *background-attachement:(fixed :pour que le txte ne suis pas l'image) *opacity: pour rendre transparent(exemple:0.6) *background-position:pour positionner l'image //POUR CREER DES BORDURES *border: (en indiquant {la taille de la bordure"en px"; la couleur;et le type(solide,ridge,double,outset,inset,groove,dashed,dotted..)) *on peut decider de mettre une bordure en haut ou en bas en rajoutant (border- top:en haut, border-bottom : en bas) *border-radius:pour arrondi les bordure(en "px") ou creer des courbe en rajouttant une autre valeur separer par "/" *box-shadow: pour rajoutter une ombre(mettre les 3 premières valeurs en "px" et la derniere valeur permet de preciser la couleur de l'ombre) *text-shadow:pour rajoutter des ombre sur le texte //POUR CREER DES EFFETS DYNAMIQUE pour cela, on rajoute ":nom du pseudo format" a coté de l'element "html" a modifier (exemple: "h1:hover" qui signifie au sur-vol de la souris lorsque la souris sur-vol un texte celui ci peut par exemple changer de couleur ou...) *:visited; pour changer la couleur des liens qui ont deja ete visité //POUR METTRE EN PAGE AVEC FLEX-BOX *display:flex; :permet de manipuler les position d'un conteneur *flex-direction:pour classe les element (ces propriétées sont: column"organisé sur la colone" , row"sur la ligne") *flex-wrap:pour aller a la ligne (///: wrap"aller a la ligne quand y a plus d'espace) *justify_content:changer l'alignement sur l'axe principal(///: center"aligne au centre" space-between" il y a de lespace entre les elemnets" space-around" /// et aussi une petite marge" flex-end "les elements sont aligné a la fin")) *align-items:changer l'alignement sur l'axe secondaire(///:flex-start "au debut", flex-end"..", center"..") *align-self:manipuler un seul element contenue dans un "box" *aling-content: *flex:faire grossir ou maigrir AUTRES BALISE HTML <header>:en-tête <footer>:pied de page <nav>:precise le menu de navigation //LES BLOCS NB: width:largeur en "px" ou "%, height:hauteur *padding: la marge a l'interieur du bloc en "px" *margin://..// entre 2 blocs top"en haut",bottom"bas",left ///LES TABLEAUX <table>:permet de delimiter un tableau <tr>:permet de representer chaque ligne du tableau (une balise <tr>=une ligne) <th>: la premiere ligne du tableau (l'entête)(se place dans <tr>) <td>:represente chaque cellule du tableau(se place dans <tr>) <caption>:titre du tableau grace a la proprieter "border" on peut rajouter des bordure a chaque cellule grace a la proprieter "border-collapse" et la valeur "collapse" on peut fusionner les bordures du tableau grace a "caption-side:bottom" on peut mettre le titre du tableau en bas ///CREER UN FORMULAIRE BALISES HTML *<form>:la balise qui delimitera le contenue du formulaire en ajoutant les attribues("methode" qui indique par quel moyen les données vont etre envoyer avec la valeur "post"; "action" qui indiquera la page ".php" il exite 2 type de zone de saisie de texte -monoligne(les texte a une ligne comme le nom ou le pseudo) -multiligne(les textes a plusieur ligne) -MONOLIGNE *<input/>:pour les zones monoligne (en precisant l'attribue "type" avec la valeur "text" et l'attribue "name" et "id" avec une valeur qui precise le nom a un element du formulaire exemple "pseudo" motde passe")(<input type="text" name="pseudo" id="pseudo"/>) on peut aussi la valeurs "password" a l'attribues "type" pour preciser que le contenue est un mot de passe) *<label>:pour dire a l'utilisateur se qu'il rempli en precisant l'attribue "for" pour dire de quel "id" ça vient QUELQUES ATTRIBUES CSC *size:agrandir le champs *maxlength:pour limiter le nombre de caractere a saisir *value: pour preremplir le champ *placeholder:pour donner une indication sur le contenue du champs -MULTILIGNE *<textarea>:pour creer une zone de texte multiligne(possède les même attribues que <input/>) en css on peut augmenter la largeur et la longeur autres valeurs de lattribue "type" : "email":pour les emails; "url":pour les liens; "tel":pour les numero; "number":les chiffres; "range":permet de selectionner un nombre avec un curseur; "color":pour la saisi d'une couleur; "date","time","datetime":pour le temps; "search":pour une recherche en rajoutant "checkbox" a l'atribue "type" on poura avoir une case a cocher //////////// "submit" //////////////////// pour creer un bouton "envoyer" avec comme "value":"envoyer" AJOUTER DES AUDIO ET DES VIDEOS -AUDIO *<audio>: pour ajouter un audio avec les atribues("src" pour "nom de l'audio.son extension";"controls" pour ajouter les boutons "pause" "lecture"... "width";"loop" pour "jouer lamusique en boucle"; "preload" pour "indiquer si la musique doit etre precharger" avec les valeurs tel que "auto "metadata" -VIDEO *<video>:pour ajouter une video avec les attribues("poster" pour "afficher une premiere image sur la video (avec une capture d'ecran)"; "controls"; "width";"height" "loop";"preload" LES MEDIAS QUERRIES permette d'adapter la taille de ton site a la resolution de l'ecran du visiteur *pour cela, dans le fichier css on rajoute une regle avec la syntaxe "@media screen and (max-width: 1280px){ rediger vos proprieter css ici }" avec quelque regle ("color";"device-height" pour la hauteur du peripherique;"device-width";"orientation";"media" avec ses valeurs (screen; handheld pour les mobile; all pour tout type d'ecran *<canvas> -PROCHAIN LANGAGE LE JAVASCRIPT uploads/s3/ structure-de-base-d-x27-un-html.pdf