HTML – HyperText Markup Language
Linguagem utilizada para construir as estruturas das páginas, inserimos, imagens, tabelas, links,
etc.
SINTAXE
Trabalha com algumas palavras-chaves conhecidas como TAGS. A sintaxe possui a estrutura
seguinte:
ABERTURA TAG - <h1>
CONTEÚDO - Primeiro Título
FECHAMENTO TAG - </h1>
ESTRUTURA BÁSICA
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Títulodo documento</title>
</head>
<body>
</body>
</html>
METATAGS
As metatagssão tags, localizadas dentro da tag <head>, utilizadas para passar alguma
informação para a tecnologia que irá consumir o conteúdo, por exemplo: a meta tag<meta
charset=“UTF-8” /> informa o navegador (tecnologia) qual é o tipo de caracteres que ele deve
exibir.
Existem outras tecnologias além do navegador que consegue entender documentos HTML, é o
caso dos robôs (crawlers), a ferramenta de busca do Google é um crawler, que sabe lê o HTML
de um site e a partir disso categorizar o conteúdo para quando uma pesquisa for feita poder
exibir o site no resultado das buscas.
Quando copiamos o link de um site e compartilhamos no Facebook, ali também temos um
crawler, alias, o título exibido no Facebook pode ser diferente do título atribuído na tag <title>,
para isso utilizamos a metatag: <meta property="og:title“ content=“Títulopara o Facebook" />
TEXTOS
Os textos são inseridos dentro da TAG body. As tags que são utilizadas para textos são <h1> ao
<h6> que são os títulos inseridos na página sendo <h1> O maior título e o <h6> o menor título.
Temos também outras tags que são bastante utilizadas:
<span>: não fornece nenhuma estilização, mas é útil para quando temos que estilizar um
pedaço de texto;
<p>: utilizada para construir parágrafos;
Exemplo:
CONTAINERS
No HTML possuímos algumas tagsque tem a função de conter outras tags, como se fossem
caixas, antes do HTML5 o único container que tínhamos era a tag<div>, funciona bem, porém
tínhamos um problema de semântica, não tinha como distinguir o cabeçalho de um site com o
rodapé, a não ser de maneira visual
Com o HTML5 tivemos a adição das tags:
<header>: utilizada para criar um cabeçalho;
<footer>: utilizada para criar um rodapé;
<main>: utilizada para conter o conteúdo principal da página;
<aside>: utilizada para construir barras laterais;
<section>:utilizada para dividir o conteúdo em seções;
LISTAS
No HTML é possível criar dois tipos de listas:
- Listas ordenas
- Listas não ordenadas
Criamos as listas através da TAG <ol> caso a lista seja ordenada e a TAG <ul> e caso seja não
ordenada. Na sequências utilizamos a TAG <li> para colocar cada item da lista.
Tabelas
Para criação de tabelas utilizamos o containers <table>
<thead>: utilizada para construir o cabeçalho da tabela;
<tbody>: utilizada para construir o corpo, conteúdo, da tabela;
<tfoot>: utilizada para construir o rodapé da tabela;
<tr>: utilizada para construir uma linha na tabela;
<td>: utilizada para construir uma coluna na tabela;
<th>: utilizada para construir uma coluna no cabeçalho da tabela;
<caption>: utilizada para inserir uma legenda para a tabela;
Aqui na tag utilizamos o atributo colspan para fazer com que a coluna ocupasse o espaço de
duas colunas para que o layout da tabela não fosse desalinhado
Formulários
A criação de formulários é feita através do uso da TAG <form>
<form>: é o container do formulário. Todos os campos e botões deverão estar dentro desta
tag;
Na TAG <form> podemos definir o método que será enviado as informações do formulário
através do atributo method, esse atributo possui duas formas de envio POST e GET. POST as
informações enviadas estarão ocultas ao usuário, já no método GET essas informações são
visíveis. A escolha ente os métodos dependem do que está sendo aplicado no back-end.
Também temos o atributo action endereço para criar uma aquisição, se ele estiver no mesmo
domínio só é preciso colocar o endereço final, se estiver em outro devemos colocar o endereço
completo
<input>: usada para inserir um campo;
<select>: utilizada para criar uma lista de opções, uma caixa de seleção;
<button>: usada para inserir botões.
Tipos de campo- TAG <input>
Possuímos um atributo chamado type que pode receber valores:
1) text: para campos de texto;
2) email: para campos que receberão um e-mail;
3) tel: para campos que irão receber um número de telefone;
4) file: para campos que serão utilizados para anexar um arquivo;
5) color: para campos que receberão uma cor;
6) checkbox: para criar caixas de marcação;
7) radio: para criar campos de opção.
8) number: permite acrescentar números positivos e negativos
Validações
Podemos informar ao navegador que um campo é obrigatório utilizando o atributo
required=“true”, ou apenas adicionarmos o atributo required. Além disso, quando utilizamos o
typecorreto para o input, o próprio navegador aplica uma validação, caso digitemos um valor
incorreto para um campo de email, o navegador irá retornar uma mensagem nos alertando
Inserir mídias
Podemos dentro do HTML trabalhar com a inserção de mídias através das seguintes TAGs
<video>: utilizada para inserir um vídeo na página.
<audio>: utilizada para inserir um áudio na página.
<img>: utilizada para inserir uma imagem na página.
Áudio e vídeo
As tags de áudio e vídeo possuem uma configuração/estrutura semelhante:
<audio controls>
<source src=“arquivo.mp3” type=“audio/mpeg” />
</audio>
<video controls autoplay>
<source src=“video.mp4” type=“video/mp4” />
</video>
Com o atributo controls habilitamos os botões para controlar a mídia, como o volume, play,
pause, avançar e retroceder. Com o atributo autoplay o arquivo será executado assim que for
carregado, sem o usuário executar alguma ação
No atributo type da tag source informamos o media type do arquivo, são eles:
Para áudio: audio/mpeg (.MP3), audio/ogg (.OGG) e audio/wav (.WAV).
Para vídeo: video/mp4 (.MP4), video/webm (.WebM) e video/ogg (OGG).
Imagem
Para inserir uma imagem utilizamos a tag <img>. Utilizamos o atributo src para informar o
caminho da imagem e o atributo alt para informar um texto que será exibido caso a imagem
não carregue, esse texto também será utilizado por leitores de tela, por isso a importância de
descrever a imagem por motivos de acessibilidade.
Quando trabalhamos com imagem é possível ocorrer de embaixo da imagem ter um legenda,
quando necessitamos vincular uma imagem a legenda utilizamos o contêiner <figure> e dentro
dele colocamos a imagem com a TAG <img> e a legenda utilizando a TAG <figcaption>
Hierarquia de pastas
Quando trabalhamos com imagens e links as vezes precisamos acessar algum arquivo e pagina
dentro do nosso próprio diretório, para isso usamos uma referência de hierarquia de pastas.
Quando estamos na própria pasta utilizamos: ./nome, /nome ou digitamos o caminho
completo
Quando o arquivo ou página está um nível acima do que estamos trabalhando usamos:
../nome ou digitamos o caminho completo
DOCUMENTAÇÃO
<!DOCTYPE html>: Informa ao navegador o tipo de documento que está recebendo
<html lang="pt-BR">: Abertura do HTML e o atributo lang que informa o tipo de linguagem
que será utilizada
<head>: Informamos dados que serão interpretados pelo navegador, mas não serão exibidos
na página
<meta charset="UTF-8">: Inserido dentro da TAG Head, tem a função de passar ao navegador
qual os tipos de caracteres deverão ser exibidos
<title>: Título que será exibido pelo navegador, ela também é inserida dentro da TAG Head
<body>: Tag responsável por todo o conteúdo da página que será exibido pelo navegador
TEXTOS
<h1> <h2> <h3> <h4> <h5> <h6>: tags de título do maior ao menor
<span>: não fornece nenhuma estilização, mas é útil para quando temos que estilizar um
pedaço de texto;
<p>: utilizada para construir parágrafos;
<b>: utilizada para aplicar negrito a um texto;
<i>: utilizada para aplicar itálico a um texto;
<mark>: utilizada para destacar um texto, como um marca-texto.
<a>: utilizada para construir links, informamos para qual endereço o usuário será levado
através do atributo href;
Atributo:
href redireciona para o caminho colocado nele, para sites externos, dentro da própria
página, para aplicativos de emails e ligações
title mostra uma caixa de texto acima do texto colocado entre a TAG <a> ancora
<em>: utilizada para enfatizar um texto, também aplica o itálico;
<strong>: utilizada para informar que um texto é importante, também aplica o negrito;
<del>: utilizada para informar que um texto foi deletado, aplica o tachadono texto;
<small>: utilizada para criar um texto com fonte menor;
<blockquote>: utilizada para inserir uma citação, aplica um margem no conteúdo;
<address>: utilizada para inserir um endereço, também aplica o itálico;
CONTAINERS
<div>: ainda utilizada como container, antigamente só existia ela como container a partir do
html5 que o containers passam a ser separados de forma semântica;
<header>: utilizada para criar um cabeçalho;
<footer>: utilizada para criar um rodapé;
<main>: utilizada para conter o conteúdo principal da página;
<aside>: utilizada para construir barras laterais;
<section>:utilizada para dividir o conteúdo em seções;
<article>: utilizada para criar artigos, posts;
<nav>: utilizada para criar menus de navegação
LISTAS
<ol>: criação das listas ordenadas
<ul>: criação das listas não ordenadas
<li>: itens da lista
TABELAS
<table>: criação das tabelas;
<thead>: utilizada para construir o cabeçalho da tabela;
<tbody>: utilizada para construir o corpo, conteúdo, da tabela;
<tfoot>: utilizada para construir o rodapé da tabela;
<tr>: utilizada para construir uma linha na tabela;
<td>: utilizada para construir uma coluna na tabela;
Atributo colspan=”2” – Ocupa o espaço de 2 colunas
<th>: utilizada para construir uma coluna no cabeçalho da tabela;
<caption>: utilizada para inserir uma legenda para a tabela;
FORMULÁRIOS
<form>: é o container do formulário. Todos os campos e botões deverão estar dentro desta
tag;
<input>: usada para inserir um campo;
Atributos
Type podemos utilizar outros atributos como for e id (utilizados para fazer uma relação entre o
campo e a tag <lable> , placeholder (mensagem que aparece dentro do campo)
Type radio devemos utilizar junto o atributo name para o navegador identificar que os inputs
fazem parte de uma mesma escolha então preenchemos com único nome, assim só poderá ser
escolhida uma opção. Podemos utilizar junto desse tipo de input o atributo checked ao utilizar
esse atributo a primeira opção já é apresentada marcada para o usuário.
Type checkbox é semelhante ao radio mas ao colocar o atributo name igual a vários inputs do
tipo checkbox ele irá permitir selecionar mais de uma opção, o radio já não permite fazer isso
ao menos que os nomes do atributo name sejam diferentes.
Type Number podemos utilizar outros atributos juntos como Max, Min e Step
<select>: utilizada para criar uma lista de opções, uma caixa de seleção; Temos atributo
multiple que permite selecionar mais de uma opção. Dentro do container select colocamos a
tag <option> com as opções que estarão disponíveis
<button>: usada para inserir botões;
INSERÇÃO DE MÍDIAS
<video>: utilizada para inserir um vídeo na página.
<audio>: utilizada para inserir um áudio na página.
<img>: utilizada para inserir uma imagem na página.
<figure>: contêiner utilizada para guardar o conteúdo da imagem e a legenda que pertence a
imagem
<figcaption>: tag utilizada para legenda de imagens, utilizamos quando usamos o contêiner
<figure>