Présentation des balises HTML

FONTE ZOOM:
HTML signifie HyperText Markup Language et est utilisé pour concevoir un site Web par exemple. Il ya beaucoup de tag que vous pouvez utiliser lors de l'écriture d'un fichier HTML. Voici un aperçu de certaines balises HTML communs et une description et parfois un exemple. Mais d'abord la base d'un fichier HTML sera décrit et ce qui est expliqué sur la structure des balises HTML.

Structurer les balises HTML

Une balise HTML peut être constitué de plusieurs parties. Il est important de pouvoir distinguer ces composants. Une balise HTML peut être constitué des éléments suivants:
  • Basic: Permet une balise HTML commence toujours.
  • Expansion: Permet choses supplémentaires sur l'étiquette dites, telles que la couleur et la taille.
  • Valeur: Vous indique comment elle est grande ou de quelle couleur il est.
  • Conclusion: Certaines balises nécessitent un joint pour indiquer bas délirant ils finissent. Ce est le point de base par une barre oblique avant.

Exemple:

HR indique qu'il se agit d'une ligne horizontale et la base.
Taille est l'expansion et dit quelque chose à propos de la taille de la ligne horizontale.
Le troisième est la valeur qui indique la taille de la ligne horizontale exactement.

Basé sur un fichier HTML

Un fichier HTML a toujours une structure de base qui est donnée ci-dessous. Cette base est constituée uniquement de base-tags. Expliqué dans la structure de base de ces balises sont.



</ TITLE> <br> </ HEAD> <br> <BODY> </ BODY> <br> </ HTML> <br> <br> </span> <div style="margin-top: 10px"> <span> <style type="text/css"> .rating_frame {margin: 10px 0px 10px 0px !important; width: 130px !important; background:#FFFFFF !important;} .rating_top {font-size: 10pt !important; padding: 3px 3px 3px 5px !important; border: 1px solid #e4e4e4 !important; background: #f9f9f9 url('/images/v_header.GIF') repeat-x !important; font-weight: bold !important; font-family: verdana !important;} .rating_bottom {border: 1px solid #e4e4e4 !important; border-top: none !important; font-size: 10pt !important; line-height: 1.2em !important; background: #fff !important; padding: 5px !important;} .rating_main {position:relative !important; height:21px !important; cursor:pointer; width:114px !important; display: inline-block; top: 3px} .rating_ground, .rating_votes, .rating_hover {height:21px !important; position:absolute !important} .rating_ground {background:url('/images/v_ratings_1.png'); width:114px !important; } .rating_votes {background:url('/images/v_ratings_1.png') 0 -22px} .rating_hover {background:url('/images/v_ratings_1.png') 0 -44px; display:none} .rating_zone {padding: 0px 0px 5px 5px !important; margin: 0px 0px 0px 0px; line-height: 0.2em !important;} .rating_loading_blink { -webkit-animation: rating_loading_blink 3s linear infinite; animation: rating_loading_blink 3s linear infinite; } @-webkit-keyframes rating_loading_blink { 0% { color: rgba(34, 34, 34, 1); } 50% { color: rgba(34, 34, 34, 0); } 100% { color: rgba(34, 34, 34, 1); } } @keyframes rating_loading_blink { 0% { color: rgba(34, 34, 34, 1); } 50% { color: rgba(34, 34, 34, 0); } 100% { color: rgba(34, 34, 34, 1); } } </style> <div class="rating_frame"> <div class="rating_top" id="rating_info"></div> <div class="rating_bottom"> <div class="rating_zone"> <div class="rating_main" id="rating_main"> <div class="rating_ground"></div> <div class="rating_hover" id="rating_hover"></div> <div class="rating_votes" id="rating_votes"></div> </div> </div> </div> </div><script type="text/javascript"> $(document).ready(function(){ RatingInitial = 0; RatingPageName = "presentation-des-balises-html"; RatingActivated = false; RatingSideA = 'Évaluation: '; RatingSideB = ' | Votes: '; RatingRates = 0; RatingVotes = 0; RatingTipSelect = 'Choisir '; RatingTipLoading = 'Chargement ...'; RatingTipLoadingShow = false; RatingTipDone = 'Adoptée voix!'; RatingTipDoneShow = false; RatingTipBlinking = true; RatingLockTime = 0.2; RatingPathPrefix = '/statistic/rating/'; RatingUrl = 'http://wunderking.com/categorie/computer/presentation-des-balises-html.php'; if (RatingActivated == false) $('#rating_votes').width(RatingInitial*22); $('#rating_info').append(RatingSideA + '<b>' + RatingInitial.toFixed(1) + '</b>'); he_voted = $.cookies.get('article_rating_'+RatingPageName); if(he_voted != null) { $("#rating_main").attr("title",RatingSideA + RatingInitial.toFixed(1) + RatingSideB + RatingVotes); } if(he_voted == null){ $('#rating_main').hover(function() { $('#rating_votes, #rating_hover').toggle(); }, function() { $('#rating_votes, #rating_hover').toggle(); }); var margin_doc = $("#rating_main").offset(); $("#rating_main").mousemove(function(e){ var widht_votes = e.pageX - margin_doc.left; if (widht_votes == 0) widht_votes =1 ; user_votes = Math.ceil(widht_votes/22); if (user_votes > 5) user_votes = 5; if (RatingActivated == false) $('#rating_hover').width(user_votes*22); $("#rating_main").attr("title",RatingTipSelect + user_votes); }); $('#rating_main').click(function(){ saved_vote = user_votes; RatingActivated = true; if (RatingTipBlinking) $("#rating_info").addClass('rating_loading_blink'); if (RatingTipLoadingShow) $("#rating_info").html(RatingTipLoading); $('#rating_loading img').toggle(); $.post( "/tools/rating_vote.php", {page: RatingPageName, rate: user_votes, message: RatingTipDone, prefix: RatingPathPrefix, url: RatingUrl}, function(data){ $('#rating_info').toggle(); if (RatingTipBlinking) $("#rating_info").removeClass('rating_loading_blink'); var rate_next = ((RatingRates + saved_vote)/(RatingVotes + 1)).toFixed(1); if (RatingTipDoneShow) $("#rating_info").html(RatingTipDone); else $("#rating_info").html(RatingSideA + '<b>' + rate_next + '</b>'); $('#rating_votes').width(rate_next*22); $('#rating_info, #rating_loading img').toggle(); $.cookies.set('article_rating_'+RatingPageName, 123, {hoursToLive: RatingLockTime}); $("#rating_main").attr("title",RatingSideA + rate_next + RatingSideB + (RatingVotes + 1)); $("#rating_main").unbind(); $('#rating_hover').hide(); $('#rating_votes').show(); } ) });}}); </script> </span> <span> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "2381967530"; google_ad_width = 468; google_ad_height = 15; </script> <!-- Wunderking 468x15 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </span> </div> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "3858700734"; google_ad_width = 580; google_ad_height = 400; </script> <!-- Wunderking 580x400 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <style type="text/css"> .quick_links {width: 90%; height: 43px; margin: 0px 0px 5px 0px !important; padding: 10px 15px !important; display: inline-block; box-shadow: none; font-size: 15px; line-height: 1.42857143;color: #2c3e50;border: 2px solid #dce4ec;border-radius: 4px;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;font-family: inherit;box-sizing: border-box; cursor: pointer;} .quick_links:focus {border: 2px solid #A2D0FD;} .quick_links_copy { margin: 5px !important; width: 32px; height: 32px; position: relative; top: 8px; display: inline-block; border: none; background: url(/images/links_copy.png) no-repeat; cursor: pointer;} .quick_links_copy:hover { opacity: 0.6;} #quick_links_block p { margin: 10px 0px 10px 0px !important; padding: 0px !important;} #quick_links_block h2 { margin: 20px 0px 5px 0px !important; font-size: 16px !important; color: rgb(19, 83, 86) !important; font-family: 'Comic Sans MS'; } @media screen and (max-device-width: 533px), screen and (max-width: 533px) { #quick_links_block {display: none;} } @-moz-document url-prefix() { .quick_links { margin: 15px 0px 5px !important; } .quick_links_copy { margin: 5px !important; top: -5px; } } </style> <div id="quick_links_block"> <h2>Lien vers le site / blog:</h2> <p> <button title="Sélectionnez le lien" class="quick_links_copy" onclick="LinkCopyA()" onfocus="this.blur()"></button> <input type="text" class="quick_links" id="quick_links_a" value='<a href="http://wunderking.com/categorie/computer/presentation-des-balises-html.php" title="Présentation des balises HTML">Présentation des balises HTML</a>' onclick="this.select()" readonly/> </p> <h2>Lien til forums (BB-code):</h2> <p> <button title="Sélectionnez le lien" class="quick_links_copy" onclick="LinkCopyB()" onfocus="this.blur()"></button> <input type="text" class="quick_links" id="quick_links_b" value='[url=http://wunderking.com/categorie/computer/presentation-des-balises-html.php]Présentation des balises HTML[/url]' onclick="this.select()" readonly/> </p> </div><script type="text/javascript"> function LinkCopyA() { $("#quick_links_a").select(); } function LinkCopyB() { $("#quick_links_b").select(); } </script> </div> <div class="aline"></div> <div id="article-tags"> <div class="font_bold">TAGS: <a href="#">html</a>, <a href="#">tag</a>, <a href="#">étiquettes</a>, <a href="#">aperçu</a>, <a href="#">l'explication</a>, <a href="#">la description</a>, <a href="#">par exemple</a>, <a href="#">la structure</a>, <a href="#">fichier</a>, <a href="#">programme</a> </div></div> <div class="aline"></div> <div id="article_other"> <div class="font_bold article_other_header">VOIR AUSSI:</div> <ol class="font_bold"> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/whatsapp-pour-windows-comment-utiliser-le-messager-sur-votre-pc.php" title="WhatsApp pour Windows - comment utiliser le messager sur votre PC"><img src="/images/article_image.png" class="article-other_image"></a></div> <div class="postmeta"> <h2 class="small"><a href="http://wunderking.com/categorie/computer/whatsapp-pour-windows-comment-utiliser-le-messager-sur-votre-pc.php">WhatsApp pour Windows - comment utiliser le messager sur votre PC</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/twitter-quest-ce-que-rt-et-dautres-raccourcis.php" title="Twitter: Qu'est-ce que RT - et d'autres raccourcis"><img src="/images/article_image.png" class="article-other_image"></a></div> <div class="postmeta"> <h2 class="small"><a href="http://wunderking.com/categorie/computer/twitter-quest-ce-que-rt-et-dautres-raccourcis.php">Twitter: Qu'est-ce que RT - et d'autres raccourcis</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/serigraphie-information.php" title="Sérigraphie - Information"><img src="/images/article_image.png" class="article-other_image"></a></div> <div class="postmeta"> <h2 class="small"><a href="http://wunderking.com/categorie/computer/serigraphie-information.php">Sérigraphie - Information</a></h2> </div> <div class="cleaner"> </div> </li> </ol> <div style="margin-top: 10px"> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "2381967530"; google_ad_width = 468; google_ad_height = 15; </script> <!-- Wunderking 468x15 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <script type="text/javascript"> </script> </div> <div class="aline"></div> <style type="text/css"> @font-face { font-family: "likes-icons"; font-style: normal; font-weight: normal; src: url('/images/fonts_additional/likes-icons.eot') format("embedded-opentype"), url('/images/fonts_additional/likes-icons.woff') format("woff"), url('/images/fonts_additional/likes-icons.ttf') format("truetype"), url('/images/fonts_additional/likes-icons.svg') format("svg"); } @font-face { font-family: "Yanone Kaffeesatz"; font-style: normal; font-weight: 700; src: local("Yanone Kaffeesatz Bold"), local("YanoneKaffeesatz-Bold"), url('/images/fonts_additional/yanone.woff') format("woff"); } .clearfix { clear: both } .comment_hide { display: none} .comment_item {margin: 15px 0px 15px 0px !important; padding: 0px !important; } .comment_item p { margin: 5px 0px 15px 0px !important; padding: 0px !important; } .comment_item_author { color: rgb(34, 34, 34); font-family: "Helvetica Neue",Arial,Tahoma,sans-serif; font-weight: bold; } .comment_item_logo { width: 48px; height: 48px; float: left; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); margin: -5px 5px 5px 0px !important; padding: 4px !important; cursor: pointer; } .comment_item_logo:hover { opacity: 0.8;} .comment_item_author cite { font-style: normal; } .comment_item_says {color: rgb(235, 97, 105)} .comment_item_date { font-family: "Helvetica Neue",Arial,Tahoma,sans-serif; color: rgb(123, 123, 123); text-decoration: none; font-size: 11px; margin: 0px 0px 20px 0px !important; text-decoration: none; } .comment_item_header {line-height: 22px;} .comment_item_content {font-family: 'Comic Sans MS'; font-size: 14px;} .comment_item_likes {float: right;} .comment_item_like_value {float: left; padding: 11px 13px 9.5px 13px; border-radius: 4px 0px 0px 4px; color: #fff; background-color: #545659; box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); font-weight: normal; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing: .01em; text-transform: uppercase;} .comment_item_like_inc:before { content: "\e628"; } .comment_item_like_dec:before { content: "\e62a"; } .comment_item_like_inc {padding: 12px 13px 12px 13px; background-color: #fff; color: #bcbdc0; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 0px 1px 1px; font-family: "likes-icons"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; cursor: pointer;} .comment_item_like_dec {padding: 12px 13px 12px 13px; background-color: #fff; color: #bcbdc0; border: 1px solid rgb(221, 221, 221); border-radius: 0px 4px 4px 0px; font-family: "likes-icons"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; cursor: pointer;} .comment_item_like_inc:hover { color: rgb(51, 51, 51) !important; background-color: #F4F9FD; } .comment_item_like_dec:hover { color: rgb(51, 51, 51) !important; background-color: #F4F9FD; } .comment_item_likes_style_1 { line-height: 27px; cursor: default; display: inline-block; white-space: nowrap; direction: ltr; text-indent: 0px; position: relative; background-attachment: scroll; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 12px; font-weight: 700; margin: 0px; padding: 0px; border-width: 0px; text-decoration: none; text-transform: none; direction: ltr; text-indent: 0px; text-shadow: none; box-sizing: content-box; } .comment_item_likes_style_1_like_wrap, .comment_item_likes_style_1_dislike_wrap { background-color: transparent; border: 1px solid transparent; border-radius: 2px; color: rgb(102, 102, 102); height: 27px; padding: 0px 7px 0px 8px; display: inline-block; margin-right: 3px; overflow: visible; } .comment_item_likes_style_1_like_wrap:hover, .comment_item_likes_style_1_dislike_wrap:hover { background-color: rgb(248, 248, 248); border: 1px solid rgb(198, 198, 198); color: rgb(51, 51, 51); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset; border-radius: 2px; height: 27px; } .comment_item_likes_style_1_button { line-height: 27px; display: inline-block; color: rgb(120, 120, 105); overflow: visible; position: relative; text-decoration: none; outline: medium none; top: 0px; } .comment_item_likes_style_1_button span { vertical-align: middle; } .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon:hover { background-image: url('/images/comments_likes_1.png'); opacity: 0.66; display: inline-block; cursor: pointer; height: 16px; margin-right: 2px; width: 16px; vertical-align: middle; } .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1 .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1 .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon { opacity: 1; } .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon { background-image: url('/images/comments_dislikes_1.png'); opacity: 0.66; display: inline-block; cursor: pointer; height: 16px; margin-right: 2px; width: 16px; vertical-align: middle; } .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon { opacity: 1; } .comment_item_likes_style_1_counter { height: 27px; display: inline-block; padding: 0px 2px 0px 4px; font-size: 13px; font-weight: normal; position: relative; top: 0px; vertical-align: middle; } .comment_item_likes_style_2 { line-height: 24px; cursor: default; display: inline-block; white-space: nowrap; direction: ltr; text-indent: 0px; position: relative; background-attachment: scroll; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 12px; font-weight: 700; margin: 0px; padding: 0px; border-width: 0px; text-decoration: none; text-transform: none; direction: ltr; text-indent: 0px; text-shadow: none; box-sizing: content-box; } .comment_item_likes_style_2_like_wrap, .comment_item_likes_style_2_dislike_wrap { background-color: transparent; color: rgb(85, 85, 85); height: 26px; border-radius: 2px; display: inline-block; margin-right: 3px; overflow: visible; padding: 1px 0px 1px 3px; } .comment_item_likes_style_2_button {display: inline-block; color: rgb(120, 120, 105); overflow: visible; position: relative; text-decoration: none; outline: medium none; top: 1px;} .comment_item_likes_style_2_like_icon, .comment_item_likes_style_2_dislike_icon { height: 24px; width: 24px; display: inline-block; cursor: pointer; margin-right: 2px; vertical-align: middle; } .comment_item_likes_style_2_like_icon { background-image: url('/images/comments_likes_2_1.png'); } .comment_item_likes_style_2_like_icon:hover { background-image: url('/images/comments_likes_2_2.png'); } .comment_item_likes_style_2_dislike_icon { background-image: url('/images/comments_dislikes_2_1.png'); } .comment_item_likes_style_2_dislike_icon:hover { background-image: url('/images/comments_dislikes_2_2.png'); } .comment_item_likes_style_2_counter { height: 24px; display: inline-block; padding: 0px; font-weight: normal; position: relative; top: 1px; vertical-align: middle; } #comments_block { width: 99%; margin: 0px 0px 15px 0px !important; padding: 0px 0px 0px 0px !important; border: 1px solid rgb(205, 205, 205);} #comments_inner { margin: 10px 0px 10px 0px !important;} #comments_zone {margin: 10px !important; padding: 10px !important; border: 1px solid rgb(205, 205, 205); background-color: rgb(235, 235, 235);} .comments_sep { background: url('/images/comments_sep.gif') repeat-x scroll left top transparent; height: 10px; clear: both } .comments_header { margin: 0px !important; padding: 0px !important; border-bottom: 1px solid rgb(205, 205, 205); background-color: rgb(250, 250, 250); background-image: -moz-linear-gradient(center top , rgb(255, 255, 255), rgb(242, 242, 242)); background-repeat: repeat-x; } .comments_legend { display: block; width: 100%; padding: 0pt; margin-bottom: 5px; font-size: 14px; text-transform: uppercase; font-weight: bold; line-height: 20px; color: rgb(51, 51, 51); border: 0pt none; } .comments_legend_h {position: relative; top: 4px} .comments_legend_spot {background:url(/images/toggle.png); display: inline-block; width: 14px; height: 14px; margin-top: 6px; float: right; color: rgb(153, 153, 153);} #comments_toggle { display: block; margin: 0px !important; padding: 8px 15px !important; cursor: pointer; text-decoration: none; } #add_block { width: 99%; background-color: rgb(250, 251, 252); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 1px solid rgb(205, 205, 205); } #add_block label { margin: 0px !important; padding: 0px !important; } #add_block p { margin: 10px 0px 10px 0px !important; padding: 0px !important;} #add_block textarea { margin: 10px 0px 10px 0px !important;} #add_inner { margin: 10px !important} #add_header { margin: 0px 0px 15px 0px !important; padding: 10px 0px 0px 0px !important; font-size: 14px !important; text-transform: uppercase; font-weight: bold; } .add_sep { margin: 0px 0px 15px 0px !important; background: url('/images/comments_sep.gif') repeat-x scroll left top transparent; height: 10px; clear: both } #add_submit { width: 100%; padding: 10px !important } #get_logo img { width: 48px; height: 48px; opacity: 0.4; border: 1px solid rgb(221, 221, 221); padding: 10px !important; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } #get_logo img:hover { opacity: 1.0; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; } #get_logo .selected { opacity: 1.0; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; } #cap_image {margin: 0px 10px 0px 0px !important; border: 1px solid rgb(205, 205, 205); width: 130px; height: 61px; float: left;} #cap_code_refresh { width: 32px; height: 32px; border: none; background: url(/images/cap_refresh.png) no-repeat; position: relative; top: 10px; cursor: pointer;} #cap_code_refresh:hover { opacity: 0.8;} #cap_field { position: relative; top: 0px } #cap_enter_wrap { position: relative; left: 10px;} #get_author { width: 98%; margin: 0px !important; padding: 5px !important; font-size: 16px !important; color: rgb(69, 85, 247); } #get_text { width: 98%; height: 160px; margin: 0px !important; padding: 5px !important; font-size: 16px !important; margin-top: 10px; color: rgb(168, 30, 249); } #get_code { width: 130px; margin: 0px 5px 0px 0px !important; padding: 5px !important; font-size: 16px !important; text-transform: uppercase; text-align: center;} #get_tip {margin: 0px 0px 10px 0px !important; padding: 10px 10px 10px 60px !important; display: none; border: 1px solid rgb(205, 205, 205); align: center;} .tip_red {background-color: rgb(250, 232, 228) !important; background: url(/images/icon-tip_red.png) no-repeat 10px;} .tip_green {background-color: rgb(228, 250, 233) !important; background: url(/images/icon-tip_green.png) no-repeat 10px;} .tip_blue {background-color: rgb(228, 242, 250) !important; background: url(/images/icon-tip_blue.png) no-repeat 10px;} .tip_spot {background-color: rgb(233, 249, 250) !important;} @media screen and (max-device-width: 800px), screen and (max-width: 800px) { #get_author, #get_text { width: 96%;} } @media screen and (max-device-width: 414px), screen and (max-width: 414px) { #get_author, #get_text { width: 95%;} } @media screen and (max-device-width: 375px), screen and (max-width: 375px) { #cap_image {float: none; margin: 0px 10px 10px 0px !important;} } @media screen and (max-device-width: 176px), screen and (max-width: 176px) { #cap_image {width: 125px} #get_code {width: 100px} #cap_code_refresh {top: 5px; left: 10px} } @-moz-document url-prefix() { #cap_code_refresh { top: 0px;} #cap_field { position: relative; top: 10px} #cap_enter_wrap { bottom: 10px} } #add_submit { padding: 12px !important; background: url('/images/button_submit.png') repeat-x scroll 0% 0% rgb(29, 111, 167); border: 1px solid rgb(21, 92, 142); text-shadow: -1px -1px rgb(19, 70, 104); border-radius: 3px; color: white; cursor: pointer; font-size: 14px; font-weight: bold; text-decoration: none; font-family: "Helvetica Neue",Arial,Tahoma,sans-serif;} #add_submit:hover { background: none repeat scroll 0% 0% rgb(29, 111, 167); } #add_submit2 { font-weight: 700; color: rgba(255,255,255,.9); text-shadow: #2e7ebd 0 1px 2px; text-decoration: none; text-align: center; line-height: 1.1; white-space: pre-line; border: 1px solid; border-color: #60a3d8 #2970a9 #2970a9 #60a3d8; border-radius: 6px; outline: none; background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce); box-shadow: inset rgba(255,255,255,.5) 1px 1px; cursor: pointer; } #add_submit2:hover { color: rgb(255,255,255); background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce); } #comments_more_wrap {margin: 10px 10px -7px 10px !important;} .comments_more_button { margin: 0px 0px 10px 0px !important; padding: 20px 30px !important; text-transform: uppercase; font-family: 'Comic Sans MS','Yanone Kaffeesatz',sans-serif; font-size: 19px; display: inline-block; color: rgb(0, 0, 0); width: 100%; text-align: center; text-decoration: none; border: 1px solid rgb(222, 219, 209); border-radius: 5px; transition: all 0.2s ease-out 0s; background: none repeat scroll 0% 0% rgb(255, 255, 255); cursor: pointer; } .comments_more_button:hover { background-color: rgb(84, 84, 84); color: rgb(255, 255, 255) !important; } .tooltip_default { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#0088e2), to(#005cc4)); background-image: -webkit-linear-gradient(top, #0088e2, #005cc4); background-image: -moz-linear-gradient(top, #0088e2, #005cc4); background-image: -ms-linear-gradient(top, #0088e2, #005cc4); background-image: -o-linear-gradient(top, #0088e2, #005cc4); background-image: linear-gradient(to bottom, #0088e2, #005cc4); color: white;font-weight: normal; padding: 8px; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.5); margin-top: 10px; text-shadow: -1px -1px 0px rgba(0,0,0,0.4); } .tooltip_default:after { content: ''; border-top: 10px solid #005cc4; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 35%; top: 85%; } .tooltip_biggrey { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f6f6f6)); background-image: -webkit-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -moz-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -ms-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -o-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: linear-gradient(to bottom, #f9f9f9, #f6f6f6); color: rgb(22, 22, 22); width: 140px; height: 25px; padding: 30px 20px 20px 20px; border: 1px solid #e5e5e5; border-radius: 5px; box-shadow: 0px 2px 0px rgba(0,0,0,0.1); margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); text-align: center; font-size: 18px; font-weight: bold } .tooltip_biggrey:after { content: ''; border-top: 10px solid #f6f6f6; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 45%; margin-top: 2.5em; } .tooltip_biggrey:before { content: ''; border-top: 10px solid rgba(0,0,0,0.1); border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 45%; margin-top: 2.5em; } .tooltip_softblue { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#ddeefe), to(#c0e0f1)); background-image: -webkit-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -moz-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -ms-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -o-linear-gradient(top, #ddeefe, #c0e0f1); background-image: linear-gradient(to bottom, #ddeefe, #c0e0f1); color: #3f4b53; font-weight: bold; padding: 5px 20px; border-radius: 20px; border: 1px solid #c0d9e9; margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); } .tooltip_softblue:after { content: ''; border-top: 6px solid #c0e0f1; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.5em; } .tooltip_softblue:before { content: ''; border-top: 6px solid #c0d9e9; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.5em; } .tooltip_bigyellow { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#f7e29a), to(#deb223)); background-image: -webkit-linear-gradient(top, #f7e29a, #deb223); background-image: -moz-linear-gradient(top, #f7e29a, #deb223); background-image: -ms-linear-gradient(top, #f7e29a, #deb223); background-image: -o-linear-gradient(top, #f7e29a, #deb223); background-image: linear-gradient(to bottom, #f7e29a, #deb223); color: #2c170a; font-weight: bold; width: 100px; padding: 12px 20px; border-radius: 20px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5); border: 1px solid #d9c171; margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); text-align: center; z-index: 8; } .tooltip_bigyellow:after { content: ''; border-top: 6px solid #deb223; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.9em; } .tooltip_black { font-family: sans-serif; font-size: 0.875em; text-align: center; text-shadow: 0 1px rgba( 0, 0, 0, .5 ); line-height: 1.5; color: #fff; background: #333; background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) ); background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); position: absolute; z-index: 100; padding: 15px; } .tooltip_black:after { content: ''; border-top: 10px solid #333; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 35%; top: 92%; } </style> <div id="comments_block"> <div class="comments_header"> <a id="comments_toggle" onclick="ToggleComments('#comments_inner')" onmousedown="return false"> <span class="comments_legend"><span class="comments_legend_h">Commentaires - 0</span><i class="comments_legend_spot"></i></span> </a> </div> <div id="comments_inner"> <div id="comments_zone"> <div> Sans commentaires </div> <div class="clearfix"></div> </div> <div id="comments_more_wrap"> <button class="comments_more_button" onclick="MoreComments()" onfocus="this.blur()">Autres commentaires</button> </div> </div> </div> <div id="add_block"> <div id="add_inner"> <h3 id="add_header">Laisser un commentaire</h3> <div class="add_sep"></div> <form method="post"> <p> <label for="get_author">Nom :</label> <div><input id="get_author" name="get_author" maxlength="30" value="" type="text"></div> </p> <p> <label for="get_text">Commentaire :</label> <textarea id="get_text" name="get_text" maxlength="3000"></textarea> </p> <p> <label for="get_logo">Choisissez avatar :</label> <div id="get_logo"> <div> <img src="/images/comment_logo_m_1.png"> <img src="/images/comment_logo_m_2.png"> <img src="/images/comment_logo_m_3.png"> <img src="/images/comment_logo_m_4.png"> </div> <div> <img src="/images/comment_logo_w_1.png"> <img src="/images/comment_logo_w_2.png"> <img src="/images/comment_logo_w_3.png"> <img src="/images/comment_logo_w_4.png"> </div> </div> </p> <p> <div id="cap_image"> <img src="/tools/comment_captcha.php" id="cap_source" alt="Code De Sécurité"/> </div> <div id="cap_field"> <div id="cap_enter_wrap"><label for="get_code">Entrez le code :</label></div> <div style="display: inline-block"><input id="get_code" name="get_code" maxlength="8" value="" type="text"></div> <div style="display: inline-block"><input id="cap_code_refresh" type="button" value="" onclick="RefreshCode()" onfocus="this.blur()" tooltip="Recharger le code"></div> </div> <div class="clearfix"></div> </p> <div id="get_tip"></div> <p> <input name="add_submit" id="add_submit" type="button" value="Envoyer" onclick="AddComment()"> </p> </form> </div> </div><script type="text/javascript"> jQuery.fn.extend({ insert: function(myValue){ return this.each(function(i) { if (document.selection) { this.focus(); var sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if (this.selectionStart || this.selectionStart == '0') { var startPos = this.selectionStart; var endPos = this.selectionEnd; var scrollTop = this.scrollTop; this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length); this.focus(); this.selectionStart = startPos + myValue.length; this.selectionEnd = startPos + myValue.length; this.scrollTop = scrollTop; } else { this.value += myValue; this.focus(); } }) } }); CommentsAddDone = false; CommentsAddLock = false; CommentsCount = 0; CommentsHideMode = true; CommentsHideFlag = true; CommentsHideVal = 5; CommentStatus = true; CommentsLogoIndex = 0; CommentsLogoApply = true; CommentsLogoSaveTime = 0.2; CommentsAddTipHasBeen = 'Vous avez laissé votre commentaire!'; CommentsAddTipUnfilled = 'Tous les champs sont remplis.'; CommentsAddTipDone = 'Commentaire ajouté!'; CommentsAddTipBadcode = 'Code erroné. essayer à nouveau.'; CommentsAddTipFilter = 'Texte de votre commentaire viole les règles sur notre site. Se il vous plaît changer.'; CommentsLikeLockTime = 0.2; CommentsAddLockTime = 0.3; CommentsAddDelay = 4000; CommentsPageName = 'presentation-des-balises-html'; CommentsPathPrefix = '/statistic/comments/'; CommentsUrl = 'http://wunderking.com/categorie/computer/presentation-des-balises-html.php'; $(document).ready(function(){ is_posted = $.cookies.get('article_comment_'+CommentsPageName); if(is_posted !== null){ $("#get_tip").html(CommentsAddTipHasBeen); $("#get_tip").addClass('tip_blue'); $('#get_tip').show(); document.getElementById('add_submit').disabled = false; CommentsAddLock = true; } if (CommentsHideFlag) { if (CommentsCount > CommentsHideVal && CommentsHideMode) $('#comments_more_wrap').show(); else $('#comments_more_wrap').hide(); CommentsHideFlag = false; } saved_logo = $.cookies.get('selected_logo_id'); if (CommentsLogoApply) { CommentsLogoApply = false; if (saved_logo !== null) CommentsLogoIndex = saved_logo; $('#get_logo img:eq(' + CommentsLogoIndex + ')').addClass('selected'); } $('#get_logo img').click(function(){ $('#get_logo img').removeClass('selected'); $(this).addClass('selected'); CommentsLogoIndex = $("#get_logo img").index(this); $.cookies.set('selected_logo_id', CommentsLogoIndex, {hoursToLive: CommentsLogoSaveTime}); }); }); function MoreComments() { $('.comment_hide').slideToggle('slow'); $('.comment_item, .comments_sep').removeClass('comment_hide'); $('#comments_more_wrap').hide(); } function ToggleComments(elements, is_blur) { if (is_blur === undefined) is_blur = false; if (is_blur) $(elements).slideUp(); else $(elements).slideToggle('normal'); if (CommentStatus) $(".comments_header").css("border-bottom", "0px"); else $(".comments_header").css("border-bottom", "1px solid rgb(205, 205, 205)"); if (CommentStatus) CommentStatus = false; else CommentStatus = true; } function GetReply(index) { var author_name = $(".comment_" + index + "_author").text(); var prev_text = $("#get_text").text(); $("#get_text").focus(); $("#get_text").insert(author_name); $('html, body').animate({ scrollTop: $('#get_author').offset().top }, 1000); } function LikesInc(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'likes'}, function(data){ $("#comment_" + index + "_g_likes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function DislikesInc(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'dislikes'}, function(data){ $("#comment_" + index + "_g_dislikes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function LikeInc(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'inc'}, function(data){ $("#comment_" + index + "_likes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function LikeDec(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'dec'}, function(data){ $("#comment_" + index + "_likes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function RefreshCode() { $("#cap_source").attr("src","/tools/comment_captcha.php?nocash="+Math.random()); } function CheckFields() { var Cond = true; if (document.getElementById('get_author').value=='') Cond = false; else if (document.getElementById('get_text').value=='') Cond = false; return Cond; } function HideTip() { if (!CommentsAddDone) { $('#get_tip').hide(); } } function LightFields() { if (document.getElementById('get_author').value=='') { $("#get_author").addClass('tip_spot'); setTimeout(function(){ $("#get_author").removeClass('tip_spot'); },2000); } if (document.getElementById('get_text').value=='') { $("#get_text").addClass('tip_spot'); setTimeout(function(){ $("#get_text").removeClass('tip_spot'); },2000); } $("#get_tip").html(CommentsAddTipUnfilled); $("#get_tip").removeClass('tip_blue'); $("#get_tip").addClass('tip_red'); $('#get_tip').show(); setTimeout(function(){ HideTip(); },4000); } function AddComment() { if (CommentsAddLock) return false; if (CheckFields()) { SendComment(); } else LightFields(); } function SendComment() { $(document).ready(function(){ is_posted = $.cookies.get('article_comment_'+CommentsPageName); if(is_posted == null){ document.getElementById('add_submit').disabled = true; $.post( "/tools/comment_filter.php", {author: $("#get_author").val(), text: $("#get_text").val()}, function(data){ if (data == 'true') { $.post( "/tools/comment_check.php", {code: $("#get_code").val()}, function(data){ if (data == 'true') { CommentsAddDone = true; var GLogo = $('#get_logo img'); if (GLogo.length > 0) { GLogo = $('#get_logo img:eq(' + CommentsLogoIndex + ')').attr("src") } else GLogo = '/images/comment_logo.png'; $.post( "/tools/comment_write.php", {comment_author: $("#get_author").val(), comment_text: $("#get_text").val(), comment_logo: GLogo, page: CommentsPageName, prefix: CommentsPathPrefix, url: CommentsUrl}, function(data){ $("#get_tip").html(CommentsAddTipDone); $("#get_tip").removeClass('tip_blue'); $("#get_tip").removeClass('tip_red'); $("#get_tip").addClass('tip_green'); $('#get_tip').show(); $.cookies.set('article_comment_'+CommentsPageName, data, {hoursToLive: CommentsAddLockTime}); $("#add_submit").unbind(); setTimeout(function() {location.reload();}, CommentsAddDelay); $("#get_author").val(''); $("#get_text").val(''); $("#get_code").val(''); } ) } else if (data == 'false') { document.getElementById('add_submit').disabled = false; $("#get_tip").html(CommentsAddTipBadcode); $("#get_tip").removeClass('tip_blue'); $("#get_tip").addClass('tip_red'); $('#get_tip').show(); $("#get_code").addClass('tip_spot'); setTimeout(function(){ $("#get_code").removeClass('tip_spot'); },2000); setTimeout(function(){ HideTip(); },4000); } } ) } else if (data == 'false_a_t' || data == 'false_a' || data == 'false_t') { document.getElementById('add_submit').disabled = false; $("#get_tip").html(CommentsAddTipFilter); $("#get_tip").removeClass('tip_blue'); $("#get_tip").addClass('tip_red'); $('#get_tip').show(); setTimeout(function(){ HideTip(); },12000); if (data == 'false_a_t' || data == 'false_a') $("#get_author").addClass('tip_spot'); if (data == 'false_a_t' || data == 'false_t') $("#get_text").addClass('tip_spot'); setTimeout(function(){ if (data == 'false_a_t' || data == 'false_a') $("#get_author").removeClass('tip_spot'); if (data == 'false_a_t' || data == 'false_t') $("#get_text").removeClass('tip_spot'); },5000); } } ) } }); } </script> </div> </div> <div class="sidebar"> <div id="contents_list" class="bordered" style="border-bottom:0px"> <h2 class="font_bold toggle-trigger">CONTENU</h2> <ul class="toggle-container block"> <li><a href="#Structurer-les-balises-HTML">Structurer les balises HTML</a></li> <li><a href="#Basé-sur-un-fichier-HTML">Basé sur un fichier HTML</a></li> </ul> </div> <div id="sidebar_adsence_big" class="bordered" style="border-bottom: 0px"> <h2 class="font_bold toggle-trigger">ADSENCE</h2> <ul class="toggle-container block" style="margin-top: 25px"> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "5614635539"; google_ad_width = 160; google_ad_height = 600; </script> <!-- Wunderking 160x600 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </ul> </div> <div id="category_list" class="bordered"> <h2 class="font_bold toggle-trigger">CATÉGORIES</h2> <ul class="toggle-container block"> <li><a href="/categorie/auto">Auto</a></li> <li><a href="/categorie/beaute">Beauté</a></li> <li><a href="/categorie/computer">Computer</a></li> <li><a href="/categorie/education">Éducation</a></li> <li><a href="/categorie/famille">Famille</a></li> <li><a href="/categorie/miscellany">Miscellany</a></li> <li><a href="/categorie/nature">Nature</a></li> <li><a href="/categorie/nourriture">Nourriture</a></li> <li><a href="/categorie/recreation">Récréation</a></li> <li><a href="/categorie/sante">Santé</a></li> <li><a href="/categorie/sport">Sport</a></li> <li style="border-bottom:0px"><a href="/categorie/technology">Technology</a></li> </ul> </div> </div> </div> <div class="twitter-reader"> <div id="twitter-holder"> <div id="footer_search"> <script> (function() { var cx = '015828302691840625181:hbjenipyazs'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> </div> </div> </div> </div> </div> <div id="footer"> <div class="degree"> <div class="wrapper"> <div id="social-bar"> <ul class="follow-us"> <li><span>SOCIAL</span></li> <div class="share42init"> <script type="text/javascript" src="/scripts/share42/share42.js"></script> </div> </ul> <span id="get_time"><script type="text/javascript">show_clock();</script></span> </div> <ul class="footer-cols"> <div id="copyright" class="font_bold">© 2015 Wunderking.com</div> </ul> </div> </div> </div> <div id="bottom"> </div> <style type="text/css"> .gotop_button { position: fixed; z-index: 1000; bottom: 20px; right: 20px; display: none; } .gotop_button a { display: block; width: 44px; height: 44px; opacity: 0.8; background: url('/images/backtotop2.png') no-repeat scroll center center transparent; text-indent: -9999px; transition: all 0.4s ease 0s; } .gotop_button a:hover { opacity: 1.0 } @media screen and (max-device-width: 800px), screen and (max-width: 800px) { .gotop_button a {display: none !important;} } </style> <div id="gotop_button" class="gotop_button"><a href="#" onfocus="this.blur()"></a></div><script type="text/javascript"> GotopDistance = 200; GotopBottomHide = false; $(window).scroll(function(){ var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop(); if($(window).scrollTop() > GotopDistance && (GotopBottomHide == false || (GotopBottomHide && scrollBottom > 150))){ $("#gotop_button").fadeIn(200); } else{ $("#gotop_button").fadeOut(200); } }); $('#gotop_button').click(function() { $('html, body').animate({ scrollTop:0 }, '800'); return false; }); </script> </body> </html>