INTRODUÇÃO
A palavra HTML é uma sigla que significa HyperText Markup Language, que traduzindo fica Linguagem de Marcação de Hipertexto.
A forma coreta de se referir é A HTML, no feminino. Porque ela é A Linguagem de Marcação de Hipertexto.
- A HTML é um linguagem de marcação de hipertexto;
- Focado em conteúdo: texto, imagens, videos, tabelas;
- Utilizado para páginas Web e;
- Não é uma linguagem de programação.
Exemplo de um documento em HTML simples:
<!DOCTYPE html>
<html>
<head>
<title> Nome da Página </title>
</head>
<body>
<h1> Título </h1>
<p> Parágrafo </p>
</body>
</html>
Exemplo de partes da estrutura:
- <!DOCTYPE html> - é uma declaração que representa o tipo de documento, que esta sendo escrito, é um documento HTML5. Aparece apenas uma vez, no topo da página;
- <html> - é o elemento que contém a estrutura da pagina;
- <head> - é o elemento que contém os metadados (configurações) do site;
- <title> - é o elemento que informa o título para da pagina (o título é exibido na barra de título do navegador ou na aba da página);
- <body> - é o elemento que mostrará todo o conteúdo do site;
- <h1> - é o elemento que informa o grau de título e;
- <p> - é o elemento que define o parágrafo.
Exemplo de como é a estrutura de uma página:
<!DOCTYPE html>
<html>
<head>
<title> Meu Site </title>
</head>
<boby>
<h1> Primeiro Site </h1>
<p> Olá, Mundo! </p>
</body>
</html>
Exemplo de como a pagina será exibido:
ELEMENTOS
O elemento é definido por uma tag de abertura, algum conteúdo e uma tag de fechamento. Exemplos:
<TagAbertura> conteúdo </TagFechamento>
<p> Exemplo de parágrafo </p>
<a href= "url"> Exemplo de link </a>
- Elemento - é tudo que esta entre a tag de abertura e a tag de fechamento;
- Tag: é o nome do elemento, exemplos:
- Abertura da tag - <p>, <a>;
- Fechamento de tag - </p>, </a>.
- Atributo - Os atributos são usados para fornecer informações adicionais sobre o elemento HTML:
- href.
- Valor - é atribuido ao atributo:
- "link.html".
- Conteúdo - o que aparece entre a tag de abertura e a de fechamento:
- Exemplo de parágrafo;
- Exemplo de link.
TAGS
ATRIBUTOS
- Os atributos fornecem informações adicionais nos elementos;
- Todos os elementos podem ter atributos;
- Os atributos são sempre especificados na tag de abertura e vem descrito como atributo="valor".
Exemplos de atributos:
<tagname atributo="valor"> conteúdo </tagname>
<a href="https://www.bibliotecadasalmas.com/"> Biblioteca Das Almas </a>
<img src="https://www.bibliotecadasalmas.com/foto.png">
<img src="foto.png" width="250" height="300">
<img src="foto.pnj" alt="Um castelo feito de livros">
<p style="color:blue;">Exemplo de cor em letra.</p>
<html lang="pt-br">
<p title="Eu sou o Batman">Meu nome é Bruce Wayne</p>
- href - informa a URL da página para qual o link será direcionada;
- src (source = origem) - informa o caminho para a imagem a ser apresentado;
- height e width - são atributos que especificam a altura e a largura da imagem (em pixels - padrão);
- alt - esse atributo especifica um texto alternativo para uma imagem, caso a imagem não possa ser exibido por algum motivo. Internet lenta, erro no carregamento da imagem, etc;
- style - é utilizado para adicionar estilos a um elemento, como cor, fonte, tamanho e outros;
- lang - ao incluir esse atributo dentro da tag <html>, declara o idioma da página da web, fassilitando assim os mecanismo de busca e os navegadores;
- title - fornece informações adicionais sobre um elemento, geralmente exibidas como um tooltip (dica) quando o usuário passa o mouse sobre ele, melhorando a usabilidade ao dar contexto (como descrição de imagem, autor de citação, etc.).
Observações:
- A tag HTML não diferenciam de maiúscula e minúscula: <p> = <P>. Mas é orientado que se use a tag minúscula por fim de padão do documento;
- Não é obrigatorio mas é indicado que os valores devem esta com aspas ("");
- Alguns elementos não possue conteúdo e tag de fechamento - exemplo <br> ou <hr>-, Esses elementos são chamados de elementos vazios;
- Mesmo não escrevendo o 'fechamento de tag', alguns elementos ainda serão exibidos corretamente, entretanto, nunca confie que nunca ocorrerá erros inesperados.
VALORES
ELEMENTOS ANINHADOS
São elementos aninhados aqueles que contem elementos dentro de sí. Todos os documentos da HTML são compostos por elementos aninhados.
O exemplo a seguir contém quatro elementos aninhados na HTML:
- <html> → <body> → <h1> → <p>
NAVEGADORS
O navegador (Chrome, Edge, Firefox, Safari) tem por objetivo ler o documento HTML e exibir as suas informações na tela.
HEADING (TÍTULOS) - <h1>
São títulos ou subtítulos que se deseja exibir na página.
O título da HTML são definidos da tag <h1> a <h6>. Sendo que o <h1> é mais importante que a tag <h6>.
<h1> Título da página </h1>
<h2> Título das seções </h2>
<h3> Subseções </h3>
...
<h6> Título 6 </h6>
Observações:
- Utilize apenas uma <h1> por página - ela representa o tópico principal ou o título;
- Use a tag títulos apenas para títulos. Não use a tag títulos para deixar o texto GRANDE ou em negrito .
PARAGRAPHS (PARÁGRAFOS) - <p>
Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto. O parágrafo é definido pela tag <p>.
<p> Exemplo de parágrafo </p>
<p> Este é outro exemplo de parágrafo </p>
HORIZONTAL RULES (REGRAS HORIZONTAIS) - <hr>
A tag <hr> define uma quebra temática em uma página HTML e geralmente é exibida como uma linha horizontal.
<h1> Título aqui <h1>
<p> Paragrafo aqui e linha em baixo <p>
<hr>
LINE BREAKS - <br>
Utilizado quando se deseja quebrar a linha (uma nova linha) sem iniciar um novo parágrafo.
<h1> Título aqui <h1>
<p> Paragrafo aqui e quebra linha em baixo <br>
E continua aqui o mesmo paragrafo.<p>
TEXTO PRÉ-FORMATADO - <pre>
O elemento define um texto pré-formatado texto dentro de uma tag <pre>, é exibido em uma fonte de largura fixa (geralmente Courier) e preserva tanto os espaços quanto as quebras de linha:
<pre>
[...] Lua minguante, lua crescente
Declaro ser o seu mais lindo amante
Com você eu quero me casar
Fazer da noite escura o nosso altar [...]
</pre>
STYLE (estilo)
É um atributo utilizado para adicionar estilos a um elemento, como cor, fonte, tamanho e outros.
HTML não possui mecanismos para estados visuais.
O HTML descreve estrutura e significado, então quem cuida dos estados (link visitado, ativo, hover) é as CSS.
<tagname style="propriedade:valor;">
<p style="color:blue;">Exemplo de cor em letra.</p>
PROPRIEDADES
<p style="background-color:powderblue;">Cor de fundo</p>
<p style="color:blue;">Cor de texto</p>
<p style="font-family:verdana;">Fonte de letra</p>
<p style="font-size:300%;">Tamanho de letras</p>
<p style="text-align:center;">Linhamento de texto</p>
<p style="border:2px solid Tomato;">Texto com borda</p>
- background-color - para cor de fundo
- color - para cor de texto
- font-family - para fonte de texto
- font-size - para tamanho de texto
- text-align - para alinhamento de texto;
- border - define a borda.
As cores são especificadas com nomes de cores predefinidos ou com valores RGB, HEX, HSL, RGBA ou HSLA.
<p style="background-color:rgb(255, 99, 71);">Exemplo</p>
<p style="background-color:rgba(255, 99, 71, 0.5);">Exemplo</p>
<p style="background-color:#ff6347;">Exemplo</p>
<p style="background-color:hsl(9, 100%, 64%);">Exemplo</p>
<p style="background-color:hsla(9, 100%, 64%, 0.5);">Exemplo</p>
A propriedade e o valor são diretrizes das CSS.
É aconselhavel que não se utilize estilo na HTML e sim nas CSS. Conteúdo mais detalhado na página CSS-cores
FORMAS DE ADICIONAR AS CSS
Existe três modos de adicionar as CSS no documento:
- Inline - é um estilo que é aplicado exclusivamente em um único elemento;
<p style="color: blue; font-size: 16px;">Exemplo de cor em letra.</p>
- Interno - é um estilo definido dentro do elemento <head>;
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
font-size: 16px;
}
</style>
<title> Nome da Página </title>
</head>
<body>
<h1> Título </h1>
<p> Parágrafo </p>
</body>
</html>
- Externo - a estilização é realizado em outro documento CSS.
Observação:
- Para mais detalhes, principamente do externo, oriento que visite a aula CSS-Style
CORES NO LINK
Um link HTML é exibido em uma cor diferente dependendo se ele foi visitado, não foi visitado ou está ativo.
Por padrão, um link aparecerá assim (em todos os navegadores):
- Um link não visitado é sublinhado e azul.
- Um link visitado é sublinhado e fica roxo.
- Um link ativo é sublinhado e vermelho.
ESTILO NO ELEMENTO <head>
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
<title> Nome da Página </title>
</head>
<body>
<a href="URL"> Conteúdo </a>
</body>
</html>
- link - link não visitado será verde, sem sublinhado;
- visited - link visitado será rosa, sem sublinhado;
- hover - ao passar o cursor sobre um link, ele ficará vermelho e sublinhado;
- active - link ativo será amarelo e sublinhado.
Observação:
- Estados de um link (:link, :visited, :hover, :active) só podem ser estilizados com as CSS em blocos interno (<style>) ou externos. O atributo style="" não tem capacidade semântica ou técnica para lidar com pseudo-classes. Portanto, estilização inline de estados de link é impossível.”
FORMATAÇÃO DE TEXTO
Elementos variados que conferem sentido e função específica ao conteúdo. Alguns alteram apenas o significado semântico, enquanto outros também modificam o aspecto visual.
<p>Esta <b>palavra</b> esta em negrito.</p>
<p>Esta <strong>palavra</strong> é importante!</p>
<p>Esta <i>palavra</i> é estranha.</p>
<p>Esta <em>palavra</em> é muito importante.</p>
<p>Esta <small>palavra</small> esta pequena.</p>
<p>Esta <mark>palavra</mark> esta marcada.</p>
<p>Esta palavra <del>não</del> é a minha favorita.</p>
<p>Esta <ins>palavra</ins> não existia antes.</p>
<p>A fórmula H<sub>2</sub>O.</p>
<p>O fórmula x<sup>20</sup>+3.</p>
- < b > - Texto em negrito - define texto em negrito, sem qualquer importância adicional;
- < strong > - Texto importante - define um texto de alta importância. O conteúdo dentro dele geralmente é exibido em negrito;
- < i > - Texto em itálico - é frequentemente usada para indicar um termo técnico, uma frase de outro idioma, um pensamento, etc;
- < em > - Texto enfatizado - o leitor de tela pronunciará as palavras com ênfase, usando a acentuação verbal. O conteúdo dentro dele é normalmente exibido em itálico;
- < small > - Texto menor - define um texto menor;
- < mark > - Texto marcado - define o texto que deve ser marcado ou destacado, como um marca texto;
- < del > - Texto excluído - define o texto que foi excluído de um documento. Os navegadores geralmente riscam o texto para indicar que ele deve ser lido, mas não considerado;
- < ins > - Texto inserido - define um texto que foi inserido em um documento. Marca um texto como inserido para dar ênfase e indicar que foi adicionado depois;
- < sub > - Texto em subscrito - o texto subscrito aparece caractere abaixo da linha normal e, às vezes, é renderizado em uma fonte menor. O texto subscrito pode ser usado para fórmulas químicas;
- < sup > - Texto sobrescrito - o texto sobrescrito aparece meio caractere acima da linha normal e, às vezes, é renderizado em uma fonte menor. O texto sobrescrito pode ser usado para notas de rodapé, exponenciação de um calculo.
COMENTARIO - <!-- ... --->
Os comentários não são exibidos no navegador mas podem ajudar a documentar o código-fonte. Serve para adicionar comentários e ocultar conteúdo.
<!--Comentario escrito aqui não aparece no navegador--->
<h1> Título </h1>
IMAGES (IMAGENS) - <img>
Tecnicamente, as imagens não são inseridas em uma página da web; elas são vinculadas a página da web. A tag <img> cria um espaço reservado para a imagem que será referenciada.
<img src="link externo/interno">
Exemplo do elemento no mesmo servido de hospedagem:
<img src="foto.png" alt="descrição">
Exemplo do elemento em outra pasta:
<img src="/images/icone.png" alt="descriçaõ">
Exemplo do elemento em outro servidor/site:
<img src="https://www.bibliotecadasalmas.com/" alt="descrição">
- src (source = origem) - o atributo obrigatório especifica o caminho (URL) para a imagem;
- alt - Especifica um texto alternativo para a imagem. O atributo obrigatório fornece um texto alternativo para uma imagem, caso o usuário, por algum motivo, não consiga visualizá-la (devido a uma conexão lenta, um erro no atributo src ou se o usuário utiliza um leitor de tela).
Observações:
- Quando uma página da web é carregada, é o navegador que, naquele momento, obtém a imagem de um servidor web e a insere na página. Portanto, certifique-se de que a imagem permaneça exatamente no mesmo lugar em relação à página web; caso contrário, seus visitantes verão um ícone de link quebrado. O ícone de link quebrado e o atributo alt, texto, são exibidos quando o navegador não consegue encontrar a imagem;
- Tome cuido pois as imagens externas podem estar protegidas por direitos autorais. Se você não obtiver permissão para usá-las, poderá estar infringindo as leis de direitos autorais. Além disso, você não tem controle sobre imagens externas, elas podem ser removidas ou alteradas repentinamente;
- O HTML permite GIFs animados;
- Carregar imagens grandes leva tempo e pode tornar sua página da web mais lenta.
TAMANHO DA IMAGEM
<img src="link" alt="descrição" width="250" style="width:42px;">
<img src="link" alt="descrição" width="250" height="300" style="width:42px;height:42px;">
USAR IMAGEM COMO LINK
Para usar uma imagem como link, basta colocar a tag <img> dentro da tag <a>:
<a href="URL do link"><img src="URL da imagem" alt="descrição" width:"50" height:"50"></a>
IMAGEM DE UM LADO E TEXTO DO OUTRO LADO
Utilize a propriedade das CSS float para permitir que a imagem flutue à direita ou à esquerda de um texto:
<p><img src="link" alt="descrição" style="float:left;width:42px;height:42px;"> A imagem irá flutuar à esquerda do texto. </p>
<p><img src="link" alt="descrição" style="float:right;width:42px;height:42px;"> A imagem irá flutuar à direita do texto. </p>
FORMATOS DE IMAGENS
Esses são os tipos mais comuns de imagens que são aceitas pelos navegadores (Chrome, Edge, Firefox, Safari, Opera):
| ABREVIAÇÃO | FORMATO DO ARQUIVO | EXTENSÃO DE ARQUIVO |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
ÁREAS DA IMAGEM CLICÁVEIS
A tag <map> define um mapa de imagem. Um mapa de imagem é uma imagem com áreas clicáveis. As áreas são definidas com uma ou mais tags <area>.