AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Formation HTML/CSS

Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant
Re: Formation HTML/CSS  posté le :
C'est parfait les loulous maintenant !
On va continuer !

Balises de mise en valeur


Nous allons maintenant voir des balises qui permettent de mettre en valeur un mot, une phrase, une partie de phrase. En bref, tout ce qu'on veut comme texte !

Allez, sans plus attendre, les voici :
Mon texte mis en valeur
Code:
<strong>Mon texte mis en valeur</strong>
Les balises strong permettent de valoriser un texte, en le mettant en gras, jusqu'à maintenant.

Mon texte mis en valeur
Code:
<em>Mon texte mis en valeur</em>
Les balises em permettent de valoriser un texte, en le mettant en italique, jusqu'à maintenant.

Mon texte mis en valeur
Code:
<mark>Mon texte mis en valeur</mark>
Les balises mark permettent de valoriser un texte, en le surlignant, jusqu'à maintenant.

Ces 3 balises n'ont cependant pas la même "force de valorisation". Ce que je veux dire, c'est que l'une met plus en valeur que l'autre.
En effet, la balise strong est celle qu'il faut utiliser si on veut vraiment mettre beaucoup en valeur.
La balise em, est à utiliser quand on veut mettre moyennement en valeur.
Et la balise mark, est à utiliser, quand on veut légèrement mettre en valeur.

Donc, par ordre décroissant de force de valorisation, nous avons :
1 - <strong> </strong>
2 - <em> <:/em>
3 - <mark> </mark>>


Parlons maintenant d'un autre point. J'ai mis, pour chaque balise :
Explication de chaque balise a écrit:
jusqu'à maintenant.
Pourquoi ?
Hé bien, tout simplement car cela peut changer.
Peut être que sur un coup de tête, un jour, un développeur de google chrome, ou de mozilla firefox, va faire que les balises strong valorisent un texte en le mettant en bleu, souligné et avec une police de 25 pixels ^^.
Donc, le but de la balise strong n'est pas de mettre en gras, mais bien de mettre fortement en valeur.
Pareillement, le but de la balise em n'est pas de mettre en italique, mais bien de mettre moyennement en valeur.
Et enfin, le but de la balise mark n'est pas de surligner un texte, mais bien de le mettre légèrement en valeur.

Néanmoins, il existe des balises HTML, qui ont pour but de mettre en gras ou encore de mettre en italique, sans pour autant mettre en valeur quoi que ce soit.

Et ça tombe bien, nous allons les voir juste après ta réponse à ce message, si vous n'avez pas de question Very Happy

PS : Maintenant, avec ce cours, vous avez donc la formelle interdiction d'utiliser des <em> et <strong> à tout bout de champ sans raison mouhahaha
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
J'ai tout compris, mais c'est normal qu'il n'y ait rien après le 1 -, 2 -, 3 - ?

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Elu nous teste ! Bien joué Doudou ! =D
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Voilà c'est corrigé xD. Désolé :p.

Continouons maintenant avec nos balises qui servent juste pour la mise en page (attention, ça reste tout de même du HTML, pas question de CSS ici)

Mon texte mis en gras
Code:
<b>Mon texte mis en gras</b>
Mise en page en mettant le texte en gras

Mon texte mis en italique
Code:
<i>Mon texte mis en italique</i>
Mise en page en mettant le texte en italique

Texte en exposant
Code:
Texte en <sup>exposant</sup>
Mise en page en mettant le texte en exposant (1/2px au dessus, et taille de la police plus petite)

Texte en indice
Code:
Texte en <sub>indice</sub>
Mise en page en mettant le texte en indice (1/2px en dessous, et taille de la police plus petite)

Texte souligné
Code:
Texte <u>souligné</u>
Mise en page en soulignant le texte.

Everything is ok ?
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Everything is ok, Elu' :joker:

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Ok dude =3
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Alors on continue. Sortons un peu des balises qui touchent à du texte, pour parler des balises qui touchent à des images tiens !

Nous allons maintenant voir comment insérer une image dans une page html.

Pour mettre une image, la syntaxe est :
Code:
<img src="liendetonimage.extension" alt="Motsurlimage" />

Comme vous l'aurez remarqué mes padawans, c'est une balise orpheline.
Mais, il y a des trucs bizarres qu'on n'a pas encore vus, sous la forme mot="qqchose". Ces "trucs bizarres" sont appelés plus scientifiquement, attributs de la balise. Des attributs permettent de renseigner des informations supplémentaires quant à une balise.
Vous comprendrez sûrement mieux avec les attributs de notre balise <img />
Elle a deux attributs :
src="" : cet attribut renseigne le lien de l'image qu'on veut afficher (par exemple : http://hostingpics.net/image.png)
alt="" : cet attribut est obligatoire et renseigne l'image (par exemple, si notre image représente une tortue, dans notre attribut alt, on aura "Tortue")

Il est possible d'avoir un autre attribut que j'estime important :
title="" : c'est ce qui s'affichera au survol de la souris sur l'image. Il permet enfin de renseigner un petit mot qui s'affichera quand on passera par dessus la photo.

Voyons voir ce code :
Code:
<img src="http://r29.imgfast.net/users/2916/61/52/62/avatars/1-52.jpg" alt="Mon avatar" title="Avatar de Eluknow" />

Cela donne :
Mon avatar
Survolez l'image quelques secondes, et regardez ce qu'il s'affiche Wink.

Voilà, nous avons donc notre première balise permettant d'afficher une image, et nous avons la notion d'attributs.

Note : L'attribut alt est obligatoire, mais son contenu peut être omis. Par exemple, il est possible de faire : alt="". Cependant, je vous le déconseille fortement. Je suis dans l'optique de toujours mettre le alt avec du contenu. Car, si votre image par exemple ne veut pas se charger, que vous vous êtes trompés, c'est le alt qui sera affiché. Et, si un malvoyant vient sur votre site/forum ou blog, son logiciel de lecture lit les alt des images. Vous vous doutez bien qu'il ne peut pas lire l'image en elle même ^^

C'est tout bon ? Smile
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Oui, tout est ok, maître Razz

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Ok pour moi aussi patron ! =D
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Si tout est ok, on va passer aux liens.

Un lien est un texte/un mot, qui te permet d'accéder à un autre site, à une autre page sur le web.

La syntaxe :

Code:
<a href="tonlien.fr">Texte du lien</a>
Texte du lien

On va examiner tout cela :
href="tonlien.fr" est un attribut de la balise, qui permet de renseigner la page web sur laquelle on doit arriver quand on clique sur le lien. Et le lien est "Texte du lien", dans le cas présent.

Un autre exemple :
Code:
<a href="school-of-pub.net">SoP</a>
SoP
Et si je clique dessus, ça m'emmène sur school-of-progress.net (c'est notre partenaire :$) Wink

Mais là, y'a un petit soucis.
Si on clique sur le lien, ça nous change la page actuelle. Donc assez gênant, si on met un lien vers un autre site... Car on perd l'utilisateur sur notre site !
Si on veut que le lien s'ouvre dans une autre page, on rajoute un attribut, qui est target="".
Et on lui met comme propriété de l'attribut, l'information _blank. Comme suit :
target="_blank"
Donc par exemple :
Code:
<a href="tonlien.fr" target="_blank">Tonlien</a>

Compris ? Si oui, j'aimerais que vous deux essayiez de me faire un lien vers le site d'Atdc (http://atdc.alwaysdata.net) qui s'ouvre dans une nouvelle page ? Sachant que texte du lien (donc entre <a> ICI </a>) devra être votre avatar, c'est à dire une image !
Comme d'habitude, c'est à déposer dans votre partie des exos Wink.

Bonne chance Wink
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Bonjour Smile

Maintenant que vos exos sont tout bon, on passe aux balises structurantes !

Comme vous l'auras sans doute deviné, elles servent à structurer notre page.

Allez on y va !

Première balise :
Code:
<header></header>
Balise définissant l'entête de notre page dans le body (ce n'est pas le head !), ou d'une balise block. L'header est dans un site, forum ou blog, la partie supérieure de la page, ou d'une balise.
Exemple de header :
Spoiler:
 


Seconde balise :
Code:
<nav></nav>
Ces balises permettent de réaliser des barres de navigation.
Spoiler:
 

Troisième balise :
Code:
<section></section>
Les balises sections englobent des contenus (textuels, graphiques ou les deux en même temps) qui sont liés par le sens/qui parlent de la même chose.
Ici, il pourrait y avoir une "section" au sein du header.
Spoiler:
 

Quatrième balise :
Code:
<article></article>
Ces balises permettent d'englober des textes indépendants les uns des autres, mais qui parlent de la même chose.
Les article sont forcément dans des section.
Spoiler:
 

Cinquième balise :
Code:
<aside></aside>
Ces balises sont utilisées pour englober un contenu complémentaire à un autre.
Toujours dans notre section :


Et enfin sixième balise :
Code:
<footer></footer>
C'est l'inverse de header. Ces balises sont là pour englober le contenu tout en bas de la page, le pied de page.

Je vous avoue que c'est assez difficile à comprendre.

Est-ce que vous pourriez  essayer de me dire à quoi correspond chaque élément de ce schéma ? (en utilisant le code couleur, par exemple : Violet = aside)

Spoiler:
 

Bonne chance, et si vous avez un souci.... Eluknow est là Very Happy
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Coucou !
On continue... Mais comme d'habitude, on a souci avec Internet Exlorer (vous verreez qu'on a toujours dess soucis avec ce navigateur...). Dous Internet Explorer, dans les versions antérieures à 9 (abrégé IE9), ces balises ne sont pas prises en compte.

C'est là qu'interviennent nos balises scripts.

En fait, il existe un script javascript, qui, sous IE inférieur à 9, lit les balises.

Pour cela, il faut que seul IE lise ce script, et donc, on fait appel aux commentaires conditionnels. Ce sont des commentaires qui permettent d'être lus que par tel navigateur, à telle ou telle version. Je ne m'attarderai pas là dessus, mais il est important de connaître celui qui suit, qui réglera notre problème de compatibilité de HTML5 avec Internet Explorer.
Code:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Ce code veut dire : Si c'est une version d'internet explorer antérieure à 9, alors on utilise ce script, sinon, on l'utilise pas.

Donc dès que vous utilisez du HTML5, hop :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Le titre de ma page</title>
  <style type="text/css">
  </style>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>

C'est tout bon ?
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
C'est bon pour moi (:
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
J'ai tout compris !

Juste pour savoir, si on veut par exemple faire un script juste pour Firefox, on écrira comme ça ?

Code:
<!--[if Firefox]>
blablabla
<![endif]-->

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Non malheureusement les commentaires conditionnels n'ont été réalisés que pour Internet Explorer :/..
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
C'est dans le CSS alors que tu peux faire par navigateur, résolution, support, etc ?

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Pas support et résolution, CSS oui Wink.
Mais navigateur, non Wink. En javascript ou php pour le navigateur Wink.
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Oh ok, il me semblait, mais je dois confondre avec quelque chose d'autre... Bref, on peut continuer Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
On a presque fini notre première partie !

Il nous reste 2 balises à voir : div et span
Ces balises sont spéciales !

En effet, elles ne veulent rien dire, elles n'ont aucun but particulier. Je veux dire par là qu'elles ne servent pas à faire un paragraphe, à mettre du texte en indice, à surligner du texte, à le rendre important etc.
Non, elles servent juste à englober du texte !
Mais ça sert à quoi alors ?!

Ces balises servent à englober du texte. C'est tout Smile.

Mais du coup, quelle est la différence entre les deux ?!

Alors attention, vocabulaire !
L'une est une balise de type block : c'est à dire que si on la met, le texte qui la suivra sera en dessous d'elle.
C'est la div.
L'autre de type inline : c'est l'inverse du précédent : le texte suivra, comme ci de rien était.
C'est le span.

Du coup, l'une est plus appropriée pour mettre en page plusieurs choses (div), et l'autre pour mettre en page seulement quelques mots (span) Wink Bien évidemment, pas directement, car ce sera à l'aide du CSS, puisque ces balises ne font rien aux textes

Bon, on va déjà voir comment elles se forment, et ensuite on verra des exemples concrets Wink
Div :
Code:
<div></div>
Span :
Code:
<span></span>

A l'intérieur d'une div, on peut mettre d'autres balises. A l'intérieur d'un span, plutôt du texte.
Par exemple :
Code:
<div><h1>Mon titre</h1><p>Mon texte</p></div><div><p>Autre texte</p></div>
Code:
<div><span>du texte</span>Suite du texte</div>
Et le résultat est :


Et pour le second :


Que faut-il en conclure ?
Que div est bien une balise block.
Que les balises de hierarchisation également
Que les balises de paragraphe aussi
Que span est une balise inline.

La preuve : dans le premier, dès qu'on ferme une balise, la suite va à la ligne, du moins en dessous (block). Alors qu'avec span, le texte se colle juste après (inline).

En conclusion : toutes les balises ont un type inline ou block.
Div = block
Span = inline.


A retenir sur les div et span :
Il faut utiliser div pour mettre en page plusieurs textes dans plusieurs balises
Il faut utiliser span pour mettre en page quelques mots dans un texte.
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Compris capitaine !
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
J'ai compris... Mais j'avoue ne pas trop voir leur utilité. Pourquoi les utiliser si on peut s'en passer ?

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Je crois que c'est surtout pour mettre des class="" histoire qu'on les retrouve dans le CSS, c'est ça ?
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Coucou Smile

Alors, en fait, c'est utiliser pour faire le rôle du "wrapper" ou du "container". En gros, si dans une page tu as une partie centrale avec la même mise en page, même fond etc, et bien tu mettras le tout dans une div Wink.
Comme l'a dit Popnoyt, c'est surtout au niveau du CSS que ça a une utilité Wink. Tu comprendras mieux au fil de la formation, sans aucun doute !

Pour les span, c'est pareil Wink
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Ahh, comme ça ! Le CSS, j'ai un peu oublié Razz Mais je me souviens à présent.

Maintenant, j'ai compris. Merci pour vos réponses ! On peut continuer Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :

Coucou !

Du coup.. Que cela veut-il dire.. Nous avons terminé notre partie 1 èé ! Mais étant un professeur sadique... Je vais te demander de prendre en charge cette commande ! Une commande un peu particulière. La voici :

CodeMan le novice en codage a écrit:
Bonjour les codeurs !
Voilà, j'ai récemment appris le CSS, mais pas le HTML Surprised. En effet, mon professeur de codage nommé Knowelu, a été mangé par une fourmi panda avant qu'il ne puisse m'apprendre le HTML !
Mais j'aimerais bien faire une fiche de RPG pour mon forum moi :'(. Alors, ayant appris qu'Eluknow a formé un dénommé Invité en HTML pour le moment, j'aimerais qu'il me fasse la partie HTML de ma fiche, que je complèterai avec mes connaissances en CSS.
Alors, j'aimerais en gros que ma fiche soit valide avec les normes W3C.
J'aimerais d'abord un grand titre en haut avec marqué "La meilleure fiche RPG du monde". Suivi juste en dessous d'une phrase relativement importante "Car le codage est parfait.."
Ensuite, il me faudrait un bloc, contenant une image à gauche (lien : http://r24.imgfast.net/users/2916/61/52/62/avatars/1-52.jpg ) et du texte à droite (tu peux utiliser un générateur de texte pour le mettre).
Enfin, en dessous, un titre encore : "Un titre parfait..".
Et en dessous un paragraphe contenant un nouveau texte. La première ligne est très importante.
En bas de la fiche, il faudrait qu'il y ait cette image : http://img15.hostingpics.net/pics/616747eluknow.png avec la description suivante : "Pour des RPGistes d'exception..".
Pour finir, j'aimerais que toute cette fiche soit comme un tout, donc englobée dans sa totalité. Voilà !
Merci à toi !

Allez, courage Very Happy. Tu as le droit de poser toutes les questions que tu veux
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Page 2 sur 5Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: Corbeille :: Corbeille du forum :: Formations-
Sauter vers: