Expliquer comment réaliser un site Internet
(les différentes étapes)
Réflexion initiale et généralités
Finalités et public du site
Charte graphique
Plan du site et nom des fichiers/pages
Collecte du contenu
Qu’est-ce qu’un site : fichiers publiés sur un serveur et accessible grâce à des navigateurs (google chrome, firefox, internet explorer, safari, opéra)
Comment s’organiser ?
Ouvrir Editeur de texte (bloc notes, NotePad ++ ou sublim text) et enregistrer avec extension .html (ex : index.html) à ouvrir avec avec navigateur (idem avec css)
Idem si fichier css (présentation)
Rassembler tous les fichiers dans un même dossier (.html, .css, .php, .jpg, .png, etc.)
Comment cela fonctionne ?
- Fichiers html5 (contenu/fond) + fichiers css3 (présentation/forme)
- Html : langage de mise en forme de contenu (texte, image, vidéo…) avec des balises (ouvrantes ou fermantes)
Ex :
<title> mon titre </title>
<p> paragraphe </p>
<h1> niveau de titre 1 >/h1>
- lien relatif
<a href= index.html> lien vers page accueil </a>
ou <a href= images/index.html> lien vers page accueil </a>
- lien absolu
<a href= ‘’http://www.qwant.fr>mon moteur de recherche préféré< /a>
- lien vers ancre
Créer ancre <h2 id= ‘’mon_ancre ‘’>Titre </h2>
Lien vers ancre <a href= ‘’#mon_ancre’’> aller vers l’ancre </a>
- Insérer image : <p> <img src= « image/selfie.jpeg » alt = selfie avec marcel »/></p>
- Lien vers mail <a href=’’mailto : monadressemail@orange.fr> écris moi !</a>
- Fichiers css
p h1
{
Color : blue ;
}
nav a
{
font-size: 1.2em ;
color: pink; black, gray, yellow,…
padding-bottom: 3px;
text-decoration: none; none, line-trough, underline
}
- Structure d’un site
<head> métadonnées : ce qui ne se voit pas à l’écran (métadonnées)</head>
<body>
<header>« titre » du site</header>
<nav>barre navigation</nav>
</body>
<section>
<aside>colonne annexe </aside>
<article>corps du texte principal </article>
</section>
<footer>pied de page </footer>
Comment passer des fichiers au site Internet accessible par tout le monde
Rassembler tous les fichiers dans un même dossier (voire sous-dossiers)
Utiliser un logiciel client ftp (File Transfert Protocol) comme FileZilla (logiciel libre)
FileZilla permet de se connecter à un serveur et d’y télécharger/téléverser des fichiers
Interface se compose de 3 parties :
1) Identification
- hôte : indiquer serveur hôte (ex : ftp.ouvaton.coop/)
- identifiant : ex : essais.ouvaton.97
- pwd : ex : essais
2) site local
3) site distant (serveur)
error-docs
logs
var
httpdocs
images
polices
index.html
style.css
page2.html
xx.jpg
xx.png
Une fois connecté, il suffit de faire passer des fichiers du site local au site distant (téléverser)
Ou l’inverse, télécharger des fichiers/dossiers du serveur vers son espace disque local
Une fois les fichiers/dossiers envoyés, le site est fonctionnel et il suffit de se connecter à l’Url correspondante pour accéder au site Internet
Le site s’ouvre sur le fichier index.html