Internet & HTML Pedro Costa / 2004
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ãotexto 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
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. <TAG>texto afectado</tag>
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: <TAG attribute="option" >affected text</tag>
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: Eu quero este parágrafo centrado
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 <HTML> <HEAD> <TITLE>Título da Página Web</TITLE> </HEAD> <BODY> Onde deve estar a parte principal da página web </BODY> </HTML>
Parágrafos e quebras de linha <P> texto</p> <BR /> Tag parágrafo A maioria dos browsers processa isto com uma linha em branco entre cada parágrafo. 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 Usada para colocar uma linha separadora ao longo da página.
Exemplos de quebra de linhas
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>
Tags de cabeçalho
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> <p align="right">novo parágrafo justificado à direita</p>
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)
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.
Imagens As imagens nas páginas Web são ficheiros completamente independentes dos ficheiros HTML dessas páginas: <IMG SRC="URL-da-imagem" ALT="descrição da imagem"> As imagens são material protegido por direitos de autor, devendo apenas ser usadas com permissão.
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 Listas com um "termo" e uma"definição"
<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) <DD> = Definição (numa DL)
<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>
<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>
<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>
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.
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
Table <TABLE > <TR> <TD>Polícia</TD> <TR> <TD>Bombeiros</TD> <TR> <TD>EPGE</TD> </TABLE> <TD>21 4912112</TD> </TR> <TD>21 4912113</TD> </TR> <TD>21 4912114</TD> </TR> <TABLE> </TABLE> = define uma tabela <TR> </TR> = define uma linha da tabela <TD> </TD> = define uma célula da tabela ("Table Data")
Table Border <TABLE BORDER=2 > <TR> <TD>Polícia</TD> <TR> <TD>Bombeiros</TD> <TR> <TD>EPGE</TD> </TABLE> <TD>21 4912112</TD> </TR> <TD>21 4912113</TD> </TR> <TD>21 4912114</TD> </TR>
Table Header <TABLE BORDER=2 > <TR> <TH>Nome</TH> <TR> <TD>Polícia</TD> <TR> <TD>Bombeiros</TD> <TR> <TD>EPGE</TD> </TABLE> <TH>Telefone</TH> </TR> <TD>21 4912112</TD> </TR> <TD>21 4912113</TD> </TR> <TD>21 4912114</TD> </TR>
Cellspacing
Cellpadding
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>
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>
Exercicio Cria em html as seguintes Tabelas: 1. 3. 2.
4. 6. 5. 7.
Font Tag
<html> <body> <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> </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."
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 dificuldades.
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
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.
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: <frameset cols="25%,75%"> <frame src="moldura_a.html"> <frame src="moldura_b.html"> <frameset>
<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> <! fim dos frames -->
<! se o browser nao reconhecer frames mostrará apens o seguinte --> <noframes> <body bgcolor=fff7f9> </body> </noframes> <h3> Esta pagina esta sem frames </h3>
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: <a href= pagina_1.html target= main >Abrir pagina_1 no main</a>
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