Introdução ao Web Design e HTML

Prévia do material em texto

.html .css .js
Kellvyn Dias 
kellvyn.dias@ifce.edu.br 
Introdução
Web Design:
Podemos definir Web Design como o conjunto de atividades
responsáveis por estruturar meios, relacionando texto com imagens e
conteúdo multimídia em geral, para disseminar informações na internet. O
web designer utiliza-se de conhecimentos técnicos formais para atuar em
inúmeras áreas, dentre as quais podemos destacar a criação de web sites.
Media Salarial:
Estágio em Web Design: R$ 849,42
Web Designer Trainee: R$ 1.587,55
Assistente de Web Design: R$ 1.015,59
Analista de Web Design: R$ 2.968,82
Webdesigner Júnior: R$ 4.271,00
Webdesigner Pleno: R$ 5.166,00
Webdesigner Sênior: R$ 8.770,00
Introdução
A linguagem foi definida em especificações formais na década de 1990.
HTML é uma das linguagens que utilizamos para desenvolver websites.
O acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em
português Linguagem de Marcação de Hipertexto.
O HTML é a linguagem base da internet. Foi criada para ser de fácil
entendimento por seres humanos e também por máquinas, como por exemplo o
Google ou outros sistemas que percorrem a internet capturando informação.
Em janeiro de 2008 a W3C publicou a especificação do HTML5.
Introdução
Quem criou o HTML?
Tim Berners-Lee.
Esse é o nome do homem que criou
o HTML. Ele criou o HTML para a
comunicação e disseminação de pesquisas
entre ele e seu grupo de colegas. O HTML
ficou bastante conhecido quando começou a
ser utilizada para formar a rede pública
daquela época, o que se tornaria mais tarde
a internet que conhecemos hoje.
Definições
Antes de iniciarmos nossos estudos é necessário que tenhamos alguns
conceitos bem fixados, já que muitos desses termos serão
mencionados no decorrer do curso.
DNS: O Sistema de Nomes de Domínio é um sistema hierárquico e
distribuído de gestão de nomes para computadores, serviços ou
qualquer máquina conectada à Internet ou a uma rede privada.
URL: Uniform Resource Locator – Localizador Uniforme de Recursos é
uma sequência de caracteres que define o endereço de um site ou
recurso da web.
Definições
HTTP: (Hypertext Transfer Protocol): Protocolo de Transferência de
Hipertexto é um protocolo de comunicação (presente na camada de
aplicação, segundo o Modelo de Referência OSI) muito utilizado na
internet.
FTP: (File Transfer Protocol): é uma forma de transferir arquivos. Pode
referir-se tanto ao protocolo quanto ao programa que implementa este
protocolo.
WWW: Abreviação de World Wide Web, é um sistema de documentos
em hipermídia (hypertextos, vídeos, sons, imagens, etc.) que são
interligados. É constantemente utilizada como sinônimo de internet.
Definições
SITE: Conjunto de páginas web que representam uma pessoa, empresa
ou instituição na web.
BROWSER: Também denominado de navegador, é um software
utilizado para ler e interpretar as páginas web, possibilitando que os
usuários interajam com as mesmas.
NOMES DE DOMINO: Nome de domínio é um nome que serve para
localizar e identificar conjuntos de computadores na internet. O nome
de domínio foi concebido com o objetivo de facilitar a memorização
dos endereços de computadores na Internet
Protocolo 
Subdomínio 
Nome de Domínio 
.Domínio (.net, .tv, .info, .rio, .org, .edu, .biz, .uk, .ca,) 
Diretórios / subdiretórios 
Arquivo acessado 
Definições
 https://www.moa.ce.gov.com.br/imagens/logo.png 
O que é o HTML
HTML (abreviação para a expressão inglesa HyperText Markup
Language, que significa Linguagem de Marcação de
Hipertexto) é uma linguagem de marcação utilizada na
construção de páginas na Web. Documentos HTML podem ser
interpretados por navegadores. A tecnologia é fruto da junção
entre os padrões HyTime e SGML.
O que é o HTML
HyTime é um padrão para a representação estruturada de hipermídia e
conteúdo baseado em tempo. Um documento é visto como um
conjunto de eventos concorrentes dependentes de tempo (como
áudio, vídeo, etc.), conectados por hiper ligações. O padrão é
independente de outros padrões de processamento de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido
para hipertexto, mas tornou-se conveniente para transformar
documentos em hiper objetos e para descrever as ligações.
O que é o HTML4 - 1999
Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores
sobre algumas boas práticas que deveriam ser seguidas ao produzir
códigos.
Desde esse tempo, assuntos como: necessidade da separação
do código estrutural, da formatação, assim como princípios de
acessibilidade foram trazidos para discussões entre fabricantes e
desenvolvedores.
O que é o HTML4 - 1999
Contudo, o HTML4 ainda não trazia diferencial real para a
semântica do código. o HTML4 também não facilitava a manipulação
dos elementos via Javascript ou CSS. Se você quisesse criar um sistema
com a possibilidade de Drag’n Drop (arrastar e soltar elementos) de
elementos, era necessário criar um grande script, com bugs e que
muitas vezes não funcionavam de acordo em todos os browsers.
O HTML5 veio como a versão atualizada do HTML4
Um dos principais objetivos do HTML5 é facilitar a manipulação
do elemento possibilitando o desenvolvedor a modificar as
características dos objetos de forma não intrusiva e de maneira que
seja transparente para o usuário final.
Ao contrário das versões anteriores, o HTML5 fornece
ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor
maneira possível, permitindo por meio de suas APIs a manipulação das
características destes elementos, de forma que o website ou a
aplicação continue leve e funcional.
O que é o HTML5 - 2014
O que é o HTML5 - 2014 
Com o surgimento do HTML5, algumas tags foram criadas
enquanto outras tiveram suas funções modificadas e/ou
descontinuadas. Isso tudo devido as versões antigas do HTML não
conterem um padrão universal exigido pelo W3C, para a criação de
seções comuns e específicas como rodapé, cabeçalho, sidebar, menus,
nomenclatura de IDs, Classes ou tags.
Estrutura HTML
Antes de iniciarmos os
códigos é válido conhecer um
pouco sobre a nomenclatura,
como os códigos são lidos
pelos browsers e o que é
necessário para começar a
escrever os códigos em HTML.
Em HTML as
informações estão ligadas na
forma de páginas que são
transferidas de um
computador remoto para o
usuário, onde o browser faz o
trabalho de interpretar os
códigos e mostrar a página
que o usuário vê.
Estrutura HTML
Requisitos:
Conhecer a linguagem HTML;
Um bom editor de texto para gerar o seu código fonte (“Bloco de
notas”, Gedit, Notepad++, Sublime Text, NetBeans, Eclipse, VS Code,
codeblock, vim);
Um navegador de internet (Internet Explorer, Mozilla Firefox,
Chrome, Opera, Safari, entre outros) para visualizar as suas páginas.
Obs.: É importante possuir mais de um navegador para poder testar e
visualizar o funcionamento do código em cada um deles pois você
perceberá que existem pequenas diferenças de um para o outro.
Editores
Atividade 001
• O que são tags;
• Principais tags do HTML (Estrutural) e suas funções.
• Desenho da estrutura padrão.
• Principais extensões/formatos de arquivos.
• Escrever o primeiro código em html.
• Principais extensões pra usar no VS Code para trabalhar com o HTML, 
CSS.
Estrutura HTML
Assim como em outras linguagens, o HTML possui uma sintaxe
própria e que devem seguir algumas regras. Esses comandos são
denominados de TAGs e nada mais são do que marcas padrões,
utilizadas para fazer indicações a um browser. As TAGs aparecem
sempre entre sinais de “menor que” ();
Geralmente são utilizadas aos pares, onde a TAG de finalização
de um comando qualquer é finalizada com a precedência de uma barra
(/). Por exemplo: e 
Estrutura HTML
Estrutura HTML
OBS: As tags HTML não são case sensitive, ou seja, não diferenciam
letras maiúsculas de minúsculas.
Portanto, tanto faz você escrever ... como
 ... porém, por boas práticas de conduta, é indicado
que tudo seja escrito em caixa baixa (letra minúscula).
Anatomiado HTML
Anatomia do HTML
Estrutura principal 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Cabeçalho 
Corpo 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 // metadados 
 
 
 
 
 //conteúdo e demais 
tags. 
 
 
 
O que é o HTML
Agora conheceremos a estrutura básica do HTML e com ela,
construiremos a nossa primeira página web, com o tão famoso “Olá
Mundo” (Hello World).
 : a tag html é utilizada para definir o início e o fim de
um arquivo do tipo HTML, ou seja, ela é a primeira tag a ser “aberta”
e a última a ser “fechada”.
 : a tag head é utilizada para definir o cabeçalho do
documento html, é dentro da delimitação desta tag que inserimos
informações como título da página web, tipo de codificação (quando
necessário) e indicação de documentos importados.
O que é o HTML
 : a tag title é utilizada para definir o nome da página
web, ou seja, seu título, que aparecerá nas abas dos navegadores.
Esta tag deve ser inserida dentro da delimitação da tag head, pois faz
parte do cabeçalho do documento html.
 : a tag body é utilizada para definir o “corpo” da
página html, ou seja, é onde estará contido todo o conteúdo da
página web.
Anatomia do HTML
O Doctype deve ser a primeira linha de código do documento, ou
seja, antes da tag html, ele indica para o navegador e para outros meios
qual a especificação de código utilizar.
Nas versões anteriores ao HTML5 o DOCTYPE era declarado com a
seguinte sintaxe:
Anatomia do HTML
Metatag CHARSET
Para definirmos qual codificação de caracteres utilizaremos em
nossa página web, usamos a tag meta com seus atributos, dentre os
quais o principal é o charset. Vejamos a nova maneira de definir a
codificação de caracteres em HTML 5:
Nas versões anteriores ao HTML 5, essa tag era escrita da forma abaixo:
Prática
Exercício rápido:
Agora exercitaremos o que aprendemos até o momento, para
isso utilizaremos um editor de texto simples onde digitaremos as
seguintes linhas de código:
Atividade 002
Quais os novos elementos de conteúdo, tags e formulários
específicos do html5?
DIVs
O elemento de divisão HTML é um container
genérico para conteúdo de fluxo, que de certa forma não
representa nada.
Ele pode ser utilizado para agrupar elementos para fins
de estilos (usando class ou id). Ele deve ser utilizado somente
quando não tiver outro elemento de semântica (tal como
 ou ).
Conhecendo outras TAGs
A partir de agora conheceremos outras tags que
possibilitarão uma melhor estruturação da nossa página web.
É importante ressaltar que a estrutura básica de
qualquer página HTML possuirá quase sempre o mesmo
código principal mudando apenas o conteúdo encontrado no
corpo da página web, por isso iremos muitas vezes
reaproveitar esse código na construção de novas páginas.
Trabalhando com textos
 Usamos o comando Lorem para gerar conteudo 
aleatório para usar como texto alternativo. 
Lorem = para gerar textos com ~220 caracteres 
Lorem30 = para gerar textos com 30 palavras 
Lorem60 = para gerar textos com 30 palavras 
Trabalhando com textos
Cabeçalho 
 - 
Parágrafos 
 
Quebra de linhas 
 
Trabalhando com textos
Os comentários não são lidos/renderizados pelos
navegadores, mas podem ajudar muito na documentação do
código-fonte das suas paginas HTML.
Conhecendo outras TAGs
Linha horizontal:
A tag define uma ruptura temática em uma página
HTML, e é mais frequentemente apresentado como uma linha
horizontal. O é um elemento usado para separar o
conteúdo (ou definir uma mudança) em uma página HTML:
Conhecendo outras TAGs
Linha horizontal:
Conhecendo outras TAGs
Elementos de formatação:
O HTML também define elementos especiais para definir
o texto com um significado especial. O HTML usa elementos
como e para formatação de saída, como texto em
negrito ou itálico. Os elementos de formatação foram
projetados para exibir tipos especiais de texto:
Conhecendo outras TAGs
Elementos de formatação:
 - Texto em negrito
 - texto importante
 - texto em itálico
 - texto enfatizado
 - texto marcado
 - pequeno texto
 - texto excluído
 - texto inserido
 - texto subscrito
 - Texto sobrescrito
Conhecendo outras TAGs
Elementos de formatação:
Conhecendo outras TAGs
Atributos HTML
Atributos:
Atributos fornecem informações adicionais sobre elementos
HTML.
Todos os elementos HTML podem ter atributos
Atributos fornecem informações adicionais sobre um
elemento
Atributos são sempre especificados na tag de início
Atributos geralmente vêm em pares nome / valor como:
name = "value"
Atributos HTML
Atributos:
O valor do atributo title será exibido como uma dica ao passar
o mouse sobre o elemento:
Estilos em HTML
O atributos de estilo em HTML:
Definir o estilo de um elemento HTML, pode ser feito com o
atributo style.
O atributo style HTML possui a seguinte sintaxe :
A propriedade é uma propriedade do CSS.
O valor é um valor do CSS. 
Estilos em HTML
Cor de fundo:
A propriedade CSS background-color define a cor do plano de
fundo para um elemento HTML.
Este exemplo define a cor de fundo de uma página para
powderblue:
Estilos em HTML
Cor de texto:
A propriedade color define a cor do texto para os elemento.
Estilos em HTML
Cor de texto:
A propriedade font-family define a fonte do texto a ser
usada.
Estilos em HTML
Cor de texto:
A propriedade font-size define o tamanho da fonte.
Estilos em HTML
Cor de texto:
A propriedade text-align define o alinhamento horizontal do
texto para um elemento HTML:
Estilos em HTML
Resumo:
Use o atributo style para estilizar elementos HTML
Use background-color para cor de fundo
Use color para cores de texto
Use font-family para fontes de texto
Use font-size para tamanhos de texto
Use text-align para alinhamento de texto
DESAFIO
Resumo:
Elementos de citação
 para citações curtas :
Elementos de citação
 define um titulo de um trabalho :
Elementos de citação
 para seção citada :
Elementos de citação
 para abreviações:
Elementos de citação
 contato, autor, proprietário de doc/file:
Elementos de citação
 Direção do texto:
rtl – Right-To-Left
ltr – Left-To-Right
Elementos de citação
Resumo
DescriçãoTAG
Define uma abreviação ou acrônimo
Define informações de contato para o autor /
proprietário de um documento
Define a direção do texto
Define uma seção que é citada de outra fonte
Define o título de uma obra
Define uma cotação em linha curta
HTML Tags de divisão de conteúdo
Tag article
A tag representa uma composição completa ou
independente em uma página. Pode ser uma postagem num
fórum, um artigo de revista ou jornal, um post de um blog ou
mesmo um comentário de um usuário.
Quando as tags são aninhados, os elementos
internos representam artigos que estão relacionados ao
conteúdo do artigo externo. Por exemplo, os comentários do
post de um blog, podem ser implementados com a tag article.
HTML Tags de divisão de conteúdo
Este exemplo mostra uma postagem de blog usando a tag article:
HTML Tags de divisão de conteúdo
Tag section
A tag representa uma seção genérica de um
página. Uma seção, neste contexto, é um agrupamento
temático de conteúdo, por exemplo, uma seção de serviços.
Exemplos de seções, seriam capítulos de um livro, ou
seções numeradas de uma tese. Uma página de web pode ser
dividida em seções, como por exemplo, uma para a
introdução, uma para posts e outra para informações de
contato
HTML Tags de divisão de conteúdo
No exemploa seguir, vemos um artigo(parte de uma página da web) sobre maçãs, contendo duas
seções curtas.
HTML Tags de divisão de conteúdo
Aqui está um programa de graduação com duas seções, uma para a lista de formandos e outra
para a descrição da cerimônia
HTML Tags de divisão de conteúdo
Exemplo de uso simples:
A
n
t
e
s
D
e
p
o
i
s
HTML Tags de divisão de conteúdo
Conforme mencionado acima, é um elemento de corte
genérico e só deve ser usado se não houver um elemento mais específico
para representá-lo. Por exemplo, um menu de navegação deve ser envolvido
em uma tag , mas uma lista de resultados de pesquisa ou uma exibição
de mapa e seus controles não possuem elementos específicos e podem ser
colocados dentro de uma .
Considere também estes casos:
Se o conteúdo do elemento representa uma unidade atômica autônoma de
conteúdo como, por exemplo, uma postagem de blog, um comentário ou um
artigo de jornal), o seria uma escolha melhor.
Cores
As cores HTML são especificadas usando nomes de cores
predefinidos ou valores RGB, HEX, HSL, RGBA, HSLA.
RGB Significa RED-GREEN-BLUE
RGBA Significa RED-GREEN-BLUE-ALPHA
HSL significa Hue-Saturation-Luminance (matiz-saturação-
luminância).
HSLA significa Hue-Saturation-Luminance-Alpha (matiz-
saturação-luminância).
Cores
Em HTML, uma cor pode ser especificada usando um nome de cor:
O HTML suporta 140 nomes de cores padrão .
Cores
Em HTML, uma cor pode ser especificada usando um nome de cor:
Cores
Cor de fundo:
Cores
Cor de texto:
Cores
Cor de borda:
Você pode definir a cor das bordas:
Cores
Valores de cor:
Em HTML, as cores também podem ser especificadas usando valores 
RGB, valores HEX, valores HSL, valores RGBA e valores HSLA:
Igual ao nome da cor "Tomate":
Cores
Valores de cor:
Cores
Valor RGB:
Em HTML, uma cor pode ser especificada como um valor RGB, 
usando esta fórmula:
rgb ( vermelho, verde , azul )
Cada parâmetro (vermelho, verde e azul) define a 
intensidade da cor entre 0 e 255.
Por exemplo, rgb (255, 0, 0) é exibido como vermelho, 
porque vermelho é definido como seu valor mais alto (255) e 
os outros são definidos como 0.
Cores
Valor RGB:
Em HTML, uma cor pode ser especificada como um valor RGB, 
usando esta fórmula:
Para exibir preto, defina todos os parâmetros de cor como 0, 
assim: rgb (0, 0, 0).
Para exibir branco, defina todos os parâmetros de cor como 
255, assim: rgb (255, 255, 255).
Experimente misturando os valores RGB a seguir:
Cores
Valor RGB:
Cores
Valor RGB:
Cores
Exemplos de valores RGB:
Cores
Exemplos de valores RGB:
Cores
Valor RGBA:
Os valores de cores RGBA são uma extensão dos valores de 
cores RGB com um canal alfa - que especifica a opacidade de 
uma cor.
Um valor de cor RGBA é especificado com:
rgba ( vermelho, verde , azul, alfa )
O parâmetro alfa é um número entre 0,0 (totalmente 
transparente) e 1,0 (nem um pouco transparente):
Cores
Valor RGBA:
Cores
Desafios:
Cores
valor HEX:
Em HTML, uma cor pode ser especificada usando um valor
hexadecimal no formato:
# rrggbb
Onde rr (vermelho), gg (verde) e bb (azul) são valores
hexadecimais entre 00 e ff (o mesmo que decimal 0-255).
Por exemplo, # ff0000 é exibido como vermelho, porque
vermelho é definido como seu valor mais alto (ff) e os outros
são definidos como o valor mais baixo (00).
Cores
valor HEX:
Cores
valor HEX:
Cores
valor HSL:
Em HTML, uma cor pode ser especificada usando matiz,
saturação e luminosidade (HSL) no formato:
hsl ( matiz , saturação , leveza )
Matiz é um grau na roda de cores de 0 a 360. 0 é vermelho,
120 é verde e 240 é azul.
Cores
valor HSL:
A saturação é um valor percentual, 0% significa um tom de
cinza e 100% é a cor completa.
A luminosidade também é uma porcentagem, 0% é preto,
50% não é claro nem escuro, 100% é branco
Cores
valor HEX:
Cores
valor HEX:
CSS
Estilo de HTML com CSS:
CSS significa Cascading Style Sheets.
O CSS descreve como os elementos HTML devem ser
exibidos na tela, papel ou em outra mídia .
CSS economiza muito trabalho . Ele pode controlar o layout
de várias páginas da web de uma só vez.
CSS
Estilo de HTML com CSS:
CSS pode ser adicionado aos elementos HTML de três
maneiras:
Inline - usando o atributo style em elementos HTML
Interno - usando um elemento na seção 
Externo - usando um arquivo CSS externo
CSS
Estilo de HTML com CSS:
A maneira mais comum de adicionar CSS é manter os estilos
em arquivos CSS separados.
No entanto, aqui usaremos o estilo inline e interno, porque
isso é mais fácil de demonstrar e mais fácil para você
experimentar.
{
color: blue;
font-size: 12px;
}
h1
2 - propriedade
3 – valor da propriedade
1 - Seletor
Anatomia de um conjunto de regras CSS
4 - Declaração
CSS
Toda essa estrutura é chamada de conjunto de regras, mas
geralmente usamos o termo "regra", por ser mais curto. Note
os nomes das partes individuais:]
Seletor(Selector)
É, nesse caso, o nome do elemento HTML. Ele seleciona o(s)
elemento(s) a serem estilizados(elementos ). Para dar
estilo a outro elemento, é só mudar o seletor.
CSS
Propriedades(Property)
Forma pela qual você altera um determinado estilo de um
elemento HTML. No CSS, você escolhe quais propriedades
você deseja alterar.
Valor da propriedade(Property value)
À direita da propriedade, depois dos dois pontos, nós temos o
valor de propriedade, que escolhe uma dentre muitas
aparências possíveis para uma determinada propriedade.
CSS
Note outras partes importantes da sintaxe:
Cada linha de comando deve ser envolvida em chaves({})
Dentro de cada declaração, você deve usar dois pontos(:) para
separar a propriedade de seus valores
Dentro de cada conjunto de regras, você deve usar um ponto e
vírgula(;) para separar cada declaração da próxima
Então para modificar múltiplos valores de propriedades de uma vez,
você deve escrevê-los separados por ponto e vírgula, desse modo:
CSS
Multipolos seletores
CSS
Tipos de seletores
Existem alguns agrupamentos diferentes de seletores e saber
qual tipo de seletor você pode precisar o ajudará a encontrar
a ferramenta certa para o trabalho.
CSS
Seletores por nome de elemento
Seleciona elementos através do seu nome:
CSS
Seletores por classe
Perceba que para selecionar um elemento através da sua
classe, você precisa adicionar um ponto(.) antes do nome da
classe:
CSS
Seletores por ID
Assim como na classe você precisa de um ponto, para utilizar
o seletor por ID, você precisa adicionar uma cerquilha(#) antes
do nome do ID:
CSS
Seletores por atributo
Os elementos HTML podem ter atributos que fornecem mais
detalhes sobre o elemento que está sendo marcado. Em CSS,
você pode usar seletores de atributo para estilizar elementos
com determinados atributos. Esta lição mostrará como usar
esses seletores.
CSS
Seletores por atributo
CSS
CSS embutido:
Um CSS embutido é usado para aplicar um estilo exclusivo a
um único elemento HTML.
Um CSS embutido usa o atributo de estilo de um elemento
HTML.
Este exemplo define a cor do texto do elemento para
azul:
Este cabeçalho é azul
CSS
CSS interno:
Um CSS interno é usado para definir um estilo para uma
única página HTML.
Um CSS interno é definido na seção de uma página
HTML, dentro de um elemento :
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
Links
hiperlink:
Os links são encontrados em quase todas as páginas da
web. Os links permitem que os usuários cliquem no caminho
de uma página para outra.
Links HTML são hiperlinks.
Você pode clicar em um link e pular para outro documento.
Quando você move o mouse sobre um link, a seta do mouse
se transforma em uma pequena mão.
Links
hiperlink:
Nota: Um link não precisa ser texto. Pode ser uma imagem ou
qualquer outro elemento HTML.
Links
Sintaxe:
Os hiperlinks são definidos com a tag HTML :
link textExemplo:
Google
Links
O atributo href especifica o endereço de destino (
https://www.google.com/ ) do link.
O texto do link é a parte visível (Google).
Ao clicar no texto do link, você será enviado para o endereço
especificado.
Links
Nota: Sem uma barra no final dos endereços das
subpastas, você pode gerar duas solicitações para o
servidor. Muitos servidores adicionam uma barra
automaticamente ao final do endereço e criam uma
nova solicitação.
Links
Links Locais
O exemplo anterior usou um URL absoluto (um
endereço da Web completo).
Um link local (link para o mesmo site) é especificado
com um URL relativo (sem https: // www ....).
Links
Exemplo:
Inicio
Sobre
Galeria
Contato
Links
Exemplo:
Inicio
Sobre
Galeria
Contato
Links
Cores dos Links HTML:
Por padrão, um link aparecerá assim (em todos os
navegadores):
Um link não visitado está sublinhado e azul
Um link visitado está sublinhado e roxo
Um link ativo está sublinhado e vermelho
Você pode alterar as cores padrão, usando CSS:
Links
Cores dos Links HTML:
a:link{ ... }
a:visited { ... }
a:hover{ ... }
a:active{ ... }
Links
Cores dos Links HTML:
Os links geralmente são denominados botões, usando
CSS:
Links
Cores dos Links HTML:
a:link, a:visited { ... }
a:hover, a:active{ ... }
Imagens
As imagens podem melhorar o design e a aparência de
uma página da web.
Imagens
Em HTML, as imagens são definidas com a tag .
A tag está vazia, contém apenas atributos e
não possui uma tag de fechamento.
O atributo src especifica o URL (endereço da web) da
imagem:
Imagens
O atributo alt:
O atributo alt fornece um texto alternativo para uma
imagem, se por algum motivo o usuário não puder
visualizá-la (devido a conexão lenta, um erro no
atributo src ou se o usuário usar um leitor de tela).
O valor do atributo alt deve descrever a imagem:
Imagens
Exemplo:
Imagens
Nota: O atributo alt é obrigatório. Uma página da web
não será validada corretamente sem ele.
Listas
Uma lista ou sequência é uma estrutura de dados que
implementa uma coleção ordenada de valores, onde o
mesmo valor pode ocorrer mais de uma vez.
Listas
 ordered list
 unordered list
 list item
 definition list
 term definition
 description definition
Listas
Listas
 linha
 “cabeçalhos”
 “colunas”
colspan
rowspan