HTML principes de base

FONTE ZOOM:
Pour créer un site web, vous avez besoin d'une certaine connaissance de HTML. HTML est la base d'un site web. Dans cet article, vous pouvez lire les bases du HTML.

Site Web

Si vous voulez créer un site web, vous avez besoin d'un hébergeur. Il ya beaucoup de possibilités dans ce domaine. Lorsque vous cherchez un hébergeur ne oubliez pas à l'avance ce que vous voulez avec votre site web. Si vous voulez créer un site de photo, vous avez besoin d'un hébergeur avec beaucoup de rangement et de trafic de données. Hébergeur que vous avez dans différentes formes et tailles. Il ya l'hébergement gratuit et hébergeur payant. Le coût d'un hébergeur dépend de la quantité dont vous avez besoin.

Éditeur HTML

Pour créer un fichier HTML standard, vous avez besoin d'un éditeur de texte. Vous pouvez utiliser ?? ?? bloc-notes qui est inclus avec Windows, mais vous pouvez également utiliser un éditeur HTML. Ce est plus facile et travaille beaucoup plus vite. Ces suffisent à trouver sur l'Internet et est souvent freeware.

Mots clés

Lorsque vous travaillez avec des balises HTML. Ses commande ?? s. Ces commandes ?? s toujours entre . Si vous finissez une commande, vous finissez toujours avec un /. En d'autres termes, il devrait ressembler à ceci . Si vous êtes / ne sont pas en utilisant cela pourrait avoir de graves conséquences pour votre page.

Fichier HTML de base

Un fichier de base de HTML est la suivante.



Voici le titre de votre page </ TITLE> <br> </ HEAD> <br> <br> <BODY> Ce est là tout le contenu de votre page. <br> </ BODY> <br> <br> </ HTML> </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 = "html-principes-de-base"; 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/html-principes-de-base.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/html-principes-de-base.php" title="HTML principes de base">HTML principes de base</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/html-principes-de-base.php]HTML principes de base[/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="#">les balises</a>, <a href="#">corps</a>, <a href="#">la tête</a>, <a href="#">la base</a>, <a href="#">de créer un site web</a>, <a href="#">fichier html</a>, <a href="#">titre</a>, <a href="#">texte</a>, <a href="#">couleurs</a>, <a href="#">fond</a>, <a href="#">tutoriels</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/minecraft-open-forum-comment-cela-fonctionne.php" title="Minecraft: Open Forum - comment cela fonctionne:"><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/minecraft-open-forum-comment-cela-fonctionne.php">Minecraft: Open Forum - comment cela fonctionne:</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/mini-pc-comme-une-maison-comment-cela-fonctionne.php" title="Mini-PC comme une maison - comment cela fonctionne:"><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/mini-pc-comme-une-maison-comment-cela-fonctionne.php">Mini-PC comme une maison - comment cela fonctionne:</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/excel-enregistrer-en-pdf-manuel.php" title="Excel Enregistrer en PDF - Manuel"><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/excel-enregistrer-en-pdf-manuel.php">Excel Enregistrer en PDF - Manuel</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 = 'html-principes-de-base'; CommentsPathPrefix = '/statistic/comments/'; CommentsUrl = 'http://wunderking.com/categorie/computer/html-principes-de-base.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="#Site-Web">Site Web</a></li> <li><a href="#Éditeur-HTML">Éditeur HTML</a></li> <li><a href="#Mots-clés">Mots clés</a></li> <li><a href="#Fichier-HTML-de-base">Fichier HTML de base</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>