Introduction au HTML Qu’est ce que le HTML ? Html : HyperText Markup Language : langage de mise en forme de documents hypertextes Système Hypertexte : Réseau constitué par un ensemble de documents informatiques liés entre eux. Hyperlien : Référence dans un système hypertexte permettant de passer automatiquement d'un document consulté à un document lié.
Introduction au HTML Langage structuré à l’aide de balises <balise propriétés de la balise>Texte ou code … </balise> Quelques balises courantes : <H1> à <H6> Titres par taille décroissante,</H1> … </H6> <BR> Sauter une ligne <P> Pour un nouveau paragraphe <B> Pour mettre en gras <UL>+<LI> Liste <a href…> lien hypertexte … </a>
Introduction au HTML Encapsulation des balises => Structure arborescente <balise1> <balise2> <balise3> </balise3> <balise5> </balise5> </balise2> <balise4> </balise4> </balise1>
Introduction au HTML Structure d’un document HTML <HTML> <HEAD> <TITLE>Titre du document (affiché dans la barre de titre du navigateur)</TITLE> </HEAD> <BODY> (contenu du document) </BODY> </HTML>
Exemple d’une page web Ecriture d’une d’une page Web Corps du document
Ecriture d’une page web Rendu de la page Web
Dreamweaver MX Dreamweaver, c’est quoi ? Dreamweaver est un logiciel « What you See is What You Get » permettant de créer visuellement des sites web en se passant de l’écriture du code qui est une étape de la conception d’un site qui peut se révéler fastidieuse. Avantages: Plus accessible aux non initiés Permet de créer simplement des pages complexes Possibilité de contrôler le code.
Espace de travail DreamWeaver MX
Dreamweaver MX Panneau Barre d’insertion :: Objets Communs Image Hyperlien Tableau Ancre nommée Commentaire Lien de messagerie Date
Dreamweaver MX L’inspecteur de propriétés couleur de la police alignement du texte appliquer un format changement de police créer un lien indentation du texte
Gestion des styles et des comportements Dreamweaver MX bibliothèques de code Panneaux à droite Gestion des styles et des comportements gestion des pages gestion des ressources du site utilisation de données dynamiques
La création d’un site Création d’un nouveau site Création d’un projet facilement déplaçable. Création de liens relatifs # absolus Dans la barre des menus, aller sur Site Nouveau site……
La création d’un site
La création d’un site
La création d’un site
La création d’un site
La création d’un site
La création d’un site
La création d’un site Apparition de l’arborescence de notre site dans le panneau fichiers
La création d’un site Mode d’affichage - Code
La création d’un site Mode d’affichage - Fractionner
La création d’un site Mode d’affichage - Création
Formatage de texte Insertion des textes Dans l’espace de travail, vous pouvez insérer des textes comme dans tout éditeur de texte (Microsoft Word, ou le bloc notes).
Formatage de texte Pour formatage de texte vous avez trois choix possibles : Menu Texte Panneau propriétés Sélection du texte + clic droit souris
Formatage de texte
Formatage de texte
Formatage de texte
Formatage de texte Création de listes
Formatage de texte Modification du fond Menu modifier Propriétés de la page Modifier la couleur du fond Ou mettre une image en fond
Formatage de texte
Formatage de texte
Les cadres 1/2 Les différents types de cadres Chaque cadre est un fichier HTML Imbrication possible De moins en moins utilisés
Les cadres 2/2 Un fichier HTML qui décrit l’emplacement des cadres Autant de fichiers HTML que de cadres Exemple : Dans ce cas, il y a 4 fichiers et 3 cadres Index.htm
Les tableaux 1/2 2 modes de création Tableau de mise en forme Tableau
Les tableaux 2/2 Les tableaux peuvent être aussi imbriqués.
Les images 1/2 Image Espace réservé pour une image Image survolée
Les images 2/2
Les autres média Le flash Le shockwave (Director, …) Applet JAVA La balise embed Import de tout type de media Sons, videos, … dépendant du poste client