Please enable JavaScript.
Coggle requires JavaScript to display documents.
Semantica das TAGs (HTML) (Principais Tags (Tags para formatacao de um…
Semantica das TAGs (HTML)
Instrucao DOCTYPE
Informa ao navegador o tipo de documento "html" (1,2,3..)
Se colocar <!DOCTYPE html> ele entende que é o 5!
Obs: Nao é TAG!!! é instrucao.
Tem que ser A PRIMEIRA LINHA (Nao pode ter espaco)
Tag HTML
Pai das tags HEAD e BODY
Pode conter um atributo para definir a linguagem da pagina. Ex: <html lang = ""en"> ou <html lang = ""pt">
Recomenda-se que toda tag seja filha dela (Ela é a tag raiz)
HEAD (Cabeca)
O title, aparece no cabecalho (na guia do navegador)
O corpo dessa tela nao sao exibidos no corpo do navegador
PQ sao METADADOS, nao sao dados exibidos.
Exemplos de metadados:
Quais SCIPTS vao ser executados unto com essa pagina)
Recursos externos - Definir
Estilos (Vai ser falado em css)
Charset (Codificacao de caracteres da pagina). Ex: UTF-8
Titulo
Filhos de Head
<Base> Especifica um endereco base para as URLs do documento
<Link> especifica um link entre um documento e uma fonte externa
<Style> Especifica informacoes de estilo do Documento HTML
<meta> Especifica metadados sobre o proprio Documento HTML
Title
Especifica um script client-side, i.e um codigo (Ex: Javascript)
<noscript> Especifica um conteudo alternativo para o NAO-uso de script
Tag BODY
Suas tags filhas podem ser centenas de tipo
Ex: Texto, rotulos, formularios, botoes. links, imagens, videos, linha, tabela, listas ordenadas, listas desordenadas,...
É o conteudo da pagina! O que aparece no corpo do navegador
HYML 5 contem 120 tags
Cada tag define:
Atributos que a tag pode ter
Valores possiveis para os atributos (texto, numero...)
Estrutura Obrigatoria da Tag
Tipos de filhos que a tag pode ter
Principais Tags
Tag <a>. Essa tag que cria hyperlinks (ou hypertextos) para outras paginas OU ancoras para mesma pagina.
Ancora é aquela parada de levar para outro ponto da mesma pagina..(Que nem no wikipedia). Para ancora, usa #id_da_ancora. Ai coloca id= "id_da_ancora"
Para endereco externo, usa URL
Atributos (Gravar)
href (hyperlink reference). Pode ser URL ou #ancora
Independente de qual for, vai ter um texto. O conteudo da tag a é o que vai estar encaminhando para o endereco definido no href
Titulo
<h1> <h2> <h3> <h4> <h5> e <h6>. h1 é o titulo principal e h6 é o menor titulo. Nao é so questao de tamanho, questao tbm de semantica. (Titulo, subtitulo, subsubtiulo...)
<img> usada para incluir imagem
atributos
alt: nome "substituto" da imagem - Serve para pessoas com deficiencia visual, pois o leitor do html para o deficiente fala o que ta escrito em alt.
Width(Largura) e height(altura)
src: endereco para a imagem
Tags para formatacao de um texto
<strong> coloca em negrito
<p > é usado para criar paragrafos! o html nao entende espacoes em branco. (PENSAR QUE ENVOLVE SEMANTICA! Eu crio um paragrafo..)
Outra alternativa para pargrafo: <br> - Quebra uma linha. (MAS NAO TEM SEMANTICA) Simplesmente volta sem dar espacamento de paragrafo
<q> - Usado para fazer citacao. No texto, apararece aspas. Ex; <q> Amo HTML5 </q> aparece no texto: "Amo HTML5"
<em> - Dar enfase na escrita. O texto fica em italico!
<b> = Texto em negrito, <strong> = Texto FORTE, <i> = Texto em Italico (OBS: Visualmenrte, essas duplas sao iguais..mas a SEMANTICA é diferente.
<mark> Texto marcado (que é tipo com a sombrinha), <small> texto pequeno, <del> = texto deletado (Tem a linhazinha)
<small> - Texto fica com letra pequena
<Del> - Texto fica riscado (Deletado)
<sub> - Texto fica subscrito (um pouco abaixo da linha)
<sup> - Texto fica um pouco acima da linha
Obs IMPORTANTE: Usa-se isso porque permite aos leitores de tela enntenderem melhor a intencao do texto
Listas ordenadas (ol) e desordenadas (ul)
Na ordenada vai ta 1. 2. 3.
<ol> ...... <li> Alguma coisa </li> <li> outra coisa </li> </ol> Vai aparecer: 1. Alguma coisa 2. Outra coisa
Na desordenada vai ta so as bolinhas marcando
<ul> ...... <li> Alguma coisa </li> <li> outra coisa </li> </ul> Vai aparecer: o Alguma coisa o Outra coisa