HTML e CSS

HTML e CSS não são linguagens de programação. HTML é uma

linguagem de marcação de hipertexto e CSS é uma linguagem de
estilização. Nem HTML e nem CSS possuem variáveis, laços de
repetição, estruturas condicionais e outros elementos essenciais de
linguagens de programação.
Como diz o teorema de Böhm-Jacopini, qualquer linguagem de
programação pode ser criada com apenas três estruturas: IF,
métodos e laços de repetição. Nem o HTML e nem o CSS tem
essas estruturas.

Um pouco da história da internet

Internet é basicamente a rede mundial de computadores. Você
obviamente sabe que qualquer coisa pode ser conectada à internet
hoje (IOT), mas nem sempre foi assim.
A internet não surgiu como uma rede pública para qualquer um
acessar e gravar vídeos no TikTok ou assistir Netflix.
A internet surgiu em 1969 com um outro nome que pouco se fala:
ARPANET.
A ARPANET foi uma rede de computadores privada nos Estados
Unidos, utilizada para transmissão de dados militares sigilosos e
comunicação entre departamentos de pesquisa.
Mais tarde, a ARPANET foi estendida para MILNET, com o objetivo
de separar as redes civil e militar.
Muito utilizada por pesquisadores posteriormente, a ARPANET foi
usada em algumas universidades. Todavia, algumas universidades
possuíam as suas próprias redes privadas para transmitir
informações entre si.
Em 1990, o físico Tim Berners-lee queria possibilitar o acesso e a
troca de informações e de documentação de pesquisas entre
cientistas de diversas universidades. Para isso, ele criou o HTML.
 Algumas definições importantes

Internet: É uma rede mundial de computadores que permite ao

usuário obter informações e se comunicar com pessoas do mundo
todo.

Intranet: É uma rede privada que permite ao usuário interagir com

pessoas da mesma organização.

World Wide Web (WWW): Também conhecida como web (teia), é

um sistema de informação que une dados de vários serviços de
internet.
Enquanto a internet refere-se aos componentes físicos da rede
global, a web refere-se ao corpo da informação compartilhada por
esta rede, ou seja, às páginas WEB (conteúdos) que você acessa
quando visita um site.
O acesso aos sites ocorre por meio de navegadores que
interpretam, formatam e executam (exibem) páginas web.

Servidores WEB: São computadores robustos (mainframes) com

programas que processam pedidos (requisições) recebidos dos
navegadores.

Home page: É a primeira página recebida de um site por um

servidor WEB.
Por exemplo, quando você acessa o site do UOL (www.uol.com.br),
você pode não saber especificar um nome de arquivo
(www.uol.com.br\matéria1). Nestes casos, o servidor WEB exibirá
um arquivo padrão, que é a home page (página principal).

Protocolos: São um conjunto de regras para a comunicação em

rede. Eles determinam como os computadores se comunicam:
Como iniciar, como manter e como encerrar a comunicação:
HTTP: HyperText Transfer Protocol é o protocolo usado pelos
servidores WEB para transmitir documentos HTML pela internet.
FTP: File Transfer Protocol é outro protocolo muito utilizado para
transmitir arquivos, porém a sua interface gráfica não é tão
agradável como o HTTP.
TCP: Transmission Control Protocol é um conjunto de protocolos
para a transmissão de informação pela WEB, com função de
verificar se os dados são transferidos de forma correta, na
sequência apropriada e sem erros.
IP: Internet Protocol é um protocolo de endereçamento, que fornece
o endereço dos computadores na rede.

URL – Sistema de endereçamento

Universal Resource Locator (URL) é o sistema de endereçamento

usado pelos navegadores para localizar redes, computadores e
arquivos na internet.
Uma URL especifica:

http://www.ev.org.br/paginas/Home.aspx

Http: Protocolo http (o HTTPS é o http com mais segurança).

www.ev.org.br: Endereço

paginas: Subárea

Home.aspx: Nome do arquivo no servidor

Então o URL é:
Protocolo usado para acessar o arquivo / Endereço do servidor /
Área do servidor onde quer encontrar o arquivo / Nome do arquivo
no servidor.

Entenda melhor sobre o protocolo HTTP e sobre URL nesse link:

https://www.alura.com.br/artigos/desmistificando-o-protocolo-http-
parte-1

Linguagem de marcação
Para criar páginas WEB com textos descritivos e informações
separadamente, utilizamos uma linguagem de marcação.
As páginas WEB são armazenadas em arquivos com extensão htm
ou html. Isso assegura que elas são acessíveis por qualquer
navegador em qualquer parte do mundo.

HyperText Markup Language

Linguagem de marcação de hipertexto
HTML utiliza um formato simples de código, que pode ser gerado
sem a ajuda de aplicativos especiais.
Para criar um documento HTML, tudo o que você precisa é de um
editor de texto ASCII como o bloco de notas, por exemplo.
Se você precisar verificar a formatação do documento durante a
criação, pode usar qualquer navegador, pois todos eles são
capazes de interpretar o código.
Nesse guia de HTML e CSS, será utilizado o Visual Studio Code
IDE.
 Vantagens do HTML
1. Criar e adicionar facilmente documentos WEB, devido ao seu
formato simples.

2. Assegurar a acessibilidade das suas páginas WEB por muitas

plataformas e navegadores.

3. Transmitir facilmente documentos pela internet.

O papel do HTML na WEB

O HTML tem uma função importante em aplicações WEB, que são
programas que você incorpora em sites para gerenciar tarefas
adicionais com por exemplo, o gerenciamento de pedidos de
usuários. As aplicações WEB aumentam a interação do usuário na
WEB.
Quando você com alguma informação em uma página WEB, o
navegador a envia para um conjunto especial de programas
chamado Common Gateway Interface (CGI). Estes programas
processam a informação e exibem o resultado no navegador
segundos após.
Você usa o HTML para fornecer a interface básica para a interação
com aplicações WEB. Você pode também usar o HTML para criar
interfaces gráficas entre os bancos de dados usados nestas
aplicações e o usuário final.

<!Doctype HTML>
A tag <!Doctype HTML> é uma informação ao navegador sobre qual
o tipo de documento HTML esperar.
Existem versões do HTML, sendo a versão 5 a mais recente.
A tag acima diz ao navegador que o documento que eu vou criar
agora é um documento HTML5.
 Tags <HTML> </HTML>
- São os elementos básicos de um documento HTML para
especificar o formato do conteúdo de uma página WEB.
- Os sinais <> permitem aos navegadores distinguir as tags de um
texto comum e o conteúdo delas pode ser digitado tanto em letras
maiúsculas quanto em minúsculas.

Abir tag → <>

Fechar tag → </>

Abrir uma tag é iniciar uma ação que aquela tag faz.
Fechar uma tag é finalizar uma ação que aquela tag faz.

Partes de um documento HTML

Um documento HTML possui duas partes:
• Head (cabeçalho)
• Body (corpo)
Na head, você entra com o título da página WEB, que será exibido
apenas na barra de endereços do navegador.
No body, você entra com o conteúdo da página WEB.

Antes de mostrar um exemplo de código HTML, sugiro que você

baixe e instale o Visual Studio Code.
Depois que instalou o VS Code, crie uma pasta qualquer e abra
essa pasta no VS Code.
Depois de abrir essa pasta, crie um arquivo com extensão HTML
dentro dessa pasta e use esse arquivo para brincar como quiser
No meu caso, eu criei a pasta HTML AND CSS EX e dentro dessa
pasta eu criei um arquivo chamado “treinamento.html”.

Exemplo de código em HTML (bem simples):

Se você quer ver o visual dessa página HTML, basta abrir esse
arquivo em qualquer navegador.

Mas primeiro dê um save lá no VS Code e depois abra o documento

HTML no seu navegador de preferência.
A minha página ficou assim:

Perceba que só é visível tudo o que está dentro da tag body.

A única coisa visível que fica dentro da tag head é o título.

Perceba também que os caracteres não estão formatados. Isso

acontece porque não dissemos ao navegador para interpretar o
nosso texto com a tabela UTF-8. Por padrão, o navegador interpreta
o texto com a tabela ASCII, que não possui alguns dos caracteres
da língua portuguesa.

Enfim, as tags que utilizamos:

<html> </html>: Inicia e encerra um documento HTML.
<head> </head>: Inicia e encerra a área do cabeçalho.
<title> </title>: Inicia e encerra a linha de título (que aparece na guia
do navegador).
<body> </body>: Inicia e encerra a área do corpo (conteúdo) do
documento HTML.
<p> </p>: Inicia e encerra um novo parágrafo.
<i> </i>: Inicia e encerra uma parte do texto que ficará em itálico.

Tags sem fechamento

Existem algumas tags que não necessitam de fechamento e sua
sintaxe é de somente abertura, como por exemplo, <break> ou <br>
que insere uma quebra de linha (pular uma linha).
 UTF-8 e codificação de caracteres.
Arquivo texto é um arquivo de bits e todos aqueles bits representam
um texto (e um arquivo HTML é no fundo um arquivo texto
também).
A gente consegue gerar um número binário e transformá-lo em
decimal. Como a gente faz isso para texto?
R: Cria uma tabela de bytes (oito bits), onde cada byte representa
um caractere.
Há diferentes tabelas de caracteres: Unicode, ISO-8859-1, UTF-8,
ASCII, UTF-16, UTF-32 e muitas outras.

Curiosidade: Western Europe (Windows-1252/WinLatin1) é uma

especificação da Microsoft que estende a ISO-8859-1.
O que é a tabela ASCII?
É a representação dos caracteres de texto.
A gente consegue converter número binário para decimal, octal e
hexadecimal.
A única forma de converter para texto é definindo uma tabela.
A ASCII se tornou um padrão com a popularização do Personal
Computer. Porém, a ASCII não possui ‘ç’, ‘ñ’, ‘ã’, ‘é’ e outros
caracteres.
Na tabela ASCII, há uma sequência de caracteres entre os números
binários que corresponde a uma sequência A...Z, a...z, 0...9.
Os criadores da tabela ASCII se preocuparam somente com a
língua inglesa e usaram 7 bits. Eles deixaram o 8º bit para o futuro.

ISO-8859-1
A ISO-8859-1 estendeu a tabela ASCII com o 8º bit para colocar
acentos, ç, e outros carecteres. A ISO-8859-1 ficou também
conhecida como Latin1, pois foi a primeira tabela a suportar idiomas
latinos.
No ASCII, se o byte tem o número 1 como terceiro bit, então a letra
é minúscula. Se for 0 como terceiro bit, então a letra é maiúscula.
A ISO-8859-1 possibilitou o suporte aos seguintes idiomas:
• Afrikaans
• Albanian
• Basque
• Breton
• Corsican
• English
• Faroese
• Galician
• Icelandic
• Irish
• Indonesian
• Italian
• Leonese
 • Luxembourgish
• Malay
• Manx
• Norwegian
• Occitan
• Portuguese
• Rhaeto
• Romanic
• Scottish Gaellic
• Scots
• Southern Sami
• Spanish
• Swahili
• Swedish
• Tagalog
• Walloon

Enfim, o que é uma string?

Uma string é uma sequência de caracteres. Cada caractere ocupa 8
bits (1 byte) nas tabelas ASCII e ISO-8859-1.
Se meu arquivo tem 100 caracteres, esse arquivo ocupa 100 bytes
(800 bits).
Sistemas antigos usam ISO-8859-1 como charset. Ainda não existia
Unicode UTF-8.

Unicode
Na época do ASCII, ainda não existia internet direito. O que havia
era rede privada entre empresas.
Com a popularização da internet, era um problema acessar sites
estrangeiros. O computador nos EUA tinha a sua tabela de
caracteres e o computador no Japão tinha a sua outra tabela de
caracteres. Era impossível ler os arquivos transferidos.
Para resolver isso, surgiu o Unicode.
O Unicode suportaria todos os caracteres de todos os idiomas e os
emojis.
No Unicode UTF-8, um caractere ocupa entre 1 e 6 bytes. Depende
do caractere.
ASCII → 1 byte → 90% dos dados são assim (precisam só de
ASCII).
Latin1 supplement → 2 bytes.
O UTF-8 estendeu a ASCII e a ISO-8859-1.
Até agora, a UTF-8 possui caracteres que ocupam até 4 bytes de
memória.
A utilização de 5 e 6 bytes ainda não foi aprovada.
Com o UTF-8, é possível tabelar todos os caracteres de todos os
idiomas e ainda sobram os 5 e 6 bytes a serem utilizados.
A maioria dos dados possuem caracteres que ocupam entre 1 e 2
bytes, fazendo com que o UTF-8 não seja tão pesado.
Os caracteres de outros idiomas como árabe, coreano, japonês ou
mandarim ocupam entre 3 e 4 bytes e esses caracteres não são tão
utilizados quanto os caracteres de 1 a 2 bytes.
O UTF-8 consegue suportar até 1.112.064 caracteres.
O UTF-8 não só suporta caracteres de idiomas, como também
suporta vários emojis e símbolos especiais.

UTF-32
O UTF-32 usa sempre 4 bytes para representar um caractere.
Um arquivo de 100 caracteres em UTF-32 pesa 400 bytes, ou seja,
quatro vezes mais.
Aqueles 90% dos dados que utilizam os caracteres mais comuns
que pesam entre 1 e 2 bytes, agora cada caractere vai pesar 4
bytes.
UTF-32 é pesado e não é recomendado.
UTF-16
O UTF-16 usa sempre 2 bytes, mas não é expansível como o UTF-
8.
O UTF-16 BE é um novo UTF-16, que agora é extensível.

Curiosidades: - Um teclado ABNT2 usa um driver ISO-8859-1.

- Uma imagem é um array de 3 dimensões (RGB).
- Um emoji ocupa 4 bytes.

Conclusão sobre as tabelas

Use sempre o UTF-8, que é a tabela que suporta caracteres de
todos os idiomas e ainda pesa menos que a UTF-16 e a UTF-32. É
importante que você utilize a UTF-8 para haver compatibilidade com
o maior número de clientes possível.

Inserindo efeitos
Negrito
Negrito em inglês é bold.
É muito utilizado para destacar partes de um texto.
Por ser bold, a sua tag é o <b>.
A tag <Strong> também cria um texto em negrito.
Itálico
O efeito itálico (italic) é para destacar termos em outro idioma ou
citações.

Sublinhado
O efeito sublinhado (underline) é utilizado para que os usuários não
confundam o texto destacado com links.
 Alterando o alinhamento do texto
No Word, você pode mudar o alinhamento do texto:

Você pode alinhar à esquerda, centralizar, alinhar à direita ou

justificar.
Isso também é possível no HTML.
No HTML, para alterar o alinhamento de um parágrafo, você usa a
tag do parágrafo <p> e chama o atributo align → <p align>.
Nesse atributo align, você diz se é esquerda, direita ou centro.

Alinhando à esquerda:
Alinhando no centro:

Alinhando à direita:

O Visual Studio Code está reclamando do atributo align porque é

preferível fazer alinhamento de texto com CSS, e não, com HTML.
Alinhar texto é uma forma de estilizar a sua página HTML e
estilização tem que ser com o CSS.
O CSS é um arquivo separado que vai definir o estilo de todas as
páginas HTML do seu site em um único local.
Com o CSS, se você precisar trocar a cor de um texto, você trocará
a cor desse texto uma única vez dentro do arquivo CSS. Você não
precisará navegar página por página para trocar a cor de um texto.
É por isso que o CSS é recomendado.
Você estudará sobre CSS muito mais adiante.
Você também pode justificar o texto ao usar o valor “justify” no
atributo align.

Alterando a fonte
Independentemente da fonte na qual o código o HTML é digitado, a
visualização da página WEB é sempre com a mesma fonte: Times
New Roman. Pois é, essa é a fonte padrão.
Caso você deseje utilizar outra fonte, alterar tamanho ou cor, será
preciso fazer o uso da tag <FONT></FONT>.
Essa tag normalmente vem acompanhada dos atributos face, size e
color. Eles servem para alterar a fonte, o tamanho e a cor do texto,
respectivamente.
Você pode, teoricamente, escolher qualquer fonte existente, mas na
verdade ela só aparecerá em computadores que tiverem tal fonte
instalada.
Portanto, para não acontecer isso, escolha uma fonte que já vem
instalada no sistema operacional, presente na maioria dos
computadores: Arial, calibri, comic sans MS e verdana.

Face
Um dos primeiros atributos utilizados com a tag <font> é o face, que
permite alterar o tipo da fonte.
Novamente o Visual Studio Code está reclamando porque isso é
papel do CSS. Isso é estilização.
Hoje em dia, não é muito aceito fazer estilização com HTML. Tudo
isso é jogado em um arquivo CSS.

Size
Size altera o tamanho da fonte.
No atributo size, você passa um número de 1 a 7, sendo 1 o menor
tamanho e 7 o maior tamanho.
Size lembra muito um exame de oftalmologista.
Color:
Color é um atributo para mudar a cor da fonte.
A cor pode ser definida pelo nome da cor ou por um código
hexadecimal.
Nomes de cores:
• Aqua
• Black
• Blue
• Fuchsia
• Gold
• Gray
• Green
• Indigo
• Lime
• Maroon
• Navy
• Olive
• Purple
• Red
• Salmon
• Sienna
• Silver
• Teal
• White
• Yellow
Curiosidade: RGB
As cores em HTML são definidas em notação hexadecimal pela
combinação dos valores RGB (Red, Green e Blue).
Os valores em hexadecimal são definidos em três pares de
números, começando em 00 (0 em decimal), e terminando em FF
(255 em decimal). Cada símbolo hexadecimal começa sempre com
o símbolo hash (#).
Com a combinação dos três valores é possível obter mais de 16
milhões de cores (255 x 255 x 255).
 Quebra (pular) de linha <BR>
Como demonstrado mais anteriormente, a tag <br> pula uma linha.
Também há como pular uma linha e desenhar uma linha reta.
É o Horizontal Ruling <hr>.
Assim como o <br>, a tag <hr> não precisa ser fechada.
 Criando subtítulos
Agora, você verá como adicionar títulos e subtítulos em uma página
WEB. Para isso, você utilizará a tag Heading <Hx> </Hx>, onde x é
um número que representa o nível do tópico. Você pode criar até 6
tipos de subtítulos.
O uso de subtítulos facilita o entendimento do conteúdo.
 Comentários
Comentários são úteis para deixar mensagens para outros
programadores que olharem seu código, seja para entendê-lo
melhor, seja para deixar um lembrete de algo que falta.
A forma de escrever comentários no HTML é diferente das
linguagens de programação.
Para escrever um comentário em HTML, você utiliza uma tag assim:
<!------------meu comentário aqui----------->

Obviamente, os comentários não aparecem na página WEB.

Entretanto, há uma parte do Clean Code que diz que comentários
são ruins. Comentários envelhecem e não acompanham as
modificações do código com o tempo. Comentários poluem o
código. Você deve escrever um código legível o suficiente para não
precisar de comentários. Você deve escrever um código
autoexplicativo.

TAG preformatted
Por padrão, os navegadores não exibem os espaços extras e linhas
em branco de um documento HTML.
Para que o usuário visualize a página WEB com os espaços e
linhas em branco que você definiu no documento HTML, é
necessário utilizar a tag preformatted (pré-formatado), com a
sintaxe <PRE> </PRE>.
O navegador exibe o bloco do texto exatamente como está escrito
no HTML.
 Tipos e funções das listas
Lista é uma coleção de itens relacionados. Você usa uma lista para
organizar dados com uma sequência de passos ou para listar itens
em um grupo.
O HTML possui dois tipos de listas: Numeradas e não numeradas.

Lista numerada ou lista ordenada

1. São Paulo
2. Rio de Janeiro
3. Belo Horizonte
4. Vitória

Ou:
A. São Paulo
B. Rio de Janeiro
C. Belo Horizonte
D. Vitória

Na lista ordenada, a ordem é importante.

Lista não numerada ou não ordenada

• São Paulo
• Rio de Janeiro
• Belo Horizonte
 • Vitória

Na lista não ordenada, a ordem não importa.

Criando listas ordenadas

Utilizamos duas tags:
<OL> </OL>: Abre e fecha a lista ordenada.
<LI>: Abre cada item da lista.

Criando listas não numeradas

<UL></UL>: Lista não numerada.
<LI>: Item da lista.
Listas intercaladas
São combinações de listas.
Customizando listas
O atributo TYPE pode especificar o tipo de marcador em uma lista
não ordenada, ou o tipo de número em uma lista ordenada. Os
valores que podem ser utilizados:
Você pode especificar o tipo de número como:
A Para exibir letras maiúsculas.
a Para exibir letras minúsculas.
I Para exibir algarismos romanos grandes.
i Para exibir algarismos romanos pequenos.

Você pode especificar o tipo de marcador como:

DISC para disco (ou um polígono).
CIRCLE para círculo.
SQUARE para quadrado.
 Inserindo imagens
Tipos de imagens
Quando adicionamos uma imagem a uma página web, é preciso ter
em mente o formato, o tamanho e a posição dela na página. Os
formatos mais utilizados são:

JPEG ou JPG
Joint Photographic Experts Group
É o método mais utilizado para comprimir imagens fotográficas. Foi
introduzido em 1983 e suporta até 16,8 milhões de cores. Não
permite imagens com fundos transparentes.

GIF
Graphics Interchange Format
Foi introduzido pela CompuServe em 1987 e desde então foi
amplamente utilizado na WEB. Seu formato suporta oito bits de
pixel, permitindo o uso de uma paleta de até 256 cores. Utiliza o tipo
de compressão LZW e é mais indicado para gráficos, ícones e
imagens que não necessitam de muitas cores. Permite imagens
com fundo transparente.
PNG
Portable Networks Graphics
É o substituto do GIF. No início de 1995, o padrão de compressão
LZW foi patenteado pela empresa Unisys, que anunciou a cobrança
de royalties para o uso deste tipo de arquivo. Esta informação,
aliada à crescente capacidade de exibição de cores nos
computadores, levou à criação do PNG, que assim como o JPG,
exibe até 16,8 milhões de cores e como o GIF, permite fundo
transparente.

Menção honrosa: SVG

Scalable Vector Graphics
É uma imagem vetorial. Você incorpora-o dentro do HTML ou gera
um arquivo de extensão svg que é um arquivo texto que possui uma
estrutura semelhante ao HTML (são usadas tags para fazer um
desenho em SVG).
Primeiro veio o HTML. Depois veio o XML baseado no HTML.
Depois veio o SVG baseado no XML.
O SVG tem tags pré-definidas.
O W3Schools tem um tutorial de SVG.

Os três tipos principais de imagem que você conhece (JPEG, PNG

e GIF) são conhecidos como imagens RASTER.
O SVG é uma imagem VETORIAL.

Diferença entre raster e vetorial

Se você ampliar uma imagem raster (PNG), ela perde a qualidade.
Se você ampliar uma imagem vetorial (SVG), a qualidade é
mantida.
Imagens raster usam pixel.
Outra menção honrosa: X3D
Antigamente, surgiram tecnologias para gráficos 3D e em suas
épocas elas foram o hype do momento. Hoje essas tecnologias são
vistas como feias e obsoletas.
Uma delas é o VRML.
O X3D é uma evolução do VRML.
O X3D tem uma pegada mais acadêmica.
Um arquivo DXF é um arquivo texto para transportar desenhos 3D.
O Unity superou o X3D.
Os jogos são feitos com Unity, Unreal Engine, OPENGL, Blender,
DirectX, Vulkan, entre outros.
OPENGL é baixo nível.
DirectX é mais popular que OPENGL.
O Flash foi substituído por WebAssembly e WebGL (canvas).

Inserção de imagens na página WEB.

A tag utilizada para inserir imagens é a <IMG>, utilizada com alguns
atributos.
Em primeiro lugar, como já é de se imaginar, você precisará
informar ao navegador onde a imagem se encontra, ou seja, o
endereço e o nome dela. Para isso, usaremos o atributo SRC
(source), que significa “fonte”.

Para facilitar a obtenção do caminho da imagem, eu já a deixei na

mesma pasta onde está o documento HTML:
Ficou bem grande, eu sei :/
Alinhando uma imagem
Você pode usar diversos recursos para alinhar textos e imagens em
sua página WEB, criando uma organização visual diferente.
A imagem pode ser alinhada com outros elementos usados na
página, como textos e outras imagens.
O atributo a ser utilizado em conjunto com a tag <IMG> é o align.
Você pode alinhar o texto no topo, no centro, à direita ou no rodapé
da imagem, à esquerda ou à direita.
O valor padrão do navegador é align bottom (rodapé).
Usando o atributo alt
Caso o navegador não consiga exibir a imagem, o atributo ALT
permite vincular um texto explicativo a ela.
Quando o usuário coloca o mouse sobre a imagem, o texto
alternativo também é exibido, como você pode observar...

No meu caso, o alt não apareceu :/

Exemplo de alt:

Criando links
O que são links?
Links são conexões pelas quais você conecta páginas que podem
ser do mesmo website, externas ou ainda conectar páginas a outros
documentos.
Os links podem ser criados no texto e em outros elementos do
website, como imagens ou itens de um menu.

Usando a tag anchor

A tag anchor <A> </A> (âncora) é utilizada para criar links no
hipertexto, A sintaxe dessa tag é exibida abaixo:
<a href = “URL”> texto descritivo </a>

Onde:
A: Abertura da tag anchor.
HREF: Atributo usado para especificar a URL do documento linkado
ou interligado.
URL: Endereço da página ou documento a ser linkado.
/A: Finalização da anchor.
Ao especificar uma URL apropriada para um serviço de internet,
você também pode linkar a sua página WEB a esse serviço. Por
exemplo, você pode criar um link entre a sua página e o seu e-mail:
Selecionado o link, o navegador ativa o programa de e-mail, neste
caso, o Microsoft Outlook.
Criando links para seções na mesma página
Você com certeza já usou a Wikipedia várias vezes e se deparou
com isso:

Isso é uma lista de links, mas quando você clica nesses links, você
não acessa outra página WEB. Você acessa seções da mesma
página em que você está.
Por exemplo, vou clicar no link número quatro:
Ao clicar naquele link, eu continuei na mesma página da Wikipedia,
mas fui movido para a seção “As Colônias Americanas e o Império
Português”.
Esse tipo de link que navega de seção em seção é geralmente
usado para páginas que possuem textos extensos.
A tag anchor também é utilizada para criar links de seção.
Você especifica a URL do documento que deseja interligar, com o
nome da seção precedido pelo símbolo # (hash).
No entanto, será preciso utilizar um atributo que fará o navegador
entender onde deve ir após o usuário clicar no link criado. Este
atributo é o NAME.
O navegador exibe o link e, quando selecionado, exibirá a seção
que começa com o nome especificado.
Esse link faria mais sentido com textos maiores.
Criando links em imagens
Agora aprenderemos a criar links em imagens, que podem ser
usadas para acessar outras imagens, páginas WEB ou
documentos.
Usamos a combinação da tag anchor para criar um link em uma
imagem. É a combinação de anchor com image.
Personalizando links
Você observou então, que para inserir um link numa imagem
usamos dois conceitos aprendidos anteriormente: Inserção de links
e inserção de imagens.
Também é possível personalizar cores dos links.
Dependendo da cor de fundo utilizada e a opção feita pela cor de
texto, a cor do link pode ficar comprometida visualmente em sua
página.
Para resolver isso, podemos utilizar três elementos que modificam a
apresentação dos links.

Sintaxe:
<BODY link=”cor” vlink=”#cor” alink=”cor”>

LINK: Especifica a cor dos links não acessados na página WEB.

VLINK: Após ser acessado, o link apresentará a cor especificada

por este atributo.

ALINK: Especifica a cor que o link deverá apresentar quando o

mouse estiver sobre ele.

Combinando TAGS
Você pode utilizar combinações de tags em páginas WEB para
melhorar a sua aparência e funcionalidade.
Dentre os diversos tipos de combinação que podemos fazer, será
mostrado a você dois deles. O primeiro será a combinação da tag
anchor com as seguintes tags:
• Formatação
• List
• Image
Tag anchor com a tag lista e tag imagem
O navegador exibe a lista de imagens junto com o texto de
descrição. Esta combinação melhora a aparência da lista.
Para isso, você define cada item como um item utilizando uma
combinação da tag anchor com a da tag image. Desta forma, você
pode construir uma lista de imagens, que contém links para outras
páginas, documentos ou até mesmo outras imagens.
Um recurso comum na internet é a utilização de thumbnails, que
são imagens em tamanhos reduzidos.
Ficou muito grande
 Usando imagens mapeadas
O que são imagens mapeadas?
Uma imagem mapeada é uma imagem dividida em diferentes áreas
e cada área é interligada a um documento. Uma imagem mapeada
é diferente de um link em uma imagem.
No caso da imagem mapeada, o navegador, primeiramente,
identifica a área da imagem que você selecionou e então a URL do
documento vinculado a esta área.
O exemplo mais comum de uso é quando existe a necessidade de
uma mesma imagem direcionar o usuário para duas ou mais
páginas WEB diferentes, como se fosse um menu.

Tipos de imagens mapeadas

Você pode criar dois tipos de imagens mapeadas:
Server-side (no servidor): Na imagem mapeada server-side, você
define um arquivo especial chamado arquivo de definição das
coordenadas com todos os detalhes da imagem mapeada e
armazena esse arquivo no servidor.
Quando você seleciona uma área da imagem mapeada, o
navegador acessa o arquivo de definição das coordenadas no
servidor para identificar a URL do documento interligado.

Client-side (no cliente): Na imagem mapeada CLIENT-SIDE, você

inclui todos os detalhes da imagem mapeada no próprio documento.
Este será o tipo de imagem mapeada que veremos nesse guia.

Como mapear uma imagem

Para utilizar uma imagem mapeada, primeiro você precisa definir as
áreas da imagem que possuirão links para outras páginas ou
documentos e, posteriormente, colocar a referida imagem no site.
Para realizar este procedimento, você pode definir as áreas
utilizando formas geométricas como quadrados, triângulos,
retângulos, círculos ou polígonos em geral.
Para delinear as formas geométricas na imagem, são utilizadas
coordenadas X e Y, que são contadas de PIXEL a PIXEL, tendo
como 0 (zero) o ponto esquerdo superior da imagem.

Para cada tipo de forma, a inserção de coordenadas possui uma

sintaxe única.
Retângulo → Coordenadas = “x1, y1, x2, y2”.

(x, y) = Centro
Coordenadas do círculo = “x, y, r”, onde R é o Raio em pixels.
Coordenadas do polígono: “x1, y1, x2, y2, x3, y3...”.
São todos os vértices.

Mapeando uma imagem

É muito importante lembrar que, atualmente, quase ninguém realiza
a operação de descobrimento dos pontos de coordenadas
manualmente. Praticamente todos os programas editores de HTML
possuem um mapeador de imagens incluso, no qual você desenha
as formas geométricas e o programa fornece o código pronto.
É um processo demorado e trabalhoso realizar tudo manualmente.
Entretanto, é de extrema importância que se conheça os conceitos
de como o código é construído.

Sintaxe:
<img src=”menu.gif” Alt=”Menu” usemap=#menu>

O atributo USEMAP demonstra que será utilizado um mapa na

imagem e qual o nome do mapa utilizado (pode-se ter mais de um
mapa para mais de uma imagem possuindo mapeamento).

A tag <MAP>
Observe a imagem abaixo:
Cada item na imagem possui uma seção geométrica que quando
clicada direciona a um link.
A tag map trabalha com isso. Você “corta” partes de uma imagem e
cada parte te direciona a uma página WEB.

Um exemplo bem simples de mapping:

 Doctype HTML (Explicação melhor)
Existem vários tipos de HTML. O mais recente é o HTML5.
O Doctype é uma declaração com o tipo de documento de sua
própria página WEB. Por meio do doctype, o navegador identifica e
processa o documento corretamente.
Como existe diferentes versões do HTML, a declaração correta é de
extrema importância. Com a declaração, o navegador não perde
tempo tentando descobrir qual tipo de código foi utilizado na
composição de sua página.

HTML5: <!Doctype HTML>

HTML 4.01: <!Doctype HTML public “-//w3c//DTD HTML 4.01
Transitional//PT-BR” “http://www.w3c.org/TR/html4/loose.dtd”>
XHTML 1.0: “HTML1.0 Transitional”.

Parabéns 😊
Se você chegou até aqui, então você possui todo o conhecimento
básico de HTML!
Mas não perca o embalo! Vamos seguir com o HTML avançado!
 HTML AVANÇADO

Criando e formatando tabelas

Por que utilizar tabelas em HTML?

Tabelas são muito úteis para a organização dos dados e das
imagens em páginas WEB, pois possibilitam um alinhamento que
seria difícil de conseguir com simples comandos.
Uma tabela e constituída de linhas e colunas, que podem, ou não,
conter dados.
Vamos iniciar criando uma tabela simples. Depois, veremos
maneiras de adicionar algumas características à tabela como título,
borda e largura.

Criando uma tabela

A tag para criar tabela é <table> </table>.
No HTML as tabelas são criadas apenas com linhas e não colunas,
diferente do Word.
Dessa forma, além da tag <TABLE>, são necessárias mais duas
tags para a construção da tabela:

• <TD> </TD> - Cria células.

• <TR> - Cria linhas.
Você pode também adicionar um cabeçalho na tabela, usando a tag
<TH>.
Atributos
A tag <table> possui vários atributos que permitem, entre outros
aspectos, controlar:
• O alinhamento da tabela na página
• O alinhamento dos dados nas células
• A largura e cor da borda
• As dimensões da tabela

Atributo border
Para criar um efeito que facilite a visualização da tabela, você pode
inserir uma borda.
Neste caso, você utilizará o atributo BORDER. A espessura da
borda é definida em pixels.
Sintaxe:
<TABLE BORDER=”número de pixels”>

Novamente, o Visual Studio Code está reclamando do border

porque o border está estilizando a tabela. O problema é que não é
correto estilizar pelo HTML, isso é papel do CSS.
É preferível que o CSS estilize todas as páginas HTML através de
um arquivo só, que daí não precisa passar por página em página
para estilizar cada tabela que tiver.

Borda colorida
Você também pode inserir uma borda colorida. Neste caso, usa-se
o atributo BORDERCOLOR.
Atributo BGCOLOR (Background color)
O atributo BGCOLOR permite a você definir uma cor de fundo à
tabela toda, quando usado na tag <TABLE>.
Pode ou não ser utilizado com BORDER ou BORDERCOLOR.
É possível, também, definir uma cor de fundo para partes da tabela
usando o atributo BGCOLOR com as tags <TR> e<TD>:
Atributo background
O atributo background permite a você definir uma imagem de fundo
em uma tabela.
A imagem é carregada em seu tamanho normal e é distribuída em
pequenas partes, até preencher o conteúdo da tabela.
Atributos height e width
Height significa altura e width significa largura. Esses atributos
servem para dimensionar a tabela em pixels ou porcentagem, uma
vez que, por padrão, a célula da tabela assume o tamanho do maior
dado inserido:
Observe que neste exemplo a largura foi definida para 300 pixels e
sua altura ocupara 20% da janela do navegador:
Atributo align
O atributo align faz o alinhamento da tabela em relação à página
WEB.
O valor do atributo pode ser “left” (esquerda), “right” (direita) ou
“center” (centro).
Atributo cellspacing
Cellspacing significa espaçamento entre células.
O cellspacing vai especificar o espaço entre a borda da tabela e as
células, em pixels.
Atributo cellpading
O cellpading especifica o espaço entre os dados e a borda de uma
célula, em pixels.
Perceba que os dados da tabela acima estão encostados na
esquerda.
O cellpading faz esses dados se distanciarem das bordas das
células.

Perceba agora que na tabela acima os dados estão um pouco

distanciados das bordas esquerdas das células.
A tag <TD> possui os atributos Align, VAlign, Colspan e Rowspan.

TD Align:
Alinha horizontalmente os dados de uma célula.
TD Valign
Alinha os dados verticalmente.

TD Colspan
O atributo colspan é utilizado para mesclar uma célula em mais de
uma coluna.
O valor do colspan é o número de colunas unificadas.

TD Rowspan
É utilizado para mesclar células em mais de uma linha.
Imagine que existem duas pessoas com o sobrenome Santos:
Então posso mesclar:
 Criando e formatando formulários
Os formulários são questionários para coletar dados.
Os formulários apenas coletam dados, sem processá-los. Quem faz
isso são os scripts de processamento (programas armazenados no
servidor) e o navegador exibe o resultado em sua janela.

FORM
Utilizamos a tag <FORM> para iniciar um formulário e a tag
</FORM> para encerrar um formulário.

Atributo action
O action é o primeiro atributo utilizado. Ele especifica a URL do
script que processará os dados do formulário.
No exemplo acima, os dados serão enviados ao meu e-mail.

No exemplo acima, os dados serão processados por meio de um

código Javascript.

Curiosidade: No ASP.NET MVC, o atributo action indica o nome do

método dentro da classe Controller que vai processar esses dados.

Atributo METHOD
Method significa a maneira de envio dos dados do formulário para o
servidor WEB, para que sejam processados.
Existem dois métodos principais que podem ser utilizados: POST e
GET.
POST
O navegador enviará diretamente o fluxo de dados para o script CGI
no servidor WEB.

GET
O fluxo de dados será anexado à URL especificada no atributo
ACTION e enviado ao servidor como única URL.
O valor GET é utilizado para respostas únicas, como uma string
texto.

CGI: Common Gateway Interface é um padrão utilizado por

servidores WEB para transmitir o pedido de um usuário para um
programa de aplicação e repassar os dados de resposta de volta ao
usuário. Funciona como uma ponte entre o usuário e a aplicação
WEB.

Esse link vai te ensinar melhor sobre os verbos do HTTP:

https://www.alura.com.br/artigos/diferencas-entre-get-e-post

E esse pequeno artigo é interessante:

https://blog.caelum.com.br/rest-principios-e-boas-praticas/
 Objetos do formulário
Um formulário é composto por vários elementos responsáveis por
receber as informações inseridas pelo usuário.
Se você já trabalhou com ferramentas de desenvolvimento de
interfaces gráficas como Windows Forms, WPF, Java Swing,
JavaFX ou outros, você provavelmente está familiarizado com
esses componentes.
No HTML, você usa a tag <INPUT> para desenhar componentes do
formulário.
São componentes do formulário:
• Textbox
• Radiobutton
• Datepicker
• Listbox
• Combobox
• NumericUpDown
• Slider
• Button
• CheckBox
• Image

Contudo, os componentes podem possuir nomes diferentes do que

você aprendeu.

Os componentes são definidos por meio do atributo TYPE.

INPUT
INPUT significa entrada, ou seja, é um componente para a entrada
de dados que o usuário digitou. Para desenhar um componente em
uma página HTML, você utiliza a TAG <INPUT> com vários
atributos.
Atributo TYPE
O atributo TYPE diz o tipo do objeto do formulário. Se nada for
especificado, o padrão é o tipo texto (TextBox).

Atributo VALUE
O atributo VALUE especifica o valor inicial do componente de
entrada (objeto do formulário). É opcional, com exceção de quando
o TYPE é “radio” ou “checkbox”.

Atributo NAME
O atributo NAME nomeia cada objeto do formulário, para que o
script possa manipular os dados.

Atributo MAXLENGTH
O atributo MAXLENGTH estabelece a quantidade máxima de
caracteres quando o componente for do tipo “text” ou do tipo
“password”. O padrão é uma quantidade ilimitada de caracteres.

Atributo SIZE
Especifica o tamanho inicial do controle. A largura é dada em pixels,
com exceção de quando o valor for “text” ou “password”. Nestes
casos, o valor refere-se ao número de caracteres.

Atributo SRC
Quando o valor do TYPE for “image”, este atributo especifica a
localização da imagem usada para decorar o botão de enviar.

Atributo CHECKED
Quando TYPE for “radio” ou “checkbox”, este atributo especifica que
o botão (checkbox) está selecionado.
Atributo REQUIRED
O atributo REQUIRED vai obrigar o usuário digitar alguma coisa no
campo. O REQUIRED não aceita vazio.

Atributo PLACEHOLDER
O atributo PLACEHOLDER define uma marca d’água em um campo
geralmente do tipo “text”. O PLACEHOLDER é útil para exemplificar
ao usuário o formato do dado que ele deve digitar.

Valores do TYPE

IMAGE: Criar um botão de enviar baseado em uma imagem

específica, cuja URL deve ser fornecida.

BUTTON: É um botão. O atributo deve ter o nome do botão.

RADIO: Seria o RadioButton do Windows Forms ou WPF. É um

botão de selecionar. É um botão para representar dados booleanos.

FILE: Cria um controle para seleção de arquivo. O valor do atributo

deve ser configurado como o nome do arquivo.

SUBMIT: Cria um botão de enviar.

TEXT: Cria uma caixa de texto.

CheckBox: Cria botões para serem selecionados. A diferença entre

checkbox e radio é que o checkbox pode ter mais de um
selecionado.
RESET: Cria um botão que limpa os dados de todos os campos.

PASSWORD: É uma caixa de texto que esconde os caracteres

reais que foram digitados.

HIDDEN: Cria um campo oculto. É útil para passar uma ViewBag no

ASP.NET MVC.

DATE: Cria um campo para selecionar uma data.

RANGE: Cria um slider (deslizador, potenciômetro).

EMAIL: Cria uma caixa de texto para e-mail.

COLOR: Cria um ColorPicker. É um selecionador de cor.

SEARCH: Cria uma caixa de texto para pesquisa.

TEL: Cria um campo de texto para telefone.

Inserindo campos:
Texto
Imagem

Botão

Sem atributos definidos, fica estranho mesmo.

Radio

File
Submit

CheckBox:
Reset

Password
Hidden

O hidden não é visível.

Date
Range

Email
Color

Search
Tel

Atributo VALUE
Por padrão, os navegadores exibem uma caixa de texto vazia no
formulário. Caso exista a necessidade de exibir um padrão, deve-se
usar o atributo value (ou placeholder).
RadioButtons e CheckBoxes
Em um formulário de pedido online, você pode usar um conjunto de
RadioButtons para verificar a bandeira do cartão de crédito do
cliente.

Perceba que para o radio ou checkbox começar selecionado por

padrão, é necessário o atributo CHECKED.

E esse é o checkbox:
TextArea
A tag <TEXTAREA> </TEXTAREA> cria uma caixa de texto maior,
permitindo linhas e colunas.
Os atributos ROWS, que especifica o número de linhas (altura) e
COLS, que especifica o número de colunas (largura) da área de
texto, são utilizados com essa tag.
Botões SUBMIT e RESET
Submit é um botão de enviar. Em um formulário, o botão submit
envia ao servidor WEB a informação digitada pelo usuário para ser
processada pelo script CGI correspondente.
O botão RESET é o botão de limpar. Esse botão apaga as
informações inseridas em todos os campos.

Inserindo um campo oculto

Agora, você verá como adicionar um campo oculto em um
formulário para enviar uma palavra-chave, um número de validação
ou qualquer string, para o script CGI.
Por exemplo, no formulário de pedidos online, podemos utilizar um
campo oculto para enviar uma palavra-chave, que valide o número
do CPF do cliente.
Para adicionar este campo, incluímos o valor HIDDEN no atributo
type.

ListBox e ComboBox
Ambas as opções são criadas pela tag <SELECT> </SELECT>.

Multiple: É o atributo que exibe a lista sempre aberta.

Name: Atributo que identifica a lista.
Option: Cria cada item da lista.
Selected: Indica o valor padrão da lista.
Value: Valor que será retornado.

A lista de opções (Listbox) serve para controlar o número de opções

exibidas, pois é possível definir sua altura com o atributo SIZE.

Se você remover o atributo SIZE, a lista se torna um combobox.

 FRAMES
Frames, molduras ou quadros são utilizados para dividir a janela do
navegador em diferentes partes e, cada uma delas, pode ser
atualizada separadamente, pois carrega um documento HTML
diferente.
Frames são como moldes onde as páginas WEB são obrigadas a
se encaixar.
O Frame Document ou Frameset é o arquivo que define a estrutura
e a distribuição dos frames do site. Normalmente, este arquivo
contém a página principal.
A tag <FRAMESET>
Para criar frames, você usa a tag <FRAMESET> após o <BODY>.

O Visual Studio Code provavelmente reclama do uso de frames

porque hoje em dia as <DIV> substituíram os frames, sem falar que
dividir a página WEB assim é mexer no layout dela, que é coisa do
CSS.

Observe que o código contém instruções para cada frame abrir um

documento HTML diferente.
Além disso, na tag <FRAMESET>, você define o tamanho de cada
um dos frames com os atributos COLS e ROWS que especificam
largura e altura.
O primeiro e terceiro frames estão especificados como 25% do
tamanho da tela. O asterisco (*) colocado no frame do meio, indica
que ele usará o espaço restante, que neste caso é de 50%.

Atributos
SRC (source): Especifica a URL que você deseja carregar em um
frame.

MARGIN WIDTH: Especifica as margens direita e esquerda

(largura) do conteúdo em um frame. Seu valor é especificado em
pixels.

MARGIN HEIGHT: Especifica as margens superior e inferior (altura)

do conteúdo de um frame em pixels.

SCROLLING: Adiciona uma barra de rolagem em um frame.

NORESIZE: Impede que o usuário redimensione um frame.

Atributo NAME
Agora você aprenderá a apontar frames, ou seja, direcionar o link
para abrir no frame desejado.
Quando usamos frames, podemos querer manter o conteúdo de um
e carregar páginas WEB em outro. Para fazer isso, apontamos o
link para um frame.
O frame em que o conteúdo permanece constante é chamado de
estático e o outro, no qual o conteúdo muda, é chamado de
dinâmico.
Para apontar frames, você precisa primeiro especificar nomes para
os frames, usando o atributo NAME com a tag FRAME.
O código que você usa para especificar o nome Main para um
frame que exibirá o arquivo phil.html é
<FRAME SRC=”phil” NAME=”main”>

Apontando um FRAME
Depois de especificar um nome para um frame, você pode
especificá-lo como frame alvo em um link.
Para isto, você usa o atributo TARGET com a tag ANCHOR - link.
<A HREF = “url” TARGET = “nome_frame”>

O atributo TARGET pode possuir um entre os seguintes quatro

valores:

_blank: Abre o link em uma nova janela.

_self: Abre o link no mesmo frame.
_parent: Carrega a página no frame principal.
_top: Carrega a página no frame mais alto da página.
 A tag META e seus atributos
Metadados são informações sobre seus dados. Neste caso, a tag
<META> fornece dados sobre seu documento HTML.
Estes dados, no entanto, não são exibidos na tela para o usuário
final. Eles servem para descrever as definições de página, palavras-
chave, informações sobre o autor, quando foi a última modificação e
outras informações relevantes.
A tag <META> deve ser inserida entre as tags <HEAD> </HEAD>.
Todos os dados podem ser utilizados pelos navegadores, sistemas
de busca e outros serviços.

Atributo CONTENT
O atributo content aceita somente texto e especifica o conteúdo da
informação META. Seu valor depende do valor dos atributos NAME
ou HTTP-EQUIV. Veja os dois casos:

Atributo NAME
O atributo NAME fornece um nome para a informação no atributo
CONTENT.

Os valores do atributo NAME podem ser:

• Author: Informa o(a) autor(a) do documento.

• Description: Descreve o documento.
• Keywords: Define as palavras-chave que descrevem o
documento.
• Generator: Define o programa utilizado para gerar o
documento.
• Robots: Define regras para os robôs (programas utilizados em
sistemas de busca).
• Copyright: Define informações de direitos autorais do
documento.
Atributo HTTP-EQUIV
O atributo HTTP-EQUIV fornece um cabeçalho HTTP para a
informação no atributo content.

Os valores de HTTP-EQUIV podem ser:

• Content type: Define o tipo do documento (text/HTML).

• Expires: Define quando o documento será considerado
obsoleto.
• Refresh: Define o tempo para que a sua página WEB seja
recarregada.
• Set-cookie: Define o valor de um cookie.

Exemplo:

Atributo CHARSET
O atributo CHARSET define a tabela de caracteres que o
navegador deve utilizar para interpretar a sua página WEB.
Sempre utilize UTF-8.
Exemplo META

IFRAME
Eu sinceramente não sei qual é a diferença entre <FRAME> e
<IFRAME>. Bom, no <IFRAME> você pode exibir uma outra página
WEB em uma área da sua página WEB.
No exemplo abaixo, estou mostrando o site do Bootstrap em um
pedaço da minha página:
Vamos aumentar esse IFrame:
 Trabalhando com mídia no HTML
Você pode inserir arquivos de mídia no HTML como vídeos e
áudios.
Para inserir um vídeo salvo no seu PC:
Para inserir um áudio salvo no seu PC:

O atributo controls faz o controle do áudio como tocar, parar,

pausar, entre outros.
Tocar o áudio automaticamente:

Autoplay faz o áudio ser tocado automaticamente.

Entretanto, os navegadores que usam o Chromium (engine de
navegador) não permitirão com que o áudio seja tocado
automaticamente.
Usam o Chromium: Microsoft Edge e Google Chrome.
O Mozilla Firefox usa o Gecko como motor.

Enfim, você pode tocar automaticamente o áudio se ele estiver

mutado:

É importante que você veja se os formatos de áudio ou vídeo são

compatíveis com o navegador.

Vídeo:
• MPEG: Primeiro formato de vídeo popular na WEB. Não é
mais suportado pelo HTML.

• AVI: Feito pela Microsoft, é comumente usado em câmeras e

hardware de TV. É bom para computadores Windows, mas
não é bom para navegadores.
 • WMV: O mesmo que o AVI.

• MOV: Feito pela Apple, comumente usado em câmeras e

hardwares de TV. É bom para computadores da Apple, mas
ruim para navegadores.

• RM ou RAM: Permite streaming de vídeo com baixa banda.

Não funciona em navegadores WEB.

• SWF ou FLV: Geralmente requer um plug-in para funcionar

em navegadores.

• OGG: Suportado pelo HTML.

• WEBM: Feito por Mozilla, Opera, Adobe e Google. É

suportado pelo HTML.

• MP4: Comumente usado em câmeras e hardware de TV. É

suportado por todos os navegadores e é o formato
recomendado pelo Youtube.

Áudio:
• MIDI: Formato principal para todos os dispositivos eletrônicos
como sintetizadores e caixas de som de computadores. Os
arquivos MIDI não contêm sons, mas possuem notas digitais
que podem ser tocadas por produtos eletrônicos. É bom para
todos os computadores e hardware de música, mas não
navegadores WEB.

• RM ou RAM: Não funciona em navegadores WEB.

• WMA: Feito pela Microsoft. É bom para computadores

Windows, mas não é bom para navegadores.

• AAC: Feito pela Apple como padrão para o iTunes. É bom

para computadores Apple, mas ruim para navegadores.
 • WAV: Feito por IBM e Microsoft. É bom para sistemas
operacionais Windows, Mac OS e Linux. É suportado pelo
HTML.

• OGG: Suportado pelo HTML.

• MP3: Os arquivos MP3 são na verdade a parte sonora dos

arquivos MPEG. MP3 é o formato mais popular para
tocadores de música. Combina boa compressão (arquivos
pequenos) com alta qualidade. Suportado por todos os
navegadores.

• MP4: É um formato de vídeo, mas também pode ser usado

como áudio. Suportado em todos os navegadores.

Vídeos do Youtube na sua página HTML

Se você quer que sua página WEB possua vídeos do Youtube, você
utiliza a tag <IFrame>.
Source é onde você deixa o link do vídeo.
Width e Height são largura e altura, respectivamente.
Mas há umas regras para o vídeo funcionar na sua página.
O link do vídeo do Youtube deve possuir “embed” no meio.
www.youtube.com/embed/ID_DO_VÍDEO

Depois do “embed”, você coloca o ID do vídeo (sem o “watch?v=” e

sem o “channel=NomeDoCanal”).
 Publicação do documento HTML
Para tornar os documentos HTML disponíveis na WEB, precisamos
fazer uma publicação ou upload do conteúdo.
A publicação dos documentos consiste no envio de todo o material
produzido para um servidor. Isso significa criar um site que será
disponibilizado por meio de um endereço URL.
O nome dado ao armazenamento dos arquivos é hospedagem. A
hospedagem costuma ser feita por empresas especializadas.
Existem hospedagens gratuitas. No entanto, elas são vinculadas à
propaganda ou podem gerar transtorno.
Ao publicar um material, é indicado que você adquira um domínio
para tornar mais fácil a busca e a exposição do conteúdo publicado.

PARABÉNS!!!!
Se você chegou até aqui, o seu conhecimento
em HTML é considerado avançado!

Você já conhece o suficiente para construir páginas para qualquer

situação!
Todavia, ainda não é o suficiente! 😊
Você precisa deixar as suas páginas mais atraentes!
Se o seu site for HTML puro, ninguém vai querer acessar!
Para melhorar a aparência do seu site, continue com o CSS.
 CSS
Cascade Style Sheets
Folha de Estilo em Cascata

Se as tags HTML definem a estrutura das páginas WEB, o CSS é

responsável por sua aparência.
Nesse sentido, o CSS foi criado para suprir a necessidade de dar
mais autonomia à formatação de conteúdo. Além disso, o CSS
facilita o reuso das regras.
O CSS não é uma linguagem de marcação e tampouco uma
linguagem de programação. O CSS é uma linguagem de
estilização.
Muitas tags HTML possuem o atributo STYLE. Esse atributo estiliza
o elemento criado por aquela tag.
Por exemplo, podemos utilizar o atributo style para estilizar um
parágrafo:
Para alterar a cor de fundo da página:

Essa forma de utilizar o CSS, que é através de um atributo em uma

linha, é chamada de CSS inline.
O CSS inline é fazer a estilização em uma linha de código, que não
é recomendado.
Imagine várias páginas com vários parágrafos e cada parágrafo tem
uma fonte. Daí um tempo passa e você precisa trocar a fonte. Você
vai trocar a fonte de cada parágrafo de cada página? Linha por
linha? Então o CSS inline não é bom, pois toma muito tempo e você
ainda pode esquecer alguns parágrafos.
Há outra maneira de trabalhar com o CSS, que é o CSS
incorporado. Observe:

Dentro da tag <HEAD>, eu abri uma tag <STYLE>. Dentro dessa

tag style, eu vou obrigar que um elemento HTML (que no caso é o
parágrafo) tenha um estilo padrão para aquela página HTML.
No exemplo acima, eu estou dizendo que todos os parágrafos
dessa página serão da cor azul e terão um tamanho de 30 pixels.
O CSS incorporado é um jeito melhor de trabalhar com o CSS do
que o CSS inline. No CSS incorporado, se eu quiser alterar a fonte
de todos os parágrafos, eu vou alterar essa fonte uma vez por
página. Dessa forma, eu levarei menos tempo para redefinir o estilo
da página WEB.

Entretanto, o CSS incorporado ainda não é recomendado. Em um

site grande com vários estilos de vários elementos, eu teria que
deixar a tag HEAD gigante para colocar todos os estilos.
É uma boa prática não misturar tudo no mesmo arquivo. É por isso
que a gente só trabalha com CSS linkado (ou CSS externo).
No caso do CSS linkado, há dois arquivos:
Um arquivo HTML e um arquivo CSS.
Nós criamos um arquivo CSS e linkamos esse arquivo no arquivo
HTML. Fazemos uma ponte entre os dois arquivos, permitindo com
que o HTML reconheça o CSS.
Vamos criar o nosso arquivo CSS na mesma pasta:

Agora vamos linkar esse arquivo CSS no arquivo HTML:

Para linkar, utilizamos a tag <LINK> dentro da tag <HEAD>. O
atributo REL define o relacionamento entre um recurso (arquivo)
linkado e o documento atual (que no caso é o HTML). REL meio
que nomeia o relacionamento entre os dois arquivos.

LINK REL=”STYLESHEET” importa um arquivo css.

O atributo TYPE define o tipo de arquivo que está sendo linkado. No

nosso caso, é um tipo texto/css, ou seja, é um arquivo texto
formatado para estilizar páginas WEB.
O atributo HREF diz o local onde está o arquivo. No HREF, você
passa o caminho desse arquivo ou só o nome.
Vamos alterar a cor de todos os parágrafos das páginas que
linkarem com o nosso arquivo CSS:
 Atributos ou propriedades e classes
Atributos
Os atributos ou propriedades são informações de um elemento que
permitem a formatação total de sua aparência, posição, dimensão e
outros aspectos.

Classes
Já as classes são um conjunto de atributos predefinidos com o
objetivo de formatar um elemento. Esse conjunto de informações
facilita a configuração dos elementos HTML.
Podemos aplicar a mesma classe em vários elementos distintos.
Lembre-se que as classes são um tipo de seletor!
Classes do CSS não são como classes de linguagens de
programação!!!!!
Seletores
Os seletores são a declaração que o CSS utiliza para identificar
elementos HTML. Por meio dos seletores, podemos aplicar a
formatação em quase qualquer parte da página WEB.

A estrutura para regras do CSS é:

Seletor { propriedade : valor }

Os mais importantes seletores:

Seletor Formato Descrição
Universal * Qualquer elemento
Tipo elemento <e> Seleciona qualquer
elemento <e>
Classe . Seleciona elementos
que contêm a classe
ID # Seleciona os
elementos
identificados com o
ID
Link a Seleciona pseudo-
class link
Hover :hover É aplicada quando
posicionamos o
mouse sobre o
elemento.

Propriedades da folha de estilo

Na folha de estilo, a propriedade class vem procedida por um ponto
(.)

.nomeDaClasse { propriedade : valor; }

No HTML:
 <p class=”nomeDaClasse”> Seu texto </p>

Sobre o ID: Uma coisa muito importante que devemos saber sobre
o ID é que ele deve ser único nos elementos. Duas tags não podem
ter o mesmo ID (mas podem ter a mesma classe).
O ID é um identificador e o ID não pode se repetir em uma página
WEB.

Exemplo de ID no arquivo CSS:

#menu { border: 5px; }
#footer { top: 30px; }

Exemplo de um elemento com um ID no HTML:

<p id=”paragrafo1”> seu texto </p>

Inserção de imagens
Podemos inserir imagens na página WEB por meio de CSS. A
propriedade que possibilita a inserção de imagem pelo CSS é o
background. A propriedade background é dividida de vários modos
e pode assumir valores específicos.

Background-color: Define a cor do fundo do elemento.

Background-image: Insere uma imagem como fundo do elemento.
Background-size: Configura o tamanho da imagem do elemento.
Background-position: Define a posição da imagem em relação à
caixa.
Background-attachment: Define se a imagem de fundo rolará com a
tela.
Background-repeat: Define se a imagem de fundo pode se repetir
ou não.

Formatação de listas com propriedades CSS

List-Style: Modifica a aparência das listas.
List-Style-Type: Configura o marcador que a lista irá utilizar.

Sobre a estilização da lista, não há muita coisa importante para

fazer.

Basicamente, o CSS mexe com largura, altura, cor, alinhamento,

fonte e outras propriedades. Essas propriedades meio que se
repetem em cada elemento.

Tableless e HTML5
Tableless
Um site que utiliza os padrões desenvolvidos pelo W3C é
considerado um site tableless. Desse modo, um site tableless não
usa tabelas na composição de seu layout.
No lugar de tabelas, um site tableless utiliza as três camadas
(informação, formatação e comportamento).
Em HTML, existe um elemento que auxilia a composição de sites
tableless.
As divs <DIV> são essenciais na composição de sites tableless!

DIVs
Se você conhece o Windows Forms, WPF ou JavaFX, eu te digo
que uma div seria um PANEL, só que em HTML.
Uma div seria uma divisão na sua página WEB. Cada divisão terá
sua altura, largura, conteúdo... Você define.

E as divs podem ficar dentro de outras divs.

O nome div vem de divisão. Nesse sentido, a função div é dividir

trechos de código HTML. Dessa forma, podemos incluir outros
elementos dentro da tag div e formatar o bloco de elementos
individualmente. Por exemplo: Imagens, links, textos e listas.
Em outras palavras, a div serve como container para os outros
elementos. Tais containers possibilitam a criação de camadas para
organizar a sua página WEB.
Ficou uma div gigantesca porque a imagem que escolhi é muito
grande, sem falar que eu não defini as dimensões da div para limitar
o espaço.
Identificação da div

Agora estou limitando a div para que tenha uma altura de 170 pixels
e largura de 100 pixels.
Funcionou com o texto, mas não funcionou com a imagem.
Talvez, para resolver isso, é necessário criar uma classe para a
imagem e limitar as dimensões nessa própria classe.

Continuando...
(Mas esqueci de mencionar): O seletor ID é geralmente usado para
JavaScript, e não, CSS.
É uma convenção usar o seletor ID somente para scripts PHP ou
Javascript (preferivelmente Javascript).

Formatação em DIVs diferentes

Para usar a mesma formatação em várias DIVs diferentes,
podemos utilizar o atributo CLASS.
Por exemplo, se precisarmos usar a mesma formatação em vários
blocos de texto da página:
E você pode usar ID e Class juntos:

Por que usar HTML5?

• Melhor tratamento de exceção.
• Mais tags para substituir scripts.
• Independência da plataforma.
• Redução das necessidades de plug-ins externos.

Editores de texto para HTML, Javascript e CSS:

Sublime Text, DreamWeaver, Coda, NotePad++ e Visual Studio
Code.

O melhor: Visual Studio Code.

 Container principal
Nosso próximo passo é criar um container. Em outras palavras,
iremos criar uma caixa para todos os elementos.
Existem várias tags que podem servir de container para outros
elementos: <SECTION>, <ARTICLE> e <MAIN>. Usaremos <DIV>
porque estamos familiarizados (e eu raramente usei essas três
citadas).

Observe que utilizamos o atributo class para a div e nomeamos a

div como ‘container-principal’. Essa medida irá facilitar a aplicação
de estilos nos elementos que estiverem dentro da div.

Último exemplo de classe antes de prosseguir:

Às vezes um atributo falha porque o valor de outro atributo tem
conflito com o seu valor.

Ou às vezes os erros do CSS simplesmente não fazem sentido

Eu não sei por que o “larger” não funcionou...
 MENU
Todo site precisa de um menu de navegação. De modo geral, o
menu fica localizado no topo do site, próximo ao logotipo. Para isso,
existem tags específicas.

Com a chegada do HTML5, algumas tags foram criadas para dar

maior entendimento ao código de uma página HTML. A tag
<HEADER> foi uma delas.
O objetivo da tag <HEADER> é encabeçar o conteúdo do site.
Assim como as divs, a tag <HEADER> é o container para outros
elementos.
Passo-a-passo para fazer um menu:
1- Crie o container HEADER.

2- Após criar o container HEADER, insira uma DIV para o

logotipo da empresa.
3- Antes de formatar as divs, iremos adicionar a imagem do logo.
Usaremos a tag <IMG>. Você irá encontrar a imagem
logo.png na mesma pasta que o HTML ou em uma pasta de
imagens que você criar.

4- Para criar um link para a home do site, adicionaremos a

imagem dentro da tag <a>.

Desse modo, quando houver um clique no logotipo, ele

retornará para home.

Importante comentar: Index.html costuma ser o nome padrão

para páginas HTML que são principais (home pages).
Index.HTML costuma ser o nome de página de início.

5- Outra tag que ganhou destaque no HTML5 é a tag <NAV>. O

objetivo da tag <NAV> é concentrar os links que formam a
navegação do site. Usaremos a tag com uma lista para
montar o menu de navegação.
6- Em cada item da lista <li>, também adicionamos a tag <a>,
direcionando cada um para a respectiva página.

7- Como não adicionamos nenhuma formatação na folha de

estilo (arquivo CSS), essa é a aparência atual da página:
 O logotipo ficou muito grande... :/

Margin e Padding
Agora que já criamos a base da estrutura, que tal melhorarmos a
aparência de nossa página? Abra a página de estilo para definirmos
valores para algumas propriedades.
Por padrão, alguns elementos HTML já vêm com valores
predefinidos em suas propriedades. Por exemplo, os parágrafos
<p> possuem margin e padding nativos. Desse modo, a página
mantém o mínimo de legibilidade mesmo que o CSS não seja
carregado.
Margin

Unidades: Pixel, porcentagem (%), cm, ponto e mm.

A propriedade Margin do CSS corresponde à dimensão da margem

de cada elemento. Além disso, a Magin evita que os elementos
fiquem grudados uns nos outros.

Padding

Padding é o espaçamento interno do elemento.

Unidades: Pixel, porcentagem (%), cm, ponto e mm.
Vimos que alguns elementos possuem padding e margin nativos.
Por esse motivo, vamos iniciar resetando o margin e o padding de
nossa página.

O seletor * é um seletor universal e representa todos os elementos.

Você se lembra da class que colocamos na primeira div que
criamos?
Vamos usar essa class para alterar a cor e o estilo da fonte que
nossa página terá. Para isso, utilizaremos as propriedades COLOR
e FONT-FAMILY. A propriedade COLOR define a cor do texto.
A cor pode ser por nome da cor ou hexadecimal.

Definição das propriedades de uma classe

Temos de utilizar o seletor ponto (.) mais o nome da classe para
definir as propriedades de uma class.
No caso acima, estamos definindo que a fonte (letra) dos elementos
que tiverem a classe “container-principal” será da família verdana e
a cor será uma tonalidade de cinza.
 HEADER
Agora, vamos inserir uma formatação para o HEADER.
A tag HEADER também pode ser usada como seletor.
Desse modo, podemos utilizar o nome da tag para inserir um estilo
por meio do CSS. No entanto, quando fazemos isso, todos os
elementos criados com essa tag terão o mesmo estilo.
Como iremos ter apenas um header em cada página, isso não será
um problema. As propriedades da formatação:

O Header formata o topo da página.

 POSITION
O CSS possui uma propriedade chamada position.
A propriedade position trabalha com coordenadas comandadas
pelas seguintes propriedades:
• Top
• Left
• Right
• Bottom
Por definição, os elementos começam todos alinhados à esquerda
(LEFT). Caso algum valor seja definido para left, não faz sentido
atribuir o valor para right. O mesmo ocorre com relação a top e
bottom. Se fizermos isso, ele dará a prioridade para o top e o left.
A propriedade position precisa de um ponto inicial para calcular a
coordenada e posicionar na tela.
Além disso, a propriedade position possui três valores:

FIXED: Fixa o elemento nas coordenadas que atribuirmos. Mesmo

com a rolagem da tela, o elemento permanece fixo da posição
definida.

RELATIVE: O ponto inicial para o cálculo de elementos com

position definida como relative é o canto superior esquerdo do
próprio elemento.

ABSOLUTE: Diferente do relative, o valor absolute tem como ponto

inicial o elemento em que ele está inserido – seu pai.

Exemplo ABSOLUTE:
Se a div B está dentro da div A, o ponto inicial da div B é o canto
superior esquerdo da div A.
Vamos posicionar a nossa div logo para ficar claro.
No exemplo que acabamos de ver, definimos a position como
absolute. Isso significa que a div logotipo terá como coordenada
inicial o top e left do container do qual faz parte – o header.
Como o header tem o tamanho da janela e está no topo da página,
a div logo se posicionará no canto superior esquerdo da tela.
Também definimos a largura da div logo em 300px e altura como
auto. Assim, a div irá se adequar de modo proporcional ao valor da
largura.

FORMATAÇÃO DE IMAGEM
Agora, precisamos formatar a imagem que inserimos. Observe que
a imagem está maior do que a largura que definimos para a div
logo. Para isso, vamos usar uma técnica conhecida como
aninhamento (NESTING).
Como já temos o seletor class para a nossa div, não precisamos
criar outro para a imagem. Iremos aninhar outro seletor. Nesse
caso, pode ser o próprio elemento IMG:
Perceba que não criamos outra class para <IMG>, apenas
utilizamos a técnica de aninhamento para fazer a configuração.
Observe também que o Width foi definido como 90%. Isso significa
90% de 300px, que corresponde à largura da div logo, e um margin-
left de 10%.
Portanto, a imagem do logo terá 280px de largura e 20px de
margin-left.

Curiosidade: 1em = 16px.

 APARÊNCIA DO MENU
Para finalizar a formatação do nosso topo, precisamos definir a
aparência do menu <NAV>.
 1- Usaremos, novamente, uma tag como seletor. Nesse caso,
será a tag <NAV> juntamente com a técnica do aninhamento
para definir as propriedades dos itens da lista <UL>/<LI> e
dos links <a>.

2- O FLOAT corresponde à flutuação de um elemento. Essa

propriedade trabalha muito bem com o position relative e é
indispensável para o desenvolvimento sem tabelas.

No caso do NAV, usamos o FLOAT LEFT nas linhas para

forçar os itens <LI> de nossa lista <UL> a flutuar para a
esquerda. Com isso, as opções do NAV permanecem em uma
mesma linha.

3- Nesse caso, o margin é utilizado para separar um item do

outro.

4- Aumentamos a letra do menu por meio da propriedade font-

size.

5- Outro ponto importante é que utilizamos o :hover para atribuir

uma cor diferente quando o usuário passar o mouse sobre o
menu.

SECTION
Agora que já definimos o estilo para o topo da página, iremos
adicionar a imagem principal da HOME.
Em vez de usarmos uma div como container para a imagem
principal do site, utilizaremos a tag <SECTION>.
 POP-UPs
Já configuramos o topo e a imagem principal. Agora vamos inserir
textos na página.
Para deixar a página mais elegante e com mais interação,
utilizaremos POP-UPs para mostrar os textos de conteúdo da
home.
O POP-UP que queremos inserir não vai abrir em uma janela nova
do navegador. Vamos utilizar um conceito conhecido como Janela
Modal. A Janela Modal é uma janela secundária ou janela filha da
tela principal. A função dessa janela secundária é fornecer
informações importantes ao usuário.
Para isso, criaremos três DIVs que servirão de container para os
textos da página. Vejamos:

Observe que criamos três DIVs com Ids distintas, mas com classes
iguais.
Após criar as três DIVs e atribuir-lhes ID e CLASS, chegou a hora
de adicionar os elementos de cada Pop-UP.
Para a box com o texto, vamos criar uma div. Dentro dessa div,
vamos inserir as tags:
• <a> com a função de fechar o pop-up.
• <h1> para o título do conteúdo.
• <p> para definir um novo parágrafo.

Também vamos colocar dois atributos – O HREF e CLASS -, com

os seguintes valores:
Observe que adicionamos a letra X como texto do link. A letra X
funcionará como um botão de fechar. Em breve, explicaremos como
se dará esse processo de fechamento.
meuEstilo.css:
Explicação de alguns trechos:
Position: fixed;
Observe que a propriedade position com o valor fixed indica que o
elemento ficará fixo na posição determinada pelas coordenadas
TOP, RIGHT, BOTTOM e LEFT.
Dessa forma, caso haja rolagem na tela, o elemento ficará na
posição indicada, sem se movimentar com o conteúdo da página.

TOP: 0, RIGHT: 0, BOTTOM: 0, LEFT: 0.

Para atribuir o tamanho total da janela a um elemento, podemos
utilizar um pequeno truque.
Ao iniciar todas as coordenadas com zero, estamos definindo o
tamanho 100% para a largura e 100% para a altura. Para que o
elemento tenha tamanho total na tela (total da janela), a
propriedade position deve estar com o valor fixed.
Se esse valor for absolute ou relative, o tamanho do elemento será
equivalente ao pai do elemento. Com isso, o elemento terá o
tamanho da DIV em que estiver contido.
A div da janela está na frente de todo o conteúdo da página por
conta do Z-Index.
Z-Index seria o EIXO Z, ou seja, saindo para fora da tela.
Quanto maior o valor de Z-Index, mais para frente o elemento
ficará.

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;
Transition: opacity 400ms ease-in;

Atualmente, existem inúmeros navegadores. Cada navegador utiliza

um motor de renderização.

Um motor de renderização é um software que transforma linguagem

de marcação em informação de formatação. Com isso, o conteúdo
formatado fica visível em monitores e demais aparelhos que
possuem navegadores.

O Safari e o Chrome utilizam o WEBKIT. Já o navegador Mozilla

Firefox utiliza o prefixo ‘moz’ para referenciar o seu motor de
renderização. Também temos os prefixos ‘O’ de Opera e ‘MS’ de
Microsoft Internet Explorer (mas eu não sei qual é o do EDGE hoje.
Talvez seja webkit também).
 TRANSITIONS
Agora que sabemos o que é renderização, podemos explicar o
trecho do código a seguir:

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;
Transition: opacity 400ms ease-in;
Pointer-events: none;
Display: none;

O CSS TRANSITIONS permite que as mudanças nos valores das

propriedades CSS ocorram suavemente, com uma duração
determinada.

Neste caso, utilizaremos a propriedade transition para realizar a

mudança de valor na propriedade OPACITY.
Esse valor foi definido justamente com as demais propriedades da
classe .modalDialog e seu valor inicial é zero, ou seja, o elemento
está totalmente transparente.
Com a propriedade transition, estamos informando ao navegador
que o motor de renderização deve realizar a troca de forma suave,
quando o elemento com a classe modalDialog sofrer uma mudança
na propriedade opacity.
A troca deve ser feita em 400ms, utilizando o efeito ease-in para
determinar o ritmo em que a transição será feita.
Transition pode ser:
• Linear
• Ease
• Ease-in
• Ease-out
• Ease-in-out

POINTER-EVENTS
A propriedade pointer-events com o valor ‘none’ informa ao
navegador que os elementos que possuem a classe modalDialog
não devem ser alvo de eventos realizados pelo mouse. Por
exemplo: Cliques e hovers.

Desse modo, as DIVs como essa classe modalDialog têm o

tamanho total da janela e estão acima de todos os outros elementos
(Bring to front), por conta do Z-INDEX com o valor de 9999. Com
isso, qualquer interação com os elementos abaixo dela seria
impossível.
Para que isso não ocorra, definimos o valor ‘none’ para o pointer-
events. O valor indica ao navegador que o elemento não deve
receber eventos realizados pelo mouse.

DISPLAY
Para finalizar, a propriedade display permite que você indique ao
navegador como os elementos devem ser renderizados pelo motor.
Existem cerca de vinte valores possíveis para o display, iremos
utilizar apenas BLOCK e NONE.

BLOCK
Indica ao navegador que o elemento deve ser renderizado em
bloco, juntamente com seus filhos ou elementos contidos nele.
NONE
Permite desativar a exibição do elemento. Desse modo, o
documento é renderizado como se o elemento não existisse.

As DIVs e POP-UPs ficam invisíveis com OPACITY = 0 e DISPLAY

= NONE.

ÂNCORA
Quando trabalhamos com âncoras em um site, utilizamos a tag <A>
para nos auxiliar.
Dito de outro modo, podemos utilizar um ID como valor do HREF de
uma tag <a>. Desse modo, criamos uma ligação ou âncora da tag
<a> com o elemento que possui o ID informado.
Ao clicar no link, o usuário é direcionado para a posição em que o
elemento está. Com isso, o usuário visualiza o conteúdo que deseja
de forma rápida.
Podemos relacionar esse recurso a um objeto, de forma a
manipular seu comportamento com o CSS. Para tanto, precisamos
da pseudo-classe:TARGET.

PSEUDO-CLASSE
A pseudo-classe é uma palavra adicionada a seletores. Tal palavra
indica o estado especial de um elemento ativo. Neste caso, quando
clicamos no link (tag<a>) é ativada a ligação (âncora), e a tela é
direcionada até o local em que o elemento que possui o mesmo ID
do atributo HEF da tag <a> está. Com isso, esse elemento pode ser
manipulado pelo seletor :TARGET.
1- Estamos informando ao navegador que a DIV ficará visível
(display: block).

2- A opacidade mudará para 1 (opacity:1) quando clicarmos no

link ou na âncora. Isso vai ocorrer porque o clique ativará o
transition colocado anteriormente na classe modalDialog.
Desse modo, o POP-UP vai aparecer suavemente.

3- A propriedade pointer-events foi modificada para auto,

possibilitando a interação com as DIVs.

ELEMENTOS DO POP-UP
Para definir os valores para a DIV, para a tag <p> e para a imagem
inserida no primeiro POP-UP, iremos utilizar a técnica do
aninhamento.
Também declaramos a propriedade margin apenas em uma linha.
Nesse caso, estamos informando no navegador que a DIV terá 10%
de MARGIN-TOP.
Nas demais, o navegador pode realizar o cálculo para centralizar:
• Margin-top – 10%;
• Margin-right – auto;
• Margin-bottom – auto;
• Margin-left – auto.

Para declarar o padding (espaçamento dentro da DIV) foram

atribuídos quatro valores em uma mesma propriedade.
Essa forma de definir a propriedade é o mesmo que:
• Padding-top 5px
• Padding-right 20px
• Padding-bottom 13px
• Padding-left 20px

A propriedade border-radius permite que as extremidades do

elemento sejam arredondadas de acordo com o valor atribuído a
elas.
Como nas propriedades mencionadas anteriormente, também
podemos definir valores em apenas uma linha para o border-radius.
Observe que demos o valor de 10px para todas as bordas do
elemento.

Antes de vermos como ficarão os pop-ups da página home,

precisamos configurar o botão que terá a função de fechar o pop-
up.

*Você se lembra da tag <a> que inserimos em cada um dos POP-

UPs lá no HTML? Nesse caso, o ID #close é a chave para que a
DIV com a classe modalDialog fique invisível novamente.
Em outras palavras, quando clicamos na tag <a> com o ID #close, o
estado :TARGET da DIV com a classe modalDialog será removido.
Isso irá forçar a DIV a voltar para o estado inicial em que as
propriedades opacity 0 e display none estão trabalhando para que o
elemento fique invisível.

*Também adicionamos a classe close na tag <a>. Isso nos permitirá

formatar o botão para fechar o POP-UP.
Assim como na formatação da DIV, indicamos ao navegador como
ele deve renderizar a borda do elemento.

LINE-HEIGHT: Define a altura que cada linha do texto terá.

No caso do botão CLOSE, iremos ajustar a altura que a letra X terá
dentro do elemento.

Line-Height: 10px;

Line-Height: 25px;

(Ou é ao contrário. Teste aí).

TEXT-ALIGN: Alinha o texto. Os valores são:
• Left (Padrão)
• Center
• Right
• Justify
• Initical
• Inherit (Herda o alinhamento do pai).

TEXT-DECORATION: Permite inserir formatação ao texto por meio

de CSS. Por exemplo, podemos inserir underline.
Para dar destaque aos links, toda tag <a> possui cor diferente e
underline quando é adicionada. Para eliminar esse comportamento,
usamos a propriedade text-decoration com valor ‘none’.

BORDER-RADIUS: Indicamos ao navegador como deve renderizar

o elemento.

ATIVAÇÃO DO POP-UP
Agora que já finalizamos a formatação do pop-up, iremos inserir as
tags para ativá-lo.
Assim como a tag HEADER indica o cabeçalho do conteúdo, existe
uma tag que indica o rodapé da página.
Dessa forma, podemos dividir a página por sessões e mantê-la
organizada. O FOOTER(rodapé) é a tag que tem essa função.
1- Insere a tag footer.

2- O footer será o container em que adicionaremos as âncoras

para ativar os pop-ups. Para contextualizar e despertar o
interesse do usuário, iremos inserir um resumo para cada
tema abordado dentro dos pop-ups.

3- Desse modo, precisamos criar uma DIV para cada POP-UP.

Usaremos o atributo ‘class’ para definir um estilo comum aos
pop-ups.

4- Após criar as DIVs, crie o título de cada texto. Para isso, use a
tag <H3>.

5- Utilizaremos <p> como container para textos e <a> para criar

âncora para os textos completos.

6- Observe que adicionamos a tag <a> no final de cada texto.

Veja que o HREF possui o ID das janelas modais que
criamos. Aqui está o segredo.

7- Ao clicar em um desses links, o navegador direcionará a

página para a posição da DIV que está no HREF de cada tag
 <A>. Desse modo, o estado da DIV será alterado para target
:target.

8- Como as DIVs possuem a classe modalDialog, o modo da

pseudo-classe modalDialog : Target será ativado.

9- Com isso, a propriedade opacity muda de 0 para 1, e a

propriedade display muda de ‘none’ para ‘block’.

Assim, o POP-UP desejado se torna visível.

 Destaque nos links
Precisamos dar destaque nos links, certo? Com o destaque,
podemos deixar os links mais agradáveis e elegantes.
Vamos começar pelo footer.
Lembrando que o footer é o rodapé da página:
A largura do footer (width) será de 100%. Desse modo, o footer
terá o tamanho do container em que está inserido. Como a div
container-principal tem o tamanho da janela, o footer terá a
largura da janela.

Perceba que atribuímos position relative e o float left, para que

as DIVs fiquem na mesma linha.

Alterar a cor da página

 PARABÉNS!
Agora você sabe o suficiente para construir qualquer site com
uma aparência atrativa. O que te falta é Javascript e alguma
ferramenta como ASP.NET Core. Mas anime-se! Você tem um
conhecimento em Front-End muito melhor agora.

A parte de HTML e CSS dos cursos que eu fiz acabaram, mas

continuarei com esse guia para falar só um pouco mais de CSS e
apresentar-te o Bootstrap.

Recomendo que você continue lendo, pois hoje em dia

praticamente nenhum site é feito sem Bootstrap.

Bootstrap é muito fácil, mas ainda vamos falar um pouquinho

mais sobre CSS.

REFERÊNCIAS:
Essas anotações vieram de cursos online que eu fiz na Escola
Virtual da Fundação Bradesco e na minha própria faculdade
também (Faculdade Engenheiro Salvador Arena).
Essas anotações também vieram do site W3SCHOOLS.

Links:
Fundação Bradesco - Escola Virtual (ev.org.br)

W3Schools Online Web Tutorials

Faculdade – Engenheiro Salvador Arena
(faculdadesalvadorarena.org.br)
 Um pouco mais de CSS
Outline
Outline é uma propriedade que cria uma “linha de fora” no
elemento.
Para alterar a cor do outline, você usa outline-color:
Texto CSS
Para alterar a fonte do texto:
Font-Family: Arial;

Para alterar a cor do texto:

Color: blue;

Alterar a cor de fundo do texto:

Background-color: black;

Para alinhar texto:

Text-align: center;
Text-align: Left;
Text-align: Right;

Estilo do texto:
Font-style: italic;
Font-weight: bold;

Tamanho do texto:
Font-size: 30px;
Font-size: 2.5em;

1em = 16px.
Ícone
Adicionar um ícone na aba:
Antes:

Para inserir um ícone:

Depois:

Links
Alterando a cor do link:
A:link: Link normal, que não foi visitado.
A:visited: Um link que o usuário visitou.
A:hover: O link quando o mouse se move sobre ele.
A:active: O link quando é clicado.

E você pode alterar o background-color também quando quiser.

Dropdown:

Dropdown de botão:
Imagem DROPDOWN
DROPDOWN no menu (NAVBAR)
 Galeria de imagens
Fazendo cards de imagens, formando uma galeria.
 Sombra
A sombra cria literalmente uma sombra no elemento.
Se você digitar ‘grey’ em seguida, a sombra fica mais leve.

Transições
As transições CSS te permitem alterar os valores das propriedades
muito suavemente, sob uma dada duração.

Exemplo:
Ao passar o mouse:

O elemento DIV no CSS especificou um efeito de transição para a

propriedade Width, com uma duração de dois segundos.
 Animações
O que são animações CSS?
Uma animação permite com que um elemento mude gradualmente
de um estilo para outro.
Você pode mudar quantas propriedades CSS você quiser, quantas
vezes você quiser.
Para utilizar animações CSS, você deve especificar alguns
keyframes para a animação.
Keyframes determinam que estilos o elemento terá em certos
momentos.

A regra @keyframes
Quando você especificar os estilos CSS dentro da regra
@keyframes, a animação gradualmente mudará do estilo atual para
o novo estilo em certos momentos.
Para fazer uma animação funcionar, você deve ligar a animação a
um elemento.
O exemplo seguinte ligar a animação “exemplo” ao elemento <div>.
A animação durará 4 segundos, e gradualmente mudará a cor de
fundo do elemento <div> de “vermelho” para “amarelo”.
NOTA: A propriedade Animation-duration define quanto tempo uma
animação deveria levar para completar. Se o Animation-duration
não for especificado, nenhuma animação ocorrerá, pois o valor
padrão é 0s (zero segundos).

No exemplo acima, nós especificamos quando o estilo mudará ao

usar as palavras-chave “from” e “to” (as quais representam 0%
(início) e 100% (completo)).

É também possível utilizar a porcentagem. Ao usar a porcentagem,

você pode adicionar quantas mudanças de estilo que você desejar.

O exemplo a seguir mudará a cor de fundo do elemento <div>

quando a animação está 25% completa, 50% completa e
novamente quando estiver 100% completa:
Podemos animar uma <div> para mudar de posição:
A propriedade “Animation-iteration-count” define a número de vezes
que essa animação vai se repetir. Você pode colocar um número ou
“infinite”.
Se o valor for “infinite”, a animação vai repetir para sempre.
 Estilo de imagens
Imagens arredondadas
Use a propriedade border-radius para arredondar imagens.

Imagem circular:
Thumbnail
Use a propriedade border para criar thumbnails.
E para essa thumbnail sombrear (ser um link):

Imagens centralizadas
Para centralizar uma imagem, define margin-left e margin-right
como auto e deixe o display como block.
Cards
Você pode utilizar imagens como cards.
Mas esses cards ficaram muito grandes para mim.
Procure fazer cards de outra maneira ou com Bootstrap.

Masking
Você pode criar uma camada de máscara com o CSS para cobrir
parcial ou completamente um elemento.

A propriedade mask-image
A propriedade mask-image especifica uma camada de máscara em
uma imagem.
Essa camada de máscara pode ser um arquivo PNG, SVG, um
gradiente CSS ou um elemento SVG<mask>.

Use uma imagem como uma camada de máscara

Para usar uma imagem PNG ou SVG como uma camada de
máscara, use um valor URL() para passar dentro da imagem de
camada de máscara.
A imagem de máscara precisa ter uma área transparente ou semi-
transparente. Black indica completamente transparente.
 BOOTSTRAP
Cansou de ficar escrevendo classes CSS do zero? Agora você não
precisa mais!
O Bootstrap tem classes prontas (e bonitas) para você usar no seu
site.

O Bootstrap é uma biblioteca de classes CSS prontas. Essas

classes possuem uma boa aparência e reduzem o seu código e o
tempo de desenvolvimento de um site.

Com apenas uma classe do Bootstrap, você consegue fazer muita

coisa que levaria muito tempo escrevendo e testando.

O Bootstrap possui uma variedade de aparências para tudo: Forms,

tabelas, textos, imagens, layout, botões e qualquer outra coisa que
você pensar.

Deu um trabalho para fazer um menu com CSS, né?

No Bootstrap, já tem menus prontos para você usar como quiser.
Não só os menus, mas tudo está pronto.

O Bootstrap foi criado por dois ex-desenvolvedores do Twitter em

2011. Por ser um framework (uma biblioteca) open source,
rapidamente popularizou-se entre desenvolvedores front-end,
designers e profissionais de UX, fazendo com que vários sites
ficassem mais bonitos, responsivos e de melhor uso ao usuário.

A versão mais recente do Bootstrap é o Bootstrap 5, que possui

uma melhor aparência e responsividade para dispositivos móveis.
O que é WEB Design responsivo?
O Web design responsivo é uma configuração em que o servidor
sempre envia o mesmo código HTML a todos os dispositivos e o
CSS é usado para alterar a renderização da página no dispositivo.
Em outras palavras, a página HTML se ajusta nos dispositivos
móveis, facilitando a sua visualização.

Como usar o Bootstrap

É preciso baixar o Bootstrap. O Bootstrap é um longo arquivo CSS.
Para baixar o Bootstrap, acesse o site getbootstrap.com.

Clique em Download.
Faça download dessa opção.

O Bootstrap veio como uma pasta compactada.

Você precisa extrair essa pasta.
Eu vou extrair no mesmo local onde está o meu arquivo HTML.
Dentro da pasta extraída, tem a subpasta CSS e a subpasta JS.
Para mim só interessa o CSS.

Preste atenção nesses dois arquivos.

O primeiro arquivo, chamado bootstrap, é o bootstrap normal, todo
bonitinho, todo indentado e fácil de ler.
Veja:
O arquivo bootstrap.css é um arquivo CSS cheio de classes prontas
que você consegue ler e alterar se quiser.
Esse arquivo possui 11266 linhas, é muita coisa.

Agora vamos ver o bootstrap.min:

O bootsrap.min possui apenas uma linha de classes que serão

interpretadas pelo navegador.
Em uma mesma linha, todas as classes do Bootstrap são
construídas.

Mas por que isso?

No bootstrap.min, a palavra “min” significa mínimo. Esse é o
bootstrap minimizado.
O bootstrap foi encolhido desse jeito, sem quebra de linhas e sem
indentação, para tornar mais rápido o carregamento das classes no
navegador.
Para o navegador, não interessa a quebra de linhas e os espaços.
O que interessa é o código.
Com as classes minimizadas assim, o navegador não perde tempo
para jogar fora os espaços e as quebras de linha.
Esse arquivo bootstrap.min é o arquivo mais rápido de ser
carregado no cliente.
É recomendado que você sempre use o bootstrap.min em sites que
você desenvolver.

Vamos linkar o bootstrap com a nossa página HTML.

Você pode linkar mais de um arquivo CSS se quiser. Não há

problema.

Antes de iniciarmos com exemplos em Bootstrap, eu peço para que

você tire um tempo lendo a documentação desse framework. Vale a
pena.
 Correção
Por algum motivo, o HTML não conseguia linkar o arquivo Bootstrap
por meio da pasta, então eu peguei o arquivo Bootstrap e deixei na
mesma pasta que o HTML e dessa vez funcionou:

Containers do Bootstrap
Sempre que você digita algo no HTML, por padrão o seu elemento
está sempre colado na esquerda.

Mas é mais bonitinho quando tudo é centralizado...

Então você teria que criar uma classe CSS que possua um atributo
align com o valor center, ou teria que usar margin-left, margin,right...
O Bootstrap já resolve isso para você.
A classe container já cria uma margem (um limite de posição) para
os elementos dentro dela.

O container já deixa tudo mais organizado:

Existem diversos containers no Bootstrap para você utilizar.

Notação do Bootstrap
O Bootstrap possui várias classes cujos nomes podem seguir um
padrão.
Esse padrão é os nomes terminarem com “sm”, “md”, “lg”, “xl” e
“xxl”.

Exemplo:
 • Container-sm
• Container-md
• Container-lg
• Container-xl
• Container-xxl

Sm = small (pequeno)
Md = médium (médio)
Lg =large (grande)
Xl = extra large (extra grande)
Xxl = extra extra large (extra extra grande).

Não só o container possui esse padrão, mas outras classes que

definem o layout da página também possuem nomes assim.
Uma delas é a coluna, por exemplo.
A tabela abaixo dá detalhes sobre as dimensões de cada sufixo:

Small Medium Large X-Large XX-Large

Extra small
≥576px ≥768px ≥992px ≥1200px ≥1400px
<576px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-xxl 100% 100% 100% 100% 100%
.container-fluid 100% 100% 100% 100% 100%

Container-fluid também é interessante.

 Linhas e colunas
Você pode dividir o layout de sua página em linhas e colunas.
A classe “row” representa uma linha.
A classe “col” representa uma coluna.
A classe “col” deve ficar dentro de uma “row”.

E é claro, existem diferentes tipos de colunas.

Um tipo que eu conheço é o “col-lg-4”:

Mas algumas classes de layout no Bootstrap possuem regras.
Por exemplo, você não pode colocar quantos “col-lg-4” você quiser.
Você deve colocar somente três deles. A soma tem que resultar
sempre em doze (4+4+4=12).
Se você precisa de três colunas, então use o “col” com o número 4.
Se você precisa de quatro colunas, use o “col” com o número 3
(3+3+3+3=12).
Parece que o Bootstrap permite até doze colunas.

Dentro das colunas do Bootstrap, você pode usar a sua criatividade!

Cada coluna pode ter um campo de um formulário ou um card, por
exemplo.
 Imagens
O Bootstrap já tem estilos prontos para as suas imagens:

Thumbnail:

A imagem de exemplo é muito grande :/

Rounded:
Essa classe vai arredondar as pontas da imagem:
 Tabelas
O Bootstrap é perfeito para estilizar tabelas.
Você também pode criar uma tabela listrada:
E a tabela listrada possui variantes!
E o Bootstrap pode estilizar uma tabela cujas linhas são
selecionadas ao passar o mouse:
 Bootstrap FORMS
Você pode usar o Bootstrap para deixar seu formulário mais bonito.

Antes:

Depois:

A caixa de texto ocupou toda a largura do container...

Mas essa caixa de texto é mais bonita. Quando você clica nela, ela
tem um foco azul:
E o botão fica azul quando o mouse passa em cima dele:

Quando eu crio um formulário no ASP.NET Core, eu basicamente

só uso essas classes:

-Para o label: form-label

-Para o textbox e outros: form-control
-Para o botão: Várias classes, veremos adiante.

Combobox ou Listbox:
Checkbox e Radiobutton
Bom, pelo menos na minha máquina, o checkbox e radiobutton já
possuem aparências agradáveis.

Mas se você ler a documentação, o Bootstrap tem vários exemplos

de checkbox.
Eu não vou passar esses exemplos porque eu sinceramente não
acho essa parte muito importante.

Range
O Bootstrap customiza o range também:
O Range também ocupa toda a largura do container.
As propriedades “min”, “max” e “step” configuram os valores e o
passo do range.
Isso é complicado de explicar. É mais fácil de entender aplicando ou
vendo exemplo. Sugiro que veja essa parte do range lá na
documentação do Bootstrap.

Floating labels
Você pode fazer com que o label que descreve o campo flutue:
Grid
Você pode separar os campos do formulário em linhas e colunas:
Validação
O Bootstrap te permite alterar a aparência do formulário quando o
usuário digita algo errado ou deixa um campo obrigatório em
branco.

Mas o problema é que o código para fazer isso é meio longo e

ainda exige um conhecimento em Javascript.
No ASP.NET Core, eu consigo fazer a mesma validação com muito
menos código.
Quer saber como? Leia o guia de ASP.NET Core, que é muito
importante também.

O HTML já tem um atributo que obriga o usuário a preencher

campos obrigatórios:
O atributo é o required.

Agora, quando o usuário preenche o campo, mas enviou um dado

errado, no ASP.NET Core a mensagem de erro aparece por meio
da tag <span>, usando a classe Bootstrap “text-danger”. O texto
que aparece depende da ModelState. Isso será mais bem abordado
no guia de ASP.NET Core.

Accordion
O accordion é uma área de texto interativa que pode ser exibida ou
escondida, dependendo do clique do usuário.

O código do accordion é muito extenso para tirar print e colar no

Word.
Caso tenha muito interesse no accordion, leia a documentação do
Bootstrap.

As cores do Bootstrap
O Bootstrap possui algumas cores padrão em alguns elementos
como tabelas, textos e botões.
Cada cor tem um nome:
• Primary: É um azul
• Secondary: É um cinza
• Success: É um verde
• Danger: É um vermelho
• Warning: É um amarelo
• Info: É um azul mais claro
• Dark: Escuro
Links do Bootstrap também possuem essas cores.
Fundos também podem ter essas cores.
Porém, a documentação do Bootstrap diz que há mais cores ainda.
Acesse esse link para conhecê-las:
https://getbootstrap.com/docs/5.1/customize/color/
 Alertas
Alertas são abas que aparecem no topo do site após o usuário ter
concluído uma ação (preencher um formulário, por exemplo).
O usuário preencheu um formulário e clicou em “enviar”.
O servidor retorna a página HTML ao usuário com uma mensagem
de que deu tudo certo no preenchimento do formulário.
Essa mensagem aparece por meio de um alerta.
Veja todos os tipos de alerta do Bootstrap:
 Badge
“Badge” pode ser entendido como “selo”, “estampa”, “carimbo” ou
“distintivo”.
Badge é bom para chamar a atenção do usuário para qualquer
coisa que você pensar. Um exemplo é notificar o usuário sobre o
desconto de um produto.

O badge pode assumir várias formas.

Você pode também usar o badge para notificações em botões:

E ainda pode melhorar:

 Botões do Bootstrap
Os botões do Bootstrap possuem vários estilos, é só escolher:

E o estilo Outline é o meu favorito:

Ao passar o mouse nos botões outline, a cor muda.

Links podem se comportar como botões, basta usar o atributo “role”:

Links podem se comportar como vários elementos.

 Cards do Bootstrap
O Bootstrap também tem cards prontos. Você não precisa fazer um
do zero.
 Carousel
O carousel é uma coleção de imagens em que o usuário pode
selecionar.
Você com certeza já viu o carousel em vários lugares.
Exemplo:

O código do carousel é muito longo para eu printar.

Se tiver interesse, veja a documentação do Bootstrap.
 Dropdown Bootstrap
Existem muitos exemplos de dropdown com o Bootstrap. Se tiver
interesse, veja a documentação do Bootstrap para ver todos.

Mas não funcionou para mim...

Pop-UP
No estudo do CSS, nós fizemos um Pop-Up do zero.
O Bootstrap também tem um Pop-Up pronto.
E sim, o código do pop-up também é muito longo para mostrar em
uma imagem.
Link da documentação do pop-up:
https://getbootstrap.com/docs/5.1/components/modal/
 Menus
O Bootstrap também possui menus prontos para você usar.
Basta consultar “Navbar” na documentação.

Paginação
Paginação é uma coleção de botões que linkam para outras
páginas HTML após o limite de itens de uma lista que podem ser
exibidos.
O objetivo da paginação é não deixar a lista muito longa na
visualização.
Às vezes, uma lista possui tantos itens que se carregar tudo de uma
vez, a resposta do servidor será lenta e pode demorar para carregar
no cliente.
 Considerações finais
Parabéns por ter tido a paciência de ter chegado até aqui (sem
pular, é claro).
Espero que tudo o que foi passado nesse guia tenha sido bastante
útil para você.
Recomendo estudar Javascript e ASP.NET Core após o fim da
leitura desse guia de Front-End.
Sobre o Bootstrap, você só vai aprender de verdade quando ler a
documentação.
A documentação do Bootstrap é muito fácil de ler e entender.