Aula de HTML - Parte 1

Programação para
Web
Prof. Francisco do Nascimento
UNIBRATEC - ADS
HyperText Transfer Protocol
 Texto e hipertexto
 HTTP - protocolo criado para permitir a troca
de documentos de hipertexto
http://servidor/pagina.html
<html>
Cliente Servidor
Hyper Text Markup Language
 HTML – linguagem de marcação de
hipertexto
 Linguagem insensível a caixa
 Documentos HTML
 Tags HTML
 <tag>corpo</tag>
HTML – Estrutura de uma tag
NomePar
da Atributo-
Marcadores da Texto
TagValor
Tag Comum
<FONT COLOR=“Blue”> texto azul

</FONT>
<IMG SRC=“figura.gif” WIDTH=“250”>
<A HREF=“pagina.html”>Voltar</A>
HTML – Estrutura de um documento
<HTML>
<HEAD>
Informações sobre o documento:
autor,
<title>título</title>
, etc...
</HEAD>
<BODY>
Corpo do documento
(parte a ser visualizada)
</BODY>
</HTML>
Cores e padrões de fundo
 Propriedades da tag <body>

 Podemos definir cores para os textos, links e para o fundo
das páginas, bem como uma imagem de fundo (marca
d’água).
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"

ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">
Propriedades da tag <body>
 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
Exemplos
Nomes de Cores
 16 cores podem ser usadas pelo nome
aqua black blue fuchsia

gray green lime maroon
navy olive purple red
silver teal white yellow
 As demais precisa usar o código RGB
Ex. bgcolor=“RGB”
Cada letra (R, G e B) pode
variar de 0 até 256 em
Hexadecimal (De 00 até FF)
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
Exercício 1
 Monteuma página título da janela “Aula 01 -
PW”, background=red e conteúdo abaixo:
Recife é um município brasileiro, capital do estado de Pernambuco.
Exemplos
Espiral.gif
Formatação de Textos e Caracteres
 Tagsutilizadas para formatar um conjunto

qualquer de caracteres
 Font
 Negrito
 Itálico
 Sublinhado
 Sobrescrito e Subscrito
 Strong
 Small
Alterando a fonte
 A tag <font> altera o tamanho, cor ou tipo da
fonte de um caractere (ou um conjunto de
caractere)
 Possui três propriedades básicas
 SIZE  Tamanho da Fonte
 FACE  Tipo de Fonte
 COLOR  Cor da Fonte
<font face="Arial"
size=”5" color="red">Texto formatado</font>
Exemplos de uso
Negrito
 Utilização da tag <b> entre o texto que se
deseja formatar
Itálico
 Utilização da tag <i> entre o texto que se deseja
formatar
Sublinhado
 Utilização da tag <u> entre o texto que se
deseja formatar
Strong
 Similar ao negrito
Small / Big
 Reduz / aumenta a fonte
<html>
<head>
<title>Exemplo small</title>
</head>
<body>
Esse texto contem <small>letras </small> pequenas
</body>
</html>
Sobrescrito e Subscrito
 Para sobrescrever um texto usa-se a tag <sup>
 Para subescrever um texto usa-se a tag <sub>

Pré-formatação
 Tag utilizada quando queremos que o browser mostre nosso texto
exatamente como ele está escrito no código fonte (arquivo HTML)
 Considerando espaços em branco, quebra de linhas, etc.
Exercício 2
 Altere a página do exercício anterior:
1. Colocar uma imagem como background
2. Completar o texto apresentado abaixo e apresentá-lo com
 fonte Arial, tamanho 2
 Recife estará Negrito e sublinhado
 O trecho entre ( ) estará em itálico
Recife é um município brasileiro, capital do estado de Pernambuco.

Localizada às margens do oceano Atlântico, a cidade tem uma área
de 217,494 km2
e uma população de 1,55 milhão de pessoas (ou 3,73 milhões,
contando a área metropolitana)[1].
Centralização de Textos e de
Outros Elementos
 Por
padrão os textos são alinhados pela
margem esquerda
 Para centralizar parágrafo, cabeçalho ou

figura utilize a tag: <center></center>
 Exemplo:
<center><h1>Seção 1</h1></center>
HTML – Elementos básicos
 Títulos(Cabeçalhos)
 Parágrafos
 Quebras de Linha
 Linhas Horizontais
Títulos (Cabeçalhos)
 Título do documento
Título do
<html> documento
<head>
<title>Primeiro documento</title>
...
</head>
...
</html>
 Títulos de Seção ou de Cabeçalhos

 Útil para separar informações de acordo com sua
relevância
 Existem 6 tags de título
<h1>, <h2>, <h3>, <h4>, <h5> ou <h6>
Tamanho de Fonte
Maior Menor
 Títulos de Seção ou de Cabeçalhos
 Exemplo
 Alinhamento de títulos
 Por padrão os títulos são alinhados à esquerda da
página
 É possível alinhar da forma como você desejar
 Centro
 Esquerda
 Direita
 Justificado
 Utilizando a propriedade align
<h1 align=“center”> Texto no Centro </h1>
 Alinhamento de títulos
Alinhamento align=
Centro center
Esquerda left
Direita Right
Justificado Justify
Parágrafos
 Existe
uma tag especial para definição de
parágrafos
 Separação do texto em blocos
 A tag <p> é utilizada para tal fim
<p> Este é um parágrafo. </p>

Parágrafos - Exemplo
Alinhamento de parágrafos
 Por padrão os títulos são alinhados à esquerda da

página
 É possível alinhar da forma como você desejar
 Centro
 Esquerda
 Direita
 Justificado
 Utilizando a propriedade align

<p align=“center”> Texto do Parágrafo</p>
Alinhamento de parágrafos
Quebra de linha
 Muitas vezes é necessário iniciar uma nova linha

sem necessariamente iniciar um novo parágrafo
 Em HTML a quebra de linha é feita com o uso da

tag <br>
Exemplos
Divisões Horizontais
 Permite separar texto através da inserção de linhas horizontais
 Para tal fim usa-se a tag <hr>

Exemplo
Propriedade da tag <hr>
 Comprimento (width)
 Pode ser em Pixels (pontos) ou em percentual
 Largura (size)
 Pode ser em Pixels (pontos) ou em percentual
 Alinhamento (align)
 Pode ser center, left ou right
Exemplo
Resumo das tags
 Títulos (ou Cabeçalhos)
 <h1>, <h2>, <h3>, <h4>, <h5> e <h6>
 Parágrafos
 <p>
 Quebra de linhas
 <br>
 Divisões Horizontais
 <hr>
Acentuação e caracteres especiais
 Alguns editores substituem os caracteres
acentuados por seus respectivos códigos
 Exemplo: símbolo é escrito como
símbolo
 Caracteres especiais também podem ser
representados da mesma maneira
 Exemplos:
® - ® © - © & - &
< - < > - > 1
/4 - ¼
Exercícios

Aula de HTML - Parte 1

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Aula de HTML - Parte 1

Загружено:

Авторское право:

Доступные форматы

Programação para

<FONT COLOR=“Blue”> texto azul

 Propriedades da tag <body>

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"

aqua black blue fuchsia

 Tagsutilizadas para formatar um conjunto

 Para subescrever um texto usa-se a tag <sub>

Recife é um município brasileiro, capital do estado de Pernambuco.

 Para centralizar parágrafo, cabeçalho ou

 Títulos de Seção ou de Cabeçalhos

<p> Este é um parágrafo. </p>

 Por padrão os títulos são alinhados à esquerda da

 Utilizando a propriedade align

 Muitas vezes é necessário iniciar uma nova linha

 Em HTML a quebra de linha é feita com o uso da

 Permite separar texto através da inserção de linhas horizontais

 Para tal fim usa-se a tag <hr>

Вам также может понравиться