Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Cours n° 1 Le langage HTML Prof. : E. BAKKI
وزارة التربية الوطنية والتعليم العالي وتكوين الأطر والبحث العلمي الأكاديمية الجهوية للتربية و التكوين لجهة وادي الذهب وأوسرد ثانوية للا خد يجة المرجعية Lycée Lala Khadija Référentiel Le langage HTML Prof. : E. BAKKI Année scolaire 2008/2009
2
Le WWW (Web) Le World Wide Web est une toile d'araignée de serveurs d'informations reliés les uns aux autres par des liens physiques (le réseau matériel) et des liens logiques (les liens hypertextes). Ces liens hypertextes permettent de voyager d'un serveur à l'autre sur le réseau Internet. Le Web n’est qu’une partie de l’Internet. C’est le service le plus connu, mais il en existe d’autres : FTP (File Transfer Protocol), Telnet, News, IRC (Internet Relay Chat) …
3
WWW, HTTP et HTML D'un point de vue technique, le WWW relie des serveurs HTTP qui envoient des pages HTML à des postes dotés d'un navigateur. Le protocole de communication entre les navigateurs et les serveurs est basé sur le principe des hypertextes (HyperText Transfer Protocol). Le langage permettant de décrire les pages Web est le HTML (HyperText Markup Language).
4
Architecture Clients-Serveur
HTML Serveur HTTP Client Navigateur Serveur HTTP Client Navigateur
5
Document HTML Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens. Un hyperlien est un élément particulier (mot/image) sur lequel on clique pour se déplacer vers : un autre emplacement du document, un autre document sur le même site, un document sur un autre site WEB, un autre service Internet (mail, ftp… )
6
Le langage HTML Le langage HTML permet la :
mise en forme de documents : polices, styles.. tableaux listes cadres bannières… création d'hyperliens insertion d'images création images réactives insertion d'images animées insertion de composants multimedia : son, vidéo... définition de formulaires de saisie : CGI insertion et activation d'applications interactives : applets java, scripts, etc.
7
Le Web et HTML HTML est un langage informatique dont le principe de base repose sur l’utilisation de balises pour délimiter les différents éléments d’un document. Ces balises ont la forme <…> et </…> Exemple : <B> Mon texte </B> (pour mettre en gras) <I> Autre texte </I> (pour mettre en italique) On peut combiner ces balises : <B> <I> Texte en gras et en italique </I> </B>
8
Éléments de base d’une page HTML
<HTML> Définit le contenu HTML d'un document Nécessite un marqueur de fin. Règle : <HTML>.....</HTML> <HEAD> Définit l'en-tête d'un document HTML Nécessite un marqueur de fin. Règle : <HEAD>.....</HEAD> <TITLE> Définit le titre d'un document HTML Nécessite un marqueur de fin. Règle : <TITLE>.....</TITLE> <BODY> Définit le corps du document HTML Nécessite un marqueur de fin. Règle : <BODY>.....</BODY>
9
Exemple d’une base de page HTML
<HTML> début du document HTML <HEAD> début de l’en-tête du document <TITLE> Titre de votre page </TITLE> titre du document </HEAD> fin de l’en-tête du document <BODY> début du corps du document Insérer vos textes, images, formulaires, etc. ici </BODY> fin du corps du document </HTML> fin du document HTML
10
Création d’une page Web sans éditeur HTML
Dans un éditeur de texte traditionnel, (Blok-notes par ex.), taper, puis sauvegarder ce fichier, en précisant : Nom du fichier.html <HTML> <HEAD> <TITLE> Ceci est le titre de ma page </TITLE> </HEAD> <BODY> Voici ma première page Web. </BODY> </HTML> premiere.html
11
Retour à la ligne : <BR>
La balise <BR> (qui signifie break) permet de revenir à la ligne <HTML> <HEAD> <TITLE> Deuxième exemple de page HTML, avec un BR </TITLE> </HEAD> <BODY> Voici ma deuxième page Web. <BR> Et là, une autre phrase après un retour à la ligne. </BODY> </HTML> br.html
12
Le paramètre align indique une position (left, right, center).
Les paragraphes et l’alignement : <P> </P> Les balises <P> et </P> définissent le début et la fin d’un paragraphe. Le paramètre align indique une position (left, right, center). <HTML> <HEAD> <TITLE> Exemple de paragraphe en HTML </TITLE> </HEAD> <BODY> <p> Ma première ligne. </p> <p align="center"> Cette phrase est centrée sur la page. </p> <p align="right"> Celle-ci est alignée à droite. </p> <p align="left"> Par défaut, l'alignement se fait à gauche. </p> </BODY> </HTML> paragraphe.html
13
Mise en forme de texte Gras : <B> et </B> (pour Bold)
Italique : <I> et </I> (pour Italic) Souligné : <U> et </U> (pour Underlined) Police plus grande : <BIG> et </BIG> Police plus petite : <SMALL> et </SMALL> Texte barré : <S> et </S> Indice : <SUB> et </SUB> Exposant : <SUP> et </SUP>
14
Mise en forme de texte Exercice : Reproduire cette page
à l’aide des balises de mise en forme d’un texte HTML. Usez et abusez du Copier/coller ! Mise-en-forme.html
15
Mise en forme de texte (suite)
Pour centrer un/des élément(s) :<CENTER> et </ CENTER > Ligne horizontale : <HR> (Horizontal Rulers) Exemple : <HR SIZE=3 WIDTH=50% ALIGN=RIGHT COLOR=BLACK> Police de caractères, taille, et couleur : <FONT FACE="Arial" SIZE="5" COLOR="red"> et </FONT> avec la police pouvant être : Arial, Arial Black, Comic sans MS, Courier New, Impact, Times new roman, Verdana, etc. avec size de 1 à 7, et color étant une couleur (en anglais) ou un code.
16
Mise en forme de texte (suite)
Exercice : Reproduire cette page à l’aide des balises de mise en forme d’un texte HTML. 50% 3 60% 5 40% 10 Mise-en-forme2.html
17
FIN du cours 1
Présentations similaires
