Cours HTML

1
Cours HTML

• Il faut un sous-titre non pas besoin pour ce
  cours

2
Ouvrir KompoZer

• www.telecharger.com , onglet macintosh tu tapes
  KompoZer
• image disque de KompoZer

3
La suite

• 4 menus
• Normal
• HTML tags
• Source
• Preview

• Voici KompoZer

4
Super tableau(cf M.Dupont)
5

• Un en-tête (id)
• Un menu (id)
• Un contenu ( class car on peut en mettre
  plusieurs)
• Un bloc pub

6
Len-tête

• Cest ce quon voit en entrant dans le site, il
  doit être ltH1gtGROSlt/H1gt
• Quand on parle en-tête
• ltHEADgtlt/HEADgt

7

• Les balises ltTitlegt..lt/Title gt on y inscrit le
  titre de la page
• La balise ltMETAgt donne des informations sur la
  page , généralement on a

8

• ltMeta contentent   gt est utile pour les mots
  clefs pour une recherche sur internet sur la page
  Web,
• Dans limage précédente content text/html  sa
  explique le type de document et
   charsetISO-8859-1  définit le type de
  caractères utilisés pour les claviers AZERTY ou
  QWERTY

9
LE CORPS

• il est toujours encadré par les balises
  ltBodygt.lt/Bodygt
• Il exite différents types de styles
• TAILLE
• Gros ltH1gtlt/H1gt
• Moins grosltH2gtlt/H2gt
• Plus petitltH3gtlt/H3gt
• . Jusquà H6

10

• LA POLICE
• Le type est déjà définit dans KompoZer mais vous
  pouvez la changer directement sur le logiciel

11

• A la base on définit le Times New Roman , mais
  vous pouvez choisir votre police sans passer par
  le logiciel juste en tapant
• ltFONT face arial narrow gtlt/FONTgt

12
Les caractères

• Italique ltIgtlt/Igt
• Souligné ltUgt.lt/Ugt
• Gras ltBgt.lt/Bgt
• Ou sinon avec KompoZer grâce à longlet

13
Paragraphe et m style

• Pour insérer un paragraphe
• ltPgtlt/Pgt
• Pour centrer soir vous le faites avec KompoZer
  avec longlet

• On peut aussi décaler les paragraphes ou les
  zones de texte grâce la flèche verte

14

• Soit tu es faignant et tu laisses KompoZer tout
  faire, soit tu utilises les balises html
  suivantes
• ltCENTERgt.lt/CENTERgt
• AH jy pensais pour les retour à la ligne juste
  une baliseltBRgt

15
LISTES

• Liste non numérotée ltULgtlt/ULgt
• Liste numérotée ltOLgtlt/OLgt
• Elément dune listeltLIgt ajoute selon la
  hiérarchie du texte un symbole ou un chiffre

16
Créer des liens Hypertextes

• Cest intéressant de pouvoir ajouter des liens
  externes
• Il existe 3 types de liens
• liens internes au site(chemin relatif)
• lta href lien.html gtlienlt/agt

Le principe est simple lta href URL gtnom du
lienlt/agt
17
Exemple

• apparition

18
Liens Externes

• On se base sur lenvoie dune autre page il faut
  juste taper lurl correspondant
• lt a href http//www. http//www.univ-evry.fr gts
  ite de luniversité devrylt/agt

19
Animation vidéo(liens)
20
Liens hypertextes pour des images

• Cette fois -ci on utiliseltimg src url de
  limage  (widht   height  ..)le nom de
  limagegt

21
Dessiner des Tableaux

• 2 solutions
• Soit on le fait sur kompoZer

Soit on utilise 3 types de balises lt
tablegtlt/tablegt tableau(
open/close) ltTrgtlt/Trgt annone une
ligne gtTdgtlt/Tdgt annonce une colonne
22

• Tableau simpleltTable bordergt
• ltTRgtltTDgtune cellule
• lt/TDgtlt/TRgtlt/Tablegt
• Tableau composé lttable bordergt
• ltTRgtltTDgtligne1lt/TDgtlt/TRgt
• ltTRgtltTDgtligne2lt/TDgtlt/TRgt
• ltTRgtltTDgtcolone1lt/TDgt
• ltTDgtcolone2lt/TDgtlt/TRgtlt/Tablegt

23
Tableau (suite)

• Autre types de tableau si on fait
• lt table bordergt
• lttrgtlttdgtétudiantlt/tdgt
• lttdgtsalleslt/tdgtlt/trgt
• lttrgtlttdgt wight110 height200gtcest un gros
  tableault/tdgtlttdgtlt/tdgtlt/trgt
• lt/tablegt

24
Animation

• .

25
Une liste deffilante

• ltselect name  liste  size 1..n gt
• ltoptiongtligne1lt/optiongt
• ltoptiongtligne2lt/optiongt
• lt/selectgt

26
Je pense que ça suffit

• Vous connaissez les bases pour faire une page web
  en html il est vrai pour y mettre du style soit
  une feuille de style en css, soit un mix de css
  et html
• Généralement NVU ou KompoZer vous fait le css