HTML
HTML
1.HTML é as inicias de Hyper Text Markup Language – (Tradução) Linguagem de Marcação de Hipertexto, criada por Tim Bernes-Lee na década de 90 a partir da ideia de “conectar” diferentes arquivos acadêmicos, já com a concepção de links, a fim de facilitar a navegação entre eles e possibilitar eficiente referência cruzada. É a principal linguagem de marcação utilizada para criação de páginas web e outras informações que podem ser identificadas e apresentadas por navegadores.
Um documento HTML é um arquivo de texto, seus elementos são tags (etiquetas), comandos de formatação da linguagem, colocando atributos, entre sinais de menor e maior (< exemplo >).
Os avanços na área de comunicação e Internet desenvolvem a linguagem HTML e seu posterior aprimoramento e estudo.
A linguagem têm sua especificação e padronização coordenada, pesquisada e aprimorada pela W3C. Atualmente trabalha-se para a definição de sua quinta versão: HTML5.
1.1 Elemento root: html
A tag <html> informa ao navegador que aquele é um arquivo escrito na linguagem HTML e deve ser apresentado como uma página web. Ela representa a raiz do documento e, exceto por <!DOCTYPE>, todos os elementos e comandos da página estão dentro dela. Ela é aberta no início do documento (<html>) e é a última tag a ser fechada em seu final (</html>).
1.2 Metadados: head, title, link, meta, style
São chamados metadados os “dados sobre dados”, ou seja, descrevem quais tipos de dados estão contidos naquele documento. Os metadados informam sobre as particularidades do arquivo, como sua apresentação, administração, uso, direitos do autor e catalogação, entre outras. Em arquivos digitais, os metadados são de extrema importância para os mecanismos de busca, que os utilizarão para relacionar arquivos pertinentes às pesquisas de seus usuários.
É no elemento <head> que estão contidos os metadados do documento HTML. Ele indica a seção de cabeçalho da página. A tag <head> deve ser fechada (</head>) ao final da inserção dos outros elementos de metadados utilizados, antes da abertura da seção de corpo do documento.
<title> é a tag utilizada para dar título ao documento, que será exibido na barra de títulos dos navegadores, dará um “nome” à página quando ela for adicionada aos favoritos e quando for exibida como resultado em sites de busca. Não é possível haver mais de uma tag <title> em uma página. Ela deve sempre ser fechada com o comando </title> após sua atribuição.
<link> define uma relação entre o documento e um recurso externo, geralmente uma folha de formatação. Essa tag contém apenas atributos e pode ser usada quantas vezes forem desejadas ou necessárias. Não precisa ser fechada com comando </link>.
<meta> contém as propriedades da página, metadados em si. Ela pode especificar palavras-chave, autor, descrição e decodificação de caracteres da página, por exemplo.
Apesar de seu conteúdo não ser exibido na página, ele é legível para máquinas, sendo usada por navegadores (especifica como exibir conteúdo ou recarregar a página), mecanismos de busca (elenca palavras-chave) e outros serviços web. Essa tag não possui comando de fechamento. <style> é a tag que especifica como os elementos html devem ser renderizados pelo navegador. É possível utilizar quantas tags <style> forem desejadas, todas devidamente fechadas pelo comando </style>.
Toda a formatação de um documento html deve, pelas boas praticas, ser feita através de CSS.
1.3 Seções: body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address
O corpo do documento HTML detém todo o conteúdo da página, como textos, imagens, links, listas, tabelas, etc., porém atributos de layout não são suportados no HTML5. O elemento <body>, aberto após encerramento do cabeçalho, só será fechado depois da inserção e término de todo o conteúdo da página, pelo comando </body>.
<article> é uma tag nova no HTML5 usada para seccionar um conteúdo da página que deve fazer sentido por si só (não se relacionando diretamente com o restante do conteúdo da página), como, por exemplo, um postagem de blog, um comentário postado por um usuário, um widget ou gadget interativo ou um artigo de jornal online. Utiliza-se </article> para seu fechamento.
<section> é também uma tag nova no HTML5. Ela secciona um conteúdo do corpo da página que normalmente recebe um título. Apesar de ser bastante genérica, deve-se atentar ao seu uso, pois ela não serve para estilizar ou receber conteúdo “independente”. Nesses casos, deveriam ser usadas as tags <div> e <article>, respectivamente. A <section> é uma pequena porção de conteúdo que pode ser armazenada como um registro individual em um banco de dados. Após sua conclusão, o comando </section> encerra esse elemento.
<nav> é usada para declarar uma seção navegável do documento HTML. É uma tag nova. É dentro dessa seção que devem ser colocados os links internos de navegação do site: “o menu”. Seu comando de fechamento é </nav>.
<aside> representa uma seção da página que recebe conteúdo relacionado ao conteúdo principal, sem fazer parte dele diretamente. Pode conter explicações paralelas, definições de um glossário para palavras do conteúdo da página ou outras informações complementares, como a biografia do autor ou informações de um perfil. É uma tag nova no HTML5 e deve ser aberta (<aside>) e fechada (</aside>).
<h1> a <h6> definem títulos em um documento HTML. Seus diferentes níveis seguem sua “numeração”, onde <h1> seria o título principal e <h6> o mais baixo subtítulo da página (passando pelos níveis <h2>, <h3>, <h4> e <h5>). Esses comandos nunca devem ser utilizados para estilizar o tamanho da fonte (para isso usa-se CSS) e seus níveis não devem ser “pulados” (usar tag <h1> e depois <h4>, por exemplo). Recomenda-se o uso de apenas uma tag <h1> por página, ao exemplo dos grandes portais da Internet. As tags devem sempre ser fechadas.
<hgroup> é o elemento que agrupa os comandos de título e subtítulos do documento. Contribui para a associação de um subtítulo, um título alternativo ou um slogan ao título principal, sem poluir a página. É fechada por </hgroup>. Essa tag foi introduzida no HTML5, porém foi removida de suas especificações pela W3C. Por seu futuro (atualmente) incerto, recomenda-se não utilizá-la por enquanto.
<header> especifica uma seção de cabeçalho à página ou a qualquer uma de suas seções, podendo conter uma introdução ao conteúdo ou uma série de links navegáveis. É possível usar vários elementos <header> em um documento. Esse elemento não pode ser usado para seccionar um elemento <footer>, <address> ou outro <header>, sendo aplicável aos outros (<article>, <section>, <aside>, etc). Essa tag foi introduzida no HTML5 e deve ser fechada (</header>) após aberta.
<footer> é muito similar a tag <header>, porém especifica uma seção de rodapé à página ou às suas seções. Apenas não pode ser inserida dentro de um elemento <header>, <address> ou outro <footer>. </footer> é usado para seu fechamento.
<address> define a informação de contato do autor do documento ou da seção em que está inserida. É geralmente usada em uma seção de rodapé e não deve conter informações de publicação ou edição do conteúdo, apenas contato de seu autor. Seu conteúdo é geralmente renderizado em itálico pelos navegadores e há uma quebra de linha antes e após esse elemento. A tag deve ser fechada por </address>.
1.4 Comentário
Tags de comentário (<!-- ... -->) são geralmente utilizadas para adicionar informações ao seu código que facilitem futuras edições, especialmente se ele for muito extenso. Essa tag não suporta atributos e não é renderizada pelo navegador, ou seja, não é visível na página para os usuários. Elas não possuem fechamento e todo seu conteúdo deve estar entre os símbolos que a determinam: <!-- exemplo -->.
1.5 Elementos de agrupamento: p, hr, blockquote, ol, ul, li, dl, dt, dd, div
Elementos de agrupamento – texto:
A tag <p> define um parágrafo de texto. Os navegadores automaticamente acrescentam um pequeno espaço antes de cada elemento <p>, uma margem. Essas margens podem ser formatadas com CSS. Após aberta, a tag de encerramento pode ser omitida no caso do elemento <p> ser imediatamente seguido por <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> ou outro <p>. Contudo, é parte das boas práticas sempre fechar o elemento utilizado antes da abertura do próximo.
O elemento <hr> representa uma quebra temática entre parágrafos. Os navegadores renderizam o comando como uma linha horizontal, que é uma separação visual, mas possui valor semântico, pois separa blocos de texto que indicam mudança de tópico/assunto em uma seção ou mudança de cenas em uma história. Não deve ser usada para dividir a página em seções: há elementos semânticos específicos para tanto.
<blockquote> é utilizada para representar uma citação longa (em bloco) de uma fonte externa. Uma URL para a fonte deve ser dada usando-se o atributo cite. Os navegadores renderizam o comando apresentando um recuo antes do texto, em relação à margem esquerda da página. Após fechada (</blockquote>), o recuo é encerrado.
Elementos de agrupamento – listas:
<ol> define uma lista ordenada, podendo ser numérica ou alfabética. CSS pode ser usado para modificar o sistema numérico da lista, mas outros atributos como reversed (numerais decrescentes), start (por qual valor começar) e type (qual tipo de marcador) podem ser incorporados ao elemento HTML. Ao seu final, é fechada por </ol>, encerrando a contagem de seus itens.
Listas não ordenadas são definidas pelo elemento <ul> e seus itens são elencados por caracteres simbólicos. São usadas quando a ordem dos itens não altera seus significados. Devem ser formatadas com CSS e fechadas com o comando </ul>.
<li> é a tag usada para definir os itens em uma lista (um a um), seja ordenada (<ol>), seja não ordenada (<ul>), seja um menu (<menu> - obsoleto). Seu valor inicial pode ser definido pelo atributo value. A tag deve ser aberta (<li>) antes da inserção do item e fechada (</li>) logo após, repetindo-se o processo item por item.
Uma lista descritiva é definida por <dl>. Geralmente empregada na estruturação de glossários ou exibição de metadados. Ela consiste em grupos de “nomes e valores”, podendo ser um termo (nome) e suas definições (valores).
Os “nomes” são definidos pela tag <dt> e os “valores” pela tag <dd>. Dessa forma, abre-se a lista pelo comando <dl>, adiciona-se o termo por <dt>-</dt> e atribui-se a ele suas definições por <dd>-</dd>, fecha-se </dl> ao final da lista.
Elementos de agrupamento – elementos:
<div> define uma divisão ou seção em uma página HTML, podendo ter a função de
reunir elementos que serão formatados com CSS, por exemplo. Ela não possui
significado especial, é uma seção genérica que existe em função dos elementos que
contém em si.Ela jamais deve substituir um elemento semântico do HTML, como o <aside>, <section> ou <article>. Tag de fechamento: </div>.
1.6 Elementos de texto semânticos: a, abbr, span, strong, em, br
Elementos de texto semânticos:
<a> define um hyperlink, usado para conectar uma página à outra. O mais importante de seus atributos é href, que especifica a URL da página para qual o link levará o usuário. Por padrão, os navegadores renderizarão os links da seguinte maneira: link não visitado – sublinhado e azul; link visitado – sublinhado e roxo; link ativo – sublinhado e vermelho. Outros atributos podem ser usados quando href não estiver definido: hreflang – especifica a linguagem do documento linkado; media – especifica para qual tipo de mídia ou dispositivo o documento linkado é otimizado; rel – cada um de seus valores especifica a ligação entre o documento atual e o de destino; target – seus valores especificam onde abrir o novo documento; type – especifica as Extensões Multifunção para Mensagens de Internet (MIME, em inglês) do documento linkado.
<abbr> é usada para definir um acrônimo ou abreviação. Ao marcar uma abreviação, são dadas informações úteis a indexadores de mecanismos de busca, tradutores, navegadores e corretores ortográficos. O atributo title pode ser usado com a tag <abbr> para mostrar o significado completo da abreviação ou acrônimo quando o cursor do mouse for posicionado sobre ela. É fechada por </abbr>.
A tag <span> é usada para agrupar elementos em linha em um documento. Por si só a tag não traz nenhuma mudança visual ao documento, mas possibilita que a parte que detém tenha seu estilo alterado com CSS ou manipulado com JavaScript. Essa tag, assim como a <div>, só deve ser usada quando nenhum outro elemento semântico puder ser aplicado. Observação: <span> é um elemento “em linha” e <div> é um elemento “de blocos”. O comando </span> é usado para seu fechamento.
<strong> é usada para realçar texto de grande importância, concedendo-lhe o aspecto de texto em negrito quando renderizado pelos navegadores. Deve ser fechada pelo comando </strong>.
<em> define uma parte de frase ou texto como sendo enfática, concedendo o aspecto de texto em itálico quando renderizado pelos navegadores. Deve ser fechada pelo comando </em>.
A tag <br> insere uma quebra de linha ao texto. É especialmente usada quando a divisão do texto em linhas é importante, como em poemas ou endereços. Não deve ser usada para aumentar o espaçamento entre as linhas do texto ou separar parágrafos. Para tanto, deve-se usar formatação CSS. Essa é uma tag que não possui fechamento.
1.7 Conteúdo embutido: img
Para acrescentar uma imagem ao documento HTML, utiliza-se a tag <img>. A imagem não é tecnicamente inserida no documento, mas linkada a ele. Dois atributos são necessários ao uso dessa tag: src – especifica a URL da imagem, onde ela está – e alt – especifica um texto descritivo/informativo para ser visualizado no lugar da imagem (muito importante para a otimização de mecanismos de busca e questões de acessibilidade). Não há tag de fechamento para esse comando em HTML.
Referências;
https://www.w3schools.com/html/
https://librosweb.es
https://www.jsites.com.br