![Page 1: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/1.jpg)
Criação de Páginas Web
TIC 9º Ano
• A Internet
• HTML Básico
Apresentação n.º1
![Page 2: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/2.jpg)
Internet
![Page 3: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/3.jpg)
?
![Page 4: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/4.jpg)
Como funciona a Internet?
Os intervenientes
Cliente
&
Servidor
![Page 5: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/5.jpg)
INTERNETINTERNET
Pedido da páginahttp://www.google.pt
Servidor do Google
O Browser faz o pedido.
O servidor envia a página solicitada.
Como funciona a Internet?Client & Server
Cliente
![Page 6: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/6.jpg)
CÓDIGOHTML
Página WebBrowser
Internet Explorer
Netscape
Mozilla Firefox
Opera
Etc...
Client - Browser
INTERNETINTERNETRecebe código HTML.
Cria a página web.
SERVER
![Page 7: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/7.jpg)
Executa permanentemente umprograma especial Web server
Aguarda um pedido de acesso a uma página efectuado por um Web browser
Server - Servidor
• Sempre ligado.• Contém o site.
![Page 8: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/8.jpg)
Cliente Web Servidor WebSolicita página
Página solicitadaou
ErroUtilizadorDocumentosImagensVídeosSons,...
Modelo Cliente-Servidor da WWW
Protocolo HTTP
![Page 9: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/9.jpg)
URL - Universal Resource Locator
URL
Documento HTMLWeb browser Web server
![Page 10: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/10.jpg)
O protocolo HTTP define o modo como são solicitadas e enviadas páginas web na Internet.
HTTP Hipertext Transfer Protocol
HiperText Transfer Protocol
(Protocolo de transferência de hipertexto)
![Page 11: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/11.jpg)
URLUniversal Resource Locator
http://www.empresa.com/index.html
prot
ocol
o
ende
reço
docu
men
to
![Page 12: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/12.jpg)
Domínios comedugovmilnetorg…
ptbrde...
Organização comercialInstituição de ensinoEntidade governamentalInstituição militarHosts não administrativosorganização não lucrativa…
PortugalBrasilAlemanha...
Indicadores geográficos
gerais
![Page 13: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/13.jpg)
HTML
![Page 14: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/14.jpg)
HyperText Markup Language
Linguagem HTML
![Page 15: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/15.jpg)
Um programa HTML reside num ficheiro de texto simples
(extensão: html ou htm) HTML
Linguagem HTML
![Page 16: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/16.jpg)
Um programa HTML inclui uma série de TAGS (marcas) colocadas no texto que se reflectem na página Web.
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <P> </P>
Linguagem HTML
![Page 17: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/17.jpg)
Exemplo de código HTML
<HTML>
<HEAD><TITLE> A minha primeira página na internet </TITLE></HEAD>
<BODY><P> Olá, o meu nome é Gollum </P><HR><P><BR></P><HR></BODY>
</HTML>
![Page 18: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/18.jpg)
<HTML> Declara que o texto seguinte define uma página HTML.
A tag </HTML> termina a página.
TAGS
![Page 19: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/19.jpg)
<HEAD> Define a área de cabeçalho (header) da página.
A tag </HEAD> termina a zona de cabeçalho.
<BODY> Delimita o conteúdo que será visualizado na página.
A tag </BODY> termina a zona de conteúdo.
TAGS
![Page 20: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/20.jpg)
<TITLE> Define o título da página que é visualizado na barra de título do browser.
A tag </TITLE> termina o título.
TAGS
![Page 21: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/21.jpg)
<P> Início de um parágrafo. </P> termina o parágrafo.
<BR> Mudança de linha
<HR> Horizontal line/horizontal rule.
<COMMENT> Utilizado para comentar o código.
TAGS
![Page 22: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/22.jpg)
Formatação de Caracteres
<B>
<I>
<U>
</B>
</I>
</U>
Bold
Itálico
Sublinhado
TAGS
<A HREF = “http://www.google.pt”> GOOGLE </A>
Hiperligações:
![Page 23: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/23.jpg)
Imagens em documentos HTML
TAGS
<IMG SRC=“http://www.empresa.com/directório/elefantes.gif”>
![Page 24: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/24.jpg)
HTML
Imagem com origem noutro site
![Page 25: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/25.jpg)
<IMG SRC=“gollum.gif">
<IMG SRC=“gollum.gif" BORDER=4>
<IMG SRC=“gollum.gif" BORDER=8>
<IMG SRC=“gollum.gif" BORDER=16>
O qualificador BORDER coloca uma linhaDelimitadora à volta da figura, com uma espessura controlada em pixels.
TAGS
![Page 26: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/26.jpg)
BORDER=4 BORDER=40
TAGS
![Page 27: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/27.jpg)
Headings (cabeçalhos)
<H1> </H1> <H2> </H2><H3> </H3><H4> </H4><H5> </H5><H6> </H6>
Nível alto
Nível baixo
Uma página Web pode ter no máximo 6 níveis de headings
TAGS
![Page 28: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/28.jpg)
HTML
![Page 29: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/29.jpg)
TAGS
<BODY BACKGROUND = “gollum.jpg”>
Imagem de fundo
![Page 30: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/30.jpg)
TAGS
Tabelas <table border cellspacing=0 cellpadding=5>
<tr><td colspan=2 align=center>Filmes</td></tr>
<tr><td> Irmandade do anel</td><td> Duas Torres</td></tr>
<tr><td> Olá</td><td> O meu nome é Gollum</td></tr>
</table>
<table>
…
</table>
![Page 31: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/31.jpg)
TAGS
<table border cellspacing=0 cellpadding=5>
</table>
<tr><td colspan=2 align=center>Filmes</td></tr>
<tr><td> Irmandade do anel</td><td> Duas Torres</td></tr>
<tr><td> Olá</td><td> O meu nome é Gollum</td></tr>
cellspacing – espaço ente células.
cellpadding – espaço entre o texto e a linha.
![Page 32: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/32.jpg)
TAGS - TABELAS
<table border cellspacing=0 cellpadding=5>
</table>
<tr><td colspan=2 align=center>Filmes</td></tr>
<tr><td> Irmandade do anel</td><td> Duas Torres</td></tr>
<tr><td> Olá</td><td> O meu nome é Gollum</td></tr>
cellspacing – espaço ente células.
cellpadding – espaço entre o texto e a linha.
![Page 33: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/33.jpg)
1 linha 3 colunas
![Page 34: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/34.jpg)
2 linhas 3 colunas
![Page 35: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/35.jpg)
3 linhas e 3 colunas
![Page 36: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/36.jpg)
3 linhas e 1 coluna
![Page 37: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/37.jpg)
5 linhas e 1 coluna
![Page 38: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/38.jpg)
5 linhas e 2 colunas
![Page 39: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/39.jpg)
União entre células
• Rowspan
• Colspan
![Page 40: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/40.jpg)
Exemplo 1
Esta TAG indica que esta célula irão ser unidas duas células ao longo da coluna.
rowspan
![Page 41: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/41.jpg)
Exemplo 2
Situação inicial:
3 linhas e 5 colunas
Pretendemos unir estas 3 células.
![Page 42: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/42.jpg)
Exemplo 2 (continuação)
Esta TAG indica que nesta célula irão ser unidas três células ao
longo das colunas.
colspan
![Page 43: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/43.jpg)
Exemplo 3
![Page 44: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/44.jpg)
Exemplo 4
![Page 45: Criação de Páginas Web TIC 9º Ano A Internet HTML Básico Apresentação n.º1](https://reader036.vdocuments.net/reader036/viewer/2022081507/552fc161497959413d8e96e1/html5/thumbnails/45.jpg)
Standards
http://www.w3.org
World Wide Web Consortium
A visitar…