Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

[Tapez ici] [Tapez ici] [Tapez ici] TD1 Initiation au HTML Exercice 1 : créatio

[Tapez ici] [Tapez ici] [Tapez ici] TD1 Initiation au HTML Exercice 1 : création de votre première page html *Nous allons commencer par créer un document html très petit, et nous l'enrichirons au fur et à mesure. 1. Préparez votre espace de travail en créant un dossier "public_html_local_votreGroupe" dans lequel vous allez créer un sous-dossier "TD1_exercice1". 2. Encoder Le schéma de base d’une page HTML, en respectant bien l'écriture des balises. En vous aidant, prenez un éditeur de texte (VSCODE) et copiez la totalité du code (sans numéro de ligne), de l'exemple Ci-contre. 3. Enregistrez votre document sous le nom de "mapage.html". Attention à bien renseigner l'extension en .html et non en .txt 4. Visualisez le résultat dans votre navigateur Internet (Google chrome, Internet Explorer, Firefox, Safari...) Exercice 2 : Modification du fichier html 1. Ajoutez à l'intérieur de <body>...</body>, la phrase « Ma première page en html. » dans le fichier mapage.html et visualisez le résultat sur votre navigateur. Pour voir les changements dans votre navigateur il faut rafraîchir (actualiser) la page. Méthode : Pour rafraîchir la page vous pouvez utiliser une de ces méthodes:  Cliquer sur la flèche ronde de votre navigateur  Appuyer sur la touche F5  Appuyer sur les touches ctrl+r Dans certains cas, ce rafraîchissement ne suffit pas (images en cache), essayez alors:  Cliquer sur la flèche ronde de votre navigateur tout en appuyant sur "maj"  Maj+F5  Maj+ctrl+r Exercice 3 : Modification du fichier html 1. Modifier maintenant la ligne <meta charset="utf-8"> en la ligne <meta charset="iso-8859-1"> 2. Inscrire dans le fichier mapage.html une autre phrase de votre choix contenant des accents et visualisez le résultat sur votre navigateur. Exercice 4 : Modification du fichier html Rappel : Permet la configuration de la fenêtre d'affichage pour que votre site Web ait une belle apparence sur tous les appareils, (Permet de contrôler les dimensions et la mise à l'échelle de la page.) [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] 1. Ajoutez la ligne ci-dessus à l'intérieur de la balise <head>...</head>, puis inspectez votre document en mode Toggle device pour simuler une navigation avec un téléphone ou une tablette D’autres cas :  Définissez des mots-clés pour les moteurs de recherche : <meta name="keywords" content="HTML, CSS, JavaScript">  Définissez une description de votre page Web : <meta name="description" content="Free Web tutorials for HTML and CSS">  Définir l'auteur d'une page : <meta name="author" content="John Doe">  Actualiser le document toutes les 30 secondes : <meta http-equiv="refresh" content="30"> Exercice 5 : La mise en forme 1. Ecrivez l'extrait de code HTML qui réalise ce titrage toujours dans le même fichier (mapage.html), en conservant toutes les modifications antérieures. Titre 1 : Infos perso Titre 2 : Objectif de carrière Titre 3 : Expérience Titre 4 : Formation Titre 5 : Références Titre 6 : Intérêt Avez-vous besoin d'ajouter la balise <br> après une balise d'entête <h1-6> ou un paragraphe <p> ? Pourquoi ? 2. Rajoutez l'extrait de code HTML qui réalise ces lignes : a. « Tu ne sais jamais à quel point tu es fort, jusqu'au jour où être fort reste ta seule option. », Bob Marley. b. ax2 + bx + c = 0 c. a 2 + b 2 = c 2 3. Encodez les mises en forme proposées ci-dessous. a. <i> </i> Italique b. <sub> </sub> Indice c. <sup> </sup> Exposant Exercice 6 : Écrire une page HTML5, qu'il y ait exercice6 comme nom de document et titre, et qui affiche : Remarque : Ajoutez une barre (ligne) entre chaque élément, et vérifier l'affichage (<hr/>) a. Un texte important (strong), b. Un texte sur lequel on met l'accent (em), c. Un texte en télétype (tt), d. Un texte en mode échantillon de code (samp), e. Un texte en mode citation (cite), f. Un texte en mode apostrophe (q), g. Un texte en mode insertion (ins), h. Un texte en mode suppression (del), i. Un texte en mode acronyme (acronym), j. Un texte en mode abréviation (abbr), k. Un texte en mode variable (var), l. Un texte en mode saisie clavier (kbd), m. Un texte contenant des mots séparés par plusieurs espaces, n. Un texte contenant des mots séparés par plusieurs espaces insécables, o. Un texte préformaté (pre), [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] p. Un texte en mode apostrophe en bloc (blockquote), q. Un texte en mode adresse (address), r. Un texte en mode code source (code), Exercice 7 : Vous allez créer une page, appelée exercice7.html, dans laquelle on va manipuler quelques attributs. 1. Remplacez la ligne <body> par la suivante : <body bgcolor="#00C0FF" text=red> 2. Copiez une image dans le répertoire de ce TD, et essayez à la place <body background="nomImage.ext"> 3. Ecrivez ces deux paragraphes : <p align="justify">Contenu de votre choix.</p> <p align="center">Contenu de votre choix.</p> 4. Ajoutons ce texte à notre page, pour quelque chose comme : <h1 align=center>Voici un titre</h1> <h2>Maintenant un sous-titre</h2> <h3>Et on peut continuer</h3> <h4>La profondeur est limitée</h4> <h5>Pénultième</h5> <p align=right>Un petit texte aligné à droite pour introduire cette partie, elle le mérite bien, et puis il serait dommage de se priver. </p> <h6>Un vraiment petit paragraphe</h6> On ajoute encore : <blockquote> Mignonne, allons voir si la rose<br>Qui ce matin avoit desclose<br> Sa robe de pourpre au Soleil,<br>A point perdu ceste vesprée<br> Les plis de sa robe pourprée,<br>Et son teint au vostre pareil. </blockquote> <pre><html> <body></body></html></pre> 5. Essayez le code suivant : <p>Barre horizontale simple, </p> <hr> <p>avec une longeur relative limitée, </p> <hr width=50%> <p>avec une longueur absolue, </p> <hr width=100> <p>avec d'autres positions dans la page, </p> <hr width=50% align=right> <hr width=50% align=left> <p>avec une épaisseur modifiée, </p> <hr size=3> <p>sans l'ombré, </p> <hr noshade> <p>avec une longueur dépendant de la taille des caractères, </p> <hr style="width: 10em;"> [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] N'oubliez pas de changer la taille de votre fenêtre pour voir comment évoluent les traits. Changez aussi la taille des caractères (dans le menu affichage, ou en appuyant sur CONTROL et + ou -). Exercice 8 : Mises en forme de paragraphes Vous allez créer une page, appelée exercice8.html, qui fera apparaître plusieurs mises en forme de paragraphes et de titres. La page comprendra 3 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail entre chaque partie. Description de la page à créer :  Le fond de la page sera bleu et le texte blanc.  Le titre de la page sera : Mise en forme de base 1ère partie :  Un titre de niveau 1 centré : PREMIERE PARTIE  Un paragraphe avec le texte suivant en rouge : Je suis le premier paragraphe, je suis rouge… Une ligne séparatrice de taille 2 et de couleur rouge 2ème partie :  Un titre de niveau 2 centré : DEUXIEME PARTIE  Un paragraphe centré constitué des 3 lignes suivantes avec le texte jaune et de taille 5 : Je suis le 2ème paragraphe au centre en taille 5 et en jaune  Une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur noire 3ème partie :  Un titre de niveau 3 centré : TROISIEME PARTIE  Un paragraphe, à droite comprenant le texte suivant en taille 7 et la police Arial : Je suis le dernier paragraphe, je suis en taille 7 avec la police Arial et à droite… Exercice 9 : Les listes HTML Ecrivez le code HTML permettant de réaliser la page (exercice9.html) qui représente les figure ci-dessous. L’image correspond à un fichier nommé dessin.png. Elle se trouve dans le sous répertoire images qui est au même niveau que la page html. [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] Exercice1 https://perso.univ-rennes1.fr/virginie.sans/l2pw/TP%201%20Initiation%20au%20HTML.htm Exercice3 http://iamjmm.ovh/NSI/ressourcesHTMLCSS/cours/htmlCss/ex3.html exercice 4 https://www.alsacreations.com/article/lire/628-balises-meta.html https://developers.google.com/search/docs/advanced/crawling/special-tags?hl=fr https://www.w3schools.com/tags/tag_meta.asp Exercice 5 https://apcpedagogie.com/html-tp-022018/ Exercice 6 https://toulibre.org/pub/2012-02-29-rencontre/presentation/exercices/ parse_html_files.php@dir=exos_01_html5%252F040_texte&nocrypt&solution&langage=html5.html https://helios2.mi.parisdescartes.fr/~osalem/CSWD/TP1/TP1.html exercice 7 [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] [Tapez ici] https://geometrica.saclay.inria.fr/team/Marc.Glisse/enseignement/html/ https://www.cours-gratuit.com/exercices-html/exercice-html-mises-en-forme-de-paragraphes https://enacit.epfl.ch/cours/html/exercices/ex_base.html https://enacit.epfl.ch/cours/html/exercices/ex_attrib_page.html exercice 8 https://www.cours-gratuit.com/exercices-html/exercice-html-mises-en-forme-de-paragraphes exercice 9 http://www.exelib.net/html/lister-des-mots-et-leurs-descriptions-en-utilisant-les-listes-de-definitions.html#enonce-tab https://enacit.epfl.ch/cours/html/exercices/ex_listes.html https://www.exelib.net/html/les-listes-numerotes-et-les-listes-a-puce.html#enonce-tab [Tapez ici] [Tapez ici] [Tapez ici] uploads/S4/ td1-initiation-au-html.pdf