Cours HTML embarqué PDF 1 janv. 2019 Ce document

Initiation HTML et CSS - Stéphanie Walter

Le but de ce cours de formation initiation au HTML et CSS est de La syntaxe HTML : balises éléments et attributs ... W3C en français.

Les principales balises Html

Les principales balises Html. Structure Html Début et fin du corps du fichier Html ... http://www.w3schools.com/html/default.asp (anglais) ...

Testeur Selenium Certifié Syllabus Niveau Fondation Version 2018 FR

5 août 2018 Table 1: Fragment de test manuel (rédigé en anglais) ... Les éléments HTML comportent généralement une balise de début et une balise de fin.

Apprendre le langage Html

Le langage Html étant un ensemble de balises et d'attributs il nous paraît Il peut être utile de prévoir quelques mots-clés en anglais si vos pages.

Le langage HTML - Wikimedia Commons

16 sept. 2018 2.2.2.1 La balise <html> ... 12.1.1 Attributs de la balise table ... HyperText Markup Language » en anglais littéralement « langage de ...

Présentation PowerPoint

18 juin 2019 l'ensemble des balises et propriétés qu'il peut exister en HTML et CSS ; ! Il ne s'agit pas ici d'apprendre à un créer un véritable site web ...

HTML et Javascript

19 mai 2014 l'Editeur ou du Centre Français d'exploitation du droit de Copie 20

Web : HTML/CSS/JavaScript

La spécification HTML5 en anglais : https://html.spec.whatwg.org/multipage/. Un document HTML est défini par une balise racine nommée HTML.

Untitled

Les bases du code HTML. ? Quelques balises HTML - rappel. ?. Les balises <head>head = tête en anglais et </head> (prononcer " fin.

Cours HTML embarqué

1 janv. 2019 Ce document est le support du cours “HTML embarqué” donné au Microclub en ... Un élément HTML est formé de balises ou tag en anglais.

&2+*#+

0/3;Ce document est le support du cours "HTML embarqué" donné au&;5DA5>G47@<3@H;7D7F8QHD;7D

I74E;?B>7E7FEG8

'AGE34AD67DA@E>7EBA;@FEEG;H3@FE X"-&% X,,

X$3H3,5D;BF

?3@FG@753DF7N?;5DA5A@FDU>7GD,) ';5A>3E$73@?A@A6

Retour à l'accueil

Dans le cadre de ce cours, unagent utilisateur, ouuser agenten anglais, est un logiciel qui peut

7FF7>;EF7

@_7EFB3E7J:3GEF;H77F6;8

8;5:;7DE"-&%,,7F$3H3,5D;BF

3@E>39D3@67?3_397@FGF;>;E3F7GDE7D3G@@3H;93F7GDI74AGweb br

owseren X%7E3BB3D7;>E#A-Internet of Thingsou Internet des objets).

X%7E>A9;5;7>E67?;E77@B3975A??7)D;@571&%

)3D X •97@FEGF;>;E3F7GDE0 ;=;B76;38D V

oici la structure minimale pour qu'un document soit considéré comme un document HTML parFAGE>7E397@FEGF;>;E3F7GDE

Structure minimale %7E43>;E7E34EA>G?7@FA4>; A TELIER HTML EMBARQUÉ JAN-FÉV 20182019-01-01 18:52:22MICROCLUB - NICOLAS JEANMONOD

1.$/#490%EQJI

2.

3. 4.
5.

6.

Nous aurons besoin d'autres balises pour étof
fer nos documents HTML, mais les 6 ci-dessus6A;H7@FFAG1.

Définit que le document suit la norme HTML

2.

T out le document (à l'exception du doctype) est entouré des balises.

3.

Le contenu de l'élémentsert à donner des informations aux agents utilisateurs. Ces informa-

N>_7J57BF;A@6G5A@F7@G67>_Q>Q?7@Fet du favicon (pas déclaré dans cet exemple). Il est possible de générer dynamiquement ce</p> <h4>5A@F7@G3H75$3H3,5D;BF</h4> <h4>4.<meta charset=utf-8 /></h4> Cet élément<meta>indique au navigateur quel est l'encodage du fichier . Sans cette information, les@3H;93F7GDE8A@F67E5:A;JB3D6Q83GFCG;EA@FEAGH7@F6;8 <h4>8QD7@FE67>_.- 7F6A@5>7E53D35FRD7E@7E_38</h4> <h4>8;5:7DA@FB3E5ADD75F7?7@F</h4> <h4>5.<title>

Le contenu de l'élémentsera af</h3> fiché dans l'onglet de la page dans le navigateur.6.<body></body> <p>Et enfin, le contenu visible par l'utilisateur de la page est placé dans l'élément<body>. Il est pos-</p> 1RP SARSPCBCQIJIKCLRQ&2+Un élément HTML est formé de balises, outagen anglais. Par exemple <p></p> )AGD>343>;E7AGHD3@F7>3EFDG5FGD77EF2"-&% &#+(%.\'#(%,$'&('(2019-01-01 18:52:22A <h3>TELIER HTML EMBARQUÉ JAN-FÉV 2018</h3> •5:7HDA@AGHD3@F<) <h3>X5:7HDA@87D?3@F>)</h3> )AGD>343>;E787D?3@F7>3EFDG5FGD77EF <h3>X5:7HDA@AGHD3@F<)</h3> <h3>X43DD7A4>;CG7/)</h3> <h3>X5:7HDA@87D?3@F>)</h3> @FD7>7E43>;E7EA@B7GF;@5>GD7 <h3>XD;7@<p></p></h3> •6GF7JF7E3@E43>;E7E<p>du texte</p> •6_3GFD7E43>;E7E<p>du <i>texte</i></p> •6_3GFD7E43>;E7E;?4D;CGQ7Enesteden anglais)<p><b>du <i>texte</i></b></p> <p>Certains éléments HTML sont toujours vides, c'est-à-dire qu'ils n'ont jamais de contenu entre leur</p> <h4>43>;E7AGHD3@F77F>7GD43>;E787D?3@F7</h4> (@>7E3BB7>>7]Q>Q?7@FEH;67E^empty elementsouvoid en anglais). Dans ce cas, il est obligatoire d'utiliser une notation compacte avec la barre <h3>A@5575;7EFH3>;67</h3> <br <img <meta <link >ADECG7575;@_7EFB3EH3>;67 <br></br> <img></img> <meta></meta> <link></link> Dans une balise autofermante, l'espace avant la barr e oblique est optionnel.V oici une liste d'éléments videsM>Q?7@FEH;67E&'8D Si un élément peut avoir un contenu (non-void HTML elementen anglais), mais que ce contenu est HTML -%#+"-&%&+.M$' M/ <h4>2019-01-01 18:52:22MICROCLUB - NICOLAS JEANMONOD</h4> <h3>Donc ceci est valide</h3> <p></p> <li></li> <h1></h1> >ADECG7575;@_7EFB3EH3>;67 <p <li <h1 La grande majorité des éléments HTML sont non vides. <h3>ŉŉ<script></h3> L 'élémentscriptest un peu spécial parce qu'il peut être utilisée de deux façons dif férentes <h3>X)AGD3BB7>7DG@E5D;BF7JF7D@73G8;5:;7D"-&%</h3> <h3>X)AGD6Q8;@;DG@E5D;BF;@F7D@73G8;5:;7D"-&%</h3> #>E7D3;F6A@5>Q9;F;?767B7@ <h3>E7DCG_A@B7GFGF;>;E7D>343>;E73GFA87D?3@F7</h3> <h4>87D?3@F7</h4>  <scriptsrc=P@OFMQPGP></script> Définition d'un script JavaScript (JS) interne. Comme la balise <script> contient le script dans ce cas là, on ne peut pas <h4>7J7?B>75;67EEGE</h4> ?S?7E;>UR>R?7@F7EFH;67 <script> consoleILD(BIIL-F@OL@IR? </script> &3;E63@E5753E>7E43>;E7EGF;>;EQ7EEA@F6;8 <h4>8QD7@F7E</h4> <h3>Lien vers une feuille de style CSS externe.</h3> Comme la balise <link> est toujours vide, elle doit être autofermée. <linkrel=PQVIBPEBBQEOBCPQVIB@PP/>4"-&% &#+(%.\'#(%,$'&('(2019-01-01 18:52:22A <h3>TELIER HTML EMBARQUÉ JAN-FÉV 2018</h3>  <stylerel=PQVIBPEBBQ> /* commentaire CSS / </style> <h3>Pour résumer</h3> ,,7JF7D@7<link /> <h3>CSS interne :<style></style></h3> <h3>JS externe :<script></script></h3> <h3>JS interne :<script></script></h3> <p>ŉŉLorsque les éléments sont imbriqués (nesteden anglais), il est important de fermer les balises</p> ]7@83@FE^3H3@F>7E43>;E7E]B3D7@FE^ <h4>75;7EF5ADD75F</h4> <p> <strong>...</strong> </p> <h4>75;@7>_7EFB3E</h4> <p> <strong>...</p> </strong> V oici une liste non exhaustive d'éléments courants <p>Ceci est un paragraphe. <h3>Les retours à la ligne doivent y</h3> être explicitement indiqués avec la balise<br <?O La balise "p" est la plus utilisée pour afficher du texte. </p> <p><strong>Texte en gras</strong></p> <p><em>Texte en italique</em></p> <p><strong>Texte en gras<em>avec une partie italique</em></strong></p> <pre>Ceci est un texte préformaté dans lequel les passages à la ligneHTML -%#+"-&%&+.M$' M/ <h4>2019-01-01 18:52:22MICROCLUB - NICOLAS JEANMONOD</h4> et les espaces seront respectés</pre> <p>Le<span>est</span>utilisé pour formater différemment une partie du texte.</p> <div>Le div sert à regrouper des balises. <p>...</p> <p>...</p> <div></div> </div> <imgsrc=EQQMPLRFILDFNRB@LJFJ>DBPPFQB <h3>ILDLMKD>IQFJ>DBABA^JL/></h3> <h3>La norme HTML définit environ 130 balises dif</h3> férentes que vous pouvez découvrir en suivant les>;7@E5;67EEAGE <p>Comme nous l'avons vu ci-dessus, un élément HTML est composé de balises et d'un contenu. Dans</p> >7>3@93975AGD3@FA@GF;>;E7EAGH7@F;@6;8 <h4>8QD7??7@F>7EF7D?7Eélémentsetbalises, même si à pro-</h4> •%7E43>;E7E"-&%7F>7GDDU>7&'8D <h3>X+Q8QD7@5767EQ>Q?7@FE"-&%&'8D</h3> <h3>X"-&%>7?7@F+787D7@570,5:AA>E7@</h3> T <p>outes les balises acceptent des attributs, certains étant obligatoires d'autres optionnels.)3D7J7?B>7>343>;E7<img>qui sert à insérer une image a deux attributs obligatoiressrcetalt. À</p> @AF7DCG7>_3FFD;4GFaltest souvent omis dans les pages web que vous rencontrerez. Il est pourtant <h4>8;5:Q7</h4> <imgsrc=EQQMPLRFILDFNRB@LJFJ>DBPPFQB <h3>ILDLMKD>IQFJ>DBABA^JL/></h3> A;D>7E3FFD;4GFEBAEE;4>7E67>343>;E7<img />sur le site MDN. &#+(%.\'#(%,$'&('(2019-01-01 18:52:22A <h3>TELIER HTML EMBARQUÉ JAN-FÉV 2018</h3> <img src=EQQMPLRFILDFNRB@LJFJ>DBPPFQB <h3>ILDLMKD</h3> alt=FJ>DBABA^JL/> <p>ŉHTML5 permet à l'utilisateur de définir ses propres attributs ce qui peut être fort utile lorsqu'on</p> <article id=SLFQROBBIB@QOFNRB data-columns= data-index-number= data-parent=SLFQROBP> </article> <h3>A;D>7E3FFD;4GFE676A@@Q7EEGD&'</h3> <p>Le doctype est une chaine de caractère présente au début du fichier et qui définit explicitement la</p> %7?AFdoctypeest un mot-valise tiré de la >A5GF;A@3@9>3;E7Document T ype Declaration. Le seul doctype que nous utiliserons dans le cadre de <!DOCTYPEEQJI ,;A@@7EBQ5;8;7B3E676A5FKB73>ADE>7E397@FEGF;>;E3F7GDEGF;>;E7DA@F>7mode quirks, c'est-à-dire <h4>6_#@F7D@7FJB>AD7D</h4> <h4>7?A67B7D?7F67BD7@6D77@5:3D</h4> ,;HAGE6QE;D7LB>GE6_;@8AD?3F;A@EEGD57E6;8 <h4>6A5FKB7"-&%<!DOCTYPE html>).</h4> <h3>BAGH7LGF;>;E7D>7$3H3,5D;BFEG;H3@FHTML</h3> -%#+"-&%&+.M$' M/ <h4>2019-01-01 18:52:22MICROCLUB - NICOLAS JEANMONOD</h4> Historiquement, de nombreux doctype ont eu cours et il est fort probable que vous en rencontriez <h4>6_3GFD7E</h4> <h4>6A;F<3?3;ESFD787D?Q7</h4> <h3>XA5G?7@FFKB7675>3D3F;A@0</h3> ;=;B76;37@XA5FKB70 ;=;B76;38DX&A67CG;D=E67&AL;>>3&'8D <h3>X&A67BD7ECG7EF3@63D667!75=A&'8D</h3> X ;J2 <h3>AGD,;F70;F:F:7+;9:F(-2)</h3> Certains validateurs comme celui de l'éditeurOxygen XML Editorimposent que l'espace de nom EA;FEBQ5;8;Q7F575;E783;F63@E>_3FFD;4GFxmlnsde la balise<html>ouvrante <htmlxmlns=EQQMTTTTLODUEQJI> </html> V oici une liste non exhaustive d'éditeurs de code HTML <h3>XD35=7FECG7@AGE3>>A@EGF;>;E7DBAGD575AGDE</h3> <h3>X,G4>;?7-</h3> <h4>7JFCG7<_GF;>;E73GCGAF;6;7@</h4> XFA? <h3>X(JK97@1&%6;FAD</h3> X/ ;EG3>,FG6;AA67X'AF7B36 X6;F <h3>X!76;F</h3> X'3@A X <p>À ce stade, nous pouvons commencer à vérifier que ce que nous faisons est valide avec le validateur</p> 6G0 <h3>AD>60;67074A@EADF;G?00&3D=GB/</h3> <h4>3>;63F;A@,7DH;57</h4> 8"-&% &#+(%.\'#(%,$'&('(2019-01-01 18:52:22A <h3>TELIER HTML EMBARQUÉ JAN-FÉV 2018</h3> <p>Les entités servent à référencer les caractères par un code qui peut être textuel, décimal ou hexadé-</p> 5;?3> D7BDQE7@F7D3B3D6A@5B3D ou le trait d'union insécable, identique au trait d'union @AD?3>7FCG7>_A@D7BDQE7@F7D3B3D‑. )3D7J7?B>7 E;>78;5:;7D7EF7@5A6Q7@windows-1257, le caractère "ç" ne sera pas utilisable directement, <h3>X%753D35FRD7@7E_38</h3> <h4>8;5:7B3E5ADD75F7?7@F63@EHAFD7Q6;F7GD5A??7>_Q?AF;5U@7]H;E397EAGD;3@F^☺= ☺).</h4> <h3>Pour tout nouveau pr</h3> <p>ojet, il est important de s'assurer que tous vos fichiers sont enco-utf-8qui est une norme quasi universelle aujour</p> d'hui en occident. Le premier <h3>Caractèr</h3> e <h3>Signe inférieur à<U#</h3> <h3>Signe supérieur à>U%</h3> <h3>Esperluette&U</h3> <h3>Espace insécable U!</h3> T rait d'union insécable-‑U <h3>Émoticône "visage sou-</h3> <h3>D;3@F^`☺U!</h3> <h3>Espace sans chasseU"</h3> V ous trouverez une liste exhaustive d'entités surG@;5A67F34>7 5A? <h3>La norme HTML 5 autorise deux syntaxes</h3> <h3>X%3EK@F3J7"-&%</h3> <h3>X%3EK@F3J71"-&%</h3> %36;8 -%#+"-&%&+.M$' M/ <h4>2019-01-01 18:52:22MICROCLUB - NICOLAS JEANMONOD</h4> en HTML, ceci est valide <metacharset=RQC <p>... <ul> <li>... <li>... </ul> <metacharset=RQC <p>...</p> <ul> <li>...</li> <li>...</li> </ul> <h3>La syntaxe XHTML a l'immense avantage d'êtr</h3> e logique et facile à appliquer lorsque mon (Je découvr e quelques 1RP SARSPCBSBMASKCLR•%76A5FKB7<!DOCTYPE html>est obligatoire. X% _3FFD;4GFxmlns="http://www.w3.org/1999/xhtml"est obligatoire. X%7E43>;E7E<html>,<head>,<title>, et<body>sont obligatoires. <h3>X%343>;E7D35;@7<html>doit être unique.10"-&%</h3> &#+(%.\'#(%,$'&('(2019-01-01 18:52:22A <h3>TELIER HTML EMBARQUÉ JAN-FÉV 2018</h3> X%7EH3>7GDE67E3FFD;4GFE6A;H7@FSFD77@FAGDQ7E679G;>>7?7FEE;?B>7E') ou doubles ("). <h3>X%3?;@;?;E3F;A@67E3FFD;4GFE7EF;@F7D6;F7</h3> <h3>FAUXcFKMRQ@EB@HBA</h3> 534%cFKMRQ@EB@HBA@EB@HBA Note ") aux guillemets simples ('), parquotesdbs_dbs17.pdfusesText_23</div> <style> .ahover:hover{ background:#efefef; } </style> <div style="padding:5px; font-size:22px;"> <a href="https://pdfprof.com/PDFV2/Documents1/675/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] b?n ?? các qu?n paris</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/676/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] bandolero paris latino (remix 2003)</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/677/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] bandolero paris latino traduction paroles</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/678/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] bank account and savings account classes java</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/679/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] banque de france 01000 bourg en bresse</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/680/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] banque de france 92 hauts de seine</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/681/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] banque de france meaux 77100</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/682/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] banque de france saint germain en laye</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/683/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] bar exam essay questions and answers</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/684/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] bar exam questions and answers pdf</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/685/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] barcelona paris flight time</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/686/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] barkodlu ikametgah belgesi</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/687/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] base faible exemple</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/688/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] base forte ponta grossa</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/690/27" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] bash cookbook pdf download</a><br/><br/> </div> </div> </div> <div class="left"> <br/> <div style="width:100%;padding:2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1570187411384203" data-ad-slot="2836242943" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <br/> <br/> <br/> <div style="background:#efefef;"><br/></div> </div> <div> <style> .exit-intent-popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: rgba(33, 33, 33, 0.8); transform: translateY(60%) scale(0); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); } .exit-intent-popup.visible { transform: translateY(0) scale(1); } .newsletter { position: absolute; top: 20%; left: 20%; transform: translate(-20%, -20%); } / Popup-specific styles / .newsletter { background: #FFF; padding: 10px; border-radius: 3px; } .close { position: absolute; top: 10px; right: 10px; cursor: pointer; width: 20px; height: 20px; font-size:18px; } </style> <link rel="stylesheet" href="popup.css" /> <div class="exit-intent-popup"> <div class="newsletter"> <span>Nous vous remercions chaleureusement pour votre soutien et votre générosité.</span><br/> <br/> <img src="https://pdfprof.com/PDFV2/6oB.gif" style="max-width:100%;"/> <div style="width:100%;"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://pdfprof.com/PDFV2/Documents1/671/27/10" rel="nofollow" target="_blank" style="margin-right: 5px; background: #03A9F4; color: white; padding: 1%; font-size:15px; width:46%; ">Share on Facebook</a> <a href="https://api.whatsapp.com/send?text=bash+cookbook+pdf+download+Download+From++-+https%3A%2F%2Fpdfprof.com%2FPDFV2%2FDocuments1%2F671%2F27%2F10" rel="nofollow" target="_blank" style="background: #4CAF50; color: white; padding: 1%; width:48%; font-size:15px;">Share on Whatsapp</a> </div> <br/> <span class="close">x</span> </div> </div> <script> / const CookieService = { setCookie(name, value, days) { let expires = ''; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 12 * 60 * 60 * 1000)); expires = '; expires=' + date.toUTCString(); } document.cookie = name + '=' + (value || '') + expires + ';'; }, getCookie(name) { const cookies = document.cookie.split(';'); for (const cookie of cookies) { if (cookie.indexOf(name + '=') > -1) { return cookie.split('=')[1]; } } return null; } }; const exit = e => { const shouldExit = [...e.target.classList].includes('exit-intent-popup') || // user clicks on mask e.target.className === 'close' || // user clicks on the close icon e.keyCode === 27; // user hits escape if (shouldExit) { document.querySelector('.exit-intent-popup').classList.remove('visible'); } }; const mouseEvent = e => { const shouldShowExitIntent = !e.toElement && !e.relatedTarget && e.clientY < 10; if (shouldShowExitIntent) { document.removeEventListener('mouseout', mouseEvent); document.querySelector('.exit-intent-popup').classList.add('visible'); CookieService.setCookie('exitIntentShown', true, 30); } }; if (!CookieService.getCookie('exitIntentShown')) { setTimeout(() => { document.addEventListener('mouseout', mouseEvent); document.addEventListener('keydown', exit); document.querySelector('.exit-intent-popup').addEventListener('click', exit); }, 0); } / </script>   <div> <div id="myModal" class="modal">  <div class="modal-content"> <span class="closeA">×</span> <style> .downlink{ border:1px solid #aaa;color:white;padding:8px;width:98%;color:white;background:green;display:block; } .downlink:hover{ background:blue; cursor:pointer; } </style> <table style="width:80%;"> <tr style="width:100%;"> <td style="width:50%;"><a href="https://pdfprof.com/PDFV2/ShowLink_1.php?vidt=671&vt=27&links=https%3A%2F%2Fouilogique.com%2Ffiles%2F2018-02-17-html-embarque%2Fmicroclub-atelier-html-embarque.pdf" class="downlink" target="_blank">PDF Download</a> </td> <td style="width:45%;"><a href="https://pdfprof.com/PDFV2/Documents1/671/27/10" class="bblinkss"> Next PDF </a> </td></tr> </table> <iframe id="ppifa" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=https://ouilogique.com/files/2018-02-17-html-embarque/microclub-atelier-html-embarque.pdf&idt=671&t=27&view=10&url=https://pdfprof.com/PDFV2/Documents1/671/27/10" style="width:100%;height:90vh;" ></iframe> <script> / var iframe = document.getElementById("ppifa"); var srcv=iframe.src; var loadingStatus = false; function abc(){ iframe.onload = function () { loadingStatus = true; console.log('ok is loaded iframe'); } if(loadingStatus==false) { iframe.src=srcv; } } abc(); / </script> </div> </div> </div> <style> body {font-family: Arial, Helvetica, sans-serif;} / The Modal (background) / .modal { display: none; / Hidden by default / position: fixed; / Stay in place / z-index: 1; / Sit on top / padding-top: 10px; / Location of the box / left: 0; top: 0; width: 100%; / Full width / height: 100%; / Full height / overflow: auto; / Enable scroll if needed / background-color: rgb(0,0,0); / Fallback color / background-color: rgba(0,0,0,0.4); / Black w/ opacity / } / Modal Content / .modal-content { background-color: #fefefe; margin: auto; padding: 5px; border: 1px solid #888; width: 90%; } / The Close Button */ .closeA { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; background:red; padding:5px; } .closeA:hover, .closeA:focus { color: #000; text-decoration: none; cursor: pointer; } </style> <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("closeA")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>

[PDF] Cours HTML embarqué 1 janv. 2019 Ce document