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

Pour fixer simplement votre menu, vous pouvez utiliser la propriété "position: fixed;" en CSS. En revanche, si votre menu est par exemple placé sous le header, vous voudriez pouvoir le fixer seulement une fois qu'il se trouve en haut de la page.
Pour cela, il faut utiliser du JavaScript.

/!\ Le JS doit être activé sur votre blog

Commencez par créer votre menu en HTML (définissez le par un ID) , et placez le dans un module simple.

Grâce au css, vous allez pouvoir le placer où vous voulez sur votre page, et modifier sont apparence. Dans cet exemple, je vais le placer sous mon #header, d'une hauteur de 250px.
Placez le en "position: absolute;"
=> [Tuto] Contenu hors des articles

Nous avons maintenant besoin de définir sont apparence quand il doit être "fixe". Je vais donc simplement ajouter une classe à mon id, et le définir en "position:fixed" (pour le fixer), ainsi qu'en "top: 0px;" pour le coller en haut de la page. Vous pouvez bien sûr ajouter d'autres propriétés pour changer sont apparence.

Maintenant, passons au javascript, que vous placez dans le même module que votre menu.
Un script JS se place toujours entre les balises <script> JS </script>
Nous allons utiliser window.onload pour exécuter notre script à la fin du chargement de la page.

Commençons par définir nos variables : nous auront besoin bien évidemment de notre #menu, et si vous ne voulez pas vous embêter à calculer quand il doit se fixer, nous allons également récupérer #header.

Nous devons ensuite récupérer la taille de la fenêtre du client, et savoir de combien il a "scrollé" la page.

Sachant cela, nous pouvons changer la classe de notre menu si la page a été "scrollée" de la hauteur du header. Toujours dans la fonction "scrolled" on ajoute l'instruction suivant :

menu, c'est la variable représentant notre #menu.
className est une commande JS permettant de modifier la classe d'un élément. Ici, nous ajoutons la classe .fixe à #menuNavigation
currentScroll est le défilement de la page (scroll)
header est la variable représentant #header
offsetHeight est une commande permettant de récupérer la hauteur d'un élément (ici #header)

Pour traduire cela, si le défilement de la page est supérieur ou égal à la hauteur du #header, la classe de #menuNavigation devient .fixe
Notre menu prend donc les paramètres de #menu.fixe

Pour finir ce code, nous devons ajouter un EventListener, sans quoi nous ne pouvons pas récupérer le défillement (scroll) de la page.

Voici le JS complet

L'exemple ici est de fixer un menu en fonction du défilement de la page, mais vous pouvez utiliser cette technique pour modifier n'importe quel élément en fonction de votre position sur la page ;)