Aula 05 Programação WEB HTML

•

FTC

Marco Brito

25.10.2016

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 46 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 46 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 46 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Algoritmos e Programação I

929 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Programação WEB
Prof. Carlos Souza 
1
HTML
Agenda
 Conceito
 HTML
 Características
 Publicação
 Elementos Estruturais
 Estrutura da Página
 Cabeçalho
 Corpo
Conceito
 HTML
 Linguagem que define a estrutura de páginas web.
 Permite publicar documentos online e inclusão de material 
multimídia.
 Hoje está na versão 5.
Evolução do HTML
 O HTML tem bastante história e desde 1992 passou por várias 
versões e a linguagem evoluiu muito de lá pra cá. 
 Em 1992, a W3C, de Tim Berners-Lee, lança o HTML com 
apenas algumas marcações de texto e link.
 Em 1993 apareceram marcações de tabelas, formulários e 
alguns estilos para definir a aparência.
 Em 1994 é lançado o HTML v2.0 com algumas de suas 
características padronizadas.
 Em 1996 foi lançado o CSS1 para formatar todos os estilos 
visuais da página separado do documento HTML.
Evolução do HTML
 Em 1999 é lançado o HTML v4.01.
 Em 2000 o HTML evolui para (X)HTML, unindo documentos XML 
com HTML.
 Em 2008 começa a documentação do HTML 5, ao qual está 
evoluindo e é a versão atual.
 O HTML5 foi criado exatamente para dar significado 
semântico às páginas web, além de padronizar e facilitar o 
entendimento das sessões de um site pelos navegadores.
Características da HTML
 É uma linguagem simples que mistura conteúdo textual e 
marcações (tags).
 É usada para exibir conteúdo formatado num cliente web (na
vegador) e também para interagir com sistemas baseados na
web, hospedados em um servidor.
 As tags de marcação são usadas para descrever:
 Aparência;
 posicionamento (layout);
 Conteúdo;
 e elementos na página (ex.: formulários, imagens, etc).
Características da HTML
 As tags são formadas assim: <nome_da_tag [parâmetros] ... >;
 Cada página web (ou HTML) é representada por um arquivo
com a extensão .html ou .htm;
 A especificação da HTML é definida e mantida pelo consórcio
W3C, e atualmente está na versão 5.0;
 O nome do arquivo devem ser em minúsculas, sem acentos e 
sem espaços.
HTML – Publicação
 Publicação
 Uma página HTML pode ser aberta em qualquer navegador existente,
diretamentedo disco rígido, porém a sua publicação na 
web depende da disponibilização da página por meio da um progra
ma de servidor de páginas web, conhecido como webserver, que deve
estar disponível e visível na WWW (internet), com IP público.
HTML – Publicação
 Publicação
 Os servidores web geralmente trabalham na porta 80 do protocolo TCP/
IP, e ficam escutando as requisições HTTP e atendem enviando a página s
olicitada ao cliente que fez a requisição.
 O navegador é o responsável por exibir as páginas.
HTML – Elementos Estruturais
 Estrutura
 html, head, body, div, span
 Meta-Informação
 DOCTYPE, title, link, meta, style
 Formatação
 h1, h2, h3, h4, h5, h6, p, strong, em, abbr, acronym
 address, bdo, blockquote, cite, q, code, ins, del, dfn, 
kbd, pre, samp, var, br, center, b, i, tt, sub, sup, big, small, hr
 Links
 a, base
HTML – Elementos Estruturais
 Imagens and Objetos
 img, area, map, object, param
 Listas
 ul, ol, li, dl, dt, dd
 Tabelas
 table, tr, td, th, tbody, thead, tfoot, col, colgroup, caption
 Formulários
 form, input, textarea, select, option, optgroup, button, label, fieldset, legend
 Script
 script, noscript
HTML - Estrutura da Página
<html>
<head>
</head>
<body>
Textos
Imagens
Links
</body>
</html>
 Tags
 HTML
 Esta tag define de inicio e fim de uma página HTML
 Dentro da página temos duas secções
 Cabeçalho: <head>…</head>
 Corpo ou Conteúdo: <body>…</body>
 Title 
 Aparece na barra de título do navegador: <title>…</ title >
<html>…</html>
HTML - Estrutura da Página
HTML - Cabeçalho
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Tecnologia dos Media</TITLE>
<META NAME="Author" CONTENT=“Pedro Costa">
<META NAME="Description" CONTENT=“Página da disciplina">
<META NAME="KeyWords" CONTENT=“informatica,computadores">
</HEAD> 
 Metas Informações
 META
 Dão informações variadas sobre a página:
 Tipo de conteúdos e de linguagem
 Autor
 Descrição da página
 Keywords
HTML - Cabeçalho
 DOCTYPE
 Define a versão do HTML utilizado
 Strict: Contém todos os elementos e attributos HTML, incluindo os
de apresentação e os já obsoleto (como Font e Center). 
Framesets não são permitidos.
 Transitional: Esse DTD contem todos os elementos HTML e 
atributos, incluindo elementos de apresentação e obsoleto (como 
Font e Center). Framesets não são permitidos
 Frameset: O mesmo que o DTD, porém poderá conter Framesets.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML - Cabeçalho
 Controle de Cache
 Cache-control
 Esta tag é apenas reconhecida pelo http 1.1 e permite os seguintes 
valores:
 Public: Os dados da página podem ser armazenados de forma 
Compartilhada.
 Private: É o contrário de public, o cache é armazenado para um 
específico usuário. 
 No-Cache: A página não é armazenada em Cache. 
 No-Store: É feito um cache temporário, a página não é arquivada. 
<meta http-equiv="cache-control" content="no-cache" />
ou
<meta http-equiv=“pragma" content="no-cache" />
HTML - Cabeçalho
 Controle de Cache
 Refresh: Especifica um tempo em segundos para o browser 
atualizar a página, opcionalmente pode-se adicionar uma 
URL para a qual será redirecionado. 
<meta http-equiv="refresh" content="15;url=http://www.thechessman.org" />
HTML - Cabeçalho
 Controle de Indexação
 Robots
 Especifica informações de indexação para os robôs de busca:
 All: Valor default, significa vazio, o robô de busca não recebe 
nenhuma informação. 
 Index: Os robôs de busca podem incluir a página normalmente. 
 Follow: Robôs podem indexar a página e ainda seguir os links para 
outras páginas que ela contém. 
 NoIndex:Os links podem ser seguidos, mas a página não é 
indexada. 
 NoFollow: A página é indexada, mas os links não são seguidos. 
 None: Os robôs podem ignorar a página. 
 NoArchive (Apenas Google): A página não é arquivada. 
HTML - Cabeçalho
 Conteúdo
 Content-language
 Declara a(s) linguagem(ns) natural(is) do documento. Pode ser usada 
pelos motores de busca para categorizar por idioma.
 Content-type
 Define o tipo de conteúdo da página e o tipo de codificação de 
caracteres. Pode-se dizer que é a meta tag mais importante, sempre 
deve ser usada. 
<meta http-equiv="content-language" content="pt-br, en-US, fr" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
HTML - Cabeçalho
 Conteúdo
 Content-Script-Type
 Define o tipo padrão da linguagem de script do documento. 
 Content-Style-Type
 Define o tipo padrão de linguagem para estilização do documento. 
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
HTML - Cabeçalho
 Conteúdo
 Description
 Contém uma descrição da página 
 Content-type
 Define o tipo de conteúdo da página e o tipo de codificação de 
caracteres. Pode-se dizer que é a meta tag mais importante, sempre 
deve ser usada. 
<meta name="description" content="...resumo da página..." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
HTML - Cabeçalho
 Palavras-Chave Keywords
 As keywords tipicamente são usadas por alguns motores de busca para 
indexar os documentos juntamente com informações encontradas em seu 
título e body. 
 As frases ou palavras devem ser separadas por vírgulas. 
<meta name="keywords" content="Noticias, Jornal, Economia " />
23
HTML - Corpo
O elementos têm uma estrutura de encaixe hierárquico, mas não 
podem ser intercalados.
<p>Paragrafo com texto <b>tipo bold</b> texto normal novamente</p> 
Correto
Incorreto
<p>Texto que não <b> aparece</p> correctamente</b>
HTML - Corpo
Paragrafo
Parágrafos: delimitam blocos de informação - <p>…</p> , deixando uma 
linha em branco entre cada parágrafo.
Exemplo:
<p> Em TM temos três áreas: Informática, Fotografia e Vídeo. 
A disciplina tem 11 horas semanais.<br> Dividida em 6 para 
Informática e 2,5 para as restantes.</p>
Resultado
Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 
horas semanais.
Dividida em 6 para Informática e 2,5 para as restantes.
HTML - Corpo
Quebra de linha
Exemplo:
<p> Para inserir<br>um break<br>num<br>paragrafo,<br>usa-se a 
marca br. 
Resultado
Para inserir
um break
num
paragrafo
usa-se uma marca br.
Quebra de linha: <br> - Elemento que não precisa de marca do fim
HTML - Corpo
Cabeçalhos
Existem 6 níveis de cabeçalhos, desde o mais importante <h1> até 
ao menos <h6>. 
Exemplo:
<h1>Mais importante</h1>
<h2>2º mais importante</h2>
<h6>Último </h6>
Resultado
Mais Importante
2º mais importante
Último
<h1 align="center">Este é o 
cabeçalho 1</h1> <p>Este cabeçalho 
está centralizado em relação ao 
tamanho da página.</p> 
Este é o cabeçalho 1
Este cabeçalho está centralizado em relação ao 
tamanho de página
Formatação do texto
Negrito ou bold - <b>…</b>
Italico - <i>…</i>
Sublinhado - <u>…</u> 
Exemplo:
<p> Em TM temos três áreas: <b>Informática, Fotografia e Vídeo</b>. 
A disciplina tem <i>11 horas semanais</i>.<br> Dividida em 6 para 
<u>Informática</u> e 2,5 para as restantes.</p>
Resultado
Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 
horas semanais.
Dividida em 6 para Informática e 2,5 para as restantes.
HTML - Corpo
Formatação do texto
Exemplo:
<b>Este texto está em bold</b> <br> <i> Este texto está em italico 
</i> <br> <small> Este texto mais pequeno </small> 
Resultado
Este texto está em bold
Este texto está em italico 
Este texto mais pequeno
HTML - Corpo
Tamanho e fonte:
<FONT SIZE="4”>Alterado o tamnho da fonte</FONT>
<FONT FACE="Arial">Alterada a fonte</FONT> 
<FONT SIZE=“10" FACE=“Verdana”>Alterados tamanho e fonte</FONT> 
Formatação do texto
HTML - Corpo
Elementos do Corpo
Cor:
<FONT COLOR="COR">TEXTO COLORIDO</FONT>
Código Cor
#800000 Vermelho Escuro 
#008000 Verde Escuro 
#808000 Amarelo Escuro 
#000080 Azul Escuro 
#c0c0c0 Verde Claro 
#c0dcc0 Verde Garrafa 
#a6caf0 Azul Claro 
#808080 Cinza Escuro 
#ff0000 Vermelho 
#0000ff Azul 
#ffff00 Amarelo 
#ffffff Branco 
#000000 Preto 
Formatação do texto
Elementos do Corpo
Listas Numeradas
Lista - <ol>…</ol>
Elemento de uma lista <li>…</li>
Exemplo:
<ol><li>Informatica</li>
<li>Fotografia</li>
<li>Video</li>
</ol>
Resultado
1. Informatica
2. Fotografia
3. Video
HTML - Corpo
Exemplo
<font size=1> 
<h4>Lista numeradas:</h4> 
<ol> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> 
</ol>
<h4>Lista com letras maiúsculas:</h4> 
<ol type="A“> <li>Maças</li> <li>Bananas</li> <li>Limões</li> 
<li>Laranjas</li> </ol> 
<h4>Lista com letras minusculas:</h4> 
<ol type="a"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> 
<li>Laranjas</li> </ol>
<h4>RLista com numeros romanos:</h4> 
<ol type="I"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> 
<li>Laranjas</li> </ol> 
<h4>Lista com numeros romanos minusculos:</h4> 
<ol type="i"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> 
<li>Laranjas</li> </ol> 
</font> 
HTML - Corpo
Listas não numeradas e sub listas
Lista - <ul>…</ul>
Elemento de uma lista <li>…</li>
Exemplo:
<ul><li>Informática</li>
<ul><li>Teórica</li>
<li>Prática</li></ul>
<li>Fotografia</li>
<li>Video</li>
</ul>
Resultado
• Informática
• Teórica
• Prática
• Fotografia
• Vídeo
HTML - Corpo
Exemplo
<h4>Lista com discos:</h4>
<ul type="disc"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> 
<li>Laranjas</li> </ul>
<h4>Lista com circulos:</h4> 
<ul type="circle"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> 
<li>Laranjas</li> </ul> 
<h4>Lista com quadrados;</h4>
<ul type="square"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> 
<li>Laranjas</li> </ul> 
HTML - Corpo
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para 
especificar a localização de arquivos em servidores. Uma URL inclui o tipo de 
recurso acessado (p.e, gopher, WAIS), o endereço do servidor, e a 
localização do arquivo.
Se escreve de acordo com o esquema abaixo:
protocolo://servidor[:port]/path/filename 
Onde protocolo é uma das seguintes definições
Hiperligações
file um arquivo no seu sistema local, ou servidor de ftp
http um arquivo em um servidor World Wide Web
gopher um arquivo em um servidor Gopher
WAIS um arquivo em um servidor WAIS
news um Usenet newsgroup
telnet uma conexão Telnet
HTML - Corpo
Hiperligações internas
É possível interligar documentos em outro diretório especificando-se o 
caminho relativo a partir do documento corrente, em relação ao que está 
sendo interligado.
A marcação <A>, que define o ponto de partida para os links, é denominada 
de âncora.
<a href=”pasta/documento”>…</a>
Exemplo:
<a href=“Estado/Bahia.html”>Bahia</a>
Nesse exemplo, a página relacionada está na na subpasta Estado.
<A HREF=“/imagens/incon1.gif”>
Este indica que o arquivo incon1.gif deverá ser buscado no diretório imagens 
que está imediatamente acima do diretório raiz do seu servidor WWW
HTML - Corpo
Exemplo:
Ligação de um arquivo que está em c:\Web\arquivo1.htm para um que está 
em c:\Web\arquivo2.htm
<a href=“arquivo2.htm>…</a>
Ligação de um arquivo que está em w:\tm\arquivo1.htm para um que está em 
c:\Web\teorica\arquivo2.htm
<a href=“teorica/arquivo2.htm>…</a>
Ligação de um arquivo que está em w:\tm\arquivo1.htm para um que está em 
c:\hj\arquivo2.htm
<a href=“../hj/arquivo2.htm>…</a>
Hiperligações internas
HTML - Corpo
Hiperligações internas
É possível interligar seções em um mesmo documento, apontar uma palavra 
ou trecho de um texto.
O "ponto de partida“ é definido atribuindo a uma âncora um nome qualquer, 
precedido do caracter #:
Exemplo:
Veja o início da <a href="#item1">segunda sessão</a>.
O "ponto de chegada“ é definido atribuindo-se a uma âncora o nome 
correspondente ao do ponto de partida:
Esta <a name="item1">segunda sessão</a> trata de..
HTML - Corpo
Exemplo:
<p>O site de busca é o <a href=“http://www.google.com.br”>Google</a></p>
Resultado
O site de busca é o Google
Hiperligações externas
Para interligar documentos em sites distintos, especifica-se a URL do 
documento que está sendo interligado.
40
HTML - Corpo
Imagens
Imagem - <img src=“caminho e nome da imagem com a extensão”> 
Exemplo:
<img src=“R01.jpg”>
Resultado
Ter em atenção que o caminho e o nome 
do arquivo da imagem tem de ser escrito 
partindo do ponto de partida do documento
Ou seja se a imagem estiver na directoria 
do documento HTML só se escreve o nome 
do arquivo.
Se estiver noutra directoria temos de seguir 
os mesmo cuidados que nas hiperligaçõesUsar minúsculas, não usar acentos e 
espaços nos nomes das imagens
41
HTML - Corpo
Imagens
Exemplo:
<p> Uma imagem com o tamanho real: <img 
src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" > 
</p> 
<p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura
<img 
src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" 
width="48px" height="48px"> </p> 
<p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura 
<img 
src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" 
width="148px" height="48px"> </p> 
42
HTML - Corpo
Tabelas
Muitas vezes é usada para estruturar a informação
Tabela <table>…</table>
Linha <tr>…</tr>
Celula <td>…</td> 
Exemplo:
<table border=“2px”>
<tr>
<td>Célula da 1ª linha e 1ª Coluna</td>
<td>Célula da 1ª linha e 2ª Coluna</td>
</tr>
<tr>
<td>Célula da 2ª linha e 1ª Coluna</td>
<td>Célula da 2ª linha e 2ª Coluna</td>
</tr>
</table>
Resultado
Célula da 1ª linha e 
1ª Coluna
Célula da 1ª linha e 
2ª Coluna
Célula da 2ª linha e 
1ª Coluna
Célula da 2ª linha e 
2ª Coluna
43
HTML - Corpo
Tabelas
Exemplo:
<h4> Esta tabela tem legenda 
e borda de 6 pixels: </h4> 
<table border="6px"> 
<caption>Legenda</caption> 
<tr> <td>100</td> 
<td>200</td> 
<td>300</td> </tr>
<tr> <td>400</td>
<td>500</td> 
<td>600</td> 
</tr> </table> 
Resultado
Esta tabela tem legenda e borda de 6 pixels:
Legenda 
100 200 300
400 500 600
44
HTML - Corpo
Tabelas
Exemplo:
<h4>Esta tabela celulas coloridas</h4> 
<table border="1">
<tr> <td bgcolor="red">primeira</td> 
<td>linha</td> </tr>
<tr> <td background="3dm-overall.gif"> 
segunda</td> 
<td bgcolor="yellow">linha</td> </tr> 
</table> 
Resultado
Esta tabela tem células coloridas
primeira linha
segunda linha
HTML - Corpo
 Elemento FORM
Os formulários são delimitados pelas tags <FORM>… </FORM>;
Essas tags permitem agrupar vários elementos de formulário 
(botões, campos de texto, campos de seleção, etc…);
A tag form possui os seguintes atributos: 
METHOD (Obrigatório) - Indica sob qual forma será enviada as 
respostas “POST” é o valor que corresponde um envio de dados 
armazenados no corpo do pedido
“GET” corresponde um envio dos dados codificados no URL, e 
separados do endereço do certificado por um ponto de interrogação
AÇÃO (Obrigatório) - Indica o endereço de envio (certificado CGI ou 
endereço correio electrônico (mailto:adresse.email@machine))
HTML - Corpo
 Elemento FORM
Assim a sintaxe da tag FORM é: 
<form action="demo_page.asp” method="post" enctype="multipart/form-data">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
Valor Descrição
application / x-www-form-
urlencoded
Padrão. Todos os caracteres são codificados antes 
de serem enviadas (espaços são convertidos em 
"+" símbolos e caracteres especiais são 
convertidos em valores HEX ASCII)
multipart / form-data Não os caracteres são codificados. Esse valor é 
necessário quando você estiver usando formulários 
que possuem um arquivo de controle de upload
text / plain Os espaços são convertidos para símbolos "+", 
mas sem caracteres especiais são codificados