Document

Aprendendo HTML HTML Linguagem HTML HTML Neste texto vamos entender como montar uma estrutura de uma página web e entender um pouco sobre o que HTML HyperText Markup Language - linguagem de marcação de hipertexto), está em toda web. Então todos os sites que nós conhecemos são feitos a partir dessa linguagem de marcação chamada HTML. O HTML é interpretado pelos navegadores como o FireFox, Internet Explorer, Google e Chrome entre outros. Você escreve HTML utilizando estruturas chamadas tags. O que são tags HTML? As tags são usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um código em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo visual da página. A principal característica das tags é estarem sempre dentro dos sinais de chevron (sinal de “maior que” e “menor que”), ou seja: < >. As tags HTML são divididas em dois tipos: as que precisam de fechamento e as que não precisam de fechamento. As tags que precisam de fechamento possuem a sintaxe , já as que não precisam de fechamento possuem como estrutura .Além disso, uma mesma tag pode receber um ou mais atributos, que possuirá um valor que modifica sua estrutura ou funcionalidade. Atributos Os atributos são usados para personalizar as tags, modificando sua estrutura ou funcionalidade. Igualmente, os atributos são utilizados para atribuir uma classe ou id a um elemento. A maioria das tags tem seus próprios atributos. Contudo, existem alguns atributos genéricos que podem ser utilizados na maioria das tags HTML, vamos estudá-los: ● class=”...“ – Atribui uma classe ao elemento (uma classe pode ser utilizada para um ou mais elementos); ● id=”...“ – Atribui um id ao elemento (um id deve ser único, ou seja atribuído a um único elemento); ● style=”...” – Permite incluir elementos CSS (estilos) dentro da tag; ● lang=”...” – Define o idioma principal do elemento; ● title=”...” – Define o título do elemento; ● alt=”...” – Define um texto alternativo e, por isso, é muito utilizado em imagens, auxilia nas práticas de SEO; ● hidden – Oculta o elemento; ● align=”...” – Permite definir o padrão de alinhamento desse elemento, como por exemplo: right, center, left e justify; ● width=”...” – Define uma largura para o elemento; ● height=”...” – Define uma altura para o elemento. Essas são os principais atributos, porém existem diversos outros que devem ser estudados e podem ser utilizados no seu código. Estrutura HTML Estrutura básica de um documento HTML Um documento HTML recebe algumas tags que formam a sua estrutura básica. No HTML5, o documento padrão recebe a seguinte estrutura: Document Em primeiro lugar, vamos agora entender para que serve cada uma dessas tags: – A tag !DOCTYPE informa ao navegador a versão do HTML que está sendo utilizada no documento. Por exemplo: no HTML5, basta incluir !DOCTYPE html, e assim o navegador já saberá que se trata de um documento na versão HTML5; – Esta tag é o elemento básico da estrutura do HTML. Assim sendo, ela conterá todos os elementos do seu documento. Todo documento HTML deve iniciar e finalizar com essa tag; – Essa tag delimita o cabeçalho do documento. Não possui nenhum valor visível, porém é capaz de transmitir ao navegador diversas informações muito úteis e essenciais a uma boa apresentação do seu documento HTML; – Essa tag define o título da sua página, o nome que aparecerá na sua aba, janela ou guia. Por esta razão, a tag >title> é de grande importância para o SEO; – Essa tag permite inserir metadados ao seu documento, no caso acima, a informação charset=”UTF-8′′, que garante a compatibilidade do código com os caracteres de padrão latino americano; – Finalmente, a tag que representa o corpo do documento. Em síntese, é nessa tag que todos os elementos visíveis do seu site devem ser inseridos. Agora que já conhecemos as tags HTML que formam a estrutura básica de uma página, podemos então estudar as diversas tags que contemplarão o documento. TAGS - HTML Tags de Comentários Tags de comentários em HTML Dentro de um documento, muitas vezes precisamos fazer comentários, para facilitar no desenvolvimento. Com isso, o código fica mais organizado e podemos deixar anotações importantes para possíveis mudanças, ou apenas para orientar o código. Dessa forma, na tag de comentários (que é aberta com ), todos elementos incluídos dentro dela serão apenas comentários, ou seja, não serãovisíveis no navegador. Ex:

Olá Mundo

Como resultado final no navegador, teremos: Olá Mundo Repare que todo conteúdo das tags de comentário não aparecerá, sendo restrito apenas a quem estiver lendo o seu código HTML. Pratique utilizar os comentários em seu código, isso é uma boa prática e muito recomendada dentro do mundo do desenvolvimento. Tags Estruturais Tags HTML estruturais As tags abaixo são utilizadas nos documentos em HTML5, e têm função estrutural no seu código. Portanto, essas tags têm grande importância na questão semântica da sua página, saber utilizá-las pode adequar o seu código para uma melhor visualização por parte do navegador e do usuário, além de proporcionar uma otimização para os processos de SEO.

– Essas tags definem um cabeçalho. Portanto, todo conteúdo que estiver dentro dela faz parte de um cabeçalho, podendo ser utilizado dentro de outras sessões. Não confundir com as tags

– Essas tags representam o conteúdo principal do seu corpo, ou seja, o conteúdo relacionado diretamente com o tópico central da páginaou com a funcionalidade central da aplicação; – Essas tags definem um rodapé para a página, geralmenteutilizadas no final da página;

– Essas tags definem uma sessão para sua página;

– Essas tags definem um artigo da sua página. Nesse sentido, são utilizadas para separar o conteúdo da sua página. Muito utilizadoprincipalmente por blogs ou páginas de conteúdo; – Essas tags representam uma seção de uma página cujo conteúdo é tangencialmente relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo; – Essa tag define um conteúdo de navegação. Portanto, é muito utilizado em conjunto com listas e na criação de menus;

– Define uma divisão da página. Desta forma, funciona como um container para conteúdo de fluxo. Uma vez que não possui um valor semântico, é muito utilizado para organizar melhor o conteúdo. Anteriormente ao HTML5, era utilizado no lugar das categorias acima. Tags de Conteúdo A tags HTML de conteúdo Agora que você já conhece as principais tags estruturais, pode organizar o seu conteúdo de forma adequada. Assim sendo, vamos listar as principais tags para incluir conteúdo à página, como títulos, parágrafos, imagens, links, etc. Tags HTML de título As tags de título possuem valor semântico, variando entre seis níveis hierárquicos. Para fins de otimização SEO é importante entender como funcionam, e fazer uma utilização adequada. Para definir títulos, utilizamos as tags:

- Título de maior valor hierárquico

- Título de menor valor hierárquico Conforme dito anteriormente, a distribuição de título interferem no otimização do SEO de uma página. Com isso, uma página contendo apenas h1 não seria bem vista pelos mecanismos de busca. Portanto, é importante dividir os títulos deixando o h1 apenas para o título principal, h2 ou h3 para títulos das seções e h4 a h6 para subtítulos ou títulos que possuam baixo valor hierárquico em relação aos demais. Tags de Texto Tags HTML de texto As tags de texto definem textos, estilos de fonte, parágrafos, spans, quebras de linhas, etc. Vamos conhecê-las:

– Principal tag de texto, compõe um parágrafo; – Apesar de ter uma funcionalidade e características parecidas com os parágrafos, costumam ser utilizadas apenas para pequenas informações, como legendas de um formulário, legendas de uma imagem, etc. ambém pode ser utilizada para formar um container;

– Tag utilizada para representar texto pré-formatado. Muito utilizada para inserir códigos; – Transforma o conteúdo em negrito; – Transforma o conteúdo em itálico;
– Essa tag não necessita de fechamento, ela executa a função de quebra de linha.

– Essa tag não necessita de fechamento, ela forma uma linha horizontal. Tag de Link Tag de link HTML A tag de link HTML é responsável que faz a ligação entre um documento e outro, sendo ele da mesma página ou de uma página de outro domínio. Esse elemento garantiu que o HTML se destacasse, e moldou a internet da forma que ela é hoje! Portanto, é o principal fundamento que forma a web. Para realizar um link, podemos chamar as tags com o atributo href. Por exemplo, caso você queira criar um link no seu texto que redirecione à página inicial do google:

Para acessar o Google, clique aqui.

Como resultado, teremos: Para acessar o Google, clique aqui. Tags de Multimídia Tags HTML de multimídia As tags de multimídia servem para incluir imagens, vídeos, áudios, iframes e outros tipos de conteúdo multimídia. Essa tag não necessita de fechamento, serve para incluir uma imagem ao seu texto. A partir dessa tag, utilizamos o atributo src=" " onde deve ser digitado o local em que a imagem se encontra. Também é muito utilizado em conjunto com o atributo alt " " paradefinir o texto alternativo da imagem. Por exemplo: imagem 1 da minha página