Créer un site internet
  1. Accueil
  2. code html

code html

 << 

Code html utilisé pour ce site et saisi dans les pages avec l'éditeur HTML:

à utiliser pour personnaliser un peu plus son site,

en petite quantité,

en complément des fonctions déjà proposées par l'outil e-monsite.

Le code HTML s'insère dans le code HTML généré par l'outil.

 

Lien vers une autre adresse (lien hypertexte):

 

 

Le texte à cliquer peut être saisi en mode éditeur visuel

puis en mode éditeur html, on encadre le texte par 

à gauche <a href="http://adressedelacible">

à droite </a> 

 

Exemple:

lien vers Google

<a href="http://adressepagecible">texte à cliquer</a>

<a href="http://google.fr">Quitter</a>

 

Lien vers une autre page du site  (page cible):

Info-bulle

 

 

Retour

 

 

 

 

 

Pour un lien vers une autre page du site,

on trouve l'adresse de la page cible qui commence par http://, dans la partie "optimisation du référencement" de cette page. 

Pour faire apparaître une info-bulle au passage de la souris, insérer un blanc et 

title="info-bulle" après l'adresse de la page 

Lien vers la page d'accueil: 

<a href="http://monseet.e-monsite.com" title="Retour accueil">Retour</a>

Les sites qui proposent des 'widgets' permettent de récupérer du code HTML à copier et coller tel quel dans une ligne de son site.

 

 

Apparence et présentation du texte

Pour la présentation de base: les outils de la barre d'outil peuvent agir sur une partie du texte en sélectionnant le texte à présenter (étendre la sélection en appuyant à la fois sur les touches Shift et flèche vers la droite), ou sur un paragraphe, puis en cliquant sur l'outil voulu.

En code html, commencer par <div style="

les attributs de présentation s'indiquent à la suite,

séparés par un ; et finissent par ">

terminer par </div> 

Couleur de fond: background-color: #F0FFF0;

#F0FFF0 est le code couleur (ici beige), les codes couleur sont indiqués sur divers sites spécialisés, le blanc est #FFFFFF, le noir #000000.

Fond en couleur dégradé: background: linear-gradient(to right, #db0073, #dff2ff);

(avec codes couleur ou avec leur nom, red, blue etc.)

avec marge (à gauche et/ou à droite): margin-left (-right): 30px;

Bordure: border: 5px solid #000099;

Pour une bordure sur un côté: border-top -left -right -bottom

Pour une bordure ombrée, remplacer solid par groove

Texte coloré

color: #(code couleur);

Texte défilant

Encadrer le texte par <marquee scrollamount="3";> et </marquee>

Pour un va-et-vient, insérer behavior="alternate" après <marquee .

 

 

 

 

 

Pour l'option Quitter sur un fond beige, déjà centré, par exemple:

<div style="background-color: #F0FFF0;">
<p style="text-align: center;"><a href="http://google.fr">Quitter</a></p>

<hr />
<p>&nbsp;</p>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Exemple:

<div style="background-color: #194943; color: #daf7A6;"> texte</div>

<div style="background-color: #13586F; margin-left: 30px; margin-right: 10px;"><marquee scrollamount="3"> texte1</marquee></div>

<div style="background: linear-gradient(to right, #db0073, #dff2ff);color: #ffc0cb; border: 6px groove #db7093;">texte2
</div>

 

texte

 

texte1

 

texte2

* * * Terminer par la commande Enregistrer * * *

 

Image de fond

(stockée dans les images)

 

 

En éditeur HTML dans une ligne de la page:

Positionnement dans la page: left, top (px indique l'unité pixel, on peut utiliser un nombre négatif),

Dimension: width (facultatif).

 

<p><img alt="" src="http://(adresse de l'image)" style="position: fixed; left: 20px; top: 50px; z-index: -1; width: 60%;" /></p>

Pour une image fixe, remplacer fixed par absolute. 

Transparent: insérer opacity: 0.8;

Adresse de l'image: voir l'outil "i" de l'image stockée.

C'est la propriété z-index: -1 qui met l'image en arrière-plan.

On peut mettre l'image en avant-plan en utilisant les valeurs 0 ou 2 qui permet de superposer aussi plusieurs images. 

Les images animées sont des fichiers .GIF à télécharger et qui s'affichent de la même manière.

 

Image défilante:

 

<p><marquee scrollamount="3"><img src="http://adresseimage.png"> </marquee></p>

 

<p><marquee behavior="alternate" scrollamount="3"><img src="http://monseet.e-monsite.com/medias/images/textureciel.jpg" style="width: 40%;" /> </marquee></p>
 

Bonus:

afficher la date

 

 

 

bouton haut de page

 

 

 

 

 

haut de page ↑

<SCRIPT LANGUAGE="JavaScript">
var maintenant=new Date();
var jour=maintenant.getDate();
var mois=maintenant.getMonth()+1;
var an=maintenaaant.getFullYear();
document.write("Nous sommes le ",jour,"/",mois,"/",an,".");
</SCRIPT>

 

 

<p><a class="btn btn-default" href="#">haut de page &uarr;</a></p>
 

 

Page suivante: code CSS Note: les nouvelles versions e-monsite de base ne permettent plus de personnaliser son site avec l'ajout de code CSS.

Code CSS

Le code CSS est un autre code qui s'écrit dans la partie Configuration Apparence CSS supplémentaire et s'utilise différemment

. Format des titres: 

titre centré:

h1 {
font-size: 2.1em;
text-align: center;
}

titre à droite, police ombrée:

h1 {
font-size: 1.5em;
text-align: right;
margin-right: 50px;
color: #DFF2FF;
text-shadow: 1px 3px 3px #22427C;
}

 

Textures de fond:

Une texture téléchargée est à enregistrer dans les images, son adresse http:// est à récupérer dans ses informations (outil "i"),

par exemple: (nomdusite).e-monsite.com/medias/images/restau-icons.png

Pour utiliser la texture en fond, ajouter ces lignes de codes CSS (dans la partie Configuration Apparence):

#cadre
{
    background-image:url("http://nomdusite.e-monsite.com/medias/images/restau-icons.png") ;
}

qui définit un style appelé "cadre" (ou un autre nom), réutilisable dans les pages avec le code HTML dans les pages voulues:

Sur la page où l'on souhaite un fond avec la texture, en mode éditeur html, la ligne commence par :

<div id="cadre"> et finit par </div>

 

 

texture

 

 

Texture répétée sur une certaine largeur et hauteur indiquée en pixel (px):

Dans le code CSS:

#fondmur
{
    background-image:url("http://nomdusite.e-monsite.com/medias/images/nomdelimage.png");
    background-repeat: repeat ;
    width: 600px;
    height: 400px;
}

Dans la ligne de la page, en éditeur html, la ligne commence par 

<div id="fondmur">

finit par </div>