APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco IV Bairro Agronomia - 91501-970 - Porto Alegre, RS
1. Introdução O objetivo do curso é fornecer aos participantes noções básicas da linguagem HTML, sabe-se que há várias ferramentas poderosas para editar o HTML de uma página, porém é de fundamental importância conhecer seu funcionamento. 1.1 O que é um arquivo HTML? HTML significa Hyper Text Markup Language Um arquivo HTML é um arquivo texto contendo pequenas tags de marcação As tags de marcação indicam para o Navegador Web como mostrar a página A extensão de um arquivo HTML deve ser htm ou html Um arquivo HTML pode ser criado usando um editor de texto simples Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <tag>...</tag> Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos são chamados vazios, pois não marcam uma região de texto, apenas inserem alguma coisa no documento: <tag> Todos os elementos podem ter atributos: <tag atributo1=valor1 atributo2=valor2>...</tag> HTML é um recurso muito simples e acessível para a produção de documentos. Mais adiante veremos com detalhes os atributos das tags e seus valores. 2. Editores HTML: Como dito anteriormente, um arquivo html pode ser criado usando um editor de texto simples, como o bloco de notas. Porém há editores sofisticados para a criação de código HTML, alguns exemplos: - Dreamweaver Macromedia - HomeSite 5.5 incluído no Dreamweaver - FrontPage - HTML-kit free O ideal é sempre utilizarmos um editor que permita editar o código fonte HTML. As etiquetas HTML não são sensíveis à caixa, com isso tanto faz escrever: <HTML>, <Html>, <html>, <HtMl>,... Na apostila, utilizamos maiúsculas, em muitos casos, para fins didáticos embora o padrão a ser utilizado seja em minúsculas.
Estrutura mínima de uma página HTML: <HTML> <HEAD> <TITLE>Título da Página</TITLE> </HEAD> <BODY> Conteúdo da página </BODY> </HTML> 2.1 Atributos de <BODY> Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d água): <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> onde: BGCOLOR cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco) TEXT cor dos textos da página (padrão: preto) LINK cor dos links (padrão: azul) ALINK cor dos links, quando acionados (padrão: vermelho) VLINK cor dos links, depois de visitados (padrão: azul escuro ou roxo) Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Browsers atuais aceitam 16 nomes de cores - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas. 3. Algumas Tags básicas Tag Descrição <html> Define um documento HTML <body> Define o corpo do documento <h1> a <h6> Define cabeçalho 1 ao 6 <p> Define um parágrafo <br> Insere uma quebra de linha <hr> Define uma linha horizontal <!--> Define um comentário <font> Define a formatação de um texto Há seis níveis de cabeçalhos em HTML, de <h1> a <h6>. Os cabeçalhos têm atributos de alinhamento, como no exemplo abaixo: <h3 ALIGN=CENTER>Cabeçalho de nível 3 centralizado</h3>
<! Aqui é um comentário --> <! <P> tem atributo de alinhamento, como os cabeçalhos: --> <p ALIGN=CENTER>parágrafo centralizado<br>com quebra de linha</p> <! <hr> insere uma linha horizontal: --> <hr WIDTH=30% ALIGN=RIGHT NOSHADE> <FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</font> HTML automaticamente adiciona uma linha em branco extra antes e depois de um cabeçalho. Assim como também adiciona essa linha antes e depois de um parágrafo. O atributo NOSHADE da tag <hr> deixa sem efeito tridimensional a linha horizontal a ser inserida. 4. HTML Links HTML usa a tag <a> (âncora) para criar um link para um outro documento. Uma âncora pode apontar para diversos destinos na Web: uma página HTML, uma imagem, um arquivo de som, um vídeo, etc. A sintaxe básica para criar uma âncora é: <a href="url">nome do texto a ser pressionado</a> Esta âncora define um link para uma outra página qualquer do site, no caso, o exemplo abaixo define um link para a página pagina2.htm : <a href="../pagina2.htm">página 2</a> Esta âncora define um link para o site do PET computação: <a href="http://www.pet.ufrgs.br/computacao">visite o site do PET!</a> Por padrão, um link abre sempre na mesma janela. Para alterar isso, temos o atributo TARGET que pode ser usado quando desejamos abrir a página em uma nova janela, por exemplo. TARGET="_blank" 5. Listas em HTML Listas Não Numeradas, essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):
<UL TYPE=CIRCLE> <LI>Item um <LI>Item dois </UL> Como vai aparecer no Navegador: Item um Item dois Listas Numeradas, através do atributo TYPE pode-se lidar com a numeração dos itens: <OL TYPE=I> <LI>Documentos básicos <LI>Documentos avançados <OL TYPE=a> <LI>formulários <OL TYPE=i> <LI>CGI </OL> <LI>contadores <LI>relógios </OL> <LI>Detalhes sobre imagens </OL> Como vai aparecer no Navegador: I. Documentos básicos II. Documentos avançados a. formulários i. CGI b. contadores c. relógios III. Detalhes sobre imagens Listas de Glossário <dl> <dt>html</dt> <dd>linguagem de marcação de páginas</dd> <dt>java</dt> <dd>linguagem de programação</dd> </dl> Como vai aparecer no Navegador: HTML JAVA Linguagem de marcação de páginas Linguagem de programação 6. Images em HTML
Em HTML, imagens são definidas com a tag <IMG> Aqui temos um exemplo simples, onde definimos largura e altura da imagem a ser exibida: <p> Uma imagem: <IMG SRC="logotipo.gif" ALT="Logotipo" WIDTH="144" HEIGHT="50"> </p> Os atributos WIDTH="largura" HEIGHT="altura" não são necessários, porém uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas. O atributo ALT="descrição_da_imagem" também não é obrigatório, ele indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Ainda temos os atributos BORDER e ALIGN: <IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento BORDER=4 > O atributo BORDER traça uma borda ao redor da imagem, e nós definimos sua largura. Já o atributo ALIGN define o alinhamento da imagem. 7. HTML Frames Com frames, você pode mostrar mais de uma página HTML na mesma janela do navegador. Cada página HTML é chamada frame, e cada frame é independente dos outros. 7.1 Frameset Tag A marcação <frameset> define como dividir a janela em frames. Cada frameset define um conjunto de linhas ou colunas 7.2 Frame Tag A tag <frame> define qual documento HTML colocar em cada frame Uma página com frames tem um texto fonte semelhante a: <HTML> <HEAD><TITLE>Página com Frames</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="frame_a.html" NAME="menu"> <FRAME SRC="frame_b.html" NAME="principal"> <NOFRAME> <BODY> <H2>Essa página usa frames e seu browser não suporta!</h2> </BODY> </NOFRAME> </FRAMESET> </HTML> No exemplo acima, temos a divisão da página em 2 colunas. É possível efetuar essa mesma divisão em linhas, com o atributo ROWS.
Há outros atributos que permitem um maior controle sobre a apresentação de uma página com frames, o FRAMEBORDER e SCROLLING. Veja no exemplo abaixo: <FRAMESET ROWS="15%, 70%, 15%" FRAMEBORDER="no"> <FRAME SRC="banner.html" SCROLLING="no"> <FRAME SRC="principal.html"> <FRAME SRC="rodape.html SCROLLING="no"> </FRAMESET> É interessante o uso de Frames para apresentar conjuntos de páginas com um índice fixo para a navegação. Porém é preciso ter cuidado no controle da navegação, evitando que o acionamento de links não leve o leitor a ver seu browser criar frames dentro de frames, gerando uma grande confusão. As desvantagens de usar frames são: Sempre ter que manter vários documentos HTML para uma mesma página Dificuldades na impressão de uma página inteira Exercício 1 Criar um modelo de página, em HTML, como mostrado ao lado treinando o uso de frames. 8. Tabelas A alternativa natural para não usarmos frames são as tabelas. As tags <TABLE>...</TABLE> delimitam uma tabela. As tags <CAPTION>...</CAPTION> definem o título da tabela. A tabela é dividida em linhas (com a tag ), e cada linha é dividida em células (com a tag <TD>). As letras TD significam "table data" as quais é o conteúdo de uma célula. Ainda temos a tag <TH> que define um cabeçalho para colunas ou linhas (dentro de ). Uma célula pode conter texto, imagens, listas, parágrafos, formulários, tabelas, etc. Como primeiro exemplo temos a tabela abaixo: <TABLE BORDER=4> <CAPTION>Primeiro exemplo</caption> <TH>Coluna 1</TH><TH>Coluna 2</TH> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> </TABLE> Como será mostrado no navegador: Primeiro exemplo
Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 8.1 Títulos compreendendo mais de uma coluna ou linha É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=1> <TH COLSPAN=2>Colunas 1 e 2</TH> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> <TH ROWSPAN=3>3 linhas</th><td>uma linha</td> <TD>duas linhas</td> <TD>tres linhas</td> </TABLE> Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas duas linhas tres linhas Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3). 8.2 HTML Layout - Usando Tabelas É comum em HTML usar tabelas para a formatação de um layout de uma página. Nesse caso é usual utilizarmos o atributo <TABLE BORDER="0">. Uma tabela comum ajusta o tamanho de suas células ao conteúdo. Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a linhas e células. Essa largura pode ser definida em porcentagem (do espaço disponível) ou em pixels:
WIDTH=x% ou WIDTH=x Há dois atributos que permitem o controle de espaçamento em tabelas: CELLPADDING= x, espaço entre o texto e as bordas da célula CELLSPACING= x, espaço entre células Ainda temos os atributos de cores: BGCOLOR cor de fundo BORDERCOLOR cor da borda Esses atributos de cores podem ser usados em toda tabela, assim como apenas em linhas ou até mesmo células. Exercício 2 Criar o mesmo modelo anterior de página, em HTML, como mostrado ao lado, porém utilizando tabelas agora. 9. Folhas de Estilo em Cascata - CSS As folhas de estilo em cascata, CSS - Cascading Style Sheets foram um avanço interessante na linguagem HTML após a versão 3.2, elas permitem o uso de formatações uniformes em um site, de maneira bastante "econômica". Anteriormente, vimos que, para poder formatar um texto, era preciso escrever uma marcação parecida com: <h3><font face="arial" color="#4a7d7b">cabeçalho 3</font></h3> <p><font face="arial" size="2">um parágrafo</p> Com as folhas de estilo, podemos declarar estilos apropriados para seções de texto, aplicando esses estilos sem nos preocuparmos com detalhes de fontes, cor e tamanhos. A definição da folha de estilo deve ficar dentro de <HEAD>, da seguinte forma, se a folha for definida dentro do mesmo documento em que está sendo usada: <HEAD>... <STYLE TYPE="text/css"> P { font: 10pt Arial } H3 { color:#4a7d7b }.destaque { color: red } </STYLE>... </HEAD> Nesse caso a folha de estilo é definida no próprio documento HTML. Porém, ela pode, ainda, ser definida externamente. A grande vantagem é caso seja necessário modificar, algum dia, as cores de todos os títulos ou dos destaques ao longo dos textos de vários documentos html pertencentes à uma página web, com CSS simplesmente alteraríamos a folha de estilo, atualizando imediatamente a apresentação de todos os documentos que fazem referência a ela. Nesse caso, é criada a folha de estilo em outro documento e utilizamos a tag <LINK> nas páginas que queremos usar essa folha. <HEAD>
... <LINK REL="stylesheet" TYPE="text/css" HREF="folha_de_estilo.css">... </HEAD> Como monstrado acima, uma mesma folha de estilo pode ser usada por vários documentos HTML, que também poderão ter suas próprias folhas de estilo internas. Exercício 3 Criar uma folha de estilo externamente, chamada estilo.css que utilizaremos posteriormente em nossas páginas. Formatar ao menos: - cor de fundo (corpo, tabelas, cabeçalhos) - fonte (cor, família, tamanho) - títulos, elementos de tabela, texto em geral 10. Formulários em HTML Um formulário é um modelo que permite ao usuário entrar com um conjunto de dados. O primeiro passo para fazer formulários é aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois trabalharmos com os scripts, que são os programas que permitem a manipulação dos dados. Um formulário é definido pela tag <form>, que irá conter uma seqüência de elementos de entrada e de formatação do documento. <FORM> <INPUT> <SELECT> <TEXTAREA> </FORM> Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA>. 10.1 Input A tag mais usada em formulários é a tag <input>. O tipo de entrada é especificado com o atributo type. Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, que será utilizado posteriormente pelo script. Alguns dos tipos mais comuns estão apresentados abaixo: <form> Login: <INPUT type="text" NAME="login"> <br> Senha: <INPUT type="password" NAME="senha">
</form> Login: Senha: A maioria dos navegadores tem como largura padrão de um campo de texto 20 caracteres. Porém, com o atributo SIZE é possível definirmos o tamanho do campo. Também é possível delimitarmos o número de caracteres aceito no campo de dados com o atributo MAXLENGHT. Esses dois atributos apenas são válidos para campos TEXT e PASSWORD. Ainda temos o atributo VALUE que pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser entrar dados, ele simplesmente apaga o que já estiver escrito e escreve suas informações. 10.2 Botões Radio escolha única Botões Radio são utilizados quando se quer selecionar apenas uma opção dentre várias. <form> <INPUT TYPE=RADIO NAME="sexo" VALUE="masculino">Masculino <br> <INPUT TYPE=RADIO NAME="sexo" VALUE="feminino" CHECKED>Feminino </form> Masculino Feminino Note que apenas uma opção pode ser escolhida. Podemos perceber, também, que o atributo NAME tem o mesmo nome, porém, conforme a opção escolhida, seu VALUE é diferente. 10.3 Checkboxes múltipla escolha Utilizamos Checkboxes quando queremos selecionar mais de uma opção dentre várias. <form> <INPUT TYPE=CHECKBOX NAME="check" VALUE="propagandas" CHECKED> Quero receber propagandas por email <br> <INPUT TYPE=CHECKBOX NAME="check" VALUE="atualizacoes" CHECKED> Quero receber atualizações por email </form> Quero receber propagandas por email Quero receber atualizações por email
10.4 Select A tag <SELECT> define uma seleção entre um conjunto de opções oferecidas ao usuário, estas opções são definidas na tag <OPTION>. Veja o exemplo abaixo: <SELECT> <OPTION value ="amarelo">amarelo</option> <OPTION value ="azul">azul</option> <OPTION value ="verde">verde</option> <OPTION value ="vermelho">vermelho</option> </SELECT> Podemos definir o tamanho na tag <option> com o atributo SIZE ou também com o atributo SELECTED definir qual campo estará inicialmente selecionado. O padrão é que esteja selecionado o primeiro campo. 10.5 TextArea A tag <TEXTAREA> define um campo texto, geralmente utilizado para comentários. Com os atributos COLS e ROWS definimos o tamanho do campo. Veja o exemplo abaixo: <FORM> <TEXTAREA COLS=40 ROWS=5 NAME="comentario">[comentários]</TEXTAREA> </FORM> 10.6 Botões de ação O atributo TYPE igual a SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor, ou seja, quando o usuário clicar no botão "Enviar", todo o conteúdo do formulário é enviado para um outro arquivo. <FORM> <INPUT TYPE=SUBMIT VALUE="Enviar"> </FORM>
Ainda podemos ter o atributo TYPE igual a RESET que restaura os valores iniciais das entradas de dados. <INPUT TYPE=RESET VALUE="Apagar!"> Exercício 4 Criar um conjunto de 3 páginas: - página inicial com Nome e Senha (index.html); - página com formulário de cadastro (form.html); - página de agradecimentos (obrigado.html). Formulário deve conter: Nome, Sexo, Endereço, Cidade, Estado, CEP, E-mail, Telefone Fixo, Celular, Fax, Profissão, Cliente(sim,não), Interesse(Esportes, Informática, Carros, Aventura, Riqueza Material, Cabelos Longos, Luz de Velas, Drogas, Pornografia).