Hoje Vou Estar Ensinando Como Fazer Modo Do Tipo Nome Senha Tipo Login. Assim Como criar um botão na página html Como fazer o com que o botão seja desactivado Como usar a imagem como um botão? Assim Mais Ou Menos.Tamanho do Botão Podemos definir o tamanho do botão utilizando o atributo "SIZE" com 'size=50'Não Editável / Não Clicável / Botão Desactivado Para desativar um botão de formulário é muito simples. podemos fazer um botão não editável ou não clicável (o utilizador não pode editar o campo) utilizando a entrada "disabled". Código de Exemplo: Código para criar o botão rádio em html? Como criar botão de rádio pré-selecionado (verificado)? Como desactivar o botão de rádio (não seleccionável)?Definição: Aqui vamos definir o botão de rádio usando a etiqueta "input". Damos um atributo chamado "TYPE=RADIO" na etiqueta que define o tipo de botão de rádio. O atributo name pode ser definido e ser o mesmo. O valor neste caso será usado apenas durante o processamento do formulário. Nota: Todas as entradas deste tipo devem ter o mesmo nome. Este é o nome que os agrupa. Se tiver diferentes nomes para cada botão de rádio entao estes irão interagir individualmente. Botão de Rádio Pré-Seleccionado Se quiser que o botão rádio seja mostrado como seleccionado mesmo antes do utilizador tentar seleccionar um, tem de usar a entrada "checked". Rádio Não Editável / Não Seleccionável Podemos fazer um botão de rádio não seleccionável (desactivado) utilizando a entrada "disabled" Como criar uma caixa de verificação em html? Como fazer uma caixa de verificação pré-seleccionada? Como desactivar uma caixa de verificação?Caixa de Verificação Código de Exemplo: Aqui vamos definir a caixa de verificação usando a etiqueta "input". Damos um atributo chamado "TYPE=checkbox" na etiqueta que define o tipo como uma caixa de verificação. O atributo "name" deve ser definida e ser o mesmo. O valor neste caso só será utilizado durante o processamento do formulário. Caixa de Verificação Pre-Seleccionada Podemos fazer uma caixa de verificação pre-seleccionada (verificada) antes mesmo de os utilizadores tentam selecionar, usando a entrada "checked Caixa de Verificação Não Editável / Não Seleccionável Podemos fazer uma caixa de verificação não seleccionável (desactivada) usando a entrada "disabled" Explicação Área de Texto Código: Definição: Aqui definimos o texto usando a etiqueta "textarea". O que quer que seja exibido dentro da área de texto deve ser administrado entre as etiquetas de inicio e fim da área de texto tal como mostrado no exemplo. Este terá o tamanho padrão. Definir o Tamanho da Área de Texto O tamanho do texto de ária é determinado usando o atributo "rows" e "cols". Pode modificar o tamanho da área de texto modificando os valores de rows e cols (linhas e colunas). Área de Texto Não-Editável Podemos fazer uma área de texto não seleccionável (o utilizador não pode editar este campo) usando a entrada "readonly"Como criar uma caixa suspensa? Como fazer um valor selecionado na caixa de combinação? Como criar uma caixa de opção de múltipla escolha? Caixa de Combinação / Suspensa Código de Exemplo: Definição: Aqui define-se a caixa de suspensão usando as etiquetas "select" e "option". A caixa seleccionada é definida usando a etiqueta "select". O número de opções na caixa de combinação é definida utilizando a etiqueta "option". Como mostrado no exemplo damos aos utilizadores três opções para seleccionar. O nome a ser mostrado pela opção é atribuido dentro das etiquetas "option". Opcção de Selecção Deslocável O tamanho da opção de selecção pode ser definido pelo atributo "size" dentro da etiqueta "select". Opção de Selecção Múltipla Podemos dar a opção para os utilizadores seleccionarem opções múltiplas utilizando a entidade "multiple". Portanto o utilizador pode selecionar várias opções usando as teclas "shift" e "Ctrl". Código de Exemplo: pção Selecção pré-Seleccionada As opções podem ser pré-seleccionadas utilizando a entrada "selected". Código de Exemplo: Campo de Senha Código de Exemplo: Definição: O campo de senha para um formulário é criado com "input" de tipo password (senha). O resultado mostra um campo de senha. Definição: Para fazer o campo de senha desactivado (não-utilizável) basta adicionar a variável "disabled" na etiqueta input. Explicação Rótulo Etiqueta: Resultado: O meu Rótulo Definição: Um formulário deve ter sempre a etiqueta "form". O atributo name pode ser definido (por exemplo, "name=myform"). No entanto o nome será exigido apenas durante a acção do formulário que requer javascript. Então veremos esses nos nossos tutoriais de javascript. O tipo de rótulo é apenas um texto. O resultado mostra como um rótulo é apresentado CONCLUSÃO: Basicamente os formulários são utilizados para obter dados de um utilizador e utilizar os mesmos. Para validar os dados necessita de aprender javascript. Para obter os dados e usá-los necessita de aprender a linguagem script de servidor como php ou jsp ou asp... Usamos php e iremos vê-los nos tutoriais (A ser publicado brevemente). Os caractéres ASCII listados em baixo mostram o valor de cada caractér especial em HTML e uma breve descrição do simbolo. Isto mostra como adicionar caractér ascii na página web usando HTML. Por exemplo o simbolo copyright '©' pode ser mostrado usando o seguinte código em html "©".Symbol Código HTML Valores numéricos Descrição ‘ ‘ ‘ Apóstrofe esquerdo ’ ’ ’ Apóstofre direito ™ ™ ™ Marca ˜ ˜ ˜ til “ “ “ Aspas esquerda ” ” ” Aspas direita @ - @ Arroba ÷ ÷ ÷ Divisão { - { Parêntises esquerdo } - } Parêntises direito _ - _ Sublinhado ? - ? Ponto de interrogação = - = Sinal de igual ( - ( Parêntises esquerdo ) - ) Parêntises direito * - * Asterisco , - , Vírgula ! - ! Ponto de exclamação ' - ' Aspas simples / - / Barra à esquerda \ - \ Barra à direita : - : Dois pontos ; - ; Ponto e vírgula [ - [ Parêntises rectos esquerda ] - ] Parêntises rectos direita • - • Pequena bala ‰ ‰ ‰ Simbolo por milhão | - | Barra vertical Ñ Ñ Ñ N til Ò Ò Ò O grave Ó Ó Ó O agudo Ô Ô Ô O circunflexo Õ Õ Õ O tidle Ö Ö Ö O terma Ø Ø Ø O slash Ù Ù Ù U grave Ú Ú Ú U agudo Û Û Û U circunflexo Ü Ü Ü U trema Ý Ý Ý Y agudo Þ Þ Þ Espinho ß ß ß Ligadura SZ á á á a agudo à à à a grave â â â a circunflexo ã ã ã a til ä ä ä a trema å å å a anel æ æ æ ligadura ae ç ç ç c cedilha è è è e grave é é é e agudo ê ê ê e circunflexo
Os caractéres ASCII listados em baixo mostram o valor de cada caractér especial em HTML e uma breve descrição do simbolo. Isto mostra como adicionar caractér ascii na página web usando HTML. Por exemplo o simbolo copyright '©' pode ser mostrado usando o seguinte código em html "©".
Symbol Código HTML Valores numéricos Descrição < < < Menor que > > > Maior que & & & Comercial " " " Cotações   Espaço — — — Linha de marca ® ® ® Registado © © © Copyright ¡ ¡ ¡ - € € € Simbolo do Euro ¢ ¢ ¢ Simbolo do Centimo £ £ £ Simbolo da Libra ¤ ¤ ¤ Moeda ¥ ¥ ¥ Simbolo Yen ¦ ¦ ¦ Barra de quebra vertical § § § Simbolo Secção ¨ ¨ ¨ Trema ª ª ª - « « « Ângulo citação esquerda ¬ ¬ ¬ Sinal negado ­ ­ hífen ¯ ¯ ¯ Macron ° ° ° Grau ± ± ± mais ou menos ² ² ² potência 2 ³ ³ ³ potência 3 µ µ µ Simbolo Micro ¶ ¶ ¶ Sinal Pilcrow (parágrafo) · · · Ponto ao meio ¸ ¸ ¸ Cedilha ¹ ¹ ¹ potência 1 º º º o sobrescrito » » » Àngulo citação direita ¼ ¼ ¼ Fracção um quarto ½ ½ ½ Fracção um meio ¾ ¾ ¾ Fracção três quartos ¿ ¿ ¿ Ponto de interrogação invertido Ð Ð Ð Eth × × × Sinal de multiplicação À À À A acento grave Á Á Á A acento agudo    A circunflexo à à à A til Ä Ä Ä A trema Å Å Å A anel Æ Æ Æ Ligadura AE Ç Ç Ç C cedilha È È È E grave É É É E agudo Ê Ê Ê E circunflexo Ë Ë Ë E trema ♠ ♠ - - ♣ ♣ - - ♦ ♦ - - ♥ ♥ - - Ì Ì ì i grave Í Í í i agudo Î Î î i circunflexo Ï Ï ï i trema ë ë ë e trema ì ì ì i grave í í í i agudo î î î i circunflexo ï ï ï i trema ð ð ð eth ñ ñ ñ n til ó ó ó o agudo ò ò ò o grave ô ô ô o circunflexo õ õ õ o til ö ö ö o trema ø ø ø o slash ù ù ù u grave ú ú ú u agudo û û û u circunflexo ü ü ü u trema ý ý ý y agudo þ þ þ espinho ÿ ÿ ÿ y trema ← ← - - → → - - ↑ ↑ - - ↓ ↓ - -
Para fazer o redireccionamento de uma página temos de usar a etiqueta Meta HTML dentro da etiqueta head Exemplo: Este código irá redirecionar a sua página web para http://www.hscripts.com url após 5 segundos. O atributo http-equiv="refresh" força a actualização da página. O atributo content="5; URL=http://www.hscripts.com" define o intervalo de tempo em segundos entre o tempo do qual o redireccionamento terá efeito até à página de destino. Certifique-se de seguir a ordem exacta da codificação. ou seja: content="intervalo em segundos; URL=página de destino"; De notar que não deve usar vírgula depois de 'url='. Então usando uma etiqueta meta irá redireccionar a página para a página de destino depois do intervalo de tempo. Para fazer a página redireccionar para uma página pré-definida edite o atributo "content" e defina os valores apropriados com o tempo e url de destino conforme necessário. Isto irá funcionar em todas as páginas com qualquer extensão ou linguagem de servidor (PHP, JSP, ASP, etc ..). Para fazer a página recarregar ou actualizar por si mesma, temos de utilizar o seguinte código dentro da etiqueta head
<meta http-equiv="refresh" content="5" >
O atributo http-equiv="refresh" força a actualização da página.
O atributo content="5" define o tempo de actualização.
O tempo após o qual a página tem de actualizar é definido utilizando o atributo content.
Digamos que quer que a página actualize após 10 segundos, defina o valor de content para 10.
Recomendamos que o tempo de atualização [tempo de recarregamento] seja superior a 5 segundos. Isto porque tem que considerar o tempo de carregamento da página. Por vezes podemos enfrentar uma situação onde apenas uma pequena porção ou conteúdo da página deve ser actualizada dinamicamente a cada x segundos. Então, não é aconselhável carregar a página completa. Então vamos para o iframe.
Aqui faremos em três passos
Passo 1:
Separar o conteúdo que precisa ser dinamicamente actualizado em uma página separada.
Exemplo: itest.php<html>
<head> </head>
<body bgcolor=green>
Página de conteúdo dinâmico
</body>
<html>
<head> </head>
<body bgcolor=green>
Página de conteúdo dinâmico
</body>
<html>
Passo 2:
Adicionar actualização automática para esta página.
ou seja, copiar a etiqueta meta no cabeçalho da página. (por exemplo: itest.php)
Exemplo: itest.php<meta http-equiv="refresh" content="5" >
Passo 3:
Definir a página dinâmica na sua página principal usando iframe.
Aqui usamos tabelas e a página iframe é definida nas colunas da tabela.
Exemplo: ifexample.php<html>
<body>
Isto é uma página de test iframe. Pode ver o conteúdo está apenas na caixa em baixo, que é uma iframe que é carregada a cada 5 segundos. <br><br>
<iframe src="itest.php" width=100 height=100 frameborder=0 scrolling=no>
</iframe></body>
</html>
<body>
Isto é uma página de test iframe. Pode ver o conteúdo está apenas na caixa em baixo, que é uma iframe que é carregada a cada 5 segundos. <br><br>
<iframe src="itest.php" width=100 height=100 frameborder=0 scrolling=no>
</iframe></body>
</html>
Recomendamos que o tempo de atualização seja superior a 5 segundos. Isto é porque se tem que considerar o tempo de carregamento da página. Favicon: Icóne Favoritos
Crie uma imagem com tamanho de 16x16 pixels e formato .ico, qualquer navegador pode usar formatos .jpg ou .gif também. De preferência, criar uma imagem .ico.
Nós usamos um gif [
] como um ícone para esta página.
Carregar o ficheiro de imagem para o diretório [de preferência no directório raiz].
Utilize o seguinte código html dentro da etiqueta <head> da sua página web.
Exemplo 1: Usando o caminho completo
<head>
<link rel="shortcut icon" href="http://www.your-page-name.com/favicon.ico">
</head>A etiqueta de ligação faz a magia. Give the complete path of the uploaded image in href attribute. Dê o caminho completo da imagem carregada no atributo href.
Exemplo 2: Utilizando o caminho a partir do diretório raiz
<head>
<link rel="shortcut icon" href="/images/h22.gif">
</head>Aqui usamos o caminho referido pela raiz, ou seja, se a imagem ou ícone está presente em xcvxcvxcv.com/images/... o caminho deve começar a partir de /images/....
A imagem de barra de endereços também denominado como favicon podem não funcionar correctamente em navegadores IE. Teste-o num navegador como o mozilla ou firefox. Crie os seus ficheiros .jpg/.gif, pode ser convertido para .ico utilizando qualquer utilitário online grátis.
Esta é uma introdução muito pequena para css. Aprenda css com os tutoriais css.Isto irá torná-lo mais interessados em aprender o CSS em profundidade.
CSS - Cascading style sheets (Folhas de estilo cascada). É usado com o componente html e adiciona mais beleza aos seus componentes html. Vamos ver um exemplo. Rótulo Etiqueta:
<div style="border: green solid 3px;">
Essa fonte tem estilos css
</div>
Resultado:
This font takes css styles
Definição: O atributo "style" pertence ao css.
O estilo pode ser adicionado a qualquer etiqueta html.
Aqui definimos um contorno utilizando as folhas de estilo.
O formato é o indicado no exemplo.
Primeiro vamos definir o atributo que estamos a tentar definir, seguido de ":" e o valor.
Neste caso o border é o atributo e o seu valor é a ordem de "border-color border-type border-size".
Depois o atributo será terminado com ";".
Outro exemplo:
Etiqueta:
<a href="http://www.hioxindia.com">
<div style="border: red solid 1px; background-color: white;">
Estilos Usando Ligações
</div>
</a>
Resultado:
Estilos Usando Ligações
Nenhum comentário:
Postar um comentário