Regarder la TV
Un contenu inédit sur Streaming Illimité, inscrivez
vous et consomez sans modération
Streaming Illimité Ouvrir
Cours gratuits » Cours informatique » Cours développement web » Cours HTML
Cours Introduction à HTML
2.5 étoiles sur 5 a partir de 4 votes.
Votez ce document:
☆☆☆☆☆
:
Lien de téléchargement
Louez une fiche de contact
Fiche de contact professionnel
Votre partenaire digital, expert data et
générateur de prospects
mediazur.fr
OUVRIR
Une introduction à
HTML / CGI
Patrick Fuchs
Université Paris 7
Equipe de Bioinformatique Génomique et Moléculaire
Définition du HTML
• HTML = Hyper Text Mark up Language
– langage à balises (« tags »)
– langage qui contient des liens « hyper-text »
• Le HTML habille du texte (~ LATEX)
• Le HTML permet de partager des données situées à des endroits différents
• Ordre de consultation des données laissé à l’utilisateur
• HTML ? langage de programmation
3
PLAN
1. Généralités
2. Les Bases d’HTML
:
2. Les Bases d’HTML
3. Outils HTML avancés
4. HTML dynamique / Interface CGI
2
Serveur/adresse/navigateur
• Serveur (mise à disposition de pages web)
• Navigateur (Netscape, Internet Explorer, Firefox…)
• Accession au serveur par un navigateur via l’URL (Universal Resource Locator) ~
adresse :
protocole://adresse-machine/rep/sous-rep/document – protocole :
• http (Hyper Text Transfert Protocol) = protocole le plus courant = protocole de transfert de
page html
e.g :
• ftp (File Transfert Protocol) = protocole de transfert de fichiers
• etc…
– adresse-machine :
• numéro IP (Internet Protocol) : e.g. 131.246.50.201
• adresse DNS (Domain Name Server) : e.g.
5 Annonces
DiplômesEnvoyer un commentaire Postuler
reconnus
Quelques sites d'intérêt
Unicaf Pourquoi cette annonce ?
• le site de Dave Ragett @ w3c :
• le site d'Eric Larcher :
• le site de Philippe Moreau :
• l'Electronic Text Center de la bibliothèque de l'Université de Virginie :
etc…
7
PLAN
1. Généralités
2. Les Bases d’HTML
:
2. Les Bases d’HTML
3. Outils HTML avancés
4. HTML dynamique / Interface CGI
6
Structure d’une page HTML
• <HTML>…</HTML> : encadre le document
• <HEAD>…</HEAD> : en-tête de la page
• <TITLE>…</TITLE> : donne un titre à la page (moteurs de recherches)
• <BODY>…</BODY> : corps de la page
Rq : fichier HTML = fichier texte
Rq2 : fichier HTML = insensible aux espaces et retours-chariots sauf dans une balise <pre>
9
Styles d’écriture et séparateurs
souligné : <u>…</u>Niveaux de titre :
gras : <b>…</b> niveau 1 :
italique : <i>…</i><h1>…</h1> niveau 2 :
exposant : <sup>…<h2>…</h2>
</sup> …
: <sub>…</sub>niveau6 : <h6>…</h6>
indice
!"#$%&'(
)'*+,,-(
!"#$%&'()'*)$"+*')"*,'-*.,"/*.$'&'*,
-'0/**1(2)!30/14-'5)*/()1*"4'-(",3(
#.-,'*."-'(
!"#$%&
:
Séparateurs : nouveau paragraphe : <p>
retour à la ligne : <br> ligne horizontale : <hr>
Rq : pas de balise fermante pour les séparateurs
11
Structure d’une page HTML (II)
• la première ligne DOCTYPE : précise le type de langage utilisé (HTML, XHTML…)
• balises META : indications (auteur, type MIME…) 10
Listes
d’éléments Liens hyper-
textes
Listes numérotées
:
• Liens externes :
<OL>
<LI>élément 1,– <a href="URL">…</a>
<LI>élément 2,e.g. : <a href="">python</a>
<LI>élément 3. </OL>
• Liens internes :
Listes à puces :
– définition d’une accroche : <a name="accroche">…</a>
<UL>
<LI>élément 1,– lien vers cette accroche : <a href="#accroche">…</a>
<LI>élément 2,
<LI>élément 3.• URL absolues / relatives
</UL>
– absolues : en général liens vers d’autres sites
Rq : possibilité de faire des listes imbriquées – relative : à utiliser au sein du même site
(utile lorsqu’on déplace plusieurs pages relatives les unes par rapport aux autres)
:
13
14
Liens spéciaux
• Lien vers un site FTP :
<a href=";>…</a>
• Lien vers un mail :
<a href="">…</a>
15
Caractères spéciaux Comment générer du
HTML ?
• syntaxe générale : &code; • outils WYSIWYG (what you see is what you get):
e.g : Netscape Composer, Front Page,…Word…
– avantage : visualisation directe
– inconvénients : qualité et maintenance du code
• éditeurs de texte (avec "syntax highlighting")
e.g: nedit, vi, emacs
• l’indentation rend le code HTML plus lisible
Rq : l’utilisation directe des accents peut poser des problèmes sur les navigateurs dans les
pays étrangers
17
18
PLAN
1. Généralités
2. Les Bases d’HTML
3. Outils HTML avancés
– les tableaux
– les cadres
– les feuilles de style en cascade
:
– les formulaires
4. HTML dynamique / Interface CGI
19
Les Tableaux Exemple de
Tableau
• Moyen élégant de présenter des données
• balise : <table>…</table> définit les limites du tableau
– peut contenir les attributs :
• border : largeur en pixel du cadre autour du tableau
• width : largeur en pixel du tableau
• align : pour placer le tableau (center, left, right)
• cellpadding : espace entre le texte et les bords de la cellule (en pixel)
• cellspacing : espace entre les bords de cellules (en pixel)
• etc…
• balise <tr> : définit une nouvelle ligne du tableau
• balise <th> : définit les en-têtes du tableau
• balise <td> : définit les données du tableau
21
Fusion verticale de cellule (attribut rowspan)
Remarques sur les tableaux
• On peut mettre autre chose que du texte dans les cellules d'un tableau :
– image
– liens
– etc…
• les balises <tr>, <th> et <td> admettent l'attribut align
(center, left, right)
• Outil sur le web pour construire des tableaux automatiquement :
25
Les Cadres
:
Les Cadres
• Division de la page HTML en plusieurs zones
• la balise <frameset>…</frameset> : permet de diviser la page en différentes zones
(cadres)
– attributs de la balise <frameset> :
• rows="20%,80%" : définit en 2 zones horizontales de 20 % et 80 % de l'espace
disponible dans le navigateur
• cols="20%,80%" : même chose mais pour 2 zones verticales
Diplômes reconnus
Unicaf
• la balise <frame> : définit vers quelle page HTML chacune des zones pointe
– attributs de la balise <frame> :
• name : définit le nom de la zone correspondante
• scrolling=yes (ou no) : définit si on a des barres de défilement
• src="" : nom du fichier HTML qui sera intégré dans la zone
ATTENTION : Ne pas mettre de balise <body>…</body> dans une page définissant un
cadre !
27
Outils HTML avancés
1. les tableaux
2. les cadres
3. les feuilles de style en cascade
4. les formulaires
:
4. les formulaires
26
Cadre : lien actif dans une autre zone
• utilisation de l'attribut target dans la balise <a>
• Exemple :
<a href="URL" target="autre_zone">…</a>
le lien apparaitra dans la zone préalablement définie comme "autre_zone"
29
Outils HTML avancés
1. les tableaux
2. les cadres
3. les feuilles de style en cascade
4. les formulaires
31
Cadre : lien actif dans une autre zone (exemple)
Les feuilles de style : CSS (II)
• Définir une classe pour un type de balise :
img .maClassImg{
padding:1em;
}
• Définir une zone :
#albumPhoto { background-color:#000000;
}
#albumPhoto .maPhoto{ border: #cccccc 1px solid;
}
Les Formulaires
• Définition : feuille HTML permettant d’envoyer des informations au serveur
:
-> en général ces informations sont traitées sur le serveur par un programme CGI
• la balise <form>…</form> :
– encadre le formulaire
– attribut "method" : indique le moyen de passer les informations au serveur
• GET : passage des données par l’URL
• POST : passage des données par l’entrée standard
– attribut "action" : pointe sur le script CGI du serveur
35
Outils HTML avancés
1. les tableaux
2. les cadres
3. les feuilles de style en cascade
4. les formulaires
34
Contenu d'un formulaire
• saisie de texte :
<input type="text" size=20 maxlength=30 name="..."> • cases à cocher :
<input type="checkbox" name="..." value="toto"> • boutons radio :
<input type="radio" name="..." value="a">
<input type="radio" name="..." value="b"> • champ de saisie :
<textarea name="..." rows=4 cols=20>
</textarea> le champ "name" sera reconnu en tant que tel dans le script cgi
37
PLAN
1. Généralités
2. Les Bases d’HTML
3. Outils HTML avancés
4. HTML dynamique / Interface CGI
:
39
Contenu d'un formulaire (2)
• liste déroulante : nom de la liste envoyé
au script CGI
<select name="...">
<option value="a">option a texte visible dans
<option value="b">option b le navigateur
<option value="c">option c
</select> valeur de l'objet
associée à la liste (envoyée au script
• bouton de soumission : CGI)
<input type="submit" name="..." value="...">
• bouton de reset :
<input type="reset" name="..." value="...">
texte visible
dans le bouton
38
Généralités sur les interfaces CGI
• méthodes GET / POST :
– GET : passe par l'URL (limitée en taille, récupérable par la variable d'environnement
$QUERY_STRING)
– POST : passe par l'entrée standard (méthode plus sûre, pas de limitation de taille, permet
de passer des fichiers)
• Langages des interfaces CGI :
– shells : sh, csh, bash… (peu flexible)
– compilés : C, C++ (rapide, lourd à mettre en œuvre)
– interprétés : python, perl (moins rapides, flexibles, nombreuses bibliothèques)
41
Sortie d'un programme CGI
:
Sortie d'un programme CGI
Le navigateur doit recevoir 2 éléments :
– un en-tête contenant le type de donnée à afficher :
-> le type de données doit être un type MIME valide (Multipurpose Internet Mail Extension) -
> le retour chariot est très important !
Ecole Sup.
Universitaire
Télécom - informatique -Management
Diplômes et Certifications Pro
mit-university.net
OUVRIR
– l'information à afficher en HTMLCes éléments doivent être envoyés à la sortie standard
43
Codage des entrées de l'utilisateur
• Exemple de flux envoyé à un script CGI
:sequence=bonjour+toto&format=FORMAT1&submit=print+all+the+fields+%21 • Codage
utilisé :
– chaque champ est séparé par le signe '&'
– chaque nom de champ ainsi que son contenu séparés par '='
– espaces remplacés par '+'
– caractères spéciaux remplacés par '%' suivi d'un numéro hexadécimal
• Nécessité de décoder lorsqu'on utilise un shell
• Il existe des librairies pour décoder automatiquement (e.g. en python, perl, C…)
42
Exemple d'application CGI
convertisseur de séquence (fasta -> EMBL, GENBANK, GCG…) en utilisant le programme
readseq
:
readseq
rq : service déjà
existant à pasteur, infobiogen… 45
A vous !
49
Considérations techniques
Les interfaces CGI sont gérées par le programme APACHE sur la machine (172.20.24.1)
(visible à l’UFR seulement)
• les scripts CGI doivent :
– être enregistrés dans le répertoire (attention aux droits):
~user/public_html/cgi-bin/ (user est votre nom d’utilisateur)
– être Exécutables
– posséder l’extension .py ou .cgi
• les pages webs doivent être
– enregistrées dans le répertoire : ~user/public_html (user est votre nom d’utilisateur)
– elles seront visibles à l'URL : http://172.20.24.1/~user
• pour le debugging, on peut consulter le fichier log :
/var/log/httpd/error_log
48
Apply Today. No
:
Apply Today. No
Scholarships.
Choose one of our career-focused
courses. Enquire today & get help
with your application.
Articles similaires
Exercice HTML: Exemple de liste de type non ordonnée imbriquée
Comment faire une introduction pour une analyse de texte philosophique ?
Python : introduction au hacking/piratage éthique
Comment faire une étude de document en histoire terminale ES et S ?
Exercice HTML: TP HTML & CSS
Exercices et Examens Merise : introduction aux systèmes de gestion de base de
données relationnelle
Exercice HTML: Menu Verticale en HTML et CSS
Exercice HTML: Formulaire Html avec Fonction Javascript
Exercice HTML: Les Frames
Exercices HTML : Texte - Images - Son
Exercice HTML: Création de Tableau
Exercice HTML: Formulaire d'inscription
Documents similaires
Cours HTML
Support de Cours Formation Langage
Cours HTML Pas à Pas
complet en à HTML Html Cours HTML
:
Cours html
Apprendre l’HTML et Cours Internet Html : les
Télécharger cours html
CSS bases de la
programmation web… Cours html
Cours Html CSS Cours Html complet
Cours HTML complet en Apprendre le CSS avec
Cours Html CSS Cours Html complet
Anglais HTML
Contactez-nous
A propos de nous
On recrute
Rechercher dans le site
Politique de confidentialité
Droit d'auteur/Copyright
Plan du site
:
