Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

MOOC HTML5/CSS3 semaine 1 Découverte de HTML5 by Mind Map: MOOC HTML5/CSS3
semaine 1 
Découverte de HTML5
5.0 stars - 4 reviews range from 0 to 5

MOOC HTML5/CSS3 semaine 1 Découverte de HTML5

<img ........../> Les images

Les formats

PNG, Portable Network Graphics, Utiliser pour les shémas, logo, dessin, 16.7 millions de couleur par image, Recommandé par le W3C, Permet la transparence à 256 couleurs

JPEG, Joint Photographic Experts Group, Utiliser pour les photos, 16.7 millions de couleur par image

GIF, Graphics Interchange Format, Pour les images animées, Encodage en 256 couleurs, Préconiser pour, les logos, puces, symboles et cliparts

Insérer une image

<img src="nom_du_fichier_image.png" alt="texte alternatif" />

Lien image, <a href="adresse_du_site.fr"> mon_image </a>

Les figures

Permet de créer une legende

<figure> </figure> à la place d'un paragraphe

Cette balise indique une illustration sur la page web

<figcaption> </figcaption> indique la légende de l'image

Répétitions

repeat

no-repeat

repeat-x

repeat-y

Sa première page web

Les balises

Permet d'insérer du contenu

Types, En deux exemplaires, Début <titre>, Fin </titre>, Orpheline, Une seule balise <image>

Les attributs

Situé dans une balise

<citation auteur="maupassant">

La structure

<!DOCTYPE htlml>, indique que c'est une page en HTLM5

<html> </html>, elle englobe le contenu de la page web

<head> </head>, Indique des informations techniques, L'encodage, <meta charset="UTF-8">

<meta >, Indique des caractères spéciaux

<html> </html>, elle englobe le contenu de la page web

<title> </title>, Indique le titre de la page web

<body> </body>, Contient le corps de la page web

<!-- commentaire --->, Contient des infos perso sur le code

Exemple

Organiser son texte

Les paragraphes, <p> </p>, <br> crée un saut de ligne

Une famille de titres, Organisés en niveau de titre, Ils indiquent le sens du contenu, <h1> titre </h1>, <h2> titre </h2>

Mise en valeur, <strong> </strong>, Mise en gras, <em> </em>, Italique, <mark> </mark>, Mise en surbrillance, Liste à puces, <ul> <li> </li> </ul>, Puces simples, <ol> <li> </li> </ol>, Puces numérotées, supprimer les puces, list-style-type: none;, Image puce, list-style-image: url('images/ico_liensexterne.png');

Créer des liens, Lien vers un site, Le lien absolu, <a href="http://www.mindmeister.com"> mindmeister </a>, Lien vers une page, Le lien relatif, même niveau, <a href="page2.html">page 2</a>, dossier inférieur, <a href="dossier/index.htm"> Accueil </a>, dossier supérieur, <a href="../dossier/index.htm"> Accueil </a>, Lien ancre, Création de l'ancre, Un attribut id="nom de l'ancre", L'ancre s'insère dans une balise titre <h2>, <h2 id="ancre1"> mon titre </h2>, Attention :, Chaque id="ancre1" doit être unique, Création du lien de l'ancre, <a href="#ancre1"> texte </a>, Lien title, Un info bulle s'affiche au passage de la souris sur lien, Un attribut que l'on rajoute à la balise <a>, <a href="#ancre1" title="cliquez ici">, Lien mail, <a href="mailto:toto@free.fr"> contactez-moi </a>, Lien vers un fichier, <a href="programme.zip">télécharger le fichier </a>, Vers une fenêtre, target="_self", page qui s'ouvre dans la même fenêtre, target="_top", page qui s'affiche dans la même fenêtre, page qui occupe la totalité de la fenêtre, target="_blank", page dans une autre fenêtre

Créer des sites web

C'est quoi un site Woueb ?

On le consulte au travers d'un navigateur Web

Le navigateur, Transforme le code HTML et CSS, Affiche la transformation à l'écran

2 languages

Pourquoi ?, Pour séparer le fond et la forme

HTML, Permet d'écrire le fond du site web, C'est le contenu

CSS, Permet de mettre en forme le contenu

Une demo ?, http://www.csszengarden.com/

Editeur de texte

Sous windows, Un bon vieux Bloc notes, NotePad ++, PsPad, ConTEXT

Sous Mac, Espresso, Smultron

Linux, gEdit, Kate, Vim, Emacs

Les navigateurs

Traduisent le HTML et le CSS

Affichent le code sous forme de visuels

L'auteur : Olivier Legrand

Formateur du Web

Olivier Legrand - Concepteur pédagogique multimédia