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

Seance 1 - Introduction au HTML et CSS

No description
by

Elie Matta

on 16 February 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Seance 1 - Introduction au HTML et CSS

Création Web Qu'est-ce que l'HTML? Les éditeurs Vous devriez savoir -HTML: HyperText Markup Language Qu'est-ce que le CSS? Notepad Qu'est-ce que l'HTML? XHTML? HTLML5?
Qu'est-ce que le CSS? CSS3?
Les balises HTML
Les attributs HTML
Utiliser les éditeurs et navigateurs web Exemple d'une structure d'une page HTML <!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur mon site web</title>
</head>
<body>
<h1>Titre du site web</h1>
<p>Ceci s'agit d'un paragraphe. <br/>
Ceci est une phrase sur une autre ligne.</p>
</body>
</html> XHTML: eXtensible HyperText Markup Language Qu'est-ce que l'XHTML? <!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">
<head>
<title>Bienvenue sur mon site web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Titre du site web</h1>
<p>Ceci s'agit d'un paragraphe. <br/>Ceci est une phrase sur une autre ligne.</p>
</body>
</html> Exemple XHTML Version HTML 5.0 Qu'est-ce que l'HTML5? Exemple HTML5 <!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur mon site web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Titre du site web</h1>
<p>Ceci s'agit d'un paragraphe. <br/>
Ceci est une phrase sur une autre ligne.</p>
</body>
</html> CSS: Cascading Style Sheets Exemple CSS Changement de la police
et couleur du paragraphe p {
color: red;
font-family: verdana;
} Qu'est-ce que le CSS3? <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
color:red;
}
div#div2
{
-moz-transform:rotate(30deg);
}
</style>
</head>
<body>
<h1>Titre du site web</h1>
<div>Ceci est un texte dans une division. </div>
<div id="div2">Ceci est un texte dans une autre division.</div>
</body>
</html> CSS3 est la version la plus récente du CSS.
Contient de nouveaux attributs pour facilement représenter la mise en page du site web Exemple CSS3 Notepad++ >Suivez les instructions du site students.eliematta.com pour installer l'éditeur Notepad++ Les navigateurs Internet Explorer Mozilla Firefox >Suivez les instructions du site students.eliematta.com pour installer le navigateur Mozilla Firefox Les balises (tags) Exemple - Balise par paire <citation>On ne peut désirer ce qu'on ne connaît pas.</citation> Deux types de balises Les balises existant par paire Les balises seuls <img /> Exemple - Balise seul Les attributs Exemple d'attribut avec les balises par paire Exemple d'attribut avec les balises seuls <p title="Un paragraphe">Ceci s'agit d'un paragraphe.</p> <img src="file:///C:/Users/user/Desktop/logo3w.png"/> Attribut Valeur Ouverture de la balise citation Fermeture de la balise citation Notion de base ou <img src="http://www.google.com/images/srpr/logo3w.png"/> Vous devriez savoir fair Vous devriez savoir fair students.eliematta.com <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 1. Le document HTML doit posséder une déclaration du DocType ("XHTML") <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="FR"> </html> 2. Le document HTML doit être entourer
de la balise <html> avec la déclaration
du namespace xmlns 3. Le document HTML est divisé en 2 parties,
l'en-tête <head> et le contenu <body> <head> </head> <body> </body> 4. L’ en-tête est utilisé pour stocker de
l’information à propos du document <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bienvenue sur mon site web</title> 5. La balise <body> est utilisé pour
stocker le contenu du document 6. La balise <title> continue le titre de la
page qui va être afficher dans l'onglet.
Elle est aussi utiliser par les "robots"
pour indexer la page 7. Imbrication de la balise
<title> dans la balise <head> <head> </head> <title>Bienvenu sur mon site web </title> Le chevauchement des
balises n'est pas permis <style type="text/css">
p {
color:red;
font-family: verdana;
}
</style> <!-- Le contenu du site web commence ici --> <h1>Votre nom et prénom</h1> <p>Nom:<br/>
INF:</p> <p><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="Wikipedia image" /></p> 8. Proprietées CSS dans l'en-tête Introduction -Language que l'ordinateur comprend pour créer un site web -Language de balisage -Nous aide à créer un site web -Les documents HTML sont également appelées pages web -Extension .html -Évolution du language HTML, se fonde sur la syntaxe définie par XML. -C'est donc l'HTML version 4.0 avec XML version 1.0 -Changement:
Traite les documents à la syntaxe conforme avec XML. -Le standard recommendé par le World Wide Web Consortium (W3C) depuis Décembre 2012. -Changement: -Déclaration minimaliser du DOCTYPE -Réduire le besoin de plugins externes (comme Flash) -Meilleure gestion des erreurs -Comprend une couche application avec de nombreuses API -Traite les documents à la syntaxe non conforme -Présente une valeur sémantique qui permet à l’ordinateur de mieux comprendre à quoi correspond le contenu des balises -etc. -Gère la structuration et la présentation de la page web séparément du code HTML -Contient les styles qui définissent la façon d'afficher les éléments HTML -Grâce à ce langage, nous allons pouvoir créer rapidement et simplement la mise en page du site -Elles servent de marqueurs pour indiquer quelque chose au navigateur -Une balise commence par < et se termine par > -S'écrivent toujours en minuscule -Les balises sont invisibles pour le visiteur -Les attributs modifient le comportement des balises -Un attribut se compose d’un mot clef (son nom) et d’une valeur -On peut trouver des attributs sur les deux types de balises (par paire ou seules) -S'ecrivent toujours en minuscule
Full transcript