2 - html_parte2 Fatec.000000000000000pdf

LISTA NÃO ORDENADA
<ul>
<li> Lista cada um dos subitens da lista </li>
</ul>
 Exemplo:
<ul>
<li> Curitiba </li>
<li> São Paulo </li>
<li> Rio de Janeiro </li>
</ul>
2

ATRIBUTO DE UL
1 - TYPE:
Indica qual símbolo deve ser usado para
demarcar cada elemento da lista. Pode ser os
valores "DISC" , "CIRCLE" ou "SQUARE"
Obs: Caso não especifique o TYPE do UL
será colocado automaticamente o símbolo "DISC"
como aconteceu no exemplo acima. O "DISC" será
uma bolinha preta, o CIRCLE" será uma bolinha
sem preenchimento e o "SQUARE" será um
quadradinho preto.
3

EXEMPLOS
<ul type="disc">
<li> Curitiba </li>
</ul>
<ul type="circle">
<li> Curitiba </li>
</ul>
4

LISTAS ORDENADAS
<ol>
<li> Lista cada um dos subitens da lista </li>
</ol>
Exemplo:
<ol>
<li> Curitiba </li>
</ol> 5

ATRIBUTOS DE OL
1 - START:
Especifica o número do primeiro elemento da lista.
Exemplo:
<ol start="10">
<li> Curitiba </li>
</ol>
Obs: Se não for especificado o atributo START o
primeiro elemento recebera o numero 1 e o segundo o
2 e assim por diante. 6

ATRIBUTOS DE OL
2 - TYPE:
Define o tipo de numeração aplicada na lista.
Exemplo:
<ol type="A">
<li> Curitiba </li>
</ol>
OBS: Assim em vez de 1, 2, 3 ... Serão exibidos os
caracteres A, B, C ...
7

FORMULÁRIOS
Formulários estão presentes na Internet para
possibilitar cadastros, pesquisas, envio de
comentários, aumentando o poder de interação com
os visitantes dos sites. Um formulário HTML é uma
página Web que contém, além de texto, elementos
especiais chamados controles, representados por
caixas de checagem, botões, caixas de seleção,
campos de textos, etc.
8

FUNCIONAMENTO DOS FORMULÁRIOS
 Os usuários preenchem os campos do formulário
submetendo-o, em seguida, a algum agente de
processamento. Neste momento, todas as
informações fornecidas são enviadas à um
programa escrito especialmente para processar
esses dados de acordo com alguma necessidade e
especificação.
 Em alguns casos os dados são gravados em um
Banco de Dados (BD), em outros casos uma nova
página e construída, em outros ainda as
informações são encaminhadas via e-mail.
9

TAG <FORM>
Exemplo:
<html>
<head>
<title>exemplo de formulário</title>
</head>
<body>
<form>
Aqui irão entrar os campos de formulário
</form>
</body>
</html>
10

PRINCIPAIS ATRIBUTOS DA <FORM>
1 – NAME, METHOD e ACTION
<form name=”nome do formulário” method=”método”
action=”elemento que irá receber as informações”>
elementos do formulário
</form>
 NAME: Especifica o nome do formulário. Útil em casos
de validação dos campos, por exemplo, quando se utiliza
uma linguagem de scripts como JavaScript.
 METHOD: Método que define como os dados serão
transmitidos para o programa que irá processa-los.
Devem ter valores GET ou POST.
 ACTION: Indica o endereço do programa/página que
receberá os dados do formulário.
11

EXEMPLO
<form name=”maladireta” method=”post”
action=”maladireta.php”>
<form>
12

MÉTODO GET
 Usado para enviar pequenas quantidades de
informação.
 Capacidade de envio é limitada.
 O método GET usa a barra de endereços do navegador
para enviar informações para o servidor.
 Possui um limite de caracteres, sendo que o excedente
acaba se perdendo durante a transmissão.
 É o método mais rápido e também o menos seguro, pois
as informações enviadas através deste método ficam
explicitamente visíveis na barra de endereços.
Informações confidenciais (senhas, números de cartões,
etc.) tornam-se visíveis a qualquer pessoa. 13

MÉTODO POST
 Oposto ao GET, as informações são enviadas de forma
mais segura, possibilitando o uso de criptografia e
outros recursos de segurança. Não há um limite para a
quantidade de informações que pode ser enviada
através deste método, porém, é o mais lento.
14

FORMULÁRIOS USANDO GET E POST
Para utilizar qualquer um dos dois métodos
mencionados para enviar informações de um
formulário, devemos declará-lo dentro da tag <form>,
como nos exemplos a seguir:
<form action=”script.php” method=”GET”>
<!– exemplo usando GET -->
</form>
<form action=”script.php” method=”POST”>

</form> 15

MARCADORES RELATIVOS AOS CAMPOS DE
FORMULÁRIO
A tag <input> é utilizada para indicar um novo
campo de entrada no formulário. O tipo do input é
configurado pelo atributo type.
1 – INPUT, TYPE, NAME, VALUE, MAXLEGNGTH e
CHECKED
Exemplo:
<input type=”tipo” name=”nome” value=”valor”
size=”tamanho em pixels” maxlength=”tamanho máximo
em pixel”> 16

MARCADORES RELATIVOS AOS CAMPOS
DE FORMULÁRIO
 INPUT: Especifica um campo de entrada de dados.
 TYPE: Atributo mais importante do marcador por definir o
tipo de elemento a ser inserido no formulário.
 NAME: Nome do elemento, útil em casos de validação de
campos, por exemplo, quando se usa uma linguagem de
scripts como JavaScript.
 VALUE: Valor que pode ser predefinido para o campo.
 MAXLENGTH: Comprimento máximo do campo.
 CHECKED: Em casos de caixas de checagem, predefine
como checada.
17

CAIXA DE TEXTO
O valor TEXT no atributo TYPE de um INPUT
indica que o campo será de texto, ou seja, um campo onde
o usuário poderá entrar com dados.
Exemplo:
<form>
<p>entre com seu nome:<input type=”text”
name=”nome”>
</p>
</form>
18

ATRIBUTO VALUE
O atributo VALUE pode ser usado para
determinar um valor prévio para o campo, que será
exibido quando a página for carregada.
Exemplo:
<form>
<p>entre com seu nome:<input type=”text”
name=”nome” value=”maria”>
</p>
</form>
19

FORMULÁRIO COM SENHA
Para o valor PASSWORD (senha) no atributo TYPE
aplicam-se todos os atributos do tipo TEXT. No input type
password os caracteres digitados não ficarão visíveis.
Exemplo:
<form>
<p>
digite sua senha:<input type=”password”
name=”senha” size=”8” maxlength=”8”>
</p>
</form> 20

CAIXA DE TEXTO COM VÁRIAS LINHAS
<TEXTAREA NAME=”nome” ROWS=”numero de
linhas” COLS=”números de colunas”></TEXTAREA>
 O marcador TEXTAREA permite definir um campo
de texto com várias linhas.
 ROWS: define o número de linhas da caixa de texto.
 COLS: define quantos caracteres (colunas) cada linha
possui.
 NAME: define o nome da caixa de texto.
21

EXEMPLO - CAIXA DE TEXTO COM VÁRIAS LINHAS
<form>
<p>
entre com seu comentário:
</p>
<p>
<textarea name=”comentario” rows=”3” cols=”20”>
</textarea>
</p>
</form>
22

TAG SELECT
A tag <select> permite a criação de uma lista
de opções a serem escolhidas pelo usuário.
Cada opção dentro da <select> será obtida
pela tag <option>.
23

ATRIBUTOS DA TAG SELECT
 NAME: nome da lista
 SIZE: define o número de opções a serem exibidas
simultaneamente na tela. Se o valor for omitido
ou igual a 1 e exibida uma opção por vez.
 A tag OPTION define cada opção a ser exibida
pela lista. Este texto pode ter qualquer tamanho
e deve vir entre os marcadores
<OPTION></OPTION>.
 O atributo VALUE ira determinar o valor de cada
opção.
24

CAIXA DE COMBINAÇÃO
Exibe na tela apenas um item da lista junto
com um botão que, quando clicado, exibe os demais
itens, embora o usuário possa escolher somente um.
A criação de caixas de combinação é idêntica a
criação de caixas de listagem, com exceção do
atributo SIZE que deve ter um valor igual a 1 ou
deve ser omitido, assumindo assim, o valor 1.
25

CAIXA DE COMBINAÇÃO
<select name=”nome” size=”quantidade de opções
visíveis”>
<option value=”valor”>texto exibido</option>
<option value=”valor”>texto exibido </option>
</select>
26

EXEMPLO DE CAIXA DE COMBINAÇÃO
<form>
<select name=”Interesses” size=”1”>
<option value=”vazio”>Escolha a área de interesse</option>
<option value=”iniciant”>Curso de iniciantes</option>
<option value=”formprof”>Formação profissional</option>
<option value=”ctec”>Cursos microsoft® ctec</option>
<option value=”todos”>Todos</option>
</select>
</form>
27

CAIXA DE LISTAGEM
Permite que na tela apareça uma lista com
mais de uma opção, embora o usuário possa
escolher somente uma. A criação de caixas de
listagem é idêntica a criação de caixas de
combinação, com exceção do atributo SIZE que deve
ter um valor maior que 1, determinando o número
de opções a aparecerem na tela.
28

EXEMPLO – CAIXA DE LISTAGEM
<form>
<select name=”Interesses” size=”5”>
<option value=”vazio”>Escolha a área de
interesse:</option>
<option value=”iniciant”>Curso de iniciantes</option>
<option value=”formprof”>Formação
profissional</option>
<option value=”ctec”>Cursos microsoft® ctec</option>
<option value=”todos”>Todos</option>
</select>
</form>
29

CAIXAS DE CHECAGEM
<input type=”checkbox” name=”nome” value=”valor”
checked>
 O valor CHECKBOX no atributo TYPE define uma
caixa de checagem. Na pratica, as caixas de checagem
aparecem em grupos e os usuários podem escolher uma
ou mais opções.
 NAME: define o nome da caixa de checagem. No caso de
várias caixas, cada uma deve ter um nome diferenciado.
 VALUE: contém o valor do campo, que será passado ao
programa interpretador do formulário.
 CHECKED: atributo opcional que pode ser utilizado
quando se deseja que a opção já apareça selecionada na
página.
30

EXEMPLO – CAIXAS DE CHECAGEM
<form>
<p>Escolha a área de interesse:
</p>
<input type=”checkbox” name=”caixa1”
value=”iniciant”> Cursos para iniciantes<br>
value=”formprof”> Cursos de formação
profissional<br>
value=”ctec”> Cursos da microsoft® ctec
</form>
31

BOTÃO DE OPÇÃO
<input type=”radio” name=”nome” value=”valor”
checked>
O valor RADIO no atributo TYPE define um
botão de escolha. Na prática os botões de escolha
aparecem em grupos e podem permitir que apenas
uma opção seja escolhida dentre as existentes.
32

BOTÃO DE OPÇÃO
 Name: define o nome do botão de opção. No caso de
botões de opção com exclusão mútua, cada botão do
grupo deverá utilizar o mesmo nome.
 Value: contém o valor do campo, que será passado ao
programa interpretador do formulário.
 Checked: atributo opcional que pode ser usado quando
se deseja que a opção já apareça selecionada na
página.
33

EXEMPLO - BOTÃO DE OPÇÃO (RADIO)
<form>
<p>
Escolha a área de interesse
</p>
<input type=”radio” name=”radio1”
value=”iniciante”> Cursos para iniciantes<br>
<input type=”radio” name=”radio2”
value=”formprof”> Cursos formação
profissional<br>
<input type=”radio” name=”radio3” value=”ctec”>
Cursos microsoft® ctec<br>
</form> 34

2 - html_parte2 Fatec.000000000000000pdf

Mais conteúdo relacionado

Semelhante a 2 - html_parte2 Fatec.000000000000000pdf

Mais de carloseduardogonalve36

2 - html_parte2 Fatec.000000000000000pdf