Até hoje, em nosso dias, as empresas que não possuem um site na Internet são consideradas antiquadas. - PDF
Até hoje, em nosso dias, as empresas que não possuem um site na Internet são consideradas antiquadas.
Download "Até hoje, em nosso dias, as empresas que não possuem um site na Internet são consideradas antiquadas."
Vinícius Silva da Costa
1 Sumário Aula 1...pág. 2 Aula 2...pág. 10 Aula 3...pág. 15 Aula 4...pág. 19 Aula 5...pág. 22 Aula 6...pág. 25 Aula 7...pág. 28 Aula 8...pág. 31 Aula 9...pág. 37 Aula 10...pág. 43 Aula 11...pág. 49 Aula 12...pág. 53 Aula 13...pág. 57 Aula 14...pág. 62 Aula 15...pág. 68 Aula 16...pág. 73 Aula 17...pág. 80 Aula 18...pág. 86 Aula 19...pág. 91 Aula 20...pág. 93 Aula 21...pág. 96 Aula 22...pág. 99 Aula 23...pág. 101 Aula 24...pág. 105
2 Aula 1 Páginas HTML Nesta aula você vai aprender o seguinte: Como são produzidas as páginas da Internet? O que é uma Tag Vazia e uma Tag de Container? Qual a estrutura básica de um documento HTML? Quais as tag's para a manipulação de tipo de fonte? Histórico da WEB A WEB foi criada por volta de 1991, rapidamente pessoas de todo mundo queriam visitar ou ter um site na Internet, com a evolução dos Browsers (programas utilizados para acessar a Internet), as empresas de setores não- informáticos viram um bom meio de se chegar as pessoas. Até hoje, em nosso dias, as empresas que não possuem um site na Internet são consideradas antiquadas. Como são produzidas as Páginas da Internet? As páginas da Internet (sites) são produzidas em uma linguagem chamada de HTML (Linguagem de marcação de Hipertexto), não é uma linguagem de programação e sim uma linguagem interpretada. O que é uma linguagem interpretada? O usuário escreve a página em um aplicativo como o Quanta ou o BlueFish, do Linux e o Mozilla, interpreta o código digitado e o transforma na página que é exibida ao usuário. Como observar o código que foi digitado para a construção de uma página? Para observar o código que foi utilizado para construir uma página o usuário deverá fazer o seguinte: Abra o Mozilla - Digite o endereço de um site qualquer Aguarde o carregamento completo da página 2
3 - Clique no Menu Exibir - Selecione a opção Código Fonte Observe que será aberta uma janela a parte e o código digitado para criar a página será exibido. O HTML e os formulários? O HTML consegue criar formulários, existem muitos formulários em sites da Internet, formulário é o local onde o visitante de um site digita as informações, ou seleciona informações. Porém observe que o HTML somente consegue enviar os dados existentes no formulário para alguém, mais ele não sabe o que fazer com o conteúdo digitado. Geralmente o HTML envia os dados de seu formulário para um programa que fica armazenado no servidor, onde a página está armazenada. O PHP é uma linguagem que permite a criação de formulários e que permite a manipulação dos dados, sem a utilização de nenhum outro recurso. Como é formada uma equipe para desenvolvimento de sites? Quando uma página para a Internet é criada, existe um grupo de pessoas que trabalham no seu desenvolvimento. - Existem pessoas que desenvolvem a parte visual da página - Existem pessoas que criam as ilustrações a serem utilizadas na página - Existem pessoas que desenvolvem os formulários da página - Existem pessoas que desenvolvem as animações da página - Existem pessoas que desenvolvem programas para a página Como é desenvolvida uma página HTML? Uma página HTML é constituída por instruções que são conhecidas por TAG's. O que é uma TAG vazia? Uma tag vazia é uma tag onde o usuário não precisa indicar o seu encerramento. 3
4 Exemplo: Tab <BR> O que é uma TAG de container? É uma tag onde o usuário deverá indicar o local de seu encerramento. Exemplo: <font>< / font> As tags de encerramento são idênticas as tags de inicio a não ser pelo indicador de encerramento que é representado pela barra /. Qual a estrutura básica de um documento HTML? ara salvar uma página HTML utilize a extensão.htm ou.html A estrutura básica de um documento HTML é apresentada abaixo: <html > <head> <title> Digite aqui o título de sua página </ title> </head> <body> Digite aqui o conteúdo de sua página </body> </html> Qual a função dos elementos da estrutura básica de um documento HTML? A explicação sobre cada uma das tag's da estrutura básica de um documento html é explicada abaixo: <html> - tag de container que define o inicio e o fim de um documento <head> - tag de container que define o inico e o fim do cabeçalho <title> - tag de container que define o título da página, título esse que será exibido na barra de título do nagevador (Mozilla, Konqueror, Netscape) <body> - tag de container que define a região onde deverá ser escrito o conteúdo do documento que será exibido na maior parte do navegador. Lembre- se: As tag's são interpretadas pelo navegador (Mozilla, Konqueror, Netscape) e convertidas em conteúdo para a página HTML, as tag's em si não serão exibidas no navegador. 4
5 Que software poderá ser utilizado para escrever o documento HTML? Abaixo são apresentadas alguns softwares que seu professor poderá fazer uso para a escrita de um documento HTML: BlueFish Quanta - Kwrite 5
6 Tag's para manipulação de estilos de texto Abaixo são apresentadas algumas tag's que são utilizadas para manipular textos: <b>texto </b > - tag de container que fará com que o texto posicionado no seu interior seja apresentado em negrito <i> Texto </i > - tag de container que fará com que o texto posicionado no seu interior seja apresentado em itálico <u> Texto </u > - tag de container que fará com que o texto posicionado no seu interior seja apresentado em sublinhado Tag's pré- definidas para a manipulação de texto a nível de título Existe no HTML seis níveis de títulos que são definidos pelas tag's: <h1>texto </h1 > - maior dos títulos até: <h6>texto </h6 > - menor dos títulos Obseve abaixo um exemplo da utilização dos seis níveis de títulos no navegador Mozilla: Tag's utilizadas para manipulação de linhas Abaixo são relacionadas as tag's para manipulação de linhas: <br> - tag vazia utilizada para definir quebras de linha, observe que as tag's de títulos fazem quebra de linha de forma automática <p> Texto </p > - tag de container que define que o texto em seu 6
7 interior faz parte do mesmo parágrafo. Tag's utilizadas para definição de alinhamentos de textos Abaixo são relacionadas as tag's que podem ser utilizadas para a definição de alinhamentos de textos: <center> Texto </center> - tag que centraliza o texto em seu interior <div align = center > Texto </div> - tag que alinha o texto ao centro <div align = left > Texto </div> - tag que alinha o texto a esquerda <div align = right > Texto </div> - tag que alinha o texto a direita <div align = justify > Texto </div> - tag que alinha o texto a direita Observe abaixo um exemplo dos níveis de alinhamento no navegador Mozilla: Tag utilizada para fazer alteração de fonte Segue abaixo a tag que é utilizada para definir o tipo de fonte que será utilizada no texto: <font face= verdana size=+2 color=red> Texto </font > A tag font é uma tag que possui opções, as suas opções são explicadas abaixo: face define o tipo de fonte a ser utilizada size define o tamanho da fonte color define a cor da fonte Observe que o HTML aceita cores que devem ser definidas através do seu nome ou através do seu código hexadecimal. 7
8 Exercício 1: Exercício 2: <html > <head> <title>exemplo básico</ title> </head> <body> Este é um exemplo muito simples. </body> </html> Exercício 3: <html > <head> <title>exemplo</ ti tle> </head> <body> <b>isto é texto em negrito</b > <br/> <strong>isto é texto forte</strong > <br/ > <big>isto é texto maior</big> <br/ > <em>isto é texto enfatizado</em> <br/> <i>isto é texto itálico</i > <br/ > <small>isto é texto menor</small> <br/> Este texto contém uma parte alinhada mais <sub>abaixo< /sub > <br/ > Este texto contém uma parte alinhada mais <sup>acima</sup > </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <p>para forçarmos uma mudança de<br/ > linha<br/ > num<br/ > parágrafo,<br/ > usamos o elemento <br></p > <br/ > </body> </html> 8
9 Exercício 4: Exercício 5: Exercício 6: <html > <head> <title>exemplo</ ti tle> </head> <body> <p> O texto seguinte tem <font color="red" size="+1" face="verdana">cor vermelha, tem tamanho acima do normal e tipo de letra verdana.</font> </p> </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <h1>isto é um cabeçalho de nível 1</h1> <h2>isto é um cabeçalho de nível 2</h2> <h3>isto é um cabeçalho de nível 3</h3> <h4>isto é um cabeçalho de nível 4</h4> <h5>isto é um cabeçalho de nível 5</h5> <h6>isto é um cabeçalho de nível 6</h6> <p>os elementos h1- h6 devem ser usados apenas para escrever cabeçalhos. Não os use para outros fins. Existem outros elementos concebidos especificamente para outras finalidades.</p > </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <div align=left>texto alinhado a esquerda</div> <div align=center>texto alinhado ao centro</div > <div align=right >Texto alinhado a direita</div> </body> </html> 9
10 Aula 2 Páginas HTML Nesta aula você vai aprender o seguinte: Como alterar a cor do fundo da página? Como inserir uma imagem no site? Como inserir uma linha horizontal? Como inserir uma imagem no fundo da página? Alterando a cor do fundo da página Para alterar a cor do fundo da página de seu website o usuário deverá alterar a tag <body> adicionando a seguinte opção: <body bgcolor = blue> Inserindo imagens Para inserir uma imagem em sua página HTML o usuário deverá fazer uso dos seguintes tipos de arquivos: - JPG - GIF - BMP PNG A figura deverá ser salva na mesma pasta onde encontra- se salva a página HTML, ou ainda em uma subpasta, dentro da pasta onde encontra- se salva a página HTML. A tag utilizada para inserir uma imagem é a seguinte: <img src= imagem.jpg> Para fazer uma borda ao redor da imagem utilize a opção border: <img src= imagem.jpg border = 2 > 10
11 Criando listas Para criar uma lista com marcadores o usuário deverá fazer o seguinte: <ul> <li> Texto </li > <li> Texto </li > <li> Texto </li > <li> Texto </li > <li> Texto </li > </ul> Observe um exemplo no navegador Mozilla: Para criar uma lista com numeradores o usuário deverá fazer o seguinte: <ol> <li> Texto </li > <li> Texto </li > <li> Texto </li > <li> Texto </li > <li> Texto </li > </ol> Observe um exemplo no navegador Mozilla: 11
12 Inserindo uma linha horizontal Para inserir uma linha horizontal na página faça o seguinte: <hr> Para alterar a espessura da linha horizontal: <hr size=2> Para alterar a cor da linha horizontal: <hr color= blue > Para alterar o comprimento da linha horizontal: <hr width=50%> Para alterar o alinhamento da linha horizontal: <hr align=right > <hr align=left> Inserindo uma imagem como fundo da página Para inserir uma imagem como fundo da página o usuário deverá fazer o seguinte: <body background= imagem.jpg > 12
13 Exercício 1: Exercício 2: <html > <head> <title>exemplo</ ti tle> </head> <body bgcolor="yellow"> <h2>um fundo colorido</h2 > </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body background="bg- pegadas.jpg"> <h3>uma imagem de fundo</h3> <p>os fundos de imagem tanto podem ser criados com imagens do tipo jpg como gif ou png.<br/ > </p> <p>se a imagem de fundo tiver dimensões inferiores às da janela do browser ela será repetida (formando um mosaico) até preencher todo o fundo da página.</p> <br/ > <br/ > </body> </html> Exercício 3: <html > <head> <title>exemplo</ ti tle> </head> <body> <h4>uma lista não ordenada:</h4 > <ul> <li>celta</li> <li>palio</li> <li>gol</li> </ul> <br/ > </body> </html> 13
14 Exercício 4: Exercício 5: Exercício 6: <html > <head> <title>exemplo</ ti tle> </head> <body> <h4>uma lista ordenada:</h4 > <ol> <li>celta</li> <li>palio</li> <li>gol</li> </ol> </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <p>uma imagem em formato gif: <img alt="senhor Magoo" src= "magoo.gif" width="90" height="99"> < / p > <p>uma imagem em formato jpg: <img alt="o Paraíso" src= "praia.jpg">< /p > <p>repare que em ambos os casos a imagem é inserida do mesmo modo.</p > <br/ > </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <h4>linhas horizontais coloridas</h4 > <hr color=red> <p>isto é um parágrafo</p > <hr color=blue> <p>isto é um parágrafo</p > <hr color=orange> <p>isto é um parágrafo</p > <hr color=green> </body> </html> 14
15 Aula 3 Páginas HTML Nesta aula você vai aprender o seguinte: Quais os tipos de links que existem? Como criar um link interno? Como criar um link externo? Como criar um link para um e- mail? Tipos de links Definindo Links Link é a ligação de uma página com outra, existem basicamente três tipos de links: Link interno link para uma página que encontra- se no mesmo servidor Link externo link para uma página que encontra- se em outro servidor Link para e- mail link para um e- mail - Para definir um link interno faça o seguinte: <a href= pagina.html > Texto que será exibido no navegador </a > - Para definir um link externo faça o seguinte: <a href= / > Texto que será exibido no navegador </a> - Para definir um link para e- mail faça o seguinte: <a href= > Texto que será exibido no navegador </a> 15
16 Exercício 1: Exercício 2: Exercício 3: <html > <head> <title>exemplo</ ti tle> </head> <body> <p> <a href="pagina.htm">isto é uma ligação</a > para outra página deste website. </p> </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <p> <a href="http:/ / >Isto é outra ligação</a >, mas para outro website </p> </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <p> Uma imagem com uma ligação ("link") externa: <a href="http:/ / <img alt="paraíso" src="praia.jpg" border="0"> < /a > </p> </body> </html> 16
17 Exercício 4: Exercício 5: <html > <head> <title>exemplo</ ti tle> </head> <body> <a target="_blank" href="pagina.htm">saltar para a página de teste</a > <p> Se colocar o valor "_blank" no atributo target a ligação será aberta numa nova janela do browser. </p> </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <p><a href="#c3">veja também o Capítulo 3</a> < / p > <h1>manual básico de introdução a Internet</h1 > <h3>capítulo 1</h3 > <p> O que é a World Wide Web? * A World Wide Web (WWW), designada habitualmente apenas por a Web, é formada por muitas redes de computador ligadas entre si que se estendem por quase todo o mundo. * Todos os computadores que estão ligados à Web podem comunicar uns com os outros. * A comunicação entre os computadores que estão na Web faz- se usando o protocolo padrão HTTP ("HypertText Transfer Protocol,") que significa: Protocolo para a Transferência de HiperTexto. </p> <h3>capítulo 2</h3 > <p> Como é que o browser vai buscar as páginas? * O browser faz um pedido ao servidor da Web que guarda a página que quer ver. * O pedido, que contém o endereço (URL) da página desejada, é enviado usando o protocolo padrão HTTP. * O endereço (URL) tem um aspecto semelhante a 17
18 Exercício 6: este:http:/ / </p> <h3><a name="c3" id="c3">capítulo 3</a>< / h3 > <p> Como é que o browser faz a apresentação das páginas? * As páginas contêm instruções que descrevem a forma como devem ser mostradas. * O browser lê as instruções e usa- as para desenhar uma representação gráfica do conteúdo da página. * A forma usada para escrever essas instruções baseia- se na linguagem HTML. </p> </body> </html> <title>exemplo</ ti tle> </head> <body> <p> Ligação para e- mail: <a Enviar e- mail</a> </p> </body> </html> 18
19 Aula 4 Páginas HTML Nesta aula você vai aprender o seguinte: Como inserir uma tabela na página? O que faz a tag TR? O que faz a tag TD? Como alterar a cor do fundo da tabela? Trabalhando com tabelas Para trabalhar com uma tabela o usuário deverá utilizar a estrutura abaixo: <table> <tr> <td > Texto <td > Texto <td > Texto </tr> </table> Sendo que: A tag <table> define o inicio e o fim da tabela A tag <tr> define as linhas A tag <td> define as colunas A tabela acima possui uma linha com três colunas. Para definir a espessura da borda faça o seguinte: <table border=2 > Para definir a cor do fundo da tabela faça o seguinte: <table bgcolor=green> Para definir a largura da tabela faça o seguinte: <table width=50%> Para definir a altura da tabela faça o seguinte: 19
20 Exercício 1: <table width=50%> Para definir a cor do fundo da célula faça o seguinte: <td bgcolor=blue> <html > <head> <title>exemplo</ ti tle> </head> <body> <h4>uma coluna:</h4 > <table border="1"> <tr> <td>100< /td > </tr> </table> <h4>uma linha e três colunas:</h4> <table border="1"> <tr> <td>100< /td > <td>200< /td > <td>300< /td > </tr> </table> <h4>duas linhas e três colunas:</h4 > <table border="1"> <tr> <td>100< /td > <td>200< /td > <td>300< /td > </tr> <tr> <td>400< /td > <td>500< /td > <td>600< / td > </tr> </table> <p>as tabelas constroem- se com o elemento <table>. As linhas da tabela obtêm- se com o elemento <tr>. As células de dados criam- se com o elemento <td>.</p > </body> </html> 20
21 Exercício 2: <html > <head> <title>exemplo</ ti tle> </head> <body> <h4>fundos de célula:</h4 > <table border="1"> <tr> <td bgcolor="red">primeira</ td > <td>linha</td> </tr> <tr> <td background="backg1.jpg">segunda</ td > <td>linha</td> </tr> </table> </body> </html> Exercício 3: <html > <head> <title>exemplo</ ti tle> </head> <body> <h4>aplicar um cor de fundo:</h4> <table bgcolor="cyan" border="1"> <tr> <td>primeira</td> <td>linha</td> </tr> <tr> <td>segunda</td> <td>linha</td> </tr> </table> <h4>aplicar uma imagem de fundo:< /h4 > <table background="backgrnd.jpg" border="1"> <tr> <td>primeira</td> <td>linha</td> </tr> <tr> <td>segunda</td> <td>linha</td> </tr> </table> <br/ > </body> </html> 21
22 Aula 5 - Páginas HTML Nesta aula você vai aprender o seguinte: O que são frames? O que faz o elemento Frameset? O que faz o elemento Frame? O que faz o elemento Iframe? Molduras ("frames") As molduras ("frames") são subjanelas definidas sobre a janela principal do browser. Estas subjanelas são criadas dividindo a janela em várias partes. Cada uma dessas partes pode apresentar uma página da Web diferente. As subjanelas são habitualmente designadas por molduras, ou "frames." As molduras ("frames") permitem- nos apresentar mais do que uma página HTML numa única janela do browser. Cada página está dentro da sua própria moldura (subjanela) e é independente das restantes páginas. Apesar de oferecerem alguma liberdade ao facilitarem bastante a criação de barras de navegação em conjuntos de documentos com muitas páginas e de tornarem bastante mais rápido o carregamento das páginas, as molduras também podem dar origem a algumas dificuldades, tais como: O criador de páginas vê- se obrigado a lidar com um número maior de páginas ao mesmo tempo. A impressão do conteúdo do browser fica mais difícil. Por vezes é preciso que um único elemento <a> faça ligação a duas ou mais páginas, o que obriga a utilizar JavaScript. O Elemento frameset * O elemento <frameset> define a forma como a janela do browser se subdivide para acomodar as molduras. * Este elemento divide a janela do browser em linhas e colunas. * Os valores atribuídos às linhas e às colunas indicam a quantidade de área de écran que cada linha e cada coluna devem ocupar. 22
23 O Elemento <frame> * O elemento <frame> define qual o documento HTML a colocar numa determinada moldura. No exemplo apresentado em baixo temos um conjunto de molduras com duas colunas. A primeira coluna ocupa 25% da largura da janela do browser e a segunda coluna ocupa 75% da largura. O documento "moldura_a.html" ocupa a primeira coluna e o documento "moldura_b.html" ocupa a segunda coluna: <frameset cols="25%,75%"> <frame src="moldura_a.html"> <frame src="moldura_b.html"> <frameset> Dicas: Quando uma moldura possui linhas de contorno visíveis, o utilizador pode alterar as suas dimensões arrastando as linhas de limite com o rato. Para impedir que isso aconteça utilize o atributo noresize="noresize" no elemento <frame>. Use o elemento <noframes> para que os browsers que não suportam molduras possam mostrar um aviso aos seus utilizadores. <a href ="pagina_1.html" target="principal">página 1</a > < br > <a href="pagina_2.html" target ="principal">página 2</a > < br > <a href="pagina_3.html" target ="principal">página 3</a> Ao clicar num link dentro da moldura de navegação a nova página abrese na segunda moldura (à direita,) que tem por nome "principal." Elementos para molduras ("frames") Elemento Descrição <frameset> - define um conjunto de molduras <frame> - define o conteúdo de uma subjanela (moldura, ou "frame") <noframes> - define uma secção "noframes" para ser usada pelos browsers que não suportam molduras <iframe> - define uma subjanela (moldura) interior ("inline frame") 23
24 Exercício 1: Exercício 2: Exercício 3: <html > <head> <title>exemplo de página dividida em 3 frames verticais (colunas) </title> </head> <frameset cols="25%,50%,25%"> <frame src="moldura_a.htm"> <frame src="moldura_b.htm"> <frame src="moldura_c.htm"> </frameset> </html> <html > <head> <title>exemplo de página dividida em 3 frames horizontais (linhas) </title> </head> <frameset rows="25%,50%,25%"> <frame src="moldura_a.htm"> <frame src="moldura_b.htm"> <frame src="moldura_c.htm"> </frameset> </html> <html > <head> <title>exemplo de utilização de iframes</ title > </head> <body> <h3>uma moldura "inline" (iframe)</h3 > <iframe src="iframe.htm"> </iframe> <p>alguns browsers antigos não suportam iframes.</p > </body> </html> 24
25 Aula 6 - Páginas HTML Nesta aula você vai aprender o seguinte: Qual a função dos formulários? O que faz o elemento Form? O que faz o elemento Input? O que são Radio Buttons? Formulários Os formulários servem para recolher dados introduzidos pelos utilizadores e enviá- los para processamento no servidor. Criar um formulário Um formulário é uma seção da página HTML que contém elementos que permitem ao utilizador introduzir dados (elementos <tetxarea> e vários tipos de elementos <input >, <option> e <select>.) Estes elementos permitem inserir dados numéricos, textos curtos, textos extensos, selecionar elementos numa lista com várias escolhas, responder facilmente com respostas do tipo "sim" ou "não", selecionar rapidamente uma opção num grupo pequeno, etc. Os formulários criam- se com o elemento <form >. Dentro desse elemento principal colocamos diversos elementos para a inserção dos dados. <form > <input>... <input> </form> O elemento <form> por si só não faz com que o browser desenhe nada na página nem permite inserir dados. Ele contém elementos que recolhem os dados e possui atributos que dizem ao browser como e para onde deve enviar os dados para processamento. 25
26 Input Radio Buttons Exercício 1: O elemento que encontramos com maior frequência em formulários é o elemento <input>. O exemplo seguinte mostra um formulário simples com dois elementos input: <form action="processar.php" method="post"> Primeiro nome: <input type="text" name="primeiro_nome"> <br> Último nome: <input type="text" name="ultimo_nome"> </form> Os "Radio Buttons" usam- se para criar um grupo (pequeno) de opções em que apenas se pode selecionar uma de cada vez. <form action="processar.php"> <input type="radio" name="sexo" value="masculino"> Masculino <br> <input type="radio" name="sexo" value="feminino"> Feminino <form > Repare que só pode selecionar uma uma das opções dadas. Elas excluem- se mutuamente. <html > <head> <title>exemplo</ ti tle> </head> <body> <form method="post" enctype="text/plain"> Escreva o seu primeiro nome: <input name="firstname"> <br/ > Escreva o seu último o nome: <input name="lastname"> <br> <input type="submit"> </form> </body> </html> 26
27 Exercício 2: Exercício 3: <html > <head> <title>exemplo</ ti tle> </head> <body> <form method="post" enctype="text/plain"> Escreva o seu nome de utilizador: <input name="user"><br/ > Escreva a sua password (segredo): <input type="password" value="" name="password"> <br> <input type="submit"> </form> </body> </html> <html > <head> <title>exemplo</ ti tle> </head> <body> <form method="post" enctype="text/plain"> Masculino: <input type="radio" checked="checked" value="macho" name="sexo"><br/ > Feminino: <input type="radio" value="fêmea" name="sexo"> <br> <input type="submit"> </form> </body> </html> 27
28 Aula 7 - Páginas HTML Nesta aula você vai aprender o seguinte: O que são Checkboxex? O que faz o atributo Action da tag Form? Como fazer um botão de Enviar (submeter)? Como fazer um botão que limpe o formulário? Checkboxes As caixas de validação ("checkboxes") devem ser usadas sempre que queremos que o utilizador aprove (ou não) itens dentro de um pequeno grupo. É permitido validar mais do que uma opção em simultâneo. <form > <input type="checkbox" name="patins">eu tenho patins em linha <br> <input type="checkbox" name="skate">eu tenho um skate <form > Repare que pode selecionar cada uma das opções de forma independente da outra. O atributo action e o botão de submissão Quando o utilizador faz clique sobre o botão "Submeter" (ou "Submit",) as repostas e texto inseridos no formulário são enviados para processamento. O atributo action do elemento <form > contém o endereço (URL) do recurso da Web que está encarregado de realizar esse processamento. É para lá que o conteúdo do formulário é enviado. <form name="input" action="exemplos/action.html" method="get"> Nome de utilizador: <input type="text" name="utilizador"> <input type="submit" value="submeter"> <input type="reset" value="apagar"> <form> Elementos para Formulários Elemento Descrição 28
29 Exercício 1: Exercício 2: <form > Define um formulário para recolher dados inseridos pelo utilizador <input > Insere um campo para introduzir dados <textarea> Define uma área de texto (permite inserir texto com várias linhas e um número ilimitado de caracteres) <label> Define um nome para um elemento <fieldset> Agrupa elementos num formulário <legend> Define uma legenda para um grupo de elementos do formulário <select> Define uma lista com várias opções seleccionáveis <optgroup> Define um grupo de opções <option> Insere mais uma opção numa lista com várias opções seleccionáveis <button> Define um botão que pode ser pressionado <isindex> Desaprovado. Use <input> com o atributo type="button" <html> <head > <title>exemplo< / title> </head > <body > <for m action method =" post" enctype ="text/ pl ain"> Eu tenho uma bicicleta: <input type ="checkbox" checked ="checked" value="on" name="bike"><br / > Eu tenho patins em linha: <input type ="checkbox" value="on" name="patins"> <br / > <input type="submit"/ > < / f orm > <p >Se clicar sobre o botão "Submeter" os dados do formulário serão enviados para a página "processar.ht ml".</ p > <br/ > <br/ > <br/ > </body> </html > <html> <head > <title>exemplo< / title> </head > <body > <h3 >Este formulário envia um e- mail para o o Itech Informá tica.< / h 3 > <for m action method =" post" enctype ="text/ pl ain"> 29
30 Exercício 3: Nome:<br/ > <input value="escreva o seu nome" name="nome"> <br / > E- Mail:<br/ > <inpu t value="escreva o seu e- mail" name=" "><br / > Comentário:<br / > <input size ="40" value ="Escreva um comentario" name="comentario"><br / > <br/ > <input type="submit"/ > <input type="reset"/ > < / f orm > <br/ > </body> </html > <html> <head > <title>exemplo< / title> </head > <body > <for m action ="pr oces sar.ht ml" >Escreva o seu primeiro nome: <inpu t name="firstname"> < br / > Escreva o seu último o nome: <input name ="lastna me" > <br> <input type ="sub mit"> </form > </body> </html > <html> <head > <title>exemplo< / title> </head > <body > <for m action method =" post" enctype ="text/ pl ain"> Escreva o seu texto:<br > <textarea rows="6" cols="40">< / textarea> <br> <input type ="sub mit"> </form > </body> </html > 30
31 Aula 8 - Páginas HTML Nesta aula você vai aprender o seguinte: Hospedando o site Preços O que é um domínio? Como registrar um domínio? Hospendando o Site Antes de ter o seu site online você precisa de arranjar um servidor da Web para alojá- lo. Esse servidor será a casa do seu site. É nela que os visitantes serão servidos, podendo aceder à informação e aos serviços que o seu site oferece. O servidor da Web é um computador que está permanentemente ligado à rede através de ligações rápidas. Ele é operado por uma empresa de Web Hosting que cuida das máquinas e garante o seu bom funcionamento. Ao procurar um serviço para alojar o seu site você vai encontrar várias modalidades de alojamento diferentes e preços que vão desde o muito barato ao muito caro. São vários os factores que determinam as grandes diferenças de preço, e analisar todos esses factores correctamente pode ser uma tarefa um pouco complicada. Por isso iniciamos aqui uma curta série de artigos para tentar ajudá- lo a entender melhor o que está em jogo quando escolhe o alojamento para o seu site. A qualidade da escolha que fizer irá em larga medida determinar o sucesso da sua iniciativa na Web, por isso, no fim nós vamos tentar indicar serviços que oferecem algumas garantias de qualidade. Por que é que os preços são tão diferentes? São vários os factores que determinam o custo de hospedar um site na Web. Antes de analisarmos esses fatores é preciso dizer que a hospedagem na Web se divide em duas grandes categorias: a hospedagem compartilhada e a hospedagem em servidores dedicados. Na hospedagem compartilhada você compra espaço no disco de uma máquina que pertence a uma empresa de Web hosting e o direito a ter o seu material disponível na Web. Para além de hospedar o seu site, essa máquina hospedara igualmente os sites de outros clientes da empresa de hosting. 31
32 Apesar de na hospedagem compartilhada os recursos serem repartidos, os sites estão totalmente isolados uns dos outros. Cada cliente tem acesso apenas à área do disco que guarda os arquivos do seu site. Os arquivos dos outros clientes que compartilham a mesma máquina estão totalmente inacessíveis. Já a hospedagem em servidores dedicados tem características diferentes. Nessa modalidade você compra ou aluga uma máquina a uma empresa de Web hosting. Essa máquina fica à guarda da empresa no seu data center (junto com os outros servidores da empresa, que podem ser aqueles que fornecem hospedagem compartilhada.) A empresa de hosting mantém a máquina permanentemente ligada à rede numa sala que garante níveis de temperatura e de humidade controlados, proteção contra incêndios, etc. Com um servidor dedicado a máquina estará totalmente dedicada ao seu site e não serve mais ninguém. Você pode instalar nela o software que quiser e pode configurá- la à sua vontade. Porém, essa modalidade tem desvantagens. Se algo funcionar mal na sua máquina é você que terá de pagar ou fazer a reparação. Quem usa hospedagem compartilhada sabe que a empresa de Web hosting se encarregará de atualizar as máquinas com as últimas atualizações de software que as protege de ataques informáticos. Por outro lado, quem usa hospedagem em servidores dedicados fica com a responsabilidade de fazer as atualizações que devem proteger a máquina. Por tudo isto fica claro que uma empresa que não dispõe de pessoal com competências elevadas em tecnologias da informação ficará mais bem servida se optar por uma modalidade de hospedagem compartilhada. Planos com preço baixo Dentro das modalidades de hospedagem compartilhada os preços podem variar muito. Os planos com preços mais baixos são adequados para sites que não precisam de usar tecnologias de servidor (PHP, ASP, ColdfFusion, etc.) Se o seu site não precisar dessas tecnologias então a sua melhor escolha será um plano destes, mas, como teremos oportunidade de ver já a seguir, há outros factores a considerar (qualidade da assistência técnica, limites de tráfego e comfiabilidade.) É possível encontrar serviços de hospedagem que oferecem tecnologias de servidor (PHP, ASP, etc) por preços muito baixos. Por razões que iremos ver mais adiante, fique avisado que nessas condições é quase impossível aos fornecedores garantirem um serviço satisfatório. Mesmo que você lance a sua iniciativa na Web usando um plano básico, é possível que mais tarde venha a necessitar de funcionalidades mais avançadas. Quando isso acontecer o seu site terá de migrar para um plano mais avançado. Verifique se o fornecedor que vai escolher oferece os serviços dos quais pode vir a precisar. Se ele não oferecer esses 32