Aula HTML

HIPERTEXT MARKUP LANGUAGE
LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO

World - mundo
Wide - amplo, largo - Worldwide - mundial, universal
Web - teia (de aranha) ou rede (de computadores)
Texto
Mensagens, trabalhos, material
didático, corporativo ou pessoal.
Características: tamanho, cor, fonte,
estilos, eventos, ...
Imagem
Desenhos, efeitos visuais,
animações, símbolos, fotos, filmes, ...
Características: tamanho, formato,
eventos, qualidade, ...
Áudio
Músicas, sons, fundo, efeitos, voz, ...
Características: loop, tamanho,
formato, ...
Página principal
Página inicial
Home
HP
Ir para lá
Página X Página Y
Agora ir o final
Agora ir para lá
Final Ir para HP
O navegador WEB, ou o Browser, é um programa de
computador que consegue ler a página HTML, interpretar seus
comandos e apresentar na tela em uma forma compreensível
para o usuário.
O Browser é um interpretador,
interpretador ou seja, após ler, ele “decifra”
os comandos escritos em HTML, verifica sua sintaxe e então
executa-os.
Portanto, a linguagem HTML “acontece” no computador do
usuário. Se houver qualquer alteração na página, é necessário
carregar novamente para mostrar as atualizações.
Servidor é todo computador que possui uma função específica
em uma rede. Geralmente são máquinas mais potentes tanto em
processamento (velocidade) como em armazenamento
(capacidade).
O programa que é executado no servidor para disponibilizar as
páginas é chamado de servidor WEB (Apache, IIS, ...)
Quando digitamos www.feevale.br, por exemplo, é apresentada

na tela a página inicial (HP)
HP que está armazenada em um
computador (servidor)
servidor na WEB (internet).
internet A partir da HP
“navegamos” pelas outras telas por meio de seus links.
Usuário digita um
endereço WEB no
Browser
www.feevale.br
Computador do
usuário recebe,
interpreta e
mostra página <html>
HTML <head>
<title>HP</title>
</head>
<body>
Página Inicial Servidor WEB envia

</body>
código HTML da página
inicial (HP)
</html>
Uma página HTML pode ser criada/editada em um editor de
texto comum, Bloco de Notas, por exemplo, pois seu conteúdo é
texto, sem formatação.
Também pode ser utilizado programas específicos para isso:
Dreamweaver da Macromedia, Front Page da Microsoft, ...
Programas freeware também podem ser encontrados na WEB.
A vantagem dos programas editores de página HTML é que

eles adotam as facilidades e recursos do Windows para criar
páginas, sem necessariamente ter um conhecimento maior de
programação e de HTML.
As páginas html possuem <html>
extensão htm ou html.
html
<head>
Os comandos são chamados <title>New Page 1</title>
de TAGS, que são marcas </head>
padrão usadas para indicar
ao Browser os comandos a <body>
serem executados. Curso de HTML.
As tags são digitadas entre </body>
“<“ e “>”.
Geralmente são utilizadas </html>
em pares “< >” e < / >”.
- <html> e </html> <html>
representam o início e o
final da página e englobam <head>
todos os comandos (head e <title>New Page 1</title>
body). </head>
- <head> e </head> contém
os parâmetros de <body>
configuração da página, o Curso de HTML.
título, keywords, </body>
identificação, ...
- <body> e </body> é o </html>
próprio conteúdo da
página.
 : negrito
 : itálico
 : sublinhado
 : formatação da fonte
face = “nome da fonte” (p.e. arial, ...)
size = tamanho (1, 2, 3, ...)
color = "#000080” (hexa)
<html>
<head>
<title>New Page 1</title>
</head>
<body>
Curso de
HTML.
</body>
</html>
Observar as tags </> fechando cada formato.

 e : quebra de página
align = alinhamento (center, left ou right)
<html>
<head>
<title>New Page 1</title>
</head>
<body>
Curso de
HTML.
Turma
2004/2
Disciplina:
Didática 
Professor Paulo
</body>
</html>
<ul> </ul>: listas não numeradas
<li> </li>: tópicos da lista Tópicos
•Tópico 1
•Tópico 2
<html>
<head>
<title>Listas</title>
</head>
<body>
Tópicos

<ul>
<li>
Tópico 1</li>
<li>
</ul>
</body>
</html>
<ol> </ol>: listas numeradas
<li> </li>: tópicos da lista Tópicos
1. Tópico 1
2. Tópico 2
<html>
<head>
<title>Listas</title>
</head>
<body>
Tópicos

<ol>
<li>
<li>
</ol>
</body>
</html>
<hr>: insere uma barra horizontal na página
<html>
<head>
<title>Barras Horizontais</title>
</head>
<body>
Barras

<hr size="4">
Texto da página
</body>
</html>
<img src = “imagem.jpg”:
insere uma imagem com largura e altura
definido.
<html>
<head>
<title>Imagens</title>
</head>
<body>
<img src = “rv001.jpg” align = “left” width = “109” height = “122”>
</body>
</html>
<html>
Páginas do mesmo servidor, mesma pasta
<head>
<title>Links</title>
</head>
<body>
<a href = “pagina2.html”>Ir para página 2</a>
</body>
Outros servidores </html>
<html>
<head>
</head>
Email <body>
<a href = “http://www.feevale.br”>Página da Feevale</a>
</body>
<html>
</html>
<head>
</head>
<body>
<a href = “mailto:ppasqua@terra.com.br”>Enviar um mail</a>
</body>
</html>
Background
Arquivo de som da página (c/s loop)
Imagem de fundo
Cor do fundo
Cor do texto
Cores dos links
<html>
<head>
<title>Formato da Página</title>
<bgsound src=“musica.mid" loop="1">
</head>
<body background="snoopy.jpg" bgcolor="#FFFFFF" text="#00FF00“ link="#333333" vlink="#000000"
alink="#000000">
Esta página contém uma figura de fundo
</body>
</html>
Tabela Border: espessura da borda
Linhas Cellspacing = espaço entre as
Colunas células
<html>
Cellpading = distância do texto até
<head>
<title>Tabelas</title>
a borda da célula
</head>
<body >
Align = alinhamento horizontal do
Esta página contém uma tabela
<table border = “2” cellspacing = “1” cellpading = “2”>
texto na célula (center, left ou right)
<tr>
<td align = center valign = top>Nome</td>
Valign = alinhamento vertical na
<td align = left>Endereço</td>
</tr>
célula (top, middle ou botton)
<tr>
<td>Paulo</td>
<td>ppasqua@terra.com.br</td>
</tr>
</table>
</body>
</html>
*Nowrap: evita quebra de linha
<html>
COLSPAN:
<head>
Mesclar colunas em uma única célula <title>Tabelas</title>
</head>
<html> <body >
Esta página contém uma tabela
<head> <table border = “2”>
<title>Tabelas</title> <tr>
</head> <td>Nome</td>
<body > <td>Cidade</td>
Esta página contém uma tabela </tr>
<table> <tr>
<tr> <td>Paulo</td>
<td colspan = 2>Nome e e-mail</td> <td rowspan = 3>Porto Alegre</td>
</tr> </tr>
<tr> <tr>
<td>Paulo</td> <td>Mario Quintana</td>
<td>ppasqua@terra.com.br</td> </tr>
</tr> <tr>
</table> <td>Elis Regina</td>
</body> </tr>
</table>
</html> </body>
</html>
ROWSPAN: Mesclar linhas em uma única célula

Bordas Alinhamento Cores
Identificação Espaçamento
Tamanho Rowspan Interatividade

Colspan
Ao publicar uma página você passa a ser autor e seu trabalho
fica disponível para quem navegar pela WEB.
Enquanto educadores, somos responsáveis pela qualidade e
exatidão dos nossos trabalhos.
A qualidade está no conteúdo do nosso trabalho e também no

seu formato. Cores, banners, textos e figuras devem considerar
facilidades/dificuldades do usuário para acessar a internet.
Observar tamanho das figuras, cores de fundo e do texto,

disposição e quantidade de material na página.

Aula HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Aula HTML

Caricato da

Copyright:

Formati disponibili

HIPERTEXT MARKUP LANGUAGE

LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO

Quando digitamos www.feevale.br, por exemplo, é apresentada

<p>Página Inicial</p> Servidor WEB envia

Programas freeware também podem ser encontrados na WEB.

A vantagem dos programas editores de página HTML é que

Observar as tags </> fechando cada formato.

<p><b><font face="Verdana" size="2" color="#000080">Tópicos</font></b></p>

<p><b><font face="Verdana" size="2" color="#000080">Tópicos</font></b></p>

<p><font face="Verdana" size="2" color="#000080">Barras</font></p>

<img src = “rv001.jpg” align = “left” width = “109” height = “122”>

Outros servidores </html>

ROWSPAN: Mesclar linhas em uma única célula

Tamanho Rowspan Interatividade

A qualidade está no conteúdo do nosso trabalho e também no

Observar tamanho das figuras, cores de fundo e do texto,

Potrebbero piacerti anche