HTML. Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB. Claudinei Dias

Documentos relacionados
Introdução a HTML. André Tavares da Silva.

HTML Parte III. André Tavares da Silva.

Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011

Recursos Complementares (Tabelas e Formulários)

Tabelas Div Span Frames Formulários

HTML. Professor Victor Sotero. html

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011

O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2

17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce

</H1>... <H6>... </H6>

HTML Parte II. André Tavares da Silva.

PROGRAMAÇÃO EM AMBIENTE WEB I

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS

HyperText Markup Language HTML. Formulário

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

Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento,

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011

HTML Página 36. Índice

O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2

Autoria Web. Professor: Diego Oliveira. Conteúdo 03: Tags de Formulário

20/02/2014. <HTML> Introdução </HTML> Web

HyperText Markup Language HTML. Tabela

Tabelas. table <table>...</table>

HTML. Leonardo Gresta Paulino Murta

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

PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

Construção de sites Aula 1

4. Características Gerais das Tabelas do HTML

HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)

Desenvolvimento de Aplicações para Internet

Formulários [8] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Ferramentas para Multimídia e Internet

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)

PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes

TAGS. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. <tag>conteúdo da tag</tag>

Formulários. Etapa 1 Criação de formulários

Tarlis Portela Web Design HTML

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

Elementos Básicos HTML e Formatação de textos

Curso de PHP. - Início 22 de agosto. - Término 20 de outubro. - Aulas: segunda e quinta-feira - Horário:18h às 20h. - Carga horária do curso: 40h

XML e XSL. Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB. Claudinei Dias prof.claudinei.dias@gmail.com

Síntese da aula anterior

Curso PHP Básico. Jairo Charnoski do Nascimento

Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr>

Introdução à Tecnologia Web

Finalidade dos formulários

Programação para Internet I

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

Programação para Internet I

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

HTML: INTRODUÇÃO TAGS BÁSICAS

Programação e Designer para WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB

Dezembro/2012. Universidade Federal Fluminense. Curso de Introdução ao HTML. SeTel- Grupo PET-Tele. Adicionando links e imagens. Tabelas.

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos

Programação para Internet I

Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML

3. Construção de páginas web Introdução ao HTML

HTML: TEXTOS SUMÁRIO. Cabeçalhos para títulos e sub-títulos Parágrafos

Programação Web Aula 2 XHTML/CSS/XML

Autoria Web. Formulários Aula 5. Cleverton Hentz

O elemento para definição de uma tabela é <TABLE> sendo finalizada com </TABLE>. Este elemento prevê sub-elementos para sua composição.

Implementando e manipulando Tabelas

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

Desenvolvimento Web TCC Turma A-1

Internet & HTML Internet & HTML Pedro Costa / 2004

Links, Imagens e Tabelas

SIMULADOS & TUTORIAIS

Curso de HTML aula 4. Sumário. 1 Formulários. 1.1 Construindo formulários com o FORM. 1.2 Método:

Informática I. Aula 3. Aula 3-03/09/2007 1

TecWeb Tecnologias Web. Prof. Esp. Douglas Mariano dos Santos

Dreamweaver CC_15x21.indd 1 06/04/ :04:22

Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B

Fábio Borges de Oliveira. HTML HyperText Markup Language

- os dados entrados fazem parte do corpo da mensagem enviada para o servidor; - transfere grande quantidade de dados.

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

Introdução à linguagem HTML. Volnys Borges Bernal

Web Design Aula 10: Formulários - Parte2

Formatação de Textos e Caracteres

Adicionando mais tags HTML

INTRODUÇÃO A PROGRAMAÇÃO PARA WEB

HTML. Frames e FORMs

HTML & CSS. uma introdução

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

<title>introdução a HTML</title>

Treinamento em HTML. Índice

HTML (HyperText. Markup Language)

HTML HyperText Markup Language

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira

Transcrição:

Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB HTML Prof. Claudinei Dias email: prof.claudinei.dias@gmail.com

HTML HiperText Markup Language Linguagem de programação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos) 2/58

NAVEGADORES (BROWSERS) Apesar de existir uma norma internacional para definição da HTML, nem todos os navegadores (browsers) exibem uma mesma página igualmente. Por isso, quando as páginas são disponibilizadas em servidores, é necessário testá-las nos diferentes browsers. Essa edição deve ser feita utilizando o modo comando, já que não se tem controle da forma com que os editores salvam as páginas. Por esse motivo, é necessário conhecer os comandos HTML para edição neste modo. 3/58

Tags HTML Todo documento HTML é composto de tags (etiquetas/rótulos). Cada elemento de texto (palavra, frase, parágrafos) são rotulados por meio de tags, cuja estrutura possui normalmente início e fim. Uma página HTML deve começar com a tag <HTML> e terminar com </HTML>. O nome da tag é escrita entre os sinais de menor que (<) e maior que (>). A tag de fechamento inicia com uma barra (/) para se diferenciar da tag de início. Por exemplo, a tag "i" serve para indicar que o texto entre seu início e final está em itálico. Exemplo: <i>este texto está em itálico</i>. 4/58

Tags HTML Após iniciar o documento com a tag <HTML> você deve incluir o cabeçalho que é feito com as tags <HEAD> </HEAD>. E também um título usando o par <TITLE>... </TITLE>. Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para intitular a janela de visualização. O "corpo" do documento deve ser demarcado pelo par <BODY>... </BODY>. É nesta parte do documento que serão colocados todos os comandos para apresentação de uma página HTML. 5/58

Exemplo de HTML mínimo Um documento simples seria digitado da seguinte maneira: <HTML> <HEAD> <TITLE>Exemplo de HTML</TITLE> </HEAD> <BODY> Aqui comandos em HTML que compõe a página. </BODY> </HTML> 6/58

Tags para formatação de texto Exemplos de tags para formatação de texto: <b>negrito</b> <i>itálico</i> <u>sublinhado</u> <center>centralizado</center> Negrito Itálico Sublinhado Centralizado 7/58

Parágrafos Em HTML são necessários comandos para definir parágrafos. Não basta simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. É preciso colocar uma tag para um parágrafo ou para uma linha nova. A tag <BR> indica uma quebra de linha. Note que não é necessário finalizar a tag, pois ela apenas indica a posição da quebra de linha. 8/58

Parágrafos A tag <P> e </P> define um parágrafo em HTML. Em algumas tags, é possível inserir atributos. Podemos definir o alinhamento do parágrafo na tag <P> através do parâmetro align. Os atributos são: Left: Alinhamento à esquerda Rigth: Alinhamento à direita Center: Centralizado Justify: Texto justificado 9/58

Parágrafos - Exemplo <p align="left">texto alinhado à esquerda</p> <p align="right">texto alinhado à direita</p> <p align="center">texto centralizado</p> <p align="justify">texto justificado</p> Texto alinhado à esquerda Texto alinhado à direita Texto centralizado Texto justificado 10/58

Formatação da Fonte A tag <FONT> permite definir tamanho, estilo e cor do texto. A tag <FONT> normalmente pode ser substituída por CSS. Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Porém, vamos estudar como formatar um texto usando apenas HTML. 11/58

Tipo/estilo da Fonte O atributo face define qual a fonte será utilizada para exibir o texto entre as tags <FONT> e </FONT>. Exemplo: <font face= arial">escrito em Arial.</font> <font face= courier">escrito em Courier.</font> <font face= times">escrito em Times.</font> <font face="verdana">escrito em Verdana.</font> 12/58

Tamanho da fonte O atributo size define o tamanho do texto. Esse valor é definido entre 1 e 7. <font size= 5 >Este texto é grande</font> Também é possível utilizar as seguintes tags para modificação do texto, em substituição da tag <FONT>: <BIG> - Aumenta a fonte e atribui negrito. Exemplo: <BIG>Texto GRANDE</BIG> <SMALL> - Reduz e altera a fonte. Exemplo: <small>texto pequeno</small> <SUP> - Faz com que o texto fique sobrescrito. Exemplo: <sup>texto sobrescrito</sup> <SUB>- Faz com que o texto fique subscrito. Exemplo: <sub>texto subscrito</sub> 13/58

Cor da fonte O atributo color define a cor do texto. É possível usar nomes de cores, definidos oficialmente, como yellow ou orange. Mas se necessitar usar outras cores, é possível usar seu código hexadecimal após o sinal de #. Exemplo: <font color= #FF00CC >texto de outra cor</font>. Outros nomes de cor: http://www.ironspider.ca/format_text/fontcolor.htm 14/58

Listas A HTML suporta listas com e sem numeração. Listas com numeração são definidas entre as tags <OL> e </OL>, enquanto as listas sem numeração entre <UL> e </UL>. A tag <LI> indica o início de cada item (assim como <BR> ela não necessita ser finalizada). <OL> <LI> Primeiro item de uma lista ordenada <LI> Segundo item de uma lista ordenada <LI> Terceiro item de uma lista ordenada </OL> <UL> <LI> Primeiro item de uma lista não ordenada <LI> Segundo item de uma lista não ordenada <LI> Terceiro item de uma lista não ordenada </UL> 1. Primeiro item de uma lista ordenada 2. Segundo item de uma lista ordenada 3. Terceiro item de uma lista ordenada - Primeiro item de uma lista não ordenada - Segundo item de uma lista não ordenada - Terceiro item de uma lista não ordenada 15/58

Imagens A tag para inserir uma imagem em sua página é <IMG>. Exemplo: <img src= arquivo de imagem > src é a sigla de source que significa fonte/origem. Essa tag não possui fechamento! 16/58

Imagens - Atributos Width: Largura da imagem Height: Altura da imagem Border: Tamanho da borda da imagem. Alt: Texto alternativo. Aparece antes de carregar a imagem. <img src="orbita.gif alt= Orbita border= 1 width="100" height="50"> 17/58

Links A principal característica da linguagem HTML vem de sua capacidade de interligar parte de um texto e imagens a outros documentos. Os navegadores exibem em destaque estas áreas, colocando os textos de cores diferentes e sublinhados e, as figuras com borda de cor diferente. Estes pontos chaves são denominados links ou hipertextos. A marcação <a> define o ponto de partida dos links e é denominada âncora. 18/58

Links Para incluir uma âncora em seu documento deve-se proceder da seguinte forma: Inicie a âncora com <a (há um espaço depois de a) Digite o parâmetro href="nome_do_arquivo"> Insira o texto (para links clicados em um texto) que vai funcionar como âncora para o documento seguinte ou insira o tag de colocação de imagens que você aprendeu no item anterior (para links clicados em uma imagem) na figura que você quer que funcione como âncora. Digite </a> para finalizar o texto que serve de link e depois continue o seu texto normalmente. 19/58

Links - Exemplo Clique <a href= http://www.joinville.udesc.br">aqui</a> para acessar o site da UDESC-Joinville. Clique aqui para acessar o site da UDESC-Joinville. 20/58

Tabela As tags <TABLE> e </TABLE> indicam o início e final de uma tabela. Cada linha é delimitada pelas tags <TR> e </TR>. As tags <TH> e </TH> indicam que as colunas são do tipo título (normalmente as colunas da primeira linha), enquanto as colunas normais são delimitadas por <TD> e </TD>. 21/58

Tabela - Exemplo <TABLE WIDTH=100% BORDER=1> <TR> <TH WIDTH=34%>Descrição</TH> <TH WIDTH=34%>Valor</TH> <TH WIDTH=34%>Total</TH> </TR> <TR> <TD WIDTH=33%>Primeira linha</td> <TD WIDTH=33%>1</TD> <TD WIDTH=33%>1</TD> </TR> <TR> <TD WIDTH=33%>Segunda linha</td> <TD WIDTH=33%>2</TD> <TD WIDTH=33%>3</TD> </TR> </TABLE> Descrição Valor Total Primeira linha Segunda linha 1 1 2 3 22/58

Tabela Outros Elementos Uma tabela também pode conter um título ou texto explicativo. Isso é realizado utilizando a tag <CAPTION> e </CAPTION>. <TABLE WIDTH=100% BORDER=1> <CAPTION>Tabela com titulo</caption> <TR> <TH WIDTH=34%>Descrição</TH> <TH WIDTH=33%>Valor</TH> <TH WIDTH=33%>Total</TH> </TR> <TR> <TD WIDTH=34%>Primeira linha</td> <TD WIDTH=33%>1</TD> <TD WIDTH=33%>1</TD> </TR> <TR> <TD WIDTH=34%>Segunda linha</td> <TD WIDTH=33%>2</TD> <TD WIDTH=33%>3</TD> </TR> </TABLE> Tabela com titulo Descrição Valor Total Primeira linha 1 1 Segunda linha 2 3 23/58

Tabela Mesclando Colunas Colspan é a abreviação para "column span". Colspan é usada nas tags <td> ou <th> para indicar quantas colunas estarão contidas em uma mesma célula. Exemplo, colspan=2 significa que a célula ocupará o espaço de duas colunas. 24/58

Tabela Mesclando Colunas <TABLE BORDER=1> <CAPTION>Tabela com titulo</caption> <TR> <TH WIDTH=34%>Coluna 1</TH> <TH WIDTH=33%>Coluna 2</TH> <TH WIDTH=33%>Coluna 3</TH> </TR> <TR> <TD COLSPAN=2>Junta duas colunas</td> <TD>1</TD> </TR> <TR> <TD COLSPAN=3>Junta 3 colunas</td> </TR> </TABLE> Tabela com titulo Coluna 1 Coluna 2 Coluna 3 Junta duas colunas 1 Junta 3 colunas 25/58

Tabela Mesclando Linhas Rowspan especifica quantas linhas estarão contidas em uma célula. Ela pode ser usada nas tags <th> e <td>. Exemplo, rowspan=2 significa que a célula ocupará o espaço de duas linhas. 26/58

Tabela Mesclando Linhas <TABLE BORDER=1> <CAPTION>Tabela com titulo</caption> <TR> <TH WIDTH=34%>Coluna 1</TH> <TH WIDTH=33%>Coluna 2</TH> <TH WIDTH=33% rowspan=3>coluna 3</TH> </TR> <TR> <TD>1</TD> <TD rowspan=2>2</td> </TR> <TR> <TD>3</TD> </TR> </TABLE> Tabela com titulo Coluna 1 Coluna 2 1 Coluna 3 3 2 27/58

Tabela Mesclando Células <TABLE border="1"> <TR> <TH rowspan=2> </TH> <TH colspan=2>média</th> <TH rowspan=2> Cabelos <BR> castanhos</th> </TR> <TR> <TH>altura</TH><TH>peso</TH> </TR> <TR> <TH> Masculino </TH><TD>1.9</TD> <TD>78<TD>70%</TD> </TR> <TR> <TH>Feminino</TH> <TD>1.7<TD> 65</TD> <TD> 63%</TD> </TR> </TABLE> Tabela com titulo Média Altura Peso Masculino 1,9 78 70% Feminino 1,7 65 63% Cabelos castanhos 28/58

Layout com tabelas Uma prática muito utilizada em HTML, é usar tabelas para formatar o layout de uma página. Um exemplo é usar duas colunas para formatar a página como em um jornal. Também é comum utilizar outras tabelas dentro de uma célula, a fim de reduzir a utilização de colspan s e rowspan s. 29/58

Tabela Mesclando Células <TABLE border="1"> <TR> <TH> </TH> <TD colspan=2> <TABLE border="1"> <TR><TH colspan="2">média</th></tr> <TR><TH>altura</TH><TH>peso</TH> </TR> </TABLE> </TD> <TH>Cabelos<BR>castanhos</TH> </TR> <TR> <TH>Masculino</TH><TD>1.9</TD><TD>78<TD> 70%</TD> </TR> <TR> <TH>Feminino</TH><TD>1.7<TD>65</TD><TD>6 3%</TD> </TR> </TABLE> Tabela com titulo Média Altura Peso Masculino 1,9 78 70% Feminino 1,7 65 63% Cabelos castanhos 30/58

Tag BODY - Formatação Cores de textos da página <BODY TEXT="#rrggbb" LINK="#rrggbb VLINK="#rrggbb" ALINK="#rrggbb"> text = texto normal da página link = links da página vlink = links consultados na página alink = links ativados na página 31/58

Tag BODY - Formatação Parâmetro BACKGROUND imagens como papel de parede no fundo da página <BODY BACKGROUND = "IMAGEM.GIF"> O fundo da página acompanhará o movimento da tela com <BODY BACKGROUND = "PISO.GIF BGPROPERTIES= "FIXED"> O fundo da sua página ficará estático e apenas o conteúdo da sua página irá se mover 32/58

Tabela - Formatação BORDER = <value> define a largura da borda CELLSPACING = <value> define espaçamento entre células CELLPADDING = <value> define distância entre o texto e a borda das células WIDTH = <value or percent> determina o quanto da tela uma tabela deve ocupar BGCOLOR = <cor> define a cor de fundo da tabela ou da célula 33/58

Tabela - Formatação <valign> = controla o alinhamento vertical do texto associado a TR, TD ou TH top = alinha com o alto da célula middle = alinha no meio bottom = alinha com a parte de baixo da célula 34/58

Formatação de textos Tag <HR> Cria uma linha horizontal Quebra entre um item de informação e outro Atributos de largura e altura <HR SIZE=8 WIDTH=80%> WIDTH indica que a linha ocupará 80% da largura da janela do browser SIZE indica que será exibida uma linha com 8 pixels de espessura 35/58

Formatação de textos Tags <H1> a </H6> Espécie de cabeçalho com padrões de formatação prontos Negrito e determinado tamanho, além de colocar uma linha em branco após o texto Após o TAG <H> deve vir um número de 1 a 6 indicando o tamanho da fonte Sendo que 1 é o maior tamanho e 6 o menor <H1> Cabeçalho Grande </H1> <H6> Cabeçalho Pequeno </H6> 36/58

Acentuação / Caracteres Especiais Notações especiais para ser exibidas em tela Iniciam por & (e comercial) e encerram-se com ; (ponto e vírgula) < Maior que > > Menor que < & E comercial & " aspas duplas Acento agudo: &xacute; onde x é uma letra qualquer Acento grave: &xgrave; Acento circunflexo: &xcirc; Letra com til: &xtilde; Letra com trema: &xuml; Letras unidas: &Aelig; = Æ e æ = æ Letra com argola: Å = Å e &aring = å Cedilha: &ccedil= ç N com til: Ñ = Ñ e ñ = ñ O cortado: Ø = Ø e ø = ø 37/58

Frames (quadros) Os frames são divisões da tela do browser em diversas telas (ou "quadros"). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte. Não é difícil colocar frames em páginas; porém, nem todos os usuários gostam deles, pois sua navegação não é fácil, além de apresentar problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks (favoritos). A alternativa natural para os frames são as tabelas. 38/58

Frames (quadros) A tag <FRAMESET> define a divisão da página em quadros e substitui a tag <BODY>. Nela pode haver o atributo cols ou o atributo rows. Se a página for dividida em mais de uma coluna, usa-se o atributo cols e rows caso a página seja dividida em linhas. Nos valores de atributo, é indicado o tamanho de cada linha/coluna. Dentro da formatação de FRAMESET, temos as tags <FRAME> das páginas que serão mostradas nos frames definidos pelo atributo src. 39/58

Frames (quadros) <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="indice1.html"> <FRAME SRC="apresenta.html" NAME="principal"> </FRAMESET> </HTML> Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela). 40/58

Animações, Vídeos e outras mídias Para embutir arquivos de diferentes mídias, como animações em flash e vídeo, usa-se a tag <EMBED></EMBED>. Atributos: src: informa o endereço do objeto a ser inserido na página; type: o tipo do objeto height: a altura do objeto. width: a largura do objeto. Também podem ser usados atributos como: hspace: informa o espaçamento horizontal entre o objeto e o texto. vspace: informa o espaçamento vertical entre o objeto e o texto. hidden: marca o objeto como escondido (true) ou não (false) autostart: executa automaticamente o objeto (true) ou não (false) loop: se o objeto repetirá ao chegar no final (true) ou não (false) pluginspage: caso o plugin necessário para rodar o objeto não estiver instalado, informa qual a página que o usuário deverá baixá-lo. 41/58

iframe (inline frames) O iframe é uma tag que cria um frame dentro da página HTML, em vez de "dividir" a página. É muito utilizado para exibir um conteúdo específico dentro de uma página como um texto ou arquivo multimídia. <iframe width="420" height="345" src="http://www.youtube.com/embed/mozqrjze8xg" frameborder="0" allowfullscreen></iframe> 42/58

Formulários São estruturas que permitem que usuários submetam dados a uma página. Esses dados podem ser tratados e/ou armazenados dependendo da aplicação. Os formulários são caixas de texto e botões que podemos encontrar em muitas páginas web. São muito utilizados em sites de comércios eletrônico e cadastros. Os formulários são definidos por meio das tags <form> e </form>. Entre estas duas tags colocaremos todos os campos e botões que compõem o formulário. Dentro de <form> devemos especificar alguns atributos como Action e Method. 43/58

Formulários - Atributos Method - Informa como os dados são enviados, podendo ser de dois tipos: Get expõe o nome e valor das variáveis, podendo ser utilizado por pessoas com más intenções (deve ser evitado). Post passa as variáveis de maneira transparente para o usuário. É o método mais aconselhável. Action: define o tipo de ação a realizar com o formulário. Existem duas possibilidades: O formulário é enviado a um endereço de correio eletrônico. <form ction="mailto:endereço@correio.com" > O formulário é enviado a um programa ou página que processa seu conteúdo. <form action="cria_cadastro.php" > 44/58

Exemplo (formulário vazio) <form action="pagina.php" method="post">... conteúdo do formulário... </form> 45/58

Elementos do Formulário Os elementos do formulário devem ser inseridos entre as tags <form> e </form>. Podemos inserir vários tipos de entrada de dados em um formulário, a maioria delas definida pela tag input. Todo elemento possui um parâmetro name que é utilizado para identificar a variável onde o dado está contido. 46/58

Elementos do Formulário Campo de Texto (text): Campo para entrada de texto comum. <input type="text" name="cidade" value=joinville size="15" maxlenght="15"> Parâmetros: value - atribui um valor inicial para o campo; size - especifica o tamanho do campo; maxlenght - especifica o número máximo de caracteres aceitos pelo campo. 47/58

Elementos do Formulário Campo Senha (password): Tipo de campo similar ao anterior, mas quando o usuário digita, os caracteres são substituídos por *. <input type= password" name= minhasenha size="15" maxlenght="15"> Parâmetros: size - especifica o tamanho do campo; maxlenght - especifica o número máximo de caracteres aceitos pelo campo. 48/58

Elementos do Formulário Campo Oculto (hidden): semelhante ao text, porém, invisível para o usuário. Usado para passar informações ao servidor (quando o formulário for submetido) sem que o usuário tome conhecimento. <input type=hidden name=pgname value="test"> Parâmetros: name - nome do campo; value - atribui um valor para o campo; 49/58

Elementos do Formulário Botão de Checagem (CheckBox): utilizado para entradas de múltipla escolha onde o usuário pode escolher várias opções. Cada opção deve ter um nome independente. Obs.: Apenas a caixa de checagem é mostrada. Para colocar um texto, basta escrever o texto após a tag. <input type="checkbox" name="disciplina" value="matematica" checked>matemática <input type="checkbox" name="disciplina" value="estatistica">estatística <input type="checkbox" name="disciplina" value="fisica">física Parâmetros Checked - Se for declarado, o elemento terá seu estado inicial marcado. Value - É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado. 50/58

Elementos do Formulário Radio é mais um formulário de múltipla escolha, mas nesse caso o usuário poderá escolher apenas uma opção. Os parâmetros seguem o mesmo roteiro do checkbox. <input type="radio" name="sexo" value="f" checked>feminino <input type="radio" name="sexo" value="m">masculino Parâmetros Checked - Se for declarado o elemento terá seu estado inicial como marcado. Value - É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado. 51/58

Botões Botão (button): Utilizado para chamar funções que rodam no browser (Javascript). Submeter (submit): enviará as opções ou informações digitadas ao servidor/email (definido no parâmetro action do formulário). Restaura (reset): restaura o valor padrão de todos os campos de um formulário. <input type="button" value="botão"> <input type="reset" value="restaura Valores"> <input type="submit" value="envia Valores"> Parâmetros: Value texto do botão 52/58

Área de texto A tag <textarea> permite a entrada de um texto no estilo Memo, com várias linhas. Obs.: não existe o parâmetro value, o texto inicial deve ser definido entre as tags <textarea> e </textarea>. <textarea name="opiniao" rows="5" cols="40"> digite aqui sua avaliação deste curso </textarea> Parâmetros: Cols Número e caracteres por linha. Rows Número de linhas do campo. 53/58

Caixas de texto Listbox e Combobox são definidos pela tag <select>. A diferença básica entre eles consiste na existência ou não do parâmetro size (que especifica o número de linha exibidas). Se inserirmos esse parâmetro, estaremos construindo um listbox; senão especificarmos um combobox. Cada tag <option> acrescenta uma linha (opção) ao componente. 54/58

Combobox Caixa de texto padrão. <select name="paisfavorito"> <option value="alemanha">alemanha</option> <option value="espanha">espanha</option> <option value="franca">frança</option> <option value="inglaterra">inglaterra</option> <option value="italia">itália</option> <option value="portugal">portugal</option> </select> 55/58

Listbox <select name="paises" size = "4" multiple> <option value="alemanha">alemanha</option> <option value="espanha">espanha</option> <option value="franca">frança</option> <option value="inglaterra">inglaterra</option> <option value="italia">itália</option> <option value="portugal">portugal</option> </select> Parâmetro: Em uma listbox, o parâmetro multiple permite a seleção de mais de uma linha (usando a tecla control) 56/58

Bibliografia da Disciplina BIBLIOGRAFIA BÁSICA: GUIZZO, Érico M. Internet O que é, o que oferece, como conectar-se. São Paulo. Ática, 1999. HONEYCUTT, Jerry. Usando a Internet. Rio de Janeiro. Campus, 1998. MARCON, Antônio M. Aplicações e banco de dados para Internet. São Paulo. Érica, 1999. MORAIS, Marcio S. Como publicar seu site na Internet. Rio de Janeiro. Brasport, 2001. NIELSEN, Jakob. Projetando Websites. Tradução: GIBSON, Ana de. Designing Web Usability. Rio de Janeiro, Campus, 2000. WATERS, Crystal. WEB, concepção & design: um guia abrangente para criar páginas na teia. São Paulo, Editora Quark, 1996. BIBLIOGRAFIA COMPLEMENTAR: ALBUQUERQUE, Fernando. TCP/IP Internet: protocolo & tecnologia. Rio de Janeiro. Axcel Books, 2001. ANSELMO, Fernando. PHP e MySQL para Windows. Florianópolis. Visual Books, 2000. ATRI, Maurício. Internet2: a próxima geração. São Paulo. Market Books, 1999. MANDEL, Theo. The elements of user interface design. Canada. John Wiley & Sons, Inc. 1997. MARTIN, Chuck. O futuro da internet: como se posicionar estrategicamente para a conquista de mercados e clientes em um novo mundo interligado na Internet. São Paulo. Makron Books, 1999. MELONI, Julie C. Fundamentos em PHP. Rio de Janeiro. Ciência Moderna Ltda. 2000. MORAIS, Marcus Garcia de. Internet, Intranet e redes corporativas. Rio de Janeiro. Brasport, 2000. RATSCHILLER, Tobias; GERBEN, Till. Desenvolvendo aplicações na Web com PHP 4.0. Rio de Janeiro. Editora Ciência Moderna Ltda. 2000. SILVA, Luciano C. da. Banco de dados para a Web do planejamento à implementação. São Paulo, Érica, 2001. 57/58

Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB HTML Prof. Claudinei Dias email: prof.claudinei.dias@gmail.com Slides do prof. André Tavares da Silva