Une balise seule n'a généralement que peu d'utilité. C'est pourquoi on leur ajoute souvent un ou plusieurs attributs.

<balise attribut="valeur; valeur" attribut="valeur">Contenu</balise>

Les attributs se placent toujours dans la balise ouvrante. Certain peuvent prendre plusieurs valeurs qu'il faut alors séparer par des «points virgule» ;

Certains sont spécifiques à une balise et ne peuvent être utilisé autrement :

<a href="URL" target="_blank">Contenu</a>

href="URL" permet de définir l'adresse de destination via la balise <a>
target="valeur" est un attribut facultatif de <a> qui définit la "destination":
• Par défaut, le lien s'ouvre dans l'onglet courant
• target="_blank" ouvre le lien dans une nouvelle fenêtre.

<img src="URL"/>

src="URL" définit la source de l'image

<balise style="propriété : valeur; propriété : valeur;">Contenu</balise>

Cet attribut permet de définir le "style" d'un élément, c'est à dire son apparence, tel que le fond, les bordures, la couleur de texte... Faites toutefois attention au type de balise (block ou inline) auquel vous voulez appliquer un style, certaines propriétés (telle la taille ou les marges) sont incompatible avec les élément inline.

Si vous connaissez le CSS, une grande majorité des propriété s'écrivent exactement de la même façon en HTML. Cependant certaines (notamment des propriétés CSS3 comme filter ou transition) ne peuvent pas être utiliser en HTML

id="nom" permet de défnir un élément unique de la page. Ils est très souvent utilisé comme attribut de <div>

<balise id="nom">Contenu</balise>

Utiliser un id permet de récupérer un élément dans le CSS pour définir son style sans passer par l'attribut style HTML. Il vous suffit d'indiquer dans votre CSS :

#nom {
      propriété : valeur;
}

Le «dièse» devant le nom indique qu'il s'agit d'un ID

Il est également très utile d'utiliser des ID en JavaScript. Pour récupéré un élément définit par son ID on utilise la fonction :

getElementById(nom)

Si vous voulez nommer plusieurs éléments de la même façon, utilisez class="nom"

<balise class="nom">Contenu</balise>

Concrètement, class à la même utilité que id, ces deux attribut nous permettent de nommer des éléments pour les récupérer via CSS ou JS par exemple. La seule différence est que id désigne un élément unique, et class se rapporte à un groupe d'éléments identiques.

Pour récupérer une class en CSS, il suffit de placer un point . devant le nom

.nom {
      propriété : valeur;
}

En JavaScript on peut utiliser cette fonction :

getElementsByClassName('nom')

Cependant, n'oubliez pas que vous récupérer ainsi tous les éléments de ce nom, il faut donc effectuer un autre traitement pour pouvoir réellement récupérer ce qu'il vous intéresse.

Les balises

Il existe deux type de balise en HTML : les balises en paire, et les balises orphelines. 

Les balises en paire sont les plus répandues, et s'écrivent de la façon suivante :

<balise attribut="valeur"> Contenu </balise>

Elles se composent d'une balise ouvrante et d'une balise fermante. Les informations de la balise sont donc appliquées à l'ensemble du contenu. Il en existe énormément, tel que les balises de paragraphe <p>, les balises de lien <a>, de liste <ul>, de formulaire <form>...

Il existe également des balises dites "orphelines", qui ne sont composé que d'une unique balise.

<balise attribut="valeur" />

Ce type de balise s'utilise lorsque l'on veut insérer un unique élément à un endroit précis de la page. Les deux plus communes sont <img/> pour les images, et <br/> pour les retour chariot. Dans les deux cas, nous n'avons pas besoin de contenu, il n'est donc pas nécessaire de délimiter le début et la fin de la balise. 

/!\ Le « slash » ( / ) à la fin de la balise n'est pas obligatoire, mais je vous recommande fortement de le mettre pour ne pas confondre vos balises orphelines avec une balise ouvrante.

Block et Inline

Toutes les balises (encore une fois à quelques exceptions près) appartiennent à l'une des deux catégories ci-dessus. Prenons pour exemple deux balises très communes : <p> (paragraphe) et <a> (lien)

<p>Un premier paragraphe <a>avec un lien</a>.</p><p>Suivit d'un deuxième paragraphe sans lien.</p>

Concrètement, qu'est-ce qu'il se passe ? Dans mon HTML, tout est écrit en une seule ligne, il n'y a aucun retour chariot. Pourtant, deux paragraphes bien distinct apparaissent sur la page.

Ceci est dû au fait que <p> est une balise de type block. Le nom est assez explicite, il suffit d'imaginer que tout ce qu'il se trouve dans cette balise est à l'intérieur d'un bloc. Lorsque l'on crée une deuxième balise de type block (un deuxième paragraphe par exemple), celle-ci ce place par défaut sous la première.

Au contraire des balises block, les balises de type inline comme <a>  sont simplement "en ligne", c'est à dire, alignées. On ne peut pas leur définir de taille, elles s'adaptent automatiquement à leur contenu.

Les balises de formatage de texte (<strong>, <em>...) sont généralement de type inline.

DIV et SPAN

Comme vu précédemment, nous avons à notre disposition des balise de type block et de type inline. Mais nous avons certaines fois besoin d'utilise un simple block, et non un paragraphe, ou tout autre balise de type block. Il en va de même si nous voulons donner un effet spécifique à un texte, sans passer par les des balises déjà existantes. Pour cela, il existe deux balises universelles : 

• <div> (de type block), 

• <span> (de type inline).

Ces deux balises n'ont que peu d'utilité ainsi, c'est pourquoi elles sont sont toujours utilisées avec des attributs, au contraire de d'autre balises génériques qui n'en ont pas forcément besoin.

Introduction au HTML Les attributs

Qu'est-ce que le HTML ?

HTML veut dire HyperText Markup Language, c'est le language utilisé pour organiser les pages web. Il s'agit d'un language de description de données, et non de programmation, ce qui veut dire qu'une page HTML est statique, elle se contente d'afficher son contenu.
HTML est le langage des navigateurs, leur permettant de savoir s'ils doivent afficher un titre, un lien, une image...

Quels outils utiliser ?

Un simple bloc note suffit pour écrire du HTML, mais il vaut mieux utiliser d'autres éditeurs de texte permettant de mieux gérer le contenu de vos document

Sur Windows :

• Notepad++
• Sublime Text

Sur Mac :

• Sublime Text
• TextWrangler

Sur Linux :

• Vim
• jEdit

Sur EklaBlog :

On peut écrire du HTML en cliquant sur l'icône "code source" d'un article ou d'un module

Syntaxe du code

<balise attribut="valeur"> contenu </balise>

Une page HTML est composée de balise encadrant le contenu. Les balises indiquent au navigateur quelle est la nature du contenu ( lien, paragraphe, image...). Les balisent peuvent être complétées par un ou plusieurs attributs. 

<a href="www.google.fr"> Voici un lien menant à Google </a>
<p> Ceci est un simple paragraphe </p>

Dans cet exemple, tout ce qui ce trouve entre les balises <a> et </a> est un lien. L'attribut href permet de renseigner vers quoi renvoie ce lien, et sa valeur est l'url du lien.
"Ceci est un simple paragraphe" n'est pas un lien, car il est entouré par les balises <p> et </p>

Retour aux Cours Les Balises

Les pseudo-element, qu'est-ce que c'est? Ce sont d'autres élément css qui vont permettre d'affiner le style de certaines classe

Pseudo-element dynamique:

hover => lors du survole

sélecteur:hover {propriété: valeur}

active => Lors du clique

sélecteur:active {propriété: valeur}

focus => Séléctionné avec le clic ou par tabulation

sélecteur:focus {propriété: valeur}

Pseudo-element de liens
Ne peuvent s'utiliser qu'avec des liens

link => Lien n'ayant pas encore été visité

sélecteur a:link {propriété: valeur}

visited => Lien ayant été visité

sélecteur a:visited {propriété: valeur}

Pseudo-element de texte
Ne peut s'utiliser qu'avec du texte

first-line => Applique un style spécial à la première ligne du texte

sélecteur p:first-line {propriété_de_texte: valeur}

first-letter => Applique un style spécial a la première lettre du texte

sélecteur p:first-letter {propriété_de_texte: valeur}

Introduction au CSS

Dans EklaBlog, le CSS se trouve dans :
"apparence => Modifier le thème => Css"

La structure de base d'un code CSS est la suivante :

sélecteur {
      propriété : valeur ;
      propriété : valeur;
}

• Sélecteur : C'est le nom de votre élément. Certains sélecteurs sont définit par défaut, tel les liens, les paragraphes, les images... Les autres sont créé pour gérer plus facilement l'apparence d'un site web. Sur EklaBlog par exemple, nous avons l'en-tête, les articles... 
  Vous pouvez également en créer de nouveaux.
• Propriété : C'est le nom de l'effet à appliquer sur un élément. Leur nom est en anglais, sans caractères spéciaux excepté un tiret dans certains cas. Elles permettent de gérer la taille, la couleur, des bordures...
• Valeur : La valeur dépend de la propriété, elle permet d'expliquer exactement l'effet rechercher. Par exemple, pour une propriété "couleur" on va mettre comme valeur "rouge". Pour une propriété "hauteur" on va mettre 200px...

La ponctuation est extrêmement importante. Toutes les propriété concernant un sélecteur se trouvent entre accolades "{" "}". Les propriété et les valeurs sont séparées par deux points ":", et les propriétés doivent être séparées d'un point virgule ";"
Dans Eklablog, si vous oubliez les accolades, un message d'erreur vous le signalera. Par contre, si votre code ne fonctionne qu'a moitier, il y a de grande chance pour que vous ayez oublier un point virgule. Relisez vous bien.

Les retours à la ligne et les espaces entre les signes de ponctuation ne changerons pas le code. Mais il est fortement recommandé d'aérer votre présentation pour pouvoir vous y retrouver.

Retour aux cours Les pseudo-elements