Embedded Files
Expliquer étapes réalisation site Internet
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 </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
PHP et Bdd (Ouvaton) : Les différents étapes
Site statique VS site dynamique (qui génère des pages Internet en fonction d’une base de données, en fonction de mon nom, etc…)
Php sert à générer automatique des pages html => Nécessaire pour créer des sites dynamiques
Une page php s’ouvre par le navigateur comme une page html
Pages html se génèrent avec navigateur mais Pages php se génèrent à partir du serveur de bdd => pour vérifier si cela fonctionne, il faut une bdd (réelle ou locale avec WAMP)
Principes (en montrant les pages de scripts proposés et les pages de scripts modifiés)
1) Réaliser une table dans la base de données
Créer une table : CREATE TABLE Exemple (
id INT….
nom….
PRIMARY KEY(id) ) ;
2) Modifier les 2 scripts fournis exemple.php et exemple_post.php et les adapter à la bdd Ouvaton et créer le formulaire qui apparaitra à l’écran
- Permettre l’accès au serveur de bdd
- adapter les requêtes SQL des scripts pour insérer ou récupérer des données de la table
3) Vérifier le fonctionnement
Page updated
Google Sites
Report abuse