H
yper
T
ext
M
arkup
L
anguage

Pode ser considerada a ligua mãe ou lingua primordial da WWW.

Função

Tags

Marcações que caracterizam o texto. E modelam o html.

Regras de <tag>

Aparecem entre colchetes angulares < >.

Geralmente uma abrindo e outra fechando, quando a tag é de informação então temos apenas uma. E não são case sensitive.

Estrutura do HTML

Inicialmente declaramos a tag !

DOCTYPE

<!DOCTYPE html>

Convoca um comportamento do navegador para que leia em formato HTML, já que cada um tem sua propia maneira de ler o HTML.

<html> e </html> demarca a página web, onde vai todo seu conteudo e parametos;

O HTML possui duas divisões basicas, uma para as configurações da pagina, e a parte do conteudo apresentavel.

Divisões Basicas

head

<head> e </head> Aqui fica todos os ajustes e informações referente a estrutura da pagina.

<meta> é a tag responsavel por passar informações para pagina. como
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> e </title> define o titulo da aba no navegador;


body

Os Elementos entre <body> e </body> é a informação visível na página;

Elementos

Titulos

O texto entre <h1> e </h1> é exibido como cabeçalho;

Cada um h representa um subinivel h1, h2, h3,h4, h5 e h6 do anterior, uma tangente do assunto.

A tag <p> e <p> apresentam o conteudo dos paragrafos.

Divisões do Material ou Grouping Tags

Para uma melhor vusualização e organização do codigo utilizamos a tag <div> com intuito de genericamente dividir o conteudo. A mesma vai ficar em box level.

Também pode ser usado a tag <span>, porém esta é inline level.

Quando as divisões forem para formulario utilize a tag <fieldset>

Conteudo importante

Utilizamos a tag <main> para dar notoriedade a um determinado tipo de conteudo.

header

Demarca o cabecalho.

Section

É um texto genérico ou uma seção.

Article

Uma peça independente do conteudo do documento, como um blog ou jornal.

Aside

Conteudo pouco relacionado.

Figure

conteudo independente, como video e imagem.

Footer

Rodapé , informações sobre direitos autorais.

Listas

Utilizamos a tag <ol> para uma lista ordenada.

E a tag <ul> para uma lista não ordenada.

A tag <li> é utilizada para demarcar o item

Navegação

Utilizamos a tag <nav> para uma lista de navegação.

Tabelas

Utilizamos a tag <table> dentro da mesma o border realizara as bordas e o bgcolor a cor de fundo.

A tag <thead> indica a linha do cabeçario

A tag <th> indica o titulo da coluna

A tag <tbody> indica o corpo da tabela

A tag <tr> indica a linha

E a tag <td> para indicar as celulas.

Campo de texto

A tag <input> indica onde o usuario deve inserir os dados. Geralmente vem em <form>

<input type="text" nome = 'primeiro'>

Input

Area para inserção de dados e interação com usuario.
Ulitlize a tag <input>

Como esta?

É importante que os inputs tenham o mesmo name assim, não podemos selecionar os dois.

Que periodo é agora?

Etiqueta

A tag <label> cria um rotulo para o ponto de seleção.

É possivel localizar a seleção através do getElementsByName 'name'['local'].checked

Legenda

A tag <legend> é exelente para nomear enunciados de input.

Formulario

O formulario é a area declarada para recolhimento de inputs.

Utilize a tag <form>

Utilize o site Mobile input types para adequar melhor a tela de celular

Obrigatorio

Para exigir o input respecifique na tag a palavra reservada required.

Marcado

A tag inpult deve conter a paralavra reservada checked para que a pagina carregue previamente selecionada.

Links

Utilizando a tag <a>

Para link externo use <a href="http://exemplo.ai" target = "blank"></a>

<iframe>

Abre uma especie de janela para conteudos externos como maps

O youtube tambem trabalha com iframe

(tags)