Se você quer se tornar um webmaster e aprender Como criar um website, você pode achar a perspectiva de se familiarizar com HTML bastante assustadora.

No entanto, isso é algo que não pode ser evitado, pois a grande maioria das páginas de destino de sites que você visita foram escritas e estruturadas usando elementos HTML. Na verdade, HTML é agora usado por mais de 74% de todos os sites conhecidos, embora essa linguagem também ajude a aprimorar tudo, desde o design do seu site até a qualidade do conteúdo que ele apresenta.

Neste guia, exploraremos os princípios básicos do HTML e suas aplicações potenciais, antes de ver exemplos dos elementos individuais que você usa ao codificar seu site.

O que é HTML?

Em termos simples, HTML representa a linguagem de marcação padrão para criar páginas da web online. Significa Hyper Text Markup Language e sua função principal é estabelecer a estrutura, o layout e a apresentação de páginas de destino individuais. Embora os navegadores da web não exibam diretamente a linguagem HTML, ela desempenha um papel fundamental para ajudar a criar um site visível, acessível e fácil de usar.

O HTML também é sustentado por uma série de elementos individuais, que gradualmente constroem páginas da web, estruturam a apresentação do conteúdo e dão vida ao seu site. Esses elementos são criados e contidos em 'tags', que definem partes alternativas de conteúdo, como títulos, parágrafos e exemplos semelhantes.

Exploraremos esses elementos e sua construção com mais detalhes a seguir, ao mesmo tempo em que veremos como eles podem ser personalizados para introduzir cores, links e tipografia variável em seu site.

Onde o HTML é usado?

Como podemos ver, a aplicação mais comum do HTML é o design das landing pages individuais que compõem o seu site. Esta não é a única aplicação da popular ferramenta de codificação; no entanto, compreender seus usos adicionais o ajudará a aproveitar ao máximo a linguagem como um novo webmaster. Então, aqui estão algumas das outras maneiras pelas quais o HTML pode ser aplicado:

• Crie elementos personalizáveis ​​em uma página existente. Se você pretende permitir comentários de postagens de blog ou a publicação de conteúdo gerado pelo usuário em seu site, você pode usar fragmentos de código HTML para permitir isso. Esses elementos permitirão que os usuários enfatizem palavras-chave, incorporem links e formatem comentários dependendo das restrições que você estabelecer como moderador.
• Crie conteúdo adicional para e-mail. O e-mail também usa HTML como linguagem para mensagens de rich text, que apresentam links, texto e uma variedade de outros elementos que não podem ser apresentados apenas em texto simples. Portanto, se você deseja compartilhar um e-book relacionado ao seu site por e-mail, você pode utilizar HTML para otimizar o impacto da sua mensagem.
• Compreender os documentos de ajuda offline instalados no seu computador. Curiosamente, o HTML é usado como formato para documentos de ajuda baseados em computador que podem ser acessados ​​offline. O conhecimento básico de HTML pode, portanto, ajudá-lo a entender os problemas com seu hardware e resolvê-los mais rapidamente, o que, por sua vez, pode garantir que você consiga restaurar seu site mais rapidamente nos casos em que ele estiver offline.

Estrutura da página HTML

Antes de construir uma página HTML, você precisa do básico.

Normalmente, uma página será composta por três elementos estruturais:

1. Cabeçalho: O cabeçalho contém conteúdo relevante para todas as páginas do seu site, como um logotipo ou nome do site e um sistema de navegação. O cabeçalho é visto em cada página.
2. Corpo Principal: Isso ocupa a maior área de uma página da web. Ele contém conteúdo específico da página que está sendo visualizada.
3. Rodapé: O conteúdo do rodapé geralmente inclui informações de contato, endereço de entrega ou avisos legais. Assim como o cabeçalho, o rodapé aparece em todas as páginas, mas está posicionado na parte inferior.

Esta é a aparência desses elementos estruturais básicos quando se juntam:

Aqui está outro exemplo, usando tags de cabeçalho e tags de parágrafo para estruturar esteticamente o conteúdo. Além disso, incluímos uma tag de rodapé para o conteúdo abaixo do corpo principal de uma página:

Tags HTML

O ponto de partida para qualquer código HTML são tags individuais, que podem ser usadas para criar todos os elementos cruciais e ajudar a estruturar suas páginas da web.

Abaixo, daremos uma olhada nas tags mais comuns antes de explorarmos como elas podem ser aproveitadas para gerar elementos específicos na página:

Tags de título

Todos os documentos online, incluindo páginas da web, começam com um título. Eles são construídos usando tags HTML, com a linguagem atualmente permitindo até seis elementos de tamanhos variados que também permitem estruturar seu conteúdo com títulos adicionais, subtítulos e linhas destacadas de texto em negrito. Para iniciar seu título, basta prefixar o texto relevante com o , , , , ou etiqueta dependendo do tamanho desejado.

Você deve então aplicar uma tag de fechamento no final do título para encapsular o texto, e será exibido da seguinte forma no formato HTML:

Uma vez confirmado, isso se traduzirá na seguinte estética na página de destino do seu site:

Aqui, os vários tamanhos dos títulos das variáveis ​​são claros, assim como o fato de o navegador adicionar uma linha antes e depois do título. Você também notará que a tag de fechamento no final do texto do título tem uma estética ligeiramente diferente, mas abordaremos isso no capítulo seguinte, à medida que procurarmos usar tags para definir elementos específicos.

Tags de parágrafo

Um princípio semelhante é aplicado às tags de parágrafo iniciais, que são representadas por . Isso permite estruturar seu conteúdo e dividi-lo em parágrafos relevantes, o que por sua vez se traduz em uma experiência de leitura mais fácil e contínua. Mais uma vez, o A tag deve ser colocada no início do texto relevante, antes que a tag de fechamento alternativa seja aplicada no final para completar o efeito. Ao contrário das tags de título, no entanto, não existem opções numéricas que possam alterar o tamanho do texto apresentado no parágrafo.

Fora do formato HTML, isso dividirá o texto da seguinte forma na página finalizada:

Tags de quebra de linha

Os primeiros exemplos representam as tags HTML mais básicas, mas há outras que utilizam um formato diferente e fechamentos alternativos. Veja as quebras de linha, por exemplo, que criam uma distinção em que as linhas do texto são quebradas e continuadas na linha seguinte. Há uma diferença fundamental entre quebras de linha e parágrafos no campo HTML, pois enquanto os últimos são elementos de bloco padrão que contêm texto, os primeiros criam separação dentro de um texto existente. elemento.

Por causa disso, as quebras de linha representam um elemento vazio em HTML e, portanto, não são definidas por tags de abertura ou fechamento. Em vez disso, eles são representados pelo tag, que pode ser inserida em uma tag existente elementos para quebrar o texto e potencialmente destacar informações importantes. O único espaço entre o personagem e a barra é crucial, caso contrário a tag não será reconhecível no formato HTML.

Uma vez aplicado, isso dividirá o texto da seguinte forma:

Como você pode ver, você pode aplicar quebras de linha quantas vezes quiser em um elemento de parágrafo existente, desde que agreguem valor e facilitem a digestão das informações. Você também verá que as tags de abertura e fechamento de parágrafo permanecem inalteradas, com tags de quebra de linha usadas para alterar o layout do texto incluído.

Este é um dos exemplos de como as tags HTML podem ser usadas para alterar elementos existentes, o que desempenha um papel fundamental na definição do layout visual de suas páginas web e conteúdo.

Linhas horizontais

Da mesma forma, existem outras tags que podem ser usadas dentro do elemento ou para separar ainda mais corpos de texto em sua página da web. Um dos mais utilizados é o tag, que ajuda a criar um elemento vazio que desenha uma linha horizontal visual entre seções alternativas de um documento online. Você pode posicionar uma linha entre dois corpos de texto, por exemplo, para reorientar o leitor ou simplesmente introduzir um novo elemento visual. É assim que você cria essa quebra no HTML:

Aqui, a quebra entre os caracteres hr e a barra destaca a construção de um elemento vazio, enquanto mais uma vez não há necessidade de tag de fechamento para completar o efeito. Isso criará o seguinte visual:

Etiquetas de imagem

As tags de imagem também representam elementos vazios em HTML, o que mais uma vez significa que não apresentam uma tag de fechamento. Como eles contêm apenas atributos relacionados à URL da imagem que você está incorporando ao site, eles são definidos simplesmente pelo tag no início do elemento. Eles podem ser colocados em qualquer lugar do seu site, embora seja incomum incluí-los em elementos existentes, como parágrafos ou títulos. Veja como uma tag de imagem HTML típica se apresentará:

Você também deve fornecer um texto alternativo para sua imagem, o que ajuda as pessoas a visualizá-la em caso de carregamento lento ou uso de leitor de tela. Dessa forma, caso o navegador não encontre uma imagem, ele exibirá o valor do atributo alternativo aos visualizadores. Mais uma vez, usa a tag de imagem, mas inclui um conjunto diferente de atributos:

Elementos HTML

Anteriormente, vimos como tags HTML simples são usadas para definir elementos na página, ao mesmo tempo que exploramos como elas podem ser personalizadas usando elementos vazios contendo tags de imagem e quebra de linha. Isso nos ajuda a entender a relação que existe entre tags e elementos, e como eles podem ser usados ​​para definir diferentes tipos de conteúdo em seu site.

Embora todos os aspectos da linguagem HTML sejam representados por uma tag, por exemplo, um elemento definido que inclui conteúdo deve ter uma tag inicial e uma tag final. Portanto, títulos e parágrafos são elementos HTML porque usam tags de início e fechamento para encapsular e aumentar o texto relevante. Em contraste, os elementos vazios contêm atributos ou nenhum conteúdo, permitindo que sejam usados ​​dentro de elementos existentes sem a necessidade de uma tag de fechamento.

Definindo elementos HTML

Ao usar exemplos como títulos e parágrafos, a aplicação correta das tags de início e fechamento é crucial. É a tag inicial (como ou ) que define o elemento em questão, por exemplo, enquanto a tag de fechamento garante que esse elemento não continue no restante da página da web. Se você não usar o fechamento tag no final do parágrafo desejado, por exemplo, o texto aparecerá em um único bloco feio e extremamente difícil de ler.

Todas as tags de fechamento são idênticas às tags iniciais, exceto pelo fato de que as primeiras apresentam uma barra antes dos caracteres relevantes. Assim, no caso de um título, a tag de fechamento será , enquanto para parágrafos você sempre usará para definir a quebra no texto. Isso requer atenção aos detalhes durante a codificação, e é importante observar, ao programar títulos, que o número que você usa (como h1 ou h1) é aplicado nas tags inicial e final.

Usando elementos HTML aninhados

Nesta fase, fica claro que os documentos HTML e as páginas da web são formados por uma árvore de vários elementos, que servem como blocos de construção para uma série de ativos. Também vimos como esses elementos podem ser formados e usados ​​para estruturar o conteúdo online, e continuaremos isso agora examinando os elementos HTML aninhados.

Assim como elementos vazios e tags independentes (como podem ser incorporados em elementos HTML definidos, os chamados elementos aninhados também podem ser alojados em conteúdo como títulos e parágrafos. Isso inclui exemplos como letras em negrito e itálico e texto sublinhado, embora possam ser aplicados para adicionar personalidade ao seu conteúdo e chamar a atenção do leitor para pontos de interesse específicos.

Texto em negrito, itálico e tachado em HTML

Digamos que você queira destacar uma palavra dentro de um elemento de parágrafo existente. Você pode conseguir isso deixando-o em negrito, usando tags simples dentro do padrão elemento. Usando HTML, você programará isso da seguinte maneira:

Aqui, o elemento aninhado possui uma tag inicial e uma tag de fechamento, cada uma seguindo um formato semelhante àqueles associados a títulos e parágrafos. Eles podem ser usados ​​perfeitamente em elementos existentes e, neste caso, produzirão os seguintes resultados:

Agora, digamos que você também gostaria de alterar a tipografia desta palavra para que ela também fique em itálico. Isso pode ser conseguido simplesmente adicionando outro elemento aninhado, que deve ser codificado assim:

Como você pode ver, as tags de início e fechamento em itálico foram simplesmente incorporadas ao elemento. Isso agora transformará o conteúdo do elemento para que ele tenha a seguinte aparência:  

Claro, você pode decidir que prefere destacar esta palavra de uma maneira diferente. Portanto, você pode usar um elemento aninhado alternativo, como tachado (que é representado pelas tags e . Essas tags podem ser aplicadas da mesma maneira no elemento, aparecendo da seguinte forma em HTML:

Neste caso, o texto aparecerá da seguinte forma em seu documento ou página inicial:  

Isso oferece uma visão dos elementos que podem ser formados por tags, que por sua vez definem a estrutura de suas páginas web e o conteúdo que elas apresentam. Não apenas isso, mas elementos vazios e aninhados também podem ser usados ​​para definir melhor o seu conteúdo.

Atributos HTML

Se as tags são os blocos de construção que constroem e definem os elementos, então os atributos HTML podem ser usados ​​para personalizar suas características (como estilo, cor e idioma. Todos os elementos HTML possuem atributos principais, que fornecem informações essenciais e são sempre especificados na tag stat . Eles tendem a vir em pares, por isso geralmente aparecem no seguinte formato: nome=”valor.“

Em termos simples, o nome representa a propriedade que você deseja definir, enquanto o valor está relacionado aos critérios específicos que você deseja incorporar.

Há um grande número de atributos que podem ser aplicados aos seus elementos HTML, mas aqueles que são mais relevantes para webmasters iniciantes são:

O atributo 'lang'

O atributo mais básico define o idioma do documento e seus elementos. É declarado usando o atributo 'lang' e, embora seja facilmente esquecido, tem a vantagem de tornar o conteúdo mais acessível aos leitores de tela e aos mecanismos de pesquisa. Geralmente será apresentado no início do documento no seguinte formato:

Seguindo o atributo lang, as duas primeiras letras especificam o idioma (que neste caso é o inglês). Após o hífen, as próximas duas letras estabelecem o dialeto, embora este não esteja presente em todos os idiomas. É importante que você acerte esse atributo se quiser alcançar seu público com sucesso.

O atributo 'alinhar'

Já tocamos no formato dos atributos HTML (nome=”valor”), e a melhor concretização disso ocorre quando você tenta alinhar o conteúdo dentro de seus elementos. Você pode decidir centralizar todos os parágrafos em uma página específica, por exemplo, sendo o alinhamento a propriedade que você deseja definir. Posteriormente, 'centro' é o valor do atributo, embora você tenha a opção de alinhar o texto à esquerda ou à direita.

Isso alinhará seu elementos no centro da página e crie um layout uniforme para se adequar à natureza específica do seu site (veja abaixo):

O atributo 'href'

Se você pretende construir um site visível, é importante incorporar links de entrada e saída. Construir um portfólio de links que inclua backlinks para landing pages internas também é uma estratégia viável, então você precisará aprender como codificá-los em HTML.

Os links HTML são definidos com a tag, que inclui o link de destino junto com o texto âncora afiliado que abrigará o URL. É o atributo 'href' que especifica o endereço do site, porém, é incorporado como parte da tag inicial. Está codificado em HTML da seguinte forma:

Isso destaca claramente a distinção entre a tag inicial e a tag de fechamento e será traduzido da seguinte forma em sua página de destino:

O atributo 'cor'

Este é outro atributo importante, pois o uso da cor pode dar vida ao seu site ao mesmo tempo que ajuda a criar contrastes importantes e uma forte estética de design. Em HTML, uma cor pode ser especificada usando seu nome, embora também seja possível utilizar um valor RGB ou HEX para atingir esse objetivo. A primeira opção é a mais fácil de seguir, embora também possa ser aplicada a títulos, parágrafos e outros elementos da sua página.

Este é um atributo de estilo, com sua escolha de cor representando o valor que você gostaria de definir. Ao aplicar a cor vermelha no título principal, por exemplo, ficará assim:

Depois de aplicado, este elemento aparecerá da seguinte forma em seu site:

Mais uma vez, há uma distinção clara entre as tags inicial e final que definem o elemento, embora este seja um dos atributos mais fáceis de aplicar em HTML. Ele também destaca ainda mais o formato name=”value dos atributos HTML, tornando o processo de aprendizagem e aplicação deles muito mais fácil em todo o seu site.

Teste você mesmo

Com uma compreensão básica de HTML e de seus elementos individuais, o próximo passo é realizar alguns projetos simples e aplicar seu conhecimento teórico para resolver desafios práticos.  

No exercício detalhado a seguir, apresentamos um texto exceto e solicitamos a formatação de vários aspectos usando HTML. Use o guia e tudo o que você aprendeu até agora para completar o desafio enquanto se prepara para codificar seu próprio site.

Questões:

1. Complete o elemento do cabeçalho com a tag de fechamento correta.
2. Deixe o cabeçalho em negrito.
3. Insira uma linha horizontal abaixo do cabeçalho.
4. Use o atributo color e sombreie 'Obrigado pela visita' em verde
5. Insira este hiperlink (https://www.w3schools.com/html/) no texto âncora “Saiba mais”.
6. No início da página, use o formato name=”value” para alinhar os parágrafos à esquerda

Estatísticas e fatos da linguagem HTML

1. Os elementos HTML, head e body fazem parte da especificação HTML desde meados da década de 1990 e, até alguns anos atrás, eram os principais elementos usados ​​para dar estrutura aos documentos HTML. No entanto, a situação mudou drasticamente nos últimos anos, à medida que o HTML5 adicionou uma série de novas tags que podem ser usadas para adicionar um significado semântico rico à estrutura de um documento HTML.
2. Os documentos HTML são obrigados a começar com uma Declaração de Tipo de Documento (informalmente, um “doctype”). Nos navegadores, o doctype ajuda a definir o modo de renderização. HTML5 não define um DTD; portanto, em HTML5 a declaração doctype é mais simples e curta.
3. Os navegadores móveis adotaram totalmente o HTML5, portanto, criar projetos prontos para dispositivos móveis é tão fácil quanto projetar e construir telas sensíveis ao toque menores – daí a popularidade do Design Responsivo. Existem algumas meta tags excelentes que também permitem otimizar para dispositivos móveis.  
4. 78% dos desenvolvedores de conteúdo concordam que a estrutura é adequada para a criação de aplicativos móveis e 68% dizem que é adequada para projetar todo e qualquer tipo de aplicativo.
5. O HTML5 também vem com uma série de APIs excelentes que permitem criar uma experiência de usuário melhor e um aplicativo da Web mais robusto e dinâmico — aqui está uma lista rápida de APIs nativas:
   • Arrastar e soltar (DnD)
   • Banco de dados de armazenamento offline
   • Gerenciamento do histórico do navegador
   • Edição de documentos
   • Reprodução de mídia cronometrada
6. HTML5 não é controlado por uma empresa. Uma de suas melhores características reside no fato de ser um padrão aberto. Os desenvolvedores têm a liberdade de deixar sua criatividade fluir e adicionar tantas funções e recursos quanto possível.
7. Em comparação com outros navegadores, cada atualização do Google Chrome inclui suporte para HTML5. Além disso, o player padrão do YouTube agora é HTML5 e os anúncios em Flash do Google estão sendo convertidos para HTML5.
8. Uso de HTML5 por desenvolvedores (por região):
   • América do Norte e Latina – 70%
   • América do Sul – 61%
   • ASPAC – 60%
   • Austrália - 60%
   • Europa - 59%
   • África – 50%

Conclusão

Embora o HTML tenha sido criado apenas recentemente, em 1991 (com a primeira versão da linguagem de codificação lançada posteriormente em 1995), ele rapidamente se tornou uma ferramenta seminal no design de sites funcionais e visualmente atraentes. O nível de influência do HTML também continua a evoluir, com a iteração mais recente (HTML5) sendo adotada por um número crescente de sites em todo o mundo.

Nesse sentido, aprender os elementos básicos do HTML e como aplicá-los é o passo mais importante que você dará para estabelecer um site bem-sucedido, visível e, em última análise, competitivo.