criação de páginas web tic 9º ano a internet html básico apresentação n.º1

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

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>



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

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>




cellspacing – espaço ente células.

cellpadding – espaço entre o texto e a linha.

TAGS - TABELAS

<table border cellspacing=0 cellpadding=5>

</table>




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

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:


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…

criação de páginas web tic 9º ano a internet html básico apresentação n.º1

Documents