• Aucun résultat trouvé

[PDF] Creation de site Web cours pour apprendre le langage HTML | Cours html

N/A
N/A
Protected

Academic year: 2021

Partager "[PDF] Creation de site Web cours pour apprendre le langage HTML | Cours html"

Copied!
31
0
0

Texte intégral

(1)

Formation HTML / CSS

(2)

le HTML

Hyper Text Markup Language

langage descriptif composé de balises

interprété par le navigateur

page HTML = simple fichier texte

(bloc­notes, vim, ...)

(3)

les déclarations

codage des caractères :

<?xml version="1.0" encoding="iso-8859-15" ?>

norme (ici XHTML 1.0 strict) :

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(4)

le validator !!!!

Il faut respecter les règles de syntaxe !

page valide = même sens pour tous les navigateurs

Une page HTML valide est une page qui passe 

le test du validator (http://validator.w3.org)

(5)

le principe des balises

balise = limite d'une boîte où l'on peut mettre des choses

<balise> chose </balise>

à chaque balise ouvrante 

<balise>

 ...

... on associe une balise fermante 

</balise>

balises sans contenu : 

<autrebalise />

<balise attribut1="valeur"

attribut2="valeur">...</balise>

(6)

la strucutre d'une page HTML

<?xml version="1.0" encoding="iso-8859-15" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<!-- l'en-tête -->

</head>

<body>

<!-- le corps -->

</body>

</html>

(7)

l'en­tête

<head> ... </head>

informations qui ne seront pas affichées sur la page HMTL

titre de la page : 

<title>ma page html</title>

informations utilisées par les moteurs de recherche :

<meta name="description"

content="Formation HTML" />

(8)

le corps

<body> ... </body>

(9)

structuration du texte

<p>paragraphe</p>

<hr/> (

trait horizontal)

<h1>important</h1>

...

<h6>moins important</h6>

<div>bloc</div>

(10)

structuration du texte

les listes non ordonnées :

<ul>

<li>amuse</li>

<li>soir</li>

</ul>

les listes ordonnées :

<ol>

<li>pouquoi</li>

<li>banane</li>

</ol>

(11)

structuration du texte

les tables :

<table>

<tr>

<td>1ère ligne, 1ère colonne</td>

<td>1ère ligne, 2ème colonne</td>

</tr>

<tr>

<td>2ème ligne, 1ère colonne</td>

<td>2ème ligne, 2ème colonne</td>

</tr>

(12)

au fil du texte

Il s'agit de balises qui doivent être contenues dans celles de 

structuration.

aller à la ligne : 

<br/>

écrire en italique : 

<i>...</i>

écrire en gras : 

<b>...</b>

délimiter une partie du texte : 

<span>...</span>

(13)

au fil du texte

les liens :

<a href="http://via.ecp.fr">page web</a>

<a href="page2.html">autre page</a>

(14)

au fil du texte

les images :

<img src="ma_photo.jpg" alt="description" />

une image lien :

<a href="http://www.perdu.com">

(15)

<?xml version="1.0" encoding="iso-8859-15" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>titre</title> </head> <body>

<p>Ceci est un paragraphe</p> <hr/>

<h1>bonjour!</h1> <h3>moyenjour.</h3> <h6>mauvaisjour.</h6> <p>je vais aller

<a href="http://www.via.ecp.fr">

rendre visite à via</a>. via c'est bien <img src="smiley.jpg" alt=":)" />.</p> <ul>

<li>un élément</li>

<li>un autre élément</li> </ul> <ol> <li>premier élément</li> <li>deuxième élément</li> </ol> </body> </html>

(16)

<h1>une table un peu plus compliquée...</h1> <table border="1">

<tr>

<td colspan="3">

1ère ligne, 1ère colonne </td>

<td>1ère ligne, 4ème colonne</td> </tr>

<tr>

<td>2ème ligne, 1ère colonne</td> <td>2ème ligne, 2ème colonne</td> <td>2ème ligne, 3ème colonne</td> <td rowspan="2">

2ème ligne, 4ème colonne </td>

</tr> <tr>

<td colspan="2" rowspan="2"> 3ème ligne, 1ère col

</td>

<td>3ème ligne 3ème colonne</td> </tr>

<tr>

<td>4ème ligne, 3ème colonne</td> <td>4ème ligne, 4ème colonne</td> </tr>

(17)

les CSS ou feuilles de style

CSS : cascading stylesheets

mise en page

dans l'en­tête :

<link href=

"

style.css

"

type=

"

text/css

"

rel=

"

stylesheet

"

title=

"

blablabla

"

/>

(18)

structure d'une feuille de style

notion de classe

p.pouet{

font-size: 12px;

background-color: red;

}

Pour appliquer la classe, il suffira ensuite d'ajouter l'attribut 

class="nom"

 dans le code HTML.

exemple : 

<p class="pouet">bla bla bla</p>

classe applicable à tout type de balise : 

.pouet {...}

classe appliqué à toutes les balises d'un type :  

p { ... }

balise.nom{

propriété: valeur;

propriété: vlaeur;

}

(19)

autres manières de spécifier un style

toujours dans l'en­tête :

<style type="text/css">

table.truc{

border-width: 2px;

background-color: blue;

}

</style>

ou dans la balise elle même :

(20)

quelques propriétés

pour le texte:

font-family: Garamond, Times New Roman, serif;

font-size:

taille

;

font-style: normal | italic;

font-weight: normal | bold | bolder | lighter;

color:

couleur

;

text-align: left | center | right | justify;

text-decoration: none | underline;

(21)

quelques propriétés

pour les listes:

list-style-type: upper-alpha | lower-alpha |

upper-roman | lower-roman | decimal | circle |

disc | square;

(22)

quelques propriétés

pour l'arrière plan:

background-color:

couleur

;

background-image: url('image.jpg');

pour les bordures:

border-width:

taille

;

border-color:

couleur

;

border-style: none | solid | dotted | dashed |

double;

ou 

border:

taille couleur

style;

mais aussi 

border-bottom

...

border-top

...

border-left

...

border-right

...

(23)

quelques propriétés

pour les blocs / tables :

width:

taille

;

height:

taille

;

vertical-align: top | middle | bottom;

width

height

top

middle

bottom

bordure

(24)

quelques propriétés

pour les marges :

margin:

taille

ou 

margin-bottom

...

margin-top

...

margin-left

...

margin-right

...

idem avec 

padding

 au lieu de 

margin

affichage

du texte

margin

border

padding

autre

élément

autre

élément

autre

élément

(25)

quelques propriétés

pour le positionnement :

position: static | relative | absolute | fixed;

top:

position

;

left:

position

;

bottom:

position

;

right:

position

;

top

left

bottom

right

bordure de l'élément

(26)

annexe

les couleurs :

#RRVVBB

 en hexadécimal

ou 

#RVB

 en hexadécimal

ou 

rgb(255,0,128)

 en décimal

ou encore 

red

blue

white

green

black

...

les tailles et positions :

en pixels : 

12px

ou en centimetres : 

12cm

ou encore en points : 

12pt

et même en pourcentage de l'élément parent : 

12%

voire parfois par rapport à la taille de la police : 

12em

(27)

<?xml version="1.0" encoding="iso-8859-15" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>titre</title>

<link rel="stylesheet" type="text/css" href="style.css" title="mon style" />

</head> <body>

<p class="moche">Ceci est un paragraphe</p> <hr/> <h1>bonjour!</h1> <h3>moyenjour.</h3> <h6>mau<span class="moche"> vais</span>jour. </h6> <ol class="truc"> <li>premier élément</li> <li>deuxième élément</li> </ol> </body> </html> .moche { color: #ff0; background-color: #123456; font-weight: bold;

border: 4px solid red; } h1 { font-size: 10px; } h3 { font-size: 30px; text-decoration: underline; } ol.truc { list-style-type: lower-roman; }

(28)

les liens utiles

le World Wide Web consortium qui définit les 

normes : http://www.w3.org

et le validator : 

http://validator.w3.org

un très bon site pour apprendre : 

http://www.w3schools.com

et encore mieux :

http://www.via.ecp.fr/formations

(29)
(30)

Le php et les bases de données ?

(31)

adresses

les adresses peuvent être spécifiées de deux manières:

adresse absolue:

http://www.cti.ecp.fr/~goretg6/site/page.html

adresse relative:

 (c'est à dire par rapport à l'emplacement de la page web)

dans le même répertoire: page.html

dans un sous répertoire: rep/page.html

dans le répertoire parent: ../page.html

etc ...

Références

Documents relatifs

Même si Gide a d’abord été envisagé comme un exemple dans le cadre de cette étude de l’aphorisme dans l’œuvre littéraire, il aurait été possible, voire souhaitable, de

In Early Stage I nein was indeed used in the non-anaphoric function, but, contrary to Wode's theory, ALL of the 13 nein constructions referred to non- anaphoric negation. There was

We conclude that future studies employing a life course approach to disentangle causes of social class inequities in musculoskeletal health will have to account for differences

The concept of STITCH (‘search tool for interacting chemicals’) was from the begin- ning to combine sources of protein–chemical interactions from experimental databases,

Cette recherche a pour objet le transport ferroviaire interurbain de passagers aux Etats-Unis dans une double acception : les services ferroviaires classiques d’Amtrak et les

Le candidat emporte ce qui se trouve derrière la porte qu'il aura choisie, mais son choix se fait en plusieurs étapes :.. • Étape A : Le candidat choisit la porte 1, 2

Une bobine de section carrée de 7 cm de côté est constituée de 500 spires et est placée dans le champ magnétique terrestre de telle façon que son axe soit

Une bobine de section carrée de 7 cm de côté est constituée de 500 spires et est placée dans le champ magnétique terrestre de telle façon que son axe soit