Curso PHP Perl 2

Noções Básicas de HTML
HyperText Markup Language
José Luís Faria
O que é HTML? j1
j2
1
Slide 2
j1 É um sistema de marcação de texto que identifica partes e características de um documento.

Não contêm imagens, sons, vídeos, apenas
TEXTO SIMPLES
Contudo pode conter apontadores ou ligações para ficheiros com estes conteúdos.
zz; 21-09-2003
Slide 3
j2 não têm o aspecto que é apresentado no Browser.
Além do texto contém etiquetas e atributos, que indicarão ao Browser como mostrar partes deste
documento.
zz; 21-09-2003
4
Um documento em HTML …
é constituído pelo Texto a apresentar e pelas
Etiquetas com ou sem atributos.
Exemplo:
<h1 align=“center”>Texto centrado</h1>
atributo
Etiquetas
A maioria das etiquetas ocorrem aos pares e
tem a seguinte sintaxe:
Fecha
etiqueta
Exemplo:
<etiqueta [atributo=“valor”]>Texto [</etiqueta>]
Abre
etiqueta Valor Texto a
Atributo
mostrar
6
2
j3
O que podemos fazer com

HTML?
j5
• Desenvolver sítios para intranet ou
Internet
• Desenvolver ficheiros de ajuda
• Desenvolver aplicações para rede
• Desenvolver aplicações para quiosques

multimédia
7
Locais com informação

actualizada?
• Web design group
– http://www.htmlhelp.com
• Web developer’s Virtual Library
– http://www.stars.com
• HTML writer’s Guild
– http://www.hwg.org
• C|Net’s Builder.com
– http://www.builder.com
8
Estrutura básica de um documento

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Exemplo da estrutura de um documento em HTML
</body>
</html>
j4
Etiqueta
!DOCTYPE
Etiqueta
Etiqueta Etiqueta Etiqueta HTML
BODY TITLE HEAD
9
3
Slide 7
j3 O que é preciso?
--------------------------------
Um editor de texto para criar e gravar os documentos de HTML

Ultraedit
Winedt
notepad
Um Browser para ver e testar estes documentos
Netscape
Internet Explorer
zz; 21-09-2003
j5 Web design group

http://www.htmlhelp.com
Web developer’s Virtual Library
http://www.stars.com
HTML writer’s Guild
http://www.hwg.org
C|Net’s Builder.com
http://www.builder.com
zz; 21-09-2003
Slide 9
j4 !DOCTYPE
Indica qual o DTD que está a usar. Neste caso é o 4.01 da W3C.
<HTML> … </HTML>
Indica que é um documento em HTML.
<HEAD> … </HEAD>
Podemos inserir dentro deste par o título da página e outras informações para o browser.
<TITLE> … </TITLE>
Título da página que o browser coloca na barra de título.
<BODY> … </BODY>
Inclui todas as etiquetas, atributos e informações que queremos mostrar nos browser.
zz; 21-09-2003
Etiquetas e atributos mais comuns
•<P> … [</P>]
– Atributos:
• ALIGN=“LEFT”
• ALIGN=“RIGHT”
• ALIGN=“CENTER”
– Criar parágrafos
<p>
Exemplo de um parágrafo
</P>
10
Etiquetas e atributos mais comuns (cont.)

•Outros formatos de parágrafos
– <ADDRESS> … </ADDRESS>
• Formatar endereços ou informações sobre contacto
– <BLOCKQUOTE> … </BLOCKQUOTE>
• Forma um parágrafo alinhado à esquerda e à direita
•<BR>
– Quebra a linha
11

•<Hn> … </Hn>
– Cria títulos dentro do documento. O texto
aparece com diferentes tamanhos.
– Existem definidos 6 tipos diferentes
• <h1> … </h1>
• <h2> … </h2>
• …
• <h6> … </h6>
– Atributo ALIGN é possível!
12
4
Escolha um editor de texto e
um browser e implemente o

•<OL> … </OL>
– Lista de itens ordenada
•<UL> … </UL>
– Lista de itens com marcas
•<LI>
– Especifica o item para a lista
14

Aplica-se a letras e palavras:
•<B>…</B>
– Coloca texto em negrito
•<I> … </I>
– Texto em itálico
•<U> … </U>
– Texto sublinhado
•<SUB> … </SUB> e <SUP> … </SUP>
– Texto abaixo da linha e acima da linha
15
5
•<HR>
– Insere uma linha horizontal
– Atributos
• SIZE=n
• WIDTH=“n”
• WIDTH=“n%”
• ALIGN=“{LEFT | CENTER | RIGHT}”
• NOSHADE
16

Ligar Documentos
em HTML j6
6
Slide 18
j6 Uma das principais vantagens de usar HTML consiste em colocar, pelo meio do documento, etiquetas
que permitem ligar vários documentos.
Estas etiquetas identificam outros documentos que facilmente são acessíveis com um simples toque
do apontador.
A estas etiquetas chamamos âncoras.
zz; 21-09-2003
Âncoras
Sintaxe de uma âncora:
<A HREF=“URL” [atributo=valor] …>Texto_ligação</A>
<A ...> : etiqueta âncora

HREF : endereço do recurso a aceder
Texto_ligação : texto associado ao URL
19
Anatomia de um URL
• Acrónimo de Uniforme Resource Locator
• Exemplo:
http://www.blabla.pt/~jpp/index.html
ficheiro
protocolo pasta
Nome do
“local”
20
Protocolo j7
• Protocolo:
– http:// - para documentos na WWW
– file:/// - para documentos no disco
– ftp:// - para documentos num servidor de FTP
– news: - acede a um servidor de news
– Etc.
21
7
Slide 21
j7 Especifica a linguagem que o nosso browser vai ter de aplicar para aceder ao recurso
zz; 21-09-2003
Nome do “local” j8
• Exemplo:
– www.builder.com
– www.htmlhelp.com
– www.star.com
– etc.
22
Pasta
j9
• Exemplo:
– /ajuda/html/primeiros_comandos/index.html
– /apoio/ensino/ajuda/php/manual.html
– /howto.html
23
Ficheiro j10
• Exemplo:
– /ficheiros/musicas/roxette/wish_i_could_fly.mp3
– /ficheiros/videos/celine/MyHeartWillGoOn.mpg
– /documentos/ajuda/manual.pdf
– /pessoal/cvitae.html
– /ajuda/
–/
24
8
Slide 22
j8 Indica o nome do computador/recurso que deverá ser acedido para pedir o respectivo recurso.
zz; 21-09-2003
Slide 23
j9 Indicação do percurso a seguir, através das pastas de documentos, para encontrar o ficheiro
desejado.
Os documentos estão organizados numa árvore de directorias. Para indicar um documento temos de
especificar todos os ramos desde a raiz até ao local.
zz; 21-09-2003
Slide 24
j10 Documento a puxar para o browser.

zz; 21-09-2003
Árvore de documentos (exemplo)
Raíz
da
árvore
Index.html
serviços contactos
nomes.html
outros consultas.html
dicas.html 25
Exemplos de URL absolutos j12
• http://www.empresaX.pt/
• http://www.empresaX.pt/index.html
• http://www.empresaX.pt/contactos/nomes.html
• http://www.empresaX.pt/serviços/consultas.html
• http://www.empresaX.pt/serviços/outros/dicas.html
26
Exemplos de URL relativos j13
• /outros/dicas.html
• /contactos/nomes.html
• /serviços/consultas.html
27
9
Slide 26
j12 zz 21-09-2003
Absolutos
----------------------
Os URLs absolutos contém toda a informação necessária para identificar o ficheiro na Internet.
Relativos
----------------------
Um URL relativo aponta para um ficheiro dentro do mesmo servidor ou na mesma pasta.
zz; 21-09-2003
Slide 27
j13 Ou URL relativos podem colocar-se dentro de um documento que serve de base.
zz; 21-09-2003
Exemplos de Âncoras
• <A HREF=“http://www.empresaX.pt/”>…</A>
• <A HREF=“http://www.empresaX.pt/serviços/consultas.html>...</A>
• <A HREF=“/serviços/outros/dicas.html”>…</A>
• <A HREF=“../serviços/consultas.html>...</A>
28
Âncora nome j14
<A NAME=“nome_ancora”>Texto</A>
Exemplo:
j15
<H2><A NAME=“proposta_2004”>Propostas 2004</A></H2>
29
Tabelas em HTML j16
10
Slide 29
j14 É possível aplicar âncoras e “saltitar” dentro do mesmo documento.
Para isso é preciso aplicar nos diferentes locais destino do documento uma âncora nome.
zz; 21-09-2003
j15 Escrever no quadro:
<A HREF=“#proposta_2001”>
zz; 21-09-2003
Slide 30
j16 Consistem basicamente em linhas mestras que produzem uma distribuição por linhas e colunas de
outros elementos.
À intercepção de uma linha com uma coluna chamamos célula.
Podemos usar as tabelas para organizar outros elementos dentro das páginas HTML.
zz; 21-09-2003
Etiquetas básicas para Tabela
j17
<TABLE>
<TR>
<TD>
<TH>
31
Tabela Simples
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tabelas</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

</head>
<body>
Exemplo de uma tabela
<table>
<tr><th>Mês</th><th>Pluviosidade</th></tr>
<tr><td>Janeiro</td><td>250</td></tr>
<tr><td>Abril</td><td>230</td></tr>
<tr><td>Agosto</td><td>50</td></tr>
<tr><td>Novembro</td><td>125</td></tr>
</table>
</body>
</html>
32
No Browser…
33
11
Slide 31
j17 <TABLE>
Define uma tabela dentro de um documento HTML
<TR>
Cria uma linha na tabela
<TD>
Cria uma célula dentro de um linha da tabela
<TH>
Marca uma célula para cabeçalho
zz; 21-09-2003
Exemplo
Exemplo de uma tabela
<table>
<tr><th>Mês</th><th>Pluviosidade</th></tr>
<tr><td>Janeiro</td><td>250</td></tr>
<tr><td>Abril</td><td>230</td></tr>
<tr><td>Agosto</td><td>50</td><td>aprox.</td></tr>
<tr><td>Novembro</td><td>125</td></tr>
</table>
34
No Browser…
35
j18
Formatar tabelas
• Adicionar bordo
• Incluir cor de fundo e imagens
• Ajustar espaços das células
• Ajustar alinhamento das células
• Especificar o seu tamanho
• Especificar o alinhamento da tabela
36
12
Slide 36
j18 Adicionar atributos que irão melhorar o aspecto da tabela, tais como:
zz; 21-09-2003
Atributos para <TABLE>
• BORDER=“n”
– largura do bordo em pixeis
• BORDERCOLOR=“#rrggbb”
– Cor deste bordo
• BGCOLOR=“#rrggbb”
– Cor de fundo da tabela
37
Formulários em HTML j19
Forms j20
• editor WYSIWYG:
– Windows
• Frontpage
• Dreamweaver
– Linux
• Quanta
• Bluefish
39
13
Slide 38
j19 O form em HTML é a estrutura que permite a comunicação entre o utilizador e o servidor de WWW.
Consiste num conjunto de elementos básicos que permitem ao utilizador introduzir dados que
posteriormente são enviados ao servidor.
zz; 21-09-2003
Slide 39
j20 Se pretende desenhar vários forms e com alguma complexidade, aconselha-se o uso de um editor
WYSIWYG:
zz; 21-09-2003
Forms j21
• editor de texto.
– Windows
• Winedt
• Ultraedit
– Linux
• vi
• kwrite
• kate
40
Criar um Form j22
• Passos para desenhar um Form

– Determinar que dados incluir
– Determinar a melhor forma de os apresentar
– Dividir estes dados em elementos mais simples e
manipuláveis:
morada
É diferente de …
Rua,
Localidade,
Código Postal
41
Forms j23
• A parte que se vê:

– o formulário que o utilizador preenche
• A parte que não se vê:

– Programa que indica ao servidor o que fazer com os
dados recolhidos:
• PHP
• Perl
• Etc.
42
14
Slide 40
j21 Se pretende implementar forms pequenos e simples o mais fácil é usar um editor de texto
zz; 21-09-2003
Slide 41
j22 Deve garantir que o Form obtêm facilmente os dados, de que necessita, da parte do utilizador
Para que isso aconteça crie Forms:

Funcionais
Visualmente Apelativos
zz; 21-09-2003
Slide 42
j23 Os forms são constituídos por duas partes

zz; 21-09-2003
Widgets j24
• Botão de Submit j27
• Botão de Reset j28
43
Widgets (cont.)
• Text Field j25
• Select List j26
44
Widgets (cont.)
• Check Box j29
• Radio Buttonj30
• Text Area j31
45
15
Slide 43
j24 Também chamados de controlos

São campos onde se recolhem os dados:
zz; 21-09-2003
j27 Envia os dados para o servidor para serem processados

zz; 21-09-2003
j28 Retorna a Form ao seu estado original

zz; 21-09-2003
Slide 44
j25 Área para recolher um pequeno texto, como por exemplo: nome, localidade, termo de pesquisa
zz; 21-09-2003
j26 Apresenta um lista de itens para o utilizador escolher um ou mais do que um. Usado para apresentar
uma lista longa mas finita de opções. Por exemplo escolher um país.
zz; 21-09-2003
Slide 45
j29 Lista de opções para ser escolhida, nenhuma, uma ou várias. Apropriado para múltiplas escolhas. Por
exemplo indicar as várias actividades do utilizador.
zz; 21-09-2003
j30 Permite escolher apenas uma opção de entre várias. Por exemplo nível etário do utilizador.
zz; 21-09-2003
j31 Área para introdução de um texto longo. Adequado para respostas abertas.
zz; 21-09-2003
Form muito simples
<FORM>
<INPUT TYPE=“SUBMIT” VALUE=“enviar”>
<INPUT TYPE=“RESET” VALUE=“Limpar”>
</FORM>
46
Atributos para <INPUT>
• TYPE=“…”
– TEXT, PASSWORD, CHECKBOX, RADIO,
FILE,HIDDEN,IMAGE,SUBMIT e RESET
• NAME=“…” j32
• VALUE=“…” j33
47
• SIZE=“n” j34
• MAXLENGTH=“…” j35
48
16
Slide 47
j32 Associa um nome a esta campo, para mais tarde usar como nome de variável.
zz; 21-09-2003
j33 Valor a atribuir a esta campo por defeito

zz; 21-09-2003
Slide 48
j34 Determina o tamanho visível deste campo. Usado nos campos de texto.
zz; 21-09-2003
j35 Define o tamanho máximo de caracteres a submeter. Usar nos campos de texto.
zz; 21-09-2003
• SELECTED j36
• ACCEPT=“…” j37
49
Campo text
Rua..:
<input type=“text” name=“rua” size=“30” maxlenght=“30”>
50
Radio buttons
Escolha a Região:
<input type=“radio” name=“zona” value=“norte” checked> Norte<br>
<input type=“radio” name=“zona” value=“centro”> Centro<br>
<input type=“radio” name=“zona” value=“sul”> Sul<br>
<input type=“radio” name=“zona” value=“madeira”> Madeira<br>
<input type=“radio” name=“zona” value=“açores”> Açores<br>
51
17
Slide 49
j36 Indica uma selecção por defeito logo que o form é carregado.
zz; 21-09-2003
j37 Especifica qual o tipo MIME do ficheiro para upload. Aceita por exemplo image/gif ou image/* para
todos os tipos de imagem.
zz; 21-09-2003
Check Boxes
Indique as estações:
<input type=“checkbox” name=“verao” value=“verao”> Verão<br>
<input type=“checkbox” name=“outono” value=“outono”> Outuno<br>
<input type=“checkbox” name=“inverno” value=“inverno”> Inverno<br>
<input type=“checkbox” name=“primavera” value=“primavera”>
Primavera<br>
52
File Field
Indique o ficheiro a enviar:

<input type=“file” name=“foto” size=“20” accept=“images/*”>
53
Text Areas
Dê-nos a sua opinião:
<textarea> name=“opiniao” rows=“5”
cols=“20”>Escreva aqui.</textarea>
54
18
Campo Select
Concerto a que gostaria de assistir:
<select name="grupos">
<option value="Roxette">Roxette
<option value="Corrs“ selected>Corrs
<option value="House Cap">House Cap
</select>
55
Processar Forms
• Após preencher o formulário o utilizador
prime o botão “SUBMIT”.
• Os dados do formulário são enviados para

o servidor.
56
Atributos da Tag Form

• ACTION=“…”j38
• METHOD=“…”j39
<form method=“post” action=“InserirTabela.php”>

…
57
19
Slide 57
j38 Indicamos o programa no servidor que vai processar os dados deste form
zz; 21-09-2003
j39 Indica ao browser como deve enviar estes dados para o servidor como GET ou como POST
zz; 22-09-2003
HTTP - Method
• HEAD
– Serve de teste entre o browser cliente e o servidor Web.
• GET
– Forma comum dos browser requerem páginas. Usado
quando carregamos num link. Podemos usar num form
para enviar pequenas quantidades de parâmetros.
• POST
– Tipo GET mas usado para enviar dados em grandes
quantidades. Caso de forms com campos grandes.
58
O method GET
• Forma normal para obter
informação/páginas do servidor.
• Os dados são fornecidos ao servidor
através do URL, do tipo:
http://www.servidor.pt/cgi/procura.plx?chave=funcao&quantos=10
../..
59
O method GET
• Principal vantagem consiste em ser bookmarked.
• Só pode conter no URL até 256 caracteres.
• Alguns caracteres não são permitidos: espaço, &, “,

?, etc. devem ser substituídos por um código (URL-
escaping). Exemplo:
• Espaço Æ %20
Nota: na substituição de um carácter por três atinge mais rapidamente o

máximo de 256 caracteres de limite do URL.
60
20
O method POST
• No POST os parâmetros são passados no
corpo do pedido, logo não têm limitações
de tamanho.
• Não são bookmarked.
61
Página de sucesso
• No fim do form ser enviado, podemos
invocar uma página de sucesso por
exemplo:
<input type=“hidden” name=“sucesso”

value=http://www.empresaX.pt/respostas/obrigado.html>
• Este campo não aparece no browser.
62

21

Curso PHP Perl 2

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso PHP Perl 2

Enviado por

Direitos autorais:

Formatos disponíveis

Noções Básicas de HTML

HyperText Markup Language

José Luís Faria

j1 É um sistema de marcação de texto que identifica partes e características de um documento.

j2 não têm o aspecto que é apresentado no Browser.

<h1 align=“center”>Texto centrado</h1>

<etiqueta [atributo=“valor”]>Texto [</etiqueta>]

O que podemos fazer com

• Desenvolver ficheiros de ajuda

• Desenvolver aplicações para rede

• Desenvolver aplicações para quiosques

Locais com informação

Estrutura básica de um documento

Um editor de texto para criar e gravar os documentos de HTML

j5 Web design group

Etiquetas e atributos mais comuns (cont.)

Etiquetas e atributos mais comuns (cont.)

Etiquetas e atributos mais comuns (cont.)

Etiquetas e atributos mais comuns (cont.)

Escolha um editor de texto e

<A HREF=“URL” [atributo=valor] …>Texto_ligação</A>

<A ...> : etiqueta âncora

j10 Documento a puxar para o browser.

Exemplos de URL absolutos j12

Exemplos de URL relativos j13

Âncora nome j14

<H2><A NAME=“proposta_2004”>Propostas 2004</A></H2>

Tabelas em HTML j16

j14 É possível aplicar âncoras e “saltitar” dentro do mesmo documento.

j15 Escrever no quadro:

À intercepção de uma linha com uma coluna chamamos célula.

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Formulários em HTML j19

Criar um Form j22

• Passos para desenhar um Form

• A parte que se vê:

• A parte que não se vê:

Para que isso aconteça crie Forms:

j23 Os forms são constituídos por duas partes

• Botão de Submit j27

• Botão de Reset j28

• Text Field j25

• Select List j26

• Check Box j29

• Text Area j31

j24 Também chamados de controlos

j27 Envia os dados para o servidor para serem processados

j28 Retorna a Form ao seu estado original

Atributos para <INPUT>

Atributos para <INPUT>

j33 Valor a atribuir a esta campo por defeito

Indique o ficheiro a enviar:

• Os dados do formulário são enviados para

Atributos da Tag Form

<form method=“post” action=“InserirTabela.php”>

• Só pode conter no URL até 256 caracteres.

• Alguns caracteres não são permitidos: espaço, &, “,

Nota: na substituição de um carácter por três atinge mais rapidamente o

• Não são bookmarked.

<input type=“hidden” name=“sucesso”

• Este campo não aparece no browser.

Escolha um editor de texto e