Docsity
Docsity

Prepare-se para as provas
Prepare-se para as provas

Estude fácil! Tem muito documento disponível na Docsity


Ganhe pontos para baixar
Ganhe pontos para baixar

Ganhe pontos ajudando outros esrudantes ou compre um plano Premium


Guias e Dicas
Guias e Dicas

Introdução às Tags HTML: Estrutura Básica, Notas de estudo de Física

Saiba como criar a estrutura básica de uma página html utilizando tags como <html>, <head>, <title>, <body>, <h1> a <h6>, <p>, <br>, <hr>, <font>, <img> e <table>. Aprenda a centralizar texto, alterar a cor de fundo e de texto, e criar listas e tabelas.

Tipologia: Notas de estudo

2010

Compartilhado em 26/09/2010

marilton-rafael-1
marilton-rafael-1 🇧🇷

4.5

(6)

140 documentos

1 / 30

Documentos relacionados


Pré-visualização parcial do texto

Baixe Introdução às Tags HTML: Estrutura Básica e outras Notas de estudo em PDF para Física, somente na Docsity! Apostila de html (básico) Introdução Como funciona a Internet World Wide Web E – Mail Correio Eletrônico FTP (File Transfer Protocol) HTML Estrutura básica de uma página Criando Sites HTML Tags para formatar sua página Imagens Links Âncoras Montagem de listas em HTML Tabelas em HTML FRAMES Criando um frame Inline Introdução As redes de computadores existem há mais de vinte anos e são utilizadas por milhões de pessoas em todo o mundo. A primeira rede , ARPANET, que na sua origem conectava centros militares e de pesquisas, foi utilizada por alguns cientistas de computação para obter acesso a computadores, compartilhar arquivos e enviar mensagens eletrônicas Hoje em dia ,cientistas, engenheiros professores, estudantes, bibliotecários, médicos, homens de negócios, políticos e até crianças, o utilizam para receber jornais eletrônicos, ter acesso a "Bulletins boards"(BBS – Visto mais adiante) , consultar bases de dados e utilizam, remotamente, vários equipamentos. Atualmente, dentro da comunicação global, a informação disponível na INTERNET ultrapassa os limites físicos, políticos e as estruturas econômicas de todas as partes do planeta, transformandose em um fórum universal que independente de raça ,profissão ou idade, disponibiliza informações das mais variadas para todos que se ligam a rede. A ARPANET "foi aposentada" em 1990 , a CSNET deixou de existir em 1991 e a INTERNET continua crescendo incontrolavelmente. Hoje, ela engloba mais de 5000 redes espalhadas em 145 países espalhados pelos 5 continentes. Estima-se um crescimento de 10%ao mês e um intercâmbio de mais de 15 milhões de mensagens entre a INTERNET e todas as demais redes conectadas. A INTERNET começou a ser utilizada no Brasil, em meados de 89/90, somente por Instituições de pesquisas e um pouco depois por Universidades, permanecendo , assim , até o final de 1995, quando a exploração comercial teve início com a liberação de um BackBone lançado pela EMBRATEL, com um grande incentivo para a sua propagação da mídia, que passou a abordar o assunto, utilizando-se até de novelas. A INTERNET nasceu em 1969 para descentralizar informações militares norte-americanas em várias redes, a fim de se evitar que um ataque soviético estratégico destruísse informações militares armazenadas em grandes computadores. Com isso, surgiu a ARPANET (rede da Advance Research Projects Agency), um projeto experimental do departamento de defesa norte americano que interligava computadores a centros de comando remotos. Algumas redes experimentais se juntavam a ARPANET através de rádios e satélites. No final dos anos 70 surgiu a USENET (Users Network) prestando serviços a comunidades universitárias e algumas organizações comerciais. No início da década de 80, a ARPANET dividiuse em : ARPANET e MILNET (também militar), mantendo a comunicação entre ambas originou o nome de DAR INTERNET e depois se abreviou para INTERNET. Em 1986, foi criada a NSFNET (National Science Foundation Network) para viabilizar a conexão de pesquisadores aos cincos grandes centros dos EUA e abrangendo, rapidamente redes acadêmicas username@subdominios.domínio EX: joão@mas.com.br Uma mensagem é composta de cabeçalho e corpo . O cabeçalho informa a data do envio da mensagem, o endereço do emitente , um título sobre o assunto , além de informações de controle . O corpo da mensagem é o seu conteúdo. Embora a grande maioria das mensagens trocadas via rede sejam constituídas por informação puramente textual, também é possível obter outros tipos de informação , tais como sons e imagens . Através do correio eletrônico, também é possível utilizar outros serviços de rede , tais como listas de discussão, USENET News , ftp , archie. FTP (File Transfer Protocol) Protocolo de transferência de arquivos é o serviço básico de transferências de arquivos na rede . Com a devida permissão , é possível copiar um arquivo de um computador a distância para o seu computador ou transferir um arquivo do seu computador para um computador remoto , para tanto , você deve ter permissão de acesso ao computador remoto . Ante as restrições para transferência de arquivos foi criado o "FTP Anônimo" para facilitar o acesso de usuários de todo mundo a determinadas máquinas que mantém enormes repositórios de informação. Não é necessário uma permissão de acesso . O usuário irá identificar-se como Anonymous quando o sistema requisitar o "log-in". HTML Falemos do que interessa mesmo.HTML – abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web , que por sua vez será composta de textos e comandos especiais que chamaremos de Tags. Não se assuste com o nome, pois se trata de uma linguagem muito simples , e tem como finalidade básica formatar o texto e imagens exibidos e criar ligações entre páginasWeb , criando assim documentos com o conceito de Hipertexto. Como em qualquer outra linguagem , o programador deve escrever o código - fonte seguindo as regras de sintaxe da linguagem. Este código – fonte é posteriormente interpretado pelo browser , que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos da Web. Em março de 1989, Tim Berners-Lee do European Laboratory for Particle Physics ( mais conhecido como CERN ) , propôs um novo conjunto de protocolos para um sistema de distribuição de informações da Internet a ser usado entre os diversos grupos de pesquisa em física de altas energias . Os protocolos da WWW foram logo adotados por outras organizações e foi formado um consórcio de organizações , chamado de W3 Consortium , que uniu seus recursos de modo a prosseguir com o desenvolvimento de padrões WWW. Esse consórcio é liderado pelo MIT ( Massachusetts Institute of Technology) , pelo CERN e pelo INRA ( French National Institute for Research in Computer Science and Control). Ele propõe recursos mais novos e sofisticados de HTML , avalia sugestões e implementações alternativas e publica novos "níveis" de versões do padrão HTML. Existem vários programas para editoração HTML , que tornaria nosso trabalho muito mais fácil e nos acomodaria como usuários – finais que não entendem nada do que estão fazendo. Por isso , sofreremos um pouco e usaremos o incrível , sensacional , fantástico e estupendo Bloco de Notas ( NotePad ) do Windows. • Comandos HTML – Tags Os comandos em HTML são chamados de tags , e eles irão dizer ao browser como o texto, a informação e as imagens serão exibidas . Por exemplo , um tag pode dizer que um texto será exibido em negrito , itálico e com um tipo de fonte qualquer. Além de formatação de texto um tag também pode dizer que na verdade um determinado pedaço do texto é um endereço para outra página Web , que será acessado ao dar um click no endereço. Os tags são identificados por serem envolvidos pelos sinais < > ou </ >. Entre os sinais < > são especificados os TAGS propriamente ditos . No caso de tags que precisem envolver um texto , a sua finalização deverá ser feita usando a barra de divisão "/ " , indicando que o tag está finalizando a marcação de um texto , o que faz os tags normalmente andarem em pares. O formato genérico de um tag é : <Nome do tag> Texto </Nome do tag> . Lembraremos sempre que não é necessário estar ligado à Web para criar páginas HTML ou para usar os Browsers. Basta que , ao terminar de escrever sua página no Bloco de Notas , você salve seu documento com um nome qualquer e a extensão HTM ou HTML , para que o browser possa interpretar suas páginas. Estrutura básica de uma página Bem , deixarei claro que ultimamente o que vou explicar não é bem assim , pois existe um certo desleixo hoje na Internet , mas , seguindo o padrão clássico teremos : O TAG <HTML> – que será usado em conjunto com seu tag de fechamento < / HTML > e será colocado no início e no final do documento , delimitando a área onde serão colocados os TAGS HTML . O TAG <HEAD> - que também terá seu tag de fechamento </HEAD> e servirá para delimitar uma área de cabeçalho com poucos TAGS (não é necessário ter esse TAG para sua página funcionar) O TAG <TITLE> - que será usado dentro dos tags <HEAD> , e servirá apenas para colocar um título que aparecerá na barra de título do seu browser ( não esqueça o </TITLE>) . Dentro dos TAGS <BODY> </BODY> serão colocados todos os comandos , textos e imagens da sua página . Será o corpo da sua página. Veja um exemplo de estrutura : <HTML> <HEAD> <TITLE> Título da página </TITLE> </HEAD> <BODY> Aqui você coloca os comandos em HTML , seus Textos e Imagens . Aliás , tanto faz colocar os tags em maiúsculas ou minúsculas. </BODY> </HTML> Vá até a opção Arquivo – Salvar Como do seu Bloco de Notas e salve o exemplo acima como TESTE. HTM . Ao abrir o arquivo no browser , sua primeira página ficou assim : Talvez você tenha de problemas para abrir sua página. Então vou dar uma explicação rápida no Internet Explorer, e no Netscape que são muito parecidos . 1 – Vá até o Menu Arquivo - Abrir… ; 2 – Aparecerá uma caixa para você colocar o endereço da página. Clique no botão Procurar (Browse…) ; 3 – Aparecerá a conhecida caixinha de pastas do Windows. Vá até a pasta onde você gravou sua página e clique em Abrir ( Open ) ; 4 – Você voltará até a caixa para a entrada do endereço , já com o caminho dentro da caixa ; 5 – Aí é só clicar OK . O <FONT FACE = "FONTE"> irá definir que tipo de fonte que seu texto irá utilizar. Aconselho a usar fontes de padrão popular no Windows , pois as fontes que seu computador tem , pode ser que outro computador não tenha. Por isso fontes como TIMES NEW ROMAN e ARIAL são aconselháveis. Exemplo : <FONT FACE = "TIMES"> Coloque aqui seu texto </FONT> Obs. : A fonte Times New Roman ( Times ) já é o padrão das páginas HTML , podendo se colocar qualquer fonte existente em sua máquina como Mistral , Arial etc. O <FONT SIZE = "TAMANHO DA FONTE "> irá definir qual o tamanho da fonte utilizada , lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 6. Podemos usar tamanhos como 78 e 64 , mas lembre – se que pode não funcionar em alguns micros. Por isso , se você quer aumentar o tamanho de uma fonte , use o sinal de + antes do número que irá definir o tamanho da fonte e , para diminuir use o sinal de - . Por Exemplo : <FONT SIZE = + 3> Irá deixar o texto com o tamanho 6 </FONT> ; <FONT SIZE = 3> Irá deixar seu texto com o tamanho 3 </FONT> ; Obs. : O tamanho 3 é o tamanho padrão das páginas HTML , podendo colocar qualquer tamanho compatível a fonte usada. O <FONT COLOR = "COR "> irá colocar uma cor na fonte escolhida e seguirá o padrão de cores RGB , o mesmo do BODY BGCOLOR. Exemplo : <FONT COLOR = "BLACK"> Veja um texto pretinho! </FONT> Obs. : A cor preta é o padrão de cor usado nas páginas HTML , podendo –se usar qualquer outra cor descrita em inglês ou código hexadecimal , descrito mais adiante . Todos esses complementos de tag podem ser usados juntos dentro de um só tag , o que facilita a nossa vida. Por Exemplo : <FONT FACE = "ARIAL" COLOR= "RED " SIZE = "3">TRICOLOR CAMPEÃO !!! </FONT> Lembre – se de fechar o tag </FONT> para que o formato seja usado só no texto escolhido e não em toda a página. • Tag BODY parâmetro BGCOLOR Esse TAG não precisa de tag de fechamento , pois o próprio < BODY > se encarregará disso. Sua função será a de colocar uma cor de fundo para sua página. Sua sintaxe é : <BODY BGCOLOR = "COR "> Onde : "COR " será a cor do fundo escolhido , que deverá ser escrito em inglês ou em código. Os browsers disponibilizam até 256 cores para serem usadas como cor de fundo, sendo que cada cor é formada por um código RGB ( red / green / blue ) . O código é composto por três números nos quais os primeiros dois dígitos representam a intensidade do vermelho ( R ); o segundo , a intensidade do verde ( G ) e o último a intensidade do azul ( B ) . Cada cor pode ter um valor que varia de 0 a 255. Se forem atribuídos os valores mínimos R=000 , G=000 e B=000 , é obtida a cor preta. Se forem atribuídos o valor máximo para cada cor ( 255 ) , é obtida a cor branca. Mas , para facilitar nossa vida , vamos escrever o padrão em inglês , que é muito mais simples. Exemplo : <BODY BGCOLOR="YELLOW"> ou <BODY BGCOLOR="#FFFF00"> O tag BODY BGCOLOR pode ser colocado logo após o tag BODY , ou até mesmo acoplado em um mesmo tag. Veja uma tabelinha de cores e alguns códigos : Código Hexadecimal Black ( Preto ) #000000 White ( Branco ) #FFFFFF Yellow ( Amarelo ) #FFFF00 Blue ( Azul ) #0000FF Green ( Verde ) #00FF00 Dark Green ( Verde escuro ) #2F4F2F Red ( Vermelho ) #FF0000 Magenta ( Rosa ) #FF00FF Cyan ( Ciano ) #00FFFF Imagens Incluir uma imagem na sua página é bem simples. Só se exige apenas que você tenha disponível a imagem que será exibida , e que ela esteja em um dos formatos aceitos pelo browser. O formato mais usado e aceito pela WEB é o formato GIF . Esse formato , é uma abreviação de Graphics Interchange Format e pode ser usado em diferentes plataformas de hardware , tais como o PC e o Machintosh . Se comparado com o formato padrão do Windows ( BMP – Bitmaps , também aceito pelos browsers ) , ele gera arquivos de tamanho bem menor. Outro formato bastante usado na WEB ó o JPEG ( Joint Photographic Engineering Group ). Ele consegue reduzir o tamanho de uma imagem em até dez vezes. Mas atenção : não encha sua página de imagens , pois , lembre- se de que , ao usar a rede para transmitir suas páginas e suas imagens , a velocidade de transmissão é muito reduzida , girando em torno de 1 KB por segundo ou , dependendo do tráfego , ela cai ainda mais. Portanto , uma imagem de 100 KB pode levar vários minutos para ser exibida , frustrando a platéia. Tente usar imagens pequenas , com a resolução de 78 pixels por polegada , que é a resolução usada no padrão VGA e SVGA da maioria dos usuários. No caso de fotos , tente usar 256 cores se a qualidade não ficar muito comprometida . • Tag <IMG SRC> O TAG HTML usado para inserir uma imagem na posição atual onde ele é especificado é o IMG SRC. Sua sintaxe ; <IMG SRC = "Nome da imagem.GIF"> ou <IMG SRC= "Nome da imagem . JPG"> Se não for especificado uma URL , o browser procura a imagem no diretório atual. Caso a imagem esteja em um diretório diferente ao do documento, é necessário indicar o diretório Onde ela se encontra , através de "../nome_ do _ diretório". Por exemplo: Se minha figura chamada "carta.gif" estiver em um diretório(pasta) chamado "figuras", devemos proceder com: <IMG SRC="../figuras/carta.gif"> Indicando assim que a figura está na Raiz ("../") no diretório figuras ("../figuras/").Pode-se também, mas não é aconselhável , utilizar o padrão DOS , por exemplo : <IMG SRC = "C:\figuras\carta.gif"> Porém , prefira que as imagens estejam no mesmo diretório que seu arquivo .HTM ou HTML. Observe a codificação abaixo : <HTML> <HEAD> <TITLE> Teste com a tag img</TITLE> </HEAD> <BODY> <H1><CENTER>Imagem</H1> <IMG SRC ="imagem.GIF"> </CENTER> </BODY> </HTML> Podendo alinhar a imagem para um determinado ponto da tela, como por exemplo deixando o texto pelo fundo da imagem. Veja os exemplos: <IMG SRC = "imagem.GIF" ALIGN="TOP"> Alinha a imagem por cima do texto ; <IMG SRC = "imagem.GIF" ALIGN="MIDDLE"> Alinha a imagem pelo meio do texto ; <IMG SRC = "imagem.GIF" ALIGN="BOTTOM"> Alinha a imagem pelo fundo do texto; <IMG SRC = "imagem.GIF" ALIGN="LEFT"> Alinha a imagem à esquerda da página ; <IMG SRC = "imagem.GIF" ALIGN="RIGHT">Alinha a imagem à direita da página. Além do complemento ALIGN , também podemos usar o complemento ALT , que cria uma espécie de HINT, isto é , um pequeno texto explicativo que aparece abaixo da seta do mouse quando este pára por sobre a figura. Exemplo: <IMG SRC = "imagem.GIF " ALIGN = "LEFT " ALT= "imagem"> inverter a barra de espaços , usando a barra "/ " no lugar da barra "\" para separar diretórios. Além disso o browser usa como referencial o diretório atual para iniciar a busca de páginas. Para especificar um arquivo que esteja no diretório STRAUSS , que fica abaixo do diretório BACH , os quais se encontram ambos no diretório raiz , você deve usar os sinais ..\ para subir um nível, acessando assim a raiz e depois o caminho do diretório BACH .Exemplo : <A HREF = "../BACH / STRAUSS / INDEX.HTM"> Se o diretório a ser acessado está abaixo do diretório atual , basta especificar o nome do subdiretório sem nenhum símbolo . Por exemplo : <A HREF = "MOZAT / INDEX.HTM"> Em alguns browser , você pode escrever o caminho como no DOS , exemplo : <A HREF = "C:\BACH \ STRAUSS \ INDEX. HTM "> Porém , tente evitar esta técnica em alguns browsers isso não funciona… • Linkando Arquivos de Outros Servidores Agora a coisa fica um pouco mais séria . É aqui que está toda graça de Internet . Através de um esquema de endereçamento , a URL , a Internet consegue acessar um arquivo que está em qualquer micro deste planeta desde que esteja conectado adequadamente a Web. Como já vimos , a URL serve para especificar a localização de páginas e arquivos em diretórios de servidores da Web . Vamos comparar com um esquema que você usa ( as vezes até sem saber ) para acessar algum arquivo em seu próprio computador . Acessando um arquivo pelo DOS : C: \WINDOWS \SYSTEM \ Lista.TXT Acessando uma página pela Web : HTTP : // WWW. STRAUSS. COM / LISTA . HTM Uma URL é composta por duas partes principais . A primeira é o protocolo Internet do documento , a segunda parte é o endereço do servidor e da página. A sintaxe disso é : PROTOCOLO: //SERVIDOR . INSTITUIÇÃO / ARQUIVO Onde : Protocolo é o tipo de servidor que está sendo acessado; Servidor é o computador que contém a página ; Instituição é o tipo de instituição a qual esse computador pertence ( Comercial , Internet Publica , Militar etc. ) ; Arquivo é o caminho do arquivo. Exemplo : HTTP : // WWW. MACLINUX.NET / INDEX . HTM Esse endereço pode ser especificado diretamente na linha de URL do Browser , para acessar diretamente a página INDEX. HTM , ou então dentro de um link de um documento HTML , através do A HREF que cria uma ligação , um link para o URL . <A HREF = "HTTP : // WWW. MACLINUX.NET / INDEX . HTM "> MacLinux.net </A> Montagem de listas em HTML Listas já foram muito importantes na confecção de páginas HTML, mas hoje poucos sites usam este recurso. A idéia é a de criar uma seqüência de informações de forma ordenada (numeradas uma a uma) ou desordenada (sem numeração). Exemplos : Lista ordenada: 1. Não diga o que fazer, mas sim como fazer 2. Faça tudo com boa vontade 3. Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis Lista desordenada: •Acredite em você •Pare de reclamar •Aja e faça corretamente Os comandos HTML para criar estas listas são muitos simples, veja o exemplo abaixo: <HTML> <HEAD> <TITLE>Criando listas</TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA ORDENADA</FONT></CENTER> <BR> <OL> <!Este comando inicia a lista> <LI> Não diga o que fazer, mas sim como fazer <! Aqui você começa a inserir os itens da lista, cada item deve ser iniciado por um LI> <LI> Faça tudo com boa vontade <LI> Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis </OL> <! Este comando encerra a lista criada> </BODY> </HTML> Se salvarmos este exemplo como LISTA.HTM, podemos visualizá-lo no navegador. Repare que neste exemplo não inserirmos no código da página os números dos itens, pois o comando <OL> (Ordened List) insere automaticamente os números da lista , esta é a característica da lista ordenada. Para se montar uma lista desordenada o procedimento é o mesmo porém o comando HTML que inicia uma lista desordenada é <UL> (Unordered List). <HTML> <HEAD> <TITLE>Criando listas</TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA DESORDENADA</FONT></CENTER> <BR> <UL> <!Este comando inicia a lista> <LI> Acredite em você <! Aqui você começa a inserir os itens da lista, cada item deve ser iniciado por um LI> <LI> Pare de reclamar <LI> Aja e faça corretamente </UL> <! Este comando encerra a lista criada> </BODY> </HTML> Um outro tipo de lista além da ordenada e da desordenada é a de tipo glossário. Uma lista do tipo glossário tem esta aparência: HTML Hyper Text Markup Language, linguagem usada na Internet para a confecção de Home-Pages. SGML Standard Generalized Markup Language, é a partir desta linguagem que se derivou o HTML. É uma linguagem mais rica em comandos e uma pouco mais complexa. VRML Virtual Reality Modeling Language, é a mais avança das linguagens de formatação (Markup) e serve para se criar modelos de realidade virtual para a Internet. Vamos procurar trabalhar com vários exemplos para visualizarmos melhor o uso destes parâmetros. • Alterando a largura da célula Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>. Exemplo1: <TABLE BORDER=2> <TR> <TDWIDTH=100> WIDTH=100</TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> </TR> </TABLE> O parâmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em porcentagem, como mostrado no exemplo a seguir. Também dentro da tag <TD> vemos um outro parâmetro que é VALIGN=MIDDLE, este parâmetro tem por função alinhar o conteúdo da célula no meio da mesma, ou seja, dentro da célula as frases são alinhadas com relação ao seu centro. Exemplo2: <TABLE BORDER=2> <TR> <TDWIDTH=25%> WIDTH=25%</TD> <TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD> </TR> • Inserindo cor de fundo e separação de células Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial. Vejamos um exemplo: <TABLE BORDER=0> <TR> <TDWIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TDWIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TDWIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TDWIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE> Aqui, vimos que podemos acrescentar cores ao fundo de uma célula, outra coisa que também pode ser feita é mudar a fonte com os comandos de formatação que você já conhece, como <FONT COLOR=cyan>, por exemplo. Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram coloridas, mas com um certo espaçamento entre elas, para tirarmos este espaço devemos acrescentar dentro da tag <TABLE> o parâmetro CELLSPACING=0. Este parâmetro elimina por completo os espaços entre as células. <TABLE BORDER=0 CELLSPACING=0> <TR> <TDWIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TDWIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TDWIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TDWIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE> Outro parâmetro que pode ser usado para separar espaços em uma célula é CELLPADDING que inclui ou exclui espaços dentro da célula, ou seja, se você tiver um elemento (frase, texto, figura etc.) dentro da célula você pode acrescentar espaços por igual nos quatros cantos da célula, fazendo com que seu texto ou figura não fique "grudado" nas paredes da célula. Aproveite os exemplos anteriores e experimente usar este atributo para ver como ele funciona. Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que encontramos na Internet são feito por intermédio de tabelas. Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas. • Um pouco mais de Tabelas Agora que você já está um pouco mais familiarizado com o uso de tabelas e com seus principais atributos, vamos ver como podemos aperfeiçoar o uso de tabelas. Em seguida descreveremos uma série de outros atributos e comandos para tabelas: <TH> ... </TH> Esta tag insere um cabeçalho dentro da célula. Na verdade a única diferença entre a tag <TH> e a tag <TD> é que a <TH> exibe o conteúdo da célula em negrito. <CAPTION> ... </CAPTION> Exibe um texto centralizado em relação à tabela, como se fosse uma legenda. Exemplo: <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha inicia a tabela com borda de espessura 1 (border), espaço entre as células 2 (Cellspacing) e espaço dentro da célula 6 (Cellpadding)> <CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela> <TR> <TH>Conteúdo em negrito</TH> <! Insere o texto na forma de cabeçalho (negrito)> </TR> <TR> <TH>Conteúdo em negrito</TH> </TR> </TABLE> Repare neste exemplo, que a legenda já sai centralizada com relação a tabela e repare no espaço dentro da célula devido ao comando CELLPADDING. • Os atributos COLSPAN e ROWSPAN Estes atributos são muito importantes dentro da tag <TABLE>. São eles que nos possibilitam remodelar a disposição das células dentro da tabela. Vejamos um exemplo prático: <TABLE BORDER=2 CELLPADDING=2> <TR> <TD COLSPAN=2>Exemplo do uso do COLSPAN</TD> <TR> <TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD> </TR> </TABLE> Neste exemplo vemos que na tag <TD> foi introduzido o parâmetro COLSPAN. Este parâmetro tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos ter um certo número de colunas. Logo, se você quiser que uma célula ocupe uma única linha, como no nosso exemplo, você deve inserir o parâmetro dentro da tag <TD> desta célula. A quantidade de células que virão em baixo da célula que recebeu o atributo COLSPAN deve ser de acordo com o número especificado no parâmetro. Mas se quisermos definir uma única célula ocupando uma coluna inteira ? Neste caso usamos o Frames (quadros) são relativamente usadas na Web. Há os que adoram o uso de frames e não admitem que suas home-pages fiquem sem elas, por outro lado há os que abominam o uso de frames, porque julgam que eles "estragam" o layout da home-page. Fazer frames tem o mesmo procedimento que confecção de home-pages simples, a diferença é que se deve trocar a tag <BODY> pela tag <FRAMSET> Para termos uma home-page com frames devemos ter três páginas, uma com o código que contém a tag <FRAMESET> e duas outras com os códigos onde serão inseridas as páginas de cada frame. Vamos procurar entender melhor. Uma documento HTML simples seria assim : <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> Neste campo entram os comandos em geral </BODY> </HTML> Já um documento HTML que teria frames ficaria assim: <HTML> <HEAD> <TITLE>Página com Frame </TITLE> </HEAD> <FRAMESET> NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES </FRAMESET> </HTML> Então o que devemos fazer ? Devemos criar um documento HTML normal e um documento HTML de frames. Vejamos um exemplo: <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET COLS=20% , 80%> <! Este comando inicia o frame e divide a tela do navegador em 2 partes, uma com 20% da tela e outra com 80%> <FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem ocupar as colunas divididas pelo frame> <FRAME SRC=FRAME2.HTM> </FRAMESET> </HTML> Este é o código para gerar os frames (veja a figura) . Agora vamos crias os códigos para serem inseridos nas duas colunas que criamos. <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> AQUI ENTRA A PRIMEIRA PÁGINA NORMAL </BODY> </HTML> Salve este exemplo como FRAME1.HTM. Por que ? Porque no código que geramos no exemplo de frames chamamos a página com o comando <FRAME SRC=FRAME1.HTM>, se você salvar o nome do código de forma diferente deverá alterar também o código da página de frame. <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> AQUI ENTRA A SEGUNDA PÁGINA NORMAL </BODY> </HTML> Este código deve ser salvo como FRAME2.HTM, pelo mesmo motivo do código anterior. Sempre lembrando que estas páginas devem estar no mesmo DIRETÓRIO. Pronto, você conseguiu fazer a sua primeira página com frame. Alem de poder dividir o navegador em colunas com o parâmetro COLS dentro da tag <FRAMSET> , você também pode dividir em linhas usando o parâmetro ROWS, ou ainda dividindo em colunas e linhas ao mesmo tempo. <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide a tela do navegador em 2 partes, uma com 50% da tela e outra com 50%> <FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem ocupar as colunas divididas pelo frame> <FRAME SRC=FRAME2.HTM> </FRAMESET></HTML> Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro de frames, como no código abaixo: <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET COLS=50%,50%> <FRAMESET ROWS=50%,50%> <FRAME SRC=FRAME1.HTM> <FRAME SRC=FRAME1.HTM> </FRAMESET> <FRAMESET ROWS=50%,50%> <FRAME SRC=FRAME1.HTM> <FRAME SRC=FRAME1.HTM> </FRAMESET> </FRAMESET> </HTML> Este código gera a seguinte página : Já deu para perceber que toda a estrutura de frames depende na verdade da tag <FRAME>. Vejamos alguns dos atributos que podem ser inseridos dentro desta tag. • Parâmetros de frames Parâmetro SRC da tag <FRAME> Este parâmetro é o responsável por chamar a página HTML que deve ser aberta (inserida) dentro de um frame. Em todos os exemplos até agora só usamos arquivos locais para abrir estas páginas em um frame, mas nada impede você de colocar no lugar uma URL completa. Por exemplo: <FRAME SRC=http://www.yahoo.com>
Docsity logo



Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved