29/07/2023

Tudo Sobre: HTML e seus Fundamentos para Web Design

O que é HTML?

Seu Site, Seu Estilo

Desenvolvemos sites que refletem sua marca. Entre em contato para um projeto exclusivo!

Saiba mais

O HTML (HyperText Markup Language) é a linguagem de marcação padrão utilizada para criar e estruturar páginas da web. Ele define a estrutura e o layout do conteúdo de um site, permitindo que os navegadores interpretem e exibam corretamente as informações para os usuários. O HTML utiliza tags (etiquetas) para marcar elementos específicos dentro de um documento, indicando ao navegador como esses elementos devem ser apresentados.

Principais fundamentos do HTML

O HTML possui uma série de elementos e atributos que são fundamentais para a criação de páginas da web. Alguns dos principais fundamentos do HTML incluem:

Estrutura básica do HTML

A estrutura básica de um documento HTML consiste em uma declaração do tipo de documento, seguida pela tag que envolve todo o conteúdo da página. Dentro da tag , temos as tags e . A tag é utilizada para incluir metadados, como o título da página, enquanto a tag contém o conteúdo visível para os usuários.

Tags e elementos HTML

As tags HTML são utilizadas para marcar elementos específicos dentro de um documento. Cada tag possui uma função específica e pode conter atributos que modificam seu comportamento ou aparência. Alguns exemplos de tags HTML incluem:

Atributos HTML

Os atributos HTML são utilizados para modificar o comportamento ou a aparência de uma tag. Eles são adicionados dentro da tag, após o nome da tag e antes do fechamento da mesma. Alguns exemplos de atributos HTML incluem:

Formulários HTML

Os formulários HTML são utilizados para coletar informações dos usuários, como nome, e-mail, senha, entre outros. Eles são compostos por tags específicas, como , , , , entre outras. Os dados inseridos pelos usuários nos formulários podem ser enviados para um servidor para processamento posterior.</p> <p><h3>Tabelas HTML</h3> </p> <p>As tabelas HTML são utilizadas para exibir dados de forma organizada em linhas e colunas. Elas são compostas por tags como </p> <table>, </p> <tr>, </p> <td>, entre outras. As tabelas podem ser estilizadas utilizando CSS para melhorar sua aparência e legibilidade.</p><div class="anuncio-adsninja"><a class="ads_no_image" target="_blank" data-id="233136" href="https://portfolio.mestrewordpress.com" rel="noopener noreferrer"><h4 class="title_ads">Seu Site, Seu Estilo</h4><p class="desc_ads">Desenvolvemos sites que refletem sua marca. Entre em contato para um projeto exclusivo!</p><p class="btn_saiba_mais">Saiba mais</p></a></div> <p><h3>Links HTML</h3> </p> <p>Os links HTML são utilizados para criar hiperlinks, permitindo que os usuários naveguem entre diferentes páginas da web. Eles são criados utilizando a tag <a> e podem conter atributos como href, que define o destino do link, e target, que define como o link será aberto (na mesma janela, em uma nova janela, etc.).</p> <p><h3>Imagens HTML</h3> </p> <p>As imagens HTML são utilizadas para exibir elementos gráficos em uma página da web. Elas são criadas utilizando a tag <img> e contêm atributos como src, que define o caminho da imagem, alt, que define um texto alternativo para casos em que a imagem não pode ser exibida, e width e height, que definem as dimensões da imagem.</p> <p><h3>Estilos CSS</h3> </p> <p>O CSS (Cascading Style Sheets) é uma linguagem utilizada para estilizar e formatar o conteúdo de uma página da web. Ele permite definir cores, fontes, tamanhos, margens, entre outros aspectos visuais. O CSS é utilizado em conjunto com o HTML, utilizando seletores para aplicar estilos a elementos específicos.</p> <p><h3>JavaScript</h3> </p> <p>O JavaScript é uma linguagem de programação utilizada para adicionar interatividade e funcionalidades avançadas a uma página da web. Ele permite criar animações, validar formulários, manipular elementos da página, entre outras ações. O JavaScript é executado no navegador do usuário e pode interagir com o HTML e o CSS.</p> <p><h3>Considerações finais</h3> </p> <p>O HTML é a base fundamental para o desenvolvimento de páginas da web. Compreender seus fundamentos e utilizar corretamente suas tags e elementos é essencial para criar sites bem estruturados e otimizados para os mecanismos de busca. Além disso, o conhecimento de CSS e JavaScript permite adicionar estilo e interatividade às páginas, tornando-as mais atraentes e funcionais para os usuários.</p> <div class="post-views content-post post-231713 entry-meta load-static"> <span class="post-views-icon dashicons dashicons-chart-bar"></span> <span class="post-views-label">Views:</span> <span class="post-views-count">28</span> </div>  <section id="acf_widget_centive_widget_image-6" class="img_content centive_widget_post_footer_item clearfix acf_widget_centive_widget_image"><div class="centive_widget_img"><a href="https://mestrewordpress.com/centive" target="_blank"><img src="https://mestrewordpress.com/wp-content/uploads/2024/02/Mestre-Wordpress-blog-e-servicos.-2-1.png"></a></div><div class="clear"></div></section>  </div>    </div>   <section class="grid_12 responsive box_white author_centive row box_autor_post"> <div class="grid_3 avatar txtcenter"> <img alt='' src='https://secure.gravatar.com/avatar/?s=150&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=300&d=mm&r=g 2x' class='avatar avatar-150 photo avatar-default' height='150' width='150' decoding='async'/> </div> <div class="grid_9 last center_small"> <h4 class="light sobre_autor_h4"> <span class="sobre_autor_span">Sobre o autor</span> <span class="sobre_autor_link_span"></span> | <a class="sobre_autor_site_span" href="" target="_blank">Website</a> </h4> <p></p> <p class="nomargin"></p> </div> </section>     <section class="grid_12 responsive related center_mid" role="complementary"><h5 class="light">Você <strong>vai gostar</strong> também:</h5><div class="nomb related--grid"> <article class="box_white article_list"> <div class="image_post row"> <a href="https://mestrewordpress.com/guia-passo-a-passo-para-criar-um-blog-de-sucesso-em-wordpress/" title="Guia Passo a Passo para Criar um Blog de Sucesso em WordPress"><img alt="Guia Passo a Passo para Criar um Blog de Sucesso em WordPress" src="https://mestrewordpress.com/wp-content/uploads/2024/10/233192-guia-passo-a-passo-para-criar-um-blog-de-sucesso-em-wordpress-350x200.jpg"></a> </div> <header class="related__header"> <h4><a href="https://mestrewordpress.com/guia-passo-a-passo-para-criar-um-blog-de-sucesso-em-wordpress/" title="Guia Passo a Passo para Criar um Blog de Sucesso em WordPress">Guia Passo a Passo para Criar um Blog de Sucesso em WordPress</a></h4> </header> <a class="minibtn onerow" href="https://mestrewordpress.com/guia-passo-a-passo-para-criar-um-blog-de-sucesso-em-wordpress/" title="Guia Passo a Passo para Criar um Blog de Sucesso em WordPress">Continue lendo <i class="fa fa-arrow-circle-right"></i></a> </article> <article class="box_white article_list"> <div class="image_post row"> <a href="https://mestrewordpress.com/10-dicas-essenciais-para-iniciantes-em-desenvolvimento-web/" title="10 Dicas Essenciais para Iniciantes em Desenvolvimento Web"><img alt="10 Dicas Essenciais para Iniciantes em Desenvolvimento Web" src="https://mestrewordpress.com/wp-content/uploads/2024/02/232895-10-dicas-essenciais-para-iniciantes-em-desenvolvimento-web-350x200.jpg"></a> </div> <header class="related__header"> <h4><a href="https://mestrewordpress.com/10-dicas-essenciais-para-iniciantes-em-desenvolvimento-web/" title="10 Dicas Essenciais para Iniciantes em Desenvolvimento Web">10 Dicas Essenciais para Iniciantes em Desenvolvimento Web</a></h4> </header> <a class="minibtn onerow" href="https://mestrewordpress.com/10-dicas-essenciais-para-iniciantes-em-desenvolvimento-web/" title="10 Dicas Essenciais para Iniciantes em Desenvolvimento Web">Continue lendo <i class="fa fa-arrow-circle-right"></i></a> </article> <article class="box_white article_list"> <div class="image_post row"> <a href="https://mestrewordpress.com/como-criar-uma-estrategia-de-conteudo-evergreen-para-seu-site-dicas-e-exemplos/" title="Como Criar uma Estratégia de Conteúdo Evergreen para seu Site: Dicas e Exemplos"><img alt="Como Criar uma Estratégia de Conteúdo Evergreen para seu Site: Dicas e Exemplos" src="https://mestrewordpress.com/wp-content/uploads/2024/02/232901-como-criar-uma-estrategia-de-conteudo-evergreen-para-seu-site-dicas-e-exemplos-350x200.jpg"></a> </div> <header class="related__header"> <h4><a href="https://mestrewordpress.com/como-criar-uma-estrategia-de-conteudo-evergreen-para-seu-site-dicas-e-exemplos/" title="Como Criar uma Estratégia de Conteúdo Evergreen para seu Site: Dicas e Exemplos">Como Criar uma Estratégia de Conteúdo Evergreen para seu Site: Dicas e Exemplos</a></h4> </header> <a class="minibtn onerow" href="https://mestrewordpress.com/como-criar-uma-estrategia-de-conteudo-evergreen-para-seu-site-dicas-e-exemplos/" title="Como Criar uma Estratégia de Conteúdo Evergreen para seu Site: Dicas e Exemplos">Continue lendo <i class="fa fa-arrow-circle-right"></i></a> </article> </div></section>   <section class="grid_12 commentswrap"></section>  </article>  </main>  <div class="clear"></div> <section id="widget_after_content"> <div class="container responsive"> </div> </section> <div class="clear"></div>  </div>    </div> </div>    <div class="clear"></div> <div id="centive_widget_footer" class="container responsive bigcapture"> <section id="acf_widget_centive_widget_image-4" class="grid_12 txtcenter sidebar_item row acf_widget_centive_widget_image"><div class="centive_widget_img"><a href="https://mestrewordpress.com/centive" target="_blank"><img src="https://mestrewordpress.com/wp-content/uploads/2024/02/centiveavante-horizontal-a.png"></a></div><div class="clear"></div></section></div> <div class="clear"></div> <footer id="footer" class="clearfix" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter">    <div id="s-widgets-base"> <div class="container content widgets-base-grid"> </div> </div>  <div class="container responsive rowtop"> <div class="grid_6 adapt center_big"> <p id="bloginfoName" class="nomargin "><strong>Mestre Wordpress - Especialista em Desenvolvimento de Sites © 2025</strong>. Todos os direitos reservados.</p><p id="creditosCentive1373516" class="nomargin ">Tema WordPress Otimizado <a rel="nofollow" target="_blank" href="https://go.hotmart.com/R13965094Y" title="Tema WordPress Otimizado Centive"><strong>Centive ®</strong></a></p><style>#apagouCentive1373516 { display:none !important; }</style> </div> <div class="grid_6 last adapt txtright center_big"><p>Site Desenvolvido por Mestre Wordpress por Diego Menezes</p></div> </div> </footer>  </div>    <link rel="stylesheet" type="text/css" href="https://mestrewordpress.com/wp-content/themes/centiveavante/lib/font-awesome/css/font-awesome.min.css">   <link rel="stylesheet" type="text/css" href="https://mestrewordpress.com/wp-content/themes/centiveavante/js/fancybox/fancybox.css"> <script type="text/javascript" src="https://mestrewordpress.com/wp-content/themes/centiveavante/js/fancybox/fancybox.js"></script>   <script type="text/javascript" src="https://mestrewordpress.com/wp-content/themes/centiveavante/js/resmenu.js"></script>         <script type="text/javascript" src="https://mestrewordpress.com/wp-content/themes/centiveavante/js/fittext.js"></script>  <div id="darklayer"></div>  <script type="text/javascript"> jQuery(document).ready(function($){ // fancyBox $('a.fancybox').fancybox(); $('a.iframebox').fancybox({'width':800,'height':450,'type':'iframe'}); // Responsive Menu // $('#menu ul').ReSmenu({ // menuClass: 'responsive_menu', // Responsive menu class // selectId: 'resmenu', // select ID // textBefore: false, // Text to add before the mobile menu // selectOption: 'Menu - Escolha uma página aqui', // First select option // activeClass: 'current-menu-item', // Active menu li class // maxWidth: 960 // Size to which the menu is responsive // }); $('#icomenumob').click(function() { $('nav#menu > ul').slideToggle('fast'); }); // $('#menu ul').superfish(); '' // Scroll to top show and hide $(window).scroll(function(){ if ($(this).scrollTop() > 150) { $('.scrolltop').fadeIn(); $('#topmsg').fadeIn(); } else { $('.scrolltop').fadeOut(); $('#topmsg').fadeOut(); } }); // Scroll to top animate // $('.scrolltop').click(function(){ // $('html, body').animate({ scrollTop: 0 }, 400); // return false; // }); // FitText $('.menuside a').fitText(1.6); // Chat $('#chat h4, #darklayer').click(function() { $('.formchat').slideToggle('fast'); $('#darklayer').fadeToggle('fast'); }); // $(".formchat input, .formchat select, .formchat textarea").focus(function(event){ // $("#chat").css('opacity','1'); // }).blur(function(event){ // $("#chat").css('opacity','0.7'); // }); // $(document).mouseup(function(e) // { // var container = $("#chat"); // if (!container.is(e.target) && container.has(e.target).length === 0) // { // $('.formchat').hide(); // } // }); // Resgatar cookie Top Msg if ($.cookie('toggleTopMsg') == 'fechou') { $('#topmsg').addClass('dnone'); } function alignBars(){ if ($('#wpadminbar').length && window.matchMedia('(min-width: 601px)').matches) { $('#topmsg').css('margin-top', $('#wpadminbar').outerHeight()); $('#sidefixed').css('top', $('#topmsg').outerHeight() + $('#wpadminbar').outerHeight() + 20); } else { $('#topmsg').css('margin-top', '0'); $('#sidefixed').css('top', $('#topmsg').outerHeight() + 20); } } alignBars(); $(window).resize(function() { alignBars(); }); // Hide Top Msg $('#close_top_msg').click(function(e) { // Criar cookie com escolha do usuário var date = new Date(); var minutes = 30; date.setTime(date.getTime() + (minutes * 60 * 1000)); $.cookie('toggleTopMsg', 'fechou', { path: '/', expires: date }); $('#topmsg').slideUp('fast', function() { $('#topmsg').addClass('dnone'); }); $('#sidefixed').css('top', $('#wpadminbar').outerHeight() + 20); }); // if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {} // else{ $('.btn_share.whatsapp').click(function(){ alert('Para compartilhar no Whatsapp, é necessário acessar através de um celular ou tablet.'); }); } }); </script>  <div id="apagouCentive1373516">Por gentileza, se deseja alterar o arquivo do rodapé,<br>entre em contato com o suporte.</div> <script type="text/javascript"> // var $load = jQuery.noConflict(); // $load(window).load(function(){ // Equal Height Sidebar // if ($load('body').width() > 720) { // var highestCol = Math.max($load('#width_content').outerHeight(),$load('#width_sidebar').outerHeight()); // $load('#width_content').css('min-height',highestCol); // } // $load(window).resize(function() { // if ($load('body').width() > 720) { // var highestCol = Math.max($load('#width_content').outerHeight(),$load('#width_sidebar').outerHeight()); // $load('#width_content').css('min-height',highestCol); // } else { // $load('#width_content').css('min-height','0'); // } // }); // scrollToFixed Sidebar // $load('#sidefixed').scrollToFixed({ // marginTop: 20, // limit: function() { // var limit = $load('#footer, #centive_widget_footer').offset().top - $load('#sidefixed').outerHeight() - 20; // return limit; // }, // minWidth: 960, // zIndex: 900, // fixed: function(){}, // dontCheckForPositionFixedSupport:true // }); // }); </script>       <script type="text/javascript"> /* MonsterInsights Scroll Tracking */ if ( typeof(jQuery) !== 'undefined' ) { jQuery( document ).ready(function(){ function monsterinsights_scroll_tracking_load() { if ( ( typeof(__gaTracker) !== 'undefined' && __gaTracker && __gaTracker.hasOwnProperty( "loaded" ) && __gaTracker.loaded == true ) || ( typeof(__gtagTracker) !== 'undefined' && __gtagTracker ) ) { (function(factory) { factory(jQuery); }(function($) { /* Scroll Depth */ "use strict"; var defaults = { percentage: true }; var $window = $(window), cache = [], scrollEventBound = false, lastPixelDepth = 0; /* * Plugin */ $.scrollDepth = function(options) { var startTime = +new Date(); options = $.extend({}, defaults, options); /* * Functions */ function sendEvent(action, label, scrollDistance, timing) { if ( 'undefined' === typeof MonsterInsightsObject || 'undefined' === typeof MonsterInsightsObject.sendEvent ) { return; } var paramName = action.toLowerCase(); var fieldsArray = { send_to: 'G-77L4HKNC02', non_interaction: true }; fieldsArray[paramName] = label; if (arguments.length > 3) { fieldsArray.scroll_timing = timing MonsterInsightsObject.sendEvent('event', 'scroll_depth', fieldsArray); } else { MonsterInsightsObject.sendEvent('event', 'scroll_depth', fieldsArray); } } function calculateMarks(docHeight) { return { '25%' : parseInt(docHeight * 0.25, 10), '50%' : parseInt(docHeight * 0.50, 10), '75%' : parseInt(docHeight * 0.75, 10), /* Cushion to trigger 100% event in iOS */ '100%': docHeight - 5 }; } function checkMarks(marks, scrollDistance, timing) { /* Check each active mark */ $.each(marks, function(key, val) { if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) { sendEvent('Percentage', key, scrollDistance, timing); cache.push(key); } }); } function rounded(scrollDistance) { /* Returns String */ return (Math.floor(scrollDistance/250) * 250).toString(); } function init() { bindScrollDepth(); } /* * Public Methods */ /* Reset Scroll Depth with the originally initialized options */ $.scrollDepth.reset = function() { cache = []; lastPixelDepth = 0; $window.off('scroll.scrollDepth'); bindScrollDepth(); }; /* Add DOM elements to be tracked */ $.scrollDepth.addElements = function(elems) { if (typeof elems == "undefined" || !$.isArray(elems)) { return; } $.merge(options.elements, elems); /* If scroll event has been unbound from window, rebind */ if (!scrollEventBound) { bindScrollDepth(); } }; /* Remove DOM elements currently tracked */ $.scrollDepth.removeElements = function(elems) { if (typeof elems == "undefined" || !$.isArray(elems)) { return; } $.each(elems, function(index, elem) { var inElementsArray = $.inArray(elem, options.elements); var inCacheArray = $.inArray(elem, cache); if (inElementsArray != -1) { options.elements.splice(inElementsArray, 1); } if (inCacheArray != -1) { cache.splice(inCacheArray, 1); } }); }; /* * Throttle function borrowed from: * Underscore.js 1.5.2 * http://underscorejs.org * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors * Underscore may be freely distributed under the MIT license. */ function throttle(func, wait) { var context, args, result; var timeout = null; var previous = 0; var later = function() { previous = new Date; timeout = null; result = func.apply(context, args); }; return function() { var now = new Date; if (!previous) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0) { clearTimeout(timeout); timeout = null; previous = now; result = func.apply(context, args); } else if (!timeout) { timeout = setTimeout(later, remaining); } return result; }; } /* * Scroll Event */ function bindScrollDepth() { scrollEventBound = true; $window.on('scroll.scrollDepth', throttle(function() { /* * We calculate document and window height on each scroll event to * account for dynamic DOM changes. */ var docHeight = $(document).height(), winHeight = window.innerHeight ? window.innerHeight : $window.height(), scrollDistance = $window.scrollTop() + winHeight, /* Recalculate percentage marks */ marks = calculateMarks(docHeight), /* Timing */ timing = +new Date - startTime; checkMarks(marks, scrollDistance, timing); }, 500)); } init(); }; /* UMD export */ return $.scrollDepth; })); jQuery.scrollDepth(); } else { setTimeout(monsterinsights_scroll_tracking_load, 200); } } monsterinsights_scroll_tracking_load(); }); } /* End MonsterInsights Scroll Tracking */ </script><script type="text/javascript" src="https://mestrewordpress.com/wp-content/themes/centiveavante/js/jquery.cookie.js?ver=1.4.1" id="jquery.cookie-js"></script> </body> </html>