Cour préparé par Melle Zineb SAALAOUI HTML/CSS.

Slides:



Advertisements
Présentations similaires
Conception de Site Webs Interactifs Cours 3
Advertisements

Conception de Sites Web dynamiques
Internet : serveurs Web
Principes généraux Création de site web Langages HTML XML
Projet Pluritechnique Encadree : Supervision du Portalp:
Enregistrement d’un document
Applications Internet – cours 3 La page web
HTML.
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
HTML-CSS-XHTML.
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
Cours n° 1 Le langage HTML Prof. : E. BAKKI
Les feuilles de style CSS
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.
Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme.
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.
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe 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?
Internet : serveurs Web  Clients et serveurs : le navigateur  Sites Web et urls  Fichier source d’une page  Langage HTML 1.
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.
SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.
INTERNET Le langage HTML
eXtensible Markup Language. Généralités sur le XML.
HTML Cours 1.
HTML Création et mise en page de formulaire Cours 3.
Cours de HTML suite applications
CSS et DREAMWEAVER.
Html et css.
Bienvenue dans le cours sur l’édition de texte sur un site web
Conception des pages Web avec
24 octobre 2012 Grégory Petit
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
Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble.
Mise en forme avancée et Publication. Le CSS Avertissement : vous ne devez pas maitriser le CSS juste savoir qu’il existe et à quoi il sert ! CSS signifie.
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.
Dreamweaver MX.
Présentation Dreamweaver 8 (1) Nina BOUAZIZ et Matthieu DI RUSSO SI28.
Guillaume MICHAUD – Yvan LECOMTE
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
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.
SI28 Malépart Céline Jérémy Palmier
Dreamweaver (2) ● les calques (layers) ● les comportements
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
INF2005– Programmation web– A. Obaid Utilisation avancée des tableaux.
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.
DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.
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
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.
Création d’un site WEB 1 – Un site WEB c’est quoi ? 2 – Questions à se poser avant la construction d’un site WEB 3 – Principes de fonctionnement d’un site.
TP ISN-Terminale S Notion de code HTML. I) Visualisation du code source d’une page web Se mettre sur une page web quelconque : clic droit, Afficher la.
Transcription de la présentation:

Cour préparé par Melle Zineb SAALAOUI HTML/CSS

Le WEB, comment ça marche? Le Web est un système client-serveur dont le fonctionnement s'apparente à des relations client-fournisseur. L'ordinateur personnel, doté de son logiciel de navigation (Internet Explorer, Firefox...), joue le rôle du client. Les ordinateurs distants sur lesquels sont hébergés les sites web sont des serveurs. Clients et serveurs, connectés au réseauInternet, communiquent entre eux. 2013-2014

Le site WEB, comment ça marche? consulter n'importe quel site web Aujourd'hui, tout le monde sait aller sur le Web… mais qui sait vraiment comment le Web fonctionne ? Comment créer des sites web comme celui-ci ? 2013-2014

Le site WEB, comment ça marche? Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher 2013-2014

HTML CSS Il s'agit de langages informatiques qui permettent de créer des sites web. Tous les sites web sont basés sur ces langages, ils sont incontournables et universels aujourd'hui. Ils sont à la base même du Web. Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991… 2013-2014

HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur. - Il ne suffit pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word par exemple), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc. Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va falloir apprendre deux langages 2013-2014

HTML et CSS : deux langages pour créer un site web HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ». CSS (Cascading Style Sheets, aussi appelées Feuilles de style) le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996. 2013-2014

HTML et CSS : deux langages pour créer un site web SANS CSS C EST PLUS JOLIE AVEC LE CSS 2013-2014

HTML les balises, leur fonctionnement : balise = limite d'une boîte où l'on peut mettre des choses <balise> chose </balise> Le langage HTML se décrit comme un ensemble de balises ouvrantes et fermantes qui contiennent le contenu (texte, image, animation) et qui sont interprétées par le navigateur client (Internet Explorer, Netscape, Mozilla, Firefox,…). L’interprétation de certaines balises peut varier d’un navigateur à l’autre. Note importante : seules les fonctionnalités "basiques" sont présentées dans ce cours. Il existe des fonctions plus avancées, qui ne sont hélas pas toujours standardisées et dont l'interprétation peut varier d'un navigateur à l'autre (Internet Explorer et Firefox par exemple). 2013-2014

HTML Voici la liste des balises de bases nécessaires à la construction d’un site Web : <TITLE> : titre d’une page <BR> : passage à la ligne suivante <H1> à <H6> taille du texte <CENTER> : pour entrer le contenu <B> : caractères gras 2013-2014

HTML Voici la liste des balises de bases nécessaires à la construction d’un site Web : <FONT> : police de caractère <FORM> : formulaire <FRAME> : cadre <IMG> : image <TABLE> : tableau 2013-2014

HTML Voici la liste des balises de bases nécessaires à la construction d’un site Web : <TH> : légende de ligne ou de colonne <TR> : ligne d’un tableau <TD> : colonne d’un tableau <P> : séparation des paragraphes <OL> : liste numérotée Remarque : Seules les balises <HTML> et <BODY> sont obligatoire dans une page Web. 2013-2014

la structutre d'une page HTML 2013-2014

HTML 2. La structure de base Le code source d’une page HTML est toujours structuré de cette manière : 2013-2014

HTML 3. Exemples HTML Mettre du texte - Pour remplir une page, il suffit de saisir du texte entre les balises <BODY> et </BODY>. Dans ce texte, le nombre d’espaces entre les mots est ignoré, un ou plusieurs espaces étant équivalent. De même, les retours à la ligne classiques ne sont pas considérés et doivent être marqués à l’aide des balises <BR> et <P>. - La balise <BR> permet d’aller à ligne. - La balise <P> permet également d’aller à la ligne mais avec une interligne. 2013-2014

HTML b. Police, taille de la police, couleur La balise <FONT> sert à définir les caractéristiques des textes dans une page HTML. Ces caractéristiques se définissent à l’aide des attributs de la balise FONT. La police de caractère <font face=" Arial"> Le nom de la police doit être indiqué entre guillemets La taille de la police <font size="-1"> L’attribut « size » prend des valeurs allant de -7 à +7. La couleur de la police <font color="blue"> Cet attribut permet de paramétrer la couleur du texte ou d’une portion de texte. 2013-2014

HTML Alignement du texte <FONT align="center"> L’attribut « align » prend comme valeur : « right », « left », « center ». Les attributs d’une balise peuvent parfaitement se cumuler : <font face=" Arial" size="-1" color="blue"> 2013-2014

HTML c. Mettre en caractère gras, italique Il suffit de mettre le texte entre les balises appropriées. <B>Mise en caractères gras</B> <I>Mise en italique</I> d. Alignement : utilisation des tableaux et listes Les tableaux : 2013-2014

Les listes: 2013-2014

HTML Les attributs des tableaux : Border : taille bordure du tableau Bordercolor : couleur de la bordure Bgcolor : couleur de fon du tableau Cellpadding : espace de remplissage entre les données et le quadrillage Cellspacing : espace entre les cellules du tableau Width : largeur des cellules Les attributs se cumulent : <table border="1" cellpadding="1" cellspacing="0" width="100%" bordercolor="#000000" bgcolor="#0099FF"> Le balises <TR> et <TD> peuvent elle est agrémentée des attributs : Bordercolor et bgcolor 2013-2014

HTML: 2013-2014

HTML 2013-2014

HTML Bgcolor : couleur de fond <body bgcolor="#FFFFFF"> e. Les couleurs et images de fonds Les couleurs Les couleurs sont définies à l’aide de codes que l’on donne à des attributs des balises. On précise pour chaque élément page, tableau, cellule de tableau la couleur qu’elle doit avoir. Il existe un ordonnancement qui fait que la couleur de la balise <TABLE> recouvre la couleur de la balise <BODY> de même que la couleur de la cellule d’un tableau recouvre sa couleur. Les différents attributs pour mettre de la couleur sont : Bgcolor : couleur de fond <body bgcolor="#FFFFFF"> Bordercolor : couleur des bordures <Table bordercolor="#000000" > 2013-2014

HTML Images: <img src= «image1.jpg » > Remarque : la balise <IMG> n’a elle aussi pas de balise fermante. 2013-2014

HTML f. Les liens (internes, externes) : <a href="http://www.google.fr"></a> L’attribut href de la balise <a> permet d’indiquer l’adresse vers laquelle il faut pointer. Pour le cas d’une image qui redirige vert une page <a href="http://mapage.htm"> <img src= «../images/image1.jpg »> </a> Exemple: exemple 2013-2014

CSS: ou feuilles de style CSS : cascading stylesheets mise en page dans l'en­tête : <link href="style.css" type= "text/css" rel="stylesheet" title="blablabla" /> 2013-2014

CSS: structure d’une feuille de style notion de classe Pour appliquer la classe, il suffira ensuite d'ajouter l‘attribut class="nom" dans le code HTML. 2013-2014

CSS: structure d’une feuille de style toujours dans l'en­tête : <style type="text/css"> table.truc{ border-width: 2px; background-color: blue; } </style> ou dans la balise elle même : <h1 style="text-decoration: underline;">bla bla</h1> 2013-2014

CSS: quelques propriétés 2013-2014

CSS: quelques propriétés 2013-2014

CSS: Quelques propriétés 2013-2014

CSS: Quelques propriétés 2013-2014

CSS: Quelques propriétés 2013-2014

CSS: Quelques propriétés 2013-2014

CSS: Autres fonctionnalités 2013-2014

HTML+CSS 2013-2014

CSS 2013-2014