Overblog Suivre ce blog
Administration Créer mon blog
22 novembre 2016 2 22 /11 /novembre /2016 15:09


1. Utiliser un "Lire la suite"

 

 

Il arrive que l'on fasse des articles un peu longs, ou tout au moins, dont certains détais n'interresseront pas tous nos visiteurs.

Il est utile dans ce cas, à la suite d'un texte d'accroche, composé le plus souvent de 1 à 5 lignes, de faire un "Lire la suite", sur lequel le visiteur doit cliquer pour accéder à la suite de l'article.



2. Faire un "Lire la suite..."


Si vous êtes interessé, je vous propose donc, pour découvrir comment faire, de cliquer sur ce petit "Lire la suite", que l'on peut aussi appeler "en savoir Plus...", ou bien encore "Article complet"  

                                                                                                                           Lire la suite...  

 


 

 * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                   Rendez-vous sur Hellocoton !                                                       

 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
21 juillet 2016 4 21 /07 /juillet /2016 19:50


Voici une liste non exhaustive des principales balises HTML utilisées, avec leur définition.

Pour en savoir + sur l'HTML, allez voir
l'article consacré ICI.

Balise HTML Description
<!-- --> Commentaire.
<a> Création d'une ancre pour liens hypertexte.
<area> Permet de définir une zone cliquable dans la page.
<b> Gras.
<body> Encadre le corps d'un fichier HTML.
<br> Saut de ligne.
<center> Centrage.
<div> Implémente une feuille de style par bloc entier.
<font> Définition du texte.
<h1> Titre de niveau 1.
<h2> Titre de niveau 2.
<h3> Titre de niveau 3.
<head> En-tête d'un fichier HTML (encadre les balises <title>, <meta> et <base>).
<hr> Barre horizontale
<img> Insertion d'une image.
<li> Elément d'une liste (encadré par la balise <ul> ou la balise <ol>).
<marquee> Texte défilant
<menu> Liste de type menu.
<meta> Information sur la page HTML.
<ol> Liste numérotée (encadre la balise <li>).
<span> Implémente une feuille de style.
<strong> Texte en gras.
<style> Feuille de style (le plus souvent dans entre les balises <head> et </head>).
<table> Tableau.
<td> Nouvelle cellule dans un tableau (encadré par la balise <tr>).
<th> Cellule d'en-tête d'un tableau.
<title> Titre du document HTML (à insérer dans la balise <head>).
<tr> Nouvelle ligne d'un tableau (encadré par la balise <table>).
<ul> Liste non-numéroté (encadre la balise <li>).


 


 

                                        Rendez-vous sur Hellocoton ! 



 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
24 février 2016 3 24 /02 /février /2016 09:05

Quand on a un blog, on, entend beaucoup parler de HTML et de CSS. N'ayez pas peur, ça ne mord pas !

Ce ne sont que des langages de programmation, codés en anglais, qui permettent de faire des pages internet.

HTML signifie Hypertext Markup Language. Il est constitué de "marques" ou "balises" qui permettent d'identifier les éléments d'une page.

CSS : Cascading Style Sheets. C'est ici que vous allez modifier (éventuellement) le style graphique de votre blog.

Pour l'instant, nous allons nous occuper du HTML.


Le principe est d'utiliser des balises pour définir ce que vous souhaitez. Il en existe beaucoup, (une petite centaine), vous apprendrez à les utiliser au fur et à mesure.

Vous trouvez une
liste des principales balises HTML ICI


Un exemple d'utilisation :

Si j'écris :

<span style="color: #ff0000;"><strong>HTML</strong></span>

Ceci signifie que pour mon texte "HTML", j'ai demandé un style avec une couleur rouge et une écriture en gras.

Ce qui donne :
HTML


Pour utiliser l'HTML dans Overblog, il faut :

* Créer un article

* Choisir l'onglet "édition avancée"
null
* puis cliquer sur HTML à gauche dans la barre de menu.

Vous voyez alors votre article en code HTML. Vous apportez les modifications voulues, puis cliquez sur "Mettre à jour" pour revenir en mode classique.

A vous de jouer !

 

 

 

 

 

superstickies


 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des jeux
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
26 septembre 2015 6 26 /09 /septembre /2015 16:10


null

Quand on écrit du code HTML, on a parfois besoin de noter des commentaires,  non visibles pour les visiteurs.
 


 

Ces commentaires sont des indications pour mieux s'y retrouver dans le code.

Ils peuvent :

* indiquer la nature du code,
* indiquer pourquoi telle ligne a été ajoutée,
* faire office de trait de séparation pour "aérer" le code,
* ou bien encore comporter des mises en garde importantes pour le webmaster, comme "Attention, ne pas enlever la ligne suivante !"


1. Mode HTML :

Vous devez bien-sûr être en mode HTML.

A l'endroit où vous souhaitez ajouter un commentaire, il suffit de noter :


 

<div id='myText' style='visibility: hidden'>texte non visible</div>


et remplacer "Texte non visible" par le texte que vous voulez mettre.

 

 


 

                                      Rendez-vous sur Hellocoton !                                                   

 

 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
18 septembre 2015 5 18 /09 /septembre /2015 09:03

Il est parfois utile de faire des listes dans ses articles afin d'alléger le texte et d'ordonner ses éléments.

 

C'est ce que j'ai fait, par exemple, dans mon article "Index des articles".

 

Dans ce cas, chaque élément de la liste est cliquable et permet d'accéder à une autre page du blog.

 

1. Code HTML pour faire une liste cliquable.

 

Principe :

Il faut créer une "class" puis chaque élément de la liste sera précédé de la balise <li>, comme "liste".

On remplacera le sigle "#"par l'url de la page vers laquelle on souhaite faire le renvoi.

 

Code HTML d'une liste cliquable:

 

<ol class="liste">
        <li><span><strong><a href="#">Premier élément de la liste</a></strong><br/><em>Petite description de l'élement ...</em></span></li>
        <li><span><strong><a href="#">Deuxième élément de la liste</a></strong><br/><em>Petite description de l'élement ...</em></span></li>
        <li><span><strong><a href="#">Troisième élément de la liste</a></strong><br/><em>Petite description de l'élement ...</em></span></li>
        <li><span><strong><a href="#">Quatrième élément de la liste</a></strong><br/><em>Petite description de l'élement ...</em></span></li>
        <li><span><strong><a href="#">Cinquième élément de la liste</a></strong><br/><em>Petite description de l'élement ...</em></span></li>
</ol>

  

2. Aspect visuel de la liste :

  1. Premier élément de la liste
    Petite description de l'élement ...
  2. Deuxième élément de la liste
    Petite description de l'élement ...
  3. Troisième élément de la liste
    Petite description de l'élement ...
  4. Quatrième élément de la liste
    Petite description de l'élement ...
  5. Cinquième élément de la liste
    Petite description de l'élement ...
  6. 

3. Articles à relire

 

La programmation en langage html, c'est quoi ?

Utiliser du code HTML dans un article ou module

Créer un Rollover en langage HTML

 

  

 

superstickies


 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des jeux
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
27 mai 2014 2 27 /05 /mai /2014 14:45


 


1. Le langage HTML et les caractères accentués

Le standard
HTML demande de respecter le codage des caractères ASCII 7 bits.

Ceci signifie que les caractères accentués ne sont pas autorisés. C'est la raison pour laquelle vous voyez parfois des caractères "bizarres" dans votre code HTML, alors que vous n'avez tapé que du texte dans votre article.

 

2. Equivalence entre les caractères accentués et leur code en HTML

Pour inscrire un caractère accentué, quand on est en mode avancé HTML, il faut saisir :

* le caractère &
* une liste de touches
* un point-virgule (;).


2.1 tableau des équivalents HTML des caractères accentués

Voici la liste des équivalents entre vos caractères accentués et leur code HTML

 

Caractère

Code HTML

"

&amp;quot;

&

&amp;amp;

&euro;

espace

&amp;nbps;

à

&amp;agrave;

â

&amp;acirc;

ç

&amp;ccedil;

È

&amp;Egrave;

É

&amp;Eacute;

Ê

&amp;Ecirc;

è

&amp;egrave;

è

&amp;egrave;

é

&amp;eacute;

ê

&amp;ecirc;

Î

&amp;icirc;

Ô

&amp;ocirc;

Ù

&amp;ugrave;




 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 1
Published by Aurelie - dans HTML
commenter cet article
21 septembre 2013 6 21 /09 /septembre /2013 10:45

 

Les balises sont utilisées dans le langage HTML pour la mise en forme de vos pages sur internet.

Pour compléter les articles   html, c'est quoi ?   et HTML, la syntaxe , nous allons voir dans cet article comment utiliser les balises.


 
1. Comment utiliser les balises HTML ?

Une balise est un élément de texte encadré par le signe (<) et le signe (>).

Cet élément sert à mettre en forme le texte qui est au centre.

Les balises HTML fonctionnent par paire., la première sert à "ouvrir" la commande, et la seconde à la fermer. Elle est précédée du signe /

Exemple de la balise pour mettre un texte en gras :
<strong> Ce texte est en gras </strong>

 

Les balises HTML peuvent parfois être uniques : la balise <br> représente par exemple un retour à la ligne.


2. Imbrication des balises

Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leur propriétés.

Voici un texte en gras et bleu


le code est :
<strong><span style="color: #0000ff;">Voici un texte en gras et bleu</span></strong>


3. Les compléments à la mise en forme (attribut)

Le complément (appelé aussi attribut) est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires.
Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé.

Voici un exemple d'attribut pour la balise <p> (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné au centre :

Paragraphe aligné au centre de la page


le code est :
<p style="text-align: center;">Paragraphe align&eacute; au centre de la page</p>

Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs.

Vous trouverez ici Les principales balises HTML




 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
11 août 2013 7 11 /08 /août /2013 16:00


Voici une liste (non exhaustive) des principales propriétés utilisées en HTML.

Pour chacune d'elles, je vous indique ses valeurs possibles, ce à quoi elle correspond, et un exemple de syntaxe.

Propriété

Valeur(s)

Description

Exemple

font-size

xx-small, x-small, small,
medium, large, x-large,
xx-large, larger, smaller,
ou taille définie en pixels (px)
cm (cm), mm (mm), point (pt),
pourcentage (%)

Taille de la police

font-size: 12pt

font-family

* serif, sans-serif, cursive,
fantasy, monospace,
* ou nom de la police
(Arial, Verdana, ...)

Type de police

font-family: Arial

font-weight

* normal, bold, bolder, lighter,
* ou valeur numérique de 100 à 900 (par tranche de 100)

Poids de la police

font-weight: bold

font-style

* normal,
* italic (oblique)

Style de police

font-style: italic

line-height

* point (pt),
*  pourcentage (%)

Hauteur de la ligne

line-height: 5pt

color

* nom
* ou valeur
de la couleur

Couleur

color: green

background-image

URL du fichier

Image d'arrière-plan

background-image:
url(image/fichier.gif)

background-repeat

* repeat ,
* no-repeat,
* repeat-x,

* repeat-y

Répétition de l'arrière-plan

background-repeat:
no-repeat

background-attachment

* scroll
* fixed

Effet de filigrane

background-attachment:
fixed

background-position

* top,
* center,
* bottom,
* left,
* right

Position de l'arrière-plan
(verticale et horizontale)

background-position:
center center

vertical-align

* baseline,
* sub,
* super,
* top,

* text-top,
* middle,
* bottom,

* text-bottom,
* ou valeurs en
pourcentage

Alignement vertical

vertical-align: top

text-align

* left,
* right,
* center,
* justify

Alignement du texte

text-align: justify

text-indent

* valeur en pixel
* ou
pourcentage

Retrait de la
première ligne

text-indent: 10px

text-decoration

* none,
* underline,
* overline,
* line-through

Décoration du texte

text-decoration: overline

margin-left
(ou -right,

-top, -bottom)

* valeur en pixel
* ou
pourcentage

Valeurs des marges

margin-right: 10px

border-left
(ou -right,

-top, -bottom)

* medium,
* thick,

* ou un style

type de bordure

border-top: medium

border-x-width
(
remplacer x par right, left, top, bottom)

* medium,
* thick
* ou
taille.

Taille de la bordure

border-top-width: 15

border-style

* none,
* dotted,
* dashed,
* solid,

* double,
* groove,
* ridge,
* inset,
* outset

style de bordure

border-stylet: ridge

border-color

* nom
* ou valeur hexadécimale

de la couleur

Couleur de la bordure

border-color: red

letter-spacing

* normal
* ou valeur en point

Espacement des lettres

letter-spacing: 2pt

 


 

                                      Rendez-vous sur Hellocoton !                                                   

 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
25 juin 2013 2 25 /06 /juin /2013 10:27

 

 


  Apprenez ici à faire des défilements !                                                                            



1. Les défilements avec la balise Marquee

Pour mettre de l'animation facilement, vous devez connaître la balise MARQUEE

C'est la balise à utiliser en langage HTML, qui permet de faire des défilement.

Elle s'utilise sur tout ce que vous voulez : des textes, des photos...


2. Les paramètres de la balise MARQUEE

Paramètre balise MARQUEE

Action

possibilités

Behavior Indique le type de défilement :  Scroll : mode par défaut
Alternate : alterné
Direction Indique la direction du défilement Left : gauche à droite
Right : droite à gauche 
Down : Bas
Up : Haut

Vous pouvez définir la plage
si vous utilisez Up et Down en ajoutant height="x" en nbre de pixels
Scrollamount Vitesse de défilement, en pixels à indiquer en pixels, minimum 1
Scrolldelay Vitesse de défilement en millisecondes  
Loop Nombre de défilements -1  : pour 1 seule
x : nombre de défilements
Infinite : pour continuel
OnmouseOut A utiliser avec celui du dessous, afin d'arréter
le défilement au survol de la souris,
puis le reprendre.
Indiquer "this.start();"
OnMouseOver   Indiquer "this.stop();"



3. Le défilements utilisés en haut de cet article

La photo défile verticalement, avec une vitesse de 5 pixels
Le teste défile horizontalement,  de façon alterné, avec une vitesse de 3 pixels et le défilement cesse quand la souris est au dessus.


4. Codes complets de défilement avec la balise Marquee

Des codes complets pour faire défiler vos textes sont ICI

Des codes complets pour faire défiler vos images sont ICI





 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Repost 0
Published by Aurelie - dans HTML
commenter cet article
14 mars 2013 4 14 /03 /mars /2013 10:22

Maintenant que vous savez ce qu'est le HTML, vous allez pouvoir l'utiliser un peu.

Avant d'entrer dans le détail de l'utilisation d'une balise spécifique, je souhaite attirer votre attention sur la syntaxe à utiliser pour le HTML.

Comme pour tous les langages informatiques,la syntaxe est précise et ne supporte pas de "fautes". Un petit point, un accent, un caractère en trop ou manquant et votre code ne fonctionnera pas.

Relisez donc toujours avec précaution vos lignes de code après les avoir inscrits (ou recopiés)

Bref, pour le HTML, ce sera toujours le même principe pour sa syntaxe :


1. Il va vous falloir "encadrer" l'élément à modifier par  la balise utilisée

Je dis "encadrer" car il faudra mettre la balise "d'ouverture" au début, et ne surtout pas oublier celle de "fermeture" à la fin

Ceci se fait avec le signe <balise au début et balise/> à la fin.
Il faut bien évidemment remplacer le mot balise par celle utilisée.

(
Voir la liste des principales balises ICI)


2. A l'intérieur, vous ajoutez la balise avec ses paramètres pour préciser vos choix 

Le premier paramètre est précédé du signe
=
Tous les paramètres sont encadrés par "parametre
"
Les différents paramètres sont séparés par un espace
vous "refermez" avec > avant de taper le texte à modifier
Vous refermez totalement la balise avec
</balise>

Exemple :

le code
<span style="color: #ff0000;">essai</span>
donne le mot essai en
rouge.

Je décode : 

 < ce signe indique que j'ouvre une balise
 span  balise pour implémenter une feuille de style
style balise qui sert à définir la feuille de style
=" encadre la définition de ma couleur
color indique que je définis ma couleur
#ff0000 code couleur demandé, correspond au rouge
</span> je "referme" ma balise




Allez voir l'article complet sur l'utilisation de la balise MARQUEE, pour faire défiler vos textes.



 

                                        Rendez-vous sur Hellocoton ! 




Repost 0
Published by Aurelie - dans HTML
commenter cet article

Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation