Question:
I Need help on website coding!?
JazzyJ
2010-06-11 08:20:56 UTC
Hello! I'm wondering what are the coding used when websites insert "HTML coding" or "DIV tags" etc.. onto their content. Like how do they make the TAGS into their own content without it been a part of their own website coding. For example this site here: http://www.w3schools.com/tags/tag_comment.asp

It says the comment tag inside the box. I'm wondering how do they do that??
Like how do they put it out for people to view the coding, so it does not get in the way of you're own website coding? if you know what I mean..?

Like how do they put the coding i.e: and other codings inside a box for others to see, so it does not interfere with you're own websites coding. Is there a prticular coding they use for the coding to not be apart of there own website? <br /> <br />Would love someone to help me out. Thanks. </div> </div> <div style="margin-top: 20px;"> </div> <!-- /22218282545/desktop//first-post --> <div class="ads_show_me_the_borders" id='div-gpt-ad-1628417380408-0' style='min-width: 250px; min-height: 30px; margin-left: 10px;'></div> <div id="qa_answer_count" > <div style="display: table-cell;"> <div id="thread_lister_qa_answcount"> Three answers: </div> </div> </div> <div class="qa_answer " > <!--<div class="qa_post_head_div">--> <div class="qa_post_head"> <div class="post" id="post0"> <div class="post_header"> <div class="ya_post_header_poster"> Max D </div> <div class="post_header_date"> <span class="timeago" title="2010-06-11T03:26:11-05:00">2010-06-11 08:26:11 UTC</span> </div> </div> </div> </div> <!--</div>--> <!--<div class="qa_post_content_div">--> <!--<div class="qa_post_content_left"> </div>--> <div class="qa_post_content_body"> <div class="post_body parsed"> <div class="post_actions"> <!--<a href="https://narkive.com/YvG7Uz9q.00000" style="border: 0;" class="post_actions_bit" rel="nofollow">switch to english</a>--> </div> If you use the entity name (see here http://www.w3schools.com/tags/ref_entities.asp) you will be able to display these tags on your page, <br /><br /> <br /><br />e.g. & l t ; body & g t ; = <body> <br /><br />& l t ; head & g t ; = <head> <br /><br /> <br /><br />etc.. (without the spaces, code shows up as <body> here, proving it works..) </div> </div> <!--</div>--> </div> <div class="qa_answer " > <!--<div class="qa_post_head_div">--> <div class="qa_post_head"> <div class="post" id="post1"> <div class="post_header"> <div class="ya_post_header_poster"> Great Point Designs </div> <div class="post_header_date"> <span class="timeago" title="2010-06-11T04:21:20-05:00">2010-06-11 09:21:20 UTC</span> </div> </div> </div> </div> <!--</div>--> <!--<div class="qa_post_content_div">--> <!--<div class="qa_post_content_left"> </div>--> <div class="qa_post_content_body"> <div class="post_body parsed"> <div class="post_actions"> <!--<a href="https://narkive.com/YvG7Uz9q.00000" style="border: 0;" class="post_actions_bit" rel="nofollow">switch to english</a>--> </div> I think the quickest way would be putting the code befween textarea opening and closing tags. I don't think it recognizes the value attribute. And then you can style textearea element with CSS. <br /><br /> <br /><br />Like: <br /><br /> <br /><br /><textarea cols="70" rows="10" style="border:0px;color:red;background-color:#ffffcc;font-weight:bold;padding:5px;"> <br /><br /><script> <br /><br /> function Test () { <br /><br /> } <br /><br /></script> <br /><br /><table> <br /><br /> <tr> <br /><br /> <td></td> <br /><br /> </tr> <br /><br /></table> <br /><br /></textarea> </div> </div> <!--</div>--> </div> <div class="qa_answer " > <!--<div class="qa_post_head_div">--> <div class="qa_post_head"> <div class="post" id="post2"> <div class="post_header"> <div class="ya_post_header_poster"> Faisal </div> <div class="post_header_date"> <span class="timeago" title="2010-06-11T03:24:38-05:00">2010-06-11 08:24:38 UTC</span> </div> </div> </div> </div> <!--</div>--> <!--<div class="qa_post_content_div">--> <!--<div class="qa_post_content_left"> </div>--> <div class="qa_post_content_body"> <div class="post_body parsed"> <div class="post_actions"> <!--<a href="https://narkive.com/YvG7Uz9q.00000" style="border: 0;" class="post_actions_bit" rel="nofollow">switch to english</a>--> </div> I guess u'd use the <textbox value = '<html> <body> ...... etc....' > ... i mean use ' ' instead of " " </div> </div> <!--</div>--> </div> </br ></br > <div id="se_licensing_notice"> <div id="se_licensing_notice_info"> ⓘ </div> <div id="se_licensing_notice_text"> This content was originally posted on Y! Answers, a Q&A website that shut down in 2021. </div> </div> <div class="ads_show_me_the_borders" id='div-gpt-ad-1628418734326-0' style='min-width: 250px; min-height: 30px; margin-left: 17px;'></div> <!--<script src="https://it.hobby.fai-da-te.narkive.com/ad-blocker.js?adclient=10120iask" type="text/javascript"></script>--> <script type="text/javascript"> //$(document).ready(function() { (nk = window.nk || []).session_id = 'de414e24f169'; if(nk.adb === undefined) nk.adb = 'enabled'; if(0) nk.adb = 'untested'; nk.threadfunction = function() { $.ajax({ url: "https://" + document.domain +"/ajax/ThreadViewCounter?hash=YvG7Uz9q&nk_session=" + nk.session_id, data: { page_version: 1, is_desktop: 1, lang: 'en', replycount: 3, views: 1, type: 'ya', simqa: 0, simsearchqa: 0, simsearch: 0, url: window.location.href, hash: 'YvG7Uz9q', cat: document.domain.replace('.narkive.', '.'), path: window.location.pathname, title: 'I Need help on website coding!?', recency: 5388, ads_filter: 'pass', // adb: nk.adb, }, cache: true, type: "GET" }) .done(function( html ) { eval(html); }); } //}); $(document).ready(function() { if(typeof adsense_dispatcher_id === 'undefined' || adsense_dispatcher_id < 2) { // disable stats collection if you're unlikely to be a new user //nk.threadfunction(); } }); // prebid callback here as there is no command queue, in theory ThreadViewCounter works, but hey var nk_ts_PreBidConnectionTime = Date.now(); function connect_prebid_callback() { if(typeof vmpbjs !== undefined && vmpbjs.onEvent !== undefined) { vmpbjs.onEvent('bidWon', function(prebidwin) { console.log(prebidwin.bidderCode+ ' won the ad server auction for ad unit ' +prebidwin.adUnitCode+ ' at ' +prebidwin.cpm+ ' CPM'); console.log(prebidwin); var u = "https://" + document.domain +"/ajax/telemprebid?abs_sec=" + parseInt((Date.now()-nk_ts_PreBidConnectionTime) / 1000) + "&nk_session=" + nk.session_id; $.ajax({ url: u, cache: false, type: "HEAD", global: false, beforeSend: function(){}, complete: function(){}, data: { bidder: prebidwin.bidder, cpm: prebidwin.originalCpm, currency: prebidwin.originalCurrency, height: prebidwin.height, width: prebidwin.width, slotElementId: prebidwin.adserverTargeting.hb_div_id }}); console.log('callback sent'); }); } else { setTimeout(function() { connect_prebid_callback(); }, 100); } } //connect_prebid_callback(); </script> <div id="last_post_visibility_indicator"> </div> <style> .post_body.parsed { /*padding: 11px 12px;*/ color: #192527; font-family: "Segoe UI","Segoe WP","Arial","Sans-Serif"; font-size: 17px; line-height: 24px; } </style> <style> @media screen and (min-width: 770px) { .post_body.parsed { padding: 11px 12px; color: #192527; font-family: "Segoe UI","Segoe WP","Arial","Sans-Serif"; font-size: 18px; line-height: 26px; } .post_header { border-width: 1px; border-radius: 3px; } .post_wrapper { border-left: 0; padding-left: 22px; } .post_body { border: 0; } .quoted_post { font-size: 14px; line-height: 18px; } .post_header { height: 30px; line-height: 30px; font-size: 17px; } #thread_lister_ctrl_nav { font-size: 24px; line-height: 32px; } #thread_lister_subtitle { display: none; } /* smaller */ #thread_lister_ctrl_nav { font-size: 20px; line-height: 31px; } .post_header { height: 28px; line-height: 27px; font-size: 16px; } .post_body.parsed { font-family: "Segoe UI","Segoe WP","Arial","Sans-Serif"; font-size: 17px; line-height: 25px; padding-bottom: 16px; } .thread #thread_lister_ctrl { margin: 8px 4px; margin-top: 7px; margin-bottom: 4px; } #thread_lister_subtitle { display: block; } #thread_lister_subtitle { margin-bottom: -5px; } #thread_container .post_header_date .timeago { font-size: 15px; } #simthread_first_header { font-family: serif; font-size: 25px; margin-top: 30px; margin-left: 15px; background-color: #f3feff; padding: 7px 13px; color: #234244; width: fit-content; border-radius: 5px; } } </style> <style> #sidebar_banner_right { /*float: right; margin-right: 20px;*/ float: left; margin-left: 40px; margin-top: 20px; width: 22px; height: 30px; /*display: none;*/ /*border: 1px solid red;*/ /*background-color: red;*/ } @media screen and (min-width: 1500px) { #sidebar_banner_right { margin-left: 80px; } } </style> </div> <div id="sidebar_container"></div> <div id="sidebar_banner_right"><div class="sidebar_banner_placeholder_2"></div></div> <div style="clear: both"></div> </div> <script type="text/javascript"> var nav_highlighted = false, sidebar_fixed = false, sidebar_initial_top_distance = 0, sidebar_initial_left_distance = 0, sidebar_right_banner_initial_left_distance = 0, last_post_divs_distance_build = 0, post_divs_distances = Array(), sidebar_height = 0, thread_navigation_height = 0, sidebar_position_offset = 0, thread_onscroll_timeout = 0, sidebar_related_height = 0; function build_post_divs_distance() { if(new Date().getTime() - last_post_divs_distance_build < 1000) { return; } var post_divs = $('.post'); for(k in post_divs) { if(parseInt(k) != k) continue; post_divs_distances[$(post_divs[k]).position().top] = $(post_divs[k]).attr('id').replace('post', ''); } sidebar_height = $('#sidebar_container').height(); thread_navigation_height = $('#thread_navigation').height(); } function thread_onscroll() { if($(window).width() < 995 || typeof($('.sidebar_banner_placeholder_1').offset()) === 'undefined') { return; } build_post_divs_distance(); var scroll_top = $(window).scrollTop(), sidebar_offset_top = $('#sidebar_container').offset().top, windows_height = $(window).height(), sidebar_css_top = parseInt($('#sidebar_container').css('top') == 'auto' ? 0 : $('#sidebar_container').css('top')), sidebar_standard_top_distance = 20, first_visible_post = 1, scroller_margins = windows_height < 250 ? 20 : 100; highlighted_top_distance = nav_highlighted > 0 ? $('#nav_post' + nav_highlighted).position().top : windows_height/2; left_margin = parseInt($('#sidebar_container').css('margin-left')); left_margin_banner = parseInt($('#sidebar_banner_right').css('margin-left')); if(sidebar_initial_left_distance == 0) { sidebar_initial_left_distance = $('#sidebar_container').offset().left/* == 0 ? 760 : $('#sidebar_container').offset().left*/; } if(sidebar_right_banner_initial_left_distance == 0) { sidebar_right_banner_initial_left_distance = $('#sidebar_banner_right').offset().left/* == 0 ? 760 : $('#sidebar_container').offset().left*/; } if(highlighted_top_distance + scroller_margins + sidebar_position_offset + sidebar_related_height > windows_height) { sidebar_position_offset -= windows_height/2; $('#sidebar_container').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_initial_left_distance - left_margin) + 'px'); $('#sidebar_banner_right').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px'); } else if(highlighted_top_distance + sidebar_position_offset < scroller_margins) { sidebar_position_offset += windows_height/2; $('#sidebar_container').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_initial_left_distance - left_margin) + 'px'); $('#sidebar_banner_right').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px'); } else if(!sidebar_fixed && scroll_top + sidebar_standard_top_distance > sidebar_offset_top) { $('#sidebar_container').css('position', 'fixed').css('top', '0px').css('left', (sidebar_initial_left_distance - left_margin) + 'px'); $('#sidebar_banner_right').css('position', 'fixed').css('top', '0px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px'); sidebar_fixed = true; sidebar_initial_top_distance = sidebar_offset_top; } else if(sidebar_fixed && scroll_top + sidebar_standard_top_distance < sidebar_initial_top_distance) { $('#sidebar_container').css('position', 'relative').css('top', '0').css('left', '0'); $('#sidebar_banner_right').css('position', 'relative').css('top', '0').css('left', '0'); sidebar_fixed = false; } for(k in post_divs_distances) if(k < scroll_top + 100 && post_divs_distances[k] != 'selector') first_visible_post = parseInt(post_divs_distances[k]); if(first_visible_post > 0 && first_visible_post <= post_divs_distances.length + 1) { $('#nav_post' + nav_highlighted).css('opacity', ''); $('#nav_post' + first_visible_post).css('opacity', '1'); nav_highlighted = first_visible_post; } clearTimeout(thread_onscroll_timeout); thread_onscroll_timeout = setTimeout(function () {thread_onscroll();}, 200); } function init_quoted_extra() { $(".quoted_post_level_1").each(function() { if($(this).text().length < 500) return; if($(this).next('.quoted_extra_clickable').length != 0) return; $(this).css('display', 'none'); $(this).after('<div class="quoted_extra_clickable">...</div>'); }); } function quoted_extra_click(e) { $(e).css('display', 'none'); $(e).prev().css('display', 'block'); build_post_divs_distance() } $( document ).ready(function() { $(".post_censored").on('click', function(event){ event.stopPropagation(); event.stopImmediatePropagation(); var post_id = $(this).closest(".post").attr('id').replace('post', ''); console.log(post_id); censored_post = $(this).closest(".post_body"); $(this).closest(".post_body").css('opacity', '0.3'); /* $.ajax({ url: "?load_censored_post=" + post_id, type: 'GET', dataType: 'html', success: function(data){ console.log(nk.censored_post); nk.censored_post.html(data); } }); */ $.post(window.location, {'load_censored_post': post_id}, function(data) { // alert('POST was successful. Server says: ' + data); console.log(censored_post); $(censored_post).html(data); $(censored_post).css('opacity', '1'); }); }); }); function thread_selector_mouseup() { } function thread_init_selection() { if(!window.location.hash || !window.location.hash.match(/^#selection:([0-9]+)\.([0-9]+)\.([0-9]+)$/)) return; nk.is_select_ref = 1; var temp = window.location.hash.match(/^#selection:([0-9]+)\.([0-9]+)\.([0-9]+)$/); var post = temp[1], start = temp[2], end = parseInt(start) + parseInt(temp[3]), ts, tr; tr = $('#post' + post).children('.post_body').html().trim(); ts = '<div>' + $('#post' + post).children('.post_body').html().trim() + '</div>'; ts = $(ts); ts.find('.quoted_post').remove(); ts.find('.post_signature').remove(); //ts.find('#selection_url_f').remove(); ts.find('br').replaceWith(' '); ts = ts.html().trim(); var post_verified = '', c; for (var i = 0; i < ts.length; i++) { if(i < start || i >= end) continue; c = ts.charAt(i); post_verified += c; if(c != ' ') continue; if(tr.indexOf(post_verified) != -1) continue; post_verified = post_verified.slice(0, -1); if(tr.indexOf(post_verified + '<br>') != -1) { post_verified += '<br>'; continue; } break; } $('#post' + post).children('.post_body').html( $('#post' + post).children('.post_body').html().replace(post_verified, '<span id="init_selection">' + post_verified + '</span>') ); var offset = (window.innerHeight < $("#init_selection").height()) ? 30 : ((window.innerHeight - $("#init_selection").height()) / 2); $('html,body').animate({scrollTop: $("#init_selection").offset().top - offset},'fast'); ga('send', 'event', 'selection', 'load', {'nonInteraction': 1}); } function thread_init_copy() { $('#thread_container').on("mouseup", function() { var t, te, tr, ts; if($('#selection_url_c:hover').length > 0) { $('#selection_url_c input').select(); ga('send', 'event', 'selection', 'click', {'nonInteraction': 1}); if(typeof nk.push_ts_event !== 'undefined') nk.push_ts_event('selected_link_hover', 1); return; } $('#selection_url_c').remove(); $('#selection_url_f').remove(); if(window.getSelection) t = window.getSelection(); else if(document.getSelection) t = document.getSelection(); else if(document.selection) t = document.selection.createRange().text; if(typeof t === 'undefined' || t.toString().length <= 1) return; if(typeof t.anchorNode === 'undefined' || typeof t.anchorNode.parentElement === 'undefined' || typeof t.anchorNode.parentElement.parentElement === 'undefined') return; te = t.anchorNode.parentElement.parentElement; if(!te.id.match(/^post[0-9]+$/)) return; tr = t.toString().replace(/\n/g, ' ').trim(); ts = '<div>' + $(te).children('.post_body').html().trim() + '</div>'; ts = $(ts); ts.find('.quoted_post').remove(); ts.find('.post_signature').remove(); //ts.find('#selection_url_f').remove(); ts.find('br').replaceWith(' '); ts = ts.html().trim(); if(ts.indexOf(tr) == -1) return; var hash = document.location.href.match(/\.narkive\.com\/([a-zA-Z0-9]{8})/); if (typeof hash[1] === 'undefined') return; hash = hash[1]; var fix_index = 0; if(ts.indexOf('init_selection') < ts.indexOf(tr) && ts.indexOf('init_selection') != -1) fix_index = 33; //console.log(ts); //console.log(fix_index); if(typeof nk.push_ts_event !== 'undefined') nk.push_ts_event('selected_char_count', tr.length); var url = 'https://narkive.com/' + hash + ':' + te.id.replace('post', '') + '.' + (ts.indexOf(tr) - fix_index) + '.' + tr.length; setTimeout(function() { try { var range = document.createRange(); range.setStart(t.focusNode, t.focusOffset); range.insertNode($('<span id="selection_url_f"></span>').get(0)); var selection_button = $('<div style="top: ' + $('#selection_url_f').offset().top + 'px" id="selection_url_c">Selection Permalink:<input type="text" value="'+url+'"></div>').get(0); $('#thread_container').append(selection_button); //console.log(selection_button); } catch (e) {} }, 10); }); } /* function thread_similarbar(hash) { if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) return; $.get( "https://" + document.domain + "/ajax/similarbar?hash=" + hash, function( data ) { $('#thread_navigation').after(data); }); } */ function thread_suggested_reading(hash) { if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) return; $.get( "https://" + document.domain + "/ajax/suggestedreading?hash=" + hash, function( data ) { $('#thread_container').append(data); }); } $( window ).scroll(function () { thread_onscroll(); }); $( document ).ready(function() { init_quoted_extra(); thread_onscroll(); /*thread_check_adv();*/ thread_init_copy(); thread_init_selection(); }); </script> <script type="text/javascript"> /* thread_similarbar('YvG7Uz9q');*/ /* thread_suggested_reading('YvG7Uz9q'); */ </script> <style type="text/css"> </style> <script type="text/javascript"> $( document ).ready(function() { var targetNodes = $(".adsbygoogle"); var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var myObserver = new MutationObserver (mutationHandler); var obsConfig = { attributes: true }; targetNodes.each ( function () { myObserver.observe (this, obsConfig); } ); function mutationHandler (mutationRecords) { mutationRecords.forEach ( function (mutation) { if(mutation.type == 'attributes' && mutation.attributeName == 'data-ad-status') { var jq = $(mutation.target).attr('data-ad-status'); if(jq == 'filled') { nk.adsense_status.filled++; } if(jq == 'unfilled') { nk.adsense_status.unfilled++; } nk.ts_suggestPushEvent = 1; } } ); } var testURL = "https://" + document.domain + "/s/_adverts.js" var myInit = { method: 'HEAD', mode: 'no-cors' }; var myRequest = new Request(testURL, myInit); fetch(myRequest).then(function(response) { return response; }).then(function(response) { nk.adb = 'disabled'; nk.ts_suggestPushEvent = 1; }).catch(function(e){ nk.adb = 'enabled'; nk.ts_suggestPushEvent = 1; }); }); </script> <div style="height: 50px"></div> </div> <div id="footer_wrapper"> <div id="footer_links"> <a href="https://narkive.com/about">about</a> - <!--<a href="https://narkive.com/contact">contact</a> - <a style="cursor:pointer;" id="uservoice_button">feedback</a> - --><a href="https://narkive.com/legalese">legalese</a> </div> <!-- <div id="lang_selector"> <div id="lang_select">Contents in English</div> <div id="lang_select_cont"> <div id="lang_select_cont_in"> <a href="?set_lang=zh-cn" class="lang_select_bit">Chinese</a><a href="?set_lang=zh-tw" class="lang_select_bit">Chinese</a><a href="?set_lang=hr" class="lang_select_bit">Croatian</a><a href="?set_lang=cs" class="lang_select_bit">Czech</a><a href="?set_lang=da" class="lang_select_bit">Danish</a><a href="?set_lang=nl" class="lang_select_bit">Dutch</a><a href="?set_lang=en" class="lang_select_bit">English</a><a href="?set_lang=et" class="lang_select_bit">Estonian</a><a href="?set_lang=fi" class="lang_select_bit">Finnish</a><a href="?set_lang=fr" class="lang_select_bit">French</a><a href="?set_lang=de" class="lang_select_bit">German</a><a href="?set_lang=el" class="lang_select_bit">Greek</a><a href="?set_lang=he" class="lang_select_bit">Hebrew</a><a href="?set_lang=hi" class="lang_select_bit">Hindi</a><a href="?set_lang=hu" class="lang_select_bit">Hungarian</a><a href="?set_lang=id" class="lang_select_bit">Indonesian</a><a href="?set_lang=it" class="lang_select_bit">Italian</a><a href="?set_lang=ja" class="lang_select_bit">Japanese</a><a href="?set_lang=ko" class="lang_select_bit">Korean</a><a href="?set_lang=no" class="lang_select_bit">Norwegian</a><a href="?set_lang=pl" class="lang_select_bit">Polish</a><a href="?set_lang=pt" class="lang_select_bit">Portuguese</a><a href="?set_lang=ru" class="lang_select_bit">Russian</a><a href="?set_lang=sr" class="lang_select_bit">Serbian</a><a href="?set_lang=es" class="lang_select_bit">Spanish</a><a href="?set_lang=sv" class="lang_select_bit">Swedish</a><a href="?set_lang=th" class="lang_select_bit">Thai</a><a href="?set_lang=tr" class="lang_select_bit">Turkish</a><a href="?set_lang=vi" class="lang_select_bit" style="border-bottom: none;">Vietnamese</a> </div> <div id="lang_select_cont_end"></div> </div> </div> --> </div> <div id="ajax_loading">Loading...</div> <div id="overflow"></div> <div id="overflow_message"> <div id="overflow_message_header"> </div> <div id="overflow_message_content"> </div> <div id="overflow_message_actions"> </div> </div> <script async data-id="101477562" src="//static.getclicky.com/js"></script> </body></html>