HTML Parte 1
Características
Como dito anteriormente, foi criada por Tim Berners-Lee nos anos 90. Atualmente está na versão 5, cuja principal novidade e vantagem é a semântica trazida para dentro do código, possibilitando maior significado nas marcações, e tem as seguintes características:
- - Possui marcações específicas chamadas de tags, representadas da seguinte forma: abertas com < Nome da marcação >, e fechadas com </ Nome da marcação >, exceto algumas tags que não precisam ser fechadas, como <br> e <hr>;
- - Não é case sensitive: a mesma tag pode ser declarada utilizando caixa alta ou baixa, por exemplo: <HEAD></head>, <head></head>, <HEad></heAD>, e por ai vai;
- - Pode ser escrita em qualquer editor de texto simples, por exemplo o bloco de notas;
- - É escrita em ASCII: tabela de troca de informações, na qual cada caractere é representado por um código de 8 bits;
- - A menor informação de uma página em HTML é a própria página, desde que sua estrutura esteja correta.
Estrutura Básica de Uma Página
Para que uma página em HTML abra corretamente nos navegadores, deve ter sempre a seguinte estrutura:
<!doctype> *Indica como os navegadores deverão ler a página
<html> *Indica a linguagem de marcação sendo utilizada
<head> *Seção de cabeçalho da página, cujo conteúdo refere-se à página (titulo, metadados, tipo de codificação dos caracteres, entre outros)
</head>
<body> *Seção de conteúdo da página, onde pode ser inserido o conteúdo multimídia (textos, imagens, tabelas, formulários, etc.)
</body>
</html>
Metadados
Os metadados podem ser descritos simplesmente como dados sobre dados, no contexto da Web, são as tags que passam as informações sobre nossa página, inseridas sempre no cabeçalho da mesma:
<head> o cabeçalho da página, onde serão inseridos os metadados;
<title> título que aparecerá na barra de títulos do navegador;
<link> tag utilizada para importar folha de estilos externa;
<meta> adicionar informação sobre a página, como: autor, palavras-chave;
<style> incorporar folha de estilo ná página;
Seções
As seções HTML são partes que compõem a estrutura da página, cujo conteúdo tem uma relação semântica com seu tipo, graças a versão 5 do HTML, pois apenas algumas seções tinham esta relação nas versões anteriores.
<body> como dito anteriormente, trata-se da seção responsável pelo conteúdo da página;
<article> representa um componente de uma página que consiste numa composição autocontida em um documento;
<section> como o próprio nome sugere, cria uma seção na página, podendo ter outras seções dentro de si, como um header, um article e um footer, por exemplo;
<nav> conjunto de links de navegação, como menus ou links relacionados a página ou outros sites;
<aside> conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo);
<h1>,<h2>,<h3>,<h4>,<h5> e <h6> definem uma seção de cabeçalho, na qual o h1 representa o maior nível hierárquico (o título), o h2 um subnível do h1 (subtítulo do h1), e assim por diante;
<hgroup> agrupamento de um ou mais h1 – h6;
<header> seção de cabeçalho da página (diferente da head) ou da seção, contém geralmente a seção de h1 – h6, banners, o logo da empresa, etc.;
<footer> seção de rodapé da página;
<address> informação de contato do autor/dono do documento ou artigo;
Comentário
Quando quisermos adicionar comentários no código-fonte da página, cujo conteúdo não será apresentado na página, usamos <!--(comentário)-->.
Elementos de Agrupamento
<p> definir um grupo de texto como um parágrafo;
<hr> cria uma linha de divisão de conteúdo horizontal, esta tag não precisa ser fechada
<blockquote> definir uma citação retirada de outra página;
<ol> cria uma lista ordenada, em que cada item possui uma sequência numérica ou alfabética;
<ul> cria uma lista não ordenada, em que cada item é listado por um símbolo;
<li> utilizado para inserir os itens da lista;
<dl> cria uma lista de definição, geralmente utilizada para glossário;
<dt> indica o termo a ser definido numa lista de definição:
<dd> indica a definição do termo numa lista de definição;
<div> muito utilizada nas versões anteriores do HTML para criar seções, porém ao contrário da <section> e <article> não possui semântica;
Elementos de Texto Semânticos
<a> inserir um hiperlink na página para outra página do site ou uma página externa. Dentro deste elemento podemos definir o endereço destino (local ou externo) e onde queremos que seja aberto (na mesma página ou em uma nova página/aba), por exemplo: <a href= “endereço destino” target= “_blank” ou “_parent”>;
<abbr> definir uma abreviação ou acrônimo;
<span> agrupa elementos do texto em linha, geralmente usado para marcação de uma parte do texto;
<strong> dar forte ênfase em determinada parte do texto;
<em> dar ênfase em um pedaço do texto;
<br> inserir uma quebra de linha no texto, outra tag que não precisa ser fechada;
Conteúdo Embutido
Como dito no início, o objetivo principal da criação da web foi possibilitar a implementação de conteúdo multimídia na Internet, com o HTML podemos inserir esse conteúdo, por exemplo imagens, por meio da tag <img>.
Dentro da mesma podemos ainda definir o endereço da imagem (src= “endereço da imagem”) e o atributo alt, fundamental para navegação assistida. Também pode-se ajustar as dimensões da imagem com os atributos width e height, porém é mais convencional utilizar uma folha de estilo para isso
Exemplo desta tag:
Referências
HTML5- O Elemento ArticleO Nascimento da Internet
Tabela ASCII
Tag Address
Tim Berners-Lee
Comentários
Postar um comentário