Programacao para Web I 03 HTML

781 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
781
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Programacao para Web I 03 HTML

  1. 1. 18/05/2012 1 Prof. M.Sc. Leandro Donaires Figueira HTML 18/05/2012 1 Prof.M.Sc. Leandro Donaires Figueira Sumário Definição Tags Elementos Estrutura básica Atributos Cabeçalhos Linhas e comentários Parágrafos e quebras de linha Formatação de texto Estruturação 18/05/2012 2 Prof.M.Sc. Leandro Donaires Figueira Estilos Fontes Links Imagens Tabelas Listas Formulários Iframes Cores Definição HTML é uma linguagem para descrever páginas web, e a sigla significa HyperText Markup Language (linguagem de marcação em hipertexto). Todo o conteúdo apresentado será baseado na especificação da HTML 4, criada pelaW3C. Ela não é uma linguagem de programação, e sim de marcação. Uma linguagem de marcação consiste em um conjunto de tags (etiquetas) de marcação. HTML utiliza essas tags para descrever páginas web. Por ex.: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 3 <html> <body> <h1>Meu Primeiro Cabeçalho.</h1> <p>Meu primeiro parágrafo.</p> </body> </html>
  2. 2. 18/05/2012 2 Tags As tags de marcação HTML são usualmente referidas apenas como tags. São envoltas pelos sinais < e >, como a tag <html>. As tags normalmente vêm em pares, como <b> e </b>. A primeira tag no par é a de abertura, e a segunda é a de fechamento (possui o caractere / antes do nome). Páginas web também podem ser chamadas de documentos HTML, pois um documento HTML descreve uma página web, que por sua vez contém tags e texto puro. O propósito de um navegador web (web browser) é ler esses documentos HTML e mostrá-los como páginas da web. O navegador não mostra as tags contidas no doc. HTML, e sim as interpreta para gerar o conteúdo a ser visualizado. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 4 Tags Assim, após a apresentação dos conceitos iniciais, pode-se compreender o primeiro exemplo: O texto entre as tags <html> e </html> descreve a página web. O texto entre as tags <body> e </body> consiste no conteúdo visível da página (corpo da página, mostrado na janela do nav.). O texto entre as tags <h1> e </h1> é mostrado como cabeçalho. O texto entre as tags <p> e </p> é mostrado em um parágrafo. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 5 <html> <body> <h1>Meu Primeiro Cabeçalho.</h1> <p>Meu primeiro parágrafo.</p> </body> </html> Preparando-se para trabalhar com HTML Não é obrigatório o uso de qualquer ferramenta específica. Assim, não é obrigatório utilizar um editor de HTML (Dreamweaver, Visual Studio, etc) ou ter um servidor web/web site. Para aprender a utilizar HTML, utilizar-se-á um editor de texto puro, como por exemplo o notepad/notepad++ do Windows ou pico/nano do Linux. Ao salvar o documento HTML na forma de um arquivo, pode-se dar o nome que desejar, porém necessariamente a extensão do arquivo deve ser .html. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 6
  3. 3. 18/05/2012 3 Elementos Após a definição do conceito de tags, é necessário entender o que é um elemento HTML. Um elemento consiste da tag de abertura + conteúdo + tag de fechamento. Por ex.: Dessa forma, são características da sintaxe de um elemento: O elemento HTML começa com a tag de abertura. O elemento HTML termina com a tag de fechamento. O conteúdo do elemento consiste em tudo entre as duas tags. A maioria dos elementos pode possuir atributos (href, por ex.). Alguns elementos contêm conteúdo vazio, e esses elementos vazios são fechados logo na tag de abertura (<hr />, <br />). 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 7 Tag de abertura Conteúdo Tag de fechamento Elemento p: <p> Isto é um parágrafo. </p> Elemento a: <a href="index.html"> Isto é um link. </a> Elementos aninhados A maioria dos elementos HTML podem ser aninhados, ou seja, elementos podem conter outros elementos. Isso é comum; documentos HTML normalmente consistem de elementos HTML aninhados. Por ex.: Quantos elementos esse documento HTML possui? Qual é o elemento mais interno? 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 8 <html> <body> <p>Meu primeiro parágrafo.</p> </body> </html> Elementos aninhados O exemplo possui três elementos: <p>, <body> e <html>. O elemento p: Define um parágrafo no documento HTML. Tem a tag de abertura <p> e a tag de fechamento </p>. O conteúdo é: Meu primeiro parágrafo. O elemento body: Define o corpo do documento HTML. Tem a tag de abertura <body> e a tag de fechamento </body>. Contém outro elemento HTML (o elemento p), ou seja, o seu conteúdo é composto do próprio elemento p. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 9 <p>Meu primeiro parágrafo.</p> <body> <p>Meu primeiro parágrafo.</p> </body>
  4. 4. 18/05/2012 4 Elementos aninhados O elemento html: Define o documento HTML. Tem a tag de abertura <html> e a tag de fechamento </html>. Contém outro elemento HTML (o elemento body). É importante não esquecer da tag de fechamento do elemento, pois pode-se produzir resultados inesperados se ela não estiver presente,além de ser obrigatório em XHTML. Os nomes das tags não são sensíveis ao contexto, ou seja, <P> significa o mesmo que <p>. Porém, a W3C recomenda o uso de tags minúsculas na HTML 4 e o obriga em XHTML. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 10 <html> <body> <p>Meu primeiro parágrafo.</p> </body> </html> Estrutura básica Um documento HTML possui a seguinte estrutura básica: O elemento head contém elementos que determinam características do documento HTML. É o cabeçalho desse doc., que deve incluir o título da página, além de incluir opcionalmente: Os scripts (Javascript) utilizados (elemento script); Os códigos CSS utilizados (elemento link e/ou style); Metadados sobre o documento HTML (elemento meta). 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 11 <html> <head> ... </head> <body> ... </body> </html> São três os elementos básicos: html, head e body, sendo o uso do elemento head obrigatório apenas em XHTML. Como já mencionado, a função do elemento body é mostrar um conteúdo na janela do navegador. Estrutura básica Assim, compreendem os elementos presentes no head: Elemento title: necessário para definir um título para o documento HTML, título este que: Aparece na barra superior do navegador; Aparece nos favoritos, caso a página seja adicionada; Aparece nos resultados dos sistemas de busca. Elemento link: define um relacionamento entre o documento HTML e um recurso externo. Geralmente é utilizado para relacionar os arquivos CSS utilizados pelo documento. Elemento style: é utilizado para definir informações de estilo dentro da própria página (ao contrário do elemento link, que referencia essas informações fora do documento HTML). 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 12
  5. 5. 18/05/2012 5 Estrutura básica Elemento script: define um script associado ao documento HTML, que pode ser em Javascript. Pode conter o código do script ou referenciar um arquivo externo (através do atributo src). Ex. de utilização desses elementos: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 13 <html> <head> <title>Aqui está o título da página.</title> <style type="text/css"> body {background-color: yellow;} p {color: blue;} </style> <link rel="stylesheet" type="text/css" href="estilo.css" /> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> document.write("Olá Mundo!"); </script> </head> <body> </body> </html> Estrutura básica Elemento meta: especifica metadados sobre o documento HTML. Não são visíveis na página, porém são legíveis por máquinas. Essas informações compreendem a descrição da página, palavras-chave, autor do documento, última modificação, dentre outros. Os metadados podem ser utilizados pelos navegadores, motores de busca ou outros web services. Ex.: Obs.: o elemento meta se posiciona antes do elemento script. 18/05/2012Prof.M.Sc. Leandro Donaires Figueira 14 <html> <head> <title>Título da página.</title> <meta name="description" content="Descrição da página." /> <meta name="keywords" content="HTML, CSS, XHTML" /> <meta name="revised" content="Leandro Figueira, 05/07/2010" /> <meta http-equiv="refresh" content="30" /> </head> <body> </body> </html> Atributos Atributos provêem informações adicionais sobre elementos HTML. Assim, os elementos podem conter atributos, e estes são especificados na tag de abertura. São definidos na forma de nome_atributo="valor_atributo", como por exemplo: O elemento a define um link, e o endereço de destino é especificado pelo atributo href. O conteúdo Isto é um link. é o que aparece na página. Já o valor do atributo nem sempre é mostrado, mas no caso específico do href, o valor é exibido na parte inferior esquerda do navegador. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 15 <a href="http://www.site.com">Isto é um link.</a>
  6. 6. 18/05/2012 6 Atributos Os valores de atributos devem sempre ser envoltos de aspas ou apóstrofos. Aspas (" ") são a forma mais comum, porém apostrofos (' ') também são permitidos. Dica: em raros casos onde o valor do atributo contém aspas, é necessário utilizar apóstrofos: atr='valor "possui" aspas'. Da mesma forma que nas tags, a W3C também recomenda que os atributos e seus valores sejam escritos com letras minúsculas. Atributos frequentes em diversos elementos são:: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 16 Atributo Valor Descrição class nome_classe Especifica um nome de classe para o elemento id nome_id Especifica um identificador único para o elemento style definição_estilo Especifica um estilo inline para o elemento title texto_popup Mostra um texto em forma de popup na página Cabeçalhos Os cabeçalhos são definidos com os elementos h1 a h6, sendo que a primeira define o cabeçalho mais importante, e a última o menos importante. Os navegadores automaticamente adicionam uma pequena margem antes e depois de cada cabeçalho. Cabeçalhos são essenciais e devem ser utilizados apenas para o fim de definir cabeçalhos, e não de fazer com que o texto fique grande ou em negrito. As máquinas de busca utilizam os cabeçalhos para indexar a estrutura e o conteúdo das páginas. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 17 <html> <body> <h1>Primeiro cabeçalho.</h1> <h2>Segundo cabeçalho.</h2> </body> </html> Linhas e comentários O elemento hr cria uma linha horizontal em um documento HTML, podendo ser utilizada para separar conteúdo. Observe que é um elemento vazio (não possui conteúdo), sendo fechado na própria tag de abertura. Comentários podem ser inseridos no código HTML para torná- lo mais compreensivo (podem conter explicações), sendo ignorados pelo navegador. Exemplo: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 18 <html> <body> <p>Primeiro parágrafo.</p> <hr /> <p>Segundo parágrafo.</p> </body> </html> <!-- Isto é um comentário. -->
  7. 7. 18/05/2012 7 Parágrafos e quebras de linha Os parágrafos são definidos através do elemento p. Os navegadores adicionam automaticamente uma linha em branco antes e depois do parágrafo. Quebras de linha são feitas utilizando o elemento vazio br, útil quando se deseja uma nova linha sem começar outro parágrafo: Pode-se utilizar quebras de linha em qualquer parte do HTML. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 19 <html> <body> <p>Isto é um parágrafo.</p> <p>Isto é um outro parágrafo.</p> </body> </html> <p>Isto é um<br />parágrafo com<br />quebras de linha.</p> Parágrafos e quebras de linha É necessário utilizar as quebras de linha devido ao funcionamento da interpretação do código HTML pelo navegador: qualquer número de linhas em branco conta como apenas um espaço. Do mesmo modo, qualquer número de espaços sucessivos conta como apenas um espaço. Assim, para quebrar a linha utiliza-se <br />, e para inserir espaços adicionais utiliza-se a notação &nbsp; Para ilustrar esse cenário, o próximo exemplo mostra que o navegador ignora o layout do texto: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 20 Parágrafos e quebras de linha Quantas linhas são exibidas na tela? O que seria necessário para preservar as quebras de linha do primeiro parágrafo e os espaços em branco do segundo parágrafo? Para se exibir exatamente da forma que se encontra no código, qual elemento poderia ser utilizado no lugar dos elementos p? 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 21 <html> <body> <p> Primeira linha. Terceira linha? Qual linha é essa? </p> <p>Pois é, ignorou meu layout!</p> </body> </html>
  8. 8. 18/05/2012 8 Formatação de texto Há diversas tags úteis para formatar o texto (fechem-nas!): Exercício: utilize vários dos elementos de formatação de texto, observando os resultados na janela do navegador. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 22 Tag Descrição <b> Define texto em negrito. <big> Define texto grande. <em> Define texto com ênfase. <i> Define texto em itálico. <small> Define texto pequeno. <strong> Define texto espesso. <sub> Define texto subscrito. <sup> Define texto sobrescrito. <del> Define texto desconsiderado. <ins> Define novo texto. Tag Descrição <pre> Define texto pré-formatado. <code> Define código de computador. <abbr> Define uma abreviação <acronym> Define um acrônimo. <address> Define um endereço. <bdo> Define a direção do texto. <dfn> Define um termo de definição. <cite> Define uma citação. <blockquote> Define uma citação longa. <q> Define uma citação curta. Estruturação Para estruturar o documento HTML, utiliza-se com frequência os elementos div e span. O elemento div define uma divisão no documento HTML, tornando-se um bloco que pode ser manipulado pelo CSS (Cascading Style Sheets) ou pelo Javascript. Os browsers colocam uma quebra de linha antes e depois do div. O elemento span define uma divisão no documento HTML cujo conteúdo “funde-se” (é um elemento inline) com o contexto em que foi inserido. Da mesma forma, essa divisão pode ser manipulada pelo CSS ou Javascript. Usualmente, utiliza-se o atributo id e/ou class em ambos os elementos,útil para permitir que sejam manipuladas. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 23 Estruturação Veja um exemplo de como estruturar um documento HTML: Ambos os elementos são muito úteis quando se deseja adicionar elementos dinamicamente no documento HTML, via Javascript. Por exemplo, pode-se querer adicionar um novo parágrafo após o último existente após efetuar um consulta em um banco de dados. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 24 <html> <body> <div id="menu"> ... </div> <div id="conteudo"> <p> É isso, pesso<span style="font-weight: bold;">all</span>! </p> </div> </body> </html>
  9. 9. 18/05/2012 9 Estilos Para definir estilos em HTML, utiliza-se o CSS. Foi introduzido junto com o HTML 4 para prover uma melhor maneira de estilizar os elementos HTML. CSS pode ser adicionado ao HTML das seguintes formas: Em arquivos CSS separados dos arquivos HTML. Com o elemento style na seção head do documento HTML. Com o atributo style em elementos HTML. A maneira mais produtiva é utilizar arquivos CSS para definir os estilos de visualização. Porém, para um primeiro ex., será usado o atributo style (estilização de forma inline, ou seja, junto com o doc. HTML): 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 25 <html> <body style="background-color: blue;"> ... </body> </html> Fontes Antes do HTML 4, utilizava-se o elemento font para definir as propriedades da fonte. Porém, ela foi depreciada (deprecated) no HTML 4, e removida do XHTML Strict e HTML 5. Dessa forma, deve-se necessariamente utilizar o CSS para definir as propriedades de exibição de fontes. Segue um exemplo que define as propriedades da fonte do parágrafo com o atributo style: em: medida recomendada pela W3C, sendo por padrão 1em = 16px (pixels). 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 26 <html> <body> <p style="font-family: verdana; font-size: 1.5em; font-style: italic;"> Texto na fonte verdana, com 24 pixels de tamanho e em itálico. </p> </body> </html> Fontes Para alinhar o texto horizontalmente e definir a cor do mesmo, também é utilizado o CSS. São os possíves valores das seguintes propriedades do CSS: text-align:left, right, center e justify. font-weight:lighter, normal, bold, bolder (ou centenas de 100 a 900). font-style:normal, italic, oblique. color: quaisquer nomes de cores em inglês ou códigos (por exemplo, #006803). 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 27 <html> <body> <h1 style="font-family: verdana; text-align: center; color: yellow;"> Cabeçalho na fonte verdana, centralizado e amarelo. </h1> </body> </html>
  10. 10. 18/05/2012 10 Links Um hyperlink (ou link) é uma palavra, um conjunto de palavras ou uma imagem que quando "clicada", conduz o usuário a outro documento ou uma outra seção no mesmo documento. Quando o cursor é posicionado sobre um link, geralmente a seta se transforma em uma mão que aponta. Os links são definidos utilizando o elemento a (anchor). Eis um exemplo de um link para um site fictício de notícias: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 28 <html> <body> <a href="http://www.noticias.com">Visitar um site de notícias.</a> </body> </html> Links Pode-se utilizar o atributo id em um link para poder ser referenciado por outro link, na mesma página. Por exemplo: Também, pode-se criar um link para a "Seção de dicas úteis" em outra página, da seguinte forma: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 29 <html> <body> <a href="#dicas01">Visitar a seção de dicas úteis.</a> ... <a id="dicas01">Seção de dicas úteis:</a> ... </body> </html> <html> <body> <a href="http://www.site.com/dicas.html#dicas01">Ver dicas.</a> </body> </html> Imagens Para inserir imagens em um documento HTML, utiliza-se o elemento img e o atributo src (source). Esse é mais um elemento vazio, não possuindo conteúdo (porém tem atributos). O valor do atributo src consiste no local (URL) onde a imagem se encontra. O atributo alt define um texto a ser exibido caso não seja possível carregar a imagem, atendendo a uma das recomendações de acessibilidade para conteúdo Web (WCAG). Onde se encontra o arquivo "barco.gif"? Suponha que esse documento HTML está localizado no diretório /site. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 30 <html> <body> <img src="imagens/barco.gif" alt="Um barco." /> </body> </html>
  11. 11. 18/05/2012 11 Imagens Também é possível definir a largura (width) e altura (height) da imagem, evitando possíveis problemas de layout: O que ocorre se a imagem não for do tamanho especificado? Para criar um link em forma de imagem, pode-se escrever: Caso se deseje uma borda, pode-se utilizar o seguinte na prop. border: espessura tipo cor, por ex.:"border: 1px solid black". 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 31 <html> <body> <a href="pagina.html"> <img src="imagens/botao.gif" style="border: 0px;" /> </a> </body> </html> <img src="barco.gif" alt="Um barco." width="640" height="480" /> Tabelas São definidas com o elemento table. A tabela é dividida em linhas (rows, elemento tr), e cada linha é dividida em células de dados (data, elemento td). O elemento td pode conter texto, links, imagens, listas, formulários, tabelas, etc. Para definir cabeçalhos em tabelas, utiliza-se o elemento th (header) no lugar do elemento td. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 32 <table border="1"> <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </table> Tabelas Pode-se fazer com que uma célula ocupe várias colunas ou linhas utilizando os atributos colspan e rowspan, respectivamente. Os valores determinam quantas colunas ou linhas serão fundidas. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 33 <table border="1"> <tr> <th>Nome</th> <th colspan="2">Tel.</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <table border="1"> <tr> <th>Nome</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Tel.</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
  12. 12. 18/05/2012 12 Listas São três tipos de listas que a HTML possui: ordenadas, não- ordenadas e de definição. Lista ordenada: definida pelo elemento ol, e cada item da lista pelo elemento li. Por ser ordenada, os itens são marcados com números na visualização (números decimais por padrão). Lista não-ordenada: definida pelo elemento ul, e cada item da lista pelo elemento li. Os itens são marcados com figuras na visualização (círculos pretos por padrão). 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 34 <ol> <li>Café</li> <li>Leite</li> </ol> <ul> <li>Café</li> <li>Leite</li> </ul> Listas Listas de definição: é uma lista com itens e suas descrições. O elemento dl define a lista, e dentro dela são utilizadas elementos dt e dd para definir um item da lista e a descrição do mesmo, respectivamente. Dentro de um item de lista, pode-se colocar texto, quebras de linha, imagens, links, outras listas, etc. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 35 <dl> <dt>Café</dt> <dd>- Bebida preta.</dd> <dt>Leite</dt> <dd>- Bebida branca.</dd> </dl> Listas Pode-se utilizar o atributo type nas listas ordenadas e não- ordenadas,sendo seus possíveis valores: Para a lista ordenada: "a", "A", "i" e "I" (letras e alg. romanos). Para a lista não-ordenada: disc, circle, square. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 36 <ol type="a"> <li>Café</li> <li>Leite</li> </ol> <ul type="disc"> <li>Café</li> <li>Leite</li> </ul>
  13. 13. 18/05/2012 13 Formulários São utilizados para enviar dados ao servidor. Podem conter elementos de entrada tais como campos de texto, checkboxes, botões radio, botões de submissão,etc. O elemento form é utilizado para criar um formulário HTML. O elemento mais importante do formulário é o input (é vazio), e pode ter várias formas, como será visto a seguir. São os tipos de campos de entrada de dados: Campo de texto - define uma linha de entrada de dados onde o usuário pode digitar um conjunto de caracteres: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 37 <form> Primeiro nome: <input type="text" name="primeiro_nome" /><br /> Último nome: <input type="text" name="ultimo_nome" /> </form> Formulários Obs.: repare no atributo name. Possui utilidade análoga ao atributo id, porém, enquanto é possível ter vários elementos com o mesmo valor de name, o mesmo não é válido para o id - seus valores são únicos. Campo de senha - análogo ao campo de texto, porém os caracteres ficam ocultos na visualização. Botões radio - são botões que restringem que o usuário escolha apenas uma das opções listadas: 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 38 <form> Senha: <input type="password" name="senha" /> </form> <form> <input type="radio" name="sexo" value="masc" /> Masculino<br /> <input type="radio" name="sexo" value="fem" /> Feminino </form> Formulários Checkboxes - são caixas que permitem que o usuário escolha uma ou mais opções dentre as apresentadas. Menus drop-down: são menus cujas opções são visualizadas com um "clique", e o usuário pode escolher uma opção. O elemento select define o menu, os elementos option definem as opções desse menu. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 39 <form> <input type="checkbox" name="veic" value="bic" /> Bike.<br /> <input type="checkbox" name="veic" value="car" /> Carro. </form> <form> <select name="sistema"> <option value="wxp">Windows XP</option> <option value="w7">Windows 7</option> <option value="linux">Linux</option> </select> </form>
  14. 14. 18/05/2012 14 Formulários Áreas de texto: são áreas para escrever texto, sendo análogos aos campos de textos, porém definindo o número de linhas e colunas que aparecem na tela. É utilizado o elemento textarea juntamente com os atributos rows e cols. No exemplo também é mostrado o botão de reset (penúltima linha), que apaga todo o conteúdo do formulário. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 40 <form> Nome: <input type="text" name="usuario" /> <br /> Descrição: <br /> <textarea name="desc_usuario" rows="4" cols="64"> Insira a descrição do usuário. </textarea> <br /> <input type="reset" value="Limpar dados" /> </form> Formulários Botão de submissão - é o botão responsável por enviar o conteúdo do formulário ao servidor. O destino dos dados é especificado no atributo action do elemento form, cujo valor é uma URL. Normalmente,o servidor faz algo com os dados que são enviados. O atributo method determina qual o método de transmissão de dados - pela URL (get) ou pelo corpo da requisição (post). Utilizando get, os dados são inseridos na própria URL, como por ex.: http://www.site.com/services/insertUser?user="Alan"&sex="m". Utilizando post, os dados são enviados após a primeira requisição ao servidor, num stream que pode ter um tamanho grande (útil para arquivos). 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 41 <form name="input" action="/services/insertUser" method="get"> Nome do usuário: <input type="text" name="user" /> <br /> Sexo: <input type="radio" name="sex" value="m" /> Masculino <input type="radio" name="sex" value="f" /> Feminino <br /> <input type="submit" value="Submeter os dados" /> </form> Iframes São subquadros utilizados essencialmente para mostrar um conteúdo (outra página web) dentro de uma página web. Pode-se utilizar os atributos width e height para determinar a largura e a altura do iframe, respectivamente. Para remover a borda, pode-se utilizar o atributo frameborder com o valor "0". 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 42 <iframe src="iframe.html" width="200" height="200"></iframe>
  15. 15. 18/05/2012 15 Iframes Um iframe pode ser utilizado como alvo de um link. Assim, clicando-se no link, abre-se o conteúdo no iframe especificado. target é um atributo de a que indica onde será aberto o link. Seu valor pode ser o valor do atributo name ou id de outro elemento ou "_blank", indicando uma nova aba/janela. Nesse último caso, a W3C não recomenda o uso desse artifício de obrigar a abertura de um link em outra aba/janela, sugerindo ser melhor deixar a cargo do usuário essa escolha. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 43 <iframe name="iframe_a"></iframe> <p> <a href="http://www.google.com" target="iframe_a">Google</a> </p> Cores As cores em HTML são definidas através de uma sintaxe hexadecimal (HEX), que indica intensidade do vermelho, verde e azul (RGB - Red Green Blue). O menor valor que pode ser utilizado para cada uma das cores é 0 (em HEX: 00). O maior valor é 255 (em HEX: FF). Os valores hexadecimais são especificados em três pares de números de dois dígitos, iniciando com o símbolo #. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 44 Cores Exercício: codifique a tabela apresentada anteriormente em um documento HTML. Dica: na primeira linha da tabela, especifique a largura (width) da célula (th ou td) em porcentagem (%). Pode-se combinar os valores do RGB da forma como queira, sendo 16 milhões o total de cores possíveis. Experimente, por exemplo, apenas variar o valor do vermelho, fixando os valores do verde e do azul em zero. Há 147 nomes de cores suportados na especificação do HTML e CSS, sendo 17 cores padrão e 130 adicionais. São as cores padrão: aqua, black, blue, fuchsia, gray, grey, green, lime,maroon, navy, olive, purple, red, silver, teal, white e yellow. 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 45
  16. 16. 18/05/2012 16 Referências Relação de tags e suas características/atributos: http://www.w3schools.com/tags/default.asp Vários exemplos para reforçar/complementar: http://www.w3schools.com/html/html_examples.asp 5/18/2012Prof.M.Sc. Leandro Donaires Figueira 46

×