Até hoje, em nosso dias, as empresas que não possuem um site na Internet são consideradas antiquadas.

Tamanho: px
Começar a partir da página:

Download "Até hoje, em nosso dias, as empresas que não possuem um site na Internet são consideradas antiquadas."

Transcrição

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

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem PHP @wre2008 1 Sumário PHP: Tipos de dados; Manipulação de dados; Utilizando formulário. @wre2008 2 Tipos de dados As variáveis são declaradas no momento de sua

Leia mais

Os objetivos indicados aplicam-se a duas linguagens de programação: C e PHP

Os objetivos indicados aplicam-se a duas linguagens de programação: C e PHP AGRUPAMENTO DE ESCOLAS DE SANTA COMBA DÃO CURSO PROFISSIONAL DE TÉCNICO DE GESTÃO E PROGRAMAÇÃO DE SISTEMAS INFORMÁTICOS 2012-2015 PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO MÓDULO 2 Mecanismos de Controlo de

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

Para testar seu primeiro código utilizando PHP, abra um editor de texto (bloco de notas no Windows) e digite o código abaixo:

Para testar seu primeiro código utilizando PHP, abra um editor de texto (bloco de notas no Windows) e digite o código abaixo: Disciplina: Tópicos Especiais em TI PHP Este material foi produzido com base nos livros e documentos citados abaixo, que possuem direitos autorais sobre o conteúdo. Favor adquiri-los para dar continuidade

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

Algoritmos em Javascript

Algoritmos em Javascript Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays

Leia mais

PHP() é uma linguagem de integração de servidor que permite a criação de paginas dinâmicas. Como todas

PHP() é uma linguagem de integração de servidor que permite a criação de paginas dinâmicas. Como todas O que é PHP? Acrônimo de PHP: Hipertext Language PostProcessor Inicialmente escrita para o desenvolvimento de aplicações Web Facilidade para iniciantes e recursos poderosos para programadores profissionais

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

Leia mais

Características do PHP. Começando a programar

Características do PHP. Começando a programar PHP Introdução Olá pessoal. Desculpe o atraso na publicação da aula. Pude perceber pelas respostas (poucas) ao fórum que a realização da atividade do módulo I foi relativamente tranquila. Assistam ao vídeo

Leia mais

Formulários em HTML - O que são e para que servem

Formulários em HTML - O que são e para que servem Formulários em HTML - O que são e para que servem A tag - Os atributos action e method A primeira coisa que iremos fazer é usar a tag para podermos usarmos formulários. Antes de entrarmos

Leia mais

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para

Leia mais

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

CAPITULO 5 COMANDO DE FLUXO IF

CAPITULO 5 COMANDO DE FLUXO IF CAPITULO 5 COMANDO DE FLUXO IF Sempre que for necessária a tomada de decisão dentro de um programa, você terá que utilizar um comando condicional, pois é por meio dele que o PHP decidirá que lógica deverá

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

HTML - 7. Vitor Vaz da Silva Paula Graça

HTML - 7. Vitor Vaz da Silva Paula Graça HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Web Designer APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 HTML... 3 Tags... 4 Estrutura de uma Página HTML... 4 Cores e fontes... 7 Código Hexadecimal de uma cor...

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont 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

Leia mais

Formulário (Send & Recieve) Prof. Celso H. Masotti

Formulário (Send & Recieve) Prof. Celso H. Masotti Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem. 1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

Exercícios Práticos de HTML e JavaScript.

Exercícios Práticos de HTML e JavaScript. <FORM ACTION=mailto:teste@gmail.com METHOD=POST ENCTYPE=text/plain NAME=cadastro> Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

Claudio Damasceno. Avançar

Claudio Damasceno. Avançar Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA

Leia mais

TECNOLOGIAS WEB AULA 7

TECNOLOGIAS WEB AULA 7 TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

Como criar uma página WEB

Como criar uma página WEB Como criar uma página WEB Utilização de comandos HTML Luís Manuel Borges Gouveia versão 1.1 Dezembro, 1996 Requisitos necessários para criar ou editar uma página Web um navegador (browser): Netscape ou

Leia mais

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form ... form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO

Leia mais

2 echo "PHP e outros.";

2 echo PHP e outros.; PHP (Hypertext Preprocessor) Antes de qualquer coisa, precisamos entender o que é o PHP: O PHP(Hypertext Preprocessor) é uma linguagem interpretada gratuita, usada originalmente apenas para o desenvolvimento

Leia mais

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Centro Federal de Educação Tecnológica da Bahia Curso Excel Avançado Índice

Centro Federal de Educação Tecnológica da Bahia Curso Excel Avançado Índice Índice Apresentação...2 Barra de Título...2 Barra de Menus...2 Barra de Ferramentas Padrão...2 Barra de Ferramentas de Formatação...3 Barra de Fórmulas e Caixa de Nomes...3 Criando um atalho de teclado

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

PHP. Hypertext Pre-Processor

PHP. Hypertext Pre-Processor PHP Hypertext Pre-Processor O que é o PHP? Uma linguagem de scripting é uma linguagem cujo código não tem de ser compilado para ser executado! O código escrito é interpretado em tempo de execução para

Leia mais

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

O que é o Javascript?

O que é o Javascript? O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

Conteúdo. Linguagem Estática x Dinâmica O que é PHP? Configurando o Ambiente do PHP Sintaxe

Conteúdo. Linguagem Estática x Dinâmica O que é PHP? Configurando o Ambiente do PHP Sintaxe Unidade IV Introdução à Linguagem PHP Parte 1 Professor Fabiano de Paula Soldati fpsoldati@yahoo.com.br http://br.groups.yahoo.com/group/professorsoldati/ Conteúdo Linguagem Estática x Dinâmica O que é

Leia mais

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript 1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação

Leia mais

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec Guia de Consulta Rápida PHP com XML Juliano Niederauer Terceira Edição Novatec Copyright 2002 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Apostila Básica de Informática Ensino Fundamental Volume 4

Apostila Básica de Informática Ensino Fundamental Volume 4 Apostila Básica de Informática Ensino Fundamental Volume 4 1 Introdução:... 3 A Tela do Excel... 3 Criando uma nova pasta de trabalho... 3 Diferença entre Pasta de Trabalho e Planilha.... 4 Salvando sua

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br Pg 1 Introdução... Pg 2 Exemplo completo... Pg 3 Passo 2... Pg 4 Hyperlinks e Texto dentro de uma caixa... Pg 5 Tag para cores e Tabelas... Pg 6 Formatar o Texto... Pg 7 Download... Pg 8 Frame... Pg 9

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Resumo da Matéria de Linguagem de Programação. Linguagem C

Resumo da Matéria de Linguagem de Programação. Linguagem C Resumo da Matéria de Linguagem de Programação Linguagem C Vitor H. Migoto de Gouvêa 2011 Sumário Como instalar um programa para executar o C...3 Sintaxe inicial da Linguagem de Programação C...4 Variáveis

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

Leia mais