Téléchargé 46 fois
Téléchargé parVlad Posea
IPW 2eme course - HTML
Le document présente une introduction à la programmation web en XHTML et HTML, abordant la structure d'un document et les balises principales utilisées. Il décrit également les différences entre HTML et XHTML, ainsi que des exemples de mise en page, de formulaires et de gestion des caractères spéciaux. Enfin, il conclut sur l'importance d'utiliser HTML pour présenter le contenu d'une page web.
Contenu connexe
Similaire à IPW 2eme course - HTML
IPW 2eme course - HTML
- 1. Introduction dans laProgrammation Web(X)HTML
- 2. Plan du courseXHTMLet HTML Structure d’un documentLes principales marquages du HTMLTitresParagraphesLinksTableauxFormulairesImages
- 3. HTMLHTML – HyperTextMarkup LanguageLangage de marquages – utilise des balises pour decrire des pages webLa version du HTML utilise maintenant – 4.01 - http://www.w3.org/TR/html401/ - depuis 1999!!HTML 5 – travail en progrèsXHTML - http://www.w3.org/TR/xhtml1/ - mêmes marquages mais utilise des contraintes du XMLXML – extension markup language – langage générique pour structurer d’information dans des fichiers texte
- 4. Qu’est que c’estun tag htmlMots clef entre “<“ et “>”Il ya habituellement une balise de début et une balise de finexemple:<tag>…</tag>Balises vides<tag />AttributsUn attribut est une pair nom=“valeur” Il est dans une balise<tag attribut=“valeur”> … </tag>
- 5. Caractéristiques des tagsLestags doivent être toujours ferme “/>”Tags doivent être écrites en bas de casseLes tags doivent être correctement emboîtés <tag1><tag2></tag2></tag1><tag1><tag2></tag1></tag2>
- 6. HTML and XHTMLLenavigateur fonctionnes sur « meilleur effort » quand il essaye a interpréter un fichier HTML=> un des raisons les mêmes pages sont représentés dans un façon diffèrent sur navigateurs différentsLes navigateurs sont devenu grandes et plus lentes parce que ils doivent représenter tout sortes des documentsXHTML – une syntaxe plus stricte que HTML => plus facile a interpréter par les navigateurs
- 7. Structure d’un documentLastructure logique d’un documentLe titre du documentLes titres des sectionsLe contenuLes paragraphesL’information qui est dans des tableauxLes listes des items (ordonnées ou non ordonnées)Petit exemple du façon dans lequel nous pouvons structurer un document en utilisant Word
- 8. La structure d’undocument XHTML<html> <head> <title>le titre du document</title> </head> <body> <!-- le contenu du document --> </body></html>
- 9. La section «head »Contient information sur le document<title> - le titre du document<link> - le lien vers un resource utilise par la page (<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />)<meta> - information supplémentaire sur la page – mots clef, type du contenu, description – utilise par des navigateurs et robots<script> - des références aux fichiers javascript
- 10. Exemple section “head”<head><title>W3Schools Online Web Tutorials</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="Keywords" content="XML,tutorial,HTML,DHTML,CSS,XSL,XHTML,JavaScript,ASP,ADO,VBScript,DOM, " /> <meta name="Description" content="HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBScript Tutorials References Examples" /> <link rel="stylesheet" type="text/css" href="stdtheme.css" /> </head>
- 11. La section «body »Contient les tags qui sont affiches dans le navigateurLa section « body » doit contenir SEULEMENT du contenuL’information du style doit être mis en documents extérieursNous allons voir les éléments du section « body » et nous allons le tester par construire une page web simple
- 12. HeadingsLes titres dessectionsH1…H6Utilises par des moteurs de recherche pour comprendre la structure des documentsNe doit pas être utilise pour des raisons de style (pour faire le texte plus gros et plus haut)<h1>titre du document</h1><h2> titre de la première section</h2><h3> titre de la première sous-section</h3>
- 13. Contenu et formatage<p>paragraphe</p><br/>- ligne nouveau<em> - texte souligne<strong> - strong text<small> - small text<sub> <sup>
- 14. ListesListes ordonnées <ol>Listesa puces– <ul>Eléments du chaque liste - <li>Exemple:<ul><li>rouge</li><li>vert</li></ul>
- 15. Liens<a href=“url absolueou relative” target=“”>texte ou image</a>« target » représente ou le lien doit être ouvertS’il manque – la même page“_blank” – nouvelle fenêtre<a name=“le nom d’une ancre dans le même document> texte ou image </a><a href=“#nom d’une ancre”>text or image</a>
- 16. Images<img src=“url absolueou relative” alt=“texte alternative texte pour le cas ou l’image ne peut pas être affichée ou compris”/>L’attribut “alt” est obligatoire XHTML! l’attribut « src » peut être un url complet: http://host/path_to_file ou un chemin relative a la page curent.
- 17. TableauxLes tableaux doiventêtre utilise seulement pour présenter d’information tabulaireIls ne doivent pas être utilise pour faire le design de la page<table><tr> <!--table row) --><td > table cell</td></tr></table>
- 18. TablescolspanIl est utilisépour avoir une cellule qui s'étend sur plusieurs colonnesAttribut de l’element tdrowspanutilisé pour avoir une durée de cellule sur plusieurs lignesAttribut de l’element tdBorder Si la table a une bordure ou nonAttributs de la table de l'élément
- 19. Tables example<table border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table><tableborder="1"> <tr> <td colspan="2"> </td><!-- only 3 cells because 1 spans on 2 columns--> <td> </td> <td> </td> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <!-- only 3 cells because 1 above spans on 2 rows --> <td> </td> <td> </td> <td> </td> </tr> </table>
- 20. Formulaires (form)Nécessaire pourcollecter et envoyer data vers le serveur <form action=“script du serveur qui va utiliser le data” method=“la methode HTTP utilise – GET ou POST”>Un formulaire contient plusieurs types de « input »
- 21. Form InputsText input<input type=“text” name=“” />Checkbox <input type=“checkbox” name=“” value=“”/>Radio <input type=“radio” name=“” value=“”/>Text area <textarea name=“”></textarea>Submit <input type=“submit” value=“name on the button”/>
- 22. Form example<form method="post"action="script.php"> Username: <input type="text" name="username" /><br /> Password:<input type="password" name="password" /><br /> Country: <select name="country"> <option value="eng">England</option> <option value="fra">France</option> <option value="rou" selected="selected">Romania</option> </select> <br /> Address: <textarea name="address"></textarea><br /> Type of account: <ul><li>Normal <input type="radio" name="account" value="normal" /></li> <li>Special <input type="radio" name="account" value="special" /></li> </ul> Do you want to subscribe to our newsletter <input type="checkbox" name="subscription"/><br /> <input type="submit" value="Register" /> </form>
- 23. HTML Special CharactersCertainscaractères spéciaux <,>,' ', & doivent être représentés de manière différente en HTMLIl ne devrait y avoir une confusion entre le contenu de la page et la syntaxeLes caractères spéciaux sont représentées comme: &code;« code » est généralement une séquence de 3-4 lettres qui représente le caractère
- 24. HTML Special Characters&- &‘ ‘ (space) - “ - "< - <> - >Others:http://www.w3schools.com/tags/ref_entities.asphttp://www.w3schools.com/tags/ref_symbols.asp
- 25. ConclusionsDans ce course– seulement les tags les plus importantes; vous allez découvrir plus dans votre travailHTML doit être utilise pour présenter le contenu d’une page web