Introdução à Programação Web

Prévia do material em texto

CONCEITOS BÁSICOS E 
INTRODUÇÃO À PROGRAMAÇÃO WEB 
Profa. Ana Carolina B. De Marchi 
carolina@upf.br 
O QUE É REDE? 
 Uma rede liga dois ou mais computadores de forma 
a possibilitar a troca de dados e o compartilhamento 
de recursos. 
 
 Permite acesso simultâneo a programas e dados. 
 
 Permite que as pessoas compartilhem dispositivos 
periféricos e informações. 
 
 Agiliza as comunicações pessoais. 
 
 
2 carolina@upf.br 
INTERNET - HISTÓRICO 
 Rede mundial de computadores. 
 Criada em 1969, nos Estados Unidos. Interligava 
originalmente laboratórios de pesquisa: 
ARPANET. 
 Objetivos militares: era uma rede do 
Departamento de Defesa norte-americano. Era 
descentralizada. 
 1970: as universidades foram interligadas. 
 1990: deixou de ser usada apenas para meio 
acadêmico. 
3 carolina@upf.br 
INTERNET - HOJE 
 É uma arquitetura de software e hardware 
interligados mantida por organizações comerciais e 
governamentais. 
 
 Não possui um proprietário único, responsável pelo 
seu funcionamento. Existem apenas associações e 
grupos que se dedicam a desenvolver protocolos e 
procedimentos para suportar a interligação entre os 
computadores, definir padrões e resolver questões 
operacionais. 
4 carolina@upf.br 
O QUE SÃO PROTOCOLOS? 
 São padrões que especificam como as redes devem 
funcionar. 
 
 São trocas formalizadas fixas que especificam como 
dois componentes diferentes estabelecem 
comunicação. 
 
 São como “boas maneiras”. 
 
5 carolina@upf.br 
PROTOCOLO TCP/IP 
 TCP/IP: abreviação de dois protocolos mais 
importantes da Internet. 
 
 Protocolo de rede: Internet Protocol (IP): possui 
mecanismos para endereçar redes, permitindo que 
qualquer computador seja unicamente identificado. 
 
 Protocolo de transporte: Transmission Control 
Protocol (TCP): para o estabelecimento de 
conexões confiáveis. Define como dois 
computadores podem trocar mensagens de 
controle e confirmação. 
 
 6 carolina@upf.br 
PROTOCOLO TCP/IP 
 As máquinas são identificadas pelo seu IP único 
(ipconfig/winipcfg). 
 
 Modelo cliente x servidor. 
 
7  
  
Servidor 
 
Cliente 
Cliente 
Cliente 
carolina@upf.br 
SERVIÇOS INTERNET 
 Conjunto de padrões (protocolos) que define como 
(cliente e servidor) podem se comunicar entre si na 
rede. 
 Usam a infraestrutura de redes existente. 
 
 Correio eletrônico 
 FTP 
 Telnet 
 Web 
8 carolina@upf.br 
FTP – FILE TRANSFER PROTOCOL 
 Protocolo de transferência de arquivos (download e 
upload). 
 Formas: 
 Anônimo: acesso a repositórios públicos 
 Não-anônimo: acesso restrito 
 Tipos de arquivos: 
 ASCII: arquivos de texto. 
 Binário: arquivos de programas, imagens, documentos salvos em 
formatos proprietários. 
 Como fazer? 
 Via navegador 
 Por programa específico (CuteFTP, WS_FTP, etc.) 
 Via linha de comando 
 
9 carolina@upf.br 
FTP – POR LINHA DE COMANDO 
 ftp <nome do servidor de ftp> 
 login : anonymous ou usuário 
 password : <seu endereço eletrônico> ou senha 
 dir - lista arquivos 
 cd pub - vai para diretório pub 
 cd .. - sobe um diretório 
 bin - ativa modo de transferência binária 
 get <nome do arquivo> - traz 1 arquivo 
 mget <nome com coringas> - traz arquivos 
 put <nome do arquivo> - envia 1 arquivo 
 bye - sai do ftp 
 
10 carolina@upf.br 
EXERCÍCIO DE FTP 
 Fazer FTP via navegador e com um cliente FTP. 
 
 Pelo cliente FTP, baixar um aplicativo da rede e 
conectar ao servidor da UPF: 
 
 upf.br 
 usuário: número da matricula 
11 carolina@upf.br 
WEB 
 World Wide Web (rede de recursos e serviços de 
informação). 
 
 Responsável pela popularização da Internet. 
 
 Trata-se de uma forma dos usuários navegarem 
pelas informações e arquivos disponíveis nos vários 
computadores ligados a Internet. 
12 carolina@upf.br 
WEB 
 Ela utiliza três mecanismos para viabilizar a 
disponibilização dos recursos: 
 
 Um esquema uniforme de atribuição de nomes, para 
localizar os recursos na Web (ex: URIs). 
 
 Protocolos, para o acesso aos recursos nomeados 
através da Web (ex: HTTP). 
 
 Hipertexto, para uma navegação mais fácil através dos 
referidos recursos (ex: HTML). 
 
13 carolina@upf.br 
URI 
 Todos os recursos disponíveis na Web – 
documentos HTML, imagens, videoclips, programas, 
etc. – possuem um endereço, o qual poderá ser 
codificado por um Identificador de Recursos 
Universal - "URI" (Universal Resource Identifier). 
 
 Os URIs são constituídos por três partes: 
 O esquema de nomeação do mecanismo usado para se 
ter acesso ao recurso; 
 O nome da máquina de hospedagem desse recurso; 
 O nome do próprio recurso, caminho até o recurso (path). 
 
14 carolina@upf.br 
URI - EXEMPLO 
 
 http://www.w3.org/TR 
 
 Este URI poderá ser lido da seguinte maneira: Existe um 
documento disponibilizado através do protocolo HTTP, 
hospedado na máquina www.w3.org, e ao qual se poderá ter 
acesso através do caminho "/TR". 
 
 Outros esquemas presentes em documentos HTML incluem 
“mailto” (destinados ao envio de emails) e “ftp” (destinados ao 
FTP). 
 
 Os URLs são um subconjunto dos esquemas de nomeação 
mais utilizados, os URI. 
 
 
15 carolina@upf.br 
URI – IDENTIFICADORES DE FRAGMENTOS 
 Alguns URIs referem-se a uma localização 
específica no interior de um recurso. Este tipo de 
URI termina em "#", seguido por uma âncora 
identificadora (designada por identificador). 
 
 Exemplo: de uma âncora chamada de secção_2: 
 http://somesite.com/html/top.html#section_2 
16 carolina@upf.br 
URI RELATIVO 
 Um URI relativo não contém qualquer tipo de 
informação referente à nomeação de um esquema 
(ex. http). O seu “path” refere-se geralmente a um 
recurso hospedado na mesma máquina que o 
documento em questão. 
 
 Os URIs relativos podem conter componentes de 
caminho relativo (por ex: ".." - significa um nível 
acima, tendo como ponto de partida a hierarquia 
definida pelo "path”. 
17 carolina@upf.br 
URI RELATIVO 
 URI completo: 
 http://www.acme.com/support/suppliers.html 
 
 URI Relativo: 
 suppliers.html 
 <A href="suppliers.html">Fornecedores</A> 
 
 Outro exemplo: 
 <IMG src="../icons/logo.gif" alt="logo"> 
se expandiria ao URI completo 
"http://www.acme.com/icons/logo.gif" 
 
18 carolina@upf.br 
URI –USOS NO HTML 
 Fazer uma ligação a um outro documento ou 
recurso (elementos A e LINK). 
 Fazer uma ligação a uma folha de estilo ou script 
(elementos LINK e SCRIPT). 
 Incluir uma imagem, objecto ou applet numa página 
(elementos IMG, OBJECT, APPLET e INPUT). 
 Criar um mapa de imagens (elementos MAP e 
AREA). 
 Submeter um formulário (FORM). 
 Fazer referências a convenções de metadados 
descrevendo um documento (elemento HEAD). 
 
19 carolina@upf.br 
 O QUE É O HTML? 
 Hyper Text Markup Language 
 (em Português: Linguagem de Marcação de 
HiperTextos) 
 
 Linguagem de marcação 
 Utiliza marcas para delimitar informação 
 Ex.: 
<P>Isto é um parágrafo</P> 
 
 
20 
Marcas 
Informação 
carolina@upf.br 
 O QUE É O HTML? 
 É uma linguagem de compreensão universal, que 
pode ser usada e compreendida por todos os 
computadores. 
 
 O HTML é a linguagem de publicação usada pela 
Web. 
21 carolina@upf.br 
 O QUE É O HTML? 
 HTML NÃO é uma linguagem de programação 
 É uma linguagem descritiva. 
 
 Objetivo: 
 
 Dar formato ao texto e às imagens que pretendemos visualizar 
no navegador. 
 
 De uma maneira pré-fixada. 
22 carolina@upf.br 
O HTML POSSIBILITA: 
 Publicar documentos online contendo cabeçalhos, texto, 
quadros e tabelas, listas, fotos, etc. 
 
 Recuperar ou retirar informações online, por intermédio 
de ligações de hipertexto, clicando num botão. 
 
 Criar formulários para transações com serviços remotos, 
para o uso na busca de informação, encomenda de 
produtos,etc. 
 
 Incluir vídeoclips, clips sonoros e de outras aplicações. 
23 carolina@upf.br 
O HTML NÃO PERMITE: 
 Realizar cálculos matemáticos. 
 
 Criar uma página a partir de uma base de dados. 
24 
HTML é bastante limitada na hora de 
conceber grandes sites ou portais. 
carolina@upf.br 
HTML E OUTRA LINGUAGEM 
 Quando codificar com HTML e quando codificar 
com uma linguagem mais complexa: 
 
 HTML: Páginas pequenas com conteúdos leves, sem 
custo de manutenção 
 Páginas pessoais 
 Outra linguagem: Páginas extensas cujo conteúdo 
muda rapidamente 
 O interesse é automatizar o maior número de tarefas possíveis 
 Paginas de empresas e grandes corporações 
 
25 carolina@upf.br 
INTRODUÇÃO À PROGRAMAÇÃO WEB 
 
26 
Cliente Web 
http://www.upf.br 
Servidor 
Web 
 
<HTML> 
 <HEAD> 
 <TITLE>Página da UPF</TITLE> 
 </HEAD> 
 <BODY> 
 </BODY> 
</HTML> 
O browser 
interpreta o 
código HTML, 
convertendo-o 
para o conteúdo 
que enxergamos 
nas páginas 
Solicita os dados 
 ao servidor 
carolina@upf.br 
INTRODUÇÃO À PROGRAMAÇÃO WEB 
 Se a página que pedimos não é um arquivo 
HTML 
 
 O browser não interpreta 
 
27 carolina@upf.br 
LINGUAGENS NO LADO CLIENTE OU 
SERVIDOR 
 Linguagens de lado de servidor 
 Linguagens que são reconhecidas, executadas e 
interpretadas pelo próprio servidor 
 
 Linguagens de lado cliente 
 Linguagens diretamente interpretadas pelo navegador 
e não necessitam de um pré-tratamento. 
 Entre as quais não só encontra o HTML, mas Java e o 
JavaScript que são incluídos no código HTML 
 
28 carolina@upf.br 
LINGUAGEM QUE RODAM NO SERVIDOR 
 O ASP (Active Server Pages) 
 Linguagem derivada do Visual Basic desenvolvido por Microsoft. 
(plataforma Windows). 
 O PHP(Hipertext Preprocessor) 
 Linguagem análoga ao ASP utilizada em plataformas Unix e 
Linux. 
 As duas linguagens são usadas exploração de bases de 
dados 
 Aprendizagem é acessível para uma pessoa principiante 
em programação. 
29 carolina@upf.br 
LINGUAGEM DO LADO SERVIDOR 
 PERL 
 Linguagem mais rápida e potente 
 Requer uma aprendizagem mais detalhadas 
 Pessoas já familiarizadas com programação 
30 carolina@upf.br 
LINGUAGEM DO LADO CLIENTE 
 Linguagem de marcação: 
 HTML 
 
 Linguagem de programação 
 
 Java Applets e Plug-Ins 
 JavaScript, JScript e VBScript 
 
31 carolina@upf.br 
O QUE VAMOS APRENDER NA 
DISCIPLINA... 
 
32 32 
HTML 
JAVASCRIPT 
PHP 
 
carolina@upf.br 
O HTML – BREVE HISTÓRICO 
 Originalmente concebida por Tim Berners-Lee, durante o 
seu trabalho no CERN. 
 
 Foi expandindo no decorrer dos anos 90 com o 
crescimento da Web. 
 
 Devido ao seu rápido crescimento na Web, foi 
necessário criar um padrão para que todos os autores e 
navegadores pudessem reconhecer qualquer versão do 
HTML: 
 
 HTML 2.0, HTML 3.2, HTML 4.0 e o HTML 4.01. 
 
33 carolina@upf.br 
O HTML – BREVE HISTÓRICO 
 Desde 1999, o desenvolvimento do HTML ficou na 
versão 4. Os esforços do W3C (consórcio do WWW) 
foram concentrados no XHTML 1.0. 
 
 Hoje, a aposta é o HTML 5. 
 
 O HTML tem as suas raízes na SGML, que foi sempre a 
linguagem destinada à especificação de etiquetagem ou 
codificação estrutural. 
 
 
34 carolina@upf.br 
HTML 5 
 HTML 5 
 Acrescentou à linguagem: 
 Semântica; 
 Acessibilidade; 
 Elementos de estrutura; 
 Elementos de conteúdo; 
 Reprodução de áudio e vídeo sem plug-ins. 
 
 Foram retirados: 
 Molduras; 
 Função puramente visual devem ser substituídos por 
declarações CSS. 
 
carolina@upf.br 35 
HMTL5 
 Criado em cooperação entre o World Wide Web 
Consortium (W3C) and the Web Hypertext 
Application Technology Working Group (WHATWG). 
 
 WHATWG estava trabalhando com formulários web 
e aplicações e o W3C vinha trabalhando com 
XHTML 2.0. Em 2006, eles decidiram cooperar e 
criar uma nova versão para o HTML. 
 
carolina@upf.br 36 
WHAT-WG 
 Grupo criado pelos representantes das empresas 
Apple, Mozilla e Opera. 
 
 Tornou real o HTML5. 
carolina@upf.br 37 
W3C 
 O Consórcio World Wide Web (W3C) é um consórcio internacional 
no qual organizações filiadas, uma equipe em tempo integral e o 
público trabalham juntos para desenvolver padrões para a Web. 
 
 Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey 
Jaffe, o W3C tem como missão Conduzir a World Wide Web para 
que atinja todo seu potencial, desenvolvendo protocolos e 
diretrizes que garantam seu crescimento de longo prazo. 
 
 Os Web Standards têm como objetivo principal fazer com que o 
conteúdo desenvolvido dentro destes padrões possa ser visualizado 
independente do equipamento (computador, PDA, celular), do tipo 
do navegador (IE, Mozilla, Opera, Netscape, etc) e da forma (banda 
de conexão) com que o usuário estiver acessando a Internet. 
38 carolina@upf.br 
W3C - http://www.w3c.br/ 
 
39 carolina@upf.br 
VALIDAÇÃO DE PÁGINAS PELO W3C 
 O W3C possui uma ferramenta de validação de página, 
que verifica se os padrões estão sendo utilizados 
corretamente. 
 
 O Validator do W3C está localizado no endereço: 
http://validator.w3.org/unicorn/ 
 
 Acesse o endereço acima e valide alguns sites da 
Universidade, Curso, diversos, e analise os resultados 
obtidos. 
 
 Utilize, também, os validadores de acessibilidade: 
 Da Silva: http://www.acessobrasil.org.br/ 
 HERA: http://www.sidar.org/hera/ 
 
40 carolina@upf.br 
http://validator.w3.org/unicorn/
http://www.acessobrasil.org.br/
http://www.sidar.org/hera/
HTML – ONDE EDITAR? 
 Qualquer editor de texto 
 Programas de processamento de texto 
 Editores específicos HTML 
 Bloco de notas 
 
 
 Editor HTML online: 
http://www.w3schools.com/html/tryit.asp?filename=tryht
ml_intro 
 Tutorial: 
 http://www.w3schools.com/html/default.asp 
 
41 carolina@upf.br 
INTRODUÇÃO AO HTML 
 Elementos: 
 O HTML inclui tipos de elementos que representam parágrafos, 
ligações de hipertexto, listas, tabelas, imagens, etc. 
 Cada declaração dos tipos dos elementos descreve, a um nível 
geral, três partes: 
 
 uma “tag” de abertura, conteúdo e uma “tag” de encerramento. 
 O nome do elemento aparece contido na ”tag” de abertura 
(denominada de <element-name>) e na ”tag” de encerramento 
(denominada de </element-name>) 
 
 Exemplo: 
 <UL> 
<LI>...item 1 contido na lista... 
<LI><em>...item 2 contido na lista...</em> 
</UL> 
42 carolina@upf.br 
INTRODUÇÃO AO HTML 
 Elementos: 
 Alguns tipos de elementos HTML permitem aos autores 
omitir as "tags" (ex: os tipos de elemento LI). 
 
 Alguns tipos de elementos HTML não possuem qualquer 
conteúdo (ex: <BR>). Os elementos vazios nunca 
possuem tag de encerramento. 
 
 Os nomes dos elementos são sempre um caso não-
sensível. 
 
 Os elementos não são "tags" 
43 carolina@upf.br 
INTRODUÇÃO AO HTML 
 Atributos: 
 Os elementos poderão ter propriedades a eles associadas, 
também chamadas de atributos, as quais poderão ter valores. 
 Os pares atributo/valor aparecem antes do ">" final, na tag 
inicial de um elemento. 
 Exemplo: 
 
 <H1 id="seção1"> 
 Este é um cabeçalho 
</H1> 
 
 Todos os valores dos atributos devem ser delimitados 
por "aspas" ou 'apóstrofos’. Os apóstrofos poderão ser 
incluídos dentro do valor de um atributo, quando o valor 
for delimitado por aspas ou vice-versa. 
 
44 carolina@upf.br 
INTRODUÇÃO AO HTML 
 Comentários: 
 Os comentários HTML possuem o seguinte sintaxe: 
 
 <!-- isto é um comentário --> 
 
 <!-- e este também, 
 mas ocupa mais do que uma linha --> 
 
45 carolina@upf.br 
INFORMAÇÃO REFERENTE À VERSÃO 
HTML 
 Um documento HTML válido declara sempre qual a 
versão HTML usada no documento. 
 
 A declaração do tipo de documento indica a definição do 
tipo de documento (DTD) em uso no referido documento. 
 
46 carolina@upf.brINFORMAÇÃO REFERENTE À VERSÃO 
HTML 
 
 No HTML5 se usa apenas uma declaração 
doctype: 
 
 
 <!DOCTYPE html> 
 
47 carolina@upf.br 
HTML – ESTRUTURA DO DOCUMENTO 
 Elementos mínimos necessários no HTML5: 
 
<!DOCTYPE html> 
<html > 
<head> 
<title>Título do Documento</title> 
</head> 
 
<body> 
Conteúdo do Documento 
</body> 
</html> 
48 carolina@upf.br 
O CABEÇALHO DO DOCUMENTO 
 O elemento HEAD contém informação acerca do 
documento, como por exemplo o seu título, 
palavras-chave e outros dados que não são 
considerados como fazendo parte do conteúdo do 
documento. 
 
 
49 
<!DOCTYPE html> 
 
<HTML lang=”pt-br”> 
 <HEAD> 
 <TITLE>Estudo da densidade demográfica de uma população 
 </TITLE> 
 ... outros elementos do cabeçalho... 
 </HEAD> 
 <BODY> ... corpo do documento... 
 </BODY> 
</HTML> 
carolina@upf.br 
ESPECIFICANDO A CODIFICAÇÃO DE 
CARACTERES 
 O parâmetro "charset" identifica o tipo de codificação 
usado no documento, a qual consiste na conversão da 
sequência de bytes numa sequência de caracteres. 
 
 A ideia é que a codificação abranja a maioria dos 
caracteres contidos no documento. 
 
 Como podemos identificar a codificação de caracteres 
que foi usada num documento? O próprio servidor 
deverá fornecer essa informação. 
 
 Tanto servidor quanto a página devem estar com a 
mesma codificação. 
50 carolina@upf.br 
ESPECIFICANDO A CODIFICAÇÃO DE 
CARACTERES 
 Para especificar que a codificação é do tipo "iso-
8859-1", o documento deverá incluir a seguinte 
declaração META dentro do HEAD: 
 
<meta charset="UTF-8"> 
<meta charset="iso-8859-1"> 
 
 Deve ser incluído na primeira linha do HEAD. 
 
 Servidor da UPF utiliza iso-8859-1. 
51 carolina@upf.br 
META E AS MÁQUINAS DE BUSCA 
 Um dos usos mais comuns do elemento META é 
especificar quais as palavras-chave que a máquina 
de busca poderá usar, de forma a melhorar e a 
aumentar a qualidade dos resultados dessa procura. 
 
<meta name="keywords" 
content="HTML,CSS,JavaScript"> 
 
<meta name="author" content=“Ana Carolina De 
Marchi"> 
52 carolina@upf.br 
LINK 
 Quando uma propriedade especificada por um 
elemento META assume um URI como valor, pode-
se utilizar o elemento LINK: 
 
 
 <LINK rel="stylesheet" type="text/css" 
href=“folhadeestilo.css"> 
53 carolina@upf.br 
O CORPO DO DOCUMENTO - BODY 
 O corpo de um documento contém o conteúdo da página que será exibido 
no navegador. 
 
 
 
 
 
 
 
 
 
 
 As folhas de estilo passaram a ser a maneira preferida de especificar a 
apresentação dos documentos, assim os atributos BODY que eram 
responsáveis pela apresentação estão em desuso. 
 
 
54 
 
 
 
<!DOCTYPE HTML> 
<HTML> 
 <HEAD> 
 <meta charset="iso-8859-1"> 
 <TITLE>Exemplo de uma página em HTML5 
 </TITLE> 
 <META name="Author" content=“Ana Carolina"> 
 </HEAD> 
 <BODY> ... corpo do documento... 
 </BODY> 
</HTML> 
 
carolina@upf.br 
EXERCÍCIO INTRODUTÓRIO DE HTML 
 Passo 1: em um editor de texto, copie o código do 
slide anterior, salve com o nome index e extensão 
.html (index.html).O arquivo deve ser salvo dentro 
do diretório public_html em sua conta. 
 
 Para visualizar a página remotamente acesse: 
http://upf.br/~nro_de_sua_matricula 
 
 Passo 2: no código HTML, escreva dentro do 
BODY seu nome, nome de seu curso e disciplina. 
Coloque também um comentário. Salve novamente 
e atualize a página no navegador. 
 
55 carolina@upf.br 
ALGUNS ELEMENTOS PARA 
ESTRUTURAÇÃO DE TEXTO 
 
 
 
56 
 
 
 
ELEMENTO SIGNIFICADO 
<BR> Inseri quebra de linha. Não possui 
tag de encerramento. 
<P> parágrafo </P> Representa um parágrafo. 
<H1> título mais importante </H1> 
<H2> ... </H2> 
<H3> ... </H3> 
<H4> ... </H4> 
<H5> ... </H5> 
<H6> título menos importante </H6> 
Existem seis tipos de títulos, 
referentemente ao seu tamanho. 
carolina@upf.br 
EXERCÍCIO DE ESTRUTURAÇÃO DE 
TEXTO 
 Na página do exercício anterior, insira os elementos 
para estruturação de texto. Não esqueça que todos 
devem ser inseridos dentro do elemento BODY. 
 
 Salve o documento e exiba no navegador. 
 
 Faça combinações diferentes e observe o resultado. 
57 carolina@upf.br 
AS LISTAS 
Tipos de listas permitidas no HTML: 
 não ordenada 
 ordenada 
 definições 
 
 As listas ordenadas e as listas não ordenadas são 
apresentadas de uma forma idêntica, com a exceção do 
elemento inicial. 
 
 Ambos os tipos de lista são constituídos por sequências 
de itens, os quais são definidos pelo elemento LI (cuja 
"tag" de encerramento poderá ser omitida). 
58 
 
 
 
carolina@upf.br 
AS LISTAS 
 
 
 
 
 
59 
Lista não ordenada Lista ordenada 
<UL> 
 <LI> primeiro item 
 <LI> segundo item 
</UL> 
<OL> 
 <LI> primeiro item 
 <LI> segundo item 
</OL> 
• primeiro item 
• segundo item 
1. primeiro item 
2. segundo item 
Lista de definição 
<DL> 
 <DT>Web 
 <DD>World Wide Web 
 
 <DT>FTP 
 <DD>File Transfer Protocol 
</DL> 
Web 
 World Wide Web 
 
FTP 
 File Transfer Protocol 
 
carolina@upf.br 
EXERCÍCIO DE LISTAS 
 Ainda na página do exercício anterior, insira os três 
tipos de listas apresentados. Não esqueça que 
todos devem ser inseridos dentro do elemento 
BODY. 
 
 Salve o documento e exiba no navegador. 
 
 
60 carolina@upf.br 
TABELAS 
 O modelo da tabela HTML permite aos autores 
dispor texto, imagem e formulários em colunas e 
linhas constituídas por células individuais. 
 TH = título; TR = linha; TD = coluna 
61 
Código Resultado 
<TABLE> 
 <TR> 
 <TH>Código 
 <TH>Resultado 
 <TR> 
 <TD>Aqui vai o código 
 <TD>Aqui o resultado 
</TABLE> 
 
 Uma tabela com duas linhas e duas 
colunas. A primeira linha encabeçada 
com a descrição. 
carolina@upf.br 
EXERCÍCIO DE TABELAS 
 Passo 1: na página do exercício anterior, insira a 
tabela do slide sobre tabelas e observe o resultado 
no navegador. 
 
 Passo 2: crie uma nova tabela com 3 linhas e 2 
colunas, sem o elemento TH. O conteúdo fica a sua 
escolha. 
62 carolina@upf.br 
LINKS 
 Link é a construção básica de um hipertexto. 
 Um link é uma ligação estabelecida entre dois 
recursos da web. 
 Foi um dos alicerces para o sucesso da web. 
 A âncora de destino pode ser uma página, uma 
imagem... 
 Exemplo: 
 
63 
<BODY> 
 <P>Você encontrará mais no <A href="chapter2.html">Capítulo 
dois</A>. 
 Veja também <A href="imagem.gif">floresta encantada</A>. 
</BODY> 
Página 
Imagem 
carolina@upf.br 
LINKS 
Exemplos: 
 
 
 
 
O atributo name, designa uma âncora de modo que 
ela possa ser o destino de zero ou mais links. 
 
 
 
 
64 
<A href=“http://www.upf.br"> Site da UPF </A> 
 
<A href=“pagina2.html“> Link para uma página do site </A> 
 
<A id=“ancora-um"> Essa é a localização de uma âncora</A> 
 
<A href=“#ancora-um“>Link para ancora-um na mesma página</A> 
 
carolina@upf.br 
EXERCÍCIO DE LINKS 
 Crie uma nova página no bloco de notas. A página 
deve conter: 
 um link para um site externo de sua escolha; 
 um link para outra parte dentro da própria página; 
 um link para a página criada nos exercícios anteriores. 
 
 A nova página deve ser salva no mesmo diretório 
public_html. 
65 carolina@upf.br 
IMAGEM 
 Para incluir imagens: 
 
<IMG src="foto.png" alt="Foto de família” 
width="304" height="228" > 
 
 
 Alguns exemplos de formatos de imagens 
reconhecidos incluem GIF, JPEG e PNG. 
 
 Pode-se criar links a partir de imagens. 
 
 
carolina@upf.br 66 
VÍDEO 
 Para incluir vídeos (novo elemento HTML5): 
 
<video width="320" height="240" controls> 
 <source src="movie.mp4" type="video/mp4"> 
 <source src="movie.ogg" type="video/ogg"> 
</video> 
 
 
 
 Atributos: http://www.w3schools.com/tags/tag_video.aspcarolina@upf.br 67 
ÁUDIO 
 Para incluir áudios (novo elemento HTML5): 
 
<audio controls> 
 <source src="horse.ogg" type="audio/ogg"> 
 <source src="horse.mp3" type="audio/mpeg"> 
</audio> 
 
 
 Atributos: http://www.w3schools.com/tags/tag_audio.asp 
 
carolina@upf.br 68 
EXERCÍCIO 
 Busque na Web uma imagem, um vídeo e uma áudio 
e exiba na sua página. 
 
 Para tanto, não esqueça de salvar os arquivos 
dentro do diretório public_html. 
69 carolina@upf.br 
REFERÊNCIAS 
 http://www.w3schools.com/html/default.asp 
 
 CSS: Maurício “Maujor” Samy Silva 
http://www.maujor.com/index.php 
 
70 carolina@upf.br 
http://www.w3schools.com/html/default.asp
http://www.maujor.com/index.php
http://www.maujor.com/index.php