Formation Webmaster

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Formation Webmaster - Wordpress ======

===== Introduction =====
Il existe de multiples manières de créer un site web. Parmi elles, des solutions partiques et toutes faites comme Wix, d'autres qui nécessites des compétences qui s'aquièrent au fil des [[formations:devweb_1|Devweb du GInfo]] ou encore des gestionnaires de contenu comme Shopify, Drupal, Joomla ou **Wordpress**. C'est de dernier auquel nous allons nous intéresser !

<note important>**Prérequis** : Demander à votre prédecesseur les identifiants de connexion au site de votre asso !</note>

===== HTML =====
==== Notre première page ====
<note tip>Rappel de [[formations:devweb_1]]. La base d'une page html</note>

<file html index.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Un titre de page</title>
    </head>

    <body>
    	<!-- Un commentaire -->
        Bonjour.<br /> Ceci est mon contenu
    </body>
</html>
</file>

Si vous enregistrez le fichier et que vous ouvrez le fichier avec un navigateur, vous devriez voir ceci.

{{:formations:capture_d_e_cran_2017-10-26_a_23.32.55.png?200|}}

-> La ligne contenant **<!DOCTYPE html>** explique au navigateur que la page contient du html répondant à la norme HTML5

-> La balise **<head>** contient diverses informations qui ne seront pas vues par l'utilisateur directement, mais qui pourront être utile au navigateur pour interpréter la page; ici on peut voir que la balise contient le titre de la page et le codage du texte (UTF-8).

-> La balise **<body>** contient tout le contenu de la page. Vous aurez deviné que la balise **<br>** est une balise permettant de sauter une ligne, elle est dite de balise de structuration de texte.

==== Les balises ====
<file html balises.html>
Modifier une police : <b> Texte en gras </b>   <i> Texte en italique </i>
Mettre une image : <img src="image.jpg"  /> 
Mettre une musique : <embed src="musique.mp3" autostart="true" loop="true" hidden="true">
Mettre une vidéo : <iframe width= “425” height=”344” src= “http://www.youtube.com/…″></iframe>
Mettre un lien : <a href="page.html"> Lien cliquable </a>
Créer un bloc : <div id="jeSuisUnique" class="PasUnique"> Un bloc </div>
Créer un paragraphe : <p> Contenu paragraphe </p>
Créer un titre :<h1> Le titre les + important </h1>… <h6> Le titre les - important  </h6>
Importer un fichier de style (css) : <link rel=”stylesheet” href=”votreFichier.css” />
Passer une ligne : <br />
</file>

Rappel sur [[https://fr.w3docs.com/apprendre-html/mise-en-forme-html.html|W3School]]

===== CSS =====

==== Sélection des éléments HTML ====
<note tip>Rappel de [[formations:devweb_1]] & [[formations:devweb_2]]. Voyons rapidement ensemble les bases du CSS !</note>

Pour sélectionner un élément, vous aurez besoin des id et des classes
<file html id_class.html>
<div id="identifiantUniqueDuBloc">Bloc 1</div>
<div class="classePartagee">Bloc 2</div>
<div class="classePartagee">Bloc 3</div>
</file>

Ici, Le bloc 2 et le bloc 3 hériteront du même style car le sélecteur "class" est identique.

**Mais au fait... comment on écrit du style ?**
==== Écrire du style ====
Trois façons de faire :
  - Dans un fichier externe
  - Dans la balise HTML avec l'attribut : style=""
  - Dans une balise <style> dédiée

<file html styles.html>
1. <link href= "style.css" rel="stylesheet " />
2. <div style="color:red;">Texte en rouge</div>
3. <style>.classePartagee { color: red; }</style>
</file>


===== Wordpress - Partie pratique =====

==== Créer et modifier une page ====

=== Connectez vous à votre site WordPress ===

L'adresse URL de votre site associatif est de la forme **nom_association.asso.centrale-marseille.fr** 

Pour modifier votre site WordPress ajoutez '/wp-admin' à la fin de l'URL : **nom_association.asso.centrale-marseille.fr/wp-admin**

{{ :tutoriels:identification_wp.png?nolink |}}

Identifiez vous à l'aide de votre identifiant/adresse mail et de votre mot de passe ou avec la connexion via My.

<note tip>Si vous n'avez pas vos identifiants, contactez vos prédécesseurs !</note>
<note important>Si vos prédécesseurs ont définitivement perdus vos identifiants, contactez le GInfo, et/ou en particulier le président ou le respo réseau de ce dernier</note>

=== Sélectionnez la page à modifier dans votre espace d'administration WordPress ===

Vous êtes maintenant dans l'interface de gestion de votre WordPress.

Dans le menu principal de gauche, cliquez sur l'onglet "Pages". La liste de toutes les pages de votre site apparaît alors.

{{ :tutoriels:pages_wp.png?nolink |}}
=== Créer une page vierge ===
=== Dupliquer une page existante de votre asso ===
==== Modifier un utilisateur ====
==== Changer le thème ====