Contents

  1. Synopsis
  2. Public cible
  3. Formateur
  4. Participants
  5. Déroulement
  6. Plan de cours (1)
    1. Le W3C
      1. L'accessibilité
    2. Introduction au HTML
      1. What is HTML?
    3. Introduction au CSS
      1. What is CSS?
    4. Exercice
      1. Monter une page HTML structurée
      2. Exercice pour la maison
    5. Liens cours 1
  7. Plan de cours (2)
    1. echange de moyen de communication (15m) (Facultatif)
    2. Révision des exercices du cours 1
      1. Difficultés rencontrées
      2. Finir l'exercice
    3. Principes des ID et classes
    4. Comment ajouter du style au HTML
    5. Exercice de mise en pratique et devoirs pour la maison
      1. Dictionnairtes pratiques
      2. commencer à mettre un peu de style
      3. Feuille de style ZenGarden
  8. Plan de cours (3)
    1. Questions des Etudiantes
    2. Réponse 1 - Les "indispensables"
    3. Réponse 2 - Introduction au positionnement
    4. Réponse 3 - Developper en local avec un Mac
    5. positionnement
  9. Plan de cours (4)
    1. Questions des Etudiantes
    2. Réponses
      1. Liens relatifs / Absoluts
    3. Retour sur les normes et perspectives
  10. Liens en vrac

Synopsis Edit

À la sortie du premier cours l'élève sait reconnaître un doc HTML ou XHTML.

À la sortie du deuxieme on sait comment brancher un fichier css sur son fichier XHTML.

À la sortie du 3eme on doit être capable de styliser des listes de comprendre les concepts de base. Le troisième cours va nous permettre de renforcer et approfondir nos connaissances. C'est principalementun atelier.

Le 4eme cours devrait parler des perspectives dans le monde des normes HTML5 et surtout XHTML1. Des méthodes suggérées pour structurer un site web. Introduction aux CMS et Drupal. Introduction sur un nouveau cours de css avancé.

Public cible Edit

Niveau débutants

Formateur Edit

PeParadis, MarcAngles

Participants Edit

Déroulement Edit

Quatre lundis soirs de 18h à 21h, à partir du 24 mars 2008.

Plan de cours (1) Edit

Le W3C Edit

L'accessibilité Edit

Introduction au HTML Edit

What is HTML? Edit

HTML is the publishing language of the World Wide Web.

Introduction au CSS Edit

What is CSS? Edit

Exercice Edit

Monter une page HTML structurée Edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>
<title>Engagement à suivre les 4 cours de la formation HTML/CSS</title>
</head>
<body>
<h1>Engagement à suivre les 4 cours de la formation HTML/CSS</h1>
        <div id="intro">
                <p>texte</p>
        </div>
        <div id="contenu">
                <p>texte</p>
        </div>
        <div id="adresse-exp">
                <h2>Expéditeurs</h2>
        </div>
        <div id="adresse-dest">
                <h2>Destinataire</h2>
        </div>
        <div id="footer">
                <p>mon <a href="" title="">cv</a></p>
        </div>
        <div id="signature">
                <img src="" alt="" />
        </div>
</body>
</html>

Exercice pour la maison Edit

Liens cours 1 Edit

Plan de cours (2) Edit

echange de moyen de communication (15m) (Facultatif) Edit

Révision des exercices du cours 1 Edit

Difficultés rencontrées Edit

Finir l'exercice Edit

Principes des ID et classes Edit

Comment ajouter du style au HTML Edit

Exercice de mise en pratique et devoirs pour la maison Edit

Dictionnairtes pratiques Edit

commencer à mettre un peu de style Edit

Feuille de style ZenGarden Edit

Plan de cours (3) Edit

Questions des Etudiantes Edit

  1. Difficultes
  2. Ce qui m'aiderais le plus actuellement
  3. adrienne
    • isoler les elements

    • faire des styles sheets qui s'appliquent a toutes mes pages (./)

  4. maryse

    • balises HTML, A ? (./)

    • pratiquer le positionnement
  5. meg
    • separate style sheet 

/html/
   index.html    => <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
   portrait.html => <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />      
   fiche.html    => <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
   styles.css    => @import "portrait.css";
                    @import "autres.css";
   portrait.css
   autres.css

Réponse 1 - Les "indispensables" Edit

Réponse 2 - Introduction au positionnement Edit

http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

Réponse 3 - Developper en local avec un Mac Edit

  1. Ouvrir les préférences / Système Preferences
  2. Partage / Sharing
  3. activer Personnal File Sharing

  4. Créer un répertoire nommé public_html dans votre repertoire personnel

  5. Pointer firefox ou le navigateur vers http://localhost/~VotreUsager

  6. pour trouver votre nom d'usager (certaines personnes se prennent des noms d'usagers bien fancy dans les macs :) ) ouvrez un terminal (Applications/Utilitaires/Terminal). Une invite pparait sous la forme NomDeLaMachine:~ VotreUsager$

    7. Note

    Si vous voulez avoir acces directement depuis http://localhost/, il faut remplacer les fichiers trouvés dans /Library/WebServer/Documents/ . Si vous n'y avez jamais touchés, les fichiers qui s'y trouvent sont les fichiers qui décrivent le logiciel apache (le serveur web) et qui pointent à sa documentation.

positionnement Edit

exemples cools

Plan de cours (4) Edit

Questions des Etudiantes Edit

  1. Difficultes
  2. Ce qui m'aiderais le plus actuellement
  3. stephanie
  4. adrienne
  5. maryse
    • Problème avec les positionnements
    • Faire des liens
  6. rickie
    • gif
    • Validation

Réponses Edit

Liens relatifs / Absoluts Edit

/boot
/lib
/usr
/etc
/mnt
/...
/home/maryse/photos/
/home/maryse/mamusique/
/home/maryse/public_html/
/home/maryse/public_html/MonPortrait.jpg

cd ../

/home/maryse/

http://maryse.com/MonPortrait.jpg

<a href="http://maryse.com/MonPortrait.jpg" title="sdgsdgsd">le portrait de Maryse</a>

/home/maryse/public_html/index.html
/home/maryse/public_html/MonPortrait.jpg


<a href="MonPortrait.jpg" title="sdgsdgsd">le portrait de Maryse</a>

/home/maryse/public_html/index.html
/home/maryse/public_html/images/MonPortrait.jpg

<a href="images/MonPortrait.jpg" title="sdgsdgsd">le portrait de Maryse</a>

/home/maryse/public_html/html/index.html
/home/maryse/public_html/images/MonPortrait.jpg

<a href="../images/MonPortrait.jpg" title="sdgsdgsd">le portrait de Maryse</a>

Retour sur les normes et perspectives Edit

Liens en vrac Edit

None: FormationXHtmlCss (last edited 2008-04-21 17:46:10 EST by MarcAngles)