Compartilhe com seus amigos!

Caso queira se tornar um desenvolvedor web e aprender a criar o seu tão sonhado site, você pode acabar achando que HTML é muito díficil.

 

No entanto, a maioria das páginas que você visita são feitas e estruturadas utilizando o HTML. Agora mesmo, o HTML é utilizado por 74% dos sites conhecidos, essa linguagem também ajuda serve para tudo, desde o design da sua página até o conteúdo que ela mostra.

 

Neste artigo, nós exploraremos os princípios HTML básicos e suas aplicações, antes de abordarmos seus elementos que você irá utilizar para fazer seu site.

 

Menu de conteúdos

 

O que é HTML?

 

Colocando de forma simples, o HTML é a principal linguagem markup para criação de páginas na internet. HTML significa Hyper Text Markup Language, e sua função principal é dar estrutura, layout e a forma de como as páginas se apresentam. Mesmo os browsers não mostrando diretamente a linguagem HTML, ele desempenha um papel essencial para criar um site, visível, acessível e fácil de usar.

 

O HTML possui vários elementos individuais, no qual, ajudam gradualmente construir as páginas de um site, também estrutura a apresentação do conteúdo que trazem o seu site à vida. Esses conteúdos são criados e contidos dentro de ‘tags’, no qual define partes do site, tal como headings (cabeçalhos), parágrafos (paragraphs) e exemplos similares.

 

Nós iremos explorar esses elementos e como utiliza-los com mais detalhes abaixo, também falaremos sobre como eles podem ser personalizados para colocar cores, links, e mudar a tipografia.

 

A linha do tempo de tecnologias para criação de sites:

 

  • 1991 – HTML

 

  • 1994 – HTML2

 

  • 1996 – CSS1 + JavaScript

 

  • 1997 – HTML4 

 

  • 1998 – CSS2

 

  • 2000 – XHTML1

 

  • 2002 – Tableless Web Design

 

  • 2005 – AJAX

 

  • 2009 – HTML5

 

Onde é utilizado o HTML

 

Sites populares onde é utilizado o HTML:

 

 

 

 

 

 

 

Aplicação mais comum do HTML é no design das páginas que compõem seu site. Mas essa não é a única aplicação dessa ferramenta, e compreender seus outros usos irá fazer você tirar o melhor da linguagem como um web developer. Aqui temos outros exemplos onde o HTML pode ser aplicado:

 

  • Para criar elementos customizáveis dentro de uma página existente. Se você quer permitir comentários em postagens ou a publicação de conteúdo gerado pelo usuário em seu site, o HTML seria uma das formas para fazer isso. O HTML irá permitir com que os usuários enfatizem palavras-chaves, postem links e façam comentários dependendo das restrições que você coloque como moderador.

 

  • Para melhorar seus emails. Emails também utilizam HTML como linguagem para mandar mensagens, pois é possível colocar links, textos e uma variedade de outros recursos que só o HTML proporciona.

 

  • Em documentos Offline. Curiosamente, o HTML é utilizado em documentos de ajuda que são acessados offline em seu computador.

 

Estrutura de uma página HTML

 

Antes que você construa uma página em HTML, você precisa saber a estrutura HTML básico.

 

Geralmente, uma página é composta por essa estrutura:

 

  1. Header: O header (cabeçalho) é relevante para todas as páginas do seu site, pois nela fica a logo, nome do site e o menu de navegação. em todas as páginas que você entrar o header irá aparecer.

 

  1. Main body: o main body (corpo principal) ocupa a maior parte dentro de uma página do site. Dentro terá o conteúdo da página específica que está sendo visitada.

 

  1. Footer: O conteúdo do footer (pé do site) geralmente lá irá possuir informações de contato, endereço e avisos legais. Igual o header, o footer aparece em todas as páginas, mas fica posicionado lá embaixo.

 

É assim que esses elementos ficam em forma de código:

 

 

Aqui temos mais um exemplo, utilizando a tags de header e a tag paragraph (parágrafo) para estruturar o conteúdo de forma que fique agradável de ser visto. Nós colocamos o footer tag e o main body da página também, para você ter uma ideia.

 

 

Agora que vimos o HTML Básico do básico, vamos nos aprofundar um pouco nas tags!

 

HTML Tags

 

A coisa primária de qualquer código HTML são as tags, que são utilizadas para construir todos os elementos principais e ajudar a estruturar suas páginas da web.

 

Principais tags de HTML compartilhadas na web.

 

  • HTML5 Canvas Tag – 0.27%

 

  • HTML5 Audio Tag – 0.29%

 

  • HTML5 Video Tag – 0.69%

 

  • HTML5 SVG Tag – 3.1%

 

  • HTML5 Embed Tag – 6.54%

 

Abaixo, nós iremos abordar a respeito das tags mais comuns antes de explorarmos como elas podem ser utilizadas para criar elementos on-page:

 

Heading Tags

 

Todos os documentos na internet, incluindo páginas na web, iniciam com o heading. Esses são feitos utilizando tags de HTML, no momento a linguagem permite até 6 variações do tamanho dessa tag (caso você tenha vários titulos e queira organizar eles hierarquicamente). Para fazer o seu heading, você irá simplesmente organizar os títulos em ordem de relevância com um desses prefixos tag <h1>, <h2>, <h3>, <h4>, <h5> ou <h6>.

 

Após isso você deve também colocar uma tag de fechamento no final do heading para encapsular o texto, que na prática ficará assim em código HTML.

 

 

Para o visitante irá mostrar assim:

 

 

Aqui, você consegue ver o tamanho dos vários tipos de headings. Você também irá notar que a tag de fechamento no final do heading tem um simbolo diferente, mas falaremos mais disso no próximo capítulo conforme vamos olhando as outras tags para criar elementos.

 

Paragraph tags

 

Um princípio similar é feito na hora de fazer uma tag de parágrafo, no qual são representadas por <p>. Isso permite com que você estruture seu conteúdo e divida em parágrafos, no qual no final se resume em um texto mais agradável e fácil de ser lido. Denovo, a tag <p> deve ser colocado no começo do texto, antes da tag de fechamento ser colocada. Diferente das heading tags, não possui variações numéricas que possam alterar o tamanho do texto dentro do parágrafo.

 

Por exemplo:

 

 

Que ficará assim:

 

 

Line Breaks Tags

 

O primeiro exemplo representa as tags de HTML básicas, mas existem outras que utilizam diferentes formatos e formas de fechamento. Leve em conta o Line Breaks (quebras de linha ou pular linha), por exemplo, no qual cria uma distinção a respeito de quais linhas serão quebradas ou irão continuar na linha a seguir. Existe uma diferença fundamental entre os line breaks e paragraphs na hora de codar em HTML, enquanto os paragraphs são elementos que contém textos, o line breaks cria separação dentro desse elemento <p> existente.

 

Por causa disso, line breaks são elemento vazio em HTML e não são definidos pelas tags de abertura e fechamento. Ao invés disso, eles são representados pela tag <br />, no qual pode ser inserida dentro de elementos <p> existentes para quebrar textos e enfatizar partes importantes do texto. O espaço entre o caractere <br> e a barra pra frente é crucial, pois caso contrário, a tag não será reconhecida no formato html.

 

Aqui temos um exemplo:

 

 

Uma vez aplicado, irá quebrar o texto da seguinte forma:

 

 

Conforme pode ver, você pode utilizar o line breaks o quanto quiser dentro de um elemento de parágrafo existente, desde que acrescentem valor e tornem a informação mais fácil de ser digerida. Você também verá que as tags de parágrafo de abertura e fechamento se mantêm imutáveis, com as tags de line breaks utilizadas para alterar o layout de onde o texto está incluído.

 

Isso é um dos exemplos de como as tags de HTML podem ser utilizadas para alterar elementos existentes, no qual desempenha um papel importante na hora de definir o layout visual das suas páginas da web e conteúdos.

 

 

Linhas Horizontais

 

De forma similar, existem outras tags que podem ser utilizadas dentro do elemento <p> ou para separar aindas mais os corpos de texto em sua página da web. Um dos mais utilizados é a tag <hr>, no qual ajuda a criar um elemento vazio que desenha uma linha horizontal visual entre seções alternadas de um documento online. Você talvez queira posicionar uma linha entre dois corpos de texto, por exemplo, para fazer com o leitor refoque ou simplesmente apresente um novo elemento visual. É dessa forma que você cria essa quebra em HTML:

 

 

Aqui, a quebra entre os caracteres hr e a barra para frente destacam a construção de um elemento vazio, novamente não se exige a tag de fechamento para completar esse código. De forma visual ficará desse jeito:

 

 

Image Tags

 

Tags de imagens também representam elementos vazios no HTML, que mais ou vez isso significa que eles não possuem uma tag de fechamento. Pois eles apenas possuem atributos relacionados a URL da imagem que você está colocando no site, elas são simplesmente definidas como tag <img> no começo do elemento. Esses podem ser colocados em qualquer lugar do seu site, porém é incomum colocar eles em elementos existentes como parágrafos e headings. Aqui é como se colocaria uma tag de img típica:

 

 

Você também deve fornecer um texto alternativo para a sua imagem, pois ajudará com que as pessoas a vejam caso tenha lentidão de carregamento ou esteja utilizando um screen reader. Dessa forma, se o browser não conseguir achar a imagem, irá mostrar ao invés disso o valor do atributo alternativo para os visualizadores da página. Veja o código novamente com o image tag, mas com diferentes tipos de atributos:

 

 

HTML Elements 

 

Anteriormente, nós vimos o quão simples as Tags de HTML são utilizadas para definir elementos on-page, enquanto também exploramos como eles podem ser customizados mais ainda utilizando elementos vazios contendo tags imagens e line break. Isso nos ajuda a entender o relacionamento que existe entre tags e elementos e como eles podem ser utilizados para definir diferentes tipos de conteúdos no seu site.

 

Enquanto que a maioria dos aspectos da linguagem HTML são representados por uma tag, por exemplo, um elemento definido que inclui um elemento deve possuir uma tag de abertura e fechamento. Então, cabeçalhos e parágrafos são elementos de HTML, pois eles utilizam tags de abertura e fechamento para encapsular e aumentar um certo texto. Em contraste, elementos vazios ou possuem atributos ou nenhum conteúdo que seja, permitindo que eles sejam utilizados dentro de elementos existentes sem precisar de uma tag de fechamento.

 

Definindo HTML Elements

 

Quando utilizando exemplos como headings e parágrafos, a aplicação correta das tags de abertura e fechamento é crucial. É a tag de abertura (tal como <h1> ou <p>) que define o elemento em questão, por exemplo, enquanto que a tag de fechamento garante que esse elemento não seja continuado até o final da página. Se você falhar na utilização da tag </ p> no final do parágrafo desejado, por exemplo, o texto irá aparecer em um único bloco no qual é difícil de ver e extremamente difícil de ler.

 

Todas as tags de fechamento são idênticas às tags de abertura tirando o fato de que possui uma barra. Então no caso de um heading <h1>, a tag de fechamento </h1>, enquanto que para parágrafos você sempre irá utilizar </p> para definir uma quebra no texto. Isso irá exigir atenção aos detalhes enquanto você estiver codando, e é importante enquanto estiver codando os headings que os números que você utiliza (tal como h1 ou h2) são aplicados tanto nas tags de abertura e fechamento.

 

Usando elementos HTML aninhados

 

Nesse estágio, é claro de ver que documentos HTML são formados por uma árvore de vários elementos, que servem como base para uma série de recursos. Nós também olhamos a respeito de como esses elementos podem ser formados e utilizados para estruturar elementos online e nós iremos continuar olhando isso.

 

Igual os elementos vazios e tags independentes (igual <br /> podem ser incorporados em elementos HTML definidos, os chamados elementos aninhados também podem ser abrigados dentro de conteúdos, tais como, headings e parágrafos. Isso inclui exemplos como o negrito e o itálico e textos com underline, eles podem ser adicionados para dar personalidade no seu conteúdo e atrair os olhos do leitor.

 

Texto em negrito, itálico e tachado em HTML

 

Vamos supor que você queira destacar uma palavra que está dentro de um elemento de parágrafo. Você pode fazer isso tornando ela negrito, utilizando tags simples dentro do elemento <p>. Utilizando o HTML, você irá programar isso dessa forma:

 

 

Aqui, o elemento aninhado possui uma tag de abertura e fechamento, no qual cada um segue o mesmo formato igual o headings e os paragraphs. Eles podem ser utilizados perfeitamente dentro do elementos existentes, e nesse caso, irão produzir os seguintes resultados.

 

 

Agora, digamos que você queira mudar a tipografia para que fique itálico. Você consegue fazer isso adicionando mais um elemento aninhado, e em forma de código fica assim:

 

 

Conforme você pode ver, as tags itálicas de abertura e fechamento foram simplesmente incorporadas dentro do elemento <p>. Isso irá transformar o conteúdo dentro do elemento e irá aparecer desse jeito.

 

 

Claro, você pode preferir destacar essa palavra de outra maneira. Para isso você pode utilizar um outro elemento aninhado, tal como tachação (no qual é representado pelas tags <s> e </s>). Essas tags podem ser acrescentadas da mesma forma dentro do elemento <p>, e irá ficar desse jeito em HTML:

 

 

Nesse caso, o texto irá aparecer desse jeito no seu documento ou página.

 

 

Isso oferece uma ideia a respeito dos elementos que podem ser formados por tags, que em troca define a estrutura das suas páginas e o seu conteúdo. Não somente isso elementos aninhados e vazios podem ser utilizados ainda mais para definir o seu conteúdo.

 

HTML Attributes

 

Se as tags são a base que constroem e definem os elementos, então os atributos podem ser utilizados para definir suas características (tal como estilos, cor e linguagem). Todos os elementos HTML possuem atributos principais, no qual fornecem informações principais e são sempre especificados dentro da tag stat. Eles tendem a vir em pares, então irão sempre aparecer no seguinte formato: name=”value”.

 

De forma simples, o nome representa a propriedade que você quer configurar, embora o valor esteja relacionado ao critério específico que você quer incorporar.

 

Existem grandes números de atributos que podem ser aplicados nos seus elementos HTML, mas os mais relevantes para um desenvolvedor web são:

 

o Atributo ‘lang’

 

O atributo mais básico define a linguagem do documento e seus elementos. Isso é feito declarando o atributo ‘lang’, embora seja facilmente ignorado ele tem o propósito de tornar o documento mais acessível para os leitores e os mecanismos de busca. Ele geralmente aparece no começo do documento dessa forma:

 

 

A respeito do atributo lang, as duas primeiras letras específicas a lingua (no qual está em português, nesse caso). Depois do hífen, as duas próximas letras definem o dialeto, no entanto isso não estará presente em todas as linguas. É importante que você escreva esse atributo corretamente, caso queira atingir com sucesso seu público.

 

O atributo ‘align’

 

Nós já abordamos a respeito do formatos de atributos do HTML (name=”value”), e a melhor incorporação disso ocorre quando você tenta alinhar o conteúdo dentro dos seus elementos. Você talvez decida centralizar todos os parágrafos em uma página específica, por exemplo, sendo o alinhamento a propriedade que você quer configurar. Subsequentemente, ‘center’ é o valor do atributo, no entanto, você tem opção de alinhar seu texto para direita ou para esquerda.

 

Por exemplo:

 

 

Isso irá alinhar seus elementos <p> no centro da página e irá criar um layout uniforme para combinar com a natureza do seu site (confira o exemplo abaixo):

 

 

O atributo ‘href’

 

Caso você queira fazer um site que seja visível para os outros, é importante que seu site incorpore tanto links inbound e outbound. Criar um portfólio de links que inclui backlinks para páginas internas também é uma estratégia viável, então é bom você aprender a fazer isso em HTML.

 

Os links em HTML são definidos pela tag <a>, que inclui o link de destino junto do texto âncora de afiliado que irá abrigar o URL. É o atributo ‘href’ que especifica o endereço do site, no entanto, isso é incorporado como parte da tag de abertura. Em HTML fica desse jeito:

 

 

Isso destaca a distinção entre a tag de abertura e fechamento e irá aparecer desse jeito na sua página:

 

 

O atributo ‘color’

 

Esse aqui é um outro atributo importante, colocar uma cor pode dar vida ao seu site, enquanto cria contraste importantes e uma estética de design forte. Em HTML, uma cor pode ser colocada pondo o nome dela, no entanto é possível utilizar um valor RGB ou HEX para atingir esse objetivo. A opção anterior é a mais fácil de fazer e pode ser aplicado a headings, parágrafos e outros elementos na sua página. 

 

Esse é um atributo de estilo, sendo a sua opção de cor sendo representada pelo valor que você gostaria de colocar. Ao aplicar a cor vermelha no heading, irá aparecer desse jeito:

 

 

Uma vez aplicado, esse elemento irá apareccer desse jeito no seu site

 

 

Mais uma vez, existe uma distinção clara entre as tags de abertura e fechamento que define o elemento, mas esse é um dos mais fáceis de se aplicar no HTML. Ele também destaca o formato name=”value dos atributos HTML, tornando o processo de aprendizagem e aplicação mais fáceis de se fazer no seu site.

 

Teste você mesmo

 

Com um conhecimento básico de HTML e seus elementos individuais, o próximo passo é começar a fazer alguns projetos e aplicar o seu conhecimento teórico para resolver desafios práticos.

 

Nesse exercício detalhado abaixo, nós apresentamos um texto e pedimos para formatar vários aspectos utilizando HTML. Utilize esse guia e tudo o que você aprendeu para completar esse desafio enquanto se prepara para fazer seu próprio site no futuro.

 

 

Perguntas:

 

  1. Complete o elemento header com a tag de fechamento correta.

 

  1. Torne o header negrito

 

  1. Coloque uma linha horizontal abaixo do header

 

  1. Utilize o atributo de cor e sombreamento e transforme em verde ‘Obrigado por visitar’

 

  1. Coloque esse hyperlink (www.harve.com.br) dentro do texto âncora “saiba mais”

 

  1. No head da página, utilize o formato name=”value” para alinhar os paragrafos para esquerda

 

Estatística e fatos sobre HTML

 

  1. Os elementos head, body do HTML fazem parte da especificação do HTML desde a metade da década de 90, e só agora alguns anos atrás, eles se tornaram elementos primários utilizados para dar estrutura aos documentos HTML. No entanto, essa situação mudou dramaticamente nos últimos anos conforme o HTML5 adicionou uma série de novas tags que podem ser utilizadas para adicionar sentido semântico mais rico à estrutura de um documento HTML.

 

  1. São exigidos que os documentos HTML comecem com uma Declaration Document Type (informalmente, um “doctype”). Nos navegadores, o doctype ajuda a definir o modo de renderização. o HTML5 não define um DTD; portanto, em HTML5 o doctype declariation é mais simples e curto.

 

  1. Os navegadores móveis adotaram o HTML5 completamente, então criar projetos para dispositivos móveis ficou mais fácil, é daí que vem a popularidade do design responsivo. Existem também ótimos meta tags que permitem otimizar para os dispositivos móveis.

 

  1. 78% dos desenvolvedores de conteúdo concordam que a estrutura é adequada para criar aplicativos móveis e 68% dizem que é adequada para projetar todo e qualquer tipo de aplicativo. 

 

  1. O HTML5 vem com uma grande quantidade de grandes APIs que permitem que você construa uma ótima experiência de usuário e uma aplicação web mais dinâmica, aqui embaixo trazemos uma pequena lista e APIs nativos:

 

  • Drag and Drop (DnD)

 

  • Banco de dados de armazenamento offline

 

  • Gerenciamento de histórico de site

 

  • Edição de documento

 

  • Reprodução de mídia cronometrada

 

  1. O HTML5 não é controlado por nenhuma empresa. Uma de suas melhores características é de que é de padrão aberto. Desenvolvedores possuem a liberdade de deixar sua criatividade fluir e adicionar a quantidade que quiser de funções e recursos.

 

  1. Comparado aos outros navegadores, toda atualização do Google Chrome faz questão de incluir um suporte ao HTML5. Alem disso, o reprodutor padrão do youtube é feito em HTML5 e os anúncios do Google também estão sendo convertidos em HTML5.

 

  1. A utilização do HTML5 (por região)

 

  • América do norte e latina – 70%

 

  • América do sul – 61%

 

  • ASPAC – 60%

 

  • Australia – 60%

 

  • Europa – 59%

 

  • Africa – 50%

 

Conclusão

 

Embora o HTML tenha sido criado recentemente (Sendo a primeira versão da linguagem de programação sendo subsequentemente lançada em 1995), ela se tornou rapidamente uma ferramenta principal na criação de sites funcionais e visualmente atraentes. O nível de influência do HTML continua a crescer também, com a última iteração (HTML5) sendo adotada por uma quantidade crescente de sites ao redor do mundo.

 

Em respeito disso, aprender os elementos básicos do HTML e como aplicar eles é o passo mais importante que você irá fazer para criar um site bem sucedido, visível e competitivo.

 

Artigo adaptado e inspirado de: https://firstsiteguide.com/html-for-beginners/

 

O que aprendemos nesse artigo:

 

O que é HTML?

HTML significa Hyper Text Markup Language, e sua função principal é dar estrutura, layout e a forma de como as páginas se apresentam.

Qual é a estrutura básica de uma página em HTML?

Ela deve possuir, header, main body e footer.

O que são as tags em HTML?

A coisa primária de qualquer código HTML são as tags, que são utilizadas para construir todos os elementos principais e ajudar a estruturar suas páginas da web.

Quantas variações existem de headings?

No momento a linguagem permite até 6 variações do tamanho dessa tag.

Para que serve o atributo lang?

Ele serve para definir a linguagem do documento, embora seja facilmente ignorado ele tem o propósito de tornar o documento mais acessível para os leitores e os mecanismos de busca.

Compartilhe com seus amigos!

Em   /   Desenvolvimento Web   /   Deixe um comentário

Deixe um comentário