 |
| HTML5 Semântica |
HTMLé uma linguagem de marcação utilizada para criar páginas para Web. Seu significado é Hyper Text Markup Language para criar uma página em HTML não é necessário utilizar um software sofisticado, não é case-sensitive (Quando diferencia letras maiúscula de minúscula),porém uma boa prática que aprendi é por padrão sempre utilizar letras minúsculas é provável que será útil a você utilizar esta boa prática.
Apenas um editor de texto como o notepad é o bastante para montar uma página html, sendo necessário apenas salvar o arquivo com a extensão (tipo de arquivo).html.Ao carregar uma página HTML no navegador ele interpreta as marcações HTML e assim mostra as informações na tela.
Obs:As tag do html (sinal de maior e menor) quando aberta em sua maioria devem ser fechadas utilizando a barra.
1.1 Elemento root: HTML
Um documento HTML tem uma raiz esta é representada pelo elemento html.Inserimos o elemento html no inicio do documento, após declararmos seu tipo: !DOCTYPE html(Declarando um documento html5),dentro do elemento html é importante declararmos o atributo (Nome dado ao que é atribuído ao a um elemento) lang este é importante para que um navegar, ferramenta de busca ou outros tipos possa identificar qual idioma pertence aquela página e assim funcionar de forma adequada aquele idioma.1.2 Metadados
Os metadados são declarados no cabeçalho do documento html.head: Este é um elemento do cabeçalho nele são inseridos as informações de meta, link, title, style.
title: Neste você define o titulo que de sua página que será visualizado na aba do navegador.
link: Este elemento é utilizado para relacionar documentos html com recursos externo normalmente são folhas de estilos (CSS), assunto que será aborda futuramente, acompanhe as postagens no Blog.
meta: Neste você define informações para ferramentas de buscas entre outras informações como tipos de caracteres para que o navegador reconheça as acentuações e outros caracteres especiais.
style: Com este elemento você define formatações para a página, porém atualmente é utilizado o CSS e não são mais inseridos atributos de formatações dentro do html.
No Navegador:
1.3 Sessões
O html5 foi criado devido a necessidade de haver mais semântica no html, buscando isso surgirão as sessões abaixo que substituem as div em muitos casos, mas as div não foram eliminadas elas podem ser usadas em casos de imagens entre outros.body: Este define o corpo da página html. header: Este define o cabeçalho da página html.
section: Este define a seção da página html onde pode ser inserido um header, article e footer.
article: É onde você insere o conteúdo texto imagens etc.
nav: Neste você pode inserir os link e tornar a barra de navegação.
aside: Pode ser usado como barra lateral do site e inserir conteúdos relacionados.
footer: Este define do rodapé da página.
address: Este você utilize para inserir informações de contato do autor e pode deixar um email para contato.
h1, h2, h3, h4, h5, h6: Estes são sessões de cabeçalho cada numero define um tamanho diferente a grosso modo são como os níveis de títulos.
hgroup: Com o hgroup você pode agrupar diferente sessões de cabeçalho em uma página.
1.4 Comentário:
Na linguagem de marcação pode ser feito comentário estes não aparecem na página e podem ser útil na organização de sua página para uma modificação no futuro, estes comentários ficam entre as tag: <!--seu comentário -->Exemplo
No Navegador:
1.5 Elementos de agrupamento:
Este elemento de agrupamento define um parágrafo.hr: Com este você define uma linha na página.
blockquote: Este é usado para definer uma citação no site, o navegador deixa com uma formatação diferenciada parágrafos com este elemento.
ol: Este elemento cria uma lista ordenada por números.
ul: Este elemento cria uma lista normal.
li: Este elemento define os itens das listas ul e ol.
dl: Cria uma lista de definição na página.
dt: Cria itens na lista de definição da página.
dd: Cria subitens na lista de definição da página.
div: Este elemento é utilizado para a separação de conteúdo nas páginas, mas uma questão de layout do html5, pois na questão de conteúdo temos as tag semânticas
Exemplo:
No Navegador:
1.6 Elementos de texto semânticos:
a:Quando queremos inserir um hiperlink para uma outra página na web utilizamos o elemento a (define um hiperlink), seguido do atributo href: (define o local para onde o hiperlink leva) e target (define se será aberto em uma nova guia o na atual) com _parent (atual)/_blank (nova).Se a página que você quer fazer o hiperlink abrir é uma das páginas criada por você é interessante que você crie uma estrutura de pastas e dentro desta estrutura você organize suas pastas, subpastas e páginas para ter o maior controle possível. Exemplo de estrutura de pastas:
exemplo07 (pasta raiz)
- índex.html
- exemplo05.html
- exemplo06.html
- ex1e2 (pasta)
- exemplo01.html
- exemplos (pasta)
- exemplo03.html
- exemplo04.html
Os hiperlinks são diferentes para arquivos dentro de outras páginas dentro da raiz se fossemos criar um hiperlink do exemplo03.html para índex.html usaríamos: ../ (sobe um nível de pasta) o link ficaria da seguinte forma na página exemplo03.html:
Exemplo:
No Navegador:
abbr: Este elemento no HTML serve para fazer o significado de uma abreviação aparecer em caixa retangular quando o usuário deixar o cursor do mouse sobre a abreviação.
span: Este elemento agrupa os elementos em um linha no documento HTML este não é visível no navegador.
strong: Este elemento é usado para definir um texto ou frase importante no documento, este deixa em negrito, porem pode ser melhorado com CSS.
em: Este elemento é utilizado para destacar uma parte do texto que enfatiza algo, este deixa em italico, porem pode ser melhorado com CSS também.
br: Este elemento do HTML é utilizado para inserir quebra de linhas e não para separar parágrafos você não precisa fechar esta tag, pois é uma tag vazia.
Exemplo:
No Navegador:
1.7 Conteúdo embutido:
img: Esta tag é um elemento utilizado para inserir imagens na página HTML para utilizar este recurso é necessário 2 atributos: src e alt, com o src você especifica o local da imagem e com o alt você descreve a imagem definições de altura e largura com os elementos height e width. Pode torna a imagem um link inserindo a mesmo dentro do elemento<a>.Exemplo:
No Navegador:
