IPW 2eme course - HTML

Introduction dans la Programmation Web (X)HTML

Plan du course XHTML et HTML Structure d’un document Les principales marquages du HTML Titres Paragraphes Links Tableaux Formulaires Images

HTML HTML – HyperText Markup Language Langage de marquages – utilise des balises pour decrire des pages web La version du HTML utilise maintenant – 4.01 - http://www.w3.org/TR/html401/ - depuis 1999!! HTML 5 – travail en progrès XHTML - http://www.w3.org/TR/xhtml1/ - mêmes marquages mais utilise des contraintes du XML XML – extension markup language – langage générique pour structurer d’information dans des fichiers texte

Qu’est que c’est un tag html Mots clef entre “<“ et “>” Il ya habituellement une balise de début et une balise de fin exemple: <tag>…</tag> Balises vides <tag /> Attributs Un attribut est une pair nom=“valeur” Il est dans une balise <tag attribut=“valeur”> … </tag>

Caractéristiques des tags Les tags doivent être toujours ferme “/>” Tags doivent être écrites en bas de casse Les tags doivent être correctement emboîtés <tag1><tag2></tag2></tag1> <tag1><tag2></tag1></tag2>

HTML and XHTML Le navigateur 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érents Les navigateurs sont devenu grandes et plus lentes parce que ils doivent représenter tout sortes des documents XHTML – une syntaxe plus stricte que HTML => plus facile a interpréter par les navigateurs

Structure d’un document La structure logique d’un document Le titre du document Les titres des sections Le contenu Les paragraphes L’information qui est dans des tableaux Les listes des items (ordonnées ou non ordonnées) Petit exemple du façon dans lequel nous pouvons structurer un document en utilisant Word

La structure d’un document XHTML <html> <head> <title>le titre du document</title> </head> <body>  </body> </html>

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

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>

La section « body » Contient les tags qui sont affiches dans le navigateur La section « body » doit contenir SEULEMENT du contenu L’information du style doit être mis en documents extérieurs Nous allons voir les éléments du section « body » et nous allons le tester par construire une page web simple

Headings Les titres des sections H1…H6 Utilises par des moteurs de recherche pour comprendre la structure des documents Ne 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>

Contenu et formatage <p>paragraphe</p> <br/> - ligne nouveau <em> - texte souligne <strong> - strong text <small> - small text <sub> <sup>

Listes Listes ordonnées <ol> Listes a puces– <ul> Eléments du chaque liste - <li> Exemple: <ul> <li>rouge</li> <li>vert</li> </ul>

Liens <a href=“url absolue ou relative” target=“”>texte ou image</a> « target » représente ou le lien doit être ouvert S’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>

Images <img src=“url absolue ou 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.

Tableaux Les tableaux doivent être utilise seulement pour présenter d’information tabulaire Ils ne doivent pas être utilise pour faire le design de la page <table> <tr>  <td > table cell</td> </tr> </table>

Tables colspan Il est utilisé pour avoir une cellule qui s'étend sur plusieurs colonnes Attribut de l’element td rowspan utilisé pour avoir une durée de cellule sur plusieurs lignes Attribut de l’element td Border Si la table a une bordure ou non Attributs de la table de l'élément

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> <table border="1"> <tr> <td colspan="2"> </td>  <td> </td> <td> </td> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr>  <td> </td> <td> </td> <td> </td> </tr> </table>

Formulaires (form) Nécessaire pour collecter 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 »

Form Inputs Text 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”/>

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>

HTML Special Characters Certains caractères spéciaux <,>,' ', & doivent être représentés de manière différente en HTML Il ne devrait y avoir une confusion entre le contenu de la page et la syntaxe Les 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

HTML Special Characters & - & ‘ ‘ (space) -   “ - " < - < > - > Others: http://www.w3schools.com/tags/ref_entities.asp http://www.w3schools.com/tags/ref_symbols.asp

Conclusions Dans ce course – seulement les tags les plus importantes; vous allez découvrir plus dans votre travail HTML doit être utilise pour présenter le contenu d’une page web

IPW 2eme course - HTML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie IPW 2eme course - HTML

Ähnlich wie IPW 2eme course - HTML (20)

Mehr von Vlad Posea

Mehr von Vlad Posea (14)

IPW 2eme course - HTML