Curso HTML - Introdução

Aprenda aqui com o melhor conteúdo da internet traduzido da W3SCHOOLS.COM.

Por | @oficinadanet Programação
O que é um arquivo HTML?
HTML quer dizer Hyper Text Markup Lenguage.
Um documento HTML é composto por tags.
As tags do HTML dizem para o web browser o que fazer.
Um documento HTML pode ser criado usando um editor de textos qualquer.

Vamos tentar?
Se você está usando Windows, abrá o Notepad [ou o editor de sua preferência]. Se você está usando Mac, abrá o SimplesText. No OSX abrá o TextEdit e mude as seguintes preferências: Abrá o menu "Format" e selecione "Plain Text" ao invéz do "Rich Text". Então abrá  a janela "Preferences" embaixo do menu "Text Edit"  e selecione "Ignore rich text commands in HTML files". É possível que seu código HTML não irá funcionar caso isso não sejá feito.

Ensira o seguinte código:


Título da página.


Está é minha primeira página. Este texto está em negrito!




Salve como "oficina1.htm"
Abrá seu Internet explorer [ou o de sua preferência]. Selecione "Open" (ou "Open Page") no menu File do seu navegador. Uma caixa de dialogo aparecerá. Selecione "Browse" (ou "Choose File") e procure o codumento HTML que criamos à pouco ("oficina1.htm") - selecione-o e clique em "Open". Procure por um endereço na caixa de dialogo, por exemplo "C:MyDocumentsoficina1.htm". Clique em OK e seu navegador deverá exibir a página.


Explicando o exemplo
A primeira tag do seu documento é . Essa tag diz ao seu navegador que está sendo inicilizado um documento HTML. A última tag do seu documento é . Ela fala para o seu navegador que é o fim do documento HTML. O texto entre a tag e é a informação do cabeçalho. As informações do cabeçalho não são mostradas na janela do navegador. O texto entre as tags </strong> são o título da sua página.  O título escrito é mostrado no título do seu navegador. O texto entre as tags <strong><body></strong> são os textos/outros que são mostrados pelo seu navegador. O texto entre a tag <strong><b></strong> e <strong></b></strong> são textos negritos.<br /> <br /> <br /> <strong>Extenção HTM ou HTML?</strong><br /> Quando você salva um documento HTML, você pode usar a extenção .htm ou a .html. Nós temos usado a extenção .html nos nossos exemplos. Este é um hábito ruim herdado pelo passado quando geralmente eram usados programas que só permitiam três letras na extenção.<br /> Com os novos programas nós achamos melhor umsar a extenção .html.<br /> <br /> <br /> <strong>Usando editores de HTML.</strong><br /> Você pode editar facilmente arquivos HTML usando um editor WYSIWYG (O que você vê é o que você tem)  como FrontPage ou Dreamwaver, em vez de escrever seus codigos em um editor de texto<br /> Porém, se você quer ser um grande Web Devoloper, nós recomendamos que use um editor comum [Bloco de notas, Notepad] para aprender HTML.<br /> ----<br /> <br /> Todos os créditos do conteúdo são do www.w3schools.com.<br /> Tradução: Luciano Infanti.<br /> Agradecimentos: Guido.</p><script src="https://painel.m3midia.com.br/lib/prism/prism.js"></script><link rel="stylesheet" type="text/css" href="https://painel.m3midia.com.br/lib/prism/prism.css"></p> </div> </div> <div class="wifl assuntosfim"> <div class="box_new_cmt bcmt"> <span class="tit_new_cmt">DEIXE SEU COMENTÁRIO</span><span data-post_id="280" data-url="https://www.oficinadanet.com.br/artigo/382/curso_html_-_introducao" data-tipo="1" data-comentariosnrs="0" id="bt_new_cmt" class="bt_new_cmt">Comente aqui</span> </div> <div class="box_new_cmt btag"> <span class="tit_new_cmt">MAIS SOBRE</span> </div> </div> <script type="text/javascript">try { _402_Show(); } catch(e) {}</script> </div> <div class="bar2 p-rel" id="out_post_barra" data-distance="30" > <div class="bar2" id="post_barra" ><!-- /6524261/ON_300x600_LATERAL --> <div class='wifl m-b-40'> <div id='div-gpt-ad-1519730196190-0' style='height:600px; width:300px;'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1519730196190-0'); }); </script> </div></div><div class="wifl m-b-40"><span class="titulo1" ><span>Últimas em </span></span><ul class="lst12 wifl lsn " id="" ><li > <a class="" href="https://www.oficinadanet.com.br/netflix2018/22779-novidades-e-lancamentos-netflix-da-semana-2105-a-2705" onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr280', 'pto22779']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22779/capa-netflix_14080.jpg" title="Novidades e lançamentos Netflix da semana (21/05 a 27/05)" alt="Novidades e lançamentos Netflix da semana (21/05 a 27/05)" > </span> <div class="info" > <span class="tit" >Netflix lançamentos em 2018</span> <h3 class="tit tit2" >Novidades e lançamentos Netflix da semana (21/05 a 27/05)</h3> </div> </a> </li><li > <a class="" href="https://www.oficinadanet.com.br/zenfone5/22781-as-diferencas-entre-o-zenfone-5-e-zenfone-4" onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr280', 'pto22781']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22781/zenfone5vszenfone4_14080.jpg" title="As diferenças entre o Zenfone 5 e Zenfone 4" alt="As diferenças entre o Zenfone 5 e Zenfone 4" > </span> <div class="info" > <span class="tit" >Zenfone 5</span> <h3 class="tit tit2" >As diferenças entre o Zenfone 5 e Zenfone 4</h3> </div> </a> </li><li > <a class="" href="https://www.oficinadanet.com.br/cinema/22771-10-melhores-filmes-infantis" onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr280', 'pto22771']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22771/frozen-poster-frozen-mod-17-22x30-12765-mlb20064675382_032014-f_750x469_5afdc2c63947f_14080.jpg" title="Os 10 melhores filmes infantis" alt="Os 10 melhores filmes infantis" > </span> <div class="info" > <span class="tit" >Cinema</span> <h3 class="tit tit2" >Os 10 melhores filmes infantis</h3> </div> </a> </li><li > <a class="" href="https://www.oficinadanet.com.br/biton/22785-biton-18-05-2018" onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr280', 'pto22785']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22785/capinha_14080.jpg" title="OnePlus 6 lançado oficialmente / EA anuncia Battlefield V / Zenfone 3 Zoom recebe Oreo - bitON" alt="OnePlus 6 lançado oficialmente / EA anuncia Battlefield V / Zenfone 3 Zoom recebe Oreo - bitON" > </span> <div class="info" > <span class="tit" >bitON</span> <h3 class="tit tit2" >OnePlus 6 lançado oficialmente / EA anuncia Battlefield V / Zenfone 3...</h3> </div> </a> </li></ul></div> <div class="box1 full rss m-b-40" > <span class="tit" >Assine a nossa newsletter</span> <div class="form" > <form action="https://www.oficinadanet.com.br/cadastro" method="post" onsubmit="_gaq.push(['_trackEvent', 'barranewsletter', 'barranewsletter', 'barranewsletter']); return true;"> <input type="hidden" value="oficinadanet_rss" name="uri"/> <input type="hidden" name="loc" value="pt_BR"/> <input class="form_campo" type="email" name="email" id="email" placeholder="seu e-mail" > <input class="bt bt1" type="submit" value="OK" > </form> </div> </div><div class="wifl m-b-40"><span class="titulo1" ><span>Últimos reviews</span></span><ul class="lst12 wifl lsn " id="" ><li > <a class="" href="https://www.oficinadanet.com.br/reviewsmartphones/22667-review-galaxy-note-8" onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr280', 'pto22667']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22667/capa_14080.jpg" title="Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]" alt="Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]" > </span> <div class="info" > <span class="tit" >Reviews de smartphones</span> <h3 class="tit tit2" >Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]</h3> </div> </a> </li><li > <a class="" href="https://www.oficinadanet.com.br/zenfone4/22618-review-zenfone-4-max" onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr280', 'pto22618']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22618/capa_14080.jpg" title="Review Zenfone 4 Max - é só bateria mesmo? [vídeo]" alt="Review Zenfone 4 Max - é só bateria mesmo? [vídeo]" > </span> <div class="info" > <span class="tit" >Zenfone 4</span> <h3 class="tit tit2" >Review Zenfone 4 Max - é só bateria mesmo? [vídeo]</h3> </div> </a> </li><li > <a class="" href="https://www.oficinadanet.com.br/gadgets/22556-review-moto-power-pack-e-tv-digital" onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr280', 'pto22556']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22556/capa_14080.jpg" title="Review Moto Power Pack e TV Digital" alt="Review Moto Power Pack e TV Digital" > </span> <div class="info" > <span class="tit" >Gadgets</span> <h3 class="tit tit2" >Review Moto Power Pack e TV Digital</h3> </div> </a> </li><li > <a class="" href="https://www.oficinadanet.com.br/smartphones/22399-review-samsung-galaxy-a8" onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr280', 'pto22399']);" > <span class="img box-img" > <img src="https://www.oficinadanet.com.br/imagens/post/22399/capa_14080.jpg" title="Review Galaxy A8 - Quase... [vídeo]" alt="Review Galaxy A8 - Quase... [vídeo]" > </span> <div class="info" > <span class="tit" >Smartphones</span> <h3 class="tit tit2" >Review Galaxy A8 - Quase... [vídeo]</h3> </div> </a> </li></ul></div> </div> </div> <div class="wifl bottom_pause_post_barra"><div style="float:left;"> <div style="width: 300px; float: left;"> <!-- /6524261/ON_FOOTER --> <div id="div-gpt-ad-1512402583744-0" style="height:250px; width:300px;"> <script> googletag.cmd.push(function() { googletag.display("div-gpt-ad-1512402583744-0"); }); </script> </div> </div></div> <div style="float:left; max-width:750px; margin-left:20px" class="wifl"> </div> </div> <div class="wifl post-bottom1" style="margin:0"> </div> </section> <div id="box_new_cmt_open" class="box_new_cmt_open"> <div style="height:100%" class="content1"> <div id="bt_new_cmt_orelha" class="bt_new_cmt_orelha"><p>COMENTÁRIOS</p></div> <div id="bt_new_cmt_orelha_close" class="bt_new_cmt_orelha"><p>COMENTÁRIOS</p></div> <div class="titulo1"><span>Comentários</span></div> <div class="wifl" style="height:100%" id="box_new_cmt_retorno"></div> </div> </div> </div> <script type="text/javascript"> var EUREKAD = EUREKAD || {_setAccount: "987b879f69856a4e81907f70ccbe9d9d_1101"}; </script> <script async src="https://tag.ageureka.com/eureka_ads.js?v=0.0.2"></script> <div class="wifl" > <div class="content-fix content10 bg2" > <!-- /6524261/ON_BLOCOFIM --> <div id="div-gpt-ad-1489748718845-0" style="height:250px; margin:auto; width:970px;"> <script> googletag.cmd.push(function() { googletag.display("div-gpt-ad-1489748718845-0"); }); </script> </div> </div> </div></div> </section> <footer class="footer wifl" id="footer"> <div class="corpo"> <a href="https://www.oficinadanet.com.br" class="logo2"></a> <div class="out-menu-footer"> <ul class="menu-footer lst-footer1 wifl"> <li><a href="https://www.oficinadanet.com.br/sobre">Sobre</a></li> <li><a href="https://www.oficinadanet.com.br/contato">Contato</a></li> <li><a href="https://www.oficinadanet.com.br/colunista" >Seja colunista</a></li> <li><a href="https://www.oficinadanet.com.br/privacidade" >Política de Privacidade</a></li> <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li> </ul> <ul class="menu-footer wifl"> <li><a rel="nofollow" href="https://www.facebook.com/oficinadanet">Facebook</a></li> <li><a rel="nofollow" href="https://twitter.com/OficinadaNet">Twitter</a></li> <li><a rel="nofollow" href="https://www.youtube.com/user/oficinadanettv">Youtube</a></li> <li><a rel="nofollow" href="https://www.instagram.com/oficinadanetoficial/">Instagram</a></li> <li><a rel="nofollow" href="https://www.oficinadanet.com.br/rss">RSS</a></li> </ul> </div> <div class="box-m3" > <p class="wifl txt1">Um site do grupo</p> <a class="m3midia" href="http://www.m3midia.com.br"></a> <p class="wifl txt2">© 2018 <span>M3 Mídia</span></p> <p class="wifl txt2">Todos os direitos reservados</p> </div> </div> </footer> <span title="Ir para o topo" class="top_page" id="top_page" ><span></span></span> <script type='text/javascript'> var tempo = '1800'; window.setTimeout('location.reload();', tempo*1000); </script> <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div> <div style="display:none" id="flgcomment"></div> <div id="out_lib" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </div> <script type="text/javascript"> var vv={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=vv._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=vv._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}} function BV(str){return vv.decode(str);} function scrollPageToID(id) { $('html,body').animate({ scrollTop: $('#'+id).offset().top - ( $(window).height() - $('#'+id).outerHeight(true) ) / 2 }, 700); } function serializeDataAttr(form) { var dataarr = new Array(); for(var i in form.data()) { var subarr = new Array(); subarr['name'] = i; subarr['value'] = form.data()[i]; dataarr.push(subarr); } return $.param(form.serializeArray().concat(dataarr)); } function testaVazio(campo,comparacao,mensagem,erro) { if (erro == true) {return true;} if (document.getElementById(campo).value == comparacao) { alert (mensagem); document.getElementById(campo).value = ""; document.getElementById(campo).focus(); return true; } else {return false;} } function testaCheckBox(classe,mensagem) { erro = true; checkboxes = document.getElementsByClassName(classe); for(var i=0, n=checkboxes.length; i<n; i++) { if(checkboxes[i].checked) erro = false; } if(erro == true) { alert(mensagem); checkboxes[0].focus(); return true; } else return false; } function ajaxDireto(url,param,retorno,tipo) //usa jquery { if(!tipo) tipo = "POST" $.ajax({ type: tipo, url: url, data: param, success: function(html){ $("#"+retorno).html(html); } }); } function newsletterCad(e,step) { // alert(step); // alert(e); if(step == 1) { alert('1'); $(e+' .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>'); alert('2'); // $('#news_bb_right_plan').css('left','-306px'); } else { /* ajaxDireto('',$('#newscad_form1').serialize()+'&'+$('#newscad_form2').serialize(),'out_new_cad'); */ } } function populaSelectCidade(ele) { ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=populaSelectCidade&sigla='+$(ele).val(),'select_cidade'); } $(document).ready(function (e) { var header_height = $("header").height(); $(window).scroll(function(){ var scrolltop = $(window).scrollTop(); if(scrolltop > 0) $('#out-img-curso-aberto').css('top',(($(window).scrollTop()/2) *-1) + header_height); else $('#out-img-curso-aberto').css('top',header_height+'px'); }); }); var scroll_aux = 0; var header_top = $("#header").offset().top; var header_height = $("#header").outerHeight(); var window_height = $(window).height(); var height_document = $(document).height(); function fixedMenu() { var scroll = $(window).scrollTop(); if( scroll >= (header_top+header_height) ) { if(scroll < scroll_aux ) { $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'}); } else { if( (scroll+window_height+20) > height_document ) { $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'}); } else { var v_tra = '0.3s'; if( scroll <= ( header_top + header_height + 100) ) v_tra = '0s'; $('#mov_header').css({'position':'fixed',transition: v_tra,'top':'-'+header_height+'px'}); } } } else if(scroll <= header_top) { $('#mov_header').css({'position':'absolute',transition: '0.3s','top':'0px'}); } scroll_aux = scroll; } function boxHoverSite(act,cic,e) { var top = $(e).offset().top+$(e).outerHeight(); var e_hover = ''; if($(e).data('box-hover')) { e_hover = '#'+$(e).data('box-hover')+'_hover'; switch(act) { case 2: $('.contr_hov_itens').fadeOut(0); $(e_hover).fadeIn(400); $(e_hover).addClass('contr_hov_itens'); boxHoverSite(0,0,e); break; case 0: if(cic < 5) { var timeBoxHoverSite = setTimeout(function() { cic++; boxHoverSite(0,cic,e); }, 500); } else { clearTimeout(timeBoxHoverSite); if(!$(e_hover).is(":hover") && !$(e).is(":hover") && !$(e_hover+' *').is(":focus")) { $(e_hover).fadeOut(400); } else boxHoverSite(0,0,e); } break; } } else { $('.contr_hov_itens').fadeOut(0); } } function blackoverlay(act) { if(act) { $('#blackoverlay').fadeIn(400); $('html').addClass('no_scroll'); } else { $('#blackoverlay').fadeOut(400); $('html').removeClass('no_scroll'); } } function actAovivo() { window.location = ""; } function actBodyPago() { window.open(""); } function actMenuMobile(act) { if(act) { $('#blackoverlay').addClass('blackoverlay_mobile').trigger('classChange'); if(!$('#menumobile-act').data('post-left')) { $('#menumobile-act').data('post-left',$('#menumobile-act').css('left')); } $('#menumobile-act').css('left','0'); $('#menumobile').css('display','none'); $('#fechar_menumobile').css('display','block'); } else { $('#menumobile-act').css('left',$('#menumobile-act').data('post-left')); $('#blackoverlay').removeClass('blackoverlay_mobile').trigger('classChange'); $('#menumobile').css('display','block'); $('#fechar_menumobile').css('display','none'); } blackoverlay(act); } function actAbreComments(act) { if(act) { var post_id = $('#bt_new_cmt').data('post_id'); var url = $('#bt_new_cmt').data('url'); var tipo = $('#bt_new_cmt').data('tipo'); var comentariosnrs = $('#bt_new_cmt').data('comentariosnrs'); if($("#box_new_cmt_retorno").html() == '') { ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=getCommentsBox&post_id='+post_id+'&url='+url+'&tipo='+tipo+'&comentariosnrs='+comentariosnrs,'box_new_cmt_retorno'); ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id='+post_id,'flgcomment'); } $('#box_new_cmt_open').css('right','0'); $('#bt_new_cmt_orelha').css('display','none'); $('#bt_new_cmt_orelha_close').css('display','block'); $('#bt_new_cmt_orelha_close').css('left','-30px'); } else { var window_width = $(window).width(); var right = 'calc(-37% - 15px)'; if(window_width < 1400) { right = '-330px'; } $('#box_new_cmt_open').css('right',right); $('#bt_new_cmt_orelha_close').css('display','none'); $('#bt_new_cmt_orelha').css('display','block'); $('#bt_new_cmt_orelha').css('left','-43px'); } } function actPopup(act,tipo) { if(act == 'fechar') { ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome='+tipo+'&valor=1','box_popup'); $('#box_popup').css('display','none'); $('#box_popup_big').css('display','none'); $('#box_popup_mobile').css('display','none'); blackoverlay(); } } function actSmartMobile(act) { if(act) { $('#blackoverlay').addClass('blackoverlay_smart').trigger('classChange'); if(!$('#smart_filtro_m-act').data('post-left')) { $('#smart_filtro_m-act').data('post-left',$('#smart_filtro_m-act').css('left')); } $('#smart_filtro_m-act').css('left','0'); $('#smart_filtro_m_abre').css('display','none'); $('#smart_filtro_m_fecha').css('display','block'); $('#smart_filtro_ud_out').css('display','block'); } else { $('#smart_filtro_m-act').css('left',$('#smart_filtro_m-act').data('post-left')); $('#blackoverlay').removeClass('blackoverlay_smart').trigger('classChange'); $('#smart_filtro_m_abre').css('display','block'); $('#smart_filtro_m_fecha').css('display','none'); $('#smart_filtro_ud_out').css('display','none'); } blackoverlay(act); } function actContatoEmpresa(act,tipo) { if(act && tipo != 0) { if(tipo == 1) $('#empresa_contato_titulo').html('Entre em contato'); else $('#empresa_contato_titulo').html('Solicite um orçamento'); $('#hidden_tipo').val(tipo); $('#blackoverlay').addClass('blackoverlay_cont_empresa').trigger('classChange'); $('#empresa_contato').fadeIn(400); $('#empresa_contato').height($('#empresa_contato'+' > *').outerHeight()); } else { $('#empresa_contato').fadeOut(400); $('#blackoverlay').removeClass('blackoverlay_cont_empresa').trigger('classChange'); $('#empresa_contato_titulo').html(''); } blackoverlay(act); } function actBuscaDesktop(act) { $('#busca_clique').toggle(); $('#busca_input').focus(); $('#blackoverlay').addClass('blackoverlay_busca_desktop').trigger('classChange'); blackoverlay(act); } function actBuscaObjeto() { $('#box_marca_closed').hide(); $('#box_marca_busca').show(); $('.box_marca').css('background-color','#f3661a'); $('#busca_marca_input').focus(); } function actCorrigirTexto(act,e) { if($('#modal_corrigir_txt').length == 0) { $(e).data('corrigir_titulo'); $("html").append('<div class="modal modal-s block corrigir" id="modal_corrigir_txt" ><span class="load-ico" ></span></div>'); ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=corrigirTexto&monta=1&corrigir_titulo='+$(e).data('corrigir_titulo')+'¶_email='+$(e).data('para_email'),'modal_corrigir_txt'); } if(act) { $('#blackoverlay').addClass('blackoverlay_corrigir').trigger('classChange'); $('#modal_corrigir_txt').fadeIn(400); } else { $('#modal_corrigir_txt').fadeOut(400); $('#blackoverlay').removeClass('blackoverlay_corrigir').trigger('classChange'); } blackoverlay(act); } function newsletterCad(ele,s) { if(s == '1') { var cad_idx = $(ele).data('idx'); $('#'+cad_idx+'_form2 .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>'); $('#'+cad_idx+'_ulcad').css('left',$('#'+cad_idx+'_ulcad').outerWidth()*-1); // $('#'+$(ele).data('id_ulout')).css('height',$('#'+cad_idx+'_ulcad .stp2').outerHeight()); } else { var cad_idx = $(ele).data('idx'); ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#'+cad_idx+'_form1').serialize()+'&'+$('#'+cad_idx+'_form2').serialize(),$(ele).data('id_ulout')); } } function fixedMenuDiagramado() { var scrolltop = $(window).scrollTop(); if(scrolltop >= 350) $('.conteudo .out_menu_diagramado').css('top','0'); else $('.conteudo .out_menu_diagramado').css('top','850px'); }; $(document).ready(function() { /*$(function () { $(window).scroll(atcFixedOnScroll); });*/ $('.disabled').click(function(e) { e.preventDefault(); }) $('.box_hover').mouseenter(function() { boxHoverSite(2,0,this); }); $(window).scroll(fixedMenu); $(window).scroll(fixedMenuDiagramado); fixedMenu(); fixedMenuDiagramado(); $(".amenu_diagramado").click(function(){scrollPageToID($(this).attr('href').substring(1));}); $(".bt_ver_mais").click(function(){ actBtVerMais(this); }); $(".ver_mais_preco_obj").click(function(){ scrollPageToID('precos'); }); $('#bt_header_busca').click(function(){ $('#busca_input').focus();}); $('#smart_filtro_ud_dwn').click(function(){$(".smart_filtro").animate({scrollTop: '+=200px'}, 300);}); $('#smart_filtro_ud_up').click(function(){$(".smart_filtro").animate({scrollTop: '-=200px'}, 300);}); $('#mobile_busca').click(function(){ $('#mobile_bf').css('display','block');}); $('#aovivo').click(function(){ actAovivo(); }); $('#smart_filtro_m_abre').click(function(){ actSmartMobile(true); }); $('#bt_new_cmt').click(function(){ actAbreComments(true); }); $('#bt_new_cmt_orelha').click(function(){ actAbreComments(true); }); $('#bt_new_cmt_orelha_close').click(function(){ actAbreComments(false); }); $('.bt1-comment').click(function(){ actAbreComments(true); }); $('#busca_clique_open').click(function(){ actBuscaDesktop(true); }); $('#box_marca_closed').click(function(){ actBuscaObjeto(); }); $('#smart_filtro_m_fecha').click(function(){ actSmartMobile(false); }); $('#menumobile').click(function(){ actMenuMobile(true); }); $('#fechar_menumobile').click(function(){ actMenuMobile(false); }); $('.fechar_newsletter_big').click(function(){ actPopup('fechar','NEWSBIG'); }); $('.fechar_youtube_big').click(function(){ actPopup('fechar','YOUTUBEBIG'); }); $('.fechar_youtube_mobile').click(function(){ actPopup('fechar','YOUTUBEMOBILE'); }); $('.fechar_rss_big').click(function(){ actPopup('fechar','RSSBIG'); }); $('.fechar_twitter_big').click(function(){ actPopup('fechar','TWITTERBIG'); }); $('.fechar_instagram_big').click(function(){ actPopup('fechar','INSTAGRAMBIG'); }); $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); }); $('#fechar_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); }); $('#popup_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); }); $("#form_envia").click(function(){ submitFormulario(); }); $("#mostra_fone").click(function(){ $('#empresa_fone').html(BV($('#empresa_fone').data('info'))); $('#mostra_fone').hide(); }); $(".empresa_contato").click(function(){ actContatoEmpresa(true,$(this).data('tipo'));}); $('#empresa_contato_fechar').click(function(){ actContatoEmpresa(false,0) }); $('.act_corrigir_texto').click(function(){ actCorrigirTexto(true,this) }); $('#btcarregarcomments_disqus').click(function(){ carregaComentariosDisqus() }); $('#btcarregarcomments_facebook').click(function(){ carregaComentariosFacebook() }); $(".form_newsletter_cad").submit(function(event){ event.preventDefault(); newsletterCad(this,"1"); }); $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,"2"); }); $(".form_newsletter_cad").submit(function(event){ event.preventDefault(); newsletterCad(this,'1'); }); $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,'2'); }); $('#blackoverlay').on('classChange',function() { $('.blackoverlay_mobile').click(function(){ actMenuMobile(false) }); $('.blackoverlay_smart').click(function(){ actSmartMobile(false) }); $('.blackoverlay_cont_empresa').click(function(){ actContatoEmpresa(false,0) }); $('.blackoverlay_corrigir').click(function(){ actCorrigirTexto(false,'') }); $('.blackoverlay_busca_desktop').click(function(){ actBuscaDesktop(false)}); }); $('.accordion_act1 .i-tit').click(function(e) { if($(this).prop("tagName") != 'A') { $(this).addClass('click'); $('.li-wrapper:not(\'.click\')').animate({height:0}, { duration: 400, queue: false }); $('.i-tit:not(\'.click\')').removeClass('ativo'); if(!$(this).hasClass('ativo')) { $(this).addClass('ativo'); $(this).find('+ .li-wrapper').animate({height:$(this).find('+ .li-wrapper > .accordion_act1').outerHeight()}, { duration: 400, queue: false }); } else { $(this).removeClass('ativo'); $(this).find('+ .li-wrapper').animate({height:0},400); } $(this).removeClass('click'); } }); $('.accordion_act2 .tit_1').click(function(e) { $(this).addClass('click'); $('.li-wp1:not(\'.click\')').animate({height:0}, { duration: 400, queue: false }); if(!$(this).hasClass('ativo')) { var wrapper1_id = 'wrapper_'+$(this).data('wrap0'); var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight(); $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false }); $('.tit_1').removeClass('ativo'); $(this).addClass('ativo'); } else { $('.tit_1').removeClass('ativo'); } $(this).removeClass('click'); }); $('.accordion_act2 .tit_2').click(function(e) { $(this).addClass('click'); $('.li-wp2:not(\'.click\')').animate({height:0}, { duration: 400, queue: false }); var wrapper1_id = 'wrapper_'+$(this).data('wrap0'); var wrapper2_id = 'wrapper_'+$(this).data('wrap0')+'_'+$(this).data('wrap1'); if(!$(this).hasClass('ativo')) { var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight(); var wrapper2_height = $('#'+wrapper2_id+' > .accordion_act2 > li').length* $('#'+wrapper2_id+' > .accordion_act2 > li').outerHeight(); $('#'+wrapper1_id).animate({height:wrapper1_height+wrapper2_height}, { duration: 400, queue: false }); $('#'+wrapper2_id).animate({height:wrapper2_height}, { duration: 400, queue: false }); $('.tit_2').removeClass('ativo'); $(this).addClass('ativo'); } else { var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length*$('#'+wrapper1_id+' > .accordion_act2 > li > .tit_2').outerHeight(); $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false }); $('.tit_2').removeClass('ativo'); } $(this).removeClass('click'); }); }); var lst_carregamento = 1; var txtstatus = 'ok'; var html_ico_load_auto_load = '<span id="icoload_autoload" class="wifl p-rel" ><span class="load-ico" ></span></span>'; function carregaConteudo() { if($('#auto_load_wrapper').length > 0) { var scrollPosition = window.pageYOffset; var windowSize = window.innerHeight; var footerHeightTop = $('#footer').offset().top; var stop_load = document.getElementById('auto_load_wrapper').getAttribute('data-stop-load'); if((scrollPosition + windowSize + 800) > footerHeightTop && stop_load == '0') { if(txtstatus == 'ok') { $("#auto_load_wrapper").append(html_ico_load_auto_load); txtstatus = 'timeout'; $.ajax({ type: 'POST', url: 'https://www.oficinadanet.com.br/ajax_oficina.php', data: 'act=autoLoadConteudo&lst_carregamento='+lst_carregamento+'&'+serializeDataAttr($('#auto_load_wrapper')), success: function(html) { $("#auto_load_wrapper").append(html); $("#icoload_autoload").remove(); txtstatus = 'ok'; } }); lst_carregamento++; } } } } $(function () { $(window).scroll(carregaConteudo); carregaConteudo(); }); $(window).scroll(function() { if ($(this).scrollTop() >= 150) { $('#top_page').fadeIn(200); } else { $('#top_page').fadeOut(200); } }); $('#top_page').click(function() { $('body,html').animate({ scrollTop : 0 }, 500); }); if ($(".carousel_destaque")[0]) { $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/slick/slick.css" rel="stylesheet">'); $.getScript("https://painel.m3midia.com.br/lib/slick/slick.js", function(){ $('.carousel_destaque').slick({ slidesToShow: 1, slidesToScroll: 1, autoplay: true, pauseOnHover: true, autoplaySpeed: 10000 }); setTimeout(function(){ $('.carousel_destaque').removeClass('carregando');; }, 1500); }); } if ($(".conteudo_galeria")[0]) { $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.css" rel="stylesheet">'); $.getScript("https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.js", function(){ $('.conteudo_galeria').lightSlider({ item: 3, loop:false, slideMove:3, easing: 'cubic-bezier(0.25, 0, 0.25, 1)', speed:600, responsive : [ { breakpoint:800, settings: { item:3, slideMove:1, slideMargin:6, } }, { breakpoint:480, settings: { item:2, slideMove:1 } } ] }).lightGallery({ }); $('.out_conteudo_galeria').css('display','block'); }); } $(function (){ function countdown() { if ($(".promo_relogio")[0]) { $(".promo_relogio").each(function( index ) { clearTimeout(timer_promo); var now = new Date(); var eventDate = new Date($(this).data('data-fim')); var currentTime = now.getTime(); var evenTime = eventDate.getTime(); var remTime = evenTime - currentTime; var sec = Math.floor(remTime / 1000); var min = Math.floor(sec / 60); var hur = Math.floor(min / 60); var day = Math.floor(hur / 24); hur %= 24; min %= 60; sec %= 60; hur = (hur < 10) ? "0" + hur : hur; min = (min < 10) ? "0" + min : min; sec = (sec < 10) ? "0" + sec : sec; hur = parseInt(parseInt(day*24)+parseInt(hur)); if(hur > 0 || min > 0 || sec > 0) { $(this).find('.promo_hora').html(hur); $(this).find('.promo_minuto').html(min); $(this).find('.promo_segundo').html(sec); } else { $(this).find('.promo_hora').html('00'); $(this).find('.promo_minuto').html('00'); $(this).find('.promo_segundo').html('00'); $('#sale-relogio'+$(this).data('key')).addClass('tpl2'); $('#promo_txt'+$(this).data('key')).html('A oferta expirou'); } }); var timer_promo = setTimeout(countdown, 1000); } } countdown(); }); </script> <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script> <script> var OneSignal = OneSignal || []; OneSignal.push( function() { OneSignal.setDefaultTitle("Oficina da Net"); OneSignal.setDefaultNotificationUrl("https://www.oficinadanet.com.br"); var oneSignal_options = {appId: "c28261c1-6765-4517-bc5f-38bbeb9f2ec3"}; //oneSignal_options['persistNotification'] = false; oneSignal_options['autoRegister'] = true; oneSignal_options['welcomeNotification'] = { }; oneSignal_options['welcomeNotification']['title'] = "Oi. Obrigado pela inscrição =)"; oneSignal_options['welcomeNotification']['message'] = "As melhores novidades avisaremos por aqui ;) - Siga @oficinadanet"; oneSignal_options['safari_web_id'] = "web.onesignal.auto.2068edc0-2ec7-4d8d-bc37-83913e3acbff"; OneSignal.init(oneSignal_options); }); </script> <div id="box_news" style=" width:440px; height:200px; display: none; position: fixed; z-index: 9999; top:15%; right:calc(50% - 220px);"> <div style="width:440px; height:150px; background-color: white; float:left; color:white; text-align: center; font-size:15px; z-index:99999"> <div class="redes_out"> <div style="width:90%; padding:5%; margin-top:-17px; background: #ff6600; color: white; float:left; margin-bottom: 20px;"> <strong style="font-size:25px;">OFICINA DA NET NO YOUTUBE!</strong><br><br> Estamos produzindo em nosso canal no Youtube,<br>reviews, tutoriais e muito conteúdo legal sobre tecnologia.<br /><br /> <span style='color:black; font-size:20px; text-decoration:underline; color:white; cursor: pointer' onclick='_gaq.push(["_trackEvent", "popseguir", "youtube", "youtube"]);window.open("https://www.youtube.com/user/OficinaDaNetTV");'><strong style="margin-bottom: 10px">INSCREVA-SE</strong></span> <br>e ative o sininho 😉<br> <br>Você vai receber ótimos conteúdos. <br><br> <div style="cursor:pointer; font-size:14px; " onclick="fechaBoxOficina()">Não, obrigado</div> </div> <style type="text/css" > .newsletter1 {width: 100%; height:222px; float: left; margin: 0; background: url(ROOTIMG2/template/images/sprite1.png) 0 -408px no-repeat; -webkit-box-shadow: 0 0 0 0 rgba(204, 204, 204, 1); -moz-box-shadow: 0 0 0 0 rgba(204, 204, 204, 1); box-shadow: 0 0 0 0 rgba(204, 204, 204, 1)} .newsletter1 b, .newsletter1 em {width: 100%; float: left; text-align: center; color: white} .newsletter1 b {margin-top: 20px; line-height: 24px; font-size: 24px; letter-spacing: -0.065em} .newsletter1 em {margin-top: 14px; line-height: 16px; font-size: 16px; letter-spacing: -0.050em } .newsletter1 .news_campo, .newsletter1 .news_bt_submit {height: 50px; float: left; margin-top: 22px; font-size: 17px; font-style: italic; border: 0px; background-color: white; -webkit-box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1); -moz-box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1); box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1)} .newsletter1 .news_campo {width: 320px; padding: 0 0 0 10px; margin-left: 30px; color: #484848} .newsletter1 .news_bt_submit {width: 50px; color: #22093e; cursor: pointer} .redes_out {width: 100%; float: left; margin:17px 0 0 0} </style> </div> </div> </div> <script type="text/javascript"> function abreBoxOficina() { $('#box_news').css('display','block'); blackoverlay(1); } function fechaBoxOficina() { $('#box_news').css('display','none'); actPopup('fechar','YOUTUBEBIG'); blackoverlay(0); } setTimeout('abreBoxOficina();','30000'); </script> <script type="text/javascript"> function actSininho() { _gaq.push(['_trackEvent', 'sininho', 'sininho', 'sininho']); ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONSININHO&valor=1&tempo=36000','box_sininho'); setTimeout("document.location = 'https://www.oficinadanet.com.br/novidades'",1000); } function actAvisoTopo(act) { switch(act) { case 'instagram': ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONINSTAGRAM&valor=1&tempo=36000','box_instagram'); break; case 'youtube': ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONYOUTUBE&valor=1&tempo=36000','box_youtube'); break; case 'user_topo': ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONUSERTOPO&valor=1&tempo=36000','box_user_topo'); break; } } $(document).ready(function() { $('#sininho').click(function(){ actSininho(); }); $('#instagram_topo').click(function(){ actAvisoTopo('instagram');}); $('#youtube_topo').click(function(){ actAvisoTopo('youtube'); }); $('#user_topo').click(function(){ actAvisoTopo('user_topo'); }); }); </script> <script type="text/javascript"> setTimeout("$('#box_user_topo').fadeIn(1000)",1000); setTimeout("$('#box_user_topo').fadeOut(1000)",5000); </script> <link rel="stylesheet" type="text/css" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=760"> </body> </html>