Sistemas para web: PPSI1

Mostrando postagens com marcador PPSI1. Mostrar todas as postagens

segunda-feira, 18 de novembro de 2013

Formulários

Form
Um formulario é feito para receber dados do usuário como por exemplo campos de senha e texto . A tag principal para a abertura de um formulário é a tag <form> que indica a abertura do formulário e possui os atributos:

accept-charset ele especifica o tipo de codificação de caracter.

action especifica onde enviar o´arquivo do formulário quando ele é enviado.

autocomplete completa automaticamente o formulário e possui os valores on off

enctype especifica como o arquivo do formulário deve ser codificado quando enviado para o servidor esse atributo só funciona se o method="post".

method especifica o método HTTP para o envio de formulário de dados e possui os valores get e post.

name especifica o nome do formulário possui o valor text.

novalidate valor novalidate, especifica que o formulário não deve ser validado quando enviado.

target Especifica onde exibir a resposta que é recebido após enviar o formulário possui os valores, _blank a resposta aparce numae nova janela, _self a resposta aparece no mesmo quadro(frame), _parent a resposta é mostrada no quadro principal, _top a resposta aparece em todo o corpo da janela, framename a resposta aparece na frame com o nome indicado.

input

A tag <input> especifica um campo de entrada onde o usuário pode inserir dados.<input> é usado dentro de um elemento <form> para declarar controles de entrada que permitem aos usuários inserir dados. Essa tag possui diversos atributos são eles:

Autocomplete on/off indica quando um elemento input deve se auto-completar.

Autofocus especifica que um elemento input deve automaticamente receber foco quando a página carregar.

form form-id especifica para qual formulário o input pertence

O atributo accept especifica os tipos de arquivos que o servidor aceita (que podem ser enviados através de um arquivo de upload). O atributo accept só pode ser usado com <input type="file">. Possui os valores audio/* para arquivos de audio, video/* para arquivos de video, image/* para arquivos de imagem e Mime_type para qualquer arquivo suportado.

O atributo alt oferece um texto alternativo para o usuário, se ele por alguma razão não pode ver a imagem. O atributo alt só pode ser usado com <input type="image">.

O atributo autocomplete especifica se um campo de entrada deve se auto completar. Ele permite que o navegador preveja o valor. Este atributo trabalha com os seguintes tipos <input>: text, search, url, tel, email, password, datepickers, range e color. Possui os valores on off.
O atributo autofocus é um atributo booleano.Quando presente, ele especifica que um elemento <input> deve receber automaticamente o foco quando a página é carregada.
O atributo checked é um atributo booleano.Quando presente, ele especifica que um elemento <input> deve ser pré-selecionadas, quando a página é carregada.O atributo verificado pode ser usado com<input type="checkbox"> e <input type="radio">.O atributo verificado também pode ser definido após o carregamento da página, com um JavaScript.
O atributo disabled é um atributo booleano. Quando presente, ele especifica que o elemento <input> deve ser desativado.O atributo disabled pode ser configurado para impedir um usuário de usar o elemento <input> até alguma outra condição foi cumprida (como selecionar uma caixa de verificação, etc.) Em seguida, um JavaScript poderia remover o valor desativado, e fazer o elemento <input> utilizável. O atributo disabled não funciona com <input type="hidden">.
O atributo de form especifica um ou mais formulários que o elemento <input> pertence. Possui o valor form_id.
O atributo formaction especifica a URL do arquivo que irá processar o controle de entrada, quando o formulário é enviado.Ele substitui o atributo do elemento <form> action. Ele só é usado com type = "submit" e type = "image".

Ex:<input formaction=”url”>

O atributo formenctype especifica como os dados dos formulários devem ser codificados quando enviados para o servidor (apenas para formulários com method = "post") O atributo formenctype substitui o atributo enctype do elemento <form>.O atributo formenctype é usado com type = "submit" e type = "image". Possui os valores application/x-www-form-urlencoded Todos os caracteres são codificados antes de serem enviadas (espaços são convertidos em "+" símbolos e caracteres especiais são convertidos para valores HEX ASCII), e multipart/form-data Nenhum character é codificado, text/plain character simples são convertidos em símbolos "+", mas nenhum caracter especial é codificado.

O atributo novalidate é um atributo booleano. Quando presente, ele especifica que o elemento <input> não deve ser validado quando enviado. O atributo formnovalidate substitui o atributo do elemento novalidate <form>. O atributo formnovalidate só pode ser usado com type = "submit".
Ex: <input formnovalidate="formnovalidate">
O atributo list refere-se a um elemento <datalist> que contém as opções pré-definidas para um elemento <input>.
Ex: <input list="datalist_id">
O atributo max especifica o valor máximo para um elemento <input>. Use o atributo max junto com o atributo min para criar uma faixa de valores legais.O máximo e mínimo atributos funciona com os seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time e week. Possui os valores Number e date.
O atributo maxlength especifica o número máximo de caracteres permitidos no elemento <input>. O seu valor é dado por um número.
O atributo min especifica o valor mínimo para um elemento <input>.Use o atributo min junto com o atributo máximo para criar uma faixa de valores legais. O Max e min atributos funcionam com os seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time e week.
O atributo multiple é um atributo booleano.Quando presente, ele especifica que o usuário tem permissão para inserir mais de um valor no elemento <input>.O atributo multiple trabalha com os seguintes tipos de entrada: email e file.
O atributo src especifica o URL da imagem para usar como um botão de envio. Ele é necessário para <input type="image">, e só pode ser usado com <origem type="image">.
O atributo placeholder especifica um curto espaço com uma dica que descreve o valor esperado de um campo de entrada (por exemplo, um valor de amostra ou uma curta descrição do formato esperado).A dica é exibida no campo de entrada antes de o usuário digitar um valor.O atributo placeholder trabalha com os seguintes tipos de entrada: text, search, url, tel, email e password.
O atributo de value especifica o valor de um elemento <input>.O atributo de value é usado de forma diferente para diferentes tipos de entrada:
Para o "bottom", "reset" e "submit" - define o texto no botão.
Para "text", "password" e "hidden" - define o valor inicial (default) do campo de entrada.
Para "checkbox", "radio", "image" - define o valor associado com a entrada (este é também o valor que é enviado em submit).
Este atributo é necessário com <input type="checkbox"> e <input type="radio">.Ele não pode ser usado com <input type="file">.

O atributo type especifica o tipo de elemento <input> para exibir.O tipo padrão é: texto, porém existem diversos outros são eles:

Button Define um botão clicável ( usado principalmente com JavaScript para ativar um script)

Checkbox Define uma caixa de seleção

color Define um seletor de cores

Date Define um controle data (ano , mês e dia (sem tempo ) )

Datetime Define um controle de data e tempo (ano , mês, dia , hora, minuto , segundo e fração de segundo , com base no fuso horário UTC)

email Define um campo de um endereço de e-mail

file Define um campo de arquivo e selecione uma "Browse ... " botão (para upload de arquivos )

Hidden Define um campo de entrada oculto

image Define uma imagem como o botão submit

month Define um mês e controle de ano (sem fuso horário)

number Define um campo para digitar um número

Password Define um campo de senha (caracteres são mascarados )

radio Define um botão de rádio

range Define um controle para digitar um número , cujo valor exato não é importante (como um controle deslizante )

reset Define um botão reset ( reseta todos os valores do formulário para os valores padrão )

search Define um campo de texto para inserir uma seqüência de pesquisa

submit Define um botão de envio

tel Define um campo para digitar um número de telefone

Text padrão . Define um campo de texto de linha única ( largura padrão é de 20 caracteres )

time Define um controle para entrar em um tempo (sem fuso horário)

url Define um campo para digitar uma URL

week Define uma semana e controle de ano (sem fuso horário)

Textarea

A tag <textarea> define um multi-linha de controle de entrada de texto.

Autofocus possui o valor autofocus Especifica que uma área de texto deve receber automaticamente o foco quando a página é carregada.

Cols number, especifica a largura visível de uma área de texto

Disabled especifica que uma área de texto deve ser desativado

form form_id Especifica a quantos formulários a área de texto pertence

maxlength Especifica o número máximo de caracteres permitidos na área de texto recebe o valor number.

Name, valor text, Especifica um nome para uma área de texto

Placeholder, valor text, Especifica uma pequena dica que descreve o valor esperado de uma área de texto

Readonly, valor readonly, Especifica que uma área de texto deve ser somente leitura

required, valor required, Especifica que uma área de texto é necessária / deve ser preenchido

rows, valor number, Especifica o número de linhas visíveis numa área de texto

wrap, valores hard soft, especifica como o texto numa área de texto deve ser ajustada quando apresentado em um formulário.

Label

A tag <label> define um rótulo para um elemento <input>. Ele fornece uma melhoria de usabilidade para os usuários do mouse, porque se o usuário clicar sobre o texto dentro do elemento <label>, alterna o controle.O atributo da tag <label> deve ser igual ao atributo id do elemento input para que fiquem vinculados. Possui os atributos for, que especifica qual o elemento o label é vinculado e form que especifica uma ou mais formulários a que pertence.

Fieldset

A tag <fieldset> é usada para agrupar elementos relacionados em um formulário.A tag <fieldset> desenha uma caixa em torno dos elementos relacionados. Possui os seguintes atributos disabled especifica que um grupo de elementos de formulário relacionados deve ser desativado, form Especifica uma ou mais formas a fieldset pertence, name do texto Especifica um nome para o conjunto de campos.

Legend

A tag <legend> define uma legenda para o elemento <fieldset>.

Optgroup

O <optgroup> é usado para opções de grupo relacionado em uma lista. Se você tem uma longa lista de opções, grupos de opções relacionadas são mais fáceis de manusear para um usuário. Possui os atributos disabled que especifica que um grupo ou opção deve ser desativada. Label que especifica um rótulo para um grupo opção

Option

A tag <option> define uma opção em uma lista de seleção.Os elementos <option> vão dentro de uma <select> ou <datalist>. Possui os seguintes atributos:

Disabled com o valor disabled, ele especifica que uma opção deve ser desativada.

Label com o valor text, especifica um rótulo mais curto para uma opção.

Selected com o valor selected, especifica que uma opção deve ser pré-selecionado quando a página é carregada.

value com o valor text, especifica o valor a ser enviado para um servidor.

Keygen

A tag <keygen> especifica um campo gerador de chaves de par usado para formulários.Quando o formulário é enviado, a chave privada é armazenada localmente, e a chave pública é enviada para o servidor.

Possui os seguintes atributos:

Autofocus com o valor autofocus, especifica que um elemento <keygen> deve receber automaticamente o foco quando a página é carregada.

Challenge com o valor challenge, especifica que o valor do elemento <keygen> deve ser desafiado quando enviado.

Disabled com o valor disabled, especifica que um elemento <keygen> deve ser desativado.

Form recebe de valor o id do form, especifica uma ou mais formas do elemento <keygen> pertence.

Name com o valor name, Define o nome para um elemento <keygen> .

Keytype pode recer os valores, rsa, dsa, ec, ele especifica o algoritmo da chave de segurança.

Datalist

A tag <datalist> especifica uma lista de opções pré-definidas para um elemento <input>. Ela é usada para fornecer um recurso de "auto completar" na <input> . Os usuários verão uma lista de opções pré-definidas com os dados introduzidos. Use lista de atributos do elemento <input> para vinculá-lo em conjunto com um elemento <datalist>.

Output

A tag <output> representa o resultado de um cálculo (como uma realizada por um script). Possui os atributos:

for que recebe o valor do id do elemento. Ele especifica a relação entre o resultado do cálculo, e os elementos utilizados no cálculo.

Form recebe o valor do id do formulário. Ele especifica uma ou mais formas no elemento de saída pertence.

Name especifica um nome para o elemento de saída.

Exemplo de Formulário

<!DOCTYPE>

<head>

</head>

<body>

<label for="idade"> Idade: </label>

<label for="senha"> Senha: </label>

<label for="m"> Masculino </label><br>

<label for="m"> Feminino </label><br>

</fieldset>

<legend> Estado Civil: </legend>

<label for="s"> Solteiro </label><br>

<label for="c"> Casado </label><br>

</fieldset>

<legend> Preferências </legend>

<label for="macarrao"> salgado </label><br>

<label for="nhoqui"> sem gosto </label><br>

</fieldset>

<label for="arquivo">Escolha um Arquivo</label>

<label for="cor">Selecione uma cor</label>

<label for="data">Selecione uma Data</label>

<label for="email">Email</label>

<label for="numero">Número</label>

<label for="points">Points</label>

<option>Selecione uma Opção</option>

<option value="IE">Amanha</option>

<option selected>Depois</option>

</section>

<label for="browsers">Browsers</label>

<input="list_browsers" id="browsers">

</datalist>

</body>

</html>

segunda-feira, 14 de outubro de 2013

CSS

Css é uma linguagem para estilos que define o layout para o documento HTML.

Você pode usá-lo de 3 formas no documento HTML

Da maneira inline, nela você coloca o código css em cada linha do documento é recomendado nunca se usar o css dessa maneira pois torna o código extenso e difícil de ser editado e dificulta a criação de um padrão, exemplo:

<!DOCTYPE>

<head>

</head>

<body>

A tocha

</h1>

Grande

</h2>

<p style="font-size:10px;"> A tocha é grande e brilha</p>

vermelha

</h2>

<p style="font-size:10px;">Seu brilho alaranjado é lindo</p>

</body>

</html>

Estilo embutido esse aparece por meio da tag style é recomendado ser usado apenas no tempo de projeto pois, facilita o teste do código. Exemplo :

<!DOCTYPE>

<head>

.titulo1{font-size:14px;color:blue;}

.titulo2{font-size:12px;color:red;}

.texto{font-size:10px; }

</style>

</head>

<body>

A tocha

</h1>

Grande

</h2>

<p class="texto"> A tocha é grande e brilha</p>

vermelha

</h2>

<p class="texto"> Seu brilho alaranjado é lindo</p>

</body>

</html>

Estilo externo nessa forma de utilização é criado um arquivo que contem as especificações em css cada uma com sua respectiva class.O arquivo é salvo como .css e é importado através DA TAG link. Esse estilo é o mais indicado para uso em um web site. Exemplo:

<!DOCTYPE>

<head>

</head>

<body>

A tocha

</h1>

Grande

</h2>

<p class="texto"> A tocha é grande e brilha </p>

vermelha

</h2>

<p class="texto"> Seu brilho alaranjado é lindo</p>

</body>

</html>

Tipos de seletores

Existem diversos tipos de seletores css que são usados para indicar o que receberá determinada formatação

· Seletor do tipo elemento seleciona qualquer elemento :

P{ font-family: sans-serif;}

Ou seja, qualquer elemento <p> receberá essa formatação.

· Seletor id seleciona o elemento identificado com um id, exemplo:

H1#titulo{text-align: center;}

Todo elemento <h1> com o atributo id titulo receberá essa formatação.

· Seletor class seleciona os elementos que se aplicou a classe.

.classe{color: green;}

Todos os elementos que conterem o atributo class=classe receberão essa formatação.

· Pseudo-classe seleciona o primeiro elemento descendente do elemento principal. Ele consiste de um ou mais seletores simples separados por um sinal de > O elemento principal “pai” fica a esquerda do sinal.

div>strong{color: #ff0000.}

essa regra se aplica a todo elemento strong filho de um elemento div

· seletor descendente é uma combinação de dois ou mais seletores simples separados por um espaço em branco. Funciona com elementos que sejam descendentes do primeiro elemento simples declarado no seletor:

div p { color:#f00; }

Esse seletor funciona com todos os elementos p que sejam descendentes do elemento div.

Propriedades de cores e fundo

Color indica a cor do texto presente no elemento

Ex: <!DOCTYPE>

<head>

h1 {color: red; }

</style>

</head>

<body>

<h1>

o corvo

</h1>

</body>

</html>

background-color define a cor de fundo do elemento.

Ex: <!DOCTYPE>

<head>

h1 {color: red;

background-color: blue;}

</style>

</head>

<body>

<h1>

o corvo

</h1>

</body>

</html>

Imagem de fundo:

background-image define uma imagem de fundo para o elemento

<!DOCTYPE>

<head>

h1 {color: red;

background-color: blue;

background-image:url(matt.jpg);}

</style>

</head>

<body>

<h1>

o corvo

<br>

branco

<br>

lilas

<br>

</h1>

</body>

</html>

background-repeat define como a imagem de fundo se repetira possui os valores:

repeat a imagem é repetida em ambas as direções vertical e horizontal.

repeat-x a imagem é repetida somente horizontalmente.

repeat-y a imagem é repetida somente verticalmente.

No-repeat a imagem não se repetirá.

<!DOCTYPE>

<head>

*{color: red;

background-color: blue;

background-image:url(matt1.jpg);

background-repeat: repeat;}

</style>

</head>

<body>

<h1>

o corvo

<br>

branco

<br>

lilas

<br>

</h1>

</body>

</html>

background-attachment, define se a imagem de fundo utilizada será fixa ou com rolagem possui os valores scroll indica que a imagem acompanhará a rolagem da página e fixed ela será fixa.

Propriedades de formatação visual

Width defina a largura do elemento que pode ser indicada em porcentagem “%” ou pixel “px”.

Height define a altura do elemento que também pode ser indicada em “%” ou “px”.

<!DOCTYPE>

<head>

h1{color: red;

background-color: blue;

background-image:url(matt1.jpg);

background-repeat: repeat-x;

width: 500px;

height: 300px;}

</style>

</head>

<body>

<h1>

o corvo

<br>

branco

<br>

lilas

<br>

</h1>

</body>

</html>

· Position define um esquema de posicionamento recebe os valores:

static, que é o posicionamento normal de acordo com o fluxo normal dos elementos na página

relative: posicionamento é calculado de acordo com o fluxo normal.

Absolute: posicionamento e talvez o tamanho, é especificado com as propriedades top, right, Button, left.

Fixed: : posicionamento e talvez o tamanho, é especificado com as propriedades top, right, Button, left, porém é fixo mesmo que se utilize a barra de rolagem.

· Float indica o posicionamento a direita ou a esquerda do elemento e possui os valores:

Left:o elemento será posicionado flutuando á esquerda.O fluxo do conteúdo não integrante do elemento será posicionado á direita a partir do top do elemento que recebe a propriedade “float”.

Right: similar à “left”, mas com o elemento flutuando à direita.

None: o elemento não flutua.

· Clear é responsável pelo controle dos posicionamentos e recebem os valores:

None: nenhum controle de limpeza de flutuação será executado

Left: limpeza de flutuação á esquerda: elemento será posicionado abaixo da borda inferior do elemento flutuante à esquerda

Right: limpeza de flutuação à direita: o elemento será posicionado abaixo da borda inferior do elemento flutuante á direita.

Both: o elemento será posicionado abaixo da borda inferior de qualquer elemento flutuante, seja á direita ou a esquerda.

Propriedades da borda

Largura da borda

Border-top-width é usado para indicar a largura superior da borda. Border-right-width é usado para indicar a largura do lado direito da borda. Border-bottom-width é usado para indicar a largura inferior da borda. Border-left-width é usado para indicar a largura do lado esquerdo da borda, eles recebem os valores thin indica espessura fina,médium para media espessura e thick para uma espessura grossa.para definir todos os lados de uma vez é utilizado apenas border-width

Cor da borda

border-top-color é usado para indicar a cor da borda superior. Border-right-color indica a cor do lado direito da borda. Border-bottom-color é usado para indicar a cor inferior da borda. border-left-color indica a cor do lado esquerdo da borda.Border-color é usado quando se quer a mesma cor para todos os lados da borda.ele recebe os valores transparent ou seja incolor, a cor em inglês ou no formato rgb.

Estilo da borda

Border-top-style, Border-right-style, Border-left-style, Border-bottom-style, são usados respectivamente para indicar o estilo da borda, superior, direita, esquerda e inferior, para atalho basta apenas utilizar border-style. Os valores recebidos por ela são:

None, ou seja nenhuma borda.

Hidden: idêntico a none exceto na resolução de conflito de bordas nos elementos de uma tabela.

Dotted: forma um segmento de reta com uma série de pontos.

Deshed uma série de segmentos de pequenas linhas.

Solid: segmento de linha simples e continua.

Double: duas linhas solidas.

Groove: efeito 3d entalhado.

Ridge: efeito 3d ressaltado

Inset: efeito 3d de baixo relevo

Outset: efeito 3d de alto relevo

Exemplo:

<!DOCTYPE>

<head>

h1{color: red;

background-color: pink;

width: 500px;

height: 300px;

border-width: thick;

border-color: blue;

border-style: outset;}

</style>

</head>

<body>

<h1>

o corvo

<br>

branco

<br>

lilas

<br>

</h1>

</body>

Propriedades de margem.

Margin-top, Margin-right, Margin-left, Margin-bottom, são usados respectivamente para indicar o tamanho da margem, superior, direita, esquerda e inferior.margin é usado como atalho para definir a todos.Os valores podem ser expressos em porcentagem, qualquer unidade suportada pelo css,ou auto que é o valor do default.

Propriedades do espaçamento

Padding-top, padding-right, padding-left, padding-bottom, indicam respectivamente a distancia utilizada para espaço em cada um dos 4 lados, superior, direito, esquerdo, inferior, padding é usado como atalho para definir tudo de uma vez.

Propriedades de fontes tipográficas.

Font-family indica a família a qual a fonte do documento pertence, existem os seguintes tipos de famílias: serif, sans-serife, cursive, fantasy, monospace. Você ainda define nessa especificação qual a fonte a ser usada veja abaixo um exemplo de síntese.

{font-family:” times new roman”, serif; }

Por ordem de importância o navegador ia entender para renderizar a fonte times new roman, porém se os usuários não tivessem essa fonte instalada seria usada qualquer fonte da família serif.

Font-style indica o estilo da fonte e rcebe os valores normal a fonte é normal, italic a fonte fica em itálico, oblique a fonte fica com efeito obliquo.

Font-variant exibe o texto em pequena caixa alta ou normal, através dos valores normal e small-caps.

Font-weight expressa o peso da fonte, que pode ser: normal com efeito padrão de peso, bold a fonte aparece em negrito, bolder fonte do elemento com valor de peso imediatamente superior ao valor herdado,lighter fonte com valor de peso imediatamente inferior ao herdado.

Font-size expressa o tamanho da fonte, com os valores medium fonte com valor padrão de tamanho, large-smaller aumenta ou diminui o tamanho do valor herdado,valores que variam de 1 a 9 ou em porcentagem.

Exemplo:

<!DOCTYPE>

<head>

h1 { font-family:” times new roman”, serif;

font-style:italic;

font-variant: small-caps;

font-weight: bold;

Font-size:medium }

</style>

</head>

<body>

<h1>

o corvo

<br>

branco

<br>

lilas

<br>

</h1>

</body>

</html>

Propriedades de texto

Text-indent recuo a esquerda da primeira linha de um bloco de texto.o tamanho pode ser em px ou em %.

Text-align alinhamento do texto pode ser left alinhado a esquerda, Center alinhado no centro, justify texto justificado, right texto alinhado a direita.

Text-decoration indica a decoração do texto que pode aparecer como none,nenhum, underline texto sublinhado, overline cada linha de texto do elemento terá uma linha acima, line-through uma linha corta o texto ao meio,blink o texto fica piscando.

Text-transform transforma o texto entre maiúsculas e minúsculas, capitalize coloca a primeira letra do elemento em maiúscula. Uppercase coloca todos os caracteres em maiúscula. Lowercase coloca todos os caracteres do elemento em minúscula. None não aplica nenhum efeito.

Line-height Este atributo é usado para controlar o espaço que existe antes e depois de uma linha de texto. O espaço simples equivale geralmente a line-height: Uma line-height menor que o tamanho da fonte produzirá sobreposição de texto.

Exemplo:

<!DOCTYPE>

<head>

h1 { text-align: center;

text-decoration: underline;

text-transform: none;

line-height: 3;

}

</style>

</head>

<body>

<h1>

o corvo

<br>

branco

<br>

lilas

<br>

</h1>

</body>

</html>

propriedades de listas

list-style-image utiliza uma imagem como marcador de lista.

List-style-type tipo de marcador de lista e recebe os valores

None: sem marcador, disc: círculo (bolinha cheia), circle: circunferência (bolinha vazia),square: quadrado cheio, decimal: números, decimal-leading-zero, lower-roman: romano minúsculo, upper-roman: romano maiúsculo, lower-alpha: letra minúscula, upper-alpha: letra maiúscula. lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, hiragana, katakana, hiragana-iroha, katakana-iroha.