WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

Dimension: px

Commencer à balayer dès la page:

Download "WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut."

Jean-Pierre Jean-Claude Fontaine
il y a 7 ans
Total affichages :

1 WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première page d un site s appelle TOUJOURS index.html Si on fait un dossier «index.html» ça nous amène sur un site. BALISES Balise <br /> permet d aller à la ligne >meta http-equiv= «Content-Type» content= «text/html ; charset=utf-8» /> <i>text</i> italique <b>text</b> gras <u>text</u> souligné Il faut imaginer les balises comme des carrés, on ne peut pas fermer une balise avant qu on est fermé celle qui se trouve dedans. Donc attention quand on en fait plusieurs d affiler Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. <p>text</p> balise de type «bloc» (qui ne peux que mettre à la ligne) </h1> Titre 1 </h1> balise qui donne des tailles de titres! balises de type blocs - EX : h1 = Titre 1 - h2 = Titre 2 - h3= Titre 3 - Etc jusque 6 (pas plus )

2 <img src= «place_de_l image_dans_le_dossier» /> exemple : <img src=«kedis.png»/> Balise <sup> = Faire des exposants Balise <sub> = faire des exposants en dessous ATTENTION!!! Certains formats sont web et d autres pas!! Format d images : - JPG*JPEG format web - PNG format web pour les animes - GIF format web transparent basse qualité TIFF BMP IMG 04/10 Les liens hypertextes envoient à une autre pages (ou à un autre endroit de la page), voir même un autre site. Balise <a> = liens hypertextes (signifie ANCHOR (encre)) - <a href=http :// Quand un site à déjà était visité il apparait en mauve souligné, en bleu souligné quand il n a PAS était visité. L intérêt de ces liens hypertextes est de faire des liens DANS mon site. Le menu ul li : <li> = faire une liste <ul> = debut et fin de liste - <body> <ul> </ul> <li><a href (site01) >nom du lien</a></li> <li><a href (site02) >nom du lien</a></li> <li><a href (site03) >nom du lien</a></li> De cette façon, tout les sites sont INTER Liés!!! A faire : Site 03 pages!!! INTER Liés - Un titre - Un texte

3 - - Des liens - Une image Rhubarbe.org!!!!!!! Cheat sheet Cheat.sheet.org : Toutes les balises que l on peut utiliser. Ils sont en html et en css Balises <span> = sert à mettre en page <!--balise vierge inline - - > <div> = sert à mettre en page «<!--balise vierge bloc - - > Ce sont les balises les plus utilisés!!! Un site de base a du contenu et une mise en forme : le CSS! HTML pas compliqué, juste ordonné CSS qui est le graphisme d un site, est complexe!!! faire une difference entre les images de CONTENU (html) & les images css (logos, decoratifs, ) DIV est un bloc (prends toute la largeur) Appeler le css <link rel «stylesheet» type=»text/css. CSS Body Backround-color: #FF0000; /* RR VV BB */ } Couleur du fond! RVB au maximum (256 chacun) = BLANC RVB au minimum = NOIR

4 (possible de voir les codes sur photoshop) Balises div mettent la couleur de fond SUR TOUTE LA LARGEUR Balise span seulement la où il y a du texte 10/10 Recapitulatif : - <ul> menu - Balise div = balise bloc - Balise span = balise en ligne Retour au css : Pour faire des commentaires /* commentaire*/ Pour = ctrl+alt+ç/à Body Background-color : white; /*... (voir style.css sur dreamweaver) <link rel = stylesheet type= text/css href= reset.css /> <link rel = stylesheet type= text/css href= style.css /> À placer en 1er!!! Exemple de CSS body div background-color: red; /* couleur de fond */ color:green /* couleur de texte */

5 } span background-color:green; width:300px; /* largeur en px ou % */ } h1 /*headline - titre 6 niveaux*/ front-size: 30px; /*taille du texte*/ background-color:yellow; width:400px; height:400px; /*toujours width avant height*/ color:#ff0000; /*hex - 16valeurs - RR VV BB*/ } ID/class Id= UTILISATION UNIQUE ><Class = PLUSIEURS UTILISATIONS Quand on crée un site! : (voir feuille) Liens : 17/10/ an.kooka.be - les site cssmania ( Responsive= CS3 (les éléments bouge quand l on retrecit ou agrandit la page) s adapte au iphone, «What the font» : site pour definir la typo d un site ou d un document, via une image png 31/10 DANS TOUT LES PROGRAMMES!!!! CTRL+F=BARRE DE RECHERCHE!!

6 Important quand l on crée un site, on utilise un float pour placer les elements les uns a coté des autres. Float : left ; Clear sur footer. Permet de supprimer le float clear : both ; Autre catégorie, les marges! permet de faire en sorte que le texte ne bave pas sur les bords. PADDING. Ou Mettre une marge entre les blocs MARGIN ex : Margin-right : px ; Margin-top : px ; Voir feuille propriétés css Margin : 20px 40px ; = Marge de 20 en haut et en bas et 40px gauche et droite. 07/11/ caractères MAXIMUM par ligne Pas de petites majuscules dans un texte Typo fine de préférence. LISIBILITE En css, l espace entre les lignes, line-height L espace entre les lettres, letter-spacing Largeur de typo, chasse Paris-web.fr!! Parle de design web, TRES INTERESSANT!!! David Rault!! Grand Typographe. Ted.com/talks!! Smashingmagazine.com Jacob Nielsen CSS 3 Css3generator.com!!!!!! pour générer des codes css 3

7 Permet de faire des ombres portées, des bords arrondis, font face, colonnes multiples, box resize! (permet de «ranger» des blocs), transitions (permet que quand on passe sur un blocs, apparait une bordure, changement de couleurs, ), FAIRE UN DESIGN DE SITE SUR ILLUSTRATOR (voir agenda) Pour duppliquer notre premiere page de site : CTRL+ALT+P (format document-modifier plan de travail-ensuite avec alt, dupliquer et pour quitter on clique sur n importe quel outil)=> enregistrer le fichier source en ai et en suite enregistrer en pdf. Kuler.adobe.com 15/11/ /11/2012 La balise <a href= «http»>kedis</a></li> permet de generer des liens L entre guillemets et le site qu affichera le lien «kedis» sera ce qui est afficher comme nom du lien. 29/11/2012 En css une balise * pemet d appliquer quelque chose à TOUTES les balises! Ex : * Font-family : helvetica ; } TYPE DE POSITION dans la liste des propriétés css : Il y a quatre type de position : - Bouge avec le scrol. Mais passe devant tout les autres blocs. Pour choisisr son emplcemen t on rajoute des balises top bottom left ou right. - Fixe : ne bouge pas quand on scroll. - Relatif - Statique Pour faire passer un element evant un autre, il suffit de faire une balise z-index de par exemple, 2 Et mettre les autres boites en Z-index 1. Le z-index ne fonctionne que avec des blocs fixed ou absolute.

8 Quand l on centre des balises, il se centre en fonction de la partie gauche de la boite Technique : mettre des marges négative de la moitié de la taille de la boite apres avoir centrer. Ainsi, il sera toujours au centre. DEFIS : Mini site 30 min Hedernac3 liens Content 2 colonnes 1/3, 2/3 Footer Lorem ipsum partout Themecanard Full css Balise clear= annulé un float. 05/12/2012 Pour pouvoir gerer la largeur. Mettre tout les elements dans un content invisible. De cette facon les blocs ne bougeront pas quand l on reduit la taille de la page ou si l on affiche la page sur un ecran different. Balise <ol>(order list) : permet de faire une liste avec chaque element à la ligne <ol> </ol> <li>kedis</li> <li>kedis</li> On peux ajouter dans le css un list-style :circle ; Ca ajoute des points pour enumérer dans la liste. o Kedis Utiliser des margin :auto ; dans le global pour tout placer à gauche/droite/centre Système pour changer les points des list-style par des images

9 List-style-image : «image» Quand on veux floater un element il faut faire une balise clear aux elements dessous. Sinon ils vont tous suivre et se mettre a coté. Quoi qu il arrive pour une liste : <ul> </ul> <li> <li> <li> <li>

Documents pareils

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations