{"id":4027,"date":"2019-08-05T20:47:23","date_gmt":"2019-08-05T20:47:23","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=4027"},"modified":"2024-11-09T09:13:31","modified_gmt":"2024-11-09T12:13:31","slug":"html-basico","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","title":{"rendered":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML"},"content":{"rendered":"<p>Se voc\u00ea pretende criar um site, aprender o HTML b\u00e1sico \u00e9 uma das melhores coisas que voc\u00ea pode fazer! Independentemente de pretender trabalhar com <a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/o-que-e-o-wordpress\/\">WordPress<\/a>, web designer ou desenvolvimento web, conhecer o b\u00e1sico do HTML \u00e9 essencial. Esse conhecimento permite compreender como funciona uma p\u00e1gina web e seus elementos. Dessa forma, voc\u00ea pode criar seus pr\u00f3prios documentos e p\u00e1ginas HTML. Al\u00e9m disso, no futuro poder\u00e1 tamb\u00e9m fazer uso desses recursos para fazer altera\u00e7\u00f5es e manuten\u00e7\u00f5es em p\u00e1ginas j\u00e1 existentes.<\/p>\n<p>Ao final deste artigo, voc\u00ea ter\u00e1 um conhecimento do HTML b\u00e1sico. Portanto, conhecer\u00e1 o suficiente para realizar as sugest\u00f5es acima. Dessa forma, tamb\u00e9m ser\u00e1 poss\u00edvel avan\u00e7ar seus estudos a um n\u00edvel intermedi\u00e1rio e avan\u00e7ado para come\u00e7ar a criar p\u00e1ginas profissionais.<\/p>\n<p>Veja tamb\u00e9m este artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/cursos-de-programacao-gratuitos\/\">cursos de programa\u00e7\u00e3o gratuitos<\/a>.<\/p>\n<p>Este artigo est\u00e1 dividido nos seguintes t\u00f3picos:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top01\">O que \u00e9 o HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top02\">Como funciona o HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top03\">As tags do HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top04\">Estrutura b\u00e1sica de um documento HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top05\">Tags importantes para o HTML b\u00e1sico<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top06\">Classes e IDs no HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\">Criando uma p\u00e1gina com elementos do HTML b\u00e1sico<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top08\">Dicas para avan\u00e7ar seus estudos em HTML b\u00e1sico e desenvolvimento web<\/a><\/li>\n<\/ul>\n<p><a name=\"top01\"><\/a><\/p>\n<h2>O que \u00e9 o HTML<\/h2>\n<p>O <strong>HTML<\/strong> (HyperText Markup Language) n\u00e3o \u00e9 uma linguagem de programa\u00e7\u00e3o, mas sim de marca\u00e7\u00e3o. Portanto, isso significa que n\u00e3o podemos usar o <strong>HTML<\/strong> para criar funcionalidades din\u00e2micas. Entretanto, o <strong>HTML<\/strong> possibilita a organiza\u00e7\u00e3o e formata\u00e7\u00e3o de documentos, de forma similar ao que fazemos em editores de texto, como o Microsoft Word.<\/p>\n<p>O <strong>HTML<\/strong> \u00e9 uma linguagem de marca\u00e7\u00e3o de HiperTexto utilizada para estruturar um documento ou p\u00e1gina para a web. Ou seja, ao visualizar uma p\u00e1gina na internet, voc\u00ea ver\u00e1 a renderiza\u00e7\u00e3o de um c\u00f3digo criado em <strong>HTML<\/strong> em conjunto com outras linguagens.<\/p>\n<p>Ou seja, a linguagem <strong>HTML<\/strong> permite criarmos um c\u00f3digo que ser\u00e1 renderizado pelos navegadores. Portanto, ser\u00e1 mostrado o resultado dessa renderiza\u00e7\u00e3o ao cliente. Dessa forma, todas as p\u00e1ginas que voc\u00ea acessar pela internet s\u00e3o c\u00f3digos escritos em linguagem de m\u00e1quina. Os pilares b\u00e1sicos do desenvolvimento web Front End s\u00e3o as linguagens <strong>HTML<\/strong>, <strong>CSS<\/strong> e <strong>JavaScript<\/strong>.<\/p>\n<p>O <strong>HTML<\/strong> \u00e9 utilizado para marcar os elementos da p\u00e1gina, ou seja, para estruturar a p\u00e1gina. O <strong>CSS<\/strong> permite que possamos aplicar <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilos<\/a> aos elementos atrav\u00e9s de estilo em cascata. Ou seja, com o CSS, temos controle e modificamos a apresenta\u00e7\u00e3o visual da p\u00e1gina.\u00a0 J\u00e1 o <strong>JavaScript<\/strong> \u00e9 uma linguagem de programa\u00e7\u00e3o que permite adicionar intera\u00e7\u00e3o dentro da sua p\u00e1gina.<\/p>\n<p>Portanto, se voc\u00ea deseja <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-site-profissional\/\">criar qualquer p\u00e1gina da internet<\/a>, saber pelo menos o HTML b\u00e1sico \u00e9 muito importante.<\/p>\n<p>Atualmente o <strong>HTML<\/strong> se encontra na\u00a0<a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">vers\u00e3o HTML5<\/a>, e \u00e9 padronizada pela <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C (World Wide Web Consortium)<\/a>, uma organiza\u00e7\u00e3o internacional respons\u00e1vel por estabelecer padr\u00f5es para a internet, como as linguagens <strong>XML<\/strong>, <strong>CSS<\/strong> e o <strong>SOAP<\/strong>.<\/p>\n<p>Recomendamos tamb\u00e9m a leitura do nosso artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">o que \u00e9 HTML<\/a>, onde poder\u00e1 compreender melhor sobre sua hist\u00f3ria, sua evolu\u00e7\u00e3o e muito mais.<br \/>\n<a name=\"top02\"><\/a><\/p>\n<h2>Como funciona o HTML<\/h2>\n<p>Um documento <strong>HTML<\/strong> nada mais \u00e9 que um documento contendo a extens\u00e3o .<b><i>html<\/i><\/b>\u00a0ou\u00a0<b><i>.htm<\/i><\/b><i>. <\/i>A partir deste documento, o navegador faz a leitura do arquivo e renderiza o seu conte\u00fado para que o usu\u00e1rio final possa visualiz\u00e1-lo. Portanto, os arquivos <strong>.html <\/strong>ou <strong>.htm<\/strong> podem ser visualizados em qualquer navegador (como Google Chrome, Opera, Safari, Mozilla Firefox, etc).<\/p>\n<p>Geralmente um <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-buttton\/\">site \u00e9 composto por diversas p\u00e1ginas<\/a> <strong>HTML<\/strong>, como por exemplo: um website que contenha tr\u00eas p\u00e1ginas (uma homepage, uma p\u00e1gina de contato e uma p\u00e1gina de produtos) receber\u00e1 ao menos tr\u00eas documentos\u00a0<strong>.html<\/strong>\u00a0distintos, sendo um para cada p\u00e1gina do website.<\/p>\n<p>Dentro desse documento, s\u00e3o escrito diversas linhas de c\u00f3digos de marca\u00e7\u00e3o, ou seja, elementos do HTML. Esses elementos se dividem entre as tags HTML e o seu conte\u00fado.<\/p>\n<p><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/4-motivos-para-criar-site-com-homehost\/\">Para poder criar<\/a> ou editar um documento HTML, o \u00fanico recurso que voc\u00ea precisa \u00e9 de um editor de texto, como o pr\u00f3prio bloco de notas. Por\u00e9m, para o desenvolvimento recomenda-se utilizar editores especializados, como o <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sublime Text<\/a>, o <a href=\"https:\/\/notepad-plus-plus.org\" target=\"_blank\" rel=\"noopener noreferrer\">Notepad++<\/a>, o <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>, entre outros. Portanto, verifique qual o editor de texto que mais se adapta ao seu gosto e utilize-o para criar seus c\u00f3digos! Para fins de estudos e testes, recomendamos tamb\u00e9m o <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Code Pen<\/a>, uma ferramenta completa para teste de c\u00f3digos HTML, CSS e JavaScript diretamente do navegador.<\/p>\n<p>Cada p\u00e1gina consiste em uma s\u00e9rie de\u00a0<strong>tags<\/strong>\u00a0(tamb\u00e9m chamados de elementos) que podem ser consideradas os blocos de constru\u00e7\u00e3o das p\u00e1ginas. Portanto, esses blocos s\u00e3o a maneira com a qual o HTML faz a marca\u00e7\u00e3o dos conte\u00fados, criando a hierarquia e a estrutura do mesmo, dividido entre se\u00e7\u00f5es, par\u00e1grafos, cabe\u00e7alhos, e outros.<br \/>\n<a name=\"top03\"><\/a><\/p>\n<h2>As tags do HTML<\/h2>\n<p>As tags s\u00e3o parte dos elementos do HTML. S\u00e3o usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um c\u00f3digo em <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a>, as tags ser\u00e3o interpretadas pelo navegador, produzindo assim a estrutura e o conte\u00fado visual da p\u00e1gina.<\/p>\n<p>A principal caracter\u00edstica das tags \u00e9 estarem sempre dentro dos sinais de chevron (sinal de \u201cmaior que\u201d e \u201cmenor que\u201d), ou seja:<strong>\u00a0&lt; &gt;<\/strong>.<\/p>\n<p>As tags HTML s\u00e3o divididas em dois tipos: as que precisam de fechamento e as que n\u00e3o precisam de fechamento. As tags que precisam de fechamento possuem a sintaxe\u00a0<strong>&lt;tag&gt;<\/strong> &#8230;<strong>&lt;\/tag&gt;<\/strong>, j\u00e1 as que n\u00e3o precisam de fechamento possuem como estrutura\u00a0<strong>&lt;tag\/&gt;<\/strong>.<\/p>\n<p>Al\u00e9m disso, uma mesma tag pode receber um ou mais atributos, que possuir\u00e1 um valor que modifica sua estrutura ou funcionalidade. Os atributos nada mais s\u00e3o que propriedades capazes de modificar e personalizar a funcionalidade de uma tag. Portanto, podemos utilizar diversos atributos, como largura, altura, dentre outros. Com a vers\u00e3o do HTML5, boa parte dos atributos referente a estiliza\u00e7\u00e3o deixaram de ser utilizados, passando a ser estilizado atrav\u00e9s do <strong>CSS<\/strong>.<\/p>\n<p>Voc\u00ea pode estudar mais a respeito das principais tags do HTML neste\u00a0<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">nosso artigo sobre as tags HTML<\/a>.<br \/>\n<a name=\"top04\"><\/a><\/p>\n<h2>Estrutura b\u00e1sica de um documento HTML<\/h2>\n<p>A estrutura b\u00e1sica de um documento HTML, ou seja, de uma p\u00e1gina da web, \u00e9 realizada da seguinte forma:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>A partir desse c\u00f3digo, podemos desenvolver toda a nossa p\u00e1gina, estruturando como precisarmos. Mas primeiro, \u00e9 bom compreender o que est\u00e1 sendo feito at\u00e9 o momento:<\/p>\n<ul>\n<li><strong>&lt;!DOCTYPE html&gt;<\/strong> \u2014 A declara\u00e7\u00e3o do doctype informa ao navegador que est\u00e1 sendo utilizado a linguagem HTML . Hoje em dia, o doctype basicamente \u00e9 necess\u00e1rio apenas para garantir que o documento se comporte corretamente. Caso queira saber mais a respeito, leia o artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/doctype-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">doctype HTML<\/a>.<\/li>\n<li><strong>&lt;html&gt;&lt;\/html&gt;<\/strong> \u2014 O elemento <strong>&lt;html&gt;<\/strong> envolve todo o conte\u00fado da p\u00e1gina HTML.<\/li>\n<li><strong>&lt;head&gt;&lt;\/head&gt;<\/strong> \u2014 O elemento <strong>&lt;head&gt;<\/strong> \u00e9 o local no qual voc\u00ea ir\u00e1 incluir todos os elementos que deseja incluir na p\u00e1gina mas que n\u00e3o deve ser renderizado. Dentre eles, podemos utilizar os metadados, o t\u00edtulo, as tags <strong>&lt;link&gt;<\/strong> para adicionar folhas de estilos, entre outras.<\/li>\n<li><strong>&lt;meta charset=&#8221;utf-8&#8243;&gt;<\/strong> \u2014 Esse elemento de metadados serve para definir o conjunto de caracteres que seu documento deve usar para o utf-8.<\/li>\n<li><strong>&lt;title&gt;&lt;\/title&gt;<\/strong> \u2014 O elemento <strong>&lt;title&gt;<\/strong> serve para definir o t\u00edtulo de sua p\u00e1gina. Portanto, \u00e9 aqui que se define o t\u00edtulo que \u00e9 mostrado na guia do navegador.<\/li>\n<li><strong>&lt;body&gt;&lt;\/body&gt;<\/strong> \u2014 Finalmente, neste elemento,\u00a0ficar\u00e3o todos os elementos que ser\u00e3o renderizados pelo navegador, ou seja, todo o corpo da sua p\u00e1gina HTML.<\/li>\n<\/ul>\n<p><a name=\"top05\"><\/a><\/p>\n<h2>Tags importantes para o HTML b\u00e1sico<\/h2>\n<p>Atualmente,<a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html5\/\" target=\"_blank\" rel=\"noopener noreferrer\"> no HTML5<\/a>, j\u00e1 \u00e9 poss\u00edvel encontrar mais que 140 <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tags HTML<\/a>. Por\u00e9m, boa parte dessas n\u00e3o s\u00e3o muito utilizadas, e no dia a dia do desenvolvimento, geralmente encontraremos as mesmas tags sendo utilizadas. Vejamos abaixo uma tabela contendo as tags mais utilizadas e mais importantes para dominar o HTML b\u00e1sico:<\/p>\n<table border=\"1\">\n<thead>\n<tr>\n<th>Tag<\/th>\n<th>Descri\u00e7\u00e3o<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>&lt;style&gt;&lt;\/style&gt;<\/td>\n<td>Introduz um c\u00f3digo CSS ao documento HTML.<\/td>\n<\/tr>\n<tr>\n<td>&lt;script&gt;&lt;\/script&gt;<\/td>\n<td>Introduz um c\u00f3digo de Script, como JavaScript, ao documento HTML.<\/td>\n<\/tr>\n<tr>\n<td>&lt;link\/&gt;<\/td>\n<td>Possibilita fazer uma linkagem com documentos locais ou globais, como por exemplo fontes ou folhas de estilos.<\/td>\n<\/tr>\n<tr>\n<td>&lt;meta\/&gt;<\/td>\n<td>Possibilita incluir metadados na p\u00e1gina, como por exemplo, descri\u00e7\u00e3o, <a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/favicon\/\">favicon<\/a>, etc.<\/td>\n<\/tr>\n<tr>\n<td>&lt;h1&gt;&lt;\/h1&gt;,<br \/>\n&lt;h2&gt;&lt;\/h2&gt;,<br \/>\n&lt;h3&gt;&lt;\/h3&gt;,<br \/>\n&lt;h4&gt;&lt;\/h4&gt;,<br \/>\n&lt;h5&gt;&lt;\/h5&gt;,<br \/>\n&lt;h6&gt;&lt;\/h6&gt;<\/td>\n<td>Tags para definir um t\u00edtulo e subt\u00edtulos, variando de 1 a 6, sendo h1 o t\u00edtulo mais importante e h6 o de menor import\u00e2ncia.<\/td>\n<\/tr>\n<tr>\n<td>&lt;p&gt;&lt;\/p&gt;<\/td>\n<td>Tag para definir um par\u00e1grafo.<\/td>\n<\/tr>\n<tr>\n<td>&lt;span&gt;&lt;\/span&gt;<\/td>\n<td>Define um span.<\/td>\n<\/tr>\n<tr>\n<td>&lt;br\/&gt;<\/td>\n<td>Realiza uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/quebra-de-linha-html\/\">quebra de linha<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;a&gt;&lt;\/a&gt;<\/td>\n<td>Tag de link, junto ao atributo href=&#8221;&#8230;&#8221; \u00e9 respons\u00e1vel pela principal caracter\u00edstica da web. <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a><\/td>\n<\/tr>\n<tr>\n<td>&lt;header&gt;&lt;\/header&gt;<\/td>\n<td>Define um cabe\u00e7alho &#8211; tag estrutural e sem\u00e2ntica.<\/td>\n<\/tr>\n<tr>\n<td>&lt;section&gt;&lt;\/section&gt;<\/td>\n<td>Define uma se\u00e7\u00e3o &#8211; tag estrutural e sem\u00e2ntica.<\/td>\n<\/tr>\n<tr>\n<td>&lt;article&gt;&lt;\/article&gt;<\/td>\n<td>Define um artigo &#8211; tag estrutural e sem\u00e2ntica.<\/td>\n<\/tr>\n<tr>\n<td>&lt;div&gt;&lt;\/div&gt;<\/td>\n<td>Define uma divis\u00e3o &#8211; tag estrutural.<\/td>\n<\/tr>\n<tr>\n<td>&lt;footer&gt;&lt;\/footer&gt;<\/td>\n<td>Define um rodap\u00e9 &#8211; tag estrutural e sem\u00e2ntica.<\/td>\n<\/tr>\n<tr>\n<td>&lt;nav&gt;&lt;\/nav&gt;<\/td>\n<td>Define uma \u00e1rea de navega\u00e7\u00e3o (como menus) &#8211; tag estrutural e sem\u00e2ntica.<\/td>\n<\/tr>\n<tr>\n<td>&lt;table&gt;&lt;\/table&gt;<\/td>\n<td>Define uma tabela <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;tr&gt;&lt;\/tr&gt;<\/td>\n<td>Define uma linha da tabela <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;td&gt;&lt;\/td&gt;<\/td>\n<td>Define uma c\u00e9lula da tabela <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;ol&gt;&lt;\/ol&gt;<\/td>\n<td>Define uma lista ordenada.<\/td>\n<\/tr>\n<tr>\n<td>&lt;ul&gt;&lt;\/ul&gt;<\/td>\n<td>Define uma lista n\u00e3o ordenada.<\/td>\n<\/tr>\n<tr>\n<td>&lt;li&gt;&lt;\/li&gt;<\/td>\n<td>Define o item de uma lista.<\/td>\n<\/tr>\n<tr>\n<td>&lt;form&gt;&lt;\/form&gt;<\/td>\n<td>Define um formul\u00e1rio <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;input&gt;<\/td>\n<td>Define os campos do formul\u00e1rio <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;textarea&gt;&lt;\/textarea&gt;<\/td>\n<td>Define uma \u00e1rea para o usu\u00e1rio digitar um texto. <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/textarea-html\/\">Veja mais<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;button&gt;&lt;\/button&gt;<\/td>\n<td>Define um bot\u00e3o.<\/td>\n<\/tr>\n<tr>\n<td>&lt;img\/&gt;<\/td>\n<td>Permite inserir uma imagem no seu documento\u00a0<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;iframe&gt;&lt;\/iframe&gt;<\/td>\n<td>Define um quadro com conte\u00fado de outra p\u00e1gina <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/iframe-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">(veja mais aqui)<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>&lt;video&gt;&lt;\/video&gt;<\/td>\n<td>Define um campo de v\u00eddeo.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Antes de prosseguir, recomendamos que leia todos os t\u00f3picos anteriores desse artigo. Tamb\u00e9m recomendamos que j\u00e1 tenha lido tamb\u00e9m os nossos artigos sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tags HTML<\/a>, <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">o que \u00e9 HTML<\/a> e tamb\u00e9m <a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">sobre o HTML5<\/a>.<br \/>\n<a name=\"top06\"><\/a><\/p>\n<h2>Classes e IDs no HTML<\/h2>\n<p>As classes e os IDs s\u00e3o amplamente utilizados dentro dos elementos HTML. Eles definem um classe ou um ID \u00fanico a uma ou mais tags HTML. Sua maior utilidade \u00e9 para manipula\u00e7\u00e3o dos elementos, tanto atrav\u00e9s do CSS quanto de scripts. Portanto, entender como funcionam \u00e9 uma das prioridades para se entender o b\u00e1sico do HTML.<\/p>\n<h4>Classes<\/h4>\n<p>Para atribuir uma ou mais classes ao elemento, basta incluir o atributo <strong>class=&#8221;&#8230;&#8221;<\/strong>.<\/p>\n<p>Por exemplo, se temos diversos elementos de par\u00e1grafo, e queremos que os dois primeiros recebam a classe &#8220;blue&#8221; e os dois \u00faltimos a classe &#8220;red&#8221;, podemos fazer conforme o c\u00f3digo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p class=\"blue\"&gt;Paragrafo da classe blue&lt;\/p&gt;\n&lt;p class=\"blue\"&gt;Paragrafo da classe blue&lt;\/p&gt;\n&lt;p class=\"red\"&gt;Paragrafo da classe red&lt;\/p&gt;\n&lt;p class=\"red\"&gt;Paragrafo da classe red&lt;\/p&gt;<\/pre>\n<p>Digamos tamb\u00e9m que queiramos que o primeiro elemento das classes acima receba tamb\u00e9m uma classe chamada &#8220;primeiro&#8221;. Para isto, basta acrescentar a classe &#8220;primeiro&#8221;, separada apenas com um espa\u00e7amento entre ela e as demais classes:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;p class=\"blue primeiro\"&gt;Paragrafo da classe blue&lt;\/p&gt; \n&lt;p class=\"blue\"&gt;Paragrafo da classe blue&lt;\/p&gt; \n&lt;p class=\"red primeiro\"&gt;Paragrafo da classe red&lt;\/p&gt; \n&lt;p class=\"red\"&gt;Paragrafo da classe red&lt;\/p&gt;<\/pre>\n<p>Portanto, podemos incluir uma ou mais classes a qualquer elemento, e al\u00e9m disso, v\u00e1rios elementos podem receber uma mesma classe.<\/p>\n<p>No CSS, JavaScript e outros, para poder reconhecer e selecionar uma classe, utilizamos um &#8220;<strong>.<\/strong>&#8221; e o nome da classe. Ou seja, nos casos acima, utilizar\u00edamos &#8220;<strong>.blue<\/strong>&#8220;, &#8220;<strong>.red<\/strong>&#8221; e &#8220;<strong>.primeiro<\/strong>&#8220;.<\/p>\n<h4>IDs<\/h4>\n<p>J\u00e1 os IDs s\u00e3o parecidos com as classes, por\u00e9m eles s\u00e3o \u00fanicos. S\u00f3 podem ser utilizados em um \u00fanico elemento, portanto n\u00e3o podem ser repetidos. Para declarar o ID, basta chamar o atributo <strong>id=&#8221;&#8230;&#8221;<\/strong>. Portanto, digamos que o c\u00f3digo tenha tr\u00eas\u00a0<strong>&lt;div&gt; <\/strong>e desejamos que a primeira receba o ID do &#8220;<strong>primeira_div<\/strong>&#8220;, para isso basta usar o c\u00f3digo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div id=\"primeira_div\"&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;\/div&gt;<\/pre>\n<p>Portanto, ao declarar a id &#8220;<strong>primeira_div<\/strong>&#8221; \u00e0 primeira <strong>&lt;div&gt;<\/strong>,\u00a0 nenhum outro elemento do HTML, mesmo que referente a outra tag, dever\u00e1 receber este ID. Ele \u00e9 \u00fanico e exclusivo deste elemento.<\/p>\n<p>Diferentemente das classes, um ID \u00e9 reconhecido e selecionado no CSS, JavaScript e outros atrav\u00e9s do &#8220;<strong>#<\/strong>&#8220;. Ou seja, no exemplo acima, o id seria reconhecida no <strong>CSS<\/strong> por &#8220;<strong>#primeira_div<\/strong>&#8220;.<\/p>\n<p>Um elemento pode receber mais que um ID, por\u00e9m recomenda-se utilizar apenas um \u00fanico ID em um mesmo elemento.<\/p>\n<h4>Mesclando classes e IDs<\/h4>\n<p>Apesar de terem utilidades parecidas, por\u00e9m diferentes, as classes e os IDs s\u00e3o atributos que podem ser utilizados em conjunto. Um elemento que receba um ID tamb\u00e9m pode receber uma ou mais classes. Al\u00e9m disso, uma classe pode receber o mesmo nome que um ID, e vice-versa, sem que isso afete sua funcionalidade. Por\u00e9m, para melhor organiza\u00e7\u00e3o, \u00e9 recomendado evitar essa pr\u00e1tica e manter os nomes sempre diferentes entre IDs e classes.<\/p>\n<p>Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div id=\"primeira_div\"&gt;&lt;\/div&gt;\n&lt;div class=\"divisao\"&gt;&lt;\/div&gt;\n&lt;div id=\"terceira_div\" class=\"divisao\"&gt;&lt;\/div&gt;\n&lt;div id=\"quarta_div\" class=\"quarta_div\"&gt;&lt;\/div&gt;<\/pre>\n<p><a name=\"top07\"><\/a><\/p>\n<h2>Criando uma p\u00e1gina com elementos do HTML b\u00e1sico<\/h2>\n<p>Neste momento, se voc\u00ea leu e acompanhou os t\u00f3picos anteriores, j\u00e1 pode dizer que compreende o b\u00e1sico do HTML. Por\u00e9m, assim como qualquer linguagem de computa\u00e7\u00e3o, seja de marca\u00e7\u00e3o ou programa\u00e7\u00e3o, uma das coisas mais importantes a se fazer \u00e9 praticar. Portanto, vamos agora colocar em pr\u00e1tica nossos estudos.<\/p>\n<p>Vamos criar uma p\u00e1gina utilizando o b\u00e1sico do HTML passo a passo. Observe que n\u00e3o vamos utilizar o CSS e nem o JavaScript. Por\u00e9m, com essa estrutura, a \u00a0p\u00e1gina j\u00e1 estar\u00e1 pronta para depois receber uma estiliza\u00e7\u00e3o e intera\u00e7\u00f5es, atrav\u00e9s do CSS e do JavaScript.<\/p>\n<h4>HTML b\u00e1sico: 1\u00ba passo &#8211; criando uma p\u00e1gina<\/h4>\n<p>Inicialmente, vamos criar um documento com a extens\u00e3o <strong>.html<\/strong>. Vamos utilizar como exemplo o arquivo <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-arquivo-index-html\/\"><strong>index.html<\/strong><\/a>. Posteriormente vamos iniciar criando uma estrutura b\u00e1sica do HTML e incluindo um t\u00edtulo. Observe que vamos incluir um atributo <strong>lang<\/strong> com o valor <strong>pt-br<\/strong>\u00a0\u00e0 tag <strong>&lt;html&gt;<\/strong>. Dessa forma, o navegador e os mecanismos de busca entender\u00e3o que o nosso documento HTML se trata de um documento no idioma portugu\u00eas do Brasil (<strong>pt-br<\/strong>). Portanto, vejamos o c\u00f3digo da p\u00e1gina abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;title&gt;Aprendendo o HTML B\u00e1sico&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<h4>HTML b\u00e1sico: 2\u00ba passo &#8211; criando o cabe\u00e7alho<\/h4>\n<p>Agora que j\u00e1 criamos a estrutura b\u00e1sica, vamos criar a primeira divis\u00e3o da p\u00e1gina HTML. Inicialmente vamos criar um header b\u00e1sico no HTML, contendo apenas um t\u00edtulo com uma descri\u00e7\u00e3o e um menu, em forma de lista n\u00e3o ordenada. Por\u00e9m, por enquanto, vamos manter no menu a lista contendo apenas itens sem descri\u00e7\u00e3o. Ao finalizar nosso projeto, voltamos a mexer nessa parte.<\/p>\n<p>Dessa forma, nosso c\u00f3digo agora ser\u00e1:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;title&gt;Aprendendo o HTML B\u00e1sico&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;h1&gt;Minha primeira p\u00e1gina HTML&lt;\/h1&gt;\n        &lt;p&gt;Aprendendo HTML B\u00e1sico com exercicio pr\u00e1tico&lt;\/p&gt;\n        &lt;br\/&gt;\n        &lt;nav&gt;\n            &lt;p&gt;Menu:&lt;\/p&gt;\n            &lt;ul&gt;\n                &lt;li&gt;item 1&lt;\/li&gt;\n                &lt;li&gt;item 2&lt;\/li&gt;\n                &lt;li&gt;item 3&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Portanto, nossa p\u00e1gina j\u00e1 come\u00e7a a ganhar vida. Se abrir o arquivo no navegador, j\u00e1 podemos visualizar a p\u00e1gina como na imagem abaixo:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-4033 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01.jpg\" alt=\"Exemplo 01 de HTML B\u00e1sico\" width=\"555\" height=\"293\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01.jpg 555w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01-300x158.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01-1x1.jpg 1w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/p>\n<h4>HTML b\u00e1sico: 3\u00ba passo &#8211; criando a primeira sess\u00e3o com artigos<\/h4>\n<p>Agora que j\u00e1 criamos o cabe\u00e7alho, vamos continuar a formata\u00e7\u00e3o da p\u00e1gina inserindo elementos de texto. Inicialmente vamos incluir uma divis\u00e3o <strong>&lt;main&gt;<\/strong> pois conter\u00e1 o conte\u00fado principal da p\u00e1gina. Posteriormente vamos criar uma sess\u00e3o e dentro dela, vamos incluir dois artigos, sendo que um deles conter\u00e1 tamb\u00e9m a imagem abaixo, que dever\u00e1 ser salva na mesma pasta do documento HTML.:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4034 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo.jpg\" alt=\"img_exemplo para utilizar em nossa p\u00e1gina\" width=\"596\" height=\"437\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo.jpg 596w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo-300x220.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo-1x1.jpg 1w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/p>\n<p>Portanto, vamos acrescentar ao nosso c\u00f3digo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;main&gt;\n    &lt;section id=\"sessao_principal\"&gt;\n        &lt;h2&gt;Sobre o artigo HTML B\u00e1sico&lt;\/h2&gt;\n        &lt;article&gt;\n            &lt;h3&gt;O que aprendi com o artigo HTML B\u00e1sico&lt;\/h3&gt;\n            &lt;p&gt;Inicialmente, aprendi sobre o Que \u00e9 HTML&lt;\/p&gt;\n            &lt;p&gt;Posteriormente aprendi como funciona o HTML e sua estrutura b\u00e1sica&lt;\/p&gt;\n            &lt;p&gt;Posteriormente aprendi sobre as Tags do HTML&lt;\/p&gt;\n            &lt;p&gt;Posteriormente aprendi sobre classes e IDs&lt;\/p&gt;\n            &lt;p&gt;...&lt;\/p&gt;\n            &lt;img src=\"img_exemplo.jpg\"&gt;\n        &lt;\/article&gt;\n        &lt;article&gt;\n            &lt;h3&gt;O que estou aprendendo agora:&lt;\/h3&gt;\n            &lt;p&gt;Agora estou fazendo exercicios pr\u00e1ticos para criar uma p\u00e1gina HTML!&lt;\/p&gt;\n        &lt;\/article&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;<\/pre>\n<p>Agora nossa p\u00e1gina j\u00e1 come\u00e7a a ganhar uma complexidade maior. Vejamos na imagem abaixo como deve ficar a p\u00e1gina com os exemplos do c\u00f3digo:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4035 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02.jpg\" alt=\"Exemplo 02 de Html B\u00e1sico\" width=\"518\" height=\"866\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02.jpg 518w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02-179x300.jpg 179w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02-1x2.jpg 1w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/p>\n<h4>HTML b\u00e1sico: 4\u00ba passo &#8211; criando nossa segunda sess\u00e3o com iframes e uma tabela<\/h4>\n<p>Agora que j\u00e1 criamos o conte\u00fado principal, vamos criar uma segunda sess\u00e3o utilizando os recursos de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/iframe-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">iframes<\/a> e tamb\u00e9m contendo <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">uma tabela<\/a> contendo as tags de t\u00edtulo. Portanto, vejamos abaixo a continua\u00e7\u00e3o do nosso c\u00f3digo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;section id=\"sessao_2\"&gt;\n    &lt;div class=\"divisao\"&gt;\n        &lt;h2&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/h2&gt;\n        &lt;p&gt;Para aprender mais sobre HTML B\u00e1sico e outros conte\u00fados podemos acessar o blog da Homehost&lt;\/p&gt;\n        &lt;iframe width=\"400px\" height=\"400px\" src=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;&lt;\/iframe&gt;\n        &lt;p&gt;&lt;a href=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;Site do blog da Home Host&lt;\/a&gt;&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;br&gt;\n    &lt;div&gt;\n        &lt;h2&gt;Minha primeira tabela&lt;\/h2&gt;\n        &lt;p&gt;Minha tabela contendo as tags de t\u00edtulo&lt;\/p&gt;\n        &lt;table&gt;\n            &lt;tr&gt;\n                &lt;th&gt;tag&lt;\/th&gt;\n                &lt;th&gt;descri\u00e7\u00e3o&lt;\/th&gt;\n                &lt;th&gt;exemplo&lt;\/th&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;h1&lt;\/td&gt;\n                &lt;td&gt;T\u00edtulo 1&lt;\/td&gt;\n                &lt;td&gt;&lt;h1&gt;exemplo&lt;\/h1&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;h2&lt;\/td&gt;\n                &lt;td&gt;T\u00edtulo 2&lt;\/td&gt;\n                &lt;td&gt;&lt;h2&gt;exemplo&lt;\/h2&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;h3&lt;\/td&gt;\n                &lt;td&gt;T\u00edtulo 3&lt;\/td&gt;\n                &lt;td&gt;&lt;h3&gt;exemplo&lt;\/h3&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;h4&lt;\/td&gt;\n                &lt;td&gt;T\u00edtulo 4&lt;\/td&gt;\n                &lt;td&gt;&lt;h4&gt;exemplo&lt;\/h4&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;h5&lt;\/td&gt;\n                &lt;td&gt;T\u00edtulo 5&lt;\/td&gt;\n                &lt;td&gt;&lt;h5&gt;exemplo&lt;\/h5&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;h6&lt;\/td&gt;\n                &lt;td&gt;T\u00edtulo 6&lt;\/td&gt;\n                &lt;td&gt;&lt;h6&gt;exemplo&lt;\/h6&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/table&gt;\n    &lt;\/div&gt;\n&lt;\/section&gt;<\/pre>\n<p>Dessa forma, esta sess\u00e3o da p\u00e1gina ficar\u00e1 como no exemplo da imagem abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4036 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03.jpg\" alt=\"Exemplo da sess\u00e3o da nossa pagina\" width=\"551\" height=\"879\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03.jpg 551w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03-188x300.jpg 188w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03-1x2.jpg 1w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/p>\n<h4>HTML b\u00e1sico: 5\u00ba passo &#8211; criando a terceira sess\u00e3o com um formul\u00e1rio de &#8220;contato&#8221;<\/h4>\n<p>Anteriormente <a href=\"https:\/\/www.homehost.com.br\/blog\/contas-de-email\/visitantes-do-meu-site-podem-criar-e-mails-por-conta-propria\/\">criamos sess\u00f5es contendo<\/a> textos, imagem e at\u00e9 mesmo iframe. Nesta sess\u00e3o, vamos atribuir um ID contato. Portanto, vamos incluir nela um formul\u00e1rio de contato.<\/p>\n<p>Neste artigo, por se tratar de HTML b\u00e1sico, n\u00e3o vamos explicar muito a respeito de como enviar um formul\u00e1rio. Por\u00e9m, posteriormente voc\u00ea pode aprofundar estas quest\u00f5es no nosso artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">formul\u00e1rios HTML<\/a>. Desta forma voc\u00ea estar\u00e1 apto a incluir formul\u00e1rios com envio para e-mail.<\/p>\n<p>Vamos continuar com a p\u00e1gina de HTML b\u00e1sico, criando agora a seguinte sess\u00e3o contendo formul\u00e1rio:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;section id=\"contato\"&gt;\n    &lt;h2&gt;Entre em contato&lt;\/h2&gt;\n    &lt;p&gt;Preencha o formul\u00e1rio abaixo para poder entrar em contato!&lt;\/p&gt;\n    &lt;form method=\"get\"&gt;\n        &lt;div&gt;\n            &lt;span&gt;Nome:&lt;\/span&gt;\n            &lt;input type=\"text\" name=\"nome\"&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n            &lt;span&gt;Email:&lt;\/span&gt;\n            &lt;input type=\"email\" name=\"email\"&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n            &lt;span&gt;Mensagem:&lt;\/span&gt;\n            &lt;textarea&gt;&lt;\/textarea&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n            &lt;input type=\"submit\" value=\"enviar\"&gt;\n        &lt;\/div&gt;\n    &lt;\/form&gt;\n&lt;\/section&gt;<\/pre>\n<p>Com esse c\u00f3digo, agora vamos verificar que ao abrir a p\u00e1gina ela conter\u00e1 um formul\u00e1rio ao final. O resultado ser\u00e1 como na imagem de exemplo abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4037 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04.jpg\" alt=\"Criando um formul\u00e1rio de contato ao nossa p\u00e1gina HTML\" width=\"567\" height=\"250\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04.jpg 567w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04-300x132.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04-1x1.jpg 1w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/p>\n<h4>HTML b\u00e1sico: 6\u00ba passo &#8211; criando o rodap\u00e9 da p\u00e1gina<\/h4>\n<p>Agora que j\u00e1 criamos toda a estrutura da p\u00e1gina, vamos finalizar incluindo nela um rodap\u00e9. Este rodap\u00e9 conter\u00e1 apenas uma mensagem. Portanto, vejamos o c\u00f3digo do nosso rodap\u00e9 abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;footer&gt;\n    &lt;p&gt;Todos os direitos reservados&lt;\/p&gt;\n&lt;\/footer&gt;<\/pre>\n<p>Com isso, logo abaixo do nossa sess\u00e3o contato, temos ent\u00e3o o rodap\u00e9 conforme a imagem abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4038 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05.jpg\" alt=\"Criando um rodap\u00e9 para nossa Pagina HTML B\u00e1sico\" width=\"496\" height=\"292\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05.jpg 496w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05-300x177.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05-1x1.jpg 1w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/p>\n<h4>HTML b\u00e1sico: 7\u00ba passo &#8211; ajustes finais<\/h4>\n<p>Ao chegar at\u00e9 aqui, significa que j\u00e1 conclu\u00edmos toda nossa p\u00e1gina. Por\u00e9m lembra-se que criamos em nosso cabe\u00e7alho um menu que modificar\u00edamos depois?<\/p>\n<p>Pois bem, voc\u00ea deve ter percebido que inclu\u00edmos um ID a todas nossas sess\u00f5es. Dessa forma, vamos agora modificar o menu, incluindo um link que ao ser clicado redirecione diretamente \u00e0s sess\u00f5es. Portanto, nosso cabe\u00e7alho da p\u00e1gina HTML agora ser\u00e1 como no c\u00f3digo do exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;header&gt;\n        &lt;h1&gt;Minha primeira p\u00e1gina HTML&lt;\/h1&gt;\n        &lt;p&gt;Aprendendo HTML B\u00e1sico com exercicio pr\u00e1tico&lt;\/p&gt;\n        &lt;br\/&gt;\n        &lt;nav&gt;\n            &lt;p&gt;Menu:&lt;\/p&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=\"#sessao_principal\"&gt;Sobre o artigo HTML B\u00e1sicol&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#sessao_2\"&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#contato\"&gt;Entre em Contato&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/pre>\n<p>Portanto, o cabe\u00e7alho conter\u00e1 agora um menu conforme o da imagem abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4039 aligncenter\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06.jpg\" alt=\"Finalizando nossa p\u00e1gina de HTML B\u00e1sico\" width=\"582\" height=\"307\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06.jpg 582w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06-300x158.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06-1x1.jpg 1w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/p>\n<p>Observe que agora, ao clicar em qualquer um dos itens da lista, a p\u00e1gina ser\u00e1 direcionada diretamente para a posi\u00e7\u00e3o dos IDs referenciados no link.<\/p>\n<p>Finalizamos ent\u00e3o a nossa p\u00e1gina contendo elementos de HTML b\u00e1sico.<\/p>\n<p>Dessa forma, voc\u00ea pode utilizar o c\u00f3digo final para estudar e modificar. O mesmo se encontra no exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;title&gt;Aprendendo o HTML B\u00e1sico&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;h1&gt;Minha primeira p\u00e1gina HTML&lt;\/h1&gt;\n        &lt;p&gt;Aprendendo HTML B\u00e1sico com exercicio pr\u00e1tico&lt;\/p&gt;\n        &lt;br\/&gt;\n        &lt;nav&gt;\n            &lt;p&gt;Menu:&lt;\/p&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=\"#sessao_principal\"&gt;Sobre o artigo HTML B\u00e1sicol&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#sessao_2\"&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#contato\"&gt;Entre em Contato&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n\n    &lt;main&gt;\n        &lt;section id=\"sessao_principal\"&gt;\n            &lt;h2&gt;Sobre o artigo HTML B\u00e1sico&lt;\/h2&gt;\n            &lt;article&gt;\n                &lt;h3&gt;O que aprendi com o artigo HTML B\u00e1sico&lt;\/h3&gt;\n                &lt;p&gt;Inicialmente, aprendi sobre o Que \u00e9 HTML&lt;\/p&gt;\n                &lt;p&gt;Posteriormente aprendi como funciona o HTML e sua estrutura b\u00e1sica&lt;\/p&gt;\n                &lt;p&gt;Posteriormente aprendi sobre as Tags do HTML&lt;\/p&gt;\n                &lt;p&gt;Posteriormente aprendi sobre classes e IDs&lt;\/p&gt;\n                &lt;p&gt;...&lt;\/p&gt;\n                &lt;img src=\"img_exemplo.jpg\"&gt;\n            &lt;\/article&gt;\n            &lt;article&gt;\n                &lt;h3&gt;O que estou aprendendo agora:&lt;\/h3&gt;\n                &lt;p&gt;Agora estou fazendo exercicios pr\u00e1ticos para criar uma p\u00e1gina HTML!&lt;\/p&gt;\n            &lt;\/article&gt;\n        &lt;\/section&gt;\n    &lt;\/main&gt;\n    &lt;br\/&gt;\n    &lt;br\/&gt;\n    &lt;section id=\"sessao_2\"&gt;\n        &lt;div class=\"divisao\"&gt;\n            &lt;h2&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/h2&gt;\n            &lt;p&gt;Para aprender mais sobre HTML B\u00e1sico e outros conte\u00fados podemos acessar o blog da Homehost&lt;\/p&gt;\n            &lt;iframe width=\"400px\" height=\"400px\" src=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;&lt;\/iframe&gt;\n            &lt;p&gt;&lt;a href=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;Site do blog da Home Host&lt;\/a&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;br&gt;\n        &lt;div&gt;\n            &lt;h2&gt;Minha primeira tabela&lt;\/h2&gt;\n            &lt;p&gt;Minha tabela contendo as tags de t\u00edtulo&lt;\/p&gt;\n            &lt;table&gt;\n                &lt;tr&gt;\n                    &lt;th&gt;tag&lt;\/th&gt;\n                    &lt;th&gt;descri\u00e7\u00e3o&lt;\/th&gt;\n                    &lt;th&gt;exemplo&lt;\/th&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;h1&lt;\/td&gt;\n                    &lt;td&gt;T\u00edtulo 1&lt;\/td&gt;\n                    &lt;td&gt;&lt;h1&gt;exemplo&lt;\/h1&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;h2&lt;\/td&gt;\n                    &lt;td&gt;T\u00edtulo 2&lt;\/td&gt;\n                    &lt;td&gt;&lt;h2&gt;exemplo&lt;\/h2&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;h3&lt;\/td&gt;\n                    &lt;td&gt;T\u00edtulo 3&lt;\/td&gt;\n                    &lt;td&gt;&lt;h3&gt;exemplo&lt;\/h3&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;h4&lt;\/td&gt;\n                    &lt;td&gt;T\u00edtulo 4&lt;\/td&gt;\n                    &lt;td&gt;&lt;h4&gt;exemplo&lt;\/h4&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;h5&lt;\/td&gt;\n                    &lt;td&gt;T\u00edtulo 5&lt;\/td&gt;\n                    &lt;td&gt;&lt;h5&gt;exemplo&lt;\/h5&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;h6&lt;\/td&gt;\n                    &lt;td&gt;T\u00edtulo 6&lt;\/td&gt;\n                    &lt;td&gt;&lt;h6&gt;exemplo&lt;\/h6&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/table&gt;\n        &lt;\/div&gt;\n    &lt;\/section&gt;\n    &lt;section id=\"contato\"&gt;\n        &lt;h2&gt;Entre em contato&lt;\/h2&gt;\n        &lt;p&gt;Preencha o formul\u00e1rio abaixo para poder entrar em contato!&lt;\/p&gt;\n        &lt;form method=\"get\"&gt;\n            &lt;div&gt;\n                &lt;span&gt;Nome:&lt;\/span&gt;\n                &lt;input type=\"text\" name=\"nome\"&gt;\n            &lt;\/div&gt;\n            &lt;div&gt;\n                &lt;span&gt;Email:&lt;\/span&gt;\n                &lt;input type=\"email\" name=\"email\"&gt;\n            &lt;\/div&gt;\n            &lt;div&gt;\n                &lt;span&gt;Mensagem:&lt;\/span&gt;\n                &lt;textarea&gt;&lt;\/textarea&gt;\n            &lt;\/div&gt;\n            &lt;div&gt;\n                &lt;input type=\"submit\" value=\"enviar\"&gt;\n            &lt;\/div&gt;\n        &lt;\/form&gt;\n    &lt;\/section&gt;\n\n    &lt;footer&gt;\n        &lt;p&gt;Todos os direitos reservados&lt;\/p&gt;\n    &lt;\/footer&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><a name=\"top08\"><\/a><\/p>\n<h2>Dicas para avan\u00e7ar seus estudos em HTML b\u00e1sico e desenvolvimento web<\/h2>\n<p>Neste artigo, voc\u00ea j\u00e1 pode aprender bastante a respeito do HTML. Iniciamos com explica\u00e7\u00f5es te\u00f3ricas, e posteriormente aliamos a exemplos pr\u00e1ticos. Portanto, passamos por todo o conte\u00fado b\u00e1sico do HTML. Dessa forma, conclu\u00edmos ent\u00e3o este artigo deixando algumas recomenda\u00e7\u00f5es de estudo, assim como dicas e sugest\u00f5es.<\/p>\n<p>Utilizando todo este artigo, voc\u00ea j\u00e1 estar\u00e1 apto a compreender bem um c\u00f3digo HTML. Portanto, voc\u00ea tamb\u00e9m poder\u00e1 dar inicio \u00e0 cria\u00e7\u00e3o de p\u00e1ginas HTML simples. A partir desse momento, recomendamos que se aperfei\u00e7oe compreendendo mais sobre cada tag HTML. Tamb\u00e9m \u00e9 recomendado que voc\u00ea pratique todos os c\u00f3digos que estudou at\u00e9 agora.<\/p>\n<p>Por isso, deixamos algumas sugest\u00f5es de publica\u00e7\u00f5es do nosso blog que podem auxiliar:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">O que \u00e9 HTML? Entenda de forma descomplicada<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5: suas novidades e atualiza\u00e7\u00f5es<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/comentarios-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Coment\u00e1rios HTML: aprenda a comentar seu c\u00f3digo<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">As tags do HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/doctype-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Doctype HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Links HTML: saiba o que s\u00e3o e como utilizar no seu site<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Formul\u00e1rio HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/checkbox-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML checkbox<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tabela HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tabela de cores HTML: aplicando cores nas tags HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Espa\u00e7o HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/caracteres-especiais-acentos-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Caracteres especiais do HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/iframe-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Iframe HTML<\/a><\/li>\n<\/ul>\n<p>Al\u00e9m dos artigos acima voc\u00ea ainda pode encontrar diversos outros artigos que podem auxiliar a avan\u00e7ar nos estudos sobre HTML. Portanto, tamb\u00e9m recomendamos os seguintes sites para avan\u00e7ar nos estudos sobre desenvolvimento web:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C Schools<\/a><\/li>\n<li><a href=\"https:\/\/pt.khanacademy.org\/computing\/computer-programming\/html-css\" target=\"_blank\" rel=\"noopener noreferrer\">Khan Academy<\/a><\/li>\n<li><a href=\"https:\/\/www.freecodecamp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Free Code Camp<\/a><\/li>\n<\/ul>\n<p>Mas n\u00e3o deixe de ficar atento ao nosso blog. Sempre publicamos novos artigos com conte\u00fado atualizado e inovador! Tamb\u00e9m recomendamos que voc\u00ea adquira um nome de <a href=\"https:\/\/www.homehost.com.br\/blog\/dominio\/3-passos-para-comprar-dominio-na-homehost\/\" target=\"_blank\" rel=\"noopener noreferrer\">dom\u00ednio<\/a> e um plano de <a href=\"https:\/\/www.homehost.com.br\/blog\/internet\/hospedagem-de-site-o-que-e\/\" target=\"_blank\" rel=\"noopener noreferrer\">hospedagem<\/a>, para poder praticar e colocar suas p\u00e1ginas online! A <a href=\"https:\/\/www.homehost.com.br\" target=\"_blank\" rel=\"noopener noreferrer\">HomeHost<\/a> oferece diversos planos de qualidade, seguran\u00e7a e velocidade!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea pretende criar um site, aprender o HTML b\u00e1sico \u00e9 uma das melhores coisas que voc\u00ea pode fazer! Independentemente de pretender trabalhar com WordPress, web designer ou desenvolvimento web, conhecer o b\u00e1sico do HTML \u00e9 essencial. Esse conhecimento permite compreender como funciona uma p\u00e1gina web e seus elementos. Dessa forma, voc\u00ea pode criar seus [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":4028,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[161,3,4,213,203,229,20,6,164],"tags":[160,252,2621,3306,2739,3307],"class_list":["post-4027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-construtor-de-sites","category-criar-sites","category-desenvolvedores","category-frontpage","category-internet","category-outros","category-php","category-tutoriais","category-wordpress-tutoriais","tag-criar-um-site","tag-desenvolvimento","tag-html","tag-html5","tag-tutorial","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost<\/title>\n<meta name=\"description\" content=\"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost\" \/>\n<meta property=\"og:description\" content=\"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-05T20:47:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-09T12:13:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1122\" \/>\n\t<meta property=\"og:image:height\" content=\"440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\",\"name\":\"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\",\"datePublished\":\"2019-08-05T20:47:23+00:00\",\"dateModified\":\"2024-11-09T12:13:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\",\"width\":1122,\"height\":440,\"caption\":\"HTML B\u00e1sico: Uma introdu\u00e7\u00e3o ao mundo do Desenvolvimento Web HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost","description":"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","og_locale":"pt_BR","og_type":"article","og_title":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost","og_description":"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-08-05T20:47:23+00:00","article_modified_time":"2024-11-09T12:13:31+00:00","og_image":[{"width":1122,"height":440,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","type":"image\/png"}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","name":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","datePublished":"2019-08-05T20:47:23+00:00","dateModified":"2024-11-09T12:13:31+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","width":1122,"height":440,"caption":"HTML B\u00e1sico: Uma introdu\u00e7\u00e3o ao mundo do Desenvolvimento Web HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4027"}],"version-history":[{"count":21,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4027\/revisions"}],"predecessor-version":[{"id":14504,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4027\/revisions\/14504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/4028"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}