new développement web - centrale marseille · 2017. 10. 27. · introduction au développement...
TRANSCRIPT
I n t r o d u c t i o n a uDéveloppement Web
I n t r o d u c t i o n
- Site Web : Un site web, ou simplement site, est un ensemble de pages web et de ressources reliées par des hyperliens, défini et accessible par une adresse web. (Wikipédia)
- Comment faire un site ? - Avec un service web permettant de créer facilement des sites (Wordpress, Wix…) - Avec un générateur de site- Avec un CMS (Wordpress, Drupal, Joomla…)- A la main, en le codant.
- Comment coder un site ?- Front end : Interface utilisateur (HTML / CSS / Javascript)- Back end : Fonctionnalités avancées, interactivité (PHP / Node / Java ….)
Front end & back endFront end Back end
Interface, positionnement, designHTML & CSS (& Javascript)
Contenu dynamiquePHP / Java / Python / Node ….
R é a l i s a t i o n d ’ u ns i t e
Préparation :Faire un site sur quoi ?
Utilité ? Contenu ?
Structurer :A quoi va-t-il ressembler?
Répartitions sur les pages ?
Développer :Coder les différentes pages
(Implémentation)
Héberger :Choix d’un hébergeurChoix d’un domaine
Mettre en ligne :Envoyer les fichiers sur
l’hébergeur
L o g i c i e l snécessa i resEditeur de code Transfert de fichier
https://wiki.centrale-marseille.fr/ginfo/formations:devweb_1
- FileZilla- WinSCP
Ne pas utiliser Word / Open office !
Les langages f rontendHTML 5
Structuration du contenuCSS
Application du style
Le HTMLBalises<balise> … </balise>
-<html>-<head>
- <meta>- <link>- <title>
-<body>
Les s i tes persoc e n t r a l ehttps://login.perso.centrale-marseille.fr
https://prenom.nom.perso.centrale-marseille.frhttps://login.perso.ec-m.fr
Exemple : -https://rgrondin.perso.ec-m.fr/
-https://romain.grondin.perso.ec-m.fr
Stockés dans le dossier html/ dans le dossier personnel.
Les balises de base- <b> Texte en gras </b>- <i> Texte en italique </i>- <img src="image.jpg" />- <a href="page.html"> Lien vers une autre page </a>- <div id="lol" class="chelou"> Un bloc </div>- <center> Un texte centré </center>- <h1> Un titre de page </h1>- <h2> Un plus petit titre </h2>- … <h6> Le plus petit titre </h6>
Un peu de style<div style="…">-Color: red;-Width: 200px;-Background-color: yellow;
Dans style.cssBody{
background-color: orange;
}
Pour lier : <link href= "style.css" rel="stylesheet " />
E t l a s u i t e ?MOOC HTML / CSS sur OpenClassrooms
https://wiki.centrale-marseille.fr/ginfo/formations:devweb_1