Tutoriel : Comment créer un site internet ?

L'éditeur de texte

<< Retour au sommaire des tutoriels

Présentation

Yoctown intègre un logiciel en ligne de traitement de texte : TinyMce. Ce logiciel, tout comme les logiciels Word ou OpenOffice sur votre ordinateur, vous permet de mettre en page votre texte et vos images, en toute simplicité : couleurs, paragraphes, soulignement, alignement, insertion d'image, insertion de tableaux, insertion de formules mathématiques....

A savoir: Le format adopté pour la mise en forme d'un texte sur internet est le HTML.
Bien entendu, nous n'allons pas vous demander d'écrire une seule ligne en HTML.
TinyMce formate votre texte automatiquement dans ce format, et vous simplifie la vie.
Toutefois les utilisateurs confirmés pourront programmer directement leur mise en page en HTML s'ils le désirent..

Nous nous servirons de ce logiciel afin de créer des présentations de textes agréables et conviviales pour vos visiteurs sur les rubriques de type blog et page web.

L'éditeur de texte se présente sous cette forme :

La partie supérieure est votre barre de mise en page de texte, la partie inférieure (fond blanc) vous montre le rendu final, tel qu'il sera vu (à quelques différences près) par vos visiteurs.
C'est ici que vous taperez votre texte.

Commencez tout d'abord par effacer le texte déjà présent.

Nous allons passer en revue les différentes icônes à votre disposition. En règle générale cliquez dessus pour les activer et cliquez à nouveau pour les désactiver. Si vous voulez les faire agir sur un texte déjà écrit, sélectionnez votre texte avant de cliquer sur la ou les icônes qui vous intéressent.

Les fonctions courantes

: permet d'enregistrer les modifications en cours de travail (équivaut au bouton « Valider »situé en bas de la page). A utiliser régulièrement ...

: met en gras; pour attirer l'attention sur certains mots

: met en italique

: souligne le texte sélectionné

: permet de rayer le texte sélectionné

: change la couleur des caractères

Cliquez sur la flèche à côté du A. Si la palette présentée ne vous suffit pas, un nuancier est à votre disposition en cliquant sur « more colors »

: surligne le texte sélectionné dans la couleur de votre choix

Cliquez sur la flèche pour accéder à la palette de couleurs; pour supprimer le surlignage, sélectionnez votre texte et utilisez l'icône "gomme": (voir plus loin ).

: aligne le texte à gauche

: centre le texte

:aligne le texte à droite

: justifie le texte

cette phrase est alignée à gauche

cette phrase est centrée

cette phrase est alignée à droite

et pour un texte plus long:

aligné à gauche:

Avec Yoctown, votre site se gère directement en ligne à partir d'un navigateur web comme internet explorer, firefox, safari, google chrome ou encore opera; vous n'avez rien à installer...! Vous avez un accès illimité à la plateforme, 7j/7 et 24h/24, pour éditer, créer, personnaliser le contenu de votre site. Nous avons mis à votre disposition de nombreuses rubriques d'aides, des conseils, des tutoriels afin de vous guider au mieux dans la création de votre site internet.

aligné à droite:

Avec Yoctown, votre site se gère directement en ligne à partir d'un navigateur web comme internet explorer, firefox, safari, google chrome ou encore opera; vous n'avez rien à installer...! Vous avez un accès illimité à la plateforme, 7j/7 et 24h/24, pour éditer, créer, personnaliser le contenu de votre site. Nous avons mis à votre disposition de nombreuses rubriques d'aides, des conseils, des tutoriels afin de vous guider au mieux dans la création de votre site internet.

justifié:

Avec Yoctown, votre site se gère directement en ligne à partir d'un navigateur web comme internet explorer, firefox, safari, google chrome ou encore opera; vous n'avez rien à installer...! Vous avez un accès illimité à la plateforme, 7j/7 et 24h/24, pour éditer, créer, personnaliser le contenu de votre site. Nous avons mis à votre disposition de nombreuses rubriques d'aides, des conseils, des tutoriels afin de vous guider au mieux dans la création de votre site internet.

: Permet de choisir la police de caractères

Cliquez sur la flèche pour choisir :

Permet de choisir la taille des caractères.

Cliquez sur la flèche pour choisir :

: Puces et numérotation à utiliser pour vos énumérations.

Exemple:

1. Mon premier titre
   • Mon premier sous-titre
   • Mon second sous-titre
2. Mon second titre

: couper un texte (équivalent à la fonction « couper » de votre clic droit ou à la combinaison de touches « Ctrl x » sur votre clavier).

: copier un texte (équivalent à la fonction « copier » de votre clic droit ou à la combinaison de touches « Ctrl c » sur votre clavier).

:coller un texte (équivalent à la fonction « coller » de votre clic droit ou à la combinaison de touches « Ctrl v » sur votre clavier).

: annuler la dernière action (équivalent à la combinaison de touches « ctrl z » sur votre clavier.

: refaire la dernière action.

: mettre un hyperlien sur un texte.

: supprimer le lien.

Sélectionnez votre texte:

puis cliquez sur l'icône:

Entrez dans la première ligne l'adresse du site que vous voulez atteindre, par exemple l'adresse de la page d'accueil de yoctown, puis cliquez sur « Insert » pour valider ou sur « Cancel » pour annuler.

Votre texte apparaît désormais sous cet aspect:

Si vos visiteurs cliquent sur cette phrase ils seront renvoyés vers la page d'accueil de Yoctown, dans une nouvelle fenêtre de leur navigateur.

Pour supprimer le lien, sélectionnez à nouveau votre texte et cliquez sur l'icône:

: Vous donne un aperçu de la page telle qu'elle apparaîtra aux yeux de vos visiteurs.

: Insère une ligne horizontale de séparation, entre deux paragraphes par exemple.

: Efface le format du texte sélectionné (couleur, police, surlignage, gras,...) sans effacer le texte lui-même. A utiliser avec précaution...

: Indices et exposants.

Vous tapez le texte normalement, vous sélectionnez la partie à placer en exposant ou en indice et vous cliquez sur l'icône correspondante...
Exemple: la 1ère année

: Insertion d'un caractère spécial (ceux qu'on ne trouve pas directement par l'intermédiaire du clavier)

Cliquez sur le caractère que vous voulez intégrer à votre texte.

: Insertion d'émoticones. Devenues un mode d'expression à part entière elles sont désormais utilisées dans presque tous les vecteurs de communication pour traduire une émotion ou ôter un peu de sécheresse à un texte...

Insertion d'images

Vous pouvez insérer une image sur une page web ou dans un article de blog, soit à partir de votre ordinateur, soit à partir d'un site internet.

Insertion à partir du disque dur de votre ordinateur :

Vous souhaitez insérer une image à l'intérieur de votre texte:

Choisissez l'icône :

Cliquez sur « Parcourir ». Sélectionnez l'image voulue sur votre ordinateur (taille minimale 25x25 pixels) puis cliquez sur « Uploader ». Votre image apparaît dans la fenêtre de téléchargement. Pour l'utiliser cliquez directement sur la photo: elle s'insèrera à l'endroit de votre texte où se trouve votre curseur.

L'image n'a pas forcément les dimensions correctes pour s'adapter à votre texte et ne se positionne pas toujours comme vous l'auriez imaginé....Pas d'inquiétude, nous allons voir un peu plus loin comment paramétrer la taille, la position et d'autres détails!
(voir le paragraphe "Propriétés de l'image").

remarque: une fois uploadée, votre image possède une adresse (URL) sur le serveur de yoctown. Cette adresse pourra vous être utile si vous désirez utiliser la photo dans d'autres circonstances(arrière plan dans un tableau par exemple..). Vous la trouverez en utilisant l'icone :

Si vous estimez ne plus avoir besoin de cette image, ouvrez à nouveau la fenêtre de téléchargement et cliquez sur le bouton « Supprimer » à côté de la photo concernée. Attention: la photo disparaitra partout où vous l'aviez insérée...

Insertion à partir d'un site internet :

Vous souhaitez insérer une image à l'intérieur de votre texte:

Repérez sur internet l'image que vous souhaitez utiliser. Il s'agit maintenant d'obtenir l'adresse de cette image (et non pas celle de la page sur laquelle elle se trouve...).

Si vous utilisez Firefox:
Faites un clic droit sur l'image et sélectionnez l'option: « copier l'adresse de l'image »

Si vous utilisez Internet Explorer:
Faites un clic droit sur l'image et sélectionnez l'option « Propriétés »

Puis dans la nouvelle fenêtre sélectionnez l'adresse (URL) et copiez la (clic droit+copier ou Ctrl c au clavier).

Choisissez ensuite l'icône

Collez l'adresse dans la première ligne de l'onglet « General » puis cliquez sur « Preview » si vous voulez un aperçu.
Ne vous préoccupez pas des autres onglets pour l'instant, nous y reviendrons un peu plus loin..
Cliquez sur le bouton « Insert »

Un message vous demande si vous voulez rajouter une description (texte alternatif) destinée aux utilisateurs malvoyants. Nous verrons plus loin comment rajouter ce texte si vous le souhaitez, pour l'instant, cliquez sur le bouton « Ok »pour fermer le message et insérer la photo.

Cette fois encore l'image n'a pas forcément les dimensions correctes pour s'adapter à votre texte et ne se positionne pas toujours comme vous l'auriez imaginé....Pas d'inquiétude, nous allons voir un peu plus loin comment paramétrer la taille, la position et d'autres détails!
(voir le paragraphe "Propriétés de l'image").

Accéder aux propriétés de l'image:

Que l'image vienne de votre pc ou d'internet, ses propriétés se paramètrent de la même façon.
Cliquez sur l'image pour la sélectionner.
Vous pouvez déjà positionner votre image à l'aide des icônes   que vous connaissez...

Cliquez maintenant sur l'icone:

Vous ouvrez ainsi la boite de dialogue déjà rencontrée précédemment:

1.  l'onglet « General »:

l'URL qui apparaît est l'adresse de votre photo sur le serveur de Yoctown. N'y touchez pas!

Vous pouvez donner une description de votre image (troisième ligne) destinée à vos visiteurs malvoyants et qui apparaîtra à la place de la photo si celle-ci ne peut pas s'afficher.

Vous pouvez aussi choisir un titre (quatrième ligne); il apparaîtra dans une infobulle lors du survol de la photo par le curseur.

2.  l'onglet  « Appearance »:

Dimensions: vous permet de positionner le texte par rapport à l'image. Par exemple si vous choisissez « Right », l'image sera à la droite du texte comme vous le montre l'encadré.
Choix possibles:

Alignment: vous permet de fixer les dimensions de votre image en pixels. Nous vous conseillons de cocher la case « Constrain proportions » qui vous garantit que votre image ne sera pas déformée; dans ce cas vous pouvez même vous contenter d'indiquer une des deux dimensions..

Vertical space: vous permet de fixer la hauteur de l'espace libre au-dessus et au-dessous de l'image

Horizontal space: fixe la largeur de l'espace libre à gauche et à droite de l'image.

Border: fixe l'épaisseur du cadre autour de la photo. Si vous ne voulez pas de bordure laissez la case blanche ou indiquez 0

Remarque: au fur et à mesure que vous faites vos choix l'aperçu est actualisé dans le cadre...

3.  l'onglet  « Advanced »: ses fonctions sont désactivées pour l'instant

A tout moment vous pouvez annuler en cliquant sur le bouton « Cancel ».
Quand vous avez terminé cliquez sur le bouton « Update » pour valider vos choix.
Vous obtenez votre image finale:

Insertion d'un contenu multimedia :

Cette option vous permet d'insérer des vidéos à l'intérieur d'un article de blog ou d'une page web.
Ici encore votre vidéo doit préalablement être placée sur l'un des sites youtube ou dailymotion.
(voir le paragraphe "Insérer un contenu multimédia dans un blog"). Seule la ligne URL de l'onglet « General »vous sera utile.

A partir de Youtube: Collez dans cette ligne l'adresse figurant dans la barre de votre navigateur quand vous visionnez la vidéo sur youtube.

A partir de Dailymotion: La récupération de l'URL est un peu plus délicate:
Sur la page où vous visionnez la vidéo, copiez le lien désigné par le nom « lecteur exportable »

Collez la totalité de ce lien dans le bloc notes de votre ordinateur...et sélectionnez l'adresse qui suit « src= », entre les guillemets.

C'est cette adresse qui doit être copiée dans la zone URL...

Les dimensions usuelles sont de 425x350. Vous pouvez choisir une autre taille mais prenez soin de cocher la case « constrain proportions » pour ne pas avoir de déformation de l'image.

La zone « Preview » vous permet d'avoir un aperçu de votre vidéo.

Cliquez sur « Insert » pour insérer la vidéo dans votre page. Attention! Elle ne sera pas visible dans l'éditeur, seul son emplacement y apparaît:

A tout moment vous pouvez modifier les paramètres en sélectionnant l'emplacement de votre vidéo et en cliquant à nouveau sur l'icône .
Faites vos modifications puis cliquez sur le bouton « Update »

Votre vidéo sera à nouveau lisible dès que vous aurez validé votre page dans l'éditeur de texte.

Les tableaux

Insertion:

L'éditeur de texte vous permet également d'insérer des tableaux en cliquant sur l'icône:

1.  l'onglet « General »:

Indiquez le nombre de colonnes (Cols) et le nombre de lignes (Rows) de votre tableau. Ce nombre ne pourra plus être modifié après validation mais vous pourrez ajouter ou supprimer directement une ligne ou une colonne (voir plus loin)

Cellpadding: indique l'espace, en pixels, entre le bord de la cellule et son contenu.
Cellspacing: indique l'écartement, en pixels, entre deux cellules jointives.
Alignment: positionne votre tableau sur la page (centré, à droite ou à gauche).
Border: pour mettre un cadre autour de votre tableau. Vous choisissez l'épaisseur en pixels. Si vous laissez la valeur 0 (par défaut) seul le contenu des cellules sera visible.

Vous pouvez préciser la largeur (Width) et la hauteur (Height), en pixels, de votre tableau. Si vous n'indiquez rien vous obtiendrez un tout petit tableau :

que vous pourrez agrandir à votre guise en le sélectionnant et en cliquant sur les repères :

ou qui s'adaptera automatiquement au contenu que vous entrerez dans les cellules :

Remarque: la largeur maximale pour un affichage correct est de 525 pixels

2.  l'onglet « Advanced »:

Seules les deux dernières lignes sont susceptibles de vous intéresser.
Border color: sélectionnez une couleur pour la bordure de votre tableau (en cliquant sur la flèche vous avez accès à un nuancier..)
Background color: de la même façon vous pouvez sélectionner une couleur de fond pour votre tableau.

Remarque: Au lieu de choisir une couleur de fond vous pouvez choisir une image qui servira de fond à votre tableau (Background image); elle peut provenir d'internet ou de votre ordinateur, mais dans ce dernier cas vous devrez tout d'abord l'uploader sur le serveur de yoctown (icône    )

Vous devez alors indiquer dans la ligne correspondante l'adresse (URL) de cette image. Pour la trouver veuillez vous reporter à la section:
« Insertion d'images: propriétés des images ».

A tout moment vous pouvez annuler vos choix et revenir à votre page de travail en cliquant sur le bouton « Cancel »

Cliquez sur le bouton « Insert » pour insérer le tableau dans votre page.

Avec l'option « Background color » :

Avec l'option « Background image » :

Modifier un tableau:

Commencez par sélectionner votre tableau (il suffit de cliquer sur une cellule)

Vous pouvez alors revenir aux propriétés du tableau en cliquant sur l'icône: 
Pour valider vos modifications cliquez cette fois sur le bouton « Update ».

Vous pouvez aussi utiliser les autres icônes qui se sont activées dès que le tableau a été sélectionné:

    1°)   : Ouvre la fenêtre permettant de paramétrer la ligne en cours de sélection (celle dans laquelle se trouve le curseur).

Onglet « General »:
vous pouvez choisir en particulier
- le rôle de votre ligne dans le tableau
- la position du texte à l'intérieur des cellules de cette ligne (horizontalement et verticalement)
- la hauteur des cellules de cette ligne (en pixels).

Onglet « Advanced »:
vous pouvez choisir une couleur ou une image de fond applicable à la ligne uniquement

Pour valider commencez par préciser si vos modifications concernent seulement la ligne en cours de sélection (current row), les lignes impaires (odd rows), les lignes paires (even rows) ou toutes les lignes du tableau (all rows)...

Cliquez ensuite sur le bouton « Update » (Le bouton « Cancel » ferme la fenêtre sans valider).

    2°)   : Ouvre la fenêtre permettant de paramétrer la cellule active.

Dans l'onglet « General » vous retrouvez la possibilité de préciser:
- la position du texte à l'intérieur de la cellule,
- les dimensions de la cellule,
(cette modification concernera automatiquement toutes les cellules de la ligne active pour la hauteur, et toutes les cellules de la colonne active pour la largeur..)
- son type (titre ou données)....

Dans l'onglet « Advanced » vous aurez la possibilité de choisir:
- une couleur de bordure pour votre cellule,
- une couleur ou une image d'arrière plan.

Pour valider commencez par préciser si vos modifications concernent seulement la cellule active (current cell), toutes les cellules de la ligne active (all cells in row), ou toutes les cellules du tableau (all cells in table)...

Cliquez ensuite sur le bouton « Update » (Le bouton « Cancel » ferme la fenêtre sans valider).
Exemple de tableau final:

    3°)   : ajoute une ligneau-dessus de la ligne active (celle où se trouve votre curseur)

           : ajoute une ligneau-dessous de la ligne active

           : supprime la ligne active

           : ajoute une colonne à gauche de la colonne active

           : ajoute une colonne à droite de la colonne active

           : supprime la colonne active

           : permet de fusionner plusieurs cellules:
Choisissez le nombre de lignes et de colonnes que vous voulez fusionner.
Pour revenir à l'état initial, cliquez dans la cellule fusionnée et utilisez l'icône :

L'éditeur HTML

A utiliser uniquement si vous avez déjà des notions en langage html!!!

Comme nous vous le signalions dans la présentation de l'éditeur TinyMce, le langage de mise en forme d'un texte sur Internet est le HTML. Tout ce qui apparaît sur votre écran a donc été codé sous cette forme:

Votre page :

Le code associé :

Les utilisateurs avertis peuvent s'ils le désirent modifier directement ce code.
Vous y accéderez grâce à l'icône :

Attention, par mesure de sécurité seules certaines balises peuvent être librement utilisées; contactez-nous si vous désirez en connaître précisément la liste. ( Nous Contacter )

N'oubliez pas de valider vos modifications en cliquant sur le bouton « Update ». Elles ne seront prises en compte que si toutes vos balises font partie de la « liste blanche » évoquée ci-dessus.

Les fonctions mathématiques

Un éditeur mathématique performant et d'une surprenante simplicité d'utilisation, pour tous ceux qui peuvent avoir besoin d'intégrer des formules ou des calculs à l'intérieur de leurs pages web!!!

Trois icônes sont à votre disposition : 

    1°)   : Ouvre la table des symboles mathématiques.

Cliquez sur le symbole souhaité pour l'intégrer dans votre document,
par exemple en cliquant:
- sur    on obtient à l'affichage :  .
En cliquant dans le cadre rouge vous pouvez modifier la formule. Pour valider, cliquez en dehors du cadre; vous obtiendrez:  

- sur    on obtient à l'affichage :  .

En cliquant dans le cadre rouge vous modifiez la formule à votre guise :, qui vous donne après validation :

    2°)   : Permet d'ajouter directement dans votre document une nouvelle formule mathématique quand vous connaissez déjà la syntaxe à utiliser.

Exemple: vous tapez (-2+sqrt(4x^2+1))/(5x)
             vous sélectionnez ce texte
             vous cliquez sur  :  
             vous obtenez:

    3°)   : Permet d'intégrer à votre document la représentation graphique d'une fonction.

L'éditeur semblera familier à tous ceux qui travaillent habituellement sur des calculatrices graphiques:

Entrez les équations de courbes comme sur une calculatrice classique (cas particulier: sqrt(x) pour la racine carrée).
Choisissez l'intervalle sur lequel la courbe sera tracée (ce n'est pas obligatoirement celui donné par xmin et xmax).
Vous pouvez superposer des courbes, éventuellement définies sur des intervalles différents, mettre de la couleur, choisir la taille du graphique final (en pixels)...
Cliquez sur le bouton « update » pour faire apparaître vos modifications dans l'écran de prévisualisation.
Cliquez sur « Insert » pour insérer le graphique dans votre document, sur « Cancel » pour annuler..

Pour modifier la courbe, cliquez sur le graphique pour le sélectionner puis sur l'icône :

Remarque: votre graphique est une image et vous pouvez donc accéder à ses propriétés en tant qu'image à partir de l'icône: (voir le paragraphe "Propriétés de l'image").