criação de páginas web tic 9º ano a internet html básico apresentação n.º1
Post on 22-Apr-2015
120 Views
Preview:
TRANSCRIPT
Criação de Páginas Web
TIC 9º Ano
• A Internet
• HTML Básico
Apresentação n.º1
Internet
?
Como funciona a Internet?
Os intervenientes
Cliente
&
Servidor
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
CÓDIGOHTML
Página WebBrowser
Internet Explorer
Netscape
Mozilla Firefox
Opera
Etc...
Client - Browser
INTERNETINTERNETRecebe código HTML.
Cria a página web.
SERVER
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.
Cliente Web Servidor WebSolicita página
Página solicitadaou
ErroUtilizadorDocumentosImagensVídeosSons,...
Modelo Cliente-Servidor da WWW
Protocolo HTTP
URL - Universal Resource Locator
URL
Documento HTMLWeb browser Web server
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)
URLUniversal Resource Locator
http://www.empresa.com/index.html
prot
ocol
o
ende
reço
docu
men
to
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
HTML
HyperText Markup Language
Linguagem HTML
Um programa HTML reside num ficheiro de texto simples
(extensão: html ou htm) HTML
Linguagem HTML
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
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>
<HTML> Declara que o texto seguinte define uma página HTML.
A tag </HTML> termina a página.
TAGS
<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
<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
<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
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:
Imagens em documentos HTML
TAGS
<IMG SRC=“http://www.empresa.com/directório/elefantes.gif”>
HTML
Imagem com origem noutro site
<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
BORDER=4 BORDER=40
TAGS
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
HTML
TAGS
<BODY BACKGROUND = “gollum.jpg”>
Imagem de fundo
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>
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.
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.
1 linha 3 colunas
2 linhas 3 colunas
3 linhas e 3 colunas
3 linhas e 1 coluna
5 linhas e 1 coluna
5 linhas e 2 colunas
União entre células
• Rowspan
• Colspan
Exemplo 1
Esta TAG indica que esta célula irão ser unidas duas células ao longo da coluna.
rowspan
Exemplo 2
Situação inicial:
3 linhas e 5 colunas
Pretendemos unir estas 3 células.
Exemplo 2 (continuação)
Esta TAG indica que nesta célula irão ser unidas três células ao
longo das colunas.
colspan
Exemplo 3
Exemplo 4
Standards
http://www.w3.org
World Wide Web Consortium
A visitar…
top related