Ainsi, avec une valeur de 0. On peut ajouter une image de fond avec background-image. Mettez une valeur en pixels comme 2px. La couleur : c'est la couleur de votre bordure. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page! Code : CSS p www. On peut arrondir les bordures avec border-radius.
On peut ajouter une ombre aux blocs de texte avec box-shadow. Le texte peut lui aussi avoir une ombre avec text-shadow. Le premier que je vais vous montrer s'appelle :hover. On peut par exemple changer la couleur de fond du lien lorsque l'on clique dessus : Code : CSS www. On utilise pour cela les pseudo-formats. Le pseudo-format :hover permet de changer l'apparence au survol par exemple : a:hover pour modifier l'apparence des liens lorsque la souris pointe dessus.
Structurer sa page Nous approchons de plus en plus du but. Pour le moment, nous n'allons pas encore faire de mise en page. Vous y placerez par exemple le menu principal de votre site. Utilisez ces balises uniquement si vous en avez besoin. C'est normal, il n'y a pas de CSS! C'est vrai. Quand l'ordinateur « comprend » la structure de la page, tout devient possible.
Les scripts sont des petits morceaux de code qui permettent de manipuler la page web et d'effectuer certaines actions. Ces balises ne s'occupent pas de la mise en page. Ce sont des notions fondamentales dont nous allons avoir besoin pour mettre en page notre site web… Soyez attentifs! Mais comment je reconnais une balise inline d'une balise block?
Il suffit d'imaginer tout simplement un bloc. Sur fond jaune, vous avez tout ce qui est de type inline. Comme vous pouvez le voir, les blocs sont les uns en-dessous des autres. Les dimensions Nous allons ici travailler uniquement sur des balises de type block. Les blocs prennent toute la largeur disponible Maintenant, rajoutons un peu de CSS afin de modifier la largeur des paragraphes.
Vous pouvez donc aussi essayer ces manipulations sur ce type de balises. Ainsi, le navigateur centre automatiquement nos paragraphes!
Il n'est cependant pas possible de centrer verticalement un bloc avec cette technique. Seul le centrage horizontal est permis. Eh oui! On ne pourra pas voir tout le texte. C'est la valeur que je conseille d'utiliser le plus souvent. Elle permet de charger tout le contenu d'une autre page HTML au sein de votre page.
Elles se suivent de haut en bas. Vous allez voir, il existe plusieurs techniques permettant d'effectuer la mise en page de son site. Nous voulons que le menu occupe pixels de large. Code : CSS www. Et quel est ce nouveau type bizarre, inline-block? En effet, ce n'est plus un bloc! La section occupe seulement la place dont elle a besoin. Si cela ne vous convient pas pour votre design, modifiez la taille de la section avec width.
Dans votre feuille de style classique style. Toutefois, vous verrez qu'on l'utilise bien plus souvent sur des balises block que sur des balises inline.
Il faut d'abord faire son choix entre les trois modes de positionnement disponibles. Faites le test, vous verrez! Tordu n'est-ce pas? C'est le principe de la position relative. En fait, c'est ce que j'appelle un « TP » Travaux Pratiques. Maquettage du design Je vois d'ici le tableau. De quoi va-t-il parler? Nous allons construire le squelette HTML de la page.
Puis nous allons le mettre en forme et le mettre en page avec CSS. Allez, au boulot! Ces blocs vont constituer le squelette de notre page. Comment je sais quelle balise utiliser moi? Regardez la figure suivante pour voir ce que je vous propose comme structure. Pour le moment, comme vous vous en doutez, le site web n'est pas bien beau et encore, je suis gentil.
Section principale du corps de page, au centre. Pied de page footer. Dafont ne propose que le. La figure suivante vous montre ce qu'on obtient pour le moment avec le code CSS. Nous verrons ensuite comment mettre en forme les liens de navigation. Rien d'extraordinaire pour le moment. Vous pouvez l'essayer pour tester votre site sur les anciennes versions d'IE. Le site sous IE7 : rien ne s'affiche correctement! Pour le moment, notre site web n'est pas encore disponible sur le Web, ce qui fait qu'il n'a pas d'adresse URL.
Le mieux est donc d'envoyer le fichier. Le validateur du W3C nous informe que notre page ne comporte pas d'erreur Dans ce cas, cela signifie que tout va bien et que vous avez bien construit votre page! Malheureusement, il arrivera souvent que vous ayez des erreurs. Il faut savoir que les navigateurs « essaient » de ne pas afficher les erreurs, lorsqu'ils en rencontrent, pour ne pas perturber l'internaute.
Mais rien ne vous dit que d'autres navigateurs ne vont pas se comporter bizarrement! Cela simplifie le travail des programmes qui lisent les pages web. C'est interdit. Tout le monde fait des erreurs, alors ne paniquez pas. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. En HTML, un tableau se construit ligne par ligne.
Chaque cellule a sa propre bordure Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.
Titre du tableau Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau.
Sans titre de tableau, vous le voyez, on est un peu perdu. Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles. Que mettre dans le pied de tableau? En fait, vous vous en servirez surtout si votre tableau est assez gros et que vous avez besoin de l'organiser plus clairement.
Dans certains tableaux complexes, vous aurez besoin de « fusionner » des cellules entre elles. Un exemple de fusion? Un tableau contenant des titres de films www.
Il faut savoir qu'il existe deux types de fusion : La fusion de colonnes : c'est ce que je viens de faire dans cet exemple. La fusion s'effectue horizontalement. On utilisera l'attribut colspan. La fusion s'effectuera verticalement. On utilisera l'attribut rowspan. Et pour la fusion verticale avec rowspan, on fait comment? Cela se complique un petit peu. On peut ajouter une bordure aux cellules du tableau avec border. L'utilisation de ces balises n'est pas obligatoire. On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan.
Nous arrivons cependant aux limites du langage HTML car il faut ensuite pouvoir analyser les informations que le visiteur a saisies… et cela ne peut pas se faire en langage HTML. On va prendre un exemple pour que les choses soient claires. Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire, par exemple un message qu'il aimerait publier sur vos forums. Par quel moyen? C'est ce que nous allons voir maintenant. Les zones de saisie basiques Bien, retour au concret.
On retrouvera cette balise plusieurs fois dans la suite de ce chapitre. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo : www. Mais cela ne suffit pas. Un name et un id sur le champ? Cela ne va-t-il pas faire double emploi? Si, un peu. On peut donner une indication sur le contenu du champ avec placeholder. Un champ de texte avec une indication placeholder Essayer! Une petite zone de saisie multiligne Comme vous pouvez le constater, c'est un peu petit!
Mais enfin! De nouveaux types de champs sont en effet apparus avec cette version. Faisons un petit tour d'horizon! Tous les navigateurs ne connaissent pas encore ces zones de saisie enrichies. Il peut afficher une indication si l'adresse n'est pas un e-mail, c'est ce que fait Firefox par exemple figure suivante.
Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 par exemple 0, 2, 4, 6…. Rien de plus simple! Tout simplement pour que le navigateur sache de quel « groupe » le bouton fait partie.
Or, ce n'est pas ce que l'on veut, c'est pour cela qu'on les « lie » entre eux en leur donnant un nom identique. Finaliser et envoyer le formulaire Nous y sommes presque. C'est celui que vous utiliserez le plus souvent. Rajoutez l'attribut src pour indiquer l'URL de l'image. Nous ne l'utiliserons pas ici. Certains sites comme swisstools. Il faut utiliser un langage « serveur » comme PHP… Si vous voulez aller plus loin, il va donc falloir apprendre un nouveau langage!
Je vais donc simplifier les choses et vous expliquer juste ce que vous avez besoin de savoir. Les formats audio Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats. Eh non! Nous venons de les voir, on utilise les www. Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.
Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire. Si vous testez ce code… vous ne verrez rien! Utile si vous ne voulez pas gaspiller de bande passante sur votre site. Je vous conseille de proposer une solution de secours en Flash, comme Dewplayer.
Il faut proposer plusieurs versions du fichier audio. En ce qui nous concerne, ce sera largement suffisant! Je vous recommande donc d'indiquer le format H. Ce n'est pas possible. Code : HTML www. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc. Essayez de la redimensionner pour voir!
Tester ce code www. Vous allez voir qu'on peut faire tout ce qu'on veut! On pourrait bien entendu faire beaucoup d'autres modifications : changer la couleur, la disposition du pied de page, etc. Nous y ajouterons quelques instructions media queries pour adapter le design. Avec :last-child, on cible uniquement le dernier paragraphe dans le bloc aside celui qui contient les liens vers Facebook et Twitter , pour pouvoir centrer les images.
On ne peut donc pas vraiment utiliser handheld pour viser les mobiles. Tout vu? JavaScript n'a aucun rapport avec le langage Java. Seuls les noms se ressemblent. Elles sont nombreuses et on les confond d'ailleurs souvent avec HTML5.
Le logiciel Inkscape est connu pour permettre de dessiner des SVG. Web Storage : permet de stocker un grand nombre d'informations sur la machine du visiteur. C'est une alternative plus puissante aux traditionnels cookies.
La plupart de ces technologies s'utilisent avec JavaScript. NET… Les langages dont nous allons parler ici sont eux aussi des langages de programmation. Comme JavaScript? Tout d'abord, en termes de puissance, un serveur sera bien souvent plus rapide que la machine de vos visiteurs, ce qui permet d'effectuer des calculs plus complexes.
Citons-en quelques-uns : PHP : l'un des plus connus. On l'utilise en combinaison avec d'autres technologies Microsoft Windows Server…. Il utilise le puissant framework. Vous aimeriez donc l'envoyer sur le Web, mais… vous ne savez pas comment faire.
Le nom de domaine Savez-vous ce qu'est un nom de domaine? Il s'agit en fait d'une adresse sur le Web : siteduzero. En rouge, le nom de domaine proprement dit. Il existe grosso modo une extension par pays. Comment dois-je faire? Alors j'ai une bonne et une mauvaise nouvelle. Comme d'habitude, on va commencer par la mauvaise : la mauvaise : ce n'est pas gratuit… la bonne : … ce n'est vraiment pas cher du tout.
Le prix peut varier en fonction de l'extension. Ainsi, l'extension. La plupart du temps, heureusement, le serveur travaille sans broncher. Vous n'aurez que l'embarras du choix. Cochez la case en fonction des extensions que vous voulez utiliser. Si vous en cochez plusieurs, il faudra payer un peu plus. Cliquez simplement sur "Continuer". Dans la partie du haut, vous avez les dossiers et, dans la partie du bas, la liste des fichiers du dossier actuel. On va vous fournir trois informations qui sont indispensables pour que FileZilla puisse se connecter au serveur : L'IP : c'est « l'adresse » du serveur.
Le plus souvent, on vous donnera une information du type ftp. Si vous avez ces trois informations, vous allez pouvoir continuer. Si vous ne les avez pas, il faut que vous les cherchiez, c'est indispensable. Cochez Type d'authentification : Normale pour pouvoir saisir le login et le mot de passe. Vous pouvez envoyer n'importe quel type de fichier. Veuillez noter qu'il faut que votre page d'accueil s'appelle index. Il faut l'envoyer sur le Web pour qu'il soit visible par tout le monde.
Vous trouverez ici un grand nombre de balises HTML. Qu'est-ce que la mise en forme de texte? Combine : font-weight, font-style, font - font-size, font-variant, font-family. Combine : background-image, background - background-repeat, background-attachment, background-position opacity 0. Combine border-width, 3px solid black border-color, border-style. Existe aussi en version border-top, border-right, border border-bottom, border-left. Combine list-style-type, - list- style list-style-position, list-style-image.
Curseur de souris www. Si vous regardez bien, il y a deux balises de commentaires. Le code HTML se trouve en-dehors des balises de commentaires, il sera donc lu par tous les navigateurs… sauf IE, qui lit les commentaires lui demandant de ne pas lire le code HTML qui suit.
Mais cela fait alors beaucoup de fichiers. Ce nom de classe indiquera dans le fichier. Dans ce cas, un seul fichier CSS suffit. Les hacks CSS « Hack » signifie « bidouille » en anglais. Souvent, cela vous permet de comprendre ce qui se passe dans votre page. Mozilla Firefox : installez l'extension Firebug. Related Papers. By Siassieu Jean Baptiste Douon. Dynamisez vos sites web avec Javascript! Ce PDF vous est offert par. By Rachid Alika. By Hakim sedrati. By Ahmed Mabrouk.
Download pdf. Log in with Facebook Log in with Google. Vous survolez de nombreuses notions sans avoir le temps de les assimiler ou au contraire vous rongez votre frein pendant les points qui ne vous concernent pas.
Pas moi! Vraiment pas. Pendant que je pouvais encore y consacrer du temps. Un super boulot. Un grand bravo! Merci Lycia ». Merci et bravo Lycia! Expliquez-vous comment migrer mon site depuis Wix, Squarespace ou WordPress.
Super idee! Merci beaucoup Elise! Bon courage pour votre projet. Que me conseillez vous. Je viens de terminer la lecture de ton livre. Merci Bruno pour cet avis constructif! Merci encore! Et la hop la bonne pioche :.
La entre ce guide , les articles de La webeuse et de WPformation, je vais apprendre beaucoup dans les prochains jours! Merci beaucoup. Merci beaucoup Louis! Je vous donne ma config actuelle et le lien ci-dessous. Bonjour Didier et merci. Bonne continuation. Lycia, bonjour. BRAVO pour le guide ultime.
Petit be-mol. Salut Richard! Merci pour le guide! Donc, quel est votre besoin exactement et votre souci? Bonjour La Webeuse. Salut Anderson! Salut TriceKiran. Merci, et beau blog. Bonjour, Votre livre convient-il pour une utilisation de wordpress.
Avez-vous parmi vos livres un qui pourrait me convenir? Merci, Guy Richer. Salut Guy. They are really convincing and can certainly work. Still, the posts are too quick for starters.
0コメント