{"id":41440,"date":"2023-11-21T11:41:41","date_gmt":"2023-11-21T14:41:41","guid":{"rendered":"\/tutoriais\/?p=41440"},"modified":"2025-12-18T11:40:02","modified_gmt":"2025-12-18T14:40:02","slug":"site-html","status":"publish","type":"post","link":"\/br\/tutoriais\/site-html\/","title":{"rendered":"Como criar um site em HTML em 7 passos simples + sugest\u00f5es p\u00f3s-desenvolvimento"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Construir um site hoje em dia pode ser uma tarefa simples, que n&atilde;o requer conhecimento em programa&ccedil;&atilde;o. Plataformas como o WordPress ou um Criador de Sites da Hostinger oferecem uma interface visual simplificada e recursos de arrastar e soltar para facilitar o processo de desenvolvimento.&nbsp;<\/p><p class=\"wp-block-paragraph\">No entanto, voc&ecirc; pode querer construir sites do zero usando Linguagem de Marca&ccedil;&atilde;o de Hipertexto (HTML). Embora sejam mais dif&iacute;ceis de serem criados, os sites em HTML s&atilde;o mais flex&iacute;veis e r&aacute;pidos, pois exigem menos recursos para funcionar.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para ajudar voc&ecirc; a come&ccedil;ar nesta jornada, este artigo explicar&aacute; as etapas para criar um site com HTML. Tamb&eacute;m vamos mostrar a voc&ecirc; pr&aacute;ticas p&oacute;s-desenvolvimento para melhorar a apar&ecirc;ncia e as funcionalidades do seu site em HTML.<\/p><p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/HTML-Cheat-Sheet.pdf\" target=\"_blank\" rel=\"noopener\">Baixe o Guia de Recursos HTML definitivo<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-criar-um-site-com-html\">Como Criar um Site com HTML<\/h2><p class=\"wp-block-paragraph\">Esta se&ccedil;&atilde;o vai trazer instru&ccedil;&otilde;es passo a passo de como codificar um site com HTML. Antes de prosseguir, consulte nossa <a href=\"\/br\/tutoriais\/codigos-html-prontos-guia-pdf\/\">folha de dicas de HTML<\/a> &mdash; especialmente se voc&ecirc; n&atilde;o estiver familiarizado com a linguagem de marca&ccedil;&atilde;o padr&atilde;o.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-escolha-um-editor-de-codigo-html\">1. Escolha um Editor de C&oacute;digo HTML<\/h3><p class=\"wp-block-paragraph\">Um editor de c&oacute;digo &eacute; o software que ser&aacute; usado para escrever seu site. Embora voc&ecirc; possa criar uma p&aacute;gina HTML com um editor de texto padr&atilde;o como o Bloco de Notas, ele n&atilde;o possui recursos que ajudam a simplificar o processo de desenvolvimento, como:<\/p><ul class=\"wp-block-list\">\n<li><strong>Destaque de sintaxe <\/strong>&ndash; marca as tags HTML em cores diferentes com base em suas categorias. Isso torna a estrutura do c&oacute;digo mais f&aacute;cil de ler e entender.&nbsp;<\/li>\n\n\n\n<li><strong>Auto-completar <\/strong>&ndash; sugere automaticamente atributos, tags e elementos HTML com base no valor anterior para acelerar o processo de programa&ccedil;&atilde;o.&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Detec&ccedil;&atilde;o de erro <\/strong>&ndash; destaca erros de sintaxe, permitindo que um desenvolvedor web os perceba e corrija rapidamente.<\/li>\n\n\n\n<li><strong>Integra&ccedil;&atilde;o<\/strong> &ndash; alguns editores de c&oacute;digo integram-se a plugins, Git e clientes FTP para tornar o processo de implementa&ccedil;&atilde;o mais eficiente.&nbsp;<\/li>\n\n\n\n<li><strong>Pr&eacute;-visualiza&ccedil;&atilde;o em tempo real<\/strong> &ndash; em vez de abrir arquivos HTML manualmente nos navegadores, voc&ecirc; pode instalar um plugin para obter uma pr&eacute;-visualiza&ccedil;&atilde;o do site em tempo real.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/recurso-previa-ao-vivo-visual-studio-code.jpg\/public\" alt=\"Recurso de pr&eacute;via em tempo real do Visual Studio Code\" class=\"wp-image-41441\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/recurso-previa-ao-vivo-visual-studio-code.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/recurso-previa-ao-vivo-visual-studio-code.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/recurso-previa-ao-vivo-visual-studio-code.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/recurso-previa-ao-vivo-visual-studio-code.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Como existem muitas op&ccedil;&otilde;es, listamos alguns dos <a href=\"\/br\/tutoriais\/melhores-editores-html\/\">melhores editores de c&oacute;digo HTML<\/a> para ajudar voc&ecirc; a encontrar um que atenda &agrave;s suas necessidades:<\/p><ul class=\"wp-block-list\">\n<li><strong>Notepad++ <\/strong>&ndash; um editor de texto gratuito e leve, com recursos adicionais para desenvolvimento e suporte a plugins.&nbsp;<\/li>\n\n\n\n<li><strong>Atom <\/strong>&ndash; um editor HTML de c&oacute;digo aberto com um recurso de visualiza&ccedil;&atilde;o do site em tempo real e ampla compatibilidade com linguagens de marca&ccedil;&atilde;o e script.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Visual Studio Code (VSCode)<\/strong> &ndash; uma ferramenta popular para desenvolvimento web com uma abrangente biblioteca de extens&otilde;es para expandir suas funcionalidades.&nbsp;<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-2-planeje-o-layout-do-site\">2. Planeje o Layout do Site<\/h3><p class=\"wp-block-paragraph\">Criar um plano de layout permite que voc&ecirc; visualize melhor a apar&ecirc;ncia do seu site. Voc&ecirc; tamb&eacute;m pode us&aacute;-lo como uma lista de verifica&ccedil;&atilde;o para acompanhar quais elementos incluir em suas p&aacute;ginas.&nbsp;<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, um plano de layout ajuda a determinar a usabilidade e a navega&ccedil;&atilde;o do seu site, que afetam a experi&ecirc;ncia do usu&aacute;rio. Alguns elementos a considerar na fase de planejamento incluem o cabe&ccedil;alho, rodap&eacute; e navega&ccedil;&atilde;o dos sites.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/plano-de-layout-de-site.jpg\/public\" alt=\"Plano de layout do site\" class=\"wp-image-41442\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/plano-de-layout-de-site.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/plano-de-layout-de-site.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/plano-de-layout-de-site.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/plano-de-layout-de-site.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Voc&ecirc; pode usar caneta e papel ou software de design web como o Figma para <a href=\"\/br\/tutoriais\/como-fazer-o-layout-de-um-site\/\">projetar um layout de site<\/a>. N&atilde;o precisa fazer algo muito detalhado, desde que represente aproximadamente a apar&ecirc;ncia e a sensa&ccedil;&atilde;o do seu site.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-3-escreva-o-codigo-html\">3. Escreva o c&oacute;digo HTML<\/h3><p class=\"wp-block-paragraph\">Uma vez que a ferramenta e o plano de layout estiverem prontos, voc&ecirc; pode come&ccedil;ar a escrever o c&oacute;digo do seu site. Os passos podem variar dependendo do seu editor de c&oacute;digo, mas a ideia geral &eacute; semelhante.&nbsp;<\/p><p class=\"wp-block-paragraph\">Neste tutorial, vamos mostrar como fazer isso usando o <strong>VSCode<\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Crie uma nova pasta no seu computador. Ela ser&aacute; o diret&oacute;rio para todos os arquivos do seu site.&nbsp;<\/li>\n\n\n\n<li>Abra o VSCode &rarr; <strong>Arquivo<\/strong> &rarr; <strong>Abrir Pasta<\/strong>.<\/li>\n\n\n\n<li>Localize a nova pasta e clique em <strong>Selecionar Pasta<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Selecione <strong>Novo Arquivo<\/strong>. D&ecirc; ao arquivo o nome de <strong>index.html<\/strong> e pressione <strong>enter<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Clique em <strong>Criar Arquivo <\/strong>para confirmar.&nbsp;<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Assim que for direcionado para a aba do editor <strong>index.html<\/strong>, insira a seguinte estrutura b&aacute;sica de documento HTML:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt; &lt;\/title&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><p class=\"wp-block-paragraph\">Para ajudar voc&ecirc; a entender o c&oacute;digo, aqui est&aacute; uma explica&ccedil;&atilde;o de cada tag:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;!DOCTYPE html&gt; <\/strong>&ndash; informa aos navegadores que o site &eacute; uma p&aacute;gina HTML.<\/li>\n\n\n\n<li><strong>&lt;\/html&gt;<\/strong> &ndash; a tag de abertura do documento HTML que indica onde o c&oacute;digo come&ccedil;a.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;head&gt;<\/strong> &ndash; uma tag contendo os metadados do site.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;title&gt;<\/strong> &ndash; define o texto exibido na aba do navegador ao visitar a p&aacute;gina da web.<\/li>\n\n\n\n<li><strong>&lt;body&gt;<\/strong> &ndash; cont&eacute;m todo o conte&uacute;do vis&iacute;vel na p&aacute;gina em si.<\/li>\n<\/ul><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Aprenda a diferen&ccedil;a entre criar um site usando <a href=\"\/br\/tutoriais\/wordpress-ou-html\/\">WordPress e HTML<\/a> para saber qual t&eacute;cnica &eacute; mais adequada para voc&ecirc;.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\">4. Crie os Elementos do Layout<\/h3><p class=\"wp-block-paragraph\">Adicione o c&oacute;digo HTML no arquivo <strong>index.html <\/strong>para criar os elementos do layout que voc&ecirc; est&aacute; planejando. Dependendo do design do seu site, voc&ecirc; precisar&aacute; de diferentes <a href=\"https:\/\/www.w3schools.com\/html\/html5_semantic_elements.asp\" target=\"_blank\" rel=\"noopener\">elementos sem&acirc;nticos HTML<\/a>.&nbsp;<\/p><p class=\"wp-block-paragraph\">Esses elementos ir&atilde;o separar seu site em v&aacute;rias se&ccedil;&otilde;es e se tornar&atilde;o os cont&ecirc;ineres do conte&uacute;do Aqui est&atilde;o as tags que usaremos:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;header&gt; <\/strong>&ndash; recipiente para conte&uacute;do introdut&oacute;rio ou navega&ccedil;&atilde;o.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;main&gt;<\/strong> &ndash; representa o conte&uacute;do principal de uma p&aacute;gina da web.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;div&gt; <\/strong>&ndash; define uma se&ccedil;&atilde;o em um documento HTML.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;footer&gt; <\/strong>&ndash; cont&eacute;m o conte&uacute;do exibido na parte inferior do seu site.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Coloque esses elementos dentro das tags <strong>&lt;body&gt;&lt;\/body&gt;<\/strong> nos c&oacute;digos do seu arquivo <strong>index.html <\/strong>. Certifique-se de fechar cada elemento com uma tag de fechamento, ou seu c&oacute;digo n&atilde;o funcionar&aacute;.&nbsp;<\/p><p class=\"wp-block-paragraph\">Aqui est&aacute; um exemplo de como dever&aacute; ficar o c&oacute;digo completo:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt;Blog Pessoal&lt;\/title&gt;\n   &lt;\/head&gt; \n   &lt;body&gt;\n      &lt;header&gt;   \n\n      &lt;\/header&gt;\n      &lt;main&gt;\n         &lt;div class=&rdquo;row\"&gt;\n            &lt;div class=\"post-text-box\"&gt;\n\n            &lt;\/div&gt;\n            &lt;div class=&rdquo;profile&rdquo;&gt;\n\n            &lt;\/div&gt;  \n         &lt;\/div&gt;        \n      &lt;\/main&gt;\n      &lt;footer&gt;\n            \n      &lt;\/footer&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><h3 class=\"wp-block-heading\">5. Adicione o Conte&uacute;do HTML<\/h3><p class=\"wp-block-paragraph\">Depois que o layout estiver pronto, comece a preench&ecirc;-lo com o conte&uacute;do do seu site, como texto, <a href=\"\/br\/tutoriais\/como-inserir-imagem-html-no-site\/\">imagens<\/a>, hiperlinks ou v&iacute;deos. Se o conte&uacute;do n&atilde;o estiver pronto, use conte&uacute;do fict&iacute;cio como um placeholder e substitua-o mais tarde.&nbsp;<\/p><p class=\"wp-block-paragraph\">Aqui est&atilde;o algumas tags que usaremos para adicionar o conte&uacute;do do site:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;h1&gt; e &lt;p&gt; <\/strong>&ndash; cont&ecirc;m texto de cabe&ccedil;alho e par&aacute;grafo. Use a tag <strong>&lt;br&gt;<\/strong> para criar uma quebra de linha se o texto for muito longo.<\/li>\n\n\n\n<li><strong>&lt;nav&gt; e &lt;a&gt;<\/strong> &mdash; especificam a barra de navega&ccedil;&atilde;o e seu elemento &acirc;ncora. Use o atributo <strong>href<\/strong> para especificar o URL vinculado ao elemento &acirc;ncora.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>&lt;img&gt;<\/strong> &ndash; cont&ecirc;iner para o elemento de imagem. Ele cont&eacute;m o atributo <strong>img src <\/strong>, que especifica o link ou nome do arquivo de imagem.<\/li>\n<\/ul><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica                <\/p>\n            <\/div>\n            <p class=\"protip__content\">A tag <strong><img><\/strong> tamb&eacute;m tem o atributo opcional <strong>alt<\/strong>. Ele descreve a imagem caso o arquivo n&atilde;o carregue.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Aqui est&aacute; um exemplo do c&oacute;digo pronto:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt;Blog Pessoal&lt;\/title&gt;\n      &lt;\/head&gt; \n   &lt;body&gt;\n      &lt;header&gt;   \n      &lt;h1&gt;Seu Blog Pessoal&lt;\/h1&gt;\n      &lt;nav&gt;\n         &lt;a href=&rdquo;dominio.tld\/home&rdquo;&gt;In&iacute;cio&lt;\/a&gt;\n         &lt;a href=&rdquo;dominio.tld\/blog&rdquo;&gt;Blog&lt;\/a&gt;\n         &lt;a href=&rdquo;dominio.tld\/sobre&rdquo;&gt;Sobre&lt;\/a&gt;\n      &lt;\/nav&gt;\n      &lt;\/header&gt;\n      &lt;main&gt;\n         &lt;div class=&rdquo;row\"&gt;\n            &lt;div class=\"post-text-box\"&gt;\n               &lt;h1&gt;Postagem Mais Recente&lt;\/h1&gt;\n               &lt;section&gt;\n                  &lt;h1&gt;Primeira Postagem&lt;\/h1&gt;\n                  &lt;p&gt;O conte&uacute;do do primeiro post&lt;\/p&gt;\n               &lt;\/section&gt;\n            &lt;\/div&gt;\n            &lt;div class=&rdquo;profile&rdquo;&gt;\n               &lt;h1&gt;Sobre Mim&lt;\/h1&gt;\n               &lt;img src=&rdquo;foto-de-perfil.png&rdquo;&gt;\n               &lt;p&gt;Sobre o autor&lt;\/p&gt;\n            &lt;\/div&gt;  \n         &lt;\/div&gt;        \n      &lt;\/main&gt;\n      &lt;footer&gt;\n         &lt;a href=&rdquo;twitter.com\/autor&rdquo;&gt;Twitter&lt;\/a&gt;\n         &lt;a href=&rdquo;facebook.com\/autor&rdquo;&gt;Facebook&lt;\/a&gt;\n         &lt;a href=&rdquo;instagram.com\/autor&rdquo;&gt;Instagram&lt;\/a&gt;\n      &lt;\/footer&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><p class=\"wp-block-paragraph\">Ap&oacute;s adicionar o c&oacute;digo, seu site HTML ter&aacute; uma apar&ecirc;ncia definida. Ele ficar&aacute; tipo assim:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/site-escrito-apenas-em-html.jpg\/public\" alt=\"Site escrito apenas em HTML, sem nenhum CSS, PHP ou JavaScript aplicado\" class=\"wp-image-41443\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/site-escrito-apenas-em-html.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/site-escrito-apenas-em-html.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/site-escrito-apenas-em-html.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/site-escrito-apenas-em-html.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\">6. Incluir Layout CSS<\/h3><p class=\"wp-block-paragraph\">Como o HTML apenas permite criar a estrutura do site e adicionar conte&uacute;do b&aacute;sico, use <a href=\"\/br\/tutoriais\/o-que-e-css-guia-basico-de-css\/\">Folhas de Estilo em Cascata (CSS)<\/a> para alterar seu layout. O CSS &eacute; uma linguagem que define o estilo do seu documento HTML.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para fazer isso, crie um arquivo <strong>style.css<\/strong> e <a href=\"\/br\/tutoriais\/como-linkar-css-no-html\/\">vincule a folha de estilos ao documento HTML<\/a> adicionando o seguinte c&oacute;digo entre as tags de abertura e fechamento <strong>&lt;head&gt; <\/strong>&nbsp;do <strong>index.html:<\/strong><\/p><pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/pre><p class=\"wp-block-paragraph\">Para criar o layout de site com duas colunas, usaremos a propriedade <strong>flex<\/strong>. Ela organiza elementos HTML usando cont&ecirc;ineres flex&iacute;veis, permitindo que eles se ajustem conforme o tamanho da tela dos usu&aacute;rios.&nbsp;<\/p><p class=\"wp-block-paragraph\">Aqui est&aacute; como fica o c&oacute;digo completo:<\/p><pre class=\"wp-block-preformatted\">\/*estilo do cabe&ccedil;alho*\/\nheader {\n   text-align: center; \n   padding: 20px;\n}\n\/*estilo do menu de navega&ccedil;&atilde;o*\/\nnav {\n   text-align: center;\n   word-spacing: 30px;\n   Padding: 10px;\n}\n\/*criando o layout de duas colunas*\/\n*{\n   box-sizing: border-box;\n}\n.row {\n   display: flex;\n   flex-wrap: wrap;\n}\n.post-text-box {\n   flex: 70%;\n   padding: 20px;\n}\n.profile {\n   flex: 70%;\n   padding: 20px;\n}\n\/*imagem de perfil e estilo de cabe&ccedil;alho*\/\n.profile img {\n   largura: 120px;\n   display: block;\n   margin-left: 0;\n   margin-right: 0;\n}\n.profile h1 {\n   text-align: center;\n}\n<\/pre><p class=\"wp-block-paragraph\">Depois de adicionar o trecho de c&oacute;digo ao seu arquivo CSS, o site ficar&aacute; assim:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/sim-comlayout-css.jpg\/public\" alt=\"SIte com o layout CSS j&aacute; aplicado\" class=\"wp-image-41444\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/sim-comlayout-css.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/sim-comlayout-css.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/sim-comlayout-css.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/sim-comlayout-css.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p>\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Leitura Sugerida                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Aprenda os <a href=\"\/br\/tutoriais\/diferenca-entre-estilos-css\/\">diferentes tipos de CSS<\/a>, incluindo inline, externo e interno.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\">7. Personalize Seu Site<\/h3><p class=\"wp-block-paragraph\">Al&eacute;m de alterar o layout, use CSS para personalizar outros aspectos visuais do seu site. Por exemplo, voc&ecirc; pode <a href=\"\/br\/tutoriais\/melhores-fontes-html\/\">alterar a fam&iacute;lia de fontes<\/a> e a imagem de fundo.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para alterar a apar&ecirc;ncia do seu site, adicione as propriedades CSS no elemento que voc&ecirc; deseja personalizar. Por exemplo, aqui est&aacute; o c&oacute;digo para estilizar a cor de fundo e os elementos de texto da barra do menu de navega&ccedil;&atilde;o:<\/p><pre class=\"wp-block-preformatted\">\/*estilo da barra de navega&ccedil;&atilde;o*\/\nnav {\n   text-align: center;\n   word-spacing: 30px;\n   padding: 10px;\n   background-color: #f5f5dc\n   font-family: Helvetica;\n   \n}\n\/*estilo do bot&atilde;o da barra de navega&ccedil;&atilde;o*\/\nnav a {\n   color: #000000;\n   text-decoration: none;\n   font-size: larger;\n}\n<\/pre><p class=\"wp-block-paragraph\">Ap&oacute;s adicionar o estilo CSS de cada elemento, aqui est&aacute; como o site ficar&aacute;:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/Site-html-com-layout-e-estillo-css.jpg\/public\" alt=\"Site com estilos CSS adicionados a cada elemento, j&aacute; com o layout planejado aplicado\" class=\"wp-image-41445\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/Site-html-com-layout-e-estillo-css.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/Site-html-com-layout-e-estillo-css.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/Site-html-com-layout-e-estillo-css.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/Site-html-com-layout-e-estillo-css.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-passos-a-seguir-apos-criar-um-site-em-html\">Passos a Seguir Ap&oacute;s Criar um Site em HTML<\/h2><p class=\"wp-block-paragraph\">Esta se&ccedil;&atilde;o explicar&aacute; os passos a seguir ap&oacute;s criar um site usando HTML e CSS.&nbsp; Eles tornar&atilde;o seu site acess&iacute;vel e mais funcional.<\/p><p class=\"wp-block-paragraph\"><strong>Hospede o Site na Plataforma Certa<\/strong><\/p><p class=\"wp-block-paragraph\">Para tornar seu site acess&iacute;vel atrav&eacute;s da internet, use um servi&ccedil;o de hospedagem de sites. Muitos provedores de hospedagem t&ecirc;m diferentes planos que atendem a diversas necessidades dos usu&aacute;rios.&nbsp;<\/p><p class=\"wp-block-paragraph\">Como as p&aacute;ginas em HTML s&atilde;o leves e requerem poucos recursos para serem carregadas, um plano b&aacute;sico de <a href=\"\/br\/hospedagem-de-sites\">hospedagem<\/a> &eacute; suficiente.&nbsp;<\/p><p class=\"wp-block-paragraph\">Alternativamente, voc&ecirc; pode usar uma plataforma gratuita de hospedagem de sites est&aacute;ticos como o <a href=\"https:\/\/pages.github.com\/\" target=\"_blank\" rel=\"noopener\">GitHub Pages<\/a>. No entanto, evite plataformas de hospedagem est&aacute;tica gratuita se planeja adicionar mais c&oacute;digo ou tornar seu site din&acirc;mico. Al&eacute;m de poss&iacute;veis problemas de compatibilidade, os recursos limitados do servidor podem reduzir a velocidade do seu site.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Adicione uma Barra Suspensa para Melhor Navega&ccedil;&atilde;o<\/strong><\/p><p class=\"wp-block-paragraph\">Sites complexos com m&uacute;ltiplas p&aacute;ginas t&ecirc;m muitos bot&otilde;es de navega&ccedil;&atilde;o, links e textos. Voc&ecirc; pode <a href=\"\/br\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2\/\">criar um menu dropdown simples usando CSS<\/a> para agrupar esses elementos.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"409\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/estrutura-de-menu-html.jpg\/public\" alt=\"Estrutura de menu suspenso criado em CSS\" class=\"wp-image-41446\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/estrutura-de-menu-html.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/estrutura-de-menu-html.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/estrutura-de-menu-html.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/11\/estrutura-de-menu-html.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Os usu&aacute;rios podem expandir a barra de navega&ccedil;&atilde;o para acessar os elementos. Isso ajuda a reduzir a bagun&ccedil;a visual e melhora a usabilidade do site para usu&aacute;rios com telas menores.&nbsp;&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Melhore o Design do Site com CSS Avan&ccedil;ado<\/strong><\/p><p class=\"wp-block-paragraph\">O CSS permite que voc&ecirc; fa&ccedil;a personaliza&ccedil;&otilde;es avan&ccedil;adas para melhorar o design do seu site e proporcionar uma melhor experi&ecirc;ncia aos usu&aacute;rios. Por exemplo, voc&ecirc; pode habilitar o encaixe de rolagem, anima&ccedil;&atilde;o de texto, zoom ao passar o mouse e gradientes.&nbsp;<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, voc&ecirc; pode construir um site responsivo com consultas de m&iacute;dia, regras CSS e flexboxes. O layout flexbox adapta automaticamente o seu site ao tamanho da tela do cliente.<\/p><p class=\"wp-block-paragraph\"><strong>Torne o Site mais Interativo com JavaScript<\/strong><\/p><p class=\"wp-block-paragraph\">O JavaScript &eacute; uma linguagem de script que permite criar conte&uacute;do de site interativo e din&acirc;mico. Por exemplo, habilite anima&ccedil;&atilde;o, adicione contagens regressivas e inclua bot&otilde;es, formul&aacute;rios ou menus.&nbsp;<\/p><p class=\"wp-block-paragraph\">Essas caracter&iacute;sticas tornam seu site mais interessante e imersivo, melhorando a experi&ecirc;ncia dos usu&aacute;rios. Os passos para <a href=\"\/br\/tutoriais\/como-adicionar-javascript-no-html\/\">adicionar JavaScript ao seu site HTML<\/a> s&atilde;o semelhantes aos do CSS. Voc&ecirc; pode usar um arquivo separado ou escrev&ecirc;-lo diretamente no c&oacute;digo atual.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\">Conclus&atilde;o<\/h2><p class=\"wp-block-paragraph\">Em vez de usar plataformas como o WordPress ou o Criador de Sites da Hostinger, voc&ecirc; pode programar um site do zero com HTML. Embora sejam mais complicados de construir, os sites em HTML s&atilde;o mais eficientes em seu uso de recursos e mais flex&iacute;veis tamb&eacute;m, pois voc&ecirc; pode editar o c&oacute;digo-fonte manualmente.<\/p><p class=\"wp-block-paragraph\">Neste artigo, explicamos como desenvolver um site usando HTML e CSS em sete passos:<\/p><ol class=\"wp-block-list\">\n<li><strong>Escolha um editor HTML <\/strong>&ndash; escolha o programa como o VSCode para escrever e editar o c&oacute;digo do seu site.&nbsp;<\/li>\n\n\n\n<li><strong>Planeje o layout do site <\/strong>&ndash; fa&ccedil;a um mockup do layout do site usando um programa como o Adobe XD ou at&eacute; mesmo a boa e velha combina&ccedil;&atilde;o de papel e caneta.&nbsp;<\/li>\n\n\n\n<li><strong>Escreva o c&oacute;digo HTML <\/strong>&ndash; crie um arquivo <strong>index.html<\/strong> e adicione as tags de estrutura do documento HTML.<\/li>\n\n\n\n<li><strong>Crie os elementos de layout <\/strong>&ndash; separe seu site em v&aacute;rias se&ccedil;&otilde;es com base no layout, adicionando tags ao arquivo HTML.<\/li>\n\n\n\n<li><strong>Adicione o conte&uacute;do HTML <\/strong>&ndash; adicione o t&iacute;tulo do cabe&ccedil;alho, texto do corpo e imagens em cada se&ccedil;&atilde;o.<\/li>\n\n\n\n<li><strong>Inclua o CSS do layout <\/strong>&ndash; crie um arquivo <strong>style.css <\/strong>e adicione c&oacute;digo CSS para alterar a posi&ccedil;&atilde;o da coluna, alinhamento do texto e preenchimento dos elementos.<\/li>\n\n\n\n<li><strong>Personalize seu site <\/strong>&ndash; use atributos de estilo CSS para personalizar a cor de fundo do site, tamanho da fonte, tipos de letra e outros elementos visuais.&nbsp;&nbsp;<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Ap&oacute;s criar sua p&aacute;gina em HTML, voc&ecirc; pode adicionar CSS avan&ccedil;ado e JavaScript para melhorar a navega&ccedil;&atilde;o, interatividade e design geral.&nbsp; Para tornar o site acess&iacute;vel online, use um servi&ccedil;o de hospedagem como o Hostinger.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-site-html-perguntas-frequentes-faq\">Site HTML &mdash; Perguntas Frequentes (FAQ)<\/h2><p class=\"wp-block-paragraph\">Para ajudar voc&ecirc; a entender mais sobre a constru&ccedil;&atilde;o de um site em HTML, responderemos a algumas perguntas frequentes sobre o assunto.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-6944124276ef2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">O HTML &eacute; Suficiente para Criar um Site?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sim, voc&ecirc; pode criar um site funcional apenas com HTML. No entanto, ele exibir&aacute; apenas conte&uacute;do est&aacute;tico, como texto, links, imagens e v&iacute;deos.<\/p>\n<p>Use CSS para estilizar o elemento HTML, como alterar a cor de fundo e o tamanho da fonte. Para criar um site din&acirc;mico e interativo, voc&ecirc; tamb&eacute;m precisa de PHP.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6944124276ef5\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">O HTML &eacute; Bom para Criar Sites?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sim, ele &eacute; bom para criar um site est&aacute;tico. Sites em HTML requerem menos recursos para carregar e s&atilde;o flex&iacute;veis, pois voc&ecirc; pode modificar o c&oacute;digo-fonte.<\/p>\n<p>No entanto, HTML s&oacute; &eacute; adequado para sites complexos se combinado com CSS e JavaScript. Se voc&ecirc; est&aacute; apenas aprendendo HTML, &eacute; melhor usar o WordPress.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6944124276ef6\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Quanto Tempo Leva Para Programar um Site em HTML?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sites mais complexos levar&atilde;o mais tempo para serem constru&iacute;dos. O n&uacute;mero de desenvolvedores web trabalhando no projeto, suas habilidades e recursos tamb&eacute;m podem afetar o tempo de constru&ccedil;&atilde;o. Geralmente, um desenvolvedor experiente pode programar um site simples do zero num tempo de <a href=\"https:\/\/digital.com\/best-website-builders\/how-long-does-it-take-to-build-a-website\/\" target=\"_blank\" rel=\"noopener\">quatro a seis semanas<\/a> (link em ingl&ecirc;s).<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Construir um site hoje em dia pode ser uma tarefa simples, que n&atilde;o requer conhecimento em programa&ccedil;&atilde;o. Plataformas como o WordPress ou um Criador de Sites da Hostinger oferecem uma interface visual simplificada e recursos de arrastar e soltar para facilitar o processo de desenvolvimento.&nbsp; No entanto, voc&ecirc; pode querer construir sites do zero usando [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/site-html\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Como Criar um Site em HTML em 7 Passos Simples","rank_math_description":"Confira este artigo para aprender os 7 passos para criar um site com HTML: 1. Escolha um editor de c\u00f3digo HTML 2. Planeje o layout do site + mais.","rank_math_focus_keyword":"site html","footnotes":""},"categories":[4941],"tags":[7601],"class_list":["post-41440","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-site-html"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/making-website-with-html\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/site-html\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-creer-page-web-html\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-website-dengan-html\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-mit-html-erstellen\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/realizzazione-di-un-sito-web-con-html\/","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/website-maken-met-html\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/making-website-with-html\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/site-html\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/41440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=41440"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/41440\/revisions"}],"predecessor-version":[{"id":51647,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/41440\/revisions\/51647"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=41440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=41440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=41440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}