Embed Size (px)
Citation preview
HTML HTML (Hypertext Markup Language) est un langage universel utilise pour communiquer sur le Web. L’information sera transportée sur cette gigantesque toile de réseaux interconnectés qu’est Internet, pour aboutir sur votre ordinateur grâce à un programme appelé navigateur ou browser.Les navigateurs les plus connus sont : Netscape Communicator, Internet Explorer, Mozilla firefox, Google Crome… 1/ Les balises HTML<HTML>début d’un document HTML</HTML>fin d’un document HTML<HEAD>début de la zone d’en-tête</HEAD>fin de la zone d’en-tête<TITLE> début du titre de la page</TITLE> fin du titre de la page<BODY> début du document proprement dit</BODY> fin du document proprement dit 2/Pour écrire votre page HTML :2.1 Ouvrez un éditeur de texte ( Bloc-notes, Notepad de Windows etc. )2.2 Saisir les codes HTML suivants :<HTML><HEAD><TITLE>Ma page web</TITLE></HEAD><BODY> Bonjour le monde ! </BODY></HTML>2.3 Enregistrez le document avec l’extension .htm ou html2.4 Lancez le navigateur2.5 Affichez le document via le menu Fichier/Ouvrir2.6 Admirez votre premier document HTML 3/ Balises de mise en forme<B>…</B> gras<I>…</I> Italique<BR> Aller à la ligne suivante<FONT SIZE=?>…</FONT>début et fin de zone avec cette taille<FONT COLOR= #$$$$$$>…</FONT> début et fin de zone en couleur<CENTER>…</CENTER> centrer
<HR> trace une ligne horizontale 4/ Les titres et les listesEn-têtes <Hn>….</Hn> Afficher une en-tête de niveau et sauter une ligne avec n=1 à 6.Liste non- ordonnée <UL>…</UL> Afficher le texte sous forme d’une liste non- ordonnéeListe ordonnée <OL>….</OL> Afficher le texte sous forme d’une liste ordonnéeElément de la liste <Li>Paragraphe <P>…</P> 5/ Les liensHTML est un langage hypertexte ( et hypergraphique ) qui vous permet, en cliquant sur un mot, généralement souligné ( ou une image ) de vous transporter :
Vers un autre endroit du document ; Vers un autre fichier html ( ou htm )situé sur votre ordinateur Vers un autre ordinateur situé sur le WEB
ExemplesLien vers un autre site<A HREF= “ http://www.ucad.sn”> Cheikh Anta DIOP de Dakar</A> Liens vers un endroit précis du document ( les ancres )<A NAME= « *** »>…</A> ceci est une cible< A HREF= « #***>…</A> lien vers la cible*** dans la même page 6/ Les Images ( aux formats GIF ou JPEG ) de préférence<IMG SRC= « adressage de l’image »>7/ Tableaux et cellulesLes Cellules peuvent contenir du texte, des images, des arrière-plansPar exemple pour tableau centré qui occupe 60% de la fenêtre sur une ligne, trois colonnes égales, on a:<CENTER><TABLE width=60% border=1><TR><TD>cellule1</TD><TD>cellule2</TD><TD>cellule3</TD></TR></TABLE></CENTER>On peut affiner<CENTER><TABLE width=60% border=1><TR><TD colspan=3 align=center>Tarif au ../../..</TD></TR><TR>
<TD width=33%>Article 1</TD><TD width=33%> Ref 002 </TD><TD width=34 % align=right>40F</TD></TR></TABLE></CENTER>8/ Les FramesLes frames sont simples et délicats à la fois puisqu'il y des risques de plantage. De plus, tous les browsers ( navigateurs ) n'ont pas la possibilité de les afficher.Zone avec des fenêtres<FRAMSET> Début de la zone des fenêtres</FRAMSET> Fin de zone avec des fenêtresAgencement des fenêtres<FRAMSET ROWS="..."> Fenêtres horizontales</FRAMSET COLS="..."> Fenêtres verticalesExemple<HTML><HEAD></HEAD><FRAMESET ROWS="30%,70%"><FRAME></FRAME></FRAMESET></HTML>Le même pour un agencement <FRAMESET COLS="30%,70%"><FRAME><FRAME><FRAMESET>On peut mélanger les deux :<FRAMESET ROWS="30%,70%"><FRAME><FRAME><FRAMESET>On peut maintenant alimenter les frames par les attributs de la balise: <FRAME.SRC="URL ou adresse du document à afficher dans la fenêtre>On crée 3 fichiers Html que l'on place dans le même dossier ( répertoire ) que le fichier de frames:A.htm B.htm C.htm <HTML><BODY> <HTML><BODY> <HTML><BODY><H4>A</H4> <H1>B</H1> <H1>C</H1></BODY></HTML> </BODY></HTML> </BODY></HTML>Reprenons le fichier de frame précédent que l'on complète<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.htm"><FRAMESET COLS="30%,70%><FRAME SRC="B.htm"><FRAME SRC="C.htm"></FRAMESET></FRAMESET>Avec l'attribut de la balise <FRAME> SCROLLING="yes/no/auto"on peut indiquer si la fenêtre doit ou non précéder une barre de défilement..Exemple de lien entre les fichiers A.htm, B.htm, C.htm.<FRAMESET ROWS="30%,70%"><FRAME SRC="A.htm"><FRAMESET COLS="30%,70%><FRAME SRC="B.htm"><FRAME SRC="C.htm"> NAME ="fenetreC"></FRAMESET></FRAMESET>Si on met un lien vers A.htm dans le fichier B;htm en désignant comme cible la frame C:<HTML><BODY> < A HREF="A.htm" TARGET="fenetreC"><H1>B<H1></A></BODY></HTML> Par défaut, les cadres sont séparés par des bordures. Il est possible de supprimer les bordures mais les attributs diffèrent selon Netscape ou Internet Explorer. Netscape utilise l'attribut"border=0" et Explorer, les attributs"frameborder=no" et "framespacing=0"La balise devient <FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0>Il y a enfin la balise <NOFRAMES>....</NOFRAMES> pour indiquer le texte que doivent afficher les navigateurs incapables de gérer les frames. Il est même conseillé de prévoir une page sans fenêtres pour que les visiteurs puissent profiter de votre site.9/ HTML avancé9.1 Les Méta-tagPour les professionnels de l'information documentaire, il est important d'utiliser les meta-tag ( ou métadonnées ) pour alimenter l les moteurs de recherche tels que alta vista, google, lycos, voila, etc. Ils participent à l'opération de référencement de vos sites.C'est un traitement de l'information documentaire pour un site Internet ( description bibliographique et indexation... ).L'opération se situe dans la balise <HEAD>. Exemple<HEAD><META NAME>="description" CONTENT= "description de notre page web">
Cette balise indique au robot de recherche que le contenu de CONTENT est la description de votre page HTML, contenu qu'il pourra afficher comme résultat d'une recherche d'un utilisateur<META NAME>="keywords" CONTENT= "mot-clé, mot-clé, ">La balise indique au robot que le contenu de CONTENT est une série de mots-clés. Y ajouter des mots-clés en anglais si vos pages sont en fraçais. Phase d'iindexation indispensable pour les professionnels de l'information documentaire.<META NAME>="author" CONTENT= "DIOP Moussa, NAMAR Michel">Indique au robot le ou les auteurs au site<META NAME>="date" CONTENT= "2002-04-15">Indique la date de création de votre site<META NAME>="revisit-after" CONTENT= "20 days"> a une grande importance dans la plupart des moteurs de recherche. Ils consulteront votre page 2 jours après et noteront les nouveaux méta-tags.<TITLE>Bonjour le monde</TITLE></HEAD> 9.2 ProgrammationAvec Java et javascript, nous allons découvrir les éléments de programmation sur le Web. Java est un langage de programmation. Par contre Javascript est un ensemble de code ( scripts ) directement incorporés dans HTML permettant de faire réaliser aux navigateurs certaines fonctions déterminées.Par exemple, on peut faire apparaître avec Javascript un petit message du genre"Bonjour le monde" lorsque l'utilisateur clique sur le bouton.HTML><HEAD><SCRIPT language="javaScript"><!----function hello() {alert("bonjour le monde!") ;} //---->
</SCRIPT>
</HEAD>
<BODY>
...Input type=button name=""value="Pour le test"onClick"=hello()">...
</BODY>
<HTML>
Java est un langage de programmation développé par Sun Microsystems. Ilest nettement plus lourd et compliqué que Javascript mais également beaucoup plus puissant. C'est un langage
orienté objet ( proche du C++ ) qui permet de compiler des programmes exécutables mais aussi de petites applications, indépendantes de toute plate-forme, appelées Applets.L'intégration des Applets est réalisée par le balise ( tag ) < APPLET>...</APPLET>Exemple:<APPLET code="clock.class" width=200 height=200><PARAM...les parmètres transmis par l'auteur...></APPLET Webibliographiehttp://www.commentcamarche.net/Je vous conseille d'utiliser ce site qui est indispensable pour l'apprentissage du HTML et des langages de programmation Bibliographie sélective Bibliographie sélectiveLINDEMAN, Christoph; HARMS, FlorianHTML4: solutions pour sites Web professionnels!Paris : Micro Application, 1999, 4485p. ( Collection Micro Application )http://kosmina.eu/web/13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.pdf
http://www.alsacreations.com/tutoriels/
![Techniques de caractérisation dynamique d’écoulements ......de tension sinusoïdale et de fréquence et d’amplitude variables (Fig. 4 et 6a) [8]. L’énergie transportée par](https://img.pdfslide.fr/doc/110x75/602a3598a6bd3f2a8b43d6fc/techniques-de-caractrisation-dynamique-dacoulements-de-tension-sinusodale.jpg)
