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.

Slides:



Advertisements
Présentations similaires
Portail Sdin Méthodes pour la contribution du portail SDIN Mars 2013.
Advertisements

HTML Abda Anne Plan Présentation Structure Texte Listes Images Liens Tableaux Formulaires.
Création de site internet
DTD Sylvain Salvati
Gérer un site avec Kompozer
Internet : serveurs Web
HTML5, CSS3, PHP5, Javascript, AJAX
1 HTML merci à Emmanuel Nauer HTML : Exemple à suivre Exemple de fichier HTML Exemple de fichier HTML Ceci est un exemple de fichier HTML Un.
Langage HTML. Structure d'un document HTML Le langage HTML HTML est le langage universel utilisé pour communiquer sur le Web. Linformation sera ainsi.
Page 1 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés Conception de sites Web Préparé
Applications Internet – cours 3 La page web
COME Bernard Comeau Commerce électronique Les éléments retrouvés dans une page Web. COME 2001.
Prologue : les premiers préparatifs Première étape : Ouvrir le logiciel de création de pages au format HTML (pages Web) Deuxième étape : enregistrer la.
Techniques Internet de Base
17 octobre 2012 Grégory Petit
CSS.
Syntaxe de la balise HTML
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
Initiation au web dynamique Licence Professionnelle.
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
31 octobre 2012 Grégory Petit
Insertion d'Objets Multimédias
II. Pages web : approfondissement 1. Liens et images.
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.
Produire, traiter et exploiter des documents numériques Documents
LANGAGE HTML Le HTML (Hyper Text Markup Langage) est un langage universel utilisé sur le World Wide Web. Le HTML permet de : * Publier des documents sur.
Introduction aux langages Html et CSS
LE HTML ISN Terminale S Un peu d’histoire …
Les guides de formation Conception de pages web. Guide Virtuose - version enseignant2 Guide - Conception de pages web Introduction Introduction, p. 3.
Comment utiliser FrontPage?
Template joomla Leblanc 2011.
Les réseaux - Internet Historique Réseau local Internet Les protocoles
Internet : serveurs Web  Clients et serveurs : le navigateur  Sites Web et urls  Fichier source d’une page  Langage HTML 1.
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 :
Code HTML Hypertext Markup Language Hypertexte  lien dans document pointe vers autre document Markup Language  code pour marquer des zones dans un document.
Cours n° 3 Le langage HTML Prof. : E. BAKKI
Internet, le Web etc… (II) Benjamin I. Levine Novembre 2002.
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
SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.
1.Conception graphique du site 'Algoma' par la technique des tableaux Réalisez la page d'accueil du site suivant le modèle et les images ressources fournis.
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.
INTERNET Le langage HTML
HTML Cours 1.
ORGANISATION DE L’ENSEIGNEMENT Informatique et Sciences du Numérique.
Cour préparé par Melle Zineb SAALAOUI HTML/CSS.
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 II- Listes. Les Listes Les listes numérotées.
Dreamweaver Séance 1.
SI28 Dreamweaver- Séance 1
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Présentation de Dreamveawer
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
Présentation Dreamweaver 8 (1) Nina BOUAZIZ et Matthieu DI RUSSO SI28.
DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.
SI28 Malépart Céline Jérémy Palmier
INF2005– Programmation web– A. Obaid Utilisation avancée des tableaux.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.
Introduction au HTML Qu’est ce que le HTML ?
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.
INITIATION A LA CREATION D’UNE PAGE WEB C-X. PROSPERINI A : COMMUNICATION ET SYNDICATS Afrique Francophone 20/04/2010.
Transcription de la présentation:

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 une abréviation (ENTITY) permettant de le coder. Exemple :

Images La balise permet de lier une image numérique à un document en spécifiant sa source via l'attribut "src". Trois formats d'image qui peuvent être mis sur l'internet sont les formats compressés (petite taille): - le format GIF, utilisé pour des images contenant peu de couleur. - le format JPG, utilisé pour les images contenant beaucoup de couleur, une photo par exemple. - le format PNG, concurrent du gif, il peut contenir plus de couleurs que le gif, cependant, il reste encore peu utilisé.

Attributs de la balise peut avoir plusieurs attributs tels que: align, border, alt, width, height, hspace, vspace …etc. ALIGN: prend les valeurs: top, middle, bottom, pour l'alignement vertical et left, right pour l'alignement horizontal ALT: permet d'afficher un texte lorsque le souris passe au-dessus. Width: prend des valeurs en pixels (px) et pourcentage (%) Hspace: l’espace horizontal qui entoure l’image Vspace : l’espace vertical qui entoure l’image Exemple:

Exemples sur Exemple 1 : Explication si l’image n’apparaît pas Exemple 2 : image avec bordure Exemple 3 : image provenant de l’Internet Exemple 4 : l’image joue le rôle de lien

Exemples de la balise Exemple 6 : image avec largeur précise Exemple 7 : image avec largeur et longueur précises Exemple 8 : image avec largeur proportionnelle à celle de l’image Remarque: pour ne pas déformer l’image, utilisez l’un des deux attributs width ou height

Ancre Le lien externe ou ancre permet de créer un lien hypertexte d’un fichier html vers un autre endroit du même fichier, ou vers un fichier situé le même répertoire ou dans un autre répertoire, ou bien, vers une adresse Internet…etc Syntaxe: URL: uniform resource locator Représente le lien hypertexte vers une autre ressource. Exemple: vers google

Attributs de la balise L’ancre (en anglais, Anchor) peut avoir deux types d’attribut: permet de créer un lien (ou pointeur) vers un "objet« (lien externe ou fichier externe) permet de créer un ancrage ayant pour nom "ancrage« (lien vers un ancre dans le fichier même) Pour créer un lien vers un ancrage, on utilise un en mettant le nom de l'ancrage précédé d'un # L’ancrage est créé par: Le lien est créé par: lien vers…

Exemples de liens hypertextes Lien vers un fichier html: Vers la page d’acceuil Lien vers un URL: Visitez la page Schoolnet Lien vers un courrier: Execice résolu sur les liens

Les tables La balise nous permet de tracer une table Les étapes de création d’une table sont les suivantes: 1.Ouvrir la table par 2.Ouvrir la ligne par (Table Row). 3.Ouvrir la cellule par et la fermer par (Table Data) 4.fermer la ligne par 5.fermer la table par Remarque: vous devez procéder de méme pour créer une ligne ou une colonne suplémentaire

Les tables Commandes de base Les commandes de base pour créer des tableaux en HTML sont les suivantes: Cette commande est la commande principale pour ouvrir une zone de tableaux. Commande pour définir une rangée. Il faut utiliser une séquence pour chacune des rangées requises, à l'intérieur de la zone Commande pour spécifier les données pour chaque rangée comme dans l'exemple ci-dessus. Le code pour produire ce tableau s'écrira donc:

Exemple (R1,C1) (R1,C2) (R1,C3) (R2,C1) (R2,C2) (R2,C3)

Attributs de la balise align : indique l'alignement horizontal de la table, ses valeurs sont "left", "center" ou "right". bgcolor: spécifie la couleur de l’arrière plan du tableau border: indique l'épaisseur de la bordure, il prend des valeurs 1, 2 3,…etc. l'épaisseur de la bordure s’exprime en pixels Cellpadding: spécifie l’espace entre les bordures de la cellule et son contenu cellspacing : spécifie l’espace entre les cellules width: indique la largeur d'une table (en anglais, width), il s’exprime en pixels, ou en pourcentage valign : indique l'alignement vertical du contenu dans une cellule. ses valeurs sont "top", "middle" ou "bottom".

Exemple de création d’une table Cellule 1 Cellule 2 Cellule 3 Cellule 4

Exemple de création d’une table Exemple 3 : Cellule 1 Cellule 2 Cellule 3 Cellule 4

Attributs de la balise align : indique l'alignement horizontal de la table, ses valeurs sont "left", "center" ou "right". bgcolor: spécifie la couleur de l’arrière plan de la cellule valign : indique l'alignement vertical du contenu dans une ligne. ses valeurs sont "top", "middle" ou "bottom " et " baseline ".

Practice HTML table tag Add and remove rows and cols here and the see the result: Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2