HTML Tutorial para Iniciantes

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

Isso é algo que não pode ser evitado, no entanto, já que a grande maioria das páginas de destino do website que você visitar terá sido escrita e estruturada usando elementos HTML. Na verdade, o HTML é agora usado por mais de 74% de todos os sites conhecidos, enquanto esta linguagem também ajuda a melhorar tudo, desde o design do seu site até a qualidade do conteúdo que ele apresenta.

Neste guia, vamos explorar os princípios básicos do HTML e suas aplicações potenciais, antes de olhar para 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 a criação de páginas web online. Ele representa a Hyper Text Markup Language, e sua função mais primária é estabelecer a estrutura, layout e apresentação de páginas de destino individuais. Embora os navegadores web não exibam diretamente a linguagem HTML, ele desempenha um papel fundamental para ajudar a criar um site visível, acessível e fácil de usar.

HTML também é sustentado por uma série de elementos individuais, que gradualmente constroem páginas web, estruturam a apresentação do conteúdo e dão vida ao seu site. Estes elementos são criados e contidos dentro de ‘tags’, que definem partes alternativas de conteúdo como cabeçalhos, parágrafos e exemplos similares.

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

Onde é usado HTML?

Como podemos ver, a aplicação mais comum para HTML é o design das páginas de aterragem 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 ajudará você a obter o máximo da linguagem como um novo webmaster. Portanto, aqui estão algumas das outras formas em que o HTML pode ser aplicado:

• Criar elementos personalizáveis dentro de uma página existente. Se você pretende permitir comentários no blog ou a publicação de conteúdo gerado pelo usuário em seu site, você pode usar fragmentos de código HTML para habilitar isso. Esses elementos permitirão aos usuários enfatizar palavras-chave, incorporar links e formatar comentários, dependendo das restrições que você colocar como moderador.
• Criar conteúdo adicional para e-mail. O e-mail também usa HTML como a linguagem para mensagens de texto rico, que apresentam links, texto e uma variedade de outros elementos que não podem ser apresentados apenas em texto simples. Assim, se você está procurando compartilhar um ebook relacionado ao seu site por email, você pode utilizar HTML para otimizar o impacto da sua mensagem.
• Entenda os documentos de ajuda offline que estão instalados no seu computador. Curiosamente, o HTML é usado como o formato para documentos de ajuda baseados em computador que são acessíveis offline. O conhecimento básico de HTML pode, portanto, ajudá-lo a entender problemas com seu hardware e resolvê-los mais rapidamente, o que, por sua vez, pode garantir que você seja capaz de restaurar seu site mais rapidamente em casos em que ele tenha ficado offline.

Estrutura da página HTML

Antes de poder construir uma página html, você precisa do básico no lugar.

Tipicamente, uma página será composta de 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: Ocupa a maior área em 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é normalmente inclui informações de contacto, um endereço de envio ou avisos legais. Como o cabeçalho, o rodapé aparece em cada página, mas está posicionado na parte inferior.

Aqui está como esses elementos estruturais básicos se parecem quando se juntam:

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

>Itags/HTML

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

Below, vamos dar uma olhada nas tags mais comuns antes de explorarmos como elas podem ser alavancadas para gerar elementos específicos, na página:

Heading tags

Todos os documentos online, incluindo páginas web, começam com um cabeçalho. Estes são construídos usando tags HTML, com a linguagem atualmente permitindo até seis elementos de tamanho variável que também permitem estruturar seu conteúdo com títulos adicionais, subtítulos e linhas de texto em negrito em destaque. Para iniciar seu cabeçalho, você simplesmente prefixa o texto relevante com a tag <h1> , <h2> , <h3> , <h4> , <h5> ou <h6> tag dependendo do tamanho desejado.

>

É necessário então aplicar uma tag de fechamento no final do cabeçalho para encapsular o texto, e será exibido como se segue em formato HTML:

Confirmado, isto se traduzirá na seguinte estética na página de destino do seu site:

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

Blogs de parágrafo

Um princípio semelhante é aplicado às tags de parágrafo inicial, que são representadas por <p>. Isto permite-lhe estruturar o seu conteúdo e dividi-lo em parágrafos relevantes, o que por sua vez se traduz numa experiência de leitura mais fácil e mais perfeita. Mais uma vez, a tag <p> deve ser colocada no início do texto relevante, antes que a tag de fechamento alternativo seja aplicada no final para completar o efeito. Ao contrário das tags de cabeçalho, no entanto, não existem várias numéricas que possam alterar o tamanho do texto apresentado no parágrafo.

Fora do formato HTML, isto irá quebrar o texto da seguinte forma na sua página web finalizada:

Line break tags

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

Por causa disso, quebras de linha representam um elemento vazio no HTML e, portanto, não são definidas por tags de abertura ou fechamento. Ao invés disso, elas são representadas pela tag <br />, que pode ser inserida em elementos existentes <p> para quebrar o texto e potencialmente destacar partes importantes de informação. O espaço único entre o caractere <be> e a barra de avanço é crucial, caso contrário, a tag não é reconhecível no formato HTML.

Após aplicação, isto quebrará o texto da seguinte forma:

Como pode ver, pode aplicar quebras de linha as vezes que quiser dentro de um elemento de parágrafo existente, desde que acrescentem valor e tornem a informação mais fácil de digerir. Você também verá que as tags de abertura e fechamento de parágrafos permanecem inalteradas, com tags de quebra de linha usadas para alterar o layout do texto incluído em.

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

Linhas horizontais

Simplesmente, existem outras tags que podem ser usadas dentro do elemento <p> ou para separar mais corpos de texto na sua página web. Uma das mais usadas é a tag <hr>, que ajuda a criar um elemento vazio que desenha uma linha visual e horizontal entre seções alternadas de um documento online. Você pode querer posicionar uma linha entre dois corpos de texto, por exemplo, para refocalizar o leitor ou simplesmente introduzir um novo elemento visual. É assim que você cria tal quebra em HTML:

Aqui, a quebra entre os caracteres hr e a barra de avanço destaca a construção de um elemento vazio, enquanto que mais uma vez não é necessária uma tag de fechamento para completar o efeito. Isto irá criar o seguinte visual:

Image tags

Image tags também representam elementos vazios em HTML, o que mais uma vez significa que eles não possuem uma tag de fechamento. Como elas contêm apenas atributos relacionados à URL da imagem que você está incorporando no site, elas são definidas simplesmente pela tag <img > no início do elemento. Estes podem ser colocados em qualquer lugar do seu site, embora seja incomum incluí-los em elementos existentes, tais como parágrafos ou cabeçalhos. Aqui está como uma típica tag de imagem HTML se apresentará:

Você também deve fornecer texto alternativo para sua imagem, o que ajuda as pessoas a vê-la no caso de tempos de carregamento lentos ou o uso de leitor de tela. Desta forma, se o navegador não conseguir encontrar uma imagem, ele exibirá o valor do atributo alternativo para os visualizadores. Isto mais uma vez usa a tag da imagem, mas inclui um conjunto diferente de atributos:

HTML elements

Anteriormente, observamos como tags HTML simples são usadas para definir elementos na página, enquanto também exploramos como elas podem ser personalizadas ainda mais usando elementos vazios contendo tags de imagem e quebra de linha. Isto 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 website.

Embora todos os aspectos da linguagem HTML sejam representados por uma tag, por exemplo, um elemento definido que inclui conteúdo deve ter tanto uma tag de início quanto uma tag de fechamento. Assim, cabeçalhos e parágrafos são elementos HTML porque usam tags de início e fim para encapsular e aumentar o texto relevante. Em contraste, elementos vazios ou 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 cabeçalhos e parágrafos, a aplicação correta de tags de início e fechamento é crucial. É a tag de início (tal como <h1> ou <p>) que define o elemento em questão, por exemplo, enquanto a tag de fechamento garante que este elemento não é continuado no resto da página web. Se você não usar a tag de fechamento </ p> no final de um parágrafo desejado, por exemplo, o texto aparecerá em um único bloco que é desagradável e extremamente difícil de ler.

Todas as tags de fechamento são idênticas às tags de início, exceto pelo fato de que a primeira possui uma barra de avanço antes dos caracteres relevantes. Então no exemplo de um <h1>heading, a tag de fechamento será </ h1> , enquanto para parágrafos você sempre usará </ p> para definir a quebra no texto. Isto requer atenção aos detalhes durante a codificação, e é importante notar ao programar cabeçalhos que o número que você usa (como h1 ou h2) é aplicado tanto na tag de início como na tag de fechamento.

Usando elementos HTML aninhados

Neste estágio, fica claro que documentos HTML e páginas web são formados por uma árvore de vários elementos, que servem como blocos de construção para um conjunto de recursos. Nós também observamos como esses elementos podem ser formados e usados para estruturar conteúdo online, e continuaremos com isso agora olhando para elementos HTML aninhados.

Apenas como elementos vazios e tags autônomas (como <br / > podem ser incorporados em elementos HTML definidos, os chamados elementos aninhados também podem ser alojados dentro de conteúdo como cabeçalhos e parágrafos. Estes incluem exemplos como letras em negrito e itálico e texto sublinhado, enquanto podem ser aplicados para adicionar personalidade ao seu conteúdo e atrair o olhar do leitor para pontos específicos de interesse.

Texto em negrito, itálico e riscado em HTML

Vamos dizer que você quer destacar uma palavra dentro de um elemento de parágrafo existente. Você pode conseguir isso tornando-o em negrito, usando tags simples dentro do elemento padrão <p>. Usando HTML, você programará isto da seguinte forma:

Aqui, o elemento aninhado tem tanto uma etiqueta inicial como uma de fechamento, cada uma das quais segue um formato similar aos associados a títulos e parágrafos. Eles podem ser usados sem problemas dentro dos elementos existentes e, neste caso, produzirá os seguintes resultados:

Agora, digamos que você também gostaria de mudar a tipografia desta palavra para que ela também seja itálica. Isto pode ser conseguido simplesmente adicionando outro elemento aninhado, que deve ser codificado desta forma:

Como você pode ver, as tags de início e fim em itálico foram simplesmente incorporadas no elemento <p>. Isto irá agora transformar o conteúdo dentro do elemento de modo a aparecer como se segue:

Obviamente, você pode decidir que prefere destacar esta palavra de uma maneira diferente. Você pode, portanto, usar um elemento aninhado alternativo, como strikethrough (que é representado pelas tags <s> e </s>. Estas tags podem ser aplicadas da mesma forma dentro do elemento <p>, aparecendo da seguinte forma em HTML:

Neste caso, o texto aparecerá como se segue no seu documento ou página de destino:

Esta opção oferece uma visão dos elementos que podem ser formados por tags, que por sua vez define a estrutura das suas páginas web e o conteúdo que elas apresentam. Não só isso, mas elementos vazios e aninhados também podem ser usados para definir melhor seu conteúdo.

Atributos HTML

Se as tags são os blocos de construção que constroem e definem elementos, então os atributos HTML podem ser usados para personalizar suas características (tais como estilo, cor e linguagem. Todos os elementos HTML têm atributos de núcleo, que fornecem informações de núcleo e são sempre especificados dentro da tag stat. Eles tendem a vir em pares, portanto muitas vezes aparecem no seguinte formato: name=”value”

Em termos simples, o nome representa a propriedade que você quer definir, enquanto o valor se relaciona com os critérios específicos que você quer 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 calouros são:

O atributo ‘lang’

O atributo mais básico define a linguagem do documento e seus elementos. É declarado usando o atributo ‘lang’, e embora seja facilmente ignorado, tem o benefício de tornar o conteúdo mais acessível aos leitores de tela e aos mecanismos de busca. Ele será normalmente apresentado no início do documento no seguinte formato:

Seguir o atributo lang, as duas primeiras letras especificam o idioma (que é o inglês, neste caso). Após o hífen, as duas letras seguintes estabelecem o dialeto, embora este não esteja presente em todas as línguas. É importante que você acerte este atributo se você quiser alcançar com sucesso sua audiência.

O atributo ‘align’

Já tocamos no formato dos atributos HTML (name=”value”), e a melhor encarnação disto 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, com o alinhamento sendo a propriedade que você deseja definir. Subsequentemente, ‘centro’ é o valor do atributo, embora você tenha a opção de alinhar o seu texto à esquerda ou à direita.

Isso irá alinhar os elementos <p> no centro da página, e criar um layout uniforme para se adequar à natureza específica do seu website (veja abaixo):

O atributo ‘href’

Se você vai construir um site visível, é importante que você incorpore tanto os links de entrada como os de saída. Construir um portfólio de links que inclua backlinks para páginas de destino internas também é uma estratégia viável, portanto você precisará aprender como codificá-los em HTML.

Links HTML são definidos com a tag <a>, que inclui o link de destino junto com o texto da âncora afiliada que irá hospedar a URL. É o atributo ‘href’ que especifica o endereço do site, no entanto, este é incorporado como parte da tag de início. Ele é codificado em HTML da seguinte forma:

Este facto realça claramente a distinção entre a etiqueta inicial e a etiqueta final, e irá traduzir-se da seguinte forma na sua página de destino:

O atributo ‘cor’

Este é outro atributo importante, pois o uso da cor pode dar vida ao seu website, ao mesmo tempo que ajuda a criar contrastes importantes e uma estética de design forte. Em HTML, uma cor pode ser especificada através do seu nome, embora também seja possível utilizar um valor RGB ou HEX para atingir este objectivo. A primeira opção é a mais fácil de seguir, no entanto, enquanto que também pode ser aplicada a cabeçalhos, parágrafos e outros elementos da sua página.

Este é um atributo de estilo, com a sua escolha de cor representando o valor que você gostaria de definir. Ao aplicar a cor vermelha ao cabeçalho principal, por exemplo, ele ficará assim:

Após aplicado, este elemento aparecerá como se segue no seu website:

Após novamente, há uma clara distinção entre as tags de início e fim que definem o elemento, enquanto este é um dos atributos mais fáceis de aplicar em HTML. Ele também destaca ainda o formato name=”value dos atributos HTML, tornando o processo de aprendizagem, e aplicando-os muito mais fácil em todo o seu website.

Teste-o você mesmo

Com um entendimento básico de HTML e seus elementos individuais, o próximo passo é empreender alguns projetos simples e aplicar seus conhecimentos teóricos para resolver os desafios práticos.

No exercício detalhado abaixo, nós apresentamos um texto exceto e pedimos para formatar vários aspectos usando HTML. Use o guia e tudo o que você aprendeu até agora para completar o desafio enquanto você se prepara para codificar seu próprio website.

Questões:

1. Completar o elemento do cabeçalho com a tag de fechamento correta.
2. Faça o cabeçalho em negrito.
3. Inserir uma linha horizontal sob o cabeçalho.
4. Utilize o atributo de cor e sombra ‘Obrigado por visitar’ em verde
5. Inserir este hyperlink (https://www.w3schools.com/html/) no texto de âncora “Aprenda mais.”
6. No cabeçalho da página, use o formato name=”value” para alinhar à esquerda os parágrafos

Estatísticas e fatos da linguagem HTML

1. Os elementos HTML, head, e body fazem parte da especificação HTML desde meados dos anos 90, e até alguns anos atrás, eles eram os elementos primários usados para dar estrutura aos documentos HTML. No entanto, a situação mudou drasticamente nos últimos anos, pois 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. Documentos HTML são necessários para 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 do doctype é mais simples e mais curta.
3. Navegadores móveis adotaram totalmente o HTML5, portanto, criar projetos prontos para uso móvel é tão fácil quanto projetar e construir para suas telas menores de tela sensível ao toque – daí a popularidade do Design Responsivo. Existem algumas grandes meta tags que também lhe permitem optimizar para telemóvel.
4. 78% dos desenvolvedores de conteúdo concordam que a estrutura é adequada para criar aplicativos móveis, e 68% dizem que ela é adequada para projetar todo e qualquer tipo de aplicativo.
5. HTML5 também vem com uma série de ótimas APIs que permitem que você construa uma melhor experiência de usuário e uma aplicação web mais dinâmica e robusta – aqui está uma lista rápida de APIs nativas:
   • Drag and Drop (DnD)
   • Base de dados de armazenamento offline
   • Gestão do histórico do browser
   • Edição de documentos
   • Reprodução de suportes de impressão marcados
6. HTML5 não é controlado por uma empresa. Uma de suas melhores características é o fato de ser um padrão aberto. Os desenvolvedores têm a liberdade de deixar sua criatividade fluir e adicionar o máximo de funções e recursos que puderem.
7. Comparado com outros navegadores, cada atualização do Google Chrome garante a inclusão de suporte a HTML5. Além disso, o leitor padrão do YouTube é agora HTML5 e os anúncios Flash do Google estão agora a ser convertidos para HTML5.
8. Utilização de HTML5 pelos desenvolvedores (por região):
   • Norte e América Latina – 70%
   • América do Sul – 61%
   • ASPAC – 60%
   • Austrália – 60%
   • Europa – 59%
   • África – 50%

Conclusão

Embora o HTML só tenha sido criado em 1991 (com a primeira versão da linguagem de codificação lançada posteriormente em 1995), tornou-se rapidamente 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 última iteração (HTML5) sendo adotada por um número crescente de websites em todo o mundo.

Neste aspecto, aprender os elementos básicos do HTML e como aplicá-los é o passo mais importante que você dará para estabelecer um website bem sucedido, visível e finalmente competitivo.