Attributs
Une balise utilisée sans attributs produira un fonctionnement standard. Par exemple, le paragraphe précédent aura la forme standard (police de caractères, couleur, etc.) associée à la balise <p> employée ici. Si nous souhaitons avoir un paragraphe de couleur rouge (au lieu du noir standard), nous devons l’indiquer dans les attributs de la balise <p> :
Un paragraphe de couleur rouge <p style= »color:red »>Un paragraphe de couleur rouge</p>
Chaque balise a ses attributs propres, mais le plupart des balises possèdent les deux attributs style et class qui sont très utilisés pour définir des styles CSS (voir le prochain chapitre).
Développement Web pour mobiles Les bases du HTML par Eric Sarrion (Site Developpez.com)
Nous avons ici utilisé l’attribut style, dont la valeur est « color:red ». La forme générale d’écriture d’un attribut est nom= »valeur ». Des espaces peuvent figurer de part et d’autre du signe =. La valeur de l’attribut est généralement entourée de ‘ ou » (simple guillemet ou double guillemet). Ceux-ci peuvent être omis dans le cas où la valeur de l’attribut ne comporte pas d’espace. Dans ce cas, le prochain espace ou le </p> indiquant la fin de la balise, sert au navigateur à connaître la valeur de l’attribut.
Dans le cas précédent, on aurait donc aussi pu écrire :
Pas de guillemets pour les valeurs d’attributs <p style=color:red>Un paragraphe de couleur rouge</p>
Alors que ceci aurait été mal interprété :
Un espace dans la valeur d’un attribut (sans guillemets) <p style=color: red>Un paragraphe de couleur rouge</p>
Dans ce cas, l’attribut style aurait la valeur color:, tandis que le mot red serait interprété comme le nom d’un nouvel attribut (qui n’existe évidemment pas !). Le paragraphe dans ce cas restera en couleur standard, c’est-à-dire noir.
Pour inclure un espace dans la valeur d’un attribut, il suffit de l’entourer de guillemets :
Un espace dans la valeur d’un attribut (avec guillemets) <p style= »color: red »>Un paragraphe de couleur rouge</p>
Dans le cas où plusieurs attributs sont utilisés dans une balise, chaque couple nom= »valeur » est séparé du suivant par au moins un espace, voire un retour à la ligne. L’ordre dans lequel les attributs sont écrits n’a pas d’importance dans le résultat qui sera affiché.
Forme générale d’une page HTML
Une page HTML doit suivre quelques règles précises pour être correctement interprétée par le navigateur de l’utilisateur (dans notre cas le navigateur Safari de l’iPhone ou le navigateur Chrome d’un mobile Android).
Format standard d’une page HTML (fichier index.html) <html> <head></head> <body> Voici une application pour iPhone ! </body> </html>
La page HTML indiquée ici correspond à un fichier texte dont le nom est par exemple index.html. L’extension du fichier permet de connaître le type de son contenu, ici du HTML !
Cette page HTML commence par la balise <html>, et se termine naturellement par cette même balise (</html>). Deux nouvelles balises sont introduites ici : <head> et <body>.
• La balise <head> correspond à la partie déclarative de la page : quels styles seront utilisés ? Quels fichiers de styles sont à inclure ? Quelle sera la taille maximum de l’écran ? Quel titre aura la page ? etc. • La balise <body> correspond à ce qui sera affiché à l’utilisateur : le texte, les images, les listes, etc.
Développement Web pour mobiles Les bases du HTML par Eric Sarrion (Site Developpez.com)
– 6 Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d’auteurs. Copyright © 2010 – Eric Sarrion. Aucune reproduction, même partielle, ne peut être faite de ce site et de l’ensemble de son contenu : textes, documents, images, etc sans l’autorisation expresse de l’auteur. Sinon vous encourez selon la loi jusqu’à 3 ans de prison et jusqu’à 300 000 E de dommages et intérêts. http://e-sarrion.developpez.com/cours/dev-web-mobile/bases-html/
Visualisation d’une page HTML
La page HTML écrite précédemment peut être visualisée dans n’importe quel navigateur actuel : Internet Explorer, Firefox, Google Chrome, ou encore Safari.
Si vous souhaitez visualiser cette page depuis votre ordinateur personnel (PC, Mac…), il suffit de faire glisser le fichier dans votre navigateur. Pour l’afficher sur votre iPhone / Android, il faut d’abord installer un serveur web sur votre ordinateur personnel, par exemple un serveur PHP (ou tout autre serveur). Dans cet ouvrage nous avons utilisé deux types de serveurs :
• AppServ sous Windows permettant d’afficher des pages écrites en PHP (et bien sûr aussi HTML) ; • MAMP sous Mac permettant d’afficher des pages écrites en PHP (et bien sûr aussi HTML) ; • Ruby on Rails (Windows ou Mac) permettant d’afficher des pages écrites en Ruby (et également en HTML).
Des serveurs Java, Microsoft .Net, etc., fonctionneraient de manière similaire.
Télécharger le cours complet
