Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 1

Transcrição

1 Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 1

2 1. O QUE É A LINGUAGEM HTML? HTML é a sigla para HyperText Markup Language que traduzido significa Linguagem de Marcadores de Hipertexto. É uma linguagem de formatação (marcação), utilizada para criar documentos hipertexto para web. Hipertexto quer dizer: Hipertexto é uma cadeia de textos interligados entre si por meio de palavras sublinhadas e coloridas que são chamadas links. Cada palavra marcada, destacada, possui um vínculo com outro documento. Ao clicar nesses links, o usuário de Internet terá acesso a outro texto, que trará maiores informações a respeito da palavra sublinhada ou colorida. O usuário pode "se movimentar" de um documento para outro através desses links. Desta forma, o processo de leitura torna-se não linear. Dúvidas podem ser resolvidas no instante em que aparecem, sem a necessidade de procurar referências. Enfim, conforme a leitura das informações vai sendo feita, você "mergulha" nas informações relacionadas. Além do texto o documento pode ter imagens, tabelas, formatações especiais, links etc., que tornam o documento muito mais atraente. Um documento hipertexto é constituído de trechos de texto, muito parecidos com aqueles que você produz num editor de textos. Na verdade, se quiser produzir páginas codificadas em HTML, basta utilizar um editor de textos simples, como o Bloco de Notas do Windows. Porém existem programas sofisticados que "constroem" todo o código HTML de forma simples e rápida. Exemplos desses programas são o Microsoft Front Page e o Macromedia Dreamweaver. Existem outras vertentes da linguagem HTML como, por exemplo, DHTML, SGML, XHTML etc., mas o foco deste material é específicamente à linguagem HTML. Diferentemente de outras linguagens como C e Pascal, a linguagem HTML não é compilada e sim interpretada pelo browser (navegador). Teoricamente só podemos perceber algum erro com o código HTML quando o arquivo que contém este código for aberto (interpretado), enquanto outras linguagens possuem um recurso de compilação (Debug) que verifica no código, erros de digitação, lógica, entre outros erros. O que diferencia um documento hipertexto de um documento comum? É a possibilidade, entre outras, de ligar uma palavra ou um trecho de texto com outras partes desse mesmo documento ou de vários outros documentos. Esta ligação é chamada link de hipertexto ou, simplesmente, link. Ao dar um clique em um link, o navegador irá se encarregar de desviar sua leitura para um novo trecho do documento, correlacionado com o assunto apontado por essa ligação. A ligação pode ser feita com outro arquivo HTML, com um arquivo de imagem, com um arquivo de som ou qualquer outro tipo de arquivo. Esses arquivos podem estar no próprio computador ou em qualquer computador em qualquer parte do mundo. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 2

3 Outra diferença entre um documento hipertexto e um documento comum é justamente a possibilidade de se ter no documento, além do texto, imagem, cores, sons, vídeos, animações etc. Outro exemplo de arquivos hipertexto, além dos arquivos HTML, são os arquivos de Ajuda do Windows. Embora o formato seja diferente (estes arquivos possuem outras extensões como:.chm,.hlp, etc) estes são arquivos hipertextos também. 2. ESTRUTURA GERAL DE UM DOCUMENTO HTML Uma tag, ou em português: etiqueta é uma palavra-chave (relevante) ou termo associado com uma informação (ex: uma imagem, um artigo, um vídeo) que o descreve e permite uma classificação da informação baseada em palavras-chave. As Tags são constituídas da seguinte maneira em HTML, abrindo-se com o sinal de menor que (<) o nome da Tag e fechando-se com o sinal de maior que (>), as tags podem se classificar de duas formas: Tags vazias: constituída de uma única tag, exemplo: <tag />; Tags de containers: compostas de uma tag de abertura e outra de fechamento, exemplo: <tag>conteúdo</tag>, nota-se que a segunda tag possui uma barra que simboliza o seu fechamento. Todo o documento HTML fica contido entre as TAGS: <HTML> e </HTML> e duas seções básicas: HEAD: Contém parâmetros de configuração do documento. BODY: Contém o documento em si (o que aparece para o usuário). Exemplo <html> é a tag de abertura do documento html. <head> cabeçalho da página, contém informações adicionais. <title> é a tag de abertura do título da janela. </title> tag de fechamento do título da janela. </head> tag de fechamento do cabeçalho. corpo da página, aqui ficará a parte principal do seu site. tag de fechamento do corpo da página. </html> tag de fechamento do documento html. Exemplo1. Criando sua primeira página HTML 1. Abra o Bloco de notas. Digite o seguinte código: <HTML> <HEAD> <TITLE>Minha primeira página HTML</TITLE> </HEAD> <BODY> Minha primeira página HTML </BODY> </HTML> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 3

4 Dentro da pasta MEUS DOCUMENTOS criem a seguinte Estrutura: Em seguida salve o exemplo acima como texto.html O arquivo deverá ser salvo com nome e extensão, nome: texto, extensão:.html para ser reconhecido pelo navegador como um documento para web. A grande maioria das tags possui além de seu nome propriedades que complementas as tags e geram formatação dos elementos que irão estar contidos no documento HTML: Exemplo: <tag propriedade1= valor propriedade2= valor > Todos os valores das propriedades de uma tag deverão ser escritos entre aspas duplas para serem evitados erros no documento html. 3. INFORMAÇÕES ADICIONAIS CONTIDAS NO CORPO: BODY 3.1 Cores e padrões de Fundo A TAG <Body> </Body> bgcolor=" #FFFFFF Define a cor de fundo da página HTML; As cores deverão ser escritas com seu nome em inglês: white, blue, navy, pink, yellow, orange, black, algumas cores aceitam os prefixos light ou dark, exemplo: lightblue, darkgreen; As cores poderão também ser especificadas com código Hexadecimal, exemplo: #FFFFFF ; background="fundo.jpg" Define uma imagem como fundo da página HTML; text="#cc0000" Define a cor do texto que aparecerá na página HTML (letras vermelho); Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 4

5 3.2. Fonte Tamanho da fonte, cor e tipo de fonte A Tag <FONT> </FONT> permite alterar as propriedades de tamanho, cor e tipo de fonte do texto a ser exibido no documento html. Exemplo: <font size= tamanho_da_fonte face= Nome_da_fonte color= Cor_da_fonte > Texto </font> Size - especifica o tamanho da Fonte, é um valor numérico e aceita somente valores de 1 a 6. Face - especifica o nome da fonte. Podem ser especificadas várias fontes separadas por virgula, de maneira que se o sistema não encontrar a primeira fonte no computador a ser exibida a página html, a seguinte será carregada e assim por diante. Color especifica a cor do texto, pode ser em hexadecimal ou pelo nome em inglês das cores. Exemplo 2: <font color= #FF0000 face= Arial,Verdana size= 12 > Todo o texto em vermelho tipo arial e tamanho 12. </font> <font color= #FF0000 face= Verdana size= 12 > Todo o texto em vermelho tipo arial e tamanho 12. </font> <font color= #FF0000 face= Arial,Verdana,Helvetica size= 12 > Todo o texto em vermelho tipo arial e tamanho 12. </font> Aplicando Estilos de Texto Você pode criar uma série de efeitos no texto, alterando a forma ou o tipo de fonte. Todos os comandos que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o inicio e fim do texto que sofrerá a formatação. As principais tags: Negrito: <b> Texto </b> Itálico: <i> Texto </i> Sublinhado: <u> Texto </u> Strong (similar ao negrito): <Strong> texto </Strong> Pulsante: <blink> Texto </blink> TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento regular BIG <big>texto</big> Aumenta a fonte e aplica negrito SMALL <small>texto</small> Reduz e altera a fonte SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo SUBESCRITO _texto Rebaixa o texto e diminui seu corpo <MARQUEE> o texto se move de um lado para o outro. Ex: <marquee> texto </marquee> Atributos: BEHAVIOR (define como o letreiro vai deslizar na tela); Scroll (o letreiro continua rolando continuamente em um mesmo sentido); Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 5

6 Slide (o letreiro parte de um ponto da tela, vai até o outro e para quando chega ao final do percurso); Alternate (o leitreiro vai até o outro lado da tela, e quando chega lá ele volta pela tela novamente) Ex.: <marquee behavior=alternate> texto </marquee> DIRECTION (define a direção em que o texto vai deslizar). Pode ser RIGHT ou LEFT Ex.: <marquee direction=left> texto </marquee> LOOP (define quantas vezes o texto vai deslizar pela tela). Ex.: <marquee loop=infinite> texto </marquee> HEIGHT e WIDTH (define respectivamente altura e largura do marquee na tela) Ex: <marquee height=40 widht=200> texto </marquee> HSPACE e VSPACE (define o espaço em pixels que deve ficar livre em torno do letreiro). Ex.: <marquee hpace=10 vspace=20> texto </marquee> ALIGN (alinha o texto que está ao redor do marquee). São eles: TOP (acima), BOTTON (abaixo) e MIDDLE (no centro), eles delimitam somente a primeira linha do texto. Ex.: <marquee align=top> texto </marquee> SCROLLAMOUNT e SCROLLDELAY (controle de velocidade do letreiro). O scrolldelay (define o tempo em milissegundos, que o letreiro vai demorar em cada um dos quadros) e o scrollamount (define a quantidade de pixels que ele vai percorrer em cada quadro). Exemplo 3: <HTML> Ex.: <marquee =scrollamount=5 scrolldelay=100> texto </marquee> <head> <title> Exemplo aplicando estilos de Textos </title> </head> <b> Aqui está o meu texto na primeira linha em negrito </b><br> <i> E aqui o meu texto na segunda linha em itálico. </i> <BR> <u> Aqui o texto sublinhado na terceira linha, sem deixar uma linha adicional em branco.</u> <hr> <b><i>e agora? Negrito e Sublinhado!</i></b> <marquee =scrollamount=5 scrolldelay=100> texto rolando </marquee> <marquee =scrollamount=5 scrolldelay=100> texto piscando </marquee> </HTML> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 6

7 3.3. Parágrafos e Quebras de Linha Tag <P> Para blocos de texto e iniciar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na segunda linha após o final do parágrafo anterior. O Browser vai sempre avançar uma linha em branco, posicionando-se na segunda linha seguinte ao comando. Pode aparecer individualmente <P> ou em par <P> </P>. Exemplo 4: <p> Aqui vai a primeira linha </p> <p> Aqui vai a segunda linha </p> <p> Esta linha utiliza apenas a tag individualmente. <p> E aqui mais uma linha de parágrafo. A Tag <P> pode utilizar os parâmetros de alinhamento (Align) que pode receber os seguintes valores. Left : Alinhamento à esquerda; Right: Alinhamento à direita; Center: Centralizado; Justify : Texto justificado. Exemplo: Tag <BR /> Break <p align= center > Aqui vai a primeira linha centralizada!</p> <p align= right > Aqui vai a segunda linha alinhada à direita</p> O comando <BR /> tem como função avançar (quebrar) para a linha imediatamente após aquela em que se encontra, sem, contudo deixar uma linha em branco adicional. Exemplo 5: <HTML> <head> <title> Exemplo com BR </title> </head> Aqui está o meu texto na primeira linha <BR> E aqui o meu texto na segunda linha. <BR> Aqui o texto na terceira linha, sem deixar uma linha adicional em branco. </HTML> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 7

8 3.3.3 Tag <HR> O comando <HR> tem a função de inserir uma linha divisória na posição que foi especificado. Serve para separar assuntos ou tópicos distintos. Exemplo 6: Tag <PRE> <HTML> <head> <title> Exemplo com HR </title> </head> Texto mostrado na primeira linha <HR> Texto mostrado na Segunda linha. </HTML> Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado. Usando-se a tag <pre></pre> serão mantidos os espaços e tabulações. Exemplo 7: <pre> Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado </pre> Este texto será mostrado na forma como foi digitado. Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado </pre> 3.4 Cabeçalhos Outra forma muito usada para mudar o tamanho da fonte e aplicar um efeito de negrito em um texto é o uso da tag <H>. O HTML possui seis elementos <H>, de <H1> até <H6>, que aplicam um tamanho de fonte diferenciado para o texto que envolver. Além de mudar o tamanho da fonte e deixa-la em negrito a tag <h> também cria um quebra de linha no fechamento da tag <\h> Exemplo 8: <H1> Texto </H1> <H2> Texto </H2> <H3> Texto </H3> <H4> Texto </H4> <H5> Texto </H5> <H6> Texto </H6> A Tag <H> pode utilizar os parâmetros de alinhamento (Align) que pode receber os seguintes valores. Left : Alinhamento à esquerda; Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 8

9 Right: Alinhamento à direita; Center: Centralizado; Justify : Texto justificado. Exemplo 9: <HTML> <head> <title> Exemplo aplicando estilos de Textos </title> </head> <h1> Aqui... Cabeçalho H1 </h1> <br> <h2> E aqui o meu cabeçalho H2 </h2> <br> </HTML> 3.5 Alinhamentos do conteúdo Como padrão, os textos inseridos são alinhados pela margem esquerda do documento. Para centralizar um cabeçalho, parágrafo, imagem, tabela e etc, pode ser usado o comando <CENTER> </CENTER>. Exemplo 10: <center> O texto daqui vai aparecer centralizado na tela </center> <left> O texto daqui vai aparecer alinhado à esquerda da tela </left> <right> O texto daqui vai aparecer alinhado à direita da tela </ right > 3.6 Imagens Incluir uma imagem em uma página html é uma tarefa bem simples e que requer alguns requisitos básicos. A imagem deve estar disponível nos formatos.gif, JPG ou PNG (extensão nativa do photoshop e fireworks). A tag IMG insere uma imagem no documento. Exemplo: <IMG SRC= foto.jpg > Parâmetros: SRC = URL deve ser utilizado o caminho até a figura juntamente com o nome. O caminho pode ser relativo se estiver no mesmo diretório do site ou a URL completa caso a imagem esteja em hospedada em outro site. ALT = texto Exibe o texto quando o browser não encontra a imagem ou uma legenda quando o cursor passa sobre ele mostrando o texto especificado. ALIGN = TOP (cima), MIDDLE (meio), BOTTOM (abaixo), LEFT (esquerda), RIGHT (direita), CENTER (centro) Define o alinhamento da imagem no documento. As três primeiras propriedades se referem ao alinhamento vertical da imagem e as três seguintes ao alinhamento horizontal. BORDER = número Especifica em pixels a largura da borda da imagem. O 0 (zero) remove a borda Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 9

10 WIDTH = número ou % (porcentagem) Especifica a largura da imagem, independente do seu tamanho físico. HEIGHT= numero ou % Especifica a altura da imagem, independente do seu tamanho físico. Nota: Lembre-se que uma imagem que tem suas proporções aumentadas podem provocar distorção e perda de qualidade. Exemplo 11: <HTML> <head> <title> Exemplo com Imagem </title> </head> <h1> Insere uma imagem </h1> 3.7. Criando Links <br> <img src= foto.jpg border= 0 alt= Texto sobre a Foto > </HTML> Fazer a ligação de um texto com uma página local é uma tarefa bem simples. Você precisa somente especificar o nome completo do arquivo (ou URL) que será chamado, utilizando a TAG <A> </A> de âncora (anchor). Principais parâmetros: HREF = URL - especifica o endereço da URL ou arquivo. NAME = String Especifica o nome da seção de um documento que é referida por um link de hipertexto. TARGET = Tipo - A função do atributo target basicamente é indicar o nome de um frame na página onde um documento deve ser aberto. Outro controle que você pode ter com ele é se o hyperlink deve ser aberto na própria janela ou no próprio frame (target: _self ) onde o próprio link se encontra ou se a URL do link deve ser aberta em outra janela (target= _blank ) do seu browser. link="#0033cc" Define a cor dos links (azul); vlink="#ffff00" Define a cor dos links já visitados pelo usuário (amarelo); alink="#00cc00" Define a cor dos links ativos (verde); Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 10

11 Essas propriedades são atribuídas à Tag, ex: <body bgcolor="#rrggbb" text="#rrggbb" link="#0000ff" vlink="#rrggbb" alink="#rrggbb"> Exemplos: <a href="slide.html" target="_self">slide 1.</a> <a href="slide.html" target="_blank">slide 2.</a> <a href="slide2.html" target="meuframe">slide 3.</a> <a href=" target="_blank">meu </a> <a href=" target="_self">google</a> O parâmetro HREF especifica a localização do arquivo. O Texto que fica envolvido pelos dois comandos <A> </A> aparecerá sublinhado e na cor Azul, indicando que é um Link. Exemplo 12: Criando links em imagens: <HTML> <head> <title> Exemplo de link </title> </head> <h1> Insere um Link </h1> <br> <a href= > Ir para o Site do Google </a> </HTML> <a href="seu link aqui" target="_blank"><img src="endereço da imagem aqui"/></a> 3.8. Listas Uma outra estruturar em um documento HTML são as listas. Existem basicamente 2 tipos de listas. As não ordenadas, que contém uma série de itens sem numerá-los e as listas ordenadas, que atribuem um número para cada elemento da lista. Trabalhar com listas é uma tarefa muito simples e usam-se as TAGS <UL> </UL> para listas não ordenadas (unordered list) e <OL> </OL> para listas ordenadas (ordered list) Tag <UL> Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não ordenada (Unordered List) é o comando <UL>, que deve envolver o primeiro e o ultimo item da lista. Cada item da lista deve ser precedido do comando <LI> (List Item) e após o item limita-se o item fechando-se o comando </LI>. Exemplo 13: <HTML> <head> <title> Exemplo de lista não ordenada </title> </head> <UL> <LI> Texto do Item um. </LI> <LI> Texto do Item dois. </LI> </UL> </HTML> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 11

12 Tag <OL> Para criar uma lista ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista ordenada (Ordered List) é o comando <OL>, que deve envolver o primeiro e o último item da lista. Cada item da lista deve ser precedido do comando <LI> (List Item). Exemplo 14: <HTML> <head> <title> Exemplo de lista ordenada </title> </head> <OL> <li> Texto do Item um. </li> <li> Texto do Item dois. </li> </OL> </HTML> Aninhando listas não ordenadas É possível adicionar listas não ordenadas, dentro de listas não ordenadas, criando assim sub-listas. Veja o exemplo. Exemplo 15: <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <ul> <li>este é o primeiro item da lista principal <ul> <li>este é o primeiro subitem da lista principal <li>este é o segundo subitem da lista principal </ul> <li>este é o segundo item da lista principal <ul> <li>este é o primeiro subitem da segunda lista <li>este é o segundo subitem da segunda lista </ul> </ul> </html> Exemplo 16: Exemplo: Lista Não Ordenada e uma Sub-Lista Ordenada. <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <ul> <li>este é o primeiro item da lista principal <ol> <li>este é o primeiro subitem da lista principal <li>este é o segundo subitem da lista principal </ol> <li>este é o segundo item da lista principal <ol> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 12

13 Alterando numeração e marcadores <li>este é o primeiro subitem da segunda lista <li>este é o segundo subitem da segunda lista </ol> </ul> </html> Até agora, vimos como criar listas ordenadas e não ordenadas usando os marcadores e numeração padrão dos comandos <OL> E <UL>. Veremos então como alterar as características básicas das listas, como a numeração e os marcadores. Modificando os marcadores das listas Não Ordenadas. A propriedade Type= do comando <UL> permite que sejam especificadas variações para o marcador utilizado na lista. Os valores possíveis para atribuir-se ao TYPE são: SQUARE : marcador quadrado; CIRCLE: marcador como um círculo sem preenchimento (vazio); DISC: marcador como um círculo com preenchimento. Exemplo 17: <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <ul type="circle"> <li>primeiro item da Lista</li> <li>segundo item da Lista</li> <li>terceiro item da Lista</li> </ul> </html> As listas numeradas possibilitam maiores oportunidades de modificações. Seu padrão é sempre iniciar a lista pelo numero 1. Você pode mudar o numero inicial e o tipo de numeração da lista usando o parâmetro TYPE e o parâmetro START. Os valores permitidos para Type são: Type = valor: 1 - Cria uma lista numérica normal (é o padrão e não precisa ser especificado) Type = valor: A - Cria uma lista alfabética com letras maiúsculas começando pelo A. Type = valor: a - Cria uma lista alfabética com letras minúsculas começando pelo a. Type = valor: I - Cria uma lista numérica com números romanos maiúsculas começando pelo I. Type = valor: i - Cria uma lista numérica com números romanos minúsculas começando pelo i. O START permite mudar o número pelo qual se inicia a ordenação da lista. START = 10 - inicia a ordenação da lista no número 10. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 13

14 Exemplo 18: <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <OL Type=1 Start=10> <li> Item que começa no numero 10 </li> <li> Item 11 da lista </li> </OL> </html> Criando links em listas <html> <head><title>exemplo de Listas Aninhadas</title></head> gratuíto: <ul> <li><a href= " <li><a href= " </ul> </html> 3.9 Tabelas O uso de tabelas melhora muita a aparência de uma página, pois permite o alinhamento de textos e imagens, além de ordenar as informações de uma forma padronizada. O conceito de Tableless não quer dizer sem tabelas, mas sim menos tabelas, pois elas devem ser usadas para convenções próprias, formatação de determinados conteúdos. Uma tabela é criada pelas TAGS <Table> </Table> e é formada por linhas e colunas. A interseção de uma linha com uma coluna é chamada de célula. As linhas de uma tabela são criadas pelo comando <TR> </TR> (table row). As colunas de uma tabela são criadas pelo comando <TD> </TD> (table data). A TAG <Table> possui alguns parâmetros, como por exemplo, para definir a borda, a cor da borda, largura e altura da tabela e etc. Vejamos alguns deles: Border = N - onde N é a largura da borda, e 0 diz que é sem bordas. Align = left center right Define o alinhamento da tabela na página. Bgcolor = Especifica a cor de fundo de toda a tabela. Bordercolor = Especifica a cor da borda de toda a tabela. Width = Especifica a largura da tabela em pixels ou em porcentagem relativa à largura da janela. Height= Especifica a altura da tabela em pixels ou em porcentagem relativa à largura da janela. Cellspacing = Especifica o espaçamento em pixels entre as células. Cellpadding = Especifica o espaçamento entre o conteúdo e a borda de célula. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 14

15 Exemplo 19: <html> <head> <title>exemplo de tabelas </title> </head> <table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#ff0000" bgcolor="#cccccc"> <tr> <td> 1ª linha e 1ª coluna </td> <td> 1ª linha e 2ª coluna </td> </tr> <tr> <td>2ª linha e 1ª coluna </td> <td>2ª linha e 2ª coluna </td> </tr> </table> </html> <TR> Table Row Define uma linha da tabela. Para cada linha em uma tabela, de ser especificado um par destas Tags, onde, dentro delas, devem ser especificados os comandos <TD> </TD> para crias as células de dados da referida linha. As linhas de uma tabela não precisam ter necessariamente o mesmo numero de células. Sintaxe: <TR bgcolor= COR background= Nome da Figura.gif,.jpg ou.png > </TR> <TD> Table Data Define o conteúdo de uma célula da linha de uma tabela. Cada célula de uma linha precisa ser especificada por meio deste comando. Sintaxe: <TD ALIGN= CENTER LEFT RIGHT COLSPAN= ROWSPAN= WIDTH= HEIGHT= > </TD> Parâmetros: ALIGN = LEFT Center Right justify - Especifica o alinhamento horizontal do conteúdo da célula. VALIGN = TOP MIDDLE BOTTOM BASELINE Especifica o alinhamento vertical do conteúdo da célula. COLSPAN = número Indica o numero de colunas que esta célula deverá ocupar (estender-se). ROWSPAN= Número - Indica o numero de linhas que esta célula deverá ocupar (estender-se). WIDTH = número número% Especifica a largura da coluna em pixels ou em porcentagem relativos à largura da janela. HEIGHT = número número% Especifica a altura da coluna em pixels ou em porcentagem relativa à largura da janela. BGCOLOR = cor Define a cor de fundo da célula. BACKGROUND= imagem.jpg ou gif ou png Define a imagem de funda da célula. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 15

16 Dentro de cada célula você pode colocar qualquer elemento aceito em uma página HTML, como um texto ou figuras. Você pode adicionar tabelas dentro de tabelas (aninhamento), mas fique atento com o fechamento correto das Tags Expandindo uma célula pelas colunas Uma vez definida a estrutura básica de uma tabela, ou seja, o numero de linhas e colunas, podemos apagar a divisão entre células vizinhas de maneira a aumentar a largura ou a altura de uma célula e criar tabelas mais bem definidas. O exemplo abaixo mostra o uso da opção COLSPAN para aumentar o tamanho de uma célula e fazer com que ela ocupe colunas adjacentes. Exemplo de uma tabela contendo 2 linhas e 4 colunas. Exemplo 20: <html> <head> <title> Exemplo com tabelas </title> </head> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>linha 1 - Coluna 1</td> <td>linha 1 - Coluna 2</td> <td>linha 1 - Coluna 3</td> <td>linha 1 - Coluna 4</td> </tr> <tr> <td>linha 2 - Coluna 1</td> <td>linha 2 - Coluna 2</td> <td>linha 2 - Coluna 3</td> <td>linha 2 - Coluna 4</td> </tr> </table> </html> Exemplo 21: Agora a mesma tabela com 2 colunas unidas pelo comando COLSPAN. <html> <head><title>tabelas em HTML</title></head> <table width = "80%" border="1" align="center" cellpadding="3" cellspacing="1" bordercolor="blue" bgcolor="pink"> <tr bgcolor="green" > <td colspan="2" align="center">linha1 - Colunas 1 e 2</td> <td align ="center"> linha1- coluna 3 </td> <td align ="center"> linha1- coluna 4 </td> </tr> <tr> <td align ="center"> linha2- coluna 1 </td> <td align ="center"> linha2- coluna 2 </td> <td align ="center"> linha2- coluna 3 </td> <td align ="center"> linha2- coluna 4 </td> </tr> </table> </html> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 16

17 Agora um exemplo com o comando ROWSPAN Exemplo 22: 3.10 Formulários <html> <head><title>tabelas em HTML</title></head> <table width = "80%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="blue" bgcolor="pink"> <tr > <td rowspan="2" align="center">linha 1- coluna1 e coluna 2 </td> <td> linha1- coluna 2 </td> <td> linha1- coluna 3 </td> <td> linha1- coluna 4 </td> </tr> <tr> <td> linha2- coluna 2 </td> <td> linha2- coluna 3 </td> <td> linha2- coluna 4 </td> </tr> </table></html> Um dos recursos mais interessantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário eletrônico o usuário pode interagir com o servidor, enviando dados que serão processados no servidor e posteriormente devolvidos ao cliente. Esses comandos são os principais responsáveis pela viabilização da troca de informações entre o cliente e o servidor. Algumas utilizações de formulários. Uma loja virtual; Um site de busca; Uma agência de empregos, onde os candidatos fazem o cadastro de currículos; Qualquer site que necessite que o usuário entre com alguma informação que será enviada e/ou processada pelo servidor, que pode ou não retornar alguma informação de volta para o cliente Definindo um FORM A tag <FORM> Esta Tag especifica o destino (URL) que receberá os dados do formulário e defini a forma ou método como os dados serão enviados. A tag <Form> usa os seguintes parâmetros: ACTION = URL Especifica o local (URL) do servidor e/ou do Script ou CGI que vai processar os dados do formulário. A propriedade MAILTO era utilizada para envio dos dados do formulários por meio de um programa de envio de ex: Outlook, Incredimail, Live Mail, mas essa propriedade não possui mais funcionalidade junto ao HTML, então para envio dos dados do formulário faz-se necessário a união da Linguagem HTML com uma linguagem Script de Servidor, ex: ASP.NET, ASP, PHP, etc. METHOD = Método Especifica o método usado pelo servidor para receber o form. As opções possíveis para esse parâmetro são GET e POST. O método POST é o mais utilizado e transmite toda a informação do form imediatamente após a URL. Porém, separado de sua especificação, ou seja, uma vez que o servidor recebeu uma requisição de um formulário usando o método POST, ele continua a receber os demais dados. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 17

18 O método GET faz com que o conteúdo do formulário seja anexado ao endereço da URL e permite apenas a transmissão de 255 caracteres na extenção. Exemplos: Usando o metodo POST, mais recomendado. <form method= POST action= > ou usando o método GET <form method= GET action= > Definindo os Campos de um formulário A tag <INPUT> define um campo de entrada de dados onde o usuário digita as informações do formulário. Cada campo de um formulário atribui o seu conteúdo para uma variável que possui nome e tipo especifico. Muitos elementos de um formulário html são definidos pela tag <input>. Cada tipo de elemento possui parâmetros próprios, mas todos possuem pelo menos dois parâmetros em comum: type, que define o tipo de elemento, e name, define o nome daquele elemento Campo de Texto O campo mais comum em formulários. Exibe na tela um campo para entrada de texto com apenas uma linha. Parâmetros: Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada; Size - O tamanho do elemento na tela, em caracteres; Maxlength - O tamanho máximo do texto contido no campo (número de caracteres que podem ser digitados no campo); Exemplo: <input type="text" name="valor_1" value="" size="" maxlength=""> Campo Senha - campo de texto com máscara que oculta os caracteres digitados Campo semelhante ao anterior, com a diferença que neste caso os dados digitados são substituídos por asteriscos, e por isso são os mais recomendados para campos que devam conter senhas. É importante salientar que nenhuma criptografia é utilizada. Apenas não aparece na tela o que está sendo digitado. Parâmetros: Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada; Size - O tamanho do elemento na tela, em caracteres; Maxlength - O tamanho máximo do texto contido campo (número de caracteres que podem ser digitados no campo); Exemplo: <input type="password" name="senha" value="" size="8" maxlength="8"> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 18

19 Checkbox Utilizado para campos de múltipla escolha, onde o usuário pode marcar mais de uma opção. Parâmetros: Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado; Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado; Exemplo: Radio Button <input type="checkbox" name="nome_checkbox" value="valor" checked> <input type="checkbox" name="nome_checkbox2" value="valor2"> Utilizado para campos de múltipla escolha, onde o usuário pode marcar apenas uma opção. Para agrupar vários elementos deste tipo, fazendo com que eles sejam exclusivos, basta atribuir o mesmo nome a todos os elementos do grupo. Parâmetros: Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado. Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado; Exemplo: Submit Button <input type="radio" name="sexo" value="m" checked> Masculino <input type="radio" name="sexo" value="f"> Feminino Utilizado para enviar os dados do formulário para o script descrito na seção "action" da definição do formulário. Parâmetros: Name nome do botão. Value - o texto que aparecerá no corpo do botão. Exemplo: Reset Button <input type="submit" name="botao1" value="enviar Dados"> Utilizado para fazer todos os campos do formulário retornem ao valor original, quando a página foi carregada. Bastante utilizado como botão "limpar", mas na realidade só limpa os campos se todos eles têm como valor uma string vazia. Parâmetros: Name nome do botão. Value - o texto que aparecerá no corpo do botão. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 19

20 Exemplo Button <input type="reset" name="botao2" value="limpar"> Utilizado normalmente para ativar funções de scripts client-side (JavaScript, por exemplo). Sem essa utilização, não produz efeito algum. Parâmetros: Name nome do botão. Value - o texto que aparecerá no corpo do botão. Exemplo: <input type="button" name="" value=""> TextArea Exibe na tela uma caixa de texto, com o tamanho definido pelos parâmetros "cols" e "rows". Parâmetros: Cols - número de colunas do campo, em caracteres; Rows - número de linhas do campo, em caracteres; Wrap - Maneira como são tratadas as quebras de linha automáticas. O valor soft faz com que o texto "quebre" somente na tela, sendo enviado para o servidor o texto da maneira como foi digitado; O valor "hard" faz com que seja enviado para o servidor da maneira como o texto aparece na tela, com todas as quebras de linhas inseridas automaticamente; o valor "off" faz com que o texto não quebre na tela e nem quando enviado ao servidor. Value - O elemento do tipo textarea não possui o parâmetro "value". O valor pré-definido do campo é o texto que fica entre as tags <textarea> e </textarea>. Exemplo: Select <textarea cols="" rows="" name="" wrap="">texto</textarea> Se o parâmetro "size" tiver o valor 1 e não houver o parâmetro "multiple", exibe na tela uma "combo box". Caso contrário, exibe na tela uma "select list". Parâmetros: Size - número de linhas exibidas. Default: 1; Multiple - parâmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, através das teclas Control ou Shift; option - Cada item do tipo "option" acrescenta uma linha ao select; value - Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item; Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 20

21 text - valor a ser exibido para aquele item. Não é definido por um parâmetro, mas pelo texto que fica entre as tags <option> e </option> Exemplo: Estrutura avançadas: "Frames" <select name="sexo" size="1" > <option value="m">masculino </option> <option value="f">feminino </option> </select> Quem já navegou um pouco pela Internet com certeza já encontrou páginas em que, por exemplo, existe um menu estático no lado esquerdo do ecrã e o conteúdo do lado direito é que vai mudando. Para tal é utilizado um processo mais complexo no qual visualizamos ao mesmo tempo no ecrã mais que uma página HTML. Para isso usa-se aquilo que iremos chamar de sistema de frames. O princípio é simples. Temos uma página que nos indica a posição na qual as outras páginas serão colocadas. No exemplo referido de um menu do lado esquerdo, teríamos, por exemplo uma página principal.htm que nos diz para exibir a página menu.html no lado esquerdo e a página conteudo.htm no lado direito. Vamos agora ver como criar uma página com três frames, uma do lado esquerdo, e do lado direito um cabeçalho e o corpo, como no seguinte esquema: CIMA ESQUERDA CONTEÚDO <HTML> <HEAD><TITLE>Página com Frames</TITLE></HEAD> <FRAMESET COLS ="160,*" BORDER="0" FRAMESPACING="0"> <FRAME SRC="esquerda.htm" NAME="esquerda" NORESIZE FRAMEBORDER="NO"> <FRAMESET ROWS ="90,*"> <FRAME SRC="cima.htm" NAME="cima" NORESIZE SCROLLING="NO" FRAMEBORDER="NO"> <FRAME SRC="conteudo.htm" NAME="conteudo" FRAMEBORDER="NO"> Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 21

22 </FRAMESET> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="#FFFFFF"> Esta página usa frames, mas o seu browser não as consegue visualizar. </BODY> </NOFRAMES> </HTML> Vejamos: esta página é algo diferente daquilo que aprendemos até agora. Isto porque aquilo que vemos no ecrã não é esta página, mas sim aquelas que esta refere. Para definir frames, utiliza-se a tag <FRAMESET>. Como não se trata propriamente do corpo da página, Esta tag define uma área após a área <HEAD>, mas não contido dentro da tag <BODY>. Ao utilizar o parâmetro COLS, divide a página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160 pixeis de largura e outra que ocupa o resto do espaço disponível no ecrã. As medidas das frames podem ser fornecidas em pixels, em percentagem do espaço disponível ou por um asterisco, que significa o resto. Estas colunas são definidas da esquerda para a direita. Temos também BORDER e FRAMESPACING, que definem a borda e o espaçamento entre frames. Dentro de <FRAMESET>, podemos então definir a frame propriamente dita ou subdividi-la pela ordem em que foram criadas as colunas. Temos então inserido a tag <FRAME>, que se refere à primeira coluna (de 160 pixeis). SRC define qual o arquivo HTML a ser exibido nesse frame, NAME, muito importante, indica qual o nome da frame, para que as links possam lá recair (veremos isto mais à frente). NORESIZE indica que a frame não pode ser redimensionada com o rato, e FRAMEBORDER, mais uma vez, a borda do frame. Utiliza-se <FRAME FRAMEBORDER> e <FRAMESET BOR- DER> mais uma vez por uma questão de compatibilidade entre o Internet Explorer e o Netscape Navigator. SCROL- LING pode ser definido com "YES" ou "NO" para obrigar a barra de scroll a estar sempre visível ou escondida. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 22

23 A segunda coluna que definimos é então ocupada por um novo <FRAMESET>, este agora que divide essa área em duas linhas, utilizando ROWS. De forma semelhante a COLS, ROWS divide a área a que diz respeito em linhas, lidas de cima para baixo. No final temos ainda uma estranha área<noframes>. Esta, que dentro de si contém uma área<body>, destina-se a alojar o conteúdo do corpo da página visível nos browsers antigos (anteriores ao Netscape 2.0), que não suportam frames. Como é que fazemos com que as links caiam sobre uma dos frames que criamos? Aí entra o parâmetro NAME de <FRAME>. Através do nome que definimos, podemos usar o seguinte código, por exemplo, no arquivo esquerda.htm : <A HREF="link.htm" TARGET="conteudo">Link</A> Através de TARGET podemos definir o alvo de um link, que terá o nome que atribuímos à frame desejada. Podemos ainda utilizar TARGET="_blank", que abre a link numa nova janela, e TARGET="_ top", que abre a link no topo de toda a hierarquia de frames no ecrã, apagando as frames existentes. Quando não é atribuído um TARGET, as links abrem por defeito na própria frame onde existem. IFRAME - Iframes são quadros que podem ser adicionados ao conteúdo de uma página HTML, exibindo o conteúdo de outra página. O código do iframe é bem simples e possui alguns atributos que já conhecemos em outras TAGs, como o IMG. <iframe width='largura' height='altura' frameborder='0' src=' </iframe> Os atributos do IFRAME (nem todos foram utilizados no nosso código por serem opcionais): src = pagina.html - Determina a página ou arquivo que será carregado na região correspondente. width=x - Especifica o largura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo: 100px height=x - Especifica o altura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo 200px. frameborder=x - Determina a espessura da linha divisória que aparece entre a página e o IFRAME. Sendo que x é o valor da linha em pixels. O valor Zero especifica um iframe sem borda. scrolling = valor - Determina se aparecerá barra de rolagem. Os valores podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de rolagem só aparecerá quando o conteúdo da página ultrapassar o tamanho do frameset). marginwidth = x - Determina a largura em pixels da margem horizontal. marginheight = x - Determina a largura em pixels da margem vertical. vspace=x - Determina o espaço vertical entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels. hspace=x - Determina o espaço horizontal entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels. Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 23