Internet & HTML Internet & HTML Pedro Costa / 2004

(1)

Internet & HTML

Internet &

HTML

(2)

Internet & HTML

Como funcionam as páginas Web

As páginas web são apenas constituídas por texto ASCII plano. Os Web

browsers processam o código usado nas páginas web para mostrarem uma página web totalmente formatada. As imagens, cores e outros itens não-texto de uma página web não estão dentro dela mesma – a página web por si só é apenas texto, com formatação e referências a outros elementos (imagens, etc.)Para vermos o código html de uma página web, basta-nos escolher aopção“Page Source” no menu “View” do Browser

(3)

Internet & HTML Introdução ao HTML

HTML significa "Hyper Text Markup Language“

HTML é uma colecção de texto dentro de “tags” que modificam o texto do documento.

Todas as tags estão entre o sinal “<“ e “>”.

Geralmente, as tags funcionam em pares – uma para activar a modificação, outra para a desactivar. As tags de desactivação começam com uma barra na frente.

(4)

Internet & HTML Introdução ao HTML

Algumas tags funcionam por si só. Dado que não têm uma tag de fecho, coloca-se uma “/” no final da tag. A tag Linha Horizontal <HR/> é um exemplo.

A maioria das tags tem parâmetros que modificam o seu funcionamento:

(5)

Internet & HTML

Introdução ao HTML - Exemplos

<i>Eu quero isto em itálico</i> é processado pelo browser para mostrar: Eu quero isto em itálico

<p align="center">Eu quero este parágrafo centrado</p> é processado pelo browser para mostrar:

(6)

Internet & HTML Tags Estruturais

Estas são as tags básicas que têm de fazer parte de cada página web. Dizem ao browser que o documento é uma página web

<TITLE>Título da Página Web</TITLE> </HEAD>

<BODY>

Onde deve estar a parte principal da página web </BODY>

(7)

Internet & HTML

Parágrafos e quebras de linha <P> texto</P>

Tag parágrafo

A maioria dos browsers processa isto com uma linha em branco entre cada parágrafo.

<BR />

Tag quebra de linha

Equivalente ao “Enter”. Usada quando o utilizador quer fazer um “return” mas não quer uma linha em branco a seguir

<HR />

Tag Linha horizontal

(8)

Internet & HTML

(9)

Internet & HTML Tags de cabeçalho

Tags de cabeçalho – Usadas para marcar secções e subsecções de um documento.

<H1>Cabeçalho1 –tamanho gigante e negrito</H1> <H2>Cabeçalho2 –tamanho grande e negrito</H2> <H3>Cabeçalho3 –tamanho normal e negrito</H3> <H4>Cabeçalho4 –tamanho pequeno e negrito</H4>

<H5>Cabeçalho5 –tamanho muito pequeno e negrito</H5> <H6>Cabeçalho6 –fino e negrito</H6>

(10)

Internet & HTML Tags de cabeçalho

(11)

Internet & HTML

Formatação de texto Negrito e Itálico:

<B>texto que se quer a negrito</B> <I>texto que se quer a itálico</I>

Alinhar texto ou gráficos (esquerda, centro e direita):

<p align="left">novo parágrafo justificado à esquerda</p> <p align="center">novo parágrafo centrado</p>

(12)

Internet & HTML Links

Os links são a base do hipertexto, sem eles não haveria uma navegação linear, nem sequer seria possível navegar na web.

Para construir os links usam-se os seguintes tags de ancoramento: <A HREF="URL">texto clicável para efectuar a ligação</A>

A = Âncora HREF = referência de hipertexto

URL = Uniform Resource Locator( um endereço web, tal como http://www.google.com)

(13)

Internet & HTML Links

Coisas a saber sobre ligações/links:

–Maiúsculas e minúsculas contam para o URL; –O URL tem de ser exacto;

–Temos de ter alguma coisa na secção “texto clicável para efectuar a ligação” de modo que a ligação funcione.

(14)

Internet & HTML Imagens

As imagens nas páginas Web são ficheiros completamente independentes dos ficheiros HTML dessas páginas:

As imagens são material protegido por direitos de autor, devendo apenas ser usadas com permissão.

(15)

Internet & HTML Listas

Existem três tipos de listas em HTML: • Não ordenadas

–Listas marcadas (bolinha, círculo, quadrado) • Ordenadas

–Listas numeradas (1,2,3 ou a,b,c ou I,II,III, ou i,ii,iii) • Definição

(16)

Internet & HTML

<OL> </OL> = Lista ordenada –Atributos: "type=1/a/A/i/I" <UL> </UL> = Lista não ordenada

–Atributos: "type=disc/circle/square“ <DL> </DL> = Lista definida

<LI> = Item de lista (numa OL ou UL) <DT> = Termo (numa DL)

(17)

Internet & HTML

<UL>

<LI> Gato persa </LI> <LI> Cão podengo </LI> <LI> Gato bravo </LI> <LI> Lobo ibérico </LI> <LI> Raposa suíça </LI> </UL>

(18)

Internet & HTML

<OL>

<LI> Gato persa </LI> <LI> Cão podengo </LI> <LI> Gato bravo </LI> <LI> Lobo ibérico </LI> <LI> Raposa suíça </LI> </OL>

(19)

Internet & HTML

<DL>

<DT>Persa</DT>

<DD>Persa é um gato peludo!</DD> <DT>Podengo</DT>

<DD>Podengo é um cão português</DD> <DT>Bravo</DT>

<DD>Bravo é o gato do mato</DD> <DT>Ibérico</DT>

<DD>Ibérico é o lobo da península</DD> <DT>Suíça</DT>

<DD>Suíçaé uma raposa europeia</DD> </DL>

(20)

Internet & HTML Tabelas

•As tabelas são um dos elementos mais complexos de HTML que se pode usar.

•Na sua forma básica, as tabelas relembram folhas de cálculo, sendo muitas vezes usadas como tal.

•Mas elas também podem ser usadas para fazer layouts criativos de páginas de Web Sites.

(21)

Internet & HTML

As tabelas proporcionam aos webdesigners a capacidadede controlarem o layout das suas páginas.

Podemos usar tabelas para colocar texto em redor de imagens, para colocar texto em linhas e colunas (como emJornais), etc…

(22)

Internet & HTML Table <TABLE > <TR> <TD>Polícia</TD> <TD>21 4912112</TD> </TR> <TR> <TD>Bombeiros</TD> <TD>21 4912113</TD> </TR> <TR> <TD>EPGE</TD> <TD>21 4912114</TD> </TR> </TABLE>

<TABLE> </TABLE> = define uma tabela <TR> </TR> = define uma linha da tabela

(23)

Internet & HTML Table Border <TABLE

BORDER=2

> <TR> <TD>Polícia</TD> <TD>21 4912112</TD> </TR> <TR> <TD>Bombeiros</TD> <TD>21 4912113</TD> </TR> <TR> <TD>EPGE</TD> <TD>21 4912114</TD> </TR> </TABLE>

(24)

Internet & HTML Table Header <TABLE BORDER=2 > <TR>

<TH>Nome</TH>

<TH>Telefone</TH>

</TR> <TR> <TD>Polícia</TD> <TD>21 4912112</TD> </TR> <TR> <TD>Bombeiros</TD> <TD>21 4912113</TD> </TR> <TR> <TD>EPGE</TD> <TD>21 4912114</TD> </TR> </TABLE>

(25)

Internet & HTML Cellspacing

(26)

Internet & HTML Cellpadding

(27)

Internet & HTML Colspan

<TABLE BORDER=2 CELLPADDING=4>

<TR> <TH COLSPAN=2>Stock</TH> </TR> <TR> <TD>Computadores</TD> <TD>14</TD></TR> <TR> <TD>Monitores</TD> <TD>38</TD> </TR> <TR> <TD>Modems</TD> <TD>112</TD> </TR> <TR> <TH COLSPAN=2>Vendas</TH> </TR> <TR> <TD>Computadores</TD> <TD>10</TD> </TR> <TR> <TD>Monitores</TD> <TD>23</TD> </TR> <TR> <TD>Modems</TD> <TD>45</TD> </TR> </TABLE>

(28)

Internet & HTML Rowspan

<TABLE BORDER=2 CELLPADDING=4> <TR> <TH ROWSPAN=2>Stock</TH> <TD>Computadores</TD><TD>14</TD> </TR> <TR> <TD>Monitores</TD><TD>38</TD> </TR> <TR> <TH ROWSPAN=2>Vendas</TH> <TD>Computadores</TD><TD>10</TD> </TR> <TR> <TD>Monitores</TD><TD>23</TD </TR> </TABLE>

(29)

(30)

Internet & HTML Exercicio

Cria em html as seguintes Tabelas:

1.

3.

(31)

Internet & HTML

4.

5.

6.

(32)

Internet & HTML Font Tag

(33)

Internet & HTML

<p> <font size="2" face="Verdana">Isto é um parágrafo.</font> </p>

<p> <font size="3" face="Times">Isto é outro parágrafo.</font> </p> </body>

(34)

Internet & HTML Frames

As molduras ("frames") são subjanelas definidas sobre a janela principal do browser.

Estas subjanelas são criadas dividindo a janela em várias partes. Cada uma dessas partes pode apresentar uma página da Web diferente.

As subjanelas são habitualmente designadas por molduras, ou "frames."

(35)

Internet & HTML

Vantagens e desvantagens das fRAMES

As molduras ("frames") permitem-nos apresentar mais do que uma página HTML numa única janela do browser.

Cada página está dentro da sua própria moldura (subjanela) e é independente das restantes páginas.

Apesar de oferecerem alguma liberdade ao facilitarem bastante a criação de barras de navegação em conjuntos de documentos com muitas páginas e de tornarem bastante mais rápido o carregamento das páginas, as molduras também podem dar origem a algumas

(36)

Internet & HTML http://www.peak.org/~jeremy/kathy/index.html http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_ cols http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_ rows

(37)

Internet & HTML

O Elemento frameset

O elemento <frameset> define a forma como a janela do browser se subdivide para acomodar as molduras.

Este elemento divide a janela do browser em linhas e colunas.

Os valores atribuídos às linhas e às colunas indicam a quantidade de área de écran que cada linha e cada coluna devem ocupar.

(38)

Internet & HTML

O Elemento <frame>

O elemento <frame> define qual o documento HTML a colocar numa determinada moldura.

No exemplo apresentado a primeira coluna ocupa 25% da largura da janela do browser e a segunda coluna ocupa 75% da largura. O

documento "moldura_a.html" ocupa a primeira coluna e o documento "moldura_b.html" ocupa a segunda coluna:

(39)

(40)

(41)

Internet & HTML

<frameset rows=150,*>

<!– o frameset tem duas linhas, a primeira mede 150-->

<frame src=header.html name=header scrolling=no>

<!– a segunda linha é dividida em 2 colunas -->

<frameset cols=150,*>

<!– a primeira coluna chama-se menu -->

<frame src=contents.html name=menu>

<!– a segunda é chamada main -->

<frame src=main.html name=main> </frameset>

<!– fim da linha 2 -->

</frameset>

(42)

Internet & HTML

<!– se o browser nao reconhecer frames mostrará apens o seguinte -->

<noframes>

<body bgcolor=FFF7F9>

<h3> Esta pagina esta sem frames </h3> </body>

(43)

Internet & HTML

Links para frames

Para que um link abra numa frame específica basta definir a propriedade target da tag do link, com o nome do frame alvo.

No menu:

(44)

Internet & HTML Exercício

Recorrendo a frames, tabelas, imagens texto e links, constrói uma página sobre a tua banda favorita.

Deverá conter as seguintes páginas: -Homepage – Eventos, lançamentos -Historial

-Álbuns -Letras -Fotos