Introdução à Linguagem HTML: Estrutura e Tags, Notas de estudo de Engenharia Naval

Baixe Introdução à Linguagem HTML: Estrutura e Tags e outras Notas de estudo em PDF para Engenharia Naval, somente na Docsity!

Linguagem

HTML

Ivanethe Carvalho Rocha.

Linguagem HTML

• Abreviação para Hyper Text

Markup Language, traduzindo

Linguagem de Marcação de

HiperTexto

• Desenvolvida com objetivos de

divulgação, depois ganhou status

público

• Definida formalmente na década de

• Sua versão mais atual está centrada

no desenvolvimento do XHTML ,

uma junção com XML.

Linguagem HTML

• Tags (Etiquetas)

▫ Os documentos escritos em HTML

são marcados por etiquetas, mais

conhecidas com tags.

▫ São palavras ou caracteres entre os

sinais de <>.

▫ Elas informam ao browser a

estrutura e o significado do texto.

▫ São usadas para dizer qual texto é

título, parágrafo e assim por diante.

▫ Ex:

 quebra de linha: é um exemplo de

elemento solitário:

 - localização centralizada do texto: é

um exemplo de elemento que deve

ser encerrado: ...

Linguagem HTML

• Estrutura de documento HTML

▫ Todo arquivo HTML obrigatoriamente

contém alguns comandos que identificam

aquele texto como uma home page para o

navegador. Assim, as páginas em HTML

possuem uma anatomia fixa, devendo

conter obrigatoriamente os seguintes tags:

▫ e - Determinam início

e fim do documento HTML. diz ao

browser para iniciar um novo documento

HTML cujo conteúdo se encontra definido

entre esse local e a etiqueta de fim do

documento, que é .

▫ e - Definem o

cabeçalho. Esta informação não é

apresentada graficamente mas dá

indicações importantes a respeito daquilo

que a página contém e sobre a forma como

ela deve ser apresentada.

Linguagem HTML

• Estrutura de documento HTML

• Exemplo: Assim, a estrutura básica de

uma página, em ordem de comandos

obrigatórios é:

Entre <title> e deve ser

digitado o título da página.

Entre e devem ser

colocados todos os textos, figuras e sons

da página.

Linguagem HTML

• Exemplo – Código Fonte

▫ ▫ ▫ Bar Use a Cabeça ▫ ▫ ▫ Bem-vindos ao Bar Use a Cabeça ▫ ▫

▫ Junte-se a nós qualquer noite dessas para beber elixires refrescantes, ter um bom papo ▫ e talvez algumas partidas de Dance Dance Revolution. ▫ O acesso wireless está sempre disponível; ▫ TSPSW (Traga Seu Próprio Servidor Web). ▫

▫ Como chegar ▫

▫ Você nos encontrará bem no centro da cidade ▫ de Weblândia. Junte-se a nós! ▫

▫ ▫

Estrutura de documento

HTML

• A seção BODY

▫ Tudo que estiver contido em **** será mostrado na janela principal do browser, sendo apresentado ao leitor. **** pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.

▫ Através de atributos de , podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água). Assim temos:

Estrutura de documento

HTML

• A seção BODY

• Onde:
• BGCOLOR cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página)
• TEXT: cor dos textos da página (padrão: preto)
• LINK: cor dos links (padrão: azul)
• ALINK: cor dos links, quando acionados (padrão: vermelho)
• VLINK: cor dos links, depois de visitados (padrão: azul escuro ou roxo)
• BACKGROUND indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água.

Estrutura de documento

HTML

• Separadores

▫ As quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, precisamos de separadores. ▫ Quebra de linha  Quando queremos mudar de linha, usamos o elemento
. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.

Estrutura de documento

HTML

• Separadores

▫ Parágrafos

 Para separar blocos de texto, usamos

o elemento

.

 Os parágrafos também possuem alinhamentos, assim temos: ▫

▫

▫

## Estrutura de documento

HTML

• Listas em HTML

▫ Listas de definição: também

chamadas de listas de glossário.

▫ Possuem a seguinte estrutura.



 Termo a ser definido

 Definição



• Ex:

Banco de dados

Conjunto de resgistros dispostos de

maneira regular

Redes de computadores

Dois ou mais dispositivos conectados

entre si

Estrutura de documento

HTML

• Listas em HTML

▫ Listas não ordenadas: semelhantes

a listas com marcadores.

▫ Possuem a seguinte estrutura.



 Termo a ser definido

 Definição



• Ex:

Banco de dados

Redes

 Resultado

 Banco de dados

 Redes

Estrutura de documento

HTML

• Exemplos de listas ordenadas
• Lista numerada:

Maçãs

Bananas

Limões

Laranjas

• Lista com letras:

Maçãs

Bananas

Limões

Laranjas

Estrutura de documento

HTML• Exemplos de listas ordenadas

Lista com letras minúsculas:   Maçãs  Bananas  Limões  Laranjas 

• Lista com números romanos:   Maçãs  Bananas  Limões  Laranjas 
• Lista com números romanos minúsculos:   Maçãs  Bananas  Limões  Laranjas 