Édition site Internet HTML CSS
Pour éditer un site Internet, il suffit de réaliser un fichier html (fond/contenu) et de le lier à un fichier css (forme/présentation)
On peut ainsi aisément modifier la présentation d'un site en y associant un autre fichier.css...
Réalisation fichiers html et un css + publication sur serveur après une auto formation (openclassroom).
Base théorique
Un site Internet = ensemble de fichiers déposés sur serveur et accessibles via des navigateurs (IE, Mozilla Firefox, Safari, Opéra…)
Présentation et contenu, html et css
Html = contenu ;
css = mise en forme / présentation
Le lien entre le fichier html et fichier css s’opère par le code ci-dessous :
<link rel= « stylesheet » href= « style.css » />
à Montrer sur fichiers comment css est accolé à html
à supprimer la connexion et voir le résultat
Structure d’une page html
Doctype (indication du type de document)
En tête <Head> métadonnées
Ex : Titre page (ce qui apparaît sur l’onglet et non dans la page) =
Corps <Body>
<header>
<nav>
<Section>
<aside> corps du texte souvent sur le côté </aside>
<article> corps du texte principal </article>
</Section>
Pied de page <footer>
Comment s’organiser pour la page accueil (concrètement)
- Edition fichier html avec éditeur de textes (bloc-notes, notepad++ ou sublim text (coloration syntaxique)
- Ouvrir un fichier et enregistrer avec extension .html ou .css (pour le fichier .css)
description du contenu et de s structure à travers des balises
Fichier html = rédaction des contenus structurés organisés par des balises descriptives :
Balises ouvrantes + balises fermantes (quelques balises orphelines)
<p> xxxx </p>
<h1> titre </h1>
<strong> fort </strong>
Listes puces <ul>
<li>
Listes ordonnée <ul>
<ol>
Aller à la ligne <br (balise orpheline)
<img src="images/ico_epingle.png" / (balise orpheline)
- par convention page accueil = index.html et css = style.css
- si la page d’accueil est reliée à d’autres pages, il suffit de relier la page index.html vers blog.html
Analyse de mon travail
Expliquer sommairement quelques éléments :
Html
Css
Background
Faire 2 ou 3 mainpulations
Publication sur serveur
Envoi des fichiers grâce à Filezilla (logiciel de ftp : file transfert protocol)
essai
http://www.creation-du-web.com/honolulu/
Générateur de carte Openstreetmaps
https://umap.openstreetmap.fr/fr/
Cours et scripts php