Desenvolvimento de Aplicações WEB 1 HTML

Transcrição

1 Desenvolvimento de Aplicações WEB 1 HTML INTRODUÇÃO Nesta primeira parte da apostila falaremos sobre a linguagem HTML. Podemos dizer que o HTML é a linguagem mãe. É importante aprendermos o HTML, para poder trabalhar com outras linguagens. O HTML é responsável pela parte pesada do site. Hoje, existe o XHTML, que veio para substituir o HTML.Você deve se perguntar, por que então eu vou aprender HTML em vez de aprender logo XHTML? É importante que você aprenda o básico primeiro, a linguagem XHTML não é tão diferente do HTML, mas é melhor que você conheça o HTML primeiro que tudo vai ficar mais fácil depois para aprender o XHTML, que é praticamente o HTML modificado, com maneiras diferentes de fechar as tags etc. Então, aprenda primeiro pelo HTML e depois faça a comparação e veja as diferenças. Será muito mais fácil entender o XHTML depois de ter visto o HTML. Dois termos importantes: - Client Side: É uma expressão em inglês que traduzida significa Lado Cliente. O Client side é usado para designar uma aplicação (site, software, plugin, etc) que é executada no computador do usuário e não no servidor que hospeda a aplicação. Exemplos de algumas tecnologias que são executadas no cliente: HTML; CSS; Javascript; Flash; ActiveX. - Server Side: É uma expressão em inglês que traduzida significa Lado Servidor. O Server Side é usado para designar que uma aplicação roda no servidor e não no computador do usuário. Exemplos de aplicações que são executadas no servidor: Bancos de dados: SQL Server, MySQL, Oracle, etc; ASP / ASP.NET; PHP; JSP; 1

2 1 HTML HTML não é uma linguagem de programação e sim uma linguagem de marcação de textos (Hyper Text Markup Language) que é usada na construção de página para a web. A estrutura do HTML é baseada em tags (marcações). O que são tags em HTML? Tags são marcações e são usadas para trabalhar com os diversos conteúdos, como textos, imagens, links, entre outros. <p>a tag p é usada para criar parágrafos de textos </p> <img src= foto.jpg /> <a href = > Colégio Técnico Opção </a> Nos exemplos acima usamos a tag <p> </p> para criar um parágrafo, <img> para inserir uma imagem e <a> </a> para criar um link. HTML é uma linguagem de programação? Não. HTML não é uma linguagem de programação e sim uma linguagem de marcação de textos. Qual a diferença entre HTML e XHTML? O XHTML é uma nova versão do HTML, ele é resultado da mistura entre HTML e XML. Basicamente ele contém as tags do HTML e as regras do XML. Quais os pré-requisitos para aprender HTML? Basta ter navegado na internet e ter usado algum editor de texto. Para um conhecimento mais aprofundado seria interessante conhecer um pouco de conjunto de caracteres, padrões de internet e funcionamento dos navegadores. Quais são os melhores editores para HTML? Dreamweaver, Expression web e Visual Web Developer para quem gosta de usar um ambiente visual. Bloco de notas e editores de texto puro para aqueles que gostam de trabalhar com código puro. Todos os sites usam HTML? Sim. O HTML é base para qualquer site. Posso criar um site usando apenas HTML? Pode, mas não deve. O HTML é responsável pela estruturação da página, isto é, as tags e o conteúdo. O aspecto visual da página é feito em CSS, logo se você usar apenas HTML seu site funcionará, mas ficará com um layout não muito agradável e não estará seguindo as regras atuais de desenvolvimento de sites. Quais as versões do HTML? Existem diversas versões do HTML. Atualmente as mais usadas são a 4.01 e o XHTML 1.0. Quem padroniza e controla as versões do HTML? É um órgão chamado W3C ( Este órgão é formado por algumas universidades (MIT nos EUA, ERCIM na França e Keio no Japão) e empresas privadas, sendo a maioria delas de tecnologia. O que o HTML tem a ver com os navegadores? Tudo. O HTML é executado no navegador. Quando você acessa um site qualquer é o seu navegador que vai buscar o HTML para exibi-lo. Alguns recursos podem não funcionar corretamente em determinados navegadores. 1.1 Estrutura básica de um documento HTML 2

3 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. Exemplo <html> é a tag de abertura do 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 html Informações adicionais contidas no cabeçalho: Head As META TAGS são usadas para colocar informações adicionais em páginas WEB para uso por parte dos indexadores de paginas (Ex: Google, Yahoo, Altavista, etc). Estas informações podem ser sobre o autor, o conteúdo, ou como indexar e seguir os links. As META TAGS devem ser colocadas no cabeçalho entre o <HEAD> e o </HEAD>. <html> <head> <meta name="robots" content="follow,index"> <meta name="description" content="esta pagina é um exemplo de Site."> <title> Minha Página </title> </head> </html> Aqui vamos dar alguns exemplos de META TAGS para uso na criação de páginas. Substitua os textos entre aspas, após a palavra CONTENT, conforme o caso. INDEXAÇÃO: <meta name="robots" content="[no]index, [NO]FOLLOW"> A intenção desta tag é informar ao robô de indexação se a página pode ou não ser indexada e se pode ou não seguir os links nela contidas. DESCRIÇÃO: <meta name="description" content="bob's personal page"> A intenção desta tag é para que o serviço de indexação possa fornecer ao solicitante uma breve descrição da pagina (ao invés das primeiras linhas da página). AUTOR: <meta name="author" content="robert Rice Brandt"> Indicação do autor da página. PALAVRAS CHAVE: <meta name="keywords" content="professor, Engenharia Eletrica"> Indicação de palavras chave da página. NÃO FAZER CACHE: <meta http-equiv="pragma" content="no-cache"> Indicação de não colocar no cache do browser, ou seja sempre vai buscar nova página. 3

4 FAZER REFRESH AUTOMATICO: <meta http-equiv="refresh" content="10"> Indicação para fazer refresh da pagina a cada 10 segundos. FAZER REDIRECIONAMENTO AUTOMATICO: <meta http-equiv="refresh" content="3;url= Indicação para ficar 3 segundos na pagina atual, depois redirecionar para a pagina indicada Informações adicionais contidas no cabeçalho: Body Cores e padrões de Fundo Algumas propriedades da TAG <Body> </Body> bgcolor=" #FFFFFF Define a cor de fundo da página HTML (fundo branco); background="fundo.jpg" Define uma figura como fundo da página HTML; text="#cc0000" Define a cor do texto que aparecerá na página HTML (letras vermelho); 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); marginwidth="2" Define a largura da margem da página; marginheight="2" Define a altura da margem da página; leftmargin="2" - Define a distância da margem esquerda da página; rightmargin="2" - Define a distância da margem direita da página; topmargin="2" - Define a distância da margem superior da página; bottommargin="2" - Define a distância da margem inferior da página; <body bgcolor="#ffffff" text="#cc0000" link="#0033cc" vlink="#ffff00" alink="#00cc00" background="fundo.jpg" marginwidth="2" marginheight="2" leftmargin="1" topmargin="2" rightmargin="3" bottommargin="4"> 1.2 Parágrafos e Quebras de Linha Tag <P> 4

5 Para forçar o inicio de 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>. <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. <p align= center > Aqui vai a primeira linha centralizada!</p> <p align= right > Aqui vai a segunda linha alinhada à direita</p> Tag <BR> 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 <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> Tag <HR> O comando <HR> tem a função de inserir uma linha divisória na posição que foi especificado. Serve p/ separar assuntos ou tópicos distintos. <HTML> <head> <title> Exemplo com HR </title> </head> Texto mostrado na primeira linha <HR> Texto mostrado na Segunda linha. </HTML> Aplicando Estilos de Texto 5

6 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 Exemplo <HTML> <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> </HTML> Cabeçalhos Outra forma muito usada para mudar o tamanho da letra e aplicar um efeito como negrito em um texto é o uso dos comandos <H>. O HTML possui seis comandos, de <H1> até <H6>, que aplicam um tamanho de fonte diferenciado para o texto que envolver. Exemplo : <H1> Texto </H1> maior <H2> Texto </H2> <H3> Texto </H3> <H4> Texto </H4> <H5> Texto </H5> <H6> Texto </H6> menor A Tag <H> 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 6

7 <HTML> <head> <title> Exemplo aplicando estilos de Textos </title> </head> </HTML> <h1> Aqui... Cabeçalho H1 </h1> <h2> E aqui o meu cabeçalho H2 </h2> Exibição de Textos Pré-formatados Através do comando <PRE> </PRE> você pode incluir um texto que foi editado por outro editor de texto e preservar sua formatação original, como as marcas de tabulação, fim de linha gerado pela tecla Enter e etc. <PRE> Texto da linha 1 Texto da linha 2... Texto na linha 3 </PRE> Alinhamento do conteúdo Como padrão, os textos inseridos são alinhados pela margem esquerda. Para centralizar um cabeçalho, parágrafo, imagem, tabela e etc, deve ser usado o comando <CENTER> </CENTER>. <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 > Alinhando o Texto com o comando <DIV> Introduzido na versão 3 da linguagem HTML, o comando <DIV> </DIV> envolve uma área do texto oi DIVsão que pode receber parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o texto. <DIV ALIGN= center > </DIV> - conteúdo centralizado <DIV ALIGN= left > </DIV> - conteúdo alinhado à esquerda <DIV ALIGN= right > </DIV> - conteúdo alinhado à direita <DIV ALIGN= justify > </DIV> - conteúdo justificado 7

8 <DIV align= center > <H1> Texto utiliando a TAG DIV </H1> Todo o texto dentro destas TAGS aparecerá centralizado! </DIV> Tamanho da fonte, cor e tipo <FONT> </FONT> permite alterar as propriedades de tamanho, cor e tipo de fonte do texto exibido. <font size= n face= Nome_da_fonte color= Cor_da_fonte > Texto </font> Parâmetros: Size - especifica o tamano da Fonte Face - especifica o nome da fonte. Podem ser especificadas várias fontes, de maneira que se o sistema não possuir a primeira opção, a segunda é carregada e assim por diante. Color especifica a cor do texto, pode ser em hexadecimal ou pelo nome predefinido de cores. <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> 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 ou JPG. A tag IMG insere uma imagem no documento. <IMG SRC= foto.jpg > Parâmetros: SRC = URL - é o nome da figura, se estiver no mesmo diretório do programa ou o seu caminho completo (URL). 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 MIDDLE BOTTOM LEFT RIGHT CENTER Define o alinhamento da imagem no documento. BORDER = numero Especifica em pixels a largura da borda da imagem. O remove a borda 8

9 WIDTH = numero ou % 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. Exemplo <HTML> <head> <title> Exemplo com Imgem </title> </head> </HTML> <h1> Insere uma imagem </h1> <img src= foto.jpg border= 0 alt= Texto sobre a Foto > Criando Links 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. 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. <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 <HTML> <head> <title> Exemplo de link </title> </head> 9

10 </HTML> <h1> Insere um Link </h1> <a href= > Ir para o Site do Google </a> Criando uma Âncora: Para interligar partes de uma página, você precisa criar uma âncora no inicio de casa seção que será referida por um link. Uma âncora é um ponto de referência que será acessado por um link. Uma âncora é usada dentro de um documento para marcar o inicio de uma seção do documento. Essa âncora recebe um nome que será mencionado pelo link que a acessará. <!-- Criei um ponto de referência chamado Ancora_1. --> <A NAME= Ancora_1 > </A> Criando um link para Âncora Para criar um link para uma âncora, você deve usar o comando <A HREF> especificando o nome da âncora que deseja acessar. <A HREF= index.htm#âncora_1 > Clique para acessar o Ponto que possui a Âncora 1 </a> O símbolo # avisa o browser para procurar o link no documento atual. <html> <head> <title> Exemplo de Âncora </title> </head> <p align="center"> Informações sobre a Grécia </p> <hr> <p align="left"> <A HREF="#Geo"> **** Geografia **** </a> <A HREF="#Historia"> **** História **** </a> <A HREF="#Fotos"> **** Fotos **** </a> </p> <hr> <A Name="Geo"></A> <center> <H1>Geografia </H1> </center> <p> Aqui vai o texto contendo informações da geográfica Grega! </p> <hr> <a Name="Historia"></A> 10

11 <center> <H1>História da Grécia</H1> </center> <p> Aqui vai o texto contendo informações da história Grega! </p> <htr> <hr> <A Name="Fotos"></A> <center> <H1>Fotos da Grécia</H1> </center> <p> Aqui vai ser colocado Fotos da Grécia! </p> <hr> </html> Listas Uma outra forma de estruturar um documento HTML é utilizando 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 usa-se as TAGS <UL> </UL> para listas não ordenadas e <OL> </OL> para listas ordenadas 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> (Line Item). <UL> <LI> Texto do Item um. </LI> <LI> Texto do Item dois. </LI> </UL> 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> (Line Item). <OL> <li> Texto do Item um. </li> <li> Texto do Item dois. </li> </OL> Aninhando listas não ordenadas 11

12 É possível adicionar listas não ordenadas, dentro de listas não ordenadas, criando assim sub-listas. Veja o exemplo. <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <ul> <li>este é o primeiro item da lista principal <li>este é o segundo item da lista principal <ul> <li>este é o primeiro item da SUB-LISTA principal <li>este é o segundo item da SUB-LISTA principal </ul> <li>aqui termina a Lista principal</li> </ul> </html> Você pode combinar também, listas não ordenadas com listas ordenadas e vice-versa. 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 <li>este é o segundo item da lista principal <ol> <li>este é o primeiro item da SUB-LISTA principal <li>este é o segundo item da SUB-LISTA principal </ol> <li>aqui termina a Lista principal</li> </ul> </html> Exemplo2: Lista Ordenada e uma sub-lista Não Ordenada. <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <OL> <li>este é o primeiro item da lista principal <li>este é o segundo item da lista principal <Ul> <li>este é o primeiro item da SUB-LISTA principal <li>este é o segundo item da SUB-LISTA principal </Ul> <li>aqui termina a Lista principal</li> </OL> </html> 12

13 Alterando numeração e marcadores 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 opção Type= do comando <UL> permite que sejam especificadas variações para o marcador utilizado na lista. Os valores possíveis de se atribuir ao TYPE são: SQUARE : marcador quadrado; CIRCLE: marcador como um círculo sem preenchimento (vazio); DISC: marcador como um círculo com preenchimento. <ul type="circle"> <li>primeiro item da Lista</li> <li>segundo item da Lista</li> <li>terceiro item da Lista</li> </ul> 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 = 1 - Cria uma lista numérica normal (é o padrão e não precisa ser especificado) Type = A - Cria uma lista alfabética com letras maiúsculas começando pelo A. Type = a - Cria uma lista alfabética com letras minúsculas começando pelo a. Type = I - Cria uma lista numérica com números romanos maiúsculas começando pelo I. Type = i - Cria uma lista numérica com números romanos minúsculas começando pelo i. O START permite mudar o número inicial. START = 10 - inicia no numero 10. <OL Type=1 Start=10> <li> Item que começa no numero 10 </li> <li> Item 11 da lista </li> </OL> 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. Uma tabela é criada pelas TAGS <Table> </Table> e consiste em 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>. As colunas de uma tabela são criadas pelo comando <TD> </TD>. 13

14 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 percentagem 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. <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> <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 daquela 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 ou.jpg > </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 = numero Indica o numero de colunas que esta célula deverá ocupar. ROWSPAN= Numero - Indica o numero de linhas que esta célula deverá ocupar. 14

15 WIDTH = numero numero% Especifica a largura da coluna em pixels ou em porcentagem relativa à largura da janela. HEIGHT = numero numero% Especifica a altura da coluna em pixels ou em porcentagem relativa à largura da janela. BGCOLOR = cor Especifica a cor de fundo da célula. 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. <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> Agora a mesma tabela com 2 colunas unidas pelo comando COLSPAN. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align= center >Linha 1 - Coluna e 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> Agora um exemplo com o comando ROWSPAN <table width="100%" border="0" cellspacing="0" cellpadding="0"> 15

16 <tr> <td rowspan="2">linha 1 e Linha 2 - 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 2</td> <td>linha 2 - Coluna 3</td> <td>linha 2 - Coluna 4</td> </tr> </table> Formulários 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. 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. O método GET faz com que o conteúdo do formulário seja anexado ao endereço da URL. Exemplos: Usando o metodo POST, mais recomendado. <form method= POST action= ou usando o método GET 16

17 <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, que como já foi dito 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 elemento, em caracteres; Exemplo <input type="text" name="valor_1" value="" size="" maxlength=""> Campo para Senha - campo de texto com máscara 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 no elemento, em caracteres; <input type="password" name="senha" value="" size="8" maxlength="8"> Checkbox Utilizado para campos de múltipla escolha, onde o usuário pode marcar mais de uma opção. Parâmetros: 17

18 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; <input type="checkbox" name="nome_checkbox" value="valor" checked> Radio Button 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 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; <input type="radio" name="sexo" value="m" checked> Masculino <input type="radio" name="sexo" value="f"> Feminino Submit Button 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. <input type="submit" name="botao1" value="enviar Dados"> Reset Button 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: 18

19 Name nome do botão. Value - o texto que aparecerá no corpo do botão. Exemplo <input type="reset" name="botao2" value="limpar"> Button 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. <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>. <textarea cols="" rows="" name="" wrap="">texto</textarea> Select 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". 19

20 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; 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> <select name="sexo" size="1" > <option value="m">masculino </option> <option value="f">feminino </option> </select> Upload de arquivos Exibe na tela do browser um campo de texto e um botão, que ao clicado abre uma janela para localizar um arquivo no disco. Para utilizar este tipo de componente, o formulário deverá utilizar o método "POST" e ter o parâmetro "enctype" com o valor "multipart/form-data". Parâmetros: Size - O tamanho do campo de texto exibido. <input type="file" name="" size=""> Hidden Essa TAG serve para colocar informações escondidas do usuário (isto é: o usuário não vê tais TAGs). São utilizadas para diversas funções num FORM, tais como colocar um valor fixo que deseja enviar junto com as demais informações que o usuário preencher no formulário. Exemplo <INPUT TYPE="hidden" NAME="subject" VALUE="MEU PRIMEIRO FORM"> Exemplo completo com todas as tags de formulário <html> <head> <title>exemplo de formulário</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <form name="formulario" method="post" action="./recebe_dados.php"> Exemplos de Objetos de Formulario: 20

21 Digite seu Nome: <input name="nome" type="text" size="40" maxlength="50"> Digite sua Senha: <input name="senha" type="password" size="15" maxlength="15"> Exemplo de TextArea: <textarea name="text_area" cols="45" rows="5"></textarea> Exemplo de Combo Box: Sexo : <select name="sexo"> <option value="m" selected>masculino</option> <option value="f">feminino</option> </select> Ano Nascimento : <select name="ano" id="ano"> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000" selected>2000</option> </select> <input type="checkbox" name="checado" value="sim"> Exemplo de Check Box <input type="checkbox" name="checado2" value="sim"> Outro Exemplo de Check Box <input name="radio" type="radio" value="sim" checked> Exemplo de Botao de Radio (valor Sim) <input type="radio" name="radio" value="nao"> Exemplo de Botao de Radio (valor Nao) <input type="hidden" name="campo_oculto" value="valor oculto"> <input type="submit" name="submit" value="enviar os Dados"> <input type="reset" name="submit" value="limpar os Campos"> </form> </html> Frames O uso de frames permite que diferentes arquivos HTML componham a mesma página, permitindo dividir o espaço da janela do navegador em colunas e/ou linhas e controlar o seu tamanho, determinando quantas 21

22 serão as subdivisões e qual será sua distribuição na tela. É importante ressaltar que cada uma destas "partes da tela" é ocupada por arquivos diferentes, totalmente independentes. Portanto, o uso dos frames possibilita apresentar mais de uma página em cada tela. Por exemplo, um índice em uma parte pequena dela e os textos relacionados ao índice em outra parte. <html> <head> <title>página com Frame</title> </head> <frameset cols = 40,*> <frame src = esquerda.htm> <frame src = direita.htm name = direita> </frameset> </html> Criando frames <frameset> Esta tag, seguida de um argumento é a que define o frame da página. <frameset cols> O argumento cols indica que a divisão deve ser vertical, em colunas. <frameset rows> O argumento rows indica que a divisão deve ser horizontal, em linhas. <frameset cols = 40,*> O valor após o sinal de igual, define a largura da coluna (cols = 40), ou da linha (rows = 40). O valor especificado (40) indica a largura do primeiro frame, enquanto o asterisco (*) indica que o segundo frame terá a largura igual ao espaço que estiver sobrando na tela. Para dividir a página em dois frames do mesmo tamanho, basta utilizar dois asteriscos Definindo o conteúdo dos frames Para definir o conteúdo da cada divisão, usa-se a tag <frame>. Enquanto a tag <frameset> define as divisões da página, a tag <frame> indica o que será carregado em cada uma dessas divisões. O número de tags <frame> deve equivaler-se ao número de tags <frameset>, pois se dividirmos nossa página em 2 frames, deveremos então carregar 2 páginas, uma em cada frame. Para utilizar a tag <frame>, você deve indicar a página que deseja carregar, usando o argumento src (source), que indica o nome do documento html Definindo o frame da esquerda No exemplo a seguir, uma página chamada esquerda.htm será carregada no primeiro frame da página principal (frame da esquerda): 22

23 <frame src = esquerda.htm> Definindo o frame da direita No segundo frame (frame da direita), uma página chamada direita.htm é que será carregada: <frame src="direita.htm" name="direita"> Apelidando os frames Note que este exemplo possui mais argumento que o primeiro. A expressão name é um recurso para nomear o frame (nomear, apelidar), facilitando a identificação do frame. Caso você tivesse uma página com 4 frames, poderia apelidá-los de frame da "esquerda", "direita", "acima", "abaixo" Carregando as páginas nos frames Para indicar ao browser em qual frame você deseja carregar uma página, utilize no link correspondente a expressão target (alvo). Suponhamos que você deseje colocar um link no frame esquerdo, que, ao ser clicado, carregue uma página no frame direito. Para fazer isto coloque na página esquerda.htm a sintaxe a seguir: <a href="direita.htm" target=direita>direita</a> Carregando as páginas em uma nova janela Se desejar carregar uma página em uma nova janela, ao invés de carregá-la no frame, use a expressão _blank, no lugar do nome do frame. <a href="direita.htm" target="_blank">direita</a> Carregando a página na tela inteira do browser Se desejar carregar uma página na tela inteira do browser, e não mais em um dos frames, use a palavra _top no argumento target como no exemplo a seguir: <a href="direita.htm" target="_top">direita</a> 23

24 Carregando a página no frame pai Use esta tag para carregar a página no "frame-pai" do frame que contém o link. A página será carregada sem apresentar divisões. <a href="direita.htm" target="_parent">direita</a> Carregando a página no mesmo frame que contém o link Use esta tag para carregar a página no mesmo frame que contém o link. <a href="direita.htm" target="_self">direita</a> Ocultando a barra de rolagem Os frames são divididos por uma barra de rolagem entre eles, porém esta barra pode ficar oculta usandose a tag <scrolling="no"> Para exibí-la use <scrolling="yes"> Impedir o redimensionamento do frame Para impedir que um frame seja redimensionado use a tag <noresize> Browser que não reconhecem frames Existem navegadores que não reconhecem frames, por isso, você deve colocar uma mensagem para o usuário, usando a tag <noframes></noframes> <noframes> Esta página usa frames, mas seu navegador não suporta este recurso. </noframes> Exemplo completo de uma página com frames <html> <head> <title>página com Frame</title> </head> <frameset rows="64,*"> <frame name="acima" scrolling="no" noresize target="esquerda" src="pagina1.htm"> <frameset cols="150,*"> <frame name="esquerda" target="direita" src="pagina2.htm"> <frame name="direita" src="pagina3.htm"> </frameset> <noframes> <p> Esta página usa frames, mas seu navegador não suporta este recurso.</p> </noframes> </html> 24

25 Introdução ao XHTML XHTML é uma reformulação da linguagem HTML baseada na XML. Em termos de sintaxe, a XHTML não é tão tolerante como a HTML, pois utiliza as rígidas regras de marcação da XML O que é o DOC TYPE? O Doctype (Document Type Definition) é a primeira coisa que se deve escrever em um arquivo XHTML, ele vai na primeira linha do seu documento, se você quiser ter um XML válido, não devemos esquecê-lo, ele serve para informar ao browser que tipo de documento será visualizado. Existem 3 tipos: Strict: Este tipo é usado quando você fez um código 100% XHTML e deve ser escrito assim: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > Transitional: Este é o modo mais usado, você o usa quando está começando a migrar do nosso amigo HTML para o poderoso XHTML, sua sintaxe é: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN > Frameset: É usado quando você está utilizando FRAMES em seu site, se escreve assim: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN > Veja o exemplo abaixo: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html> <head> <title></title> </head> </html> Feche TODAS as tags Quem já escreveu algum XML sabe que ele não funciona até que TODAS as tags estiverem bem fechadas, no HTML era diferente, muitas vezes deixávamos tags abertas, e ele funcionava que era uma beleza. Dicas Para se fazer um XHTML válido, devemos fechar TODAS as tags. 25

26 Não podemos esquecer de fechar as tags que já conhecemos. <p></p>, <b></b>, etc. E não devemos esquecer de forma alguma de fechar as tags solitárias, assim, ao invés de escrevemos </br>, ou na forma simplificada: <br />. Descobriram que fechando tags desta forma <br/>, não se sabe porque estava causando um problema no Netscape, mas apenas colocando um espaço antes da / o problema é solucionado. Não esqueça das ASPAS Esta regra é bem simples. Todos os atributos XHTML devem conter as ASPAS. Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minúscula! Use letras minúsculas Quem nunca viu um código fonte de um documento HTML escrito assim: <A href= TARGET= _BLANK > </A> Atributo NAME O antigo atributo NAME foi substituído pelo atributo ID. Se seus usuários, clientes, etc, utilizam ainda antigos browsers, você pode sem problema nenhum utilizar as duas formas juntas durante neste período em que estamos migrando: <img src= imagem.gif id= imagem name= imagem /> Atributos sem valor Não devemos esquecer também os atributos que escrevemos sem valor, por exemplo: ERRADO: <option selected> <frame noresize> <input checked> <input readonly> CERTO: <option selected= selected > <frame noresize= noresize > <input checked= checked > <input readonly= readonly > Quer mais uma dica? Se você estiver migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha. O TIDY é uma ferramenta para validar e consertar códigos HTML. Permite escolher qual a versão do HTML você quer validar e uma dessas opções é a XHTML. Se você já está escrevendo um XHTML e quer que seu código fique livre de todos os erros, o TIDY arruma para você. 26