SlideShare a Scribd company logo
1 of 15
Download to read offline
Créer son premier site avec
HTML
Formation par Ludovic Verrecchia, intervenant à 3wAcademy
Notre école
Plus de 400 étudiants
11 salles dans le monde
Plus de 2 ans d'existence
Nos cours
Notre méthode
Suivez-nous
www.3wa.fr
www.facebook.com/3WAcademy
#3WAcademy
3w Academy
HTML
HyperText Markup Language
Les balises - syntaxe
- HTML est un langage de balises
- Chaque balise a un nom et est entourée de < et >
- Il faut une balise ouvrante et fermante
<balise>
Mon contenu
</balise>
<p>
Mon premier paragraphe
</p>
Les balises - attributs
- Un attribut est un complément d’information
- On ajoute le nom de l’attribut et sa valeur
entourée de double quote. Ex : <html lang="fr">
- Toutes les balises peuvent avoir des attributs.
Mais une seule fois le même attribut.
Sémantique
Chaque balise a un sens/rôle unique.
Les titre : <h1>, <h2>, <h3>....<h6>
Le texte : <p>
Mettre en avant : <strong>
Les liens : <a>
Du son : <audio>
Des vidéos : <video>
Une image : <img>
autres : <div>, <span>
Il est possible d'imbriquer des balises
<p>
Mon texte ayant un <a href="http://monsite.ca"> lien </a> vers mon site super cool
</p>
Cas pratique
- Créer un nouveau fichier “page.html”
- A l’aide d’un éditeur, ouvrir le contenu du fichier
- Écrire votre premier paragraphe HTML
- Vérifier l’affichage dans votre navigateur
Structure de base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- votre contenu HTML -->
</body>
</html>
Lien de page en page
- La balise <a> permet de faire un lien vers
une autre page. Pour cela, il faut remplir
l’attribut href, en lui donnant le nom de la page
à atteindre.
<a href="page2.html"> page2 </a>
Meetup html

More Related Content

Viewers also liked

Bac pro commerce
Bac pro commerceBac pro commerce
Bac pro commerce0596957s
 
Salvador soto cerros
Salvador soto cerrosSalvador soto cerros
Salvador soto cerrosuag
 
Citations de spiritualite (10)
Citations de spiritualite (10)Citations de spiritualite (10)
Citations de spiritualite (10)alboflede
 
Festival de la Publicité 2007
Festival de la Publicité 2007Festival de la Publicité 2007
Festival de la Publicité 2007Frederic CAVAZZA
 
Herramientas
HerramientasHerramientas
Herramientasandeson
 
El Combo Triple A llega a Tu Barrio - EMSERFUSA
El Combo Triple A llega a Tu Barrio - EMSERFUSAEl Combo Triple A llega a Tu Barrio - EMSERFUSA
El Combo Triple A llega a Tu Barrio - EMSERFUSATransparenciaporColombia
 
Deelpresentatie pop 6 - FR
Deelpresentatie pop  6 - FRDeelpresentatie pop  6 - FR
Deelpresentatie pop 6 - FRmagazinemediaBE
 
Benoit XVI : coups de coeur (1)
Benoit XVI : coups de coeur (1)Benoit XVI : coups de coeur (1)
Benoit XVI : coups de coeur (1)alboflede
 
Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)
Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)
Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)Camilla Burg
 
Content Delivery Networks (CDN)
Content Delivery Networks (CDN)Content Delivery Networks (CDN)
Content Delivery Networks (CDN)Antoine Benkemoun
 
Conclusiones del grupo en mooc [autoguardado]
Conclusiones del grupo en mooc [autoguardado]Conclusiones del grupo en mooc [autoguardado]
Conclusiones del grupo en mooc [autoguardado]Hilda Jara León
 
Presentacinmodeloproyectos 111109100919-phpapp01
Presentacinmodeloproyectos 111109100919-phpapp01Presentacinmodeloproyectos 111109100919-phpapp01
Presentacinmodeloproyectos 111109100919-phpapp01javiher82
 
La Grande Guerre: le rôle des colonies
La Grande Guerre: le rôle des coloniesLa Grande Guerre: le rôle des colonies
La Grande Guerre: le rôle des coloniesComune di San Prospero
 
Etude big data axys consultants
Etude big data axys consultantsEtude big data axys consultants
Etude big data axys consultantsOpinionWay
 
La plateforme IWA : retour d'expérience
La plateforme IWA : retour d'expérienceLa plateforme IWA : retour d'expérience
La plateforme IWA : retour d'expérienceXWiki
 

Viewers also liked (20)

Catalogo Amway Mayo2010
Catalogo Amway Mayo2010Catalogo Amway Mayo2010
Catalogo Amway Mayo2010
 
Bac pro commerce
Bac pro commerceBac pro commerce
Bac pro commerce
 
Salvador soto cerros
Salvador soto cerrosSalvador soto cerros
Salvador soto cerros
 
Citations de spiritualite (10)
Citations de spiritualite (10)Citations de spiritualite (10)
Citations de spiritualite (10)
 
Insolite1
Insolite1Insolite1
Insolite1
 
Festival de la Publicité 2007
Festival de la Publicité 2007Festival de la Publicité 2007
Festival de la Publicité 2007
 
Herramientas
HerramientasHerramientas
Herramientas
 
El Combo Triple A llega a Tu Barrio - EMSERFUSA
El Combo Triple A llega a Tu Barrio - EMSERFUSAEl Combo Triple A llega a Tu Barrio - EMSERFUSA
El Combo Triple A llega a Tu Barrio - EMSERFUSA
 
Código Antifraude ISA S.A. E.S.P
Código Antifraude ISA S.A. E.S.PCódigo Antifraude ISA S.A. E.S.P
Código Antifraude ISA S.A. E.S.P
 
Deelpresentatie pop 6 - FR
Deelpresentatie pop  6 - FRDeelpresentatie pop  6 - FR
Deelpresentatie pop 6 - FR
 
El aliento de vida
El aliento de vidaEl aliento de vida
El aliento de vida
 
Actividad 2
Actividad 2Actividad 2
Actividad 2
 
Benoit XVI : coups de coeur (1)
Benoit XVI : coups de coeur (1)Benoit XVI : coups de coeur (1)
Benoit XVI : coups de coeur (1)
 
Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)
Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)
Comment utiliser le reseau WiserEarth - WiserTuesdays@laRuche (21/9/10)
 
Content Delivery Networks (CDN)
Content Delivery Networks (CDN)Content Delivery Networks (CDN)
Content Delivery Networks (CDN)
 
Conclusiones del grupo en mooc [autoguardado]
Conclusiones del grupo en mooc [autoguardado]Conclusiones del grupo en mooc [autoguardado]
Conclusiones del grupo en mooc [autoguardado]
 
Presentacinmodeloproyectos 111109100919-phpapp01
Presentacinmodeloproyectos 111109100919-phpapp01Presentacinmodeloproyectos 111109100919-phpapp01
Presentacinmodeloproyectos 111109100919-phpapp01
 
La Grande Guerre: le rôle des colonies
La Grande Guerre: le rôle des coloniesLa Grande Guerre: le rôle des colonies
La Grande Guerre: le rôle des colonies
 
Etude big data axys consultants
Etude big data axys consultantsEtude big data axys consultants
Etude big data axys consultants
 
La plateforme IWA : retour d'expérience
La plateforme IWA : retour d'expérienceLa plateforme IWA : retour d'expérience
La plateforme IWA : retour d'expérience
 

Similar to Meetup html

Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du WebPatrick Vincent
 
Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...
Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...
Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...Laurent Mottet
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
Seo les bases module 2
Seo les bases module 2Seo les bases module 2
Seo les bases module 2Nicolas BYKOFF
 

Similar to Meetup html (6)

Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
cours Php
cours Phpcours Php
cours Php
 
Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...
Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...
Formation Référencement : Les balises nécessaires pour l'indexation d'une pag...
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Seo les bases module 2
Seo les bases module 2Seo les bases module 2
Seo les bases module 2
 

Meetup html

  • 1. Créer son premier site avec HTML Formation par Ludovic Verrecchia, intervenant à 3wAcademy
  • 2. Notre école Plus de 400 étudiants 11 salles dans le monde Plus de 2 ans d'existence
  • 6.
  • 7.
  • 9. Les balises - syntaxe - HTML est un langage de balises - Chaque balise a un nom et est entourée de < et > - Il faut une balise ouvrante et fermante <balise> Mon contenu </balise> <p> Mon premier paragraphe </p>
  • 10. Les balises - attributs - Un attribut est un complément d’information - On ajoute le nom de l’attribut et sa valeur entourée de double quote. Ex : <html lang="fr"> - Toutes les balises peuvent avoir des attributs. Mais une seule fois le même attribut.
  • 11. Sémantique Chaque balise a un sens/rôle unique. Les titre : <h1>, <h2>, <h3>....<h6> Le texte : <p> Mettre en avant : <strong> Les liens : <a> Du son : <audio> Des vidéos : <video> Une image : <img> autres : <div>, <span> Il est possible d'imbriquer des balises <p> Mon texte ayant un <a href="http://monsite.ca"> lien </a> vers mon site super cool </p>
  • 12. Cas pratique - Créer un nouveau fichier “page.html” - A l’aide d’un éditeur, ouvrir le contenu du fichier - Écrire votre premier paragraphe HTML - Vérifier l’affichage dans votre navigateur
  • 13. Structure de base <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> <!-- votre contenu HTML --> </body> </html>
  • 14. Lien de page en page - La balise <a> permet de faire un lien vers une autre page. Pour cela, il faut remplir l’attribut href, en lui donnant le nom de la page à atteindre. <a href="page2.html"> page2 </a>