INTERNET Le langage HTML Richard BONNET 9, rue des Marronniers B.P 503 74105 ANNEMASSE Cedex Tél. 04.50.43.91.81
Règles de respect mutuel PAS DE TELEPHONE PORTABLE PAS DE MAIL PAS DE NAVIGATION SUR AUTRES SITES Pas de boissons / nourritures à proximité des ordinateurs.
Le langage HTML Richard BONNET Cours n° 1
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, Gopher, News, IRC (Internet Relay Chat) …
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).
Architecture Clients-Serveur HTML Serveur HTTP Client Navigateur Serveur HTTP Client Navigateur
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… )
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.
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>
É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>
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
Création d’une page Web sans éditeur HTML Dans un éditeur de texte traditionnel, (Wordpad par ex.), taper, puis sauvegarder ce fichier, en précisant : type de fichier = texte seul. <HTML> <HEAD> <TITLE> Ceci est le titre de ma page </TITLE> </HEAD> <BODY> Voici ma première page Web. </BODY> </HTML> premiere.html
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
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
Mise en forme de texte Gras : <B> et </B> (pour Bold) ou <STRONG> et </ STRONG > Italique : <I> et </I> ou <EM> et </EM> (pour Emphase) Souligné : <U> et </U> (pour Underlined) Police plus grande : <BIG> et </BIG> Police plus petite : <SMALL> et </SMALL> Texte barré : <STRIKE> et </STRIKE> ou <S> et </S> Indice : <SUB> et </SUB> Exposant : <SUP> et </SUP>
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
Mise en forme de texte (suite) Texte en style machine à écrire : <TT> et </TT> Faire une citation : <CITE> et </ CITE > 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.
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
Mise en forme de texte (les titres et listes) On peut utiliser 6 niveaux de titre, avec les balises : <H1> et </H1> (grand), jusqu’à <H6> et </H6> (petit) Listes ordonnées : <OL> <LI> Valeur1 <LI> Valeur2 <LI> Valeur3 </OL> On peut préciser le type (A, a, 1, i, I). Exemple : <OL TYPE="A"> On peut faire démarrer à une valeur précise. Exemple : <OL START=2000> Listes non ordonnées : <UL> <LI> Valeur </UL> On peut préciser le type de « puces » (disc, circle, square)
Mise en forme de texte (les titres et listes) Exercice : Dans une même page Web, présenter les six niveaux de titre utilisables en HTML, puis une ligne horizontale, suivie de toutes les listes possibles (ordonnées ou non), pour les éléments Rabais, Remise, et Ristourne. Voir ci-contre le résultat attendu. Mise-en-forme3.html
FIN du cours 1