Loading presentation...
Prezi is an interactive zooming presentation

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Création de page Web

No description
by

Josianne Fortin

on 2 December 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Création de page Web

Notepad++
Remarquez les couleurs dans le code, cela vous aidera à détecter des erreurs
Plusieurs options vous sont proposés pour accélérer la création de votre page Web
Commentaire
Copier/coller
Rechercher.
http://nliautaud.fr/wiki/articles/notepadpp/raccourcis
Retour Exercice 1
Création de page Web

L'indentation dans un code HTML ne change rien à son fonctionnement, mais cela permet de mieux visualiser l'intégralité du code rapidement et de repérer les erreurs potentiel
Il existe deux types de code HTML pour les caractères spéciaux, il est préférable d'utiliser les codes texte au code numérique pour leur facilité de compréhension. Par contre, il est possible que certaine code texte ne soit pas reconnu ou supportés dans les navigateurs.
http://dev.w3.org/html5/html-author/charref
Listes
Il est important de bien structurer son texte afin de bien organiser son contenu. Les listes vous permettrons de le faire.
Il existe deux types de liste :
Non ordonnées ou liste à puces
Ordonnées ou liste numérotée

À Faire ...
Projet
Vous devez trouver le sujet de votre projet de site Web
Il devra être approuvé lors du prochain cours

Devoir
Vous devez faire l'exercice HTML #2
À remettre la semaine prochaine par LÉA
Liens
Afin de mieux se déplacer dans un site, il est essentiel d'y insérer des liens. Il existe plusieurs types de liens, mais tous utilise la balise :

<a href="www.monsite.com">Cliquez ici</a>

Pour faire afficher une autre page de notre propre site, il faut utiliser la balise <a> avec le même principe que les chemins des images

<a href="page2.html">Page 2</a>
<a href="fr/page2.html">Page 2</a>
GIMP
C'est un éditeur d'image comme Photoshop
Vous pouvez le télécharger gratuitement
Lorsque vous l'ouvrez pour la première fois, il est en 4 fenêtres. Pour le mettre en fenêtre unique:
Affichage>Mode Fenêtre Unique
Format d'image
Il est important de considérer les différents formats d'image, car selon la qualité de l'image et la taille de celle-ci, le temps de téléchargement d'une page Web pour être ralentie
JPEG
Parfait pour les photos!
PNG (8 bits-256) ou (24 bits -16 millions)
Parfait pour la plupart de image type graphique (non photo). Permet la transparence
GIF (256)
Peut être animé
Comment préparer vos photos pour le Web?
PLAN
Retour sur le laboratoire
Indentation
Caractère spécial
Exercice de révision
Notepad++
GIMP
Format d'image
HTML
Les listes
Les liens
Retour (suite)
Il est important de toujours bien fermer ses balises
Ne pas oublier les balises orphelines : <br /> <img />
Il faut faire attention aux guillemets utilisés et ne pas abuser des espaces!
La différence entre :
<b> et <strong>
<i> et <em>
Il faut toujours bien imbriquer les balises
<font size="7"><strong>Allo</font></strong>
<font size="7"><strong>Allo</strong></font>
Exercice de révision
En équipe de deux
, trouvez le plus d'erreurs possible dans le code qui vous a été distribué sur LÉA.
Vous devez rendre ce code le plus efficace et conforme que possible selon les notions vus en classe sur le HTML5.
Vous pouvez utiliser Internet
Vous avez 10 minutes
On corrige en classe
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-avec-gimp-2-8/interface-et-personnalisation
1. C’est la partie ou la fenêtre principale.
2. C’est la boîte à outils.
3. C'est le menu d'options des outils
4. Cette fenêtre ou partie peut être personnalisée, voire enlevée

Outils GIMP
Il est important de bien ajuster les images pour le Web, sinon vous risquez d'avoir des images pixelisée ou avec un mauvais format
En utilisant le logiciel GIMP, il est facile de bien
manipuler une image ou une photo avant de la
publier sur un site Web. Voici les deux étapes à
suivre avant de mettre une image en ligne
Taille de l'image
Image > Échelle et taille de l'image
Exporter l'image
Fichier > Export as ... (Maj+Ctrl+E)
<ul>

<li>
Fraises
</li>

<li>
Framboises
</li>

<li>
Cerises
</li>
</ul>
<ol>

<li>
Je me lève.
</li>

<li>
Je mange et je bois.
</li>

<li>
Je retourne me coucher.
</li>
</ol>
Liens (suite)
Il peut être intéressant de faire des liens à l'intérieur d'une même page. Pour cela, il faut utiliser les ancres. Ces ancres sont souvent placées dans un titre d'une section.

<h2
id="mon_ancre"
> ... </h2>

Et le lien utilisera le id de l'ancre

<a
href="#mon_ancre"
>...</a>
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/creer-des-liens
Autre liens
Un lien pour envoyer un e-mail

Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de type mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci :

<p><a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a></p>

Un lien pour télécharger un fichier

Par exemple, supposez que vous vouliez faire télécharger monfichier.zip. Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce fichier :

<p><a href="monfichier.zip">Télécharger le fichier</a></p>
Il est possible de personnaliser vos listes
<ul
type="square"
> ... </ul>
<ol
start="10"
> ... </ol>
<ol
type="a"
> ... </ol>

Vous pouvez aussi imbriquer des listes pour avoir plusieurs niveaux à votre liste
<ul>
<li>...</li>
<ul>
<li>...</li>
</ul>
</ul>
Attributs de liste
Full transcript