Créer un site internet

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 * * *

haut de page ↑

 

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 nom re 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 direction="right" scrollamount="3"><img src="http://adresseimage.png"> </marquee></p>

 

<p><marquee direction="right" scrollamount="2"><img src="http://monseet.e-monsite.com/medias/images/textureciel.jpg" /> </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

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>

 

 

suite

 

Bonus: Fond d'écran fixe

#fond {
background-image: url("http://nomdusite.e-monsite.com/medias/images/xxx.png");
background-repeat: round no-repeat;
position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Dans la ligne de la page 1ère ligne: <div id="fond">  dernière ligne: </div>

×