CRÉE TA PAGE WEB POUR IPHONE!
Programme du matin QR Code Définition Création de votre T-Shirt avec QR Code Pause «Application» pour iphone Base du HTML Création de votre CV
QR CODE?
QR CODE? Le QR Code est une sorte de code barre en 2D. Le "QR" signifie Quick Reponse car le contenu que comporte ce carré noir et blanc peut être décodé rapidement. Contient de l information Adresse web Information de contacts
QR CODE? Beaucoup d'informations: QR Code : 7 089 caractères Code barres normal : 10 à 13 caractères Exemples :
LES BASES DU HTML
Au programme Webapp sur Iphone Qu'est-ce que le HTML? Les outils nécessaires Contenu d un document HTML Composition des éléments Quelques règles Structure d un fichier html Mise en forme
Développement sur Iphone? Les développements iphone peuvent être réalisés sous 2 formes différentes : Une application est un petit logiciel (Objective C) à installer sur son Iphone, après l'avoir téléchargé sur l'appstore. Une webapp est un site Internet (HTML) parfaitement adapté à l'iphone
WebApp Site officiel http://www.apple.com/webapps/ Exemples
Qu'est-ce que le HTML? Langage de programmation web Inventé en 1990 par Tim Berners-Lee Permet de créer des pages web Langage le plus simple pour créer des sites web
Outils nécessaires Un navigateur affichage peut varier Un programme pour éditer du texte enregistrer le fichier en.html
Contenu d un document HTML Du texte Des tags=balises qui indiquent au navigateur Comment structurer le document HTML Sa mise en forme Titre Caractère gras, italique Image Liens...
Contenu d un document HTML Le texte Bonjour Les tags marquent le début et la fin d un élément Comprises entre < > 2 types Balises ouvrantes Balises fermantes <html> </html>
Exemple Le tag <b> sert à mettre des caractères en gras
Eléments vides Un seul tag pour Ouverture Fermeture Ne contient pas d autre élément ni texte Étiquettes isolées Mettre un espace avant le / Exemples <br /> Au lieu de <br></br> <br /> : retour à la ligne <hr /> : ligne horizontale
Quelques règles usuelles Ecrire les balises en minuscules Toujours mettre les balises de fin pour les éléments non-vides <p>premier paragraphe<p>deuxième paragraphe DECONSEILLE: balises non fermées <p>premier paragraphe</p><p>deuxième paragraphe</p> CONSEILLE: balises ouvertes et fermées
Structure d un fichier html Langage <html> En-tête <head> Corps <body> Utiliser des sauts de ligne et aligner le code
En-tête <head> Informations qui concernent la page Exemple Titre de la page : <title>
En-tête <head> <META> Description de la page (description) Liste de mots clés (keywords)
Exemple <META> INFORMATIQUE DE GESTION
Corps <body> Informations qui constituent la page Contenu à faire apparaître dans la page
Tables Elles permettent d afficher des données sous forme de tableau
Eléments Table <table></table> Lignes <tr></tr> Colonnes dans la ligne <td></td>
Syntaxe Table, Lignes, Colonnes <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table>
Exemple Une table peut avoir autant de lignes et de colonnes qu on le souhaite
Attributs Information supplémentaire en lien à un tag Par exemple la couleur de fond de la page Toujours dans la balise ouvrante Suivi par un signe égal Valeur de l attribut entre guillemet Un attribut très souvent utilisé permet d identifier un tag <a id="liengoogle" href="http://www.google.ch">lien</a>
Attributs Existe beaucoup d attributs différents Exemple : bgcolor, text
Liens Le tag <a> Attribut href Indique où conduit le lien Adresse URL, nom de fichier Attribut target _blank Exemple : <a href="http://www.hevs.ch" target="_blank">lien</a>
Listes Pour faire une liste à puces, on utilise les tags <ul></ul> début et fin de la liste <li>article 1</li> élément contenu dans la liste
http://webapp-net.com/ WEBAPP CV
Les conteneurs Il existe des tags conteneurs permettant de regrouper d autres tags <div> <a href="http://www.google.ch">lien</a> <br /> texte supplémentaire <img src="logo.gif" /> </div>
<html> <head> <title>my WebApp</title> <link rel="stylesheet" href="webapp/design/render.css" /> <script type="text/javascript" src="webapp/action/logic.js"></script> </div> </div> </body> </html> INFORMATIQUE DE GESTION </head> <body> <div id="webapp"> <div id="iheader"> <a href="#" id="wabackbutton">back</a> <span id="waheadtitle">webapp Demo</span> </div> <div id="igroup"> <div class="ilayer" id="wahome" title="home"> <div class="iblock"> <h1>layer 1</h1> <p>this is the first layer. <a href="#_next">tap here</a> to slide to the next layer. A back button will then appear in the header.</p> </div> </div> <div class="ilayer" id="wanext" title="next Layer"> <div class="iblock"> <h1>layer 2</h1> <p>this is the second layer. <a href="#_home">tap here</a> to go back to the previous layer or press the top back button.</p> </div> </div>