Curso Básico de HTML

Anotações do Curso Básico de HTML, extraídas do site W3Schools.

Este é um arquivo de estudos para fixação dos conceitos e aprendizado com exemplos e modelos de código de linguagem HTML. A maior parte das informações nesta página foram obtidas em https://w3schools.com, porém outras fontes podem ter sido consultadas.

Introdução ao HTML

HTML é uma linguagem de marcação padrão para a criação de páginas Web. Com HTML você pode criar o seu próprio site. HTML é fácil de aprender e você vai gostar!

• HTML é a abreviatura de Hyper Text Markup Language.
• HTML é a linguagem de marcação padrão para a criação de páginas web.
• HTML é um arquivo que descreve a estrutura e o conteúdo de uma página web.
• HTML consiste em uma série de elementos.
• Os elementos HTML informam ao navegador o conteúdo e como ele deve ser exibido.
• Os elementos HTML rotulam pedaços do conteúdo tais como: título, parágrafo, link, imagem, tabela, lista, etc.

Exemplos de Elementos HTML:

[!DOCUTYPE html] é a declaração que define o documento no formato HTML5.

[html] é o elemento principal, a "raiz" de uma página HTML.

[head] é o elemento que contém "meta" informações da página HTML.

[title] é o elemento que define o título da página HTML. Este título aparece na barra de título (ou nas abas) do navegador. Também serve como destaque para buscas pelo google.

[body] é o elemento que define o corpo da página, é o recipiente que contém toda a parte visível da página que aparece na janela dos navegadores web, tais como títulos, parágrafos, imagens, links, listas, tabelas, etc.

[h1] é o elemento que define o título de maior tamanho e maior importância no documento.

[p] é o elemento que define um parágrafo.

O que é um Elemento HTML?

Um elemento HTML é definido por uma tag de abertura, o conteúdo visível e uma tag de fechamento.

[nome da tag]Conteúdo[/nome da tag]

Alguns elementos HTML não possuem conteúdo, como o elemento [br]. Esses são chamados de elementos vazios e não precisam ter uma tag de fechamento.

Navegadores Web

O objetivo dos navegadores web, tais como Firefox, Edge, Chrome, Opera e Safari, é ler documentos HTML e exibi-los corretamente nas telas dos dispositivos.

O navegador não mostra as tags HTML, mas usa as marcações para exibir corretamente o conteúdo de cada elemento.

Subtítulo [h2]: Título de Segundo Nível

Mais um pouco de texto no artigo,/
em seção de segundo nível com duas/
quebras de linha e fonte alterada para Courier com tamanho de letra 1.0em.

Link Absoluto

Com a página abrindo em uma nova janela do navegador. [h3]

CLIQUE AQUI: Superlivros

Link Relativo

Revisão de Texto

Inserção de Imagem

Qualquer imagem inserida na página pode ser um link.

Texto Pré-Formatado [pre]

Para Poemas ou Textos Formatados

A fonte foi alterada para Cursiva apenas neste bloco, utilizando uma classe CSS chamada [.pre-poema] (apenas na seção style desta página no topo do arquivo HTML) e que também controla a borda e a cor do fundo da página.

      O Fim da Primavera

   Chuva
     chovendo:
       são lágrimas caindo do céu.
   É o amor
     caindo
      caindo
          caindo...
   No final da primavera.

   (Veronika Cristina)
      

Citações

Elementos HTML usados para citações:
[blockquote], [q], [abbr], [address], [cite] e [bdo].

Elemento [blockquote] para Citações de Fontes Externas

Uma citação extraída do site Wikipedia:

Augusto dos Anjos é conhecido como um dos poetas mais críticos do seu tempo, focando suas críticas ao idealismo egocentrista que se emergia em sua época, e até hoje sua obra é admirada tanto por leigos quanto por críticos literários.

Elemento [q] para Pequenas Citações Inline

O Clube dos Escritores Superlivros tem como principal objetivo, orientar os escritores independentes na publicação de livros de sucesso.

Elemento [abbr] para Abreviações e Siglas

O CBE foi criado com o objetivo de oferecer para os escritores independentes uma plataforma de publicação que fornece toda a assessoria necessária para a publicação, divulgação e venda de livros.

Elemento [address] para Informações de Contato

Superlivros Editora
Rua Said Saad, 217 - Vila Amália
São Paulo - SP - CEP: 02618-250
Fone: (11) 3569-9194 / Whatsapp: (11) 99684-9718

Elemento [cite] para Título de Trabalhos Artísticos

"Sempre foi pelo Ouro" é um livro do escritor Gomez Carrera, publicado em 2023 pela Editora Superlivros.

Elemento [bdo] para Inversão da Direção de Texto

Com este elemento, o texto pode fluir na tela do dispositivo da esquerda para a direita [dir="ltr"] ou ao contrário, da direita para a esquerda [dir="rtl"].

Texto da Esquerda para a Direita.

Texto da Direita para a Esquerda.

Comentários no Código HTML

O elemento comentário serve para inserir comentários dentro do código HTML que não aparecem na página do navegador.

Pode ser usado para inserir um comentário dentro do código, para esconder um trecho do código temporariamente, como um parágrafo. Ou também para esconder uma seção inteira de código, ou até mesmo ser usado inline para ocultar um pequeno trecho de texto dentro de um parágrafo.

A tag a ser usada é [!-- ... ... --]

Cores em HTML

As cores em uma página HTML podem ser definidas de diversas formas: por cores com nomes pré-definidos, que são no total 140 cores, ou pelos padrões RGB, HEX, HSL e RGBA ou HSLA, sendo que as duas últimas incluem um canal ALPHA de transparência.

Cores HTML por Nomes Padronizados

Ao todo, são 140 cores definidas por seus nomes, tais como: tomato, orange, gray, slateblue, violet, dodgerblue, lightgray, MediumSeaGreen, etc. No exemplo abaixo, são utilizadas como plano de fundo do elemento [p].

Cores de Texto HTML

Entretítulo [h4] Colorido com cor Tomato.

Parágrafo com letras azuis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Parágrafo com letras verdes. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Bordas Simples ou Coloridas em Elementos HTML

Os elementos HTML podem ter bordas cheias, tracejadas, pontilhadas, duplas, etc. Elas podem ter o estilo, a espessura e a cor definidos por atributos CSS.

Parágrafo com borda cheia, na cor vermelha com 5 pixels de espessura.

Parágrafo com borda pontilhada, na cor azul com 5 pixels de espessura.

Parágrafo com borda tracejada, na cor verde com 5 pixels de espessura.

Parágrafo com borda cheia dupla, na cor preta com 5 pixels de espessura.

Valores para Definir Cores HTML

As cores em uma página HTML podem ser definidas em diferentes padrões. Usando Valores RGB, Valores HEX, Valores HSL ou ainda RGBA e HSLA, sendo que os dois últimos incluem um canal Alpha de transparência.

Nos quatro elementos [div] abaixo, a cor de fundo [background-color] é a mesma nos padrões rgb, hex e hsl. A última foi definida com o nome de Cor HTML padrão.

Cores HTML com Canal Alpha de Transparência: RGBA e HSLA

Os padrões RGB e HSL podem ter o formato com um quarto canal Alpha que define a transparência da cor do elemento.

Nos dois exemplos abaixo, foi aplicada uma transparência de 50% na camada de cor.

CORES HTML nos Padrões RGB e RGBA

Uma cor em formato padrão RGB é formada pela composição da mistura de 3 cores: Red (vermelho) Green (verde) e Blue (azul).

Em uma cor no padrão RGBA, é inserido o valor de um quarto canal Alpha que define o nível de transparência (ou opacidade) da cor numa escala que vai de 0.0 a 1.0 ou seja, de 0% a 100% por cento de opacidade.

Valores RGB para Definição de Cores

Em HTML uma cor RGB deve ser especificada com um valor RGB usando a seguinte fórmula: rgb(red, green, blue).

Cada canal define uma intensidade de cor na mistura que varia de 0 a 255. Isto significa que são possíveis 256x256x256 = 16.777.216 de cores diferentes.

Exemplos de Cores com Padrão RGB

Tons de Cinza no Padrão RGB

No padrão RGB tons de cinza correspondem aos valores dos 3 canais de cor iguais.

Dessa forma, são possíveis 256 variações de tons de cinza diferentes, indo do mais escuro ao mais claro.

Cores com Padrão RGBA (com Canal Alpha de Transparência)

As cores no padrão RGBA possuem um quarto Canal Alpha que define a opacidade da cor.

Uma cor no formato RGBA tem a seguinte notação: rgba(red, green, blue, alpha).

O parâmetro alpha é um número entre 0.00 e 1.00, sendo que 0.00 a cor é totalmente transparente e 1.00 a cor é totalmente opaca.

Cores HTML no Padrão HEX (hexadecimal)

As cores HTML também podem ser definidas no padrão HEX com o formato #RRGGBB, onde RR, GG e BB são valores hexadecimais que especificam os componentes de cada cor.

Valores de Cores HEX:

Uma cor pode ser especificada usando valores hexadecimais da seguinte com a seguinte notação: #rrggbb onde RR, GG e BB são valores hexadecimais entre 00 e ff para os valores de cor que correspondem de 0 a 255 no padrão RGB.

Exemplos de Cores no Padrão HEX

Tons de Cinza no Padrão HEX

No formato HEX, os tons de cinza são formados quando os valores de RR, GG e BB são iguais, como nos exemplos abaixo:

Cores HTML Padrão HSL e HSLA

As cores HTML no padrão HSL são formadas pela combinação de três valores: H (hue = matiz), S (saturation = saturação) e L (lightness = brilho ou luminosidade.

As cores HTML no padrão HSLA adicionam uma quarta camada de cor em um canal Alpha de opacidade (ou transparência).

Cores HSL:

Em HTML as cores também podem ser definidas em um padrão HSL composto por valores de hue (matiz), saturation (saturação) e lightness (luminosidade ou brilho). A marcação tem a seguinte forma:

hsl(hue, saturation, lightness)

Hue é um valor que varia de 0 a 360 em uma roda de cores e que mistura as cores primárias, vermelho R, verde G e azul B. No padrão HSL os valores de hue para 0 corresponde ao vermelho, 120 corresponde ao verde e 240 corresponde ao azul.

Saturation é um valor que varia em percentagem, indo de 0%, que significa um tom de cinza, até 100%, que significa a cor inteira.

Lightness é um valor que também varia em percentagem, indo de 0% que significa totalmente pretos até 100%, totalmente branco.

Exemplos de Cores no Formato HSL

Saturação em Cor HSL

A Saturação pode ser descrita com a INTENSIDADE de uma cor.

100% de Saturação é uma cor pura, sem tonalidade de cinza.

50% de Saturação é uma cor com 50% de cinza, mas a cor ainda pode ser identificada.

0% de Saturação a cor não pode ser identificada e é totalmente cinza.

Exemplos de Variação de Saturação:

No padrão HSL, quanto menor a saturação, menor a intensidade da cor, ela vai se tornando mais cinza até não ser percebida a cor pura.

Luminosidade em Cor HSL

Luminosidade de cor pode ser entendida como a quantidade de luz fornecida sobre uma cor pura.

A luminosidade varia em percentagem, sendo que 0% significa incidência de nenhuma luz sobre a cor (que torna o fundo preto; 50% significa luminosidade equilibrada, ou seja, a cor aparece como pura, sem aumento ou diminuição de luminosidade, sendo que se variar na direção para 0% a cor vai se tornando preta e se variar na direção de 100%, a cor vai se tornando branca.

Exemplo de Variação de Luminosidade:

No padrão HSL, luminosidade 0% corresponde ao preto e de 100% corresponde ao branco.

Tons de Cinza em Cor HSL

No padrão HSL, os tons de cinza são definidos com Matiz 0, Saturação em 0% e apenas a luminosidade variando de 0% a 100%.

Exemplo de Variações de Tons de Cinza com Cores HSL:

Cores HTML no Padrão HSLA

Neste padrão é adicionado uma quarta camada em um canal Alpha que define a transparência da cor.

Uma cor HSLA tem a seguinte notação HTML:

hsla(hue, saturation, lightness, alpha)

O parâmetro Alpha é um numero entre 0.00 (totalmente transparente, a cor desaparece) e 1.00 (cor totalmente opaca ou seja, a cor pura na tela).

Exemplo de Cores HSLA:

(Cores com canal alpha de transparência):

CSS Básico para HTML

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata).

CSS facilita o trabalho de formatação, pois possibilita que possamos controlar a aparência de várias páginas em um site com um único arquivo css.

CSS ou Cascading Style Sheets é o método utilizado para todo o lay-out de páginas HTML, definindo cores, fontes de letras, tamanho dos textos, espaçamento entre os elementos, como os elementos são posicionados na página, imagens e cores de fundo, lay-outs diferentes para dispositivos com tamanhos de tela diferentes, etc.

Dica: A palavra cascading (cascata) significa que o estilo aplicado ao elemento "pai" será aplicado a todos os elementos "filhos" que estão dentro do elemento "pai". Assim, se você configura a cor de texto do elemento [body] como "blue", todos os títulos, parágrafos, e todos os outros textos dentro do elemento [body] também terão a mesma cor (azul), a menos que você especifique outra cor!

Usando Estilos CSS em uma Página HTML

CSS pode ser adicionada ao HTML de três formas:

• Inline: usando o atributo de estilo dentro do elemento HTML.
• Interno: usando [style] dentro da seção [head] no topo do código HTML.
• Externo: usando [link] para definir um arquivo .css externo, dentro de uma pasta no servidor do site ou mesmo em um site externo.

A forma mais comum de utilizar estilos CSS é usando um arquivo .css externo, pois assim é mais fácil alterar o estilo de um site inteiro trocando apenas este arquivo ou editando o seu conteúdo.

CSS Inline

CSS Inline é utilizado para aplicar um estilo para um único elemento dentro de uma página HTML.

CSS Inline usa o atributo [style] para definir as características do elemento HTML.

Por exemplo, pode ser definido que em uma única página, determinado título seja vermelho e determinado parágrafo seja azul, com estas especificações definidas apenas para esta página e para estes dois elementos dentro da página.

Título em Verde: [h4 style= "color:green;"]

Parágrafo em Azul: [p style="color:blue;"]

CSS Interno

CSS Interno é utilizado para definir os estilos de uma única página HTML, isoladamente.

CSS Interno é colocado na seção [head] no começo da página HTML, utilizando o elemento [style].

Exemplo:

[html]
[head]
[style]
[body] {background-color:powderblue;}
[h1] {color:blue;}
[p] {color:red;}
[/style]
[/head]
[/html]
      

CSS Externo

Uma folha de estilos CSS Externo é usada para definir todos os estilos de um site inteiro, ou de várias páginas HTML.

Para utilizar uma página de estilos CSS Externo, devemos adicionar um link na seção [head] no começo da página inicial HTML, indicando em qual pasta do servidor está armazenado o arquivo style.css que define todos os estilos.

Exemplo:

[html]
[head]
[style]
[link rel="stylesheet" href="styles.css"]
[/style]
[/head]
[/html]
      

O arquivo CSS pode ser escrito em qualquer editor de textos como texto puro, não pode conter nenhum código HTML e deve ser salvo como um nome com extensão .css

Estrutura de um Arquivo CSS

Exemplo de um arquivo "style.css"

body {background-color:powderblue;}
h1 {color:blue;}
p {color:red;}
      

Dica: Com uma página CSS de estilo externo, podemos mudar todo o visual de um site inteiro, modificando apenas um arquivo de estilos.

Cores, Fontes e Tamanho de Letras usando CSS

Cores, Fontes, Tamanhos de Letras, são as propriedades mais comuns usadas com o CSS.

A cor de texto é definida pela propriedade [color].

O tipo de letra é definido pela propriedade [font-family].

O tamanho de letra é definido pela propriedade [font-size].

Exemplo de estilos CSS para cor, fonte e tamanho de letras:

[style]
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
[/style]
      

CSS - Bordas

Quase todos os elementos HTML podem ser emoldurados com uma borda sólida, pontilhada, tracejada, dupla, entre outras, utilizando a propriedade [border].

Exemplo de CSS para um Parágrafo com Borda:

p [border:solid 2px blue;]

CSS - Padding (margem interna)

Com CSS, a propriedade [padding] define as margens internas de um elemento.

Exemplo de CSS para um Parágrafo com 30px de margem interna:

p [padding:30px]

CSS Margin (margem externa)

O atributo [margin] define as margens ou espaço do lado de fora das bordas de um elemento HTML.

Exemplo de CSS para um Parágrafo com 30px de margem externa:

p [margin:30px]

Link para um Arquivo de Estilos CSS Externo

Uma folha de estilos de um site pode ser armazenada em uma pasta dentro do servidor de hospedagem ou também pode ser utilizado um arquivo css de um outro site, usando um link absoluto.

Exemplo de uso de um arquivo CSS de um outro site:

[link rel="stylesheet" href="https://superlivros.com.br/styles.css"]

Exemplo de uso de um arquivo CSS em uma pasta dentro do servidor de hospedagem do site:

[link rel="stylesheet" href="/assets/css/styles.css"]

Exemplo de uso de um arquivo CSS na mesma pasta do documento HTML que o utiliza:

[link rel="stylesheet" href="styles.css"]

Hiperlinks HTML - ligações entre páginas HTML

Hiperlinks são encontrados em praticamente todas as páginas web. Através dos hiperlinks é possível navegar entre as páginas na Internet, dentro de um site ou de um site para outro.

Ligações em HTML são hiperlinks.
Ao clicar em um hiperlink podemos ir de uma página para outra ou para determinado parágrafo ou seção dentro da mesma página.
Ao posicionar o cursor do mouse sobre um hiperlink, a seta torna-se o desenho de uma pequena mão sobre o link.

Nota: Um link não precisa ser necessariamente um texto. Um link pode ser uma imagem ou qualquer outro elemento HTML.

Links HTML: Sintaxe

Em HTML a tag [a] define o hyperlink.

A sintaxe do hiperlink segue a estrutura:

[a href= "url"] Texto do Link [/a]

O atributo [href] é o mais importante dentro do link, pois indica o destino da ligação. Ao clicar na parte visível do link dentro da página, o navegador direciona o leitor para a página de destino.

Exemplo de Link:

[a href="https://superlivros.com.br/] Livraria Superlivros [/a]

Como padrão, os links aparecem da seguinte forma em todos os navegadores:

• Link não visitado aparece com letras sublinhadas em azul.
• Link visitado aparece sublinhado com letras em na cor roxa (purple).
• Link ativo aparece sublinhado na cor vermelha.

Dica: Os hiperlinks podem ser estilizados utilizando CSS para definir uma aparência diferente do padrão dos navegadores nas cores definidas acima.

Links HTML: o atributo [target]

Ao configurar um link, o atributo [target] serve para definir a forma como a página de destino do link será carregada pelo navegador.

Se não houver o atributo [target], por padrão a página é carregada na mesma janela e mesma aba do navegador, onde está o link clicado.

Para modificar o padrão, o atributo [target] pode ter os seguintes valores:

• _self - Padrão. Abre o destino do link na mesma janela ou aba do navegador onde o link foi clicado.
• _blank - Abre o documento de destino do link em uma nova janela ou nova aba do navegador.
• _parent - Abre o documento de destino dentro de um frame pai onde o link foi clicado.
• _top - Abre o documento no topo da página, ou seja no topo do elemento [body] da mesma página do link.

Exemplo de Uso de Link com Atributo [target]:

Podemos definir que a página de destino do link seja aberta pelo navegador em uma nova janela ou em nova aba utilizando o atributo "_blank".

[a href="https://superlivros.com.br/" target="_blank"] Livraria Superlivros [/a]

URLs Absolutas X URLs Relativas

Os links em HTML podem ter URL Absoluta ou URL Relativa.

Uma URL Absoluta contém o endereço completo da página dentro do atributo href.

Uma URL Relativa contém o endereço onde o arquivo de destino do link está armazenado, em uma pasta do servidor do site onde o mesmo está hospedado.

Exemplo de Link com URL Absoluta:

[a href="https://superlivros.com.br] Superlivros [/a]

Exemplo de Link com URL Relativa:

(na mesma pasta dentro do servidor, onde está hospedada a página HTML com o link):

[a href="imagem.html] Imagem [/a]

Exemplo de Link com URL Relativa:

(arquivo de destino armazenado em uma outra pasta dentro do servidor):

[a href="/content/imagem.html] Outra Pasta [/a]

IMAGENS Usadas como Links

Para uma imagem ser utilizada como link, basta inserir a tag de imagem [img] dentro da tag de link [a].

Exemplo de Código para Imagem como Link:

[a href="https://superlivros.com.br"] [img scr="/images/livraria-logo.png" alt="Livraria Superlivros" style="width:193px; height:38px;"][/a]

Link para um Endereço de E-mail

Para criar um link para um endereço de E-mail e o navegador abrir o programa padrão de e-mail para enviar uma mensagem, devemos usar o atributo [mailto:] dentro da tag de link [a] como o atributo [href]. O e-mail de destino da mensagem deve ser especificado entre aspas.

Exemplo de Link para E-mail:

[a href="mailto:eu@veronika.com.br"] Enviar Mensagem [/a]

Botão HTML Utilizado como Link

Um botão HTML pode ser usado como link ou para acionar um comando em JavaScript.

JavaScript é uma linguagem de programação utilizada para definir eventos tais como o resultade de clicar em um botão HTML.

Exemplo de Botão como Link:

[button onclick="document.location='imagem.html'"] Ir Para o Tutorial [/button]

Revisão de Texto

Dica: Para aprender mais sobre JavaScript, acessar o Tutorial de JavaScript no site W3Schools.

Title: Informações Adicionais de um Elemento HTML

O elemento [title] fornece informações adicionais do elemento HTML onde for inserido. Geralmente essa informação adicional é exibida na tela como uma "tooltip" (texto de dica de tela) quando o mouse é posicionado sobre o elemento em destaque.

Exemplo de Uso da Tag [title]

[a href="https://superlivros.com.br" title="Visite nossa Livraria Online"] Livraria Superlivros [/a] (posicione o cursor do mouse sobre o link abaixo para visualizar na tela as informações adicionais fornecidas pelo elemento [title] para o link:)
Livraria Superlivros

Resumo de URLs Absolutas e URLs Relativas

Uma URL Absoluta é um endereço completo de uma página web.

Exemplo de URL Absoluta:

[a href="https://superlivros.com.br] Superlivros [/a]

Uma URL Relativa pode ser um endereço de uma página web localizada em uma pasta diferente ou na mesma pasta da página atual.

Exemplo de Link Relativo para Outra Pasta:

[a href="../content/imagem.html"] Imagem [/a]

Exemplo de Link Relativo para a Mesma Pasta:

[a href="contato.html] Fale Conosco [/a]

Links HTML - Cores Padrão e Cores Diferentes

Um link HTML aparece de formas e cores diferentes, de acordo com o seu status atual. Pode ser um link não visitado, um link que já foi visitado (clicado) pelo navegador ou um link ativo.

Cores Padrão para um Link

Por padrão, um link aparece das seguintes formas, em todos os navegadores:

• Um Link não visitado é exibido sublinhado na cor azul.
• Um Link visitado é exibido sublinhado na cor roxa (purple).
• Um link ativo é exibido sublinhado na cor vermelha.

As cores padronizadas podem ser configuradas de formas e cores diferentes, utilizando CSS.

Exemplo de Formatação de Links com Cores Diferentes do Padrão

Estilo CSS inserido na seção [style] para validade apenas em uma página.

[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:none;
]

a:active [
color:yellow;
background-color:transparent;
text-decoration:underline;
]
      

CSS para Formatar Botões a Serem Usados como Links

Um link pode ser estilizado e exibido como um Botão, utilizando CSS para definir seu design.

Exemplo de Código CSS para definir um link com aparência de Botão ou Ítem de Menu

[style]

a:link, a:visited [
color:white;
padding:15px 25px;
text-align:center;
text-decoration:none;
display:inline-block;
]

a:hover, a:active [
background-color:red;
]

[/style]
      

Bookmarks: Marcadores de Links Estilo Sumário

Links HTML podem ser usados como marcadores para navegação dentro de uma mesma página para o leitor ir facilmente de uma parte para outra da página, alternando entre os assuntos ou seções ou capítulos.

Os marcadores podem estar dentro de uma mesma página longa ou podem levar a uma página HTML diferente da atual, onde o assunto, tema ou capítulo marcado estiver ancorado.

Como Criar Marcadores HTML (bookmarks)

Bookmarks são bastante úteis para navegação dentro de uma página muito longa, com muitos assuntos ou tópicos.

Para criar um marcador Bookmark, primeiro deve ser feita a marcação inline utilizando um atributo id no parágrafo ou local desejado para indexar e depois adicionar um link direcionando para esta id marcada do documento.

Após feito isso, ao clicar no link, que pode estar no topo, rodapé da página ou em um índice, a página levará ao ponto marcado.

Exemplo de Marcação Bookmark Inline:

[h3 id="C4"] Capítulo 4 [/a]

Exemplo de um Sumário para esta Página:

Imagens HTML

Imagens podem melhorar o design e a aparência de uma página web.

Para inserir uma imagem, utilizamos as tags [img], [src] e [alt].

As dimensões da imagem exibida na página devem ser definidas por [style] com os atributos [width] e [heigth].

Exemplo de Imagem:

Imagens HTML: Sintaxe

A tag HTML [img] é usada para inserir uma imagem dentro de uma página web.

Tecnicamente, as imagens não são inseridas dentro da página, mas sim são "linkadas" e podem estar na mesma pasta, em outra pasta dentro do site ou mesmo em qualquer outra página da Internet. A tag [img] cria um espaço reservado para a exibição desta imagem.

A tag [img] não precisa ser fechada por conter apenas atributos da imagem.

A tag [img] possui dois atributos obrigatórios:

• [src] - atributo que indica o caminho da imagem, ou seja, seu link para que possa ser exibida no espaço reservado para ela.
• [alt] - atributo que indica um nome alternativo para ser exibido no lugar da imagem, caso o link esteja quebrado e o navegador não consiga carregar a imagem.

Imagens: o Atributo [scr]

O atributo [scr] é obrigatório e indica o caminho [path = URL] do arquivo da imagem.

Nota: quando a página web é carregada, o navegador busca a imagem indicada pelo link da fonte da imagem, ou seja, o local do servidor onde a imagem está armazenada e a insere no espaço reservado para ela dentro da página. Por isto é preciso ter certeza que o link da imagem está correto e a imagem existe no servidor, caso contrário, o navegador exibirá um ícone de imagem quebrada, ou seja, de imagem ausente e exibirá também o texto substituto da imagem descrito no atributo [alt].

Exemplo de Atributo [scr]:

[img src="img_chania.jpg alt="Flowers in Chania">

Imagens: o Atributo [alt]

O atributo [alt] é obrigatório e indica um texto alternativo para a imagem, caso o link da imagem esteja errado ou a imagem não exista, este texto é mostrado no lugar da imagem. Também serve para ser lido no caso de leitura da página por aplicativo de voz ou programas para cegos. O atributo [alt] pode ser um descrição da imagem.

Exemplo de Atributo [alt]:

[img src="img_chania.jpg" alt="Flowers in Chania"

Dica: Um leitor de tela é um programa que faz a leitura com simulação de voz de uma página HTML para que o usuário, ao invés de ler visualmente a página, possa ouvir todo o seu conteúdo. Programas ou aplicativos leitores de tela são úteis para pessoas com deficiência visual ou pessoas com dificuldade de aprendizagem.

Tamanho de Imagem: Largura [width] e Altura [height]

Podemos usar a tag [style] para definir a largura e a altura a serem exibidas da imagem.

Usando [style]: Exemplo de Uso de Width e Height:

[img scr="img_girl.jpg" alt="Girl in a jacket" [style="width:500px;height:600px;"

Usando os Atributos Width e Height:

[img scr="img_girl.jpg" alt="Girl in a jacket" width:"500" height:"600"

Os atributos [widht] e [height] sempre definem a largura e a altura da imagem em PIXELS.

Nota: Sempre devemos especificar a largura e a altura da imagem. Se isso não for feito, a página pode piscar no carregamento enquanto é feita a leitura de toda a página para o navegador buscar a imagem e depois redimensionar o tamanho da página inteira com a imagem. Width e Height definem uma caixa vazia com o tamanho inteiro da imagem a ser carregada dentro dela.

Width e Height ou Atributo Style: Qual Usar?

Os atributos [style] e [width] e [height] são ambos válidos em HTML. Porém é recomendável preferir usar [style] para prevenir alterações indesejadas na exibição da imagem, por poderem ser afetadas pela sobreposição de alguma configuração de [style] definida no arquivo .css interno ou externo.

Exemplo:

[!docutype html]
[html]
[head]
[style]
img [width:100%]
[/style]
[/head]
[body]
[img scr="html5.gif" alt="HTML5 Icon" 
width="128" height="128"]

[img scr="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;"]
      

No exemplo acima, a primeira imagem será distorcida na largura, pois o estilo definido como 100% em [style] se sobrepõe ao atributo [width] de 128px na largura. Ao invés de aparecer com dimensão de 128 pixels de largura, a imagem será distorcida para ocupar 100% da largura da div ou do elemento onde está inserida.

Imagens em uma Pasta Diferente do Arquivo HTML

Caso a imagem esteja armazenada em uma pasta diferente onde está o arquivo HTML onde a imagem deverá ser inserida, devemos indicar o caminho completo de forma correta no atributo [scr].

Exemplo de Imagem em Outra Pasta:

[img scr="/images/img_girl.jpg" alt="girl with a jacket" style="width:500ps;height:600px;"]

Imagem em outro Website ou em Outro Servidor

Algumas imagens podem estar armazenadas em outro servidor ou em outro website. Neste caso, para inserir a imagem na página, devemos especificar a URL Absoluta com o endereço completo do link da imagem dentro do atributo [scr].

Exemplo de Imagem em outro Website ou Servidor:

[img scr="https://superlivros.com.br/img/logo.png" alt="Livraria Superlivros"

Nota para Imagens Externas: imagens em outro servidor ou site podem estar sob direitos de copyright. Se você não solicitar permissão para usar a imagem, você pode estar violando a lei de direitos autorais por uso indevido da imagem. Além disso, você não tem controle sobre estas imagens externas e elas podem ser removidas ou apagadas ou modificadas, resultando em quebra de link de imagem na página.

Imagens Usadas como Links

Qualquer imagem dentro da página pode ser usada como link. Para isto, basta inserir dentro da tag [a] de link, a tag [img] de imagem. Assim a imagem se torna um link.

Exemplo de Imagem como Link:

[a href="https://superlivros.com.br" target=_blank"][img src="/images/livraria-logo.png" alt="livraria superlivros" style="width:193px;height:98px;"] [/a]

Imagens: Floating (Flutuação à Direita ou à Esquerda)

Utilizando a propriedade [float] do CSS, podemos definir que a imagem fique alinhada no lado esquerdo ou no lado direito da página, com o texto fluindo ao lado da imagem.

Exemplo de Floating de Imagem:

[p][img src="/images/smiley.gif" alt="carinha rindo" style="float:left; width:42px; height:42px;"]A imagem ficará alinhada do lado esquerdo da página.[/p]

[p][img src="/images/smiley.gif" alt="carinha rindo" style="float:right; width:42px; height:42px;"]A imagem ficará alinhada do lado direito da página.[/p]

Nesta linha, a imagem ficará alinhada no lado esquerdo da página.

Nesta linha, a imagem ficará alinhada no lado direito da página.

Nesta linha, as imagens ficarão uma em cada lado.

Dica: mais informações sobre CSS Float podem ser encontradas em CSS Float Tutorial no site da W3Schools.

GIFs Animados

HTML pode utilizar imagens animadas no formato gif.

Exemplo de GIF Animado:

[img src="/images/witch03.gif" alt="Bruxinha" style="width:50px;height:50px;"]

Tipos Comuns de Arquivos de Imagem

Aqui, nesta tabela, temos os tipos de arquivos mais comuns de imagem, que são suportados por todos os navegadores web: (Chrome, Edge, Firefox, Safari e Opera).