Programação Web Prof. Wladimir

Tamanho: px

Começar a partir da página:

Download "Programação Web Prof. Wladimir"

Lucinda Aragão Rosa
10 Há anos
Visualizações:

1 Programação Web Prof. Wladimir Linguagem HTML Listas e 1

2 Sumário Listas Revisão da tag <form> Criação de formulários 2

3 Listas As listas são utilizadas para citar, numerar e definir objetos. Também são utilizadas correntemente para deslocar o começo da linha para a direita. Podemos distinguir três tipos de listas: Listas desordenadas; Listas ordenadas; Listas de 3

4 Listas desordenadas São delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista é citado por meio de uma etiqueta <li> (sem fechamento, ainda que exista nenhum inconveniente em colocá-lo). Então, fica assim: <p>países do mundo</p> <ul> <li>brasil</li> <li>espanha</li> <li>austrália</li> </ul> O 4

ainda que exista nenhum inconveniente em colocá-lo).

5 Listas desordenadas Colocar marcadores: <ul type="tipo de marcador"> E o tipo de marcador pode ser um dos seguintes: Circle; Disc; Square. Em alguns navegadores não funciona a opção de mudar o tipo de marcador e por mais que nos empenhemos, sempre sairá a bolinha 5

Em alguns navegadores não funciona a opção de mudar o tipo de marcador

6 Listas ordenadas Usa-se as etiquetas <ol> (ordered list) e seu fechamento. Cada elemento será igualmente precedido de sua etiqueta <li>. Como exemplo: <p>regras de comportamento no trabalho</p> <ol> <li>o chefe sempre tem a razão</li> <li>em caso de dúvida, aplicar a regra 1</li> </ol> O resultado 6

Como exemplo: <p>regras de comportamento no trabalho</p> <ol> <li>o chefe

7 Listas desordenadas Colocar marcadores: <ol type="tipo de marcador"> E o tipo de marcador pode ser um dos seguintes: 1 Para ordenar por números; a Por letras do alfabeto; A Por letras maiúsculas do alfabeto i Ordenação por números romanos em minúsculas I Ordenação por números romanos em 7

letras do alfabeto; A Por letras maiúsculas do alfabeto i Ordenação por

8 Listas de definição A definição principal é <dl> e </dl> (definition list). As etiquetas do elemento e sua definição são <dt> (difinition term) e <dd> (definition definition) respectivamente. <p>dicionário da Língua Portuguesa</p> <dl> <dt>açougue</dt> <dd>estabelecimento onde se vendem carnes frescas</dd> <dt>colheita</dt> <dd>ato de colher os produtos agrícolas</dd> </dl> O efeito 8

9 Listas de definição <dl> <dd>primeiro nível de deslocamento <dl> <dd>segundo nível de deslocamento <dl> <dd>terceiro nível de deslocamento </dl> </dl> 9

10 Combinando listas <p>cidades do mundo</p> <ul> <li>brasil <ol> <li>rio de Janeiro <li>salvador </ol> <li>espanha <ol> <li>madrid <li>barcelona </ol> 10

11 Revisão da tag <form> Revisão da tag <form>: name: o identificador do formulário. action: serve para definir o tipo de ação que o formulário deve seguir, ou seja, podemos enviar o formulário para um endereço de correio ou uma página de script. method: fica encarregado de especificar a forma que o mesmo é enviado. enctype: formato em que os dados serão enviados. O default é urlencoded. Se for utilizado um elemento do tipo upload de arquivo (file) é preciso utilizar o tipo 11

de correio ou uma página de script. method: fica encarregado de especificar a forma que o mesmo é enviado.

12 Criação de formulários HTML Passo 1 = Criar o código base da página HTML e salvar com o nome formulário.html. <html> <head><title>criação de Formulários</title></head> <body> <center> <h2>criação de Formulários</h2> <br><br> </center> </body> 12

<html> <head><title>criação de Formulários</title></head> <body>

13 13

14 Criação de formulários HTML Passo 2 = Criar as tags <form></form> e inserir botões e campos que fazem parte do formulário entre as mesmas. <body> <center> <h2>criação de Formulários</h2> <br><br> <form action="mailto:[email protected] method="post"> </form> Executem o site HTML! </center> 14

<body> <center> <h2>criação de Formulários</h2> <br><br> <form

15 Criação de formulários HTML Passo 3.1 = Inserir as caixas de texto, ou seja, os campos de texto onde o usuário irá digitar a informação. Qual é a tag que insere um campo de 15

16 Criação de formulários HTML Revisão input: Parâmetros: Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada; Size - O tamanho do elemento na tela, em caracteres; Maxlength - O tamanho máximo do texto contido no elemento, em 16

carregada; Size - O tamanho do elemento na tela, em caracteres;

17 Criação de formulários HTML Passo 3.1 <body> <center> <h2>criação de Formulários</h2> <br><br> <form method="post"> </form> </center> </body> <input type="text" name="formulario"> Onde iremos inserir a tag 17

18 Criação de formulários HTML formulario.html Passo 18

19 Criação de formulários HTML Passo 3.1 <body> <center> <h2>criação de Formulários</h2> <br><br> <form method="post"> <input type="text" name="formulario name="formulario"> size="60" maxlength="20"> </form> </center> </body> Inserir o parâmentro size e 19

20 Criação de formulários HTML formulario.html Passo 20

21 Criação de formulários HTML Passo 3.1 Qual a função do parâmetro value? <input type="text" name="formulario size="60" maxlength="20 value= Wladimir 21

22 formulario.html 22

23 Criação de formulários HTML Passo 3.2 Modifiquem o valor de type para password? <input type= password" name="formulario size="60" maxlength="20 value= Wladimir 23

24 24

25 Criação de formulários HTML Passo 3.3 Se precisar de textos grandes com diversas linhas qual é tag a ser utilizada?? Revisão Textarea: Parâmetros: Cols - número de colunas do campo, em caracteres; Rows - número de linhas do campo, em 25

26 Criação de formulários HTML Passo 3.3 Insira uma textarea com 20 linhas e 10 colunas. <textarea rows="20" col="10"> 26

27 27

28 Criação de formulários HTML Passo 3.3 Coloquem um texto inicial no textarea! <textarea rows="20" col="10"> Digite o texto aqui 28

29 29

30 Criação de formulários HTML Passo 3.4 Como criar uma lista de opções? Revisão Select: Parâmetros: size - número de linhas exibidas. Default: 1; multiple - parâmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, através das teclas Control ou Shift; option - Cada item do tipo "option" acrescenta uma linha ao select; value - Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item; text - valor a ser exibido para aquele item. Não é definido por um parâmetro, mas pelo texto que fica entre as tags <option> e 30

31 Criação de formulários HTML Passo 3.4 <select name="diasemana"> <option> Segunda </option> <option> Terça </option> <option> Quarta </option> <option> Quinta </option> <option> Sexta </option> <option> Sábado </option> <option> Domingo </option> </select> Inserir os parâmetros size e multiple! <select name= diasemana size= 3 multiple 31

32 32

33 Criação de formulários HTML Passo 3.5 Qual a Tag utilizada para realizar uma enquete? Revisão Radio: Parâmetros: Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado Checked - O estado inicial do elemento. Quando presente, o elemento já aparece 33

34 Criação de formulários HTML Passo 3.5 Exemplo: <input type="radio" name="serie" value="1"> Heroes <input type="radio" name="serie" value="2"> Prison Break <input type="radio" name="serie" value="3"> 24 horas <input type="radio" name="serie" value="4"> Jericho <input type="radio" name="serie" value="5"> Lost <input type="radio" name="serie" value="6"> 34

35 35

36 Criação de formulários HTML Passo 3.5 Teste: Modifiquem os names <input type="radio" name="serie" value="1"> Heroes <input type="radio" name="serie" value="2"> Prison Break <input type="radio" name="serie" value="3"> 24 horas <input type="radio" name="serie2" value="4"> Jericho <input type="radio" name="serie2" value="5"> Lost <input type="radio" name="serie2" value="6"> 36

37 37

38 Criação de formulários HTML Passo 3.6 Qual outra Tag utilizada para multiplas seleções? Revisão Checkbox: Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado Checked - O estado inicial do elemento. Quando presente, o elemento já aparece 38

39 Criação de formulários HTML Passo 3.6 Exemplo: <input type="checkbox" name="serie" value="1"> Heroes <input type="checkbox" name="serie" value="2"> Prison Break <input type="checkbox" name="serie" value="3"> 24 horas <input type="checkbox" name="serie" value="4"> Jericho <input type="checkbox" name="serie" value="5"> Lost <input type="checkbox" name="serie" value="6"> 39

40 40

41 41

Documentos relacionados

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