Code HTML Hypertext Markup Language Hypertexte  lien dans document pointe vers autre document Markup Language  code pour marquer des zones dans un document.

Slides:



Advertisements
Présentations similaires
HTML Abda Anne Plan Présentation Structure Texte Listes Images Liens Tableaux Formulaires.
Advertisements

Création de site internet
Conception de Site Webs dynamiques Cours 6
Conception de Site Webs Interactifs Cours 3
Conception de Sites Web dynamiques
TOUQUET Arnaud ▪ GI05 BLONDEEL Igor ▪ GM05
Gérer un site avec Kompozer
HTML5, CSS3, PHP5, Javascript, AJAX
Chapitre 3 Les Formulaires en PHP
Langage HTML. Structure d'un document HTML Le langage HTML HTML est le langage universel utilisé pour communiquer sur le Web. Linformation sera ainsi.
Formulaire HTML Introduction. Définition de formulaire.
La balise <FORM>:
Le Téléphone Russe Le Téléphone Russe. Le Téléphone Russe Le Téléphone Russe.
Applications Internet – cours 3 La page web
COME Bernard Comeau Commerce électronique Les éléments retrouvés dans une page Web. COME 2001.
Techniques Internet de Base Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA
17 octobre 2012 Grégory Petit
CSS.
1. 2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION.
HTML / CSS Gestion des systèmes d’information Classe terminale
Généralité sur la Mise En Forme
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
Initiation au web dynamique Licence Professionnelle.
Cours n° 1 Le langage HTML Prof. : E. BAKKI
Le langage XHTML 420-S4W-GG Programmation Web Client
Les feuilles de style en HTML. CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.
Internet WEB.
LE HTML ISN Terminale S Un peu d’histoire …
1 F o r m a t i o n A R S World Wide Web (WWW). 2 F o r m a t i o n A R S Contributions m Création: Claude Gross (UREC) m Modifications: Bernard Tuy,
Les guides de formation Conception de pages web. Guide Virtuose - version enseignant2 Guide - Conception de pages web Introduction Introduction, p. 3.
Les réseaux - Internet Historique Réseau local Internet Les protocoles
Cours de programmation web
Before Starting…. Pour les passionnés, le cours de Xhtml en classe peut être complété par les références suivantes : Cours de Xhtml en ligne :
Développement d’Application Web.  L’internet=WWW  Vrai  Faux  C’est quoi Web2.0  Quel intérêt d’un navigateur.
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Formater du texte>Les titres Définir les titres HTML distingue 6 niveaux de titre : Titre N°1 Titre N°2.
Chap 0 : Introduction HTML et CSS
INTERNET Le langage HTML
 Formulaires HTML : traiter les entrées utilisateur
Initiation au JavaScript
IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Les tableaux>Créer des tableaux Intérêt : Les tableaux en HTML peuvent servir à : - présenter/organiser.
1 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Etre présent sur Internet: Conception.
ORGANISATION DE L’ENSEIGNEMENT Informatique et Sciences du Numérique.
HTML Création et mise en page de formulaire Cours 3.
Cour préparé par Melle Zineb SAALAOUI HTML/CSS.
HTML Création et mise en page de formulaire
Conception des pages Web avec
ORGANISATION DE L’ENSEIGNEMENT
HTML Rappels des fondamentaux
D é veloppement de sites web statiques Par DRISS AIT EL HADJ Par DRISS AIT EL HADJ Avril 2012.
Language html Hyper Text Markup Language
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
Dreamweaver Séance 1.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
Bloc 1 - UE 5 - Technologies de l’information et de la communication TIC Bachelier en immobilier T. SOUMAGNE.
Dreamweaver MX.
Guillaume MICHAUD – Yvan LECOMTE
DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.
Dreamweaver le retour Avec Les Formulaires Les Calques
Plan de la présentation Le langage HTML Dreamweaver MX Les premiers outils pour créer une page web :  Propriétés d’une page  Création de cadres  Création.
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
On va découvrir la magie de ....
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
Transcription de la présentation:

Code HTML Hypertext Markup Language Hypertexte  lien dans document pointe vers autre document Markup Language  code pour marquer des zones dans un document Né en 1989 au CERN (GE) basé sur SGML: Standard Generalized Markup Language

Principes du HTML Fonctionne sous la base de la balise (ou tag), Ex:,, Une balise formate le document en entier ou une partie du texte A (pratiquement) chaque balise correspond une balise fermante, ce qui délimite l'effet de la balise Ceci est un paragraphe. Les retours de chariot ou les espaces blancs ne sont pas pris en compte

Principe du HTML (2) Un document html peut être édité dans un simple éditeur de texte, à l'aide d'éditeurs plus ou moins sophistiqués (grand choix sur Internet) généré par un traitement de texte ("Sauver sous…", mais le code n'est pas très bon) Nombreux éditeurs shareware ou freeware

Balises Les balises sont emboîtées Ceci est un paragraphe avec un mot en gras. Balises non sensibles à la casse: =, toléré Une balise peut avoir des attributs Paragraphe centré

Obligatoire dans un document début et fin d'un document début et fin en-tête du document début et fin corps du document

Squelette d'un document HTML Structure d'un document html Mon titre … autres infos … le corps du doc

Dans l'en-tête du document marque le titre du document apparaît dans la barre de titre du navigateur (browser) contient la méta-information contient le code de caractère utilisé par le document.

Couleurs Code RGB = Red Green Blue Signe # 6 chiffres hexas, 2 digits par couleur # = noir (ou utiliser "black") #ffffff = blanc = white #ff0000 = rouge = red #0000ff = bleu = blue Etc.

Corps du document marque le corps du document Attributs – background="" url d'une image – text couleur du texte – link couleur des liens – vlink couleurs des liens visités – alink couleur des liens actifs

Principaux marquages de texte Un paragraphe est marqué par Les différents titres sont marqués par, … (ordre décroissant). ou etc: paramètre align = "left", "right", "center"… insère un simple saut de ligne (pas fermée) permet de faire un pied de page (copyright, adresse webmaster…).

Un fichier HTML Le document a l'extension.html ou.htm Simple texte  facile à modifier La page principale dans un répertoire se nomme index.htm(l), (parfois aussi welcome.htm(l) ou default.htm(l)) C'est cette page qui est affichée par défaut.

Format du texte pour mise en exposant (superscript) pour indices (subscript) pour gras (bold) pour italiques pour souligné (underline) pour teletype (courrier) pour texte plus grand pour texte plus petit et pour barré.

Taille et police pour changer la taille et la police Attibuts – color : pour modifier le style de couleur – size : Différentes tailles de 1 à 7, ou définir relativement à taille par défaut: –1, 0, +1 etc. – face : Définit la police. Plusieurs dans la liste par ordre de préférence. Seuls certaines polices sont reconnues univerelles (Times, Helvetica (Arial), Comic, Verdana, serif, sans-serif, courrier) pour définir taille et police de base dans le

Barre horizontale (pas fermée) – size pour taille (épaisseur) – width taille en pixels ou en % ( width="50%" ) – noshade="noshade" – align = "left", "right"…

Listes Listes à puces – type= "disc", "square","circle" – compact="compact“. Listes numérotées – type= "1", "A", "a", "i", "I" – start ="3" (attention: tjs valeur num.: ça correspond à 3, C, c, iii ou III). Eléments de liste

Emboîtement de listes Plusieurs niveaux emboîtables, types de liste également (indentation des niveaux juste pour clarté visuelle, pas obligatoire) Module AB3: Cours JAVA Cours de logique formelle Module AB4: …

Listes de définitions Ouverture d'une liste Terme à définir Définition Site PHP/MySQL Langage de programmation Web pour des sites dynamiques MySQL …

Liens Uniform Resource Locator (URL) (on préfère parfois URI (Uniforme resource identifier). Protocole: ftp:// et mailto: line.com/direction/infos/details.html#bologne line.com/direction/infos/details.html#bologne Forme protocole: (//) location réseau / chemin/ fichier ; paramètres ? requête # fragment

Liens (2) Créer un lien (sur image ou texte) Paramètre href  URL de la page à atteindre Cours informatique

Règles particulières Lien vers une adresse Sinon ftp anonyme si nom machine simple Paramètre target ="_blank"  nouvelle fenêtre navigateur.

Localisation réseau Nom d'hôte Un nom de machine La machine doit être dans les DNS. Une adresse IP (Internet Protocol)  4 nombres de 0 à 255 séparés par des points.

Ports TCP/IP Port TCP/IP  lieu de connection logique parfois associée à un protocole particulier (20 ou 21 = ftp, 80 = http, 23 telnet, …) On peut installer plusieurs serveurs web sur une même machine mais ils écoutent différents ports. On peut attribuer un port à une partie de site  éviter d'avoir long chemin pour accéder. Adresse serveur : port

Chemins relatifs Règles UNIX Nom de fichier seul  le lien est dans le même répertoire../ un répertoire au dessous /  le lien part de la racine du site ou du chemin relatif  définit la base de calcul des chemins relatifs (dans )

Ancre Marquer une section dans un document (dans docs longs, appel de notes vers notes, etc.) Un lien fait ensuite appel à cette ancre (dans le même doc ou dans un autre)  le navigateur affiche le document au bon endroit Paramètre name dans Eventuellement balise unique – – 3.1

Ancre (suite) Lien vers ancre Lien même document vers un autre documenthttp:// On peut combiner ancre et lien dans la même balise 1 … et plus loin Ceci est une note Retour à l'appel

Images Insérer une image – Source de l'image (avec URI) src – Description alternative alt. Peut servir comme indice car affiché si la souris survole l'image – Taille en pixels width et height. Permet d'accélérer l'affichage du texte en cas de connexion lente – Espace autour hspace et vspace (pixels) – Bordure autour border (en pixels) border="0" si image sert de lien – Alignement align = "bottom|middle|top|left|right| absmiddle|baseline|texttop|absbottom"

Tableaux Clé de toute mise en page Élément Légende de tableau Nouvelle ligne de tableau (table row) Nouvelle cellule de tableau (table data) Cellules de titre (table head)

Exemple simple Ventes Mois CH UE Autres Janvier 3,2 4,8 5,4 …

Elément de border  taille de bordure tableau en pixels width  largeur du tableau en pixels ou % align  alignement du tableau cellspacing  espace entre cellules, pixels cellpadding  espace à l'intérieur cellules bgcolor  couleur de fond

Alignement dans cellules Dans  alignement pour toute la ligne Dans  alignement pour une cellule Alignement horizontal align left, center, right, justify align="char" char="."  valeur numérique, alignement sur point Alignement vertical valign top, middle, bottom baseline tous les contenus alignés sur la même ligne de base

Cellules fusionnées Utilisation pour les en-têtes Attribut colspan dans ou  étendue de la colonne (enlever x cellules dans la ligne pour garder même nombre de colonnes dans tout le tableau) Attribut rowspan dans ou  étendue de la ligne (les lignes suivantes doivent avoir x cellules en moins) Il est facile de se perdre pour étendre correctement les données.

Exemples – Les tableaux Faculté des Lettres Cours Enseignant Nom Bureau NTIC Luka Nerima L705B IA Christian Pellegrini U4XX

Formulaires Pour interaction avec l'utilisateur. Programme sur le serveur (ou script JavaScript)  retourne une page de résultats. Common Gateway Interface CGI  programme sur le serveur qui traite des données. Formulaires  forum, écrire mail, CQM, moteur de recherche etc.).

Commencer un formulaire Balise qui peut contenir du texte et/ou les champs action lien vers l'URI du CGI qui traite du formulaire method manière de transmettre l'info get  le contenu des formulaires est ajouté à l'URI spécifié dans action ( chercher.cgi?nom=Toto ) post  le contenu est posté dans le corps de la requête http

Les champs (ou contrôles) A inclure dans Pratiquement tous type="text" type="password" type="file“ type=“button“ Type=“hidden” name=""  nom unique qui sera transmis value=""  valeur par défaut size=""  largeur du champ maxlength=""  longueur maximale de l'input

Checkboxes et radio checked="checked" optionnel plusieurs contrôles avec même nom, possible mais pas même valeur. n'est envoyé au CGI que si sélectionné. plusieurs valeurs nécessaires avec même nom checked="checked" optionnel mais recommandé (1er de la série par défaut).

Boutons Envoi du formulaire name optionnel, envoye le contenu de value Effacement Image équivalent à submit Autres boutons nécessaire de définir action javascript, PHP, ASP, …

Valeurs cachées Valeurs à transmettre que l'utilisateur n'a pas besoin/droit de modifier

Sélection Pour sélectionner valeur (= ComboBox) name="" size="" nombre d'éléments visibles en même temps multiple="multiple" sélection multiple possible. inclut les options possibles value="" valeur à transmettre (si absent, envoie la valeur incluse dans option selected="selected"  valeur par défaut chat chien

Textes longs Textes longs, multilignes name="" nom du champ rows et cols nombre de caractères pour dimension du champ on voit attribut nowrap="nowrap" ou wrap= OFF|VIRTUAL| PHYSICAL mais pas recommandé. A l'intérieur du tag: texte à afficher par défaut Ce texte est affiché dans le formulaire