UNIFEI Disciplina Professor Universidade Federal de Itajubá Instituto de Engenharia de Sistemas e Tecnologias da Informação-IESTI PCO203 Tópicos Especiais em Programação Enzo Seraphim Notas de Aula sobre html 1 HyperText Markup Language (html) html é uma linguagem de formatação de textos utilizada para definir páginas na Web, baseada em códigos embutidos em um documento que pode servir para ajustar fontes, criar listas, mostrar imagens, entre outros tipos de formatações de páginas. A linguagem html está fundamentada na ISO Standard Generalized Markup Language (ou SGML como é conhecida), que é um padrão internacional de formatação de documentos. Como um subconjunto deste padrão ISO, qualquer aplicação que possa interpretar o formato SGML poderá também ler o formato html. Como o próprio nome diz, a html é uma linguagem de marcação hipertexto, e é considerada a "linguagem da Web". Todos os documentos que você acessar na Web foram implementados em html por alguém. As formatações de páginas, as imagens coloridas, os "hyperlinks" que possibilitam "navegar" pelo mundo virtual, foram desenvolvidos utilizando html. A linguagem html é fácil de aprender e requer na verdade muita criatividade. Basicamente, os documentos escritos em html são arquivos no formato ASCII-texto. Assim, podem ser criados com a utilização de qualquer editor de texto que grave os arquivos em formato texto "puro". A html é uma linguagem interpretada. O interpretador é o browser do usuário ou o "sistema cliente". html é uma linguagem simples, porém poderosa e com muitos recursos. Um fator importante para o seu aprendizado é compreender seus conceitos, seus propósitos, e o que ela pode nos oferecer. Daí em diante, nossa criatividade é constantemente colocada à prova. Algumas das principais características da html são : formatação de documentos Organização de listas Capacidade de incluir hipertexto/hipermídia em documentos Web Capacidade de incluir imagens clicáveis. Freqüentemente você vai deparar com muitas outras características de implementações html na Web, mas certamente todas serão fáceis de assimilar se você antes de tudo compreender a "filosofia" da linguagem. A html faz uso de "tags" e elementos que proporcionam uma maneira de especificar qual formato utilizar e quando um formato começa e termina. Para isso, utiliza marcações específicas e distintas para dizer ao browser do usuário como exibir um documento. A linguagem html não diferencia entre letras maiúsculas e minúsculas, ou seja, não é "case sensitive". A sintaxe básica para estas marcações html é: <elemento> Texto a ser formatado </elemento> A a estrutura básica de um documento html deve conter : <html> <head> <title>título</title> </head> <body> corpo_do_conteúdo </body> </html> Onde<html> </html> define uma identificação do tipo html; <head> </head> define uma seção de cabeçalho; <title>título</title> define o título do documento dentro da seção de cabeçalho; <body>corpo_do_conteúdo</body> define uma área como corpo do documento. Os elementos de formatação representam o "coração" da linguagem html. Os códigos de formatação do documento podem ser divididos em dois grupos básicos : propriedades do documento que descrevem características gerais sobre o documento como um todo como por exermplo o título. Os seguintes parâmetros aparecem dentro do cabeçalho de um documento para identificar sua utilização por um sistema cliente propriedades de formatação que especificam o "layout" do texto e as imagens dentro do documento. A seção body é que contém as informações sobre seus conteúdos, visto que existem vários elementos para manipular um documento a fim de formatar textos, imagens, listas e outros objetos. O elemento body é utilizado para indicar o início e o final do conteúdo de um documento.
2 Cabeçalhos, Parágrafos e Linhas 2.1 Cabeçalhos Os cabeçalhos geralmente são utilizados para títulos e sub-títulos em uma página Web. Na linguagem html, você pode utilizar até seis níveis de cabeçalhos. Tipicamente estes cabeçalhos mostrarão diferentes tamanhos de texto e formatos, dependendo destes níveis. Portanto, a notação relativa a cabeçalhos é: <h n >Texto do cabeçalho </h n > Onde "n" é um número entre 1 e 6. O elemento <hn> não define o tamanho da letra em um cabeçalho O tamanho exato com que ele será visualizado é definido pelo browser de cada usuário. 2.2 Parágrafos A marcação de parágrafo é utilizada para definir o início de um novo parágrafo. Entre dois parágrafos é deixado uma linha em branco. Portanto, este tipo de marcador é utilizado para separar a informação entre blocos lógicos de texto. A linguagem html não reconhece o caracter de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada. Assim, a notação relativa a esta marcação é dada por : <p> Texto correspondente a este parágrafo... </p> Embora esta marcação não exija o terminador </p>, é interessante colocá-lo pois existe uma tendência de que novas normas da linguagem html venham a incluí-lo. 2.3 Quebras de linha A marcação <br /> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Assim como os marcadores de parágrafo, o marcador de quebra de linha indica que o texto seguinte ao marcador deve iniciar na próxima linha. A diferença entre os dois marcadores está justamente no espacejamento entre as linhas. 2.4 Linha de separação Horizontal A marcação <hr> produz uma linha de separação horizontal. 2.5 Exemplo inicial Agora que já vimos a estrutura básica de um documento html e alguns comandos simples de formatação, já podemos fazer nossa primeira página. <html> <head> <title>primeira Página Web</title> </head> <body> <h1>primeiro Nível </h1> <h2>segundo Nível </h2> <h3>terceiro Nível </h3> <h4>quarto Nível </h4> <h5>quinto Nível </h5> <h6>sexto Nível </h6> <p>primeiro Paragrafo</p> <br /> Observe que as linhas e espaços em branco não aparecem <p>segundo Paragrafo</p> </body> </html>
3 Alinhamento, Margem e Caracteres Com os tags básicos do primeiro exemplo já é possível criar páginas Web para colocar à disposição dos usuários. O exemplo mostrado há pouco é completo e, se colocado em um servidor Web, pode ser identificado com sua própria URL e acessado de qualquer lugar do mundo. Porém, o primeiro exemplo deixa muito a desejar em apelo visual. Vamos melhorar a aparência deste documento. 3.1 Alinhamento A primeira providência para melhorar a aparência da página é modificar o alinhamento do texto. O alinhamento padrão (com o qual vêm configurados os navegadores) é à esquerda. Para mudar o alinhamento padrão deve-se adicionar o atributo align dentro dos tags que marcam os títulos e os parágrafos. <h1 align="center">título</h1> <p align="center">este é um parágrafo centralizado.</p> Desta vez, o tag <p> ganhou uma opção (align="center"). Por isso, é preciso utilizar um tag de fechamento (</p>) para indicar que apenas aquele parágrafo receberá um alinhamento diferente. 3.2 Margem Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente em cada navegador). Às vezes, será necessário aumentar essa margem e fazer com que o texto comece mais para dentro da página. O par de tags <blockquote> e </blockquote> serve para aumentar a margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos: <blockquote>texto com mais margem</blockquote> <blockquote><blockquote>texto com mais margem ainda </blockquote></blockquote> 3.3 Caracteres 3.3.1 Estilos de caracteres Para dar ênfase em determinados trechos de texto, pode-se usar negrito, itálico ou mesmo a fonte monoespaçada citada há pouco. <b>texto em negrito</b><p> <i>texto em itálico</i><p> <tt>texto monoespaçado</tt><p> O tag <tt> ignora espaços em branco adicionais e entradas de parágrafo no meio do texto. Em relação ao espaçamento, o tag <tt> funciona exatamente como texto normal. Os tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos: <b><i>texto em negrito e itálico</i></b><p> <b><tt>texto monoespaçado em negrito</tt></b><p> <i><tt>texto monoespaçado em itálico</tt></i><p> <b><tt><i>texto monoespaçado em negrito e itálico</i></tt></b> 3.3.2 Tamanhos de caracteres Alguns navegadores aceitam a modificação do tamanho do texto através do atributo size do tag <font>. <font size="7">texto</font> O tag <font> pode ser atribuído a qualquer parte do texto, com exceção dos títulos (<h1>, <h2> etc.). Os valores do atributo size variam de 1 a 7, O tamanho normal do texto nos navegadores é equivalente a size="3". Não existe nenhuma relação entre os valores no atributo size e o número de pontos (a unidade utilizada para medir os caracteres). Portanto o melhor é experimentar todos os tamanhos e avaliar o resultado.
<font size="7">texto com font size=7</font><p> <font size="6">texto com font size=6</font><p> <font size="5">texto com font size=5</font><p> <font size="4">texto com font size=4</font><p> <font size="3">texto com font size=3</font><p> <font size="2">texto com font size=2</font><p> <font size="1">texto com font size=1</font> O tag <font> também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo. <font size="7">t</font><font size="4">exto</font> Também é possível modificar o tamanho de todo o texto de uma vez só colocando o tag <basefont> no topo do texto. <basefont size=5> 3.3.3 Cores diferentes Alguns navegadores também aceitam modificar a cor padrão do texto e do fundo da janela do documento. Essa definição é feita em atributos do tag <body>. Os atributos são bgcolor e text. <body bgcolor="ffffff" text="000000"> <body bgcolor="white" text="black"> O exemplo acima produz uma página com fundo branco e texto na cor preta. Os valores dos atributos são definidos em uma tabela de cores no padrão RGB ou pelo nome da cor. Pode-se definir ainda a cor de determinados trechos de texto, com o atributo color no tag <font>. <font color="ffffff">texto na cor branca</font> <font color="white">texto na cor branca</font> Dessa forma, é possível ter texto de várias cores na mesma página. <font color="white">texto em branco</font>, <font color="blue">azul</font>, <font color="green">verde</font> e <font color="red">vermelho</font> 3.3.4 Mudando o tipo de caractere O autor de uma página Web pode definir qual será o tipo de determinada parte do texto, mas o usuário precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial. <font face="arial"><h1>título principal</h1>
4 Listas A utilização de listas será de grande importância para a criação de suas páginas Web. A linguagem html suporta vários formatos diferentes de listas. Os tipos de listas que iremos ver aqui são : listas ordenadas, listas não ordenadas, listas de definições, e listas encadeadas. 4.1 Listas Ordenadas Uma lista ordenada, também conhecida como lista numerada, utiliza marcação <ol> (Ordered List). Os itens da lista são identificados utilizando-se a notação <li> e são automaticamente numerados. Portanto, a sintaxe é a seguinte : <ol> <li>primeiro item da lista</li> <li>segundo item da lista</li> <li>terceiro item da lista</li> </ol> As listas ordenadas são numeradas automaticamente quando interpretadas pelo browsers dos usuários. Qualquer alteração nas listas (inclusão ou exclusão de itens) irá renumerar todos os seus itens. 4.2 Listas Não Ordenadas Uma lista não ordenada, também conhecida como lista não numerada, é semelhante a uma lista ordenada, exceto pela utilização da marcação <ul> (Unordered List) ao invés de <ol>. As listas não ordenadas utilizam algum símbolo gráfico para denotar cada item da lista. A maioria dos browsers utilizam um "bullet". Portanto a sintaxe lembra muito aquela anterior : <ul> <li>primeiro item da lista</li> <li>segundo item da lista</li> <li>terceiro item da lista</li> </ul> 4.3 Listas de Definições Uma lista de definições permite incluir uma descrição de cada item listado. Por isso, alguns autores chamam este tipo de lista de lista de glossário. Uma lista de definição utiliza o marcador <dl>. Normalmente consiste de um termo (através da marcação <dt>) e de uma definição (através da marcação <dd>). Os browsers clientes geralmente formatam a definição em uma nova linha com outro alinhamento. Portanto, a sintaxe geral para este tipo de lista é a seguinte: <dl> <dt>termo 1 <dd>definição do Termo 1 <dt>termo 2 <dd>definição do Termo 2 </dl> As marcações <dt> e <dd> podem conter múltiplos parágrafos (separados pela marcação <p> ), listas, ou outras definições. A marcação <dd> pode também ser utilizada, fora de uma lista de definições como se fosse uma tabulação (insere um espaço no início da frase). 4.4 Listas Encadeadas As listas podem ser sucessivamente encadeadas (ou seja, uma lista dentro de outra lista), embora uma boa prática seja você limitar o encadeamento a três níveis no máximo. Com isto você conseguirá produzir resultados satisfatórios e facilitará a compreensão por parte do leitor da sua página Web. Por exemplo, você poderá ter um parágrafo intercalado com uma lista que contenha um único item. Assim um exemplo genérico para este tipo de lista pode ser mostrada como : <ul> (ou <ol>) <li>primeiro item da lista</li> <li>segundo item da lista</li> <ul> <li>primeiro subitem do segundo item da lista</li>
<li>segundo subitem do segundo item da lista</li> </ul> <li>terceiro item da lista</li> </ul> (ou </ol>) Aqui, para forçar quebra de linha, você não precisará utilizar a marcação <p> por exemplo, pois os comandos <ul> ou <ol> forçam a quebra de linha automaticamente. Também, cada marcação <li> poderá conter vários parágrafos, cada qual contendo uma nova lista encadeada. 5 Hyperlinks Talvez a maior potencialidade da linguagem html seja a sua capacidade de interligar trechos de textos (ou imagens) a outros documentos da rede. Este é o princípio da tecnologia de hipertexto e estas "ligações" são realizadas através dos hyperlinks. No browser do usuário, os hyperlinks aparecem como palavras ou frases destacadas (com cores diferentes ou sublinhadas) indicando uma ligação hipertexto. Os hyperlinks estão baseados na marcação <A>, denominada âncora. A sintaxe para incluir uma âncora em seu documento é: <a href="destino.html">texto que aparecerá destacado</a> <a name="nome_da_âncora" > O parâmetro href (Hypertext REFerence) identificará o endereço URL de destino, portanto define um hyperlink. As declarações válidas para o parâmetro href (ou seja, os valores para o nosso "destino_da_ligação") podem ser : href="nome_da_âncora" href="endereço_url" href="endereço_url#nome_da_âncora" href="endereço_url?string_de_busca" <a href="destino.html">texto que aparecerá destacado</a> O parâmetro name identificará uma âncora de destino, portanto define um lugar marcado no documento. 5.1 Estabelecendo hyperlinks locais O tipo de hyperlink mais simples é aquele que aponta para um determinado documento no mesmo computador, no mesmo diretório de trabalho. Por exemplo, <a href="destino.html">texto que aparecerá destacado</a> No browser do usuário, quando ele clicar em "Texto que aparecerá destacado", o documento "destino.html" será chamado e mostrado em sua tela. 5.2 Estabelecendo hyperlinks a pontos específicos html Você pode querer que o seu hyperlink aponte para um determinado ponto em documento de destino que pode ser local ou remoto. Assim, a linguagem html permite que se façam ligações entre diferentes trechos de um documento. Isto é bastante útil, pois permite que o administrador de um sistema Web deixe disponível documentos grandes com determinados locais indexados, ao invés de vários documentos pequenos. Como vimos anteriormente, há dois comandos que podem fazer parte de uma âncora (href e name). Os índices internamente referenciados são determinados, utilizando o comando name para marcar o ponto de referência. Portanto, os dois passos principais para você utilizar este recurso, seriam : Definir um nome para o ponto de origem precedido pelo caracter #, por exemplo : <a href="#ponto1">preços</a> Neste exemplo, "Preços" apontará para uma referência dentro do próprio documento. Definir um ponto de destino, com o nome correspondente ao ponto de origem: <a name="ponto1">lista de Preços</a> Esta declaração indica o local para onde o usuário será "conduzido" quando clicar em "Preços" definido no primeiro passo. Para estabelecer um hyperlink a pontos específicos em um outro documento, basta incluir no parâmetro href o endereço correspondente. Por exemplo, <a href="subdiretorio1/destino.html#ponto1">preços</a>
5.3 Estabelecendo hyperlinks a documentos remotos Para referenciar um endereço remoto, a Web utiliza-se das URLs (Uniform Resource Locators) para especificar a localização de arquivos em servidores remotos. A URL inclui o tipo de recurso acessado (Telnet, Gopher, etc.), o endereço do servidor, e a localização do arquivo desejado. Portanto, em linhas gerais, um endereço URL completo segue a seguinte especificação : protocolo://servidor[:porta]/caminho/nome_do_arquivo Onde protocolo poderia ser algum destes abaixo especificados : 5.4 Cores dos hyperlinks Tabela 1 Tabela de tipo de Prototolo para URL Protocolo Descrição http:// para acessar um servidor Web ftp:// para acessar um servidor de ftp file:// para acessar o sistema local gopher:// para acessar um servidor Gopher telnet:// para estabelecer uma conexão Telnet news: para acessar Usenet newsgroup mailto: para acessar caixa postal eletrônica Da mesma forma que é possível definir cores diferentes para o fundo e o texto, pode-se mudar a cor dos links. As cores das âncoras de hipertexto variam de acordo com a sua condição: visitados, nunca visitados e ativos. Os navegadores sabem quais foram os hyperlinks já visitados pelo usuário em um determinado período de tempo. Por isso, a cor dos links já visitados deve ser diferente da cor das referências nunca visitadas. Além disso, o link pisca em uma cor ainda diferente dessas duas logo depois que é clicado pelo usuário. A cor dos links é definida no tag <body>. <body link="red" alink="blue" vlink="green"> Onde: link determina a cor dos links não visitados alink determina a cor que os links devem piscar quando clicados vlink determina a cor dos links já visitados Neste exemplo, os links nunca visitados ficam em vermelho, os ativos (quando clicados) em azul, e os visitados em verde. Para não confundir os usuários, a cor dos links já visitados deve ser uma versão mais clara da cor das ligações ainda não visitadas. 5.5 Texto alternativo Pode-se colocar o título ou a melhor descrição possível de uma imagem utilizando o atributo alt: <img src="imagem.gif" alt="nome_da_imagem"> No exemplo acima, o navegador foi ajustado para não carregar a imagem imediatamente ao carregar a página. O texto alternativo aparece junto com o ícone de imagem. 5.6 Margens Pode-se controlar o espaço em volta da imagem colocando o valor em pixels da margem desejada. É possível definir as margens separadamente ou em conjunto. Para mais espaço em cima e embaixo da imagem, o atributo é vspace. Se o problema for espaço dos lados da imagem, usa-se o atributo hspace para definir as margens horizontais. <img src="imagem.gif" vspace="10" hspace="20"> Cada um desses atributos (hspace e vspace) adiciona espaço nas duas faces da imagem (em cima e em baixo e à direita e à esquerda). Não há como definir uma margem maior apenas à esquerda ou somente na parte inferior. 5.7 formatos e interlaceamento Os formatos de imagem mais aceitos pelos navegadores são GIF e JPG. A vantagem do formato GIF é que se pode gravar na opção GIF89 para conseguir que a imagem seja carregada progressivamente, um efeito conhecido como interlaceamento. Com o carregamento progressivo, o usuário tem a impressão da imagem estar sendo carregada mais rápido.
O formato JPG oferece um fator de compressão maior do que o GIF. As imagens ocupam menos espaço em bytes. Mas o processo de compressão do JPG pode causar alguma perda de qualidade à imagem. Como regra geral, o formato JPG deve ser usado em imagens fotográficas e o GIF em imagens criadas em computador ou desenhadas. A compressão do formato GIF se dá ainda melhor com imagens com poucas cores e trechos contínuos de uma cor só. 5.8 Dimensões Se as dimensões da imagem forem colocadas na referência, o usuário terá a impressão de que a página foi carregada mais rápido. Fornecendo as dimensões, o navegador reserva o espaço para a imagem e vai carregando o texto para que o usuário possa começar a ler. Depois de carregado o texto, as imagens começam a ser mostradas. Deve-se escrever a referência de imagem neste formato: <img src="imagem.gif" width="310" height="220"> 6 Imagens Certamente a popularidade da WWW deve-se em grande parte a sua capacidade de exibir imagens gráficas, não somente para proporcionar bonitas apresentações como também para serem utilizadas na "navegação" através das bases de informações. As imagens produzem um grande impacto, enriquecendo o conteúdo visual de sua página. Quando inserindo imagens em páginas Web, você deve ter em mente duas preocupações principais : a diagramação e o tamanho da imagem sendo inserida. Diagramação - é preciso utilizar as imagens com discernimento. A prática do bom estilo de diagramação diz que as imagens não devem jamais distrair a atenção do leitor, para não desviá-lo do conteúdo principal da mensagem que se deseja transmitir. Portanto, devem ser usadas somente para complementar (ou explicar) aquilo que se está transmitindo. Tamanho da imagem - é preciso ter cuidado com o tamanho das imagens que você deseja exibir em sua página Web. Uma imagem GIF de tamanho 640 x 480 pixels com 256 cores, utiliza cerca de 300 Kb (kilobytes). Se o usuário estiver utilizando um modem de 14.400 bauds, esta imagem levaria cerca de 3 minutos para ser transferida. Portanto, na construção de uma página Web, devemos contornar este tipo de problema. Embora na Internet fale-se muito em "altas velocidades", a maioria dos usuários (ligados por exemplo a um provedor de acesso Internet), consegue trabalhar a 14.400 bauds ou 28.800 bauds no máximo. A maioria dos browsers manipulam somente imagens no formato GIF (Graphical Image format). Este formato foi desenvolvido pela empresa americana Compuserve. A vantagem deste formato é o seu excelente fator de compactação (gastando menos tempo de transferência das imagens através das linhas de comunicação). Mais recentemente, a Netscape adotou também o formato JPEG, desenvolvido pelo Joint Photographs Experimental Group (uma associação de fotógrafos profissionais dedicados à divulgação de fotografias digitais). Assim, você utilizará sempre somente um dos dois formatos em suas páginas Web. 6.1 Inserindo imagens em sua página Web A maioria dos browsers permite exibir imagens internas (ou "in-line images") no formato GIF. A sintaxe geral para inserir uma imagem em sua página Web é a seguinte: <img src="urlimagem" > onde urlimagem é a URL do arquivo que contém a imagem a ser mostrada. Uma vez que as imagens estão "contidas" no texto, você pode querer alterar a localização delas para obter a diagramação desejada. Para isso, as imagens internas podem ser exibidas em três diferentes alinhamentos em relação ao texto, ou seja, bottom (alinhada o texto com a parte inferior de uma imagem), middle (alinha o texto com o centro da imagem), e top (alinha o texto com o topo da imagem). Para isso, a sintaxe passaria a ser a seguinte : <img src="urlimagem" align="top, middle, ou bottom" > Alguns browsers não permitem exibir imagens. Para evitar que o usuário não entenda a mensagem que seria transmitida com a imagem, pode-se incluir mais um parâmetro neste comando para substituí-la por um texto. Este parâmetro é ALT. Assim, a sintaxe geral contendo este parâmetro pode ser a seguinte : <img src="urlimagem" alt="texto que identifique a imagem" > É uma boa prática incluir sempre este parâmetro ALT, para você ter sempre a certeza de que seus leitores verão a representação correta de suas páginas, independente do browser que eles estiverem utilizando.
6.2 transformando imagens em hyperlinks Você já viu como inserir hyperlinks em seus documentos (utilizando texto ou frase), representando um acesso a algum documento local ou remoto na Web. Agora veremos que é possível utilizar imagens como links ou como auxiliares de navegação (seta para uma próxima página Web, por exemplo). Assim, as imagens podem ser utilizadas como links para documentos localizados em algum servidor remoto. A sintaxe geral é a seguinte : <a href="endereço_destino" > <img src="nome_da_imagem.gif"> </a> É possível utilizar uma única imagem para direcionar o browser para diversos outros documentos ou arquivos remotos. Estas imagens são chamadas mapeadas e o parâmetro adicionado ao comando é ISMAP. Esta técnica não será estudada neste curso. 7 Tabelas Tabelas podem ser usadas para tabular dados científicos ou de negócios, como no exemplo mostrado na seqüência. Entretanto, uma das vantagens da utilização de tabelas é a elaboração de uma melhor diagramação da página, por exemplo a exposição das informações em duas ou mais colunas como utilizada em jornais. Para isso, a linguagem html utiliza a marcação <table> para identificar uma tabela. Basicamente uma tabela na html apresenta os seguintes elementos principais : <caption> para definir uma legenda ou título para a tabela; <th> para definir um cabeçalho de uma célula da tabela; para definir uma linha da tabela; e <td> para definir uma coluna da tabela (informações contidas numa célula da tabela). Assim, um exemplo básico para tabelas na linguagem html pode ser a seguinte : <table border> <caption> Exemplo de Tabela </caption> <th>título da Linha 1</th> <td>coluna 1 da Linha 1</td> <td>coluna 2 da Linha 1</td> </tr> <th>título da Linha 2</th> <td>coluna 1 da Linha 2</td> <td>coluna 2 da Linha 2</td> </tr> </table> A tabela pode ou não conter borda, para isto utiliza o atributo border. Portanto, <table border=4> define a tabela com borda de largura 4. As diretivas <td>, <th>, e apresentam dois atributos em comum align e valign para definir o alinhamento do conteúdo das células de forma horizontal e vertical, respectivamente. Assim, por exemplo, <td align="left">, alinharia o conteúdo da célula à esquerda. Os atributos rowspan e colspan, controlam a largura e altura das linhas e colunas de uma tabela. Portanto, <td colspan="3"> cria uma célula com largura de 3 colunas. Aqui, não entraremos em maiores detalhes sobre tabelas. A marcação <table> é bastante utilizada para diagramação visual das páginas Web e contém muitos parâmetros e atributos. Em seguida vamos ver um exemplo de tabelas, e para nossa compreensão inicial este conhecimento sobre tabelas é o suficiente. Se você precisar se aprofundar neste assunto, encontrará muitas referências. 7.1 Dimensões da tabela Todos os atributos abaixo são feitos dentro do tag <table>. Os atributos são: width: para definir a largura da tabela height: para definir a altura da tabela cellpadding: para definir a margem dentro das células cellspacing: para definir o espaço entre as células
<table border="1" width="400" height="200" cellpadding="20" cellspacing="20"> <td rowspan="2">célula expandida</td> <td>célula 1</td><td>Célula 2</td> </tr> <td>célula 3</td><td>Célula 4</td> </tr> </table> Os atributos width e height também podem ser utilizados para definir o tamanho de células específicas. Neste caso, devem ser colocados dentro do tag <td> (ou <th>). 7.2 Alinhamento Os elementos dentro da tabela podem ser alinhados da mesma forma que um parágrafo comum. Se nenhum alinhamento for definido, o conteúdo das células é alinhado à horizontalmente esquerda e verticalmente ao centro. Os atributos align (alinhamento horizontal) e valign (alinhamento vertical) devem ser usados dentro dos tags e <td> (além de <th>, se for o caso). Os alinhamentos possíveis são: Alinhamento Horizontal: align="left" alinha o conteúdo à esquerda align="right" alinha o conteúdo à direita align="center" alinha o conteúdo ao centro Alinhamento vertical: valign="top" alinha o conteúdo no topo valign="middle" alinha o conteúdo ao centro valign="bottom" alinha o conteúdo na base da célula valign="baseline" mantém as linhas de texto com o mesmo alinhamento (para ser usado dentro de ou no primeiro <td> de uma linha) <table border> <th>título 1</th><th>Título 2</th> </tr> <td>célula 1</td> <td><b>célula 2</b><p> Quando existe um texto longo, a célula é expandida até à margem da janela do navegador. Para controlar a apresentação de texto dentro da tabela, pode-se modificar as dimensões da célula.</td> </tr> </table> Vamos utilizar um texto mais longo na segunda célula da segunda coluna para demonstrar o alinhamento padrão. A largura da coluna da direita foi ampliada para que o texto da célula 2 aproveitasse até o final da margem do navegador. Se a largura da janela do navegador for diminuída, também diminui a largura da segunda coluna. Vamos melhorar a aparência da tabela ajustando a largura da célula 2 em 300 pixels. Assim, a largura de toda a segunda coluna será ajustada. Aproveitamos este exemplo para alinhar o texto da célula 1 no topo e mudar a largura da borda da tabela. <table border="3"> <th>título 1</th><th>Título 2</th> </tr> <td valign="top">célula 1</td> <td width="300"><b>célula 2</b><p> A largura de cada célula pode ser controlada individualmente utilizando-se o atributo <tt>width</tt>.</td> </tr> </table>
7.3 Cor de fundo das células Basta acrescentar o atributo bgcolor com a cor desejada aos tags de célula. Em algumas combinações de cores será necessário também modificar a cor das letras. Isso é feito com o atributo color dentro do tag <font>. <table border> <th bgcolor="000000"><font color="ffffff">comida</font></th> <th bgcolor="000000"><font color="ffffff">bebida</font></th> </tr> <td bgcolor="white">arroz</td> <td bgcolor="black"><font color="white">vinho</font></td> </tr> </table> 8 Folhas de Estilos em Cascata Quando o World Wide Web Consortium (W3C) lançou a versão 4.0 da HTML, incorporou a ela as CSS (Cascading Style Sheets Folhas de Estilos em Cascata) que têm a finalidade de dar uma forma de apresentação ao conteúdo do documento HTML. Passou a ser possível, portanto, separar o conteúdo do documento de sua formatação. 8.1 Tag <style> As definições de estilos para uma página podem ser feitas por duas vias: Folha de estilos externa Estilos que poderão ser adotados por todas as páginas do site criando um arquivo externo que contenha o código CSS. Assim, é possível realizar simultaneamente mudanças na aparência de todas as páginas que estiverem vinculadas a esse arquivo. Folha de estilos interna As definições são feitas na própria página e, neste caso, só nela os estilos funcionam. Folha de estilos inline Os estilos são definidos em um elemento específico para funcionarem só nele. 8.1.1 Folhas de estilos externas Uma folha de estilos externa é um arquivo de texto separado do arquivo HTML e deve conter apenas código CSS; nenhum outro texto pode ser inserido, nem tags HTML. O arquivo pode ser salvo com qualquer extensão, mas é interessante atribuirmos a extensão.css para que saibamos que se trata de arquivo de folha de estilos. No documento HTML, o arquivo CSS deverá ser LINKADO ou IMPORTADO de dentro do elemento <head>. Para LINKAR uma folha de estilos usa-se a seguinte sintaxe geral: <head> <link rel="stylesheet" type="text/css" href="arquivo.css"> </head> Para IMPORTAR uma folha de estilos coloca-se a linha de comando @import url(arquivo.css) entre as tags <style> e </style>. Eis a sintaxe geral: <head> <style type="text/css"> @import url("arquivo.css"); </style> </head> 8.1.2 Folhas de estilos internas Uma folha de estilos interna também chamada de folha de estilos incorporada é o código CSS inserido no próprio documento HTML, entre as tags <style> e </style>, dentro da seção <head>. O que se insere entre essas tags é a mesma coisa que constituiria o conteúdo do arquivo externo, caso quisesse utiliza-lo.
A sintaxe geral de uma folha de estilos interna: <style> seletor { propriedade: valor; propriedade: valor; } </style> 8.1.3 Folhas de estilos em linha Estilos em linha (inline) são aqueles que são aplicados a uma única instância de um elemento. São definidos dentro do próprio elemento, só para ele. Na tag que o introduz insere-se o atributo style e, a este, atribui-se um valor que é constituído de código CSS. <elemento style="código CSS"> A maioria dos elementos HTML pode receber o atributo style. 8.2 Regras de folhas de estilos O código de uma folha de estilos é constituído de comandos denominados regras CSS. Uma regra CSS é formada de um seletor que antecede as chaves e de uma declaração que fica dentro das chaves. A declaração é constituída de propriedade e valor separados por dois-pontos. A sintaxe geral é a seguinte: seletor {propriedade: valor;} Basicamente, o seletor pode ser um nome de elemento para o qual se queira definir o estilo (seletor de tipo de elemento), uma classe (seletor de classe) ou um identificador (seletor de id), mas há também outros formatos de seletores. Havendo mais de uma declaração definida na regra, usa-se ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo na última declaração. 8.3 Propriedades de folhas de estilos A ser será apresentado algumas propriedades de folhas estilhos. 8.3.1 Estilo de Texto Os principais estilos para texto são: font-family: não define-se qual a fonte que será usada, mas sim sugerimos uma lista, que o navegador deve analizar e usar a primeira fonte da lista que estiver instalada no cliente. color: define a cor da fonte. São permitidas todas as palavras-chaves do html, como green, blue, black... Também são permitidos valores Hexadecimais que definem a cor (precedidos sempre por #). background-color: define a cor de fundo do objeto. São permitidos os mesmos valore do atributo color. text-align: define o alinhamento do texto. Os valores são: left alinhamento à esquerda; center alinhamento ao centro; right alinhamento à direita; justify justifica o texto. vertical-align: Define o alinhamento vertical do texto na área do objeto. Os valores são: top alinhamento junto à margem superior do objeto; middle alinhamento ao centro vertical do objeto; bottom alinhamento junto à base do objeto. 8.3.2 Estilo de Bordas Bordas podem ser escrito de cinco formas: border-top: a formatação é aplicada apenas à borda superior em pixels. border-left: a formatação é aplicada apenas à borda esquerda em pixels. border-right: a formatação é aplicada apenas à borda direita em pixels. border-bottom: a formatação é aplicada apenas à borda inferior em pixels. border: a formatação é aplicada às quatro bordas do objeto em pixels.
8.3.3 Estilo de Posicionamento Os principais estilos para posicionamento são: position: se objeto tiver posição absoluta (absolute), estará solto sobre o html, e os valores top e left contarão a partir das bordas superior e direita da página. O valor defautl dessa propriedade é relative, que prende o objeto ao html. float: faz o objeto flutuar à esquerda ou à direita (left/right) do restante do conteúdo. top: se o objeto estiver solto na estrutura da página ele terá sua borda superior na altura determinada por essa propriedade em pixels. left: se o objeto estiver solto na estrutura da página ele terá sua borda esquerda na posição determinada por essa propriedade em pixels. width: determina a largura de um objeto em pixels. height: detemina a altura de um objeto em pixels. 8.3.4 Estilo de Margem Margens podem ser escrito de quatro formas: bottom: determina quantos pixels terá entre o inferior e o objeto. 8.3.5 Exemplo posicionamento flutuante em folha estilo interna <html> <head> <link rel="stylesheet" type="text/css" href="arquivo.css"> </head> arquivo.css body { text-align: center; } #site { float:left; width:800px; background-color:#00ffff; } #topo { float:left; width:800px; height:100px; background-color:#2f4f2f; } #col1 { float:left; width:200px; height:300px; background-color:#32cd32; } #col2 { float:left; width:400px; height:300px; background-color:#236b8e; } #col3 { float:left; width:200px; height:300px; background-color:#6b8e23; } 8.3.6 Exemplo posicionamento flutuante em folha estilo interna <html> <head> <style> body { text-align: center; } #site { float:left; width:800px; background-color:#00ffff; } #topo { float:left; width:800px; height:100px; background-color:#2f4f2f; } #col1 { float:left; width:200px; height:300px; background-color:#32cd32; } #col2 { float:left; width:400px; height:300px; background-color:#236b8e; } #col3 { float:left; width:200px; height:300px; background-color:#6b8e23; } </style> </head> 8.3.7 Exemplo posicionamento absoluto em folha estilo interna <html> <head> <style> body { text-align: center; } #site { width:800px; background-color:#00ffff; } #topo { position:absolute; left:0px; top:0px; width:800px; height:100px; background-color:#2f4f2f; text-align:center; } #col1 { position:absolute; left:0px; top:100px; width:200px; height:300px; background-color:#32cd32; text-align:center; } #col2 { position:absolute; left:200px; top:100px; width:400px; height:300px; background-color:#236b8e; text-align:center; } #col3 { position:absolute; left:600px; top:100px; width:200px; height:300px; background-color:#6b8e23; text-align:center; } </style> </head>
8.4 Tag <div> O <div> é um tag de nível de bloco para outros elementos. Por si só, não tem nenhum significado ou semântica de apresentação somente quebram linhas antes e depois do seu conteúdo. Existe um grande potencial de bom uso do <div> quando utilizada em conjunto com folhas de estilo. São muito úteis para atribuir um conjunto de atributos de apresentação para blocos inteiros de conteúdo. Outro bom uso do <div>, e talvez o mais importante, é projetar layout de um documento. O <div> deve substituir a velha maneira de definir o layout de um documento utilizando tabelas. 8.4.1 Atributo style Este atributo é utilizado para definir os atributos de apresentação em linha (seção 8.1.3) composto por propriedades de estilo de folhas. <div id="topo" style="width:700px; height:100px; background-color:#2f4f2f"> Primeiro layout, chamado "layout1" </div> 8.4.2 Atributo id O atributo "id" atribui um identificador para o elemento associado. Este identificador deve ser único no documento e pode o nome do seletor definido por CSS. O exemplo abaixo pode ser usado com qualquer dos CSS definidos nas seções 8.3.5, 8.3.6 e 8.3.7. <body> <div id="site"> <div id="topo">topo</div> <div id="col1">coluna 1</div> <div id="col2">coluna 2</div> <div id="col3">coluna 3</div> </div> </body> </html> 8.4.3 Atributo class Atribui um nome de classe (ou uma lista de nomes de classes separadas por espaços) para o elemento. Essa atributo pode ser usado em conjunto com folhas de estilo e diz ao navegador a classe (ou classes) ao qual o elemento está associado. 9 formulários Os formulários de páginas html são importantes para o preenchimento de questionários, para submeter consultas, entra de dados, coletar informações, enviar e receber e-mails, entrada de usuário em determinada área de um site ou servidor, etc. A Linguagem html (Hypertext Markup Language ou Linguagem de marcação de hipertexto), é utilizada para escrever páginas da Web, outras linguagens como JavaScript, PHP, VBScript, ASP, JSP fazem uso dos formulários para validar entrada de dados, e retornar informações a partir dos dados inseridos pelo usuário. Por exemplo, o usuário esquece de informar seu e-mail, no campo e-mail de um formulário, instruções em JavaScript retornam com uma mensagem, informando que o usuário deve preencher o campo e-mail. Aquele que deseja criar páginas html, códigos JavaScript, PHP e VBScript, ASP, JSP deve dominar tanto a linguagem html como a construção campos de formulários adequados a determinadas situações. Nosso tutorial sobre formulários será sua base para pesquisa e consultas, sobre tudo que seja referente a formulários html. 9.1 Elementos form Todos os campos de um formulário devem estar delimitados por um elemento form. <form action="email.jsp" method="post"> Campos do formulário
9.2 Atributos de form Os atributos do elemento form da html mais utilizados são action e method. 9.2.1 action O Atributo action especifica o local de envio do conteúdo do formulário. Por exemplo, podemos enviar através de um botão o usuário para uma outra página. <form action="index.html"> <input type="submit" value="home Page Sistema hipermídia"> 9.2.2 method O método determina o que o servidor deve fazer com o URL fornecido no momento da requisição de um recurso. O protocolo http define oito métodos que indicam a ação a ser realizada no recurso especificado. Um servidor http deve implementar ao menos os métodos get e head. Os outros métodos são head, put, delete, trace, options e connect. O atributo method do tag form especifica as variações do protocolo que será utilizado para envio do conteúdo do formulário. Este método de codificação baseia-se nas seguintes regras: Cada um dos elementos do formulário, inclusive seus valores, são separados entre si pelo símbolo & ("e" comercial ou ampersand); O nome e o valor (dados) de um elemento do formulário são separados por = (sinal de igual); Espaços em branco existentes nos dados (p.ex. várias palavras) são substituídos por + (sinal de adição); Todos os caracteres ASCII estendidos, com valores de 128 a 255 (hexadecimal 80 até FF), são substituídos por um conjunto constituído pelo sinal de % (porcento) seguido do valor hexadecimal do caracter (p.ex. o nosso ç (c cedilha) é substituído por %E7); Todos os caracteres utilizados nestas regras como delimitadores (ou seja, &, +, = e %) também são convertidos em hexadecimal seguindo a mesma regra para os caracteres ASCII estendidos. O método post envia dados para serem processados (por exemplo, dados de um formulário html) no corpo do comando para o recurso especificado. A requisição por meio desse método sempre requer que as informações submetidas sejam incluídas no corpo da mensagem e formatadas como uma query string, além de conter cabeçalhos adicionais especificando seu tamanho (Content-Lenght) e seu formato (Content-type). Por isso, esse método post oferece uma maior segurança em relação aos dados transferidos, ao contrário do método get que os dados são anexados a URL, ficando visíveis ao usuário. formulário Mensagem <form action="meuscript.jsp" method="post"> <input type="text" size=30 name="nome"> <input type="text" size=30 name="senha"> <input type="submit"> post / meuscript.jsp http/1.0 Accept: text/html If-modified-since: Sun, 16 May 2010 19:27:13 GMT Content-type: application/x-www-form-urlencoded Content-Length: 30 nome=maria&senha=123 O método get, que envia o fluxo de dados no endereço URL que chama o script separado por ponto de interrogação (?). Esta forma de endereçamento e separação pode ser observada no campo de endereços do navegador do usuário, logo após o formulário ter sido enviado. formulário URL <form action="meuscript.jsp" method="get"> <input type="text" size=30 name="nome"> <input type="text" size=30 name="senha"> <input type="submit"> http://www.meusite.com/meuscript.jsp? nome=maria&senha=123 O método head é uma variação do get em que o recurso não é retornado. É usado para obter metainformações por meio do cabeçalho da resposta, sem ter que recuperar todo o conteúdo. O método put envia certo recurso. Enquanto que o método delete exclui o recurso. O método trace ecoa o pedido, de maneira que o cliente possa saber o que os servidores intermediários estão mudando em seu pedido. O método options recupera os métodos http que o servidor aceita. Finalmente o método connect serve para uso com um proxy que possa se tornar um túnel SSL (um túnel pode ser usado, por exemplo, para criar uma conexão segura).
9.3 Campos de formulários Par utilizar um formulário de forma eficiente, devemos criar campos realmente úteis a nossas necessidades. Você deve planejar antes de construir os campos que farão parte de seu formulário. Veja a seguir os campos que compõe um formulário. 9.3.1 Campo input O Campo input é utilizado em uma ampla variedade de campos de entrada de dados em formulários de preenchimento da html. O Atributo type determina o tipo do campo. <form action="script.jsp" method="post"> <input type="text" size=30 name="nome"> <input type="submit"> 9.3.2 Campos checkbox Um campo Checkbox ou caixa de verificação possui dois estados: selected e Unselected. Elas podem ser utilizadas para atributos que possam assumir vários valores simultaneamente. Os atributos name e value são obrigatórios nas caixas de verificação. Para marca uma caixa como estado selecionado, basta incluir o atributo Checked. <form method="post" action="script.jsp"> <input type="checkbox" name="apostilahtml" value="on">apostila html</br> <input type="checkbox" name="apostilajsp" value="on">apostila jsp</br> <input type="checkbox" name="apostilajavascript" value="on">apostila JavaScript</br> <input type="submit" value="submeter" name="b1"> 9.3.3 Campos hidden Com os campos Hidden (ocultos), nenhum campo é apresentado ao usuário, mas o conteúdo do campo será enviado junto com o formulário. <form method="post" action="script.jsp"> <input type="hidden" name=suporte" value="suporte"> Digite seu e-mail: <input type="text=" name="email" size="30"> <input type="submit"> 9.3.4 Campos image Os campos image (imagem) atuam da mesma forma que os botões submit, mas incluem uma imagem utilizando o atributo src. <form action="script.jsp" method="post"> Nome: </br> <input type="text" size="20" name="email"></br> Senha:</br> <input type="password" size="20" name="senha"> <input type="image" src="login.gif" border=0> 9.3.5 Campos password Os campos password (senha) são linhas de texto com caracteres digitados que são substituídos asteriscos. O usuário pode ver a quantidade de caracteres que digita, mas não o que foi digitado. <form action="script.jsp" method="post"> Nome: </br> <input type="text" size="20" name="email"> </br> Senha:</br> <input type="password" size="20" name="senha"> <input type="submit" value="enviar" name="b1">
9.3.6 Botões de radio Os botões de radio permitem que apenas uma das opções seja escolhida. Os atributos name e value são obrigatórios. Para definir um botão como selecionado, basta incluir o atributo Checked. <form method="post" action="script.jsp"> <input type="radio" name="r1" value="apostilahtml" checked >Apostilas html</br> <input type="radio" name="r1" value="apostilajsp"> Apostilas jsp</br> <input type="radio" name="r1" value="apostilasjavascript">apostilas JavaScript</br> <input type="submit"> 9.3.7 Botões reset Quando um botão reset é pressionado os campos de um formulário retornam a seus valores iniciais. O atributo src pode ser utilizado para especificar um elemento gráfico. <form action="script.jsp" method="post"> Nome: </br> <input type="text" size="20" name="email"></br> Senha:</br> <input type="password" size="20" name="senha"> <input type="submit" value="enviar"> <input type="reset" value="apagar"> 9.3.8 Botões submit Os dados do formulário serão enviados sempre que o usuário der um clique sobre o botão submit. O atributo value pode ser utilizado para fornecer um rótulo para ser apresentado sobre o botão. <form action="script.jsp" method="post"> Nome: </br> <input type="text" size="20" name="email"></br> Senha:</br> <input type="password" size="20" name="senha"> <input type="submit" value="enviar> 9.4 Atributos permitidos ao elemento input O elemento input pode receber uma grande quantidade de atributos. Veja alguns deles. 9.4.1 checked Indica que elementos como botões de rádio ou caixa de verificação devem estar selecionados. 9.4.2 maxlength O atributo Maxlength especifica a quantidade máxima de caracteres permitidos em campos text e password. 9.4.3 name O atributo name fornece um string de caracteres utilizado para nomear o campo quando ocorrer o envio dos dados contidos no formulário. 9.4.4 size O atributo size especifica a largura visível de campos text ou password. 9.4.5 src (Source) O atributo src especifica uma imagem que será utilizada como segundo plano em campos Image, submit ou reset. 9.4.6 type type define o tipo de campo de acordo com as seguintes opções: text, password, Checbox, Radio, File, Hidden, submit, Image ou reset.
9.4.7 value value é um string de caracteres ou um número utilizado para inicializar campos text ou Hideen. 9.4.8 textarea (área de texto) A utilização do elemento textarea permite aos usuários a digitação de várias linhas de texto. O elemento Textare é utilizado principalmente para escrever mensagens para envio de e-mail. <form action="enviaremail.jsp" method="post"> Digite seu e-mail : <input type="text" size="30" name="email"></br> Digite o assunto: <input type="text" size="30" name="assunto"></br> Digite aqui a mensagem <textarea name="mensagem" rows="5" cols="10"></textarea> A tag textarea contém atributos para definir a quantidade de colunas e linhas. Veja a seguir. 9.4.9 cols cols representa o número visível horizontal de caracteres no campo. Quando os parâmetros forem ultrapassados geram deslocamento sempre que necessário. 9.4.10 rows rows representa o número visível de linhas de texto no campo. Quando os parâmetros forem ultrapassados geram deslocamento sempre que necessário. 9.5 Elementos select O elemento select é utilizado em menus de opção única e múltipla. Será normalmente representado na forma de menu pop-up ou drop-down, oferecendo uma alternativa mais compacta em relação aos botões de rádio ou caixa de verificação. <form action="script.jsp" method="post"> Selecione uma apostilas</br> <select name="apostila"> <option>excel 2000</option> <option>frontpage 2000</option> <option>javascript</option> </select> 9.5.1 Atributo multiple para elementos select Quando se deseja criar um menu de múltiplas opções, é necessário incluir o atributo multiple junto com o elemento select. <select multiple name="apostilas"> 9.5.2 multiple A presença do atributo multiple denota que o elemento select define um menu com múltiplas opções. Se estiver ausente, o menu será de opção única. O usuário deverá selecionar múltiplas opções enquanto mantém a tecla Ctrl pressionada. 9.5.3 Elemento option O elemento option pode ocorrer apenas no âmbito de elementos select, representado uma opção possível. Ele pode conter apenas textos e a opção seleciona é enviada com os demais dados do formulário.