Criação de Páginas Web A Internet HTML Básico TIC 9º Ano Apresentação n.º1 A Internet HTML Básico TIC 9º Ano
Internet
HTML ? TCP/IP Browser HTTP www
Como funciona a Internet? Os intervenientes Cliente & Servidor
O servidor envia a página solicitada. Como funciona a Internet? Client & Server Servidor do Google INTERNET O servidor envia a página solicitada. Pedido da página http://www.google.pt O Browser faz o pedido. Cliente
Recebe código HTML. Cria a página web. Client - Browser Browser Página Web CÓDIGOHTML Internet Explorer Netscape Mozilla Firefox Opera Etc... INTERNET Recebe código HTML. Cria a página web. SERVER
Server - Servidor Executa permanentemente um programa especial Web server Sempre ligado. Contém o site. Aguarda um pedido de acesso a uma página efectuado por um Web browser
Modelo Cliente-Servidor da WWW Solicita página Cliente Web Servidor Web Página solicitada ou Erro Utilizador Documentos Imagens Vídeos Sons,... Protocolo HTTP
URL - Universal Resource Locator Documento HTML Web browser Web server
(Protocolo de transferência de hipertexto) HTTP Hipertext Transfer Protocol Hiper Text Transfer Protocol (Protocolo de transferência de hipertexto) O protocolo HTTP define o modo como são solicitadas e enviadas páginas web na Internet.
URL Universal Resource Locator protocolo endereço documento http://www.empresa.com/index.html
Domínios com Organização comercial edu Instituição de ensino gov mil net org … pt br de ... Organização comercial Instituição de ensino Entidade governamental Instituição militar Hosts não administrativos organização não lucrativa … Portugal Brasil Alemanha ... gerais Indicadores geográficos
HTML
HyperText Markup Language Linguagem HTML HyperText Markup Language
Linguagem HTML Um programa HTML reside num ficheiro de texto simples (extensão: html ou htm) HTML
Linguagem HTML <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <P> </P> Um programa HTML inclui uma série de TAGS (marcas) colocadas no texto que se reflectem na página Web.
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> </BODY> </HTML>
TAGS <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> Bold Itálico Sublinhado Hiperligações: <A HREF = “http://www.google.pt”> GOOGLE </A>
<IMG SRC=“http://www.empresa.com/directório/elefantes.gif”> TAGS Imagens em documentos HTML <IMG SRC=“http://www.empresa.com/directório/elefantes.gif”>
Imagem com origem noutro site HTML Imagem com origem noutro site
TAGS <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 linha Delimitadora à volta da figura, com uma espessura controlada em pixels.
TAGS BORDER=4 BORDER=40
Uma página Web pode ter no máximo 6 níveis de headings TAGS Headings (cabeçalhos) <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Uma página Web pode ter no máximo 6 níveis de headings Nível alto Nível baixo
HTML
TAGS Imagem de fundo <BODY BACKGROUND = “gollum.jpg”>
TAGS Tabelas <table> … </table> <table border cellspacing=0 cellpadding=5> <tr> <td colspan=2 align=center>Filmes</td> </tr> <td> Irmandade do anel</td> <td> Duas Torres</td> <td> Olá</td> <td> O meu nome é Gollum</td> </table> <table> … </table>
TAGS cellspacing – espaço ente células. cellpadding – espaço entre o texto e a linha. <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>
TAGS - TABELAS cellspacing – espaço ente células. cellpadding – espaço entre o texto e a linha. <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>
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 rowspan Esta TAG indica que esta célula irão ser unidas duas células ao longo da coluna.
Pretendemos unir estas 3 células. Exemplo 2 Situação inicial: 3 linhas e 5 colunas Pretendemos unir estas 3 células.
Exemplo 2 (continuação) colspan Esta TAG indica que nesta célula irão ser unidas três células ao longo das colunas.
Exemplo 3
Exemplo 4
Standards A visitar… http://www.w3.org World Wide Web Consortium