ESC – É a tecla de escape. Serve para interromper uma ação. Geralmente, se você está executando um programa e abre uma caixa de diálogo, janela dentro do programa a qual permite que você escolha alguma opção, pressionar ESC terá o mesmo efeito que apertar o botão Cancelar, ou seja: a janela será fechada e nada vai acontecer. Em alguns jogos, serve para abrir o menu de opções.
F1 – F12 – São as chamadas teclas de função, que executam uma determinada ação dentro de um programa quando pressionadas. É impossível dizer o que todas elas fazem, pois isso depende do programa em questão mas, geralmente, ao pressionar F1, é acionada a ajuda do programa: um conjunto de textos que explicam como utilizar os recursos daquele software; Ao pressionar F10, é acionada a barra de menus, aquele conjunto de palavras como Arquivo e Editar. Você pode selecionar um menu pressionando o caractere sublinhado após ter apertado F10. Esta função também pode ser feita pela tecla Alt. Em navegadores de internet como Mozilla Firefox e Internet Explorer, a tecla F11 coloca a página em tela cheia.
Print Screen – Literalmente, imprimir tela. A função dessa tecla – e das outras duas que estão ao seu lado – remonta ao “tempo do MS-DOS”. Naquela época, ao apertar Print Screen, o sistema mandava o conteúdo da tela para a impressora. Hoje, a função é muito similar: ela captura todo o conteúdo da tela para uma imagem. No Windows, a imagem é copiada para a área de transferência e você pode colá-la no Paint, no Photoshop, no Word ou em qualquer outro programa. No Linux, é exibida uma caixa de diálogo que permite escolher se você quer copiar a imagem para a área de transferência ou salvá-la em um arquivo.
A utilidade desta tecla é indiscutível: você pode “tirar uma foto” de um erro e mandá-la para o técnico ou inserir a tela de um programa em alguma apostila ou tutorial que esteja escrevendo. O que pouca gente sabe, porém, é que se você pressionar Alt + Print Screen, ao invés de tirar uma foto da tela inteira, ela vai capturar apenas a janela ativa naquele momento. Nos Macs, esta tecla não existe, mas sua função pode ser feita pressionando-se shift + maçã + 4.
Scroll Lock – Essa é outra tecla que se originou no “tempo do MS-DOS”. Naquela época, a resolução dos monitores era de… 80×25! Isso tornava quase impossível usar programas de planilha, como o Lotus 1-2-3, o avô do Excel, principalmente quando havia muitos dados. O que essa tecla fazia era travar a posição do cursor quando se rolava o conteúdo da tela com as setas direcionais. O Excel ainda implementa isso mas, hoje, poucos programas a utilizam e ela não tem utilidade prática.
Pause/Break -Como o próprio nome já diz, essa tecla faz uma pausa no programa atual. Não faz muito sentido falar em “pausar o Word”, por exemplo, então vamos a um exemplo prático: abra o Prompt do MS-DOS, digite CD \ para ir à raiz da unidade C: e digite DIR /S . O sistema vai começar a listar todos os arquivos existentes em seu computador. Pressione PAUSE e você verá que a lista vai parar de correr. Pressione outra tecla e você verá que ela continua.
Em alguns jogos, a tecla Pause é usada para pausar o jogo. Outra utilidade é técnica: se você apertá-la durante a tela de contagem de memória ou naquela em que aparece uma tabela antes de o sistema operacional ser carregado, as telas ficarão “travadas” e você poderá anotar algo importante. É só pressionar outra tecla para continuar.
Insert – Em processadores de texto, quando pressionada, ativa um modo de inserção de caracteres onde os caracteres que estão à direita do cursor são sobrescritos à medida que se digita.
Delete - Em processadores de texto, apaga o caractere que está à direita do cursor. Ela também serve para apagar arquivos ou itens de alguma lista ou banco de dados, dependendo do programa.
Home – Em processadores de texto, vai para o início da linha na qual está o cursor. Ctrl + Home vai para o início do documento. Se você a pressionar junto a Shift, todo o texto, da posição atual do cursor até o início da linha na qual ele se encontra será selecionado. Ctrl + Shift + Home seleciona todo o texto da posição atual até o início do documento,
End – o contrário de Home: vai para o final da linha onde está o cursor. Ctrl + End vai para o final do documento. Se você a pressionar junto a Shift, todo o texto, da posição atual do cursor até o final da linha na qual ele se encontra será selecionado. Ctrl + Shift + End seleciona todo o texto da posição atual até o fim do documento,
Page Up e Page Down – Rola o texto na tela em maior quantidade do que as teclas de seta. A quantidade de linhas roladas dependerão do programa utilizado. Se pressionadas junto a Shift, todo o texto rolável será selecionado.
Tab – Teve origem na tecla de tabulação das máquinas de escrever. Nos processadores de texto, move o cursor para a próxima marca de tabulação configurada ou, se esta não existir, avança geralmente o equivalente a 8 espaços. Nas caixas de diálogo, move o cursor para o próximo campo, botão ou barra de rolagem. Shift + Tab move para o controle anterior.
Caps Lock – ao contrário do que todo mundo diz. essa tecla NÃO SERVE para gerar letras maiúsculas mas, sim, para travar as letras maiúsculas. Segundo os especialistas em digitação, a maneira mais eficiente de escrever-se letras maiúsculas é pressionar a letra junto à tecla Shift.
Shift – Ativa a segunda função de uma tecla, devendo ser pressionada juntamente a esta. No teclado alfabético, muda o estado de capitulação, isto é, se a letra estiver minúscula, ela se torna maiúscula e vice-versa. Também pode imprimir outro caractere, geralmente impresso na parte superior da tecla.
Ctrl – pronunciada como “Control”, é uma tecla modificadora, ou seja, ao ser pressionada junto a outra tecla, fará uma ação especial. Tal ação depende do programa que estiver sendo utilizado, mas existem alguns atalhos comuns: Ctrl + C copia o conteúdo selecionado para a área de transferência; Ctrl + X recorta o conteúdo, isto é, o exclui de seu local atual (a escolha do X deve-se ao fato de ele ser similar a uma tesoura aberta); Ctrl + V cola, ou seja, insere o conteúdo da área de transferência na posição atual do cursor (V lembra um tubo de cola). Isso sem falar no famoso Ctrl + Alt + Del, usado para reiniciar o Windows ou desligar o Linux em modo texto.
Alt – Tecla modificadora similar à Shift. Nos teclados dos computadores do MIT, era chamada de Meta e nos teclados dos Macs é a tecla Option. No Windows, pode-se pressionar Alt e uma sequência no teclado numérico para se inserir um caractere especial.
Alt Gr – Ativa a terceira função de uma tecla.
Tecla com o logotipo do Windows – Essa tecla foi introduzida em 1995 e ativa o menu Iniciar do Windows. Também pode chamar janelas e programas deste sistema se combinada com outras teclas. No Linux, é chamada de tecla Super e não tem uma função específica, embora possa ser configurada pelo usuário.
Tecla com uma seta e uma listinha – Se pressionada, tem o mesmo efeito de se pressionar o botão direito do mouse.
Num Lock – Ativa ou desativa o teclado numérico.
Tecla Fn – Se seu teclado tiver uma tecla Fn e teclas power, sleep e wake up, você deverá pressionar Fn e uma destas teclas para, respectivamente, desligar, hibernar e acordar seu computador. O motivo disto é evitar que você pressione essas teclas especiais acidentalmente enquanto trabalha. Em notebooks, ela pode ser usada para imprimir caracteres especiais ou para acionar funções, como habilitar a saída VGA para um projetor. Nem todos os teclados possuem esta tecla.
sábado, 24 de julho de 2010
quinta-feira, 22 de julho de 2010
< EMBED>
Music Cods
A colocação de músicas em uma página, é um coisa relativamente facil. Utilizaremos a tag < embed>.
Embed
A música é inseria em uma página web com o uso da tag embed. Existem outras formas de ligação à música, mas inser-se agora o padrão para essa mídia.
Vejamos como se faz isso:
< embed src="beethoven.mid" />
Dependendo do softwere que o cliente tenha, e o arquivo que esta sendo executado, alguns PLUINS se fazem necesários.
Atributos referentes aos Players
Importante definir os seguintes atributos:
* WIDTH - A largura do player de midia.
* HEIGHT - A altura do player de midia.
* HIDDEN - Se este vaor for verdadeiro o midia player não será exibido. Recomenta-se usar em TRUE só se você sabe que o vizitante não irá querer parar a musica, se não foloque FALSE.
Vajamos:
< embed src="beethoven.mid" width="360" height="165" />
Incorporando Atributos e funcionalidades
Para personalizar o midia player vamos editar alguns atributos:
* AutoStart - Escolha esta se você quer queo midia player reproduza automaticamente.
* Loop - Define a repetição do arquivo de midia.
* Volume - Define o volume do arquivo, o intervalo é de (0 - 100).
Vejamos:
< embed src="beethoven.mid" autostart="false" loop="false" volume="60" />
Video Codes
Os videos podem se incorporados em documentos HTML, de duas formas:
EMBED
* Usando o o SRC atravez da tag embed.
< embed src="http://www.midias.com/files/html/htmlexample.mpeg" autostart="false" />
Também é possivel usar arquivos mms(aquivos de midia direto de um servidor normalmente transmitem online).
Velamos:
< embed src="http://189.76.158.141/transito_flops?channel=41"/>< /embed>
O resultado é:
* Você pode simplesmente colocar a URL de arquivos midia em seu atributo HREF da tag A.
Vejamos:
< a href="http://www.midias.com/pics/flash/motiontween1easy.swf">
motiontween1easy.swf< /a>
Flash Midia
Tipos de midias de video
Filmes Flash (.SWF, .FLV). Mas a Tag embed suporta os seguintes arquivos (.swf, .avi, .mov).
. swf - São os aruivos criados pelo Adobe Flash.
. wmv - São arquivos do Microsoft Windows Midia.
. mov - São arquivos da Apple Quick Time.
. mpeg - Formato do Moving Pictures Expert Group.
Atributos do Embed
Juntos com o atributo SRC temos:
* Autostart (TRUE/FALSE) Capaz de iniciar o arquivo automaticamente.
* Hidden (TRUE/FALSE) Oculta o Play, stop, pause.
* Loop (TRUE/FALSE) Se o arquivo irá repetir.
* Playcount Define o número de repetições em vez de ficar repetindo indefinidamente como no loop.
* Volume (0 - 100) Define o volume do arquivo.
Para deixar o SWF com cundo transparente!
É uma dúvida simples e extremamente fácil de resolver, estou postando isso pois estava procurando informaçõe sobre ActionSctip em fóruns e me espantei com a quantidade de dúvidas sobre como deixar o fundo transparente em Flash.
Dentro da tag < embed> você também deve adicionar o parâmetro wmode como transparente, exemplo:
< embed src="meuflash.swf" wmode="transparent" />
O resultado é este!!!
< Scripts>
Dois tipos básico de Script são os JavaScript e o VBScript com os scripts você pode criar páginas dinâmicas, colocar imagem sobre imagens, ou ainda validar dados de um formulário HTML. Mas ambos são muito complicados em relação ao HTML!
Para colocar um Script em seu site você deverá usar o TAG < script>
< script type="text/javascript">
< !--script ***Some javascript code should go here*** -->
< /script>
Para inserir você deverá usar a tag< Script>
< script type="text/vbscript">
< !--script ***The vbscript code should go in this spot*** -->
< /script>
Javascript Code
Para colocar um Script em seu site você deverá usar o TAG < script>
< script type="text/javascript">
< !--script ***Some javascript code should go here*** -->
< /script>
Como usar VbScrpt
Para inserir você deverá usar a tag< Script>
< script type="text/vbscript">
< !--script ***The vbscript code should go in this spot*** -->
< /script>
quarta-feira, 21 de julho de 2010
< FRAMES>
Frames permitem multiplos HTMLs os documentos a serem exibidos dentro de uma janela do navegador em um momento.Isto signfica que uma página não tem nenhum conteúdo nele, mas diz ao navegador que as páginas da web que você gostaria de abrir. Com a adição de CSS e PHP, tornam-se obsoletos, mas se você quizer usá-lo, valos lá.
Os fremes mais usados para se ter o menu em um frame e co conteúde em outro. Vamos a um exemplo que utiliza o "frameset".
< html>
< head>
< / head>
< frameset cols="30%,*">
< frame src="menu.html">
< frame src="content.html">
< /frameset>
< /html>
- A marca-mãe que defeniu as caracteristicas da página do frame individual, são defenidas dentro dela.
- Frameset Cols(colunas) - #% Define a largura que cada frame terá.
- SRC Frame "" A URL da página que iremos carregar no frama.
Adicionar uma linha para o início de título e gráficos com o código da seguinte forma:
< html>< head>< /head>
< frameset rows="20%,*">
< frame src="title.html">
< frameset cols="30%,*">
< frame src="menu.html">
< frame src="content.html">
< /frameset>
< /html>
Frameset rows = #%, Linhas definem a altura que cada frame terá.No exemplo acina, escolhemos o novo títito (linha1)a 20% da altura total da páina e usou um "*", o que significa que o menu e o conteúdo (que são a linha 2)Usará a altura restante.
Você deve er notado as linhas de cinza quae aparecem entre as frames. É possivel eliminar estes e manipular os espaços entre os quadros com frameborder e framespacing. Fazem parte da tag Framaset.
Obs: Framespacing e Fronteiras são os meesmos atributos, mas alguns navegadores só econhecem um ou outro, então use sempre os dois, com o mesmo valor para ser seguro.
Frameborder = # Um valor zero, não mostra a borda da janela.
Border = # Modifica a largura da borda para NetsCape.
Framespacing = #, Modifica a largura da borda para IE.
Aqui um exemplo do conjunto de frameset sem bordas.
< html>< head>< /head>
< frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
< frame src="title.html">
< frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
< frame src="menu.html">
< frame src="content.html">
< /frameset>
< /html>
Nomeamos cada frame para que ele possa fazer com que cada botão carregue um conteúdo.
< html>< head>< /head>
< frameset rows="20%,*">
< frame name="title" src="title.html">
< frameset cols="30%,*">
< frame name="menu" src="menu.html">
< name="content" src="content.html">
< /frameset>
< /html>
< html>
< head>
< base target="content">
< /head>
...
< /html>
Primeiro nomeie o frame de nosso conteudo como "content" intão definimos o caminhao dentro do menu.html um posto deste frame.
Nossa pégina de frame é agora um menu perfeita mente funcional para a distribuição de conteúdo.
É possivel personalizar ainda mais o Frame usando Atributos noresize e scrolling
Vejamos:
< html>< head>< /head>
< frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
< frame src="title.html" noresize scrolling="no">
< frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
< frame src="menu.html" scrolling="auto" noresize>
< frame src="content.html" scrolling="yes" noresize>
< /frameset>
< /html>
* Noresize - Não permite que os frames sejam redimensionados pelo usuário.
* Scrolling =(SIM/NÃO) - Permite a Rolagem ou não dentro do frame.
Página genérica de freme
Os fremes mais usados para se ter o menu em um frame e co conteúde em outro. Vamos a um exemplo que utiliza o "frameset".
< html>
< head>
< / head>
< frameset cols="30%,*">
< frame src="menu.html">
< frame src="content.html">
< /frameset>
< /html>
Frameset
- A marca-mãe que defeniu as caracteristicas da página do frame individual, são defenidas dentro dela.
- Frameset Cols(colunas) - #% Define a largura que cada frame terá.
- SRC Frame "" A URL da página que iremos carregar no frama.
Adicionando Banner ou Título Frame
Adicionar uma linha para o início de título e gráficos com o código da seguinte forma:
< html>< head>< /head>
< frameset rows="20%,*">
< frame src="title.html">
< frameset cols="30%,*">
< frame src="menu.html">
< frame src="content.html">
< /frameset>
< /html>
Frameset rows = #%, Linhas definem a altura que cada frame terá.No exemplo acina, escolhemos o novo títito (linha1)a 20% da altura total da páina e usou um "*", o que significa que o menu e o conteúdo (que são a linha 2)Usará a altura restante.
Frameborder e Framespacing
Você deve er notado as linhas de cinza quae aparecem entre as frames. É possivel eliminar estes e manipular os espaços entre os quadros com frameborder e framespacing. Fazem parte da tag Framaset.
Obs: Framespacing e Fronteiras são os meesmos atributos, mas alguns navegadores só econhecem um ou outro, então use sempre os dois, com o mesmo valor para ser seguro.
Frameborder = # Um valor zero, não mostra a borda da janela.
Border = # Modifica a largura da borda para NetsCape.
Framespacing = #, Modifica a largura da borda para IE.
Aqui um exemplo do conjunto de frameset sem bordas.
< html>< head>< /head>
< frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
< frame src="title.html">
< frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
< frame src="menu.html">
< frame src="content.html">
< /frameset>
< /html>
Frame name e frame target
Nomeamos cada frame para que ele possa fazer com que cada botão carregue um conteúdo.
< html>< head>< /head>
< frameset rows="20%,*">
< frame name="title" src="title.html">
< frameset cols="30%,*">
< frame name="menu" src="menu.html">
< name="content" src="content.html">
< /frameset>
< /html>
< html>
< head>
< base target="content">
< /head>
...
< /html>
Traget Frame
Primeiro nomeie o frame de nosso conteudo como "content" intão definimos o caminhao dentro do menu.html um posto deste frame.
Nossa pégina de frame é agora um menu perfeita mente funcional para a distribuição de conteúdo.
Noresize and Scrolling
É possivel personalizar ainda mais o Frame usando Atributos noresize e scrolling
Vejamos:
< html>< head>< /head>
< frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
< frame src="title.html" noresize scrolling="no">
< frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
< frame src="menu.html" scrolling="auto" noresize>
< frame src="content.html" scrolling="yes" noresize>
< /frameset>
< /html>
* Noresize - Não permite que os frames sejam redimensionados pelo usuário.
* Scrolling =(SIM/NÃO) - Permite a Rolagem ou não dentro do frame.
< FORM>
Os formulários são uma ferramenta vital para os web master para inforções de internautas, tais como: Nome, endereço, etc. O form terá a entrada do espectador e dependendo de sua necessidade, você pode armazenar os dados em um banco de dados.
Capo de Texto
É onde o usuário irá digitar os texto (nome, endereço, etc),alguns elementos irão nos dizer o que este campo de texto irá fazer e que tipo de dado ele irá trabalhar.
* Type - Determina o tipo de campo (Text, submit e password),
* Name - Atribui um determinado nome para o campo de modo que vocêpossa fazer referência mais tarde!
* Size - Dfine o tamanho horizontal da largura do campo. Sua unidade de medida é em espaços em branco.
* maxlength - Determina o número máximo de caracteres que podem ser inseridos.
Ex:
< form method="post" action="mailto:seuemail@email.com">
Name: < input type="text" size="10" maxlength="40" name="name">
Password: < input type="password" size="10" maxlength="10" name="password">
< /form>
O resultado será:
Agora vamos adicionar a funcionalidade ao nosso form. Geralmente o botão deve ser o último item a ser posto no form, seu nome normalmente é SUBMIT.
Além de adicionar o botão de envio, temos também de adicionar um destino de nossas informações e o metodo de envio!
Method - Nós so estaremos usando a funcionalidade do método "POST", que encia os dados sem apresentar qualquer informação ao visitante.
Action - Especifica a URL para enviar dados. Podendo ser enviado diretamente para um e-mail ou no caso de você usar programação como o PHP, você pode enviar os dados para o arquivo que irá trabalhar com esses dados.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
Name: < input type="text" size="10" maxlength="40" name="name" > < br/>
Password: < input type="password" size="10" maxlength="10" name="password" >< br/>
< input type="submit" value="Send" >
< /form>
O resultado será:
Dá ao usuário a opção de escolha ao usuário.
Value - Especifica o que será enviado. Somente o valoer será enviado para um determinado grupo de botões.
Name - Define o conjunto de radio buttons.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
What kind of shirt are you wearing? < br />
Shade:
< input type="radio" name="shade" value="dark">Dark
< input type="radio" name="shade" value="light">Light < br />
Size:
< input type="radio" name="size" value="small">Small
< input type="radio" name="size" value="medium">Medium
< input type="radio" name="size" value="large">Large < br />
< input type="submit" value="Email Myself">
< /form>
O resultado será:
As caixas de seleção liberam o usuário para escolher várias opções. Os atributos NAME e VALUE, se equiparam aos do radio button.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
Selecione seu personagem animado favorito!
< input type="checkbox" name="toon" value="Goofy">Goofy
< input type="checkbox" name="toon" value="Donald">Donald
< input type="checkbox" name="toon" value="Bugs">Bugs Bunny
< input type="checkbox" name="toon" value="Scoob">Scooby Doo
< input type="submit" value="Email Myself">
< /form>
O Resultado será:
A lista suspensa usa duas TAGS (SELECT e o OPTION). O select é a propria lista de cada opiton.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
College Degree?
< select name="degree">
< option>Choose One< /option>
< option>Some High School< /option>
< option>High School Degree< /option>
< option>Some College< /option>
< option>Bachelor's Degree< /option>
< option>Doctorate< /option>
< input type="submit" value="Email Yourself">
< /select>
< /form>
O resultado fica assim:
No entato outro tipo de form, uma lista de seleção destacada. Este formulário usa method"POST".
Vejamos:
< form method="post" action="mailto:seuremail@email.com">
Gênero Musical
< select multiple name="music" size="4">
< option value="emo" selected>Emo< /option>
< option value="metal/rock" >Metal/Rock< /option>
< option value="hiphop" >Hip Hop< /option>
< option value="ska" >Ska< /option>
< option value="jazz" >Jazz< /option>
< option value="country" >Country< /option>
< option value="classical" >Classical< /option>
< option value="alternative" >Alternative< /option>
< option value="oldies" >Oldies< /option>
< option value="techno" >Techno< /option>
< /select>
< input type="submit" value="Email Yourself">
< /form>
O resultado fica assim:
Para que um formulário de upload funcione você deverá usar de linguagem de programa o PHP, PERL ou JAVASCRIPT. Neste caso o código HTML só se faz para usr a interface para que o usuário saiba o que deve fazer.
Um formulário de upload é composto basicamente por 3 partes.
- Um campo oculto - Ele simplesmente limita o tamanho do arquivo.
- O campo de entrada - Neste campo o usuário tem a opção de digitar ou selecionar a URL.
- E o botão que manda o comando Upload.
O campo de texto neste caso assume o Type="File"
Vajamos:
< input type="hidden" name="MAX_FILE_SIZE" value="100" />
< input name="file" type="file" />
O resultado fica:
É o campo onde pode ser digitada um texto ou um comentário.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
< textarea rows="5" cols="20" wrap="physical" name="comments">
Entre com seu comentário
< /textarea>
< input type="submit" value="Email Yourself">
< /form>
O resultado final:
Repare que qualquer texto colocado entra as Tag de abertura e fechamento do textarea irão aparecer na campo!
Usa-se a tag INPUT para criar os botões, o que irá definir seu trabalho será seu atributo TYPE, pois o atributo VALUE é o nome que aparece no botão.
Vejamos:
< input type="submit" value="Submit" />< br />
< input type="submit" value="Send" />< br />
< input type="submit" value="Submit Form" />< br />
O resultados é este:
< input type="reset" value="Reset" />
< input type="reset" value="Start Over" />
< input type="hidden" />
< input type="hidden" id="age" name="age" value="23" />
< input type="hidden" id="DOB" name="DOB" value="01/01/70" />
< input type="hidden" id="admin" name="admin" value="1" />
Capo de Texto
É onde o usuário irá digitar os texto (nome, endereço, etc),alguns elementos irão nos dizer o que este campo de texto irá fazer e que tipo de dado ele irá trabalhar.
* Type - Determina o tipo de campo (Text, submit e password),
* Name - Atribui um determinado nome para o campo de modo que vocêpossa fazer referência mais tarde!
* Size - Dfine o tamanho horizontal da largura do campo. Sua unidade de medida é em espaços em branco.
* maxlength - Determina o número máximo de caracteres que podem ser inseridos.
Ex:
< form method="post" action="mailto:seuemail@email.com">
Name: < input type="text" size="10" maxlength="40" name="name">
Password: < input type="password" size="10" maxlength="10" name="password">
< /form>
O resultado será:
Email formulário
Agora vamos adicionar a funcionalidade ao nosso form. Geralmente o botão deve ser o último item a ser posto no form, seu nome normalmente é SUBMIT.
Além de adicionar o botão de envio, temos também de adicionar um destino de nossas informações e o metodo de envio!
Method - Nós so estaremos usando a funcionalidade do método "POST", que encia os dados sem apresentar qualquer informação ao visitante.
Action - Especifica a URL para enviar dados. Podendo ser enviado diretamente para um e-mail ou no caso de você usar programação como o PHP, você pode enviar os dados para o arquivo que irá trabalhar com esses dados.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
Name: < input type="text" size="10" maxlength="40" name="name" > < br/>
Password: < input type="password" size="10" maxlength="10" name="password" >< br/>
< input type="submit" value="Send" >
< /form>
O resultado será:
Radio Buttons
Dá ao usuário a opção de escolha ao usuário.
Value - Especifica o que será enviado. Somente o valoer será enviado para um determinado grupo de botões.
Name - Define o conjunto de radio buttons.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
What kind of shirt are you wearing? < br />
Shade:
< input type="radio" name="shade" value="dark">Dark
< input type="radio" name="shade" value="light">Light < br />
Size:
< input type="radio" name="size" value="small">Small
< input type="radio" name="size" value="medium">Medium
< input type="radio" name="size" value="large">Large < br />
< input type="submit" value="Email Myself">
< /form>
O resultado será:
Check Boxes
As caixas de seleção liberam o usuário para escolher várias opções. Os atributos NAME e VALUE, se equiparam aos do radio button.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
Selecione seu personagem animado favorito!
< input type="checkbox" name="toon" value="Goofy">Goofy
< input type="checkbox" name="toon" value="Donald">Donald
< input type="checkbox" name="toon" value="Bugs">Bugs Bunny
< input type="checkbox" name="toon" value="Scoob">Scooby Doo
< input type="submit" value="Email Myself">
< /form>
O Resultado será:
Drop Down List
A lista suspensa usa duas TAGS (SELECT e o OPTION). O select é a propria lista de cada opiton.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
College Degree?
< select name="degree">
< option>Choose One< /option>
< option>Some High School< /option>
< option>High School Degree< /option>
< option>Some College< /option>
< option>Bachelor's Degree< /option>
< option>Doctorate< /option>
< input type="submit" value="Email Yourself">
< /select>
< /form>
O resultado fica assim:
Selection Form
No entato outro tipo de form, uma lista de seleção destacada. Este formulário usa method"POST".
Vejamos:
< form method="post" action="mailto:seuremail@email.com">
Gênero Musical
< select multiple name="music" size="4">
< option value="emo" selected>Emo< /option>
< option value="metal/rock" >Metal/Rock< /option>
< option value="hiphop" >Hip Hop< /option>
< option value="ska" >Ska< /option>
< option value="jazz" >Jazz< /option>
< option value="country" >Country< /option>
< option value="classical" >Classical< /option>
< option value="alternative" >Alternative< /option>
< option value="oldies" >Oldies< /option>
< option value="techno" >Techno< /option>
< /select>
< input type="submit" value="Email Yourself">
< /form>
O resultado fica assim:
Upload Form
Para que um formulário de upload funcione você deverá usar de linguagem de programa o PHP, PERL ou JAVASCRIPT. Neste caso o código HTML só se faz para usr a interface para que o usuário saiba o que deve fazer.
Um formulário de upload é composto basicamente por 3 partes.
- Um campo oculto - Ele simplesmente limita o tamanho do arquivo.
- O campo de entrada - Neste campo o usuário tem a opção de digitar ou selecionar a URL.
- E o botão que manda o comando Upload.
O campo de texto neste caso assume o Type="File"
Vajamos:
< input type="hidden" name="MAX_FILE_SIZE" value="100" />
< input name="file" type="file" />
O resultado fica:
Text Area
< textarea>É o campo onde pode ser digitada um texto ou um comentário.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
< textarea rows="5" cols="20" wrap="physical" name="comments">
Entre com seu comentário
< /textarea>
< input type="submit" value="Email Yourself">
< /form>
O resultado final:
Repare que qualquer texto colocado entra as Tag de abertura e fechamento do textarea irão aparecer na campo!
Buttons < INPUT>
Usa-se a tag INPUT para criar os botões, o que irá definir seu trabalho será seu atributo TYPE, pois o atributo VALUE é o nome que aparece no botão.
Vejamos:
< input type="submit" value="Submit" />< br />
< input type="submit" value="Send" />< br />
< input type="submit" value="Submit Form" />< br />
O resultados é este:
< input type="reset" value="Reset" />
< input type="reset" value="Start Over" />
< input type="hidden" />
< input type="hidden" id="age" name="age" value="23" />
< input type="hidden" id="DOB" name="DOB" value="01/01/70" />
< input type="hidden" id="admin" name="admin" value="1" />
< DIV>
A tag < DIV> nada mais é do que uma recipiente para as outras tags. Bem como a tag body. Na verdade a div nada mais é do que blocos de trabalho aonde podemos colocar outras tags.
Atributos
* id
* width
* height
* title
* style
Vejamos:
< div style="background: green"> < div style="background: green">
< h5>SEARCH LINKS< /h5>
< a target="_blank" href="http://www.google.com">Google< /a> < a target="_blank" href="http://www.google.com"> Google < / a>
< /div> < / Div>
O resultado será:
Atributos
* id
* width
* height
* title
* style
Vejamos:
< div style="background: green"> < div style="background: green">
< h5>SEARCH LINKS< /h5>
< a target="_blank" href="http://www.google.com">Google< /a> < a target="_blank" href="http://www.google.com"> Google < / a>
< /div> < / Div>
O resultado será:
HTML - Layouts Div.
Quando começou o HTML, os Web Designers so tinham duas opções. Os Layout de Tabela ou os Frames. O elemento dive fornece uma terceira alternativa, pois uma div pode conter qualquer outro tipo de elemento HTML no seu inicio e fim da tag.
Código HTML:
id="menu" < div align="right">
< a href="">HOME< /a> < a href=""> HOME < /a>
< a href="">CONTACT< /a> < a href=""> CONTATO /a>
< a href="">ABOUT< /a> < a href=""> Sobre < /a>
< /div> < /Div>
< div id="content" align="left" bgcolor="white"> id="content" < div align="left" bgcolor="white">
< h5>Content Articles< /h5> < h5> artigos de conteúdo < / h5>
< p>This paragraph would be your content < p> Este número seria o seu conteúdo
paragraph with all of your readable material.< /p> parágrafo com todo o seu material legível. < /p>
< /div> < /Div>
HTML Layout Div:
< TABLE>
Tabela usada para organizar os dados dentro do site!
Tabela Simples 1x1:
< table> Tabela< /table>
Tabela 1x2:
< table>
< tr>
< td>L1 C1< /td>
< td>L1 C2< /td>
< /table>
O resultado:
Tabela 2x2:
< table>
< tr>
< td>L1 C1< /td>
< td>L1 C2< /td>
< tr>
< td>L2 C1< /td>
< td>L2 C2< /td>
< /table>
O resultado é:
Dentro da Tag < TABLE> existem SUBTAGS como você viu eu usei < tr>, < td>.
< TR> É justamente o commando que manda os dados para a linha de baixo, no caso de vir logo após a tag < TABLE> ela marca o inicio da entrada de dados na tabela, tento se passado a primeira linha e queremos ir para a segunda linha da tabela simplesmente a colocamos novamente, e assim para irmos para as demais linha que nossa tabela venhaa ter!
< TD> É o comando que passa os dados para a proxima coluna da mesma linha!
Atributos
Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a própria etiqueta < table>. A seguir, mostramos aqueles que nos podem parecer à principio mais importantes:
align Alinha horizontalmente a tabela em relação ao seu entorno.(left, center, right)
background Permite-nos colocar um fundo para a tabela desde um link a uma imagem.
bgcolor Dá cor de fundo à tabela.(tanto em Ingle quanto em HTML)Tabela de cor
border Define o número de pixels da borda principal. Se 0 a tabela exista, mas não aparece!
bordercolor Define a cor da borda.
cellpadding Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma.
cellspacing Define o espaço entre as bordas (em pixels).
height Define a altura da tabela em pixels ou porcentagem.
width Define a largura da tabela em pixels ou porcentagem.
Podemos alinha toda nossa tabela usando o atributo ALIGN dentro da tag HTML.
Veja < TABLE align="center">< TR>< TD>dados< /TD>< /TABLE>
o resultado é:
Podemos colocar tabela dentro de tabela.
Vamos fazer uma tabela externa 1x2 e uma interna na segunda coluna 3x1 ambas com borda 2.
Ou seja:
< table border="2">
< tr>
< td>Tabela 1< /td>
< td>
< table border="2" bordercolor="yellow" bgcolor="red">
< tr>
< td>1< /td>
< tr>
< td>2< /td>
< tr>
< td>3< /td>
< /table>
< /td>
< /table>
Tabela Simples 1x1:
< table> Tabela< /table>
| Tabela |
Tabela 1x2:
< table>
< tr>
< td>L1 C1< /td>
< td>L1 C2< /td>
< /table>
O resultado:
| L1 C1 | L1 C2 |
Tabela 2x2:
< table>
< tr>
< td>L1 C1< /td>
< td>L1 C2< /td>
< tr>
< td>L2 C1< /td>
< td>L2 C2< /td>
< /table>
O resultado é:
| L1 C1 | L1 C2 |
| L2 C1 | L2 C2 |
Dentro da Tag < TABLE> existem SUBTAGS como você viu eu usei < tr>, < td>.
< TR> É justamente o commando que manda os dados para a linha de baixo, no caso de vir logo após a tag < TABLE> ela marca o inicio da entrada de dados na tabela, tento se passado a primeira linha e queremos ir para a segunda linha da tabela simplesmente a colocamos novamente, e assim para irmos para as demais linha que nossa tabela venhaa ter!
< TD> É o comando que passa os dados para a proxima coluna da mesma linha!
Atributos
Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a própria etiqueta < table>. A seguir, mostramos aqueles que nos podem parecer à principio mais importantes:
align Alinha horizontalmente a tabela em relação ao seu entorno.(left, center, right)
background Permite-nos colocar um fundo para a tabela desde um link a uma imagem.
bgcolor Dá cor de fundo à tabela.(tanto em Ingle quanto em HTML)Tabela de cor
border Define o número de pixels da borda principal. Se 0 a tabela exista, mas não aparece!
bordercolor Define a cor da borda.
cellpadding Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma.
cellspacing Define o espaço entre as bordas (em pixels).
height Define a altura da tabela em pixels ou porcentagem.
width Define a largura da tabela em pixels ou porcentagem.
Podemos alinha toda nossa tabela usando o atributo ALIGN dentro da tag HTML.
Veja < TABLE align="center">< TR>< TD>dados< /TD>< /TABLE>
o resultado é:
| dados |
Podemos colocar tabela dentro de tabela.
Vamos fazer uma tabela externa 1x2 e uma interna na segunda coluna 3x1 ambas com borda 2.
Ou seja:
< table border="2">
< tr>
< td>Tabela 1< /td>
< td>
< table border="2" bordercolor="yellow" bgcolor="red">
< tr>
< td>1< /td>
< tr>
< td>2< /td>
< tr>
< td>3< /td>
< /table>
< /td>
< /table>
| Tabela 1 |
|
Linhas e Letreiros
Letreiros
É possível colocar mais recursos em seu site. Um deles é o letreiro. A imagem fica "rolando" pela tela. Ele é feito com a tag "< MARQUEE>", porém este recurso só funciona no Internet Explorer. No Netscape, o texto ficará parado. Por isso analise bem quando valerá a pena usá-lo!
Veja como usar este recurso:
< MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto< /MARQUEE>
- Em "BEHAVIOR" você coloca o tipo de efeito, que pode ser "SCROLL" ou "SLIDE".
- Em "WIDTH" você pode definir o tamanho que o letreiro vai ocupar na tela.
Veja : < marquee BEHAVIOR=SCROLL WIDTH=100%>Bem Vindos ao Tutor Designer< /MARQUEE>
**********************************************************************************
Linhas
Com as linhas é possível que você crie separações entre textos e imagens. É muito simples criar uma linha. Basta incluir a tag < HR> (não é preciso fazer o fechamento dela).
Veja o resultado:
Atributos da linha:
Você pode definir atributos para a linha, como alinhamento, largura e cor. Veja como fazer: - WIDTH
Você define a largura da régua, em pixels ou em porcentagem.
Veja:
< HR WIDTH="50%"> insere uma linha que ocupa 50% do espaço disponível na tela.
- ALIGN
Define o alinhamento da régua que pode ser "Left" (esquerda), "Right" (direita) ou "Center" (centralizado):
< HR WIDTH=100% ALIGN=RIGHT> insere uma linha de comprimento 100% (do espaço disponível na tela) e alinhada à direita.
- COLOR
Define a cor para a linha, este recurso não funciona no Netscape 4x. Para colocara cor, basta incluir ela na tag da seguinte forma:
< HR WIDTH="100%" COLOR="#FFFFFF">
- NOSHADE
Define se a linha vai ter um efeito tridimensional. Se você não incluir este atributo, a linha terá o efeito tridimensional.
Exemplo combinando os atributos:
< HR WIDTH="100%" ALIGN="RIGHT" COLOR="#CC0000" NOSHADE>
Insere uma linha de comprimento 100% (do espaço disponível), alinhada à direita, sem efeito tridimensional (feito pelo atributo NOSHADE) e com cor vermelha.
É possível colocar mais recursos em seu site. Um deles é o letreiro. A imagem fica "rolando" pela tela. Ele é feito com a tag "< MARQUEE>", porém este recurso só funciona no Internet Explorer. No Netscape, o texto ficará parado. Por isso analise bem quando valerá a pena usá-lo!
Veja como usar este recurso:
< MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto< /MARQUEE>
- Em "BEHAVIOR" você coloca o tipo de efeito, que pode ser "SCROLL" ou "SLIDE".
- Em "WIDTH" você pode definir o tamanho que o letreiro vai ocupar na tela.
Veja : < marquee BEHAVIOR=SCROLL WIDTH=100%>Bem Vindos ao Tutor Designer< /MARQUEE>
**********************************************************************************
Linhas
Com as linhas é possível que você crie separações entre textos e imagens. É muito simples criar uma linha. Basta incluir a tag < HR> (não é preciso fazer o fechamento dela).
Veja o resultado:
Atributos da linha:
Você pode definir atributos para a linha, como alinhamento, largura e cor. Veja como fazer: - WIDTH
Você define a largura da régua, em pixels ou em porcentagem.
Veja:
< HR WIDTH="50%"> insere uma linha que ocupa 50% do espaço disponível na tela.
- ALIGN
Define o alinhamento da régua que pode ser "Left" (esquerda), "Right" (direita) ou "Center" (centralizado):
< HR WIDTH=100% ALIGN=RIGHT> insere uma linha de comprimento 100% (do espaço disponível na tela) e alinhada à direita.
- COLOR
Define a cor para a linha, este recurso não funciona no Netscape 4x. Para colocara cor, basta incluir ela na tag da seguinte forma:
< HR WIDTH="100%" COLOR="#FFFFFF">
- NOSHADE
Define se a linha vai ter um efeito tridimensional. Se você não incluir este atributo, a linha terá o efeito tridimensional.
Exemplo combinando os atributos:
< HR WIDTH="100%" ALIGN="RIGHT" COLOR="#CC0000" NOSHADE>
Insere uma linha de comprimento 100% (do espaço disponível), alinhada à direita, sem efeito tridimensional (feito pelo atributo NOSHADE) e com cor vermelha.
Fazendo um texto igual oa do Jornal da TV
Vejamos:
< marquee direction=up> < P align="center">< center> < font color=#7B68EE>Ak seu texto< / font>< / center>< / p>< / marquee>
O resultado é este:
Listas
Você usa listas para criar menus simples ou organização de temas e textos em sua página.
O HTML permite definir três categorias distintas de listas:
- Ordenadas,
- Sem ordenação
- E uma especial, chamada lista de definição.
Listas Ordenadas
As listas ordenadas são numeradas e só usam um bullet (marca de • ) para demarcar cada uma das linhas.
Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par
Exemplo 1:
< OL>
< LI> Primeiro item de uma lista ordenada
< LI> Segundo item de uma lista ordenada
< LI> Terceiro item de uma lista ordenada
< /OL>
Produz o seguinte resultado:
O HTML permite definir três categorias distintas de listas:
- Ordenadas,
- Sem ordenação
- E uma especial, chamada lista de definição.
Listas Ordenadas
As listas ordenadas são numeradas e só usam um bullet (marca de • ) para demarcar cada uma das linhas.
Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par
- ...
Exemplo 1:
< OL>
< LI> Primeiro item de uma lista ordenada
< LI> Segundo item de uma lista ordenada
< LI> Terceiro item de uma lista ordenada
< /OL>
Produz o seguinte resultado:
- Primeiro item de uma lista ordenada
- Segundo item de uma lista ordenada
- 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
- ...
- Primeiro item de uma lista encadeada.
- Segundo item de uma lista encadeada.
- Terceiro item de uma lista encadeada.
- Quarto item de uma lista encadeada.
- Terceiro item de uma lista encadeada.
- Quinto item de uma lista encadeada.
- Primeiro item de uma lista ordenada com link
- Segundo item de uma lista ordenada sem link
- Terceiro item de uma lista ordenada com link
Link para Downloads
É provável que, depois de criar suas páginas, você queira colocar arquivos para que os visitantes façam download em sua home page. Este é um recurso bem fácil e simples. Vamos explicar.
Não existe um comando que faça o download. O que acontece é que, sempre que aparece um tipo de arquivo que o navegador não reconhece, ele automaticamente inicia o download. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele automaticamente inicia o download.
Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arquivo para download, tudo que você precisa fazer é direcionar o link para ele como se estivesse colocando um link para uma página. Exemplo: Para o download de um arquivo "exemplo.exe", o código de um link simples ficaria assim:
< a href="exemplo.exe">Descrição do link< /a>
- Observações
Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que você já tenha instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou ".mpg", o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a compactação do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito.
Não existe um comando que faça o download. O que acontece é que, sempre que aparece um tipo de arquivo que o navegador não reconhece, ele automaticamente inicia o download. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele automaticamente inicia o download.
Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arquivo para download, tudo que você precisa fazer é direcionar o link para ele como se estivesse colocando um link para uma página. Exemplo: Para o download de um arquivo "exemplo.exe", o código de um link simples ficaria assim:
< a href="exemplo.exe">Descrição do link< /a>
- Observações
Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que você já tenha instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou ".mpg", o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a compactação do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito.
Criando links
Links: São os pontos clicáveis do documento HTML que levam a qualquer outro documento ou site na Internet. Podemos fazer links internos, para documentos no mesmo servidor, links externos para qualquer lugar na Web, ou até mesmo links para um mesmo ponto dentro de uma página.
Obs: Para links externos se faz necessário o uso do “http” (Hypertext Transfer Protocol), já para links internos apenas o caminho para este arquivo.
Ex: LINK INTERNO= < a href=”foto1.jpg”>foto1< /a>
LINK EXTERNO = < a href=”HTTP://www.seusite.com.br/imagens/foto1.jpg”>Foto1< /a>
< h3> Ambos dependem da tag:< /h3>
< a href="arquivo.html">descrição< /a>
Também existem os links para fazer com que as pessoas enviem um email. Se você quer um lugar para os usuários deixarem um email, faça assim:
< a href="seuemail@tttt.com">Deixe um email para mim ! < /a>
Resultado: Deixe um email para mim!
Como fazer um link abrir em outra janela?
Simples "TARGET" (alvo), este é o comando para ordenar a forma que abrirá a página ao clicar-mos no link.
“_blank” – Abre em outra pagina,
“_Self” – Obriga que qualquer página de retorno de um "form" seja carregada dentro da janela que o contém,
“_Top” - Obriga que qualquer página seja carregada na janela de maior nível, limpando qualquer janela de frame existente no momento,
“_Parent”- Obriga que qualquer página de retorno de um FORM seja carregada na janela que é a mãe da janela que contém o FORM, isto é, se a janela do FORM é parte de um documento que usa frames, ela será carregada na janela controlada pelo tag FRAMESET.
Ex:
< a href="http://www.google.com.br" target="_blank" >Google< /a>
O resultado é Google
São links estabelecidos para certas partes de uma mesma página ou de outra página qualquer, por exemplo, se você quer que um link vá direto para um texto que está no meio de uma página sem o visitante ter que descer a página. Por exemplo, clicando aqui você salta automaticamente para o fim da página.
Para o funcionamento de uma âncora deve-se estabelecer dois comandos:
. Um que defina o lugar da página para onde se pretende "saltar";
. Outro que identifique esse ponto de destino.
Links com âncoras para uma mesma página
Você pode fazer com que links saltem para determinados pontos de uma mesma página, facilitando a navegação. Veja como. Primeiro vamos definir o ponto de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá:
< A NAME="Coloque o nome da ancora aqui">< /A>
Obs.: NAME é um parâmetro que define um ponto de destino.
Agora você pode usar a tag de link "comum" para fazer o link saltar para o ponto onde você definiu:
< a href="#nome da ancora">Texto< /a>
Repare que há um símbolo "#" antes do nome da âncora. É ele que vai fazer o navegador entender que deve ir para a âncora que você definiu.
Links com âncoras para uma outra página
Agora digamos que você queira que o link vá para uma outra página e direto para um texto no final dela. Primeiro você deve incluir, na página de destino, a tag da âncora no ponto onde ela vai aparecer ela depois de clicar no link, e salvar a página. Em seguida, na página que terá o link, você deve construir a tag assim:
< a href="nome-do-lugar-a-ser-levado#nome da ancora">Texto< /a>
Em "nome-do-lugar-a-ser-levado" você coloca o URL ou a página html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de âncora deve ser o mesmo nome de âncora que você definiu na página de destino.
Você pode incluir quantas âncoras quiser em sua página, mas lembre-se de que cada uma deve ter um nome diferente.
Vamos somar nossos conhecimentos adquiridos!!
Para isso iremos usar as tag < A href>LINK + < IMG>.
Como fazer? Na parte de LINKS aprendemos que ela tem a sua descrição, que é o texto que aparece em forma de link. A imagem ela irá no lugar do texto como se fosse a descição do link!
Vamos lá:
< a href="http://www.google.com.br" target="_blank">< img src="google.jpg" />
O resultado final é
Obs: Para links externos se faz necessário o uso do “http” (Hypertext Transfer Protocol), já para links internos apenas o caminho para este arquivo.
Ex: LINK INTERNO= < a href=”foto1.jpg”>foto1< /a>
LINK EXTERNO = < a href=”HTTP://www.seusite.com.br/imagens/foto1.jpg”>Foto1< /a>
< h3> Ambos dependem da tag:< /h3>
< a href="arquivo.html">descrição< /a>
Também existem os links para fazer com que as pessoas enviem um email. Se você quer um lugar para os usuários deixarem um email, faça assim:
< a href="seuemail@tttt.com">Deixe um email para mim ! < /a>
Resultado: Deixe um email para mim!
Como fazer um link abrir em outra janela?
Simples "TARGET" (alvo), este é o comando para ordenar a forma que abrirá a página ao clicar-mos no link.
Seus Parâmetros:
“_blank” – Abre em outra pagina,
“_Self” – Obriga que qualquer página de retorno de um "form" seja carregada dentro da janela que o contém,
“_Top” - Obriga que qualquer página seja carregada na janela de maior nível, limpando qualquer janela de frame existente no momento,
“_Parent”- Obriga que qualquer página de retorno de um FORM seja carregada na janela que é a mãe da janela que contém o FORM, isto é, se a janela do FORM é parte de um documento que usa frames, ela será carregada na janela controlada pelo tag FRAMESET.
Ex:
< a href="http://www.google.com.br" target="_blank" >Google< /a>
O resultado é Google
Links Âncoras
São links estabelecidos para certas partes de uma mesma página ou de outra página qualquer, por exemplo, se você quer que um link vá direto para um texto que está no meio de uma página sem o visitante ter que descer a página. Por exemplo, clicando aqui você salta automaticamente para o fim da página.
Para o funcionamento de uma âncora deve-se estabelecer dois comandos:
. Um que defina o lugar da página para onde se pretende "saltar";
. Outro que identifique esse ponto de destino.
Links com âncoras para uma mesma página
Você pode fazer com que links saltem para determinados pontos de uma mesma página, facilitando a navegação. Veja como. Primeiro vamos definir o ponto de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá:
< A NAME="Coloque o nome da ancora aqui">< /A>
Obs.: NAME é um parâmetro que define um ponto de destino.
Agora você pode usar a tag de link "comum" para fazer o link saltar para o ponto onde você definiu:
< a href="#nome da ancora">Texto< /a>
Repare que há um símbolo "#" antes do nome da âncora. É ele que vai fazer o navegador entender que deve ir para a âncora que você definiu.
Links com âncoras para uma outra página
Agora digamos que você queira que o link vá para uma outra página e direto para um texto no final dela. Primeiro você deve incluir, na página de destino, a tag da âncora no ponto onde ela vai aparecer ela depois de clicar no link, e salvar a página. Em seguida, na página que terá o link, você deve construir a tag assim:
< a href="nome-do-lugar-a-ser-levado#nome da ancora">Texto< /a>
Em "nome-do-lugar-a-ser-levado" você coloca o URL ou a página html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de âncora deve ser o mesmo nome de âncora que você definiu na página de destino.
Você pode incluir quantas âncoras quiser em sua página, mas lembre-se de que cada uma deve ter um nome diferente.
Imagem como link
Vamos somar nossos conhecimentos adquiridos!!
Para isso iremos usar as tag < A href>LINK + < IMG>.
Como fazer? Na parte de LINKS aprendemos que ela tem a sua descrição, que é o texto que aparece em forma de link. A imagem ela irá no lugar do texto como se fosse a descição do link!
Vamos lá:
< a href="http://www.google.com.br" target="_blank">< img src="google.jpg" />
O resultado final é
terça-feira, 20 de julho de 2010
Acrescentando imagem
Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP.
A tag para inserir uma imagem em sua página é a seguinte:
< img src=" endereço da imagem com extensão" />
-
São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas você pode alterar o tamanho original da imagem.
- Alt
Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.
- Border
Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero.
< img src="http://sistematiqueiros.files.wordpress.com/2009/08/html.jpg" alt="texto" border=0 width="50" height="60"/>
O resultado sera:
Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui parâmetros do alinhamento dentro da tag de imagem.
< img src="nome da imagem " align="top"/>
Repare que só incluímos o align="top" na tag de imagem.
Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim:
< img src="nome da imagem" align="middle"/>
Repare que só incluímos o align="middle" na tag de imagem.
Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto.
A tag para este alinhamento é: Esquerda
< img src="nome da imagem" align="left">
Veja que agora a imagem está alinhada do lado direito e o texto fica ao redor. É exatamente o oposto do alinhamento à esquerda.
A tag para este alinhamento é: Direita
< img src="nome da imagem" align="right">
- Para se ter uma imagem centralizada:
< CENTER>< img src="nome da imagem">< /CENTER>
A tag para inserir uma imagem em sua página é a seguinte:
< img src=" endereço da imagem com extensão" />
Atributos de Imagem
-
Width e Height
São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas você pode alterar o tamanho original da imagem.
- Alt
Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.
- Border
Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero.
< img src="http://sistematiqueiros.files.wordpress.com/2009/08/html.jpg" alt="texto" border=0 width="50" height="60"/>
O resultado sera:
Alinhando as imagens
Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui parâmetros do alinhamento dentro da tag de imagem.
< img src="nome da imagem " align="top"/>
Repare que só incluímos o align="top" na tag de imagem.
Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim:
< img src="nome da imagem" align="middle"/>
Repare que só incluímos o align="middle" na tag de imagem.
Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto.
A tag para este alinhamento é: Esquerda
< img src="nome da imagem" align="left">
Veja que agora a imagem está alinhada do lado direito e o texto fica ao redor. É exatamente o oposto do alinhamento à esquerda.
A tag para este alinhamento é: Direita
< img src="nome da imagem" align="right">
- Para se ter uma imagem centralizada:
< CENTER>< img src="nome da imagem">< /CENTER>
Formatando textos
Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim:
< B> Texto < /B> - Texto fica em Negrito.
< U> Texto < /U> - Texto Sublinhado.
< I> Texto < /I> - Texto em Itálico.
< CENTER> Texto < /CENTER>Texto centralizado.
Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo:
< CENTER>< B>< U>Teste 1< /U> < I>e< /I> Teste 2< /B>< /CENTER>
O resultado é:
Teste1 e Teste 2
Parágrafos
Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova.
Para fazer um parágrafo novo, basta colocar a tag < P>. Por exemplo, escreva no editor o seguinte, deste jeito:
Parágrafo 1< P>Parágrafo 2.
O resultado será este:
Parágrafo 1
Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag < BR>. Por exemplo, escreva:
Parágrafo 1< BR>Linha 1< P>Parágrafo 2< BR>Linha 2.
O resultado será este:
Parágrafo 1
Linha 1
Os parágrafos também podem ter atributos para o alinhamento dos textos. Basta apenas incluir depois do "P" o parâmetro "align=tipo de alinhamento". Os atributos são:
- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado (Só funciona em navegadores versão 4 ou superior)
Para incluir um destes atributos é simples. Veja os exemplos:
< 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>
Este texto recebeu o efeito Typerwriter coloque entre tags < tt> < /tt>
Esta é a diferença entre um texto Big e um Small
Esta é a diferença entre um texto Subscrito e um Sobrescrito
Tags < B> , < U> , < I> e < CENTER>
< B> Texto < /B> - Texto fica em Negrito.
< U> Texto < /U> - Texto Sublinhado.
< I> Texto < /I> - Texto em Itálico.
< CENTER> Texto < /CENTER>
Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo:
< CENTER>< B>< U>Teste 1< /U> < I>e< /I> Teste 2< /B>< /CENTER>
O resultado é:
Parágrafos
Tag < P> - Parágrafos:
Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova.
Para fazer um parágrafo novo, basta colocar a tag < P>. Por exemplo, escreva no editor o seguinte, deste jeito:
Parágrafo 1< P>Parágrafo 2.
O resultado será este:
Parágrafo 1
Parágrafo 2.
Tag < BR> - Linhas
Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag < BR>. Por exemplo, escreva:
Parágrafo 1< BR>Linha 1< P>Parágrafo 2< BR>Linha 2.
O resultado será este:
Parágrafo 1
Linha 1
Parágrafo 2
Linha 2.
Alinhamento de textos com a tag < P>
Os parágrafos também podem ter atributos para o alinhamento dos textos. Basta apenas incluir depois do "P" o parâmetro "align=tipo de alinhamento". Os atributos são:
- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado (Só funciona em navegadores versão 4 ou superior)
Para incluir um destes atributos é simples. Veja os exemplos:
< p align="left">Texto alinhado à esquerda< /p>
Texto alinhado à esquerda
< p align="right">Texto alinhado à direita< /p>
Texto alinhado à direita
< p align="center">Texto centralizado< /p>
Texto centralizado
< p align="justify">Texto justificado< /p>
Texto justificado
Este texto recebeu o efeito Typerwriter coloque entre tags < tt> < /tt>
Esta é a diferença entre um texto Big e um Small
Esta é a diferença entre um texto Subscrito e um Sobrescrito
Para chamar a use o comando Blink
Tags de título < H> - "Headings"
Simplesmente colocando o H+mumero você pode alterar o tamanho de um texto, frase, palavra, ou simplsmente uma única letra, mas lembre:Quando você usa esta tag, após ela a frase, palavra, ou seja lá o que você escreveu irá para o próximo parágrafo, pois esta tag é usada para Títulos e Subtítulos.
Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6.
< H1> Este é o primeiro nível < /H1>
< H2> Este é o segundo nível < /H2>
< H3> Este é o terceiro nível < /H3>
< H4> Este é o quarto nível < /H4>
< H5> Este é o quinto nível < /H5>
< H6> Este é o sexto nível < /H6>
Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6.
< H1> Este é o primeiro nível < /H1>
< H2> Este é o segundo nível < /H2>
< H3> Este é o terceiro nível < /H3>
< H4> Este é o quarto nível < /H4>
< H5> Este é o quinto nível < /H5>
< H6> Este é o sexto nível < /H6>
Este é o primeiro nível
Este é o segundo nível
Este é o terceiro nível
Este é o quarto nível
Este é o quinto nível
Este é o sexto nível
< FONT>
Você pode também usar as tags de fonte no lugar das tags de "headings". Este tipo de tag é a mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é < FONT >, e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra.
Acompanhe como usar as tags de fontes:
Atributo FACE
FACE:
Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:
< FONT FACE=fonte_da_letra>Texto< /FONT>
Exemplo:
< FONT FACE=Times>Fonte Times New Roman < /FONT>
Fonte Times New Roman
< FONT FACE=Arial>Fonte Arial < /FONT>
Fonte Arial
< FONT FACE=Courier>Fonte Courier New < /FONT>
Fonte Courier New
- Atributo COLOR e SIZE
- COLOR e SIZE:
Atributos cor e tamanho:
< font size="4"> A palavra terá o tamanho 4< /font>
A palavra terá o tamanho 4
< font color="black"> A palavra terá a cor preta< /font>
A palavra terá a cor preta.
Podemos também combinar as tags acima:
< font face="Arial" size="4" color="blue">Palavra com tamanho 4 e em Azul< /font>
Palavra com tamanho 4 e em Azul
Acompanhe como usar as tags de fontes:
Atributo FACE
FACE:
Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:
< FONT FACE=fonte_da_letra>Texto< /FONT>
Exemplo:
< FONT FACE=Times>Fonte Times New Roman < /FONT>
Fonte Times New Roman
< FONT FACE=Arial>Fonte Arial < /FONT>
Fonte Arial
< FONT FACE=Courier>Fonte Courier New < /FONT>
Fonte Courier New
- Atributo COLOR e SIZE
- COLOR e SIZE:
Atributos cor e tamanho:
< font size="4"> A palavra terá o tamanho 4< /font>
A palavra terá o tamanho 4
< font color="black"> A palavra terá a cor preta< /font>
A palavra terá a cor preta.
Podemos também combinar as tags acima:
< font face="Arial" size="4" color="blue">Palavra com tamanho 4 e em Azul< /font>
Palavra com tamanho 4 e em Azul
< BODY >
Através de atributos de < BODY >, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (papel de parede da página)
Ou seja podemos generalizar, todo o texto terá tamanho tal, cor tal, etc.
< BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor" BACKGROUND="imagem que vai aparecer">
Onde:
- BGCOLOR
Cor de fundo (padrão: cinza ou branco)
- TEXT
Cor dos textos da página (padrão: preto)
- LINK
Cor dos links (padrão: azul)
- ALINK
Cor dos links, quando acionados (padrão: vermelho)
- VLINK
Cor dos links, depois de visitados (padrão: azul escuro ou roxo)
- BACKGROUND
Imagem de fundo. Saiba como colocar uma imagem de fundo.
Em "cor", você pode colocar os valores de cores em inglês como:
Preto = black
Branco = white
Azul = blue
Amarelo = yellow
Vermelho = red
Você também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de escrever o nome da cor em inglês, você coloca o valor da cor
Algumas cores disponíveis RRGGBB (hexadecimal):
Cor - Código HTML
PRETO - #000000
BRANCO - #FFFFFF
VERMELHO - #FF0000
VERDE - #00FF00
AZUL - #0000FF
ROSA - #FF00FF
AMARELO - #FFFF00
Você pode conferir a tabela completa de cores clicandoaqui.
Leftmargin Define uma mergem do lado esquerdo do seu elemento.
Topmargin Define uma margem na parte superior do elemento.
Um conjunto de atributos de margem estão disponiveis para a tag BODY. Esse atributos de trabalho muito parecido com aquele de um programa de processamento de texto, permite que você defina uma megem de valor em pixel para esquerda, direita, superior e infeior de seu site. Definir esse atributos significa que todo conteúdo que você colocar dentro das tags de seu corpo, irá seguir o que foi posto.
Vejamos:
< body topmargin="50">
< body leftmargin="50">
O atributo de texto, define a cor de todos os textos contidos no corpo da tag.
Pense nisso como um meio para definir a cor de todo o seu texto contando como pardão.
Vejamos:
< body text="red" >
ou
< body text="rgb(255,0,0)" >
Na mesma linha também poemos configurar a cor dos links visitados.
Vejamos:
< body link="white" vlink="black" >
ou
< body link="rgb(255,255,255)" vlink="rgb(0,0,0)" >
Ou seja podemos generalizar, todo o texto terá tamanho tal, cor tal, etc.
< BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor" BACKGROUND="imagem que vai aparecer">
Onde:
- BGCOLOR
Cor de fundo (padrão: cinza ou branco)
- TEXT
Cor dos textos da página (padrão: preto)
- LINK
Cor dos links (padrão: azul)
- ALINK
Cor dos links, quando acionados (padrão: vermelho)
- VLINK
Cor dos links, depois de visitados (padrão: azul escuro ou roxo)
- BACKGROUND
Imagem de fundo. Saiba como colocar uma imagem de fundo.
Em "cor", você pode colocar os valores de cores em inglês como:
Preto = black
Branco = white
Azul = blue
Amarelo = yellow
Vermelho = red
Você também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de escrever o nome da cor em inglês, você coloca o valor da cor
Algumas cores disponíveis RRGGBB (hexadecimal):
Cor - Código HTML
PRETO - #000000
BRANCO - #FFFFFF
VERMELHO - #FF0000
VERDE - #00FF00
AZUL - #0000FF
ROSA - #FF00FF
AMARELO - #FFFF00
Você pode conferir a tabela completa de cores clicandoaqui.
Atributos exclusivos
Leftmargin Define uma mergem do lado esquerdo do seu elemento.
Topmargin Define uma margem na parte superior do elemento.
Um conjunto de atributos de margem estão disponiveis para a tag BODY. Esse atributos de trabalho muito parecido com aquele de um programa de processamento de texto, permite que você defina uma megem de valor em pixel para esquerda, direita, superior e infeior de seu site. Definir esse atributos significa que todo conteúdo que você colocar dentro das tags de seu corpo, irá seguir o que foi posto.
Vejamos:
< body topmargin="50">
< body leftmargin="50">
Base Text
O atributo de texto, define a cor de todos os textos contidos no corpo da tag.
Pense nisso como um meio para definir a cor de todo o seu texto contando como pardão.
Vejamos:
< body text="red" >
ou
< body text="rgb(255,0,0)" >
Base Links
Na mesma linha também poemos configurar a cor dos links visitados.
Vejamos:
< body link="white" vlink="black" >
ou
< body link="rgb(255,255,255)" vlink="rgb(0,0,0)" >
< META >
Tag < META >
A tag META é uma das principais que são colocadas é um documento HTML, sua presença ou sua falta, indica que o programador teve a preocupação com seu cliente, se ele aparece nos sistemas de busca ou não, se terá título nas janelas, se a grafia estará sendo interpretada corretamente pelos browsers.
Os campos < META > têm dois atributos principais:
• NAME, indicando um nome para a informação
• HTTP-EQUIV, que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação desse campo pode ser lida pelos browsers, e provocar algumas ações.
< HEAD >
< TITLE > Título do Documento < /TITLE >
< META NAME="nome" CONTENT="valor">
< META HTTP-EQUIV="nome" CONTENT="valor">
< /HEAD>
Este documento, por exemplo, tem as seguintes informações:
< HEAD>
< META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">
< META HTTP-EQUIV="pragma" CONTENT="no-cache">
< TITLE>A seção HEAD - Tutor Designer< /TITLE>
< META NAME="Author" CONTENT="Claudemir – clausw1@gmail.com">
< META NAME="Generator" CONTENT="Dreanweaver">
< META NAME="Description" CONTENT="Tutoriais para Webdesigners e desenvolvedores de sites">
< META NAME="KeyWords" CONTENT="HTML, WWW, Webpublishing, Internet, Webdesign">
< /HEAD>
Alguns valores dos atributos META NAME são inseridos automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classificação da página em algumas ferramentas de busca. Essas informações não têm qualquer efeito na apresentação da página, mas servem como uma explicação ou documentação sobre as informações contidas nela.
Há poucos valores para META HTTP-EQUIV em uso. O mais comum é content-type, que indica o conjunto de caracteres usado na página: essa informação ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto.
Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindo-lhe o valor Refresh
Keywords Meta Tag
Usado pelos robos de busca para localizar teu site, nelo você deve colocar as palavra que você acha que as pessoas irão digitar na sua busca.< head>
< meta name="keywords" content="keyword, key keywords, etc" />
< /head>
"Name" define o tipo de meta tag está sendo usada. Observe que as palavras estão separadas por vírgula.
Um exemplo para este blog seria:
< head>
< meta name="keywords" content="HTML, XHTML, CSS, tutorials, tutor, designer, web" />
< /head>
Description Meta Tag
Aqui você deverá escrever uma frase ou duas descrevendo seu site bara os motores de busca.
< head>
< meta name="description" content="contains webmaster tutorials." />
< /head>
Cuidado se a tag de descrição for diferente das palavras chaves visto a sima, você poderá ser ignorado pelos motores de busca ou até mesmo bloqueado.
Revised Meta Tag
Indica quando s última atualização do site foi feita.
< head>
< meta name="revised" content="Happy New Year: 1/1/2003" />
< /head>
Refresh Page and Redirect
Serve para redirecionar o visitante de um site para outro após tempo deterninado.
< head>
< meta http-equiv="refresh" content="10; url=http://www.site2.com" />
< /head>
O código acima irá redirecionar o o internauta para outro site após 10 seg.
< HEAD >
< HEAD >
Como falado anteriormente a tag HEAD é aonde se coloca o < TITLE>Título< /TITLE> e também as tags que ajudarão aos ROBOS de busca do Google a juntar informações de seu site, para auxiliar os leitores na busca do sistema, e também tem a função de organizar com a tag META a ortografia brasileira ou a de outros países!
Seu primeiro documento HTML
Inicio do documento se dá pela TAG de iniciação.
< HTML>
HEAD é onde irá a assinatura, titulo, a as ferramantas que ajudarão ao sistema de busca
< HEAD>
Titulo de seu site (aparece no canto superior de seu Browser.
< TITLE>Título de sue site ou um nome de sua empresa< / TITLE>
Fechamento da TAG HEAD
< / HEAD>
BODY é o corpo de seu site, é aonde você irá escrever todos os códigos, e formará o Design de seu site.
< BODY>
Contenu de la page
Fechamento da TAG BODY.
< / BODY>
Fechamento da TAG HTML e fim de nosso Documento
< / HTML>
Ex:
< html>
< head>
< title>Meu site Ola Mundo< /title>
< /head>
< body>
Hello World
< /body>
< /html>
Não se esqueça de retirar os espaços que eu coloquei nas tags
O resulotado será este!
Hello World
< HTML>
HEAD é onde irá a assinatura, titulo, a as ferramantas que ajudarão ao sistema de busca
< HEAD>
Titulo de seu site (aparece no canto superior de seu Browser.
< TITLE>Título de sue site ou um nome de sua empresa< / TITLE>
Fechamento da TAG HEAD
< / HEAD>
BODY é o corpo de seu site, é aonde você irá escrever todos os códigos, e formará o Design de seu site.
< BODY>
Contenu de la page
Fechamento da TAG BODY.
< / BODY>
Fechamento da TAG HTML e fim de nosso Documento
< / HTML>
Ex:
< html>
< head>
< title>Meu site Ola Mundo< /title>
< /head>
< body>
Hello World
< /body>
< /html>
Não se esqueça de retirar os espaços que eu coloquei nas tags
O resulotado será este!
Hello World
Introdução ao HTML.
Todo documento HTML é composto de Tags. Tags são comandos HTML,nessa tags podemos dizer ao documento HTML o que queremos que ele faça, todas as tags se iniciam com o com o símbolo menor que “<”e maior que “>” dentro deles colocamos nosso comando, para finalizar a tag usamos menor que juntamente com a barra de divisão “< / ”e maior que “>”.
Dentro de cada tag existem parâmetros, usados para apurar ainda mais nosso código, esses parâmetro são STRIGS. Strings são popularmente chamadas de texto, elas vem escritas dentro de ASPAS (“ ”).
Ex: < HTML> Conteúdo do site< /HTML>
Algumas tags são fechadas sem o auxilio da segunda abertura da tag.
Ex: < IMG SRC=”endereço da imagem.jpg” />
Podemos comentar nosso código para mais tarde saber-mos o que foi feito.
Isso se vaz < !-- comentário -->
Esses comentarios não aparecem no site!!!
OBS: Existem uma certa Hierarquia nas tag que devem ser respeitadas!!
EX: < HTML>
< TABLE>
< FORM>
Aqui vc escreve o seus codigos //// agora vamos fechar com cuidado.
Trabalhando na ordem inversa a que foram abertas
< /FORM>
< /TABLE>
< /HTML>
Isso deve ser respeitado para um bom funcionamento do codigo HTML e por fim seu site!!
*Atenção: Não se esqueça de retirar os espaços existentes nas TAGS esses espaços estão no inicio e no final delas!!
Dentro de cada tag existem parâmetros, usados para apurar ainda mais nosso código, esses parâmetro são STRIGS. Strings são popularmente chamadas de texto, elas vem escritas dentro de ASPAS (“ ”).
Ex: < HTML> Conteúdo do site< /HTML>
Algumas tags são fechadas sem o auxilio da segunda abertura da tag.
Ex: < IMG SRC=”endereço da imagem.jpg” />
Podemos comentar nosso código para mais tarde saber-mos o que foi feito.
Isso se vaz < !-- comentário -->
Esses comentarios não aparecem no site!!!
OBS: Existem uma certa Hierarquia nas tag que devem ser respeitadas!!
EX: < HTML>
< TABLE>
< FORM>
Aqui vc escreve o seus codigos //// agora vamos fechar com cuidado.
Trabalhando na ordem inversa a que foram abertas
< /FORM>
< /TABLE>
< /HTML>
Isso deve ser respeitado para um bom funcionamento do codigo HTML e por fim seu site!!
*Atenção: Não se esqueça de retirar os espaços existentes nas TAGS esses espaços estão no inicio e no final delas!!
Pois Cod HTML naum podem conter espaços!!
Relação entre Servidor e Site.
O espaço que seu site fica é chamado servidor de hospedagem, onde estão todos os seus arquivos de HTML, som, imagem, etc. Este servidor nada mais é do que um grande computador, com alta taxa de processamento. O servidor fica ligado 24H, para que se possa acessar um site a qualquer hora do dia ou da noite.
Quando alguém digita no campo de endereço http://www.seusite.com.br, elas esta dando um comando para que faz com que o servidor interprete este comando como um endereço e mostra para quem esta acessando, o que ele quer ver!!As páginas são feitas usando a linguagem HTML (HyperText Markup Language). Trata-se de uma linguagem simples e bem leve, por isso ela é o padrão da Internet. Não interessa se o site foi feito em PHP, HTML ou qualquer outra linguagem de programação, o servidor interpreta o comando feito pelo usuário e retransmite a ele apenas o resultado em uma linguagem que os Browsers entendem (HTML).
Mas não se confunda com linguagem de programação e com trânsito de dados, que é feito pela linguagem binária, Octal, hexadecimal, etc.
Quando alguém digita no campo de endereço http://www.seusite.com.br, elas esta dando um comando para que faz com que o servidor interprete este comando como um endereço e mostra para quem esta acessando, o que ele quer ver!!As páginas são feitas usando a linguagem HTML (HyperText Markup Language). Trata-se de uma linguagem simples e bem leve, por isso ela é o padrão da Internet. Não interessa se o site foi feito em PHP, HTML ou qualquer outra linguagem de programação, o servidor interpreta o comando feito pelo usuário e retransmite a ele apenas o resultado em uma linguagem que os Browsers entendem (HTML).
Mas não se confunda com linguagem de programação e com trânsito de dados, que é feito pela linguagem binária, Octal, hexadecimal, etc.
Blog ou Site?
No mundo de hoje existe a necessidade de se ampliar seus horizontes! Pessoas criam sites ou blogs para Marketing próprio ou de sua empresa, ou simplesmente para falar de seu cotidiano, publicando suas fotos e relatando coisas interessantes que ocorreram.
Ai você deve estar se perguntado:
A resposta que eu dou para essa pergunta é sim! Quando questionado por meus clientes, sobre ter um site, eu os respondo que Web Site é a extensão de seu patrimônio comercial, que amplia seu foco de venda para infinito. O Mundo virtual, abre portas e janelas e o que mais você quiser, para trazer seu cliente próximo à você.
Com essas respostas em mãos surge outra questão:
Bem! Ambos projetam você para o Mundo, tornando seu negócio ou você visível para seus Clientes e concorrentes.
Para criar um site, você necessita do auxilio de um profissional na área como eu! Pois pare para pensar. Quando você acessa um site, digitando na barra de endereço www.site.com.br, existem por traz deste simples comando, toda um sistema, desde o projeto do site, a criação, a execução a programação, tratamentos de imagens, URL ( www.site.com.br), Hospedagem em servidores, e manutenção do site.
Para se fazer um Blog apenas alguns passos se fazem necessários, coisa que você mesmo pode fazer! O projeto ( a que se destina seu blog), e execução (a maioria dos blogs são simples de serem criados), programação (essa é uma questão séria, trabalhar com HTML são para poucos, mas eu te darei uma ajuda!!), tratamento de fotos é claro, URL(site.blog.com, ou seja, seu endereço no Mundo Virtual, onde seus clientes irão achar sua empresa online, a hospedagem (em alguns blogs isso é feito automaticamente pelo servidor do blog, outros como o WordPress você terá um certo trabalho ), e a manutenção onde você mesmo fará isso, acrescentando mais conteúdos.
O meu intuito com este blog é auxiliar as pessoas que querem começar na carreira blogueiros, ajudarei com tutoriais e técnicas de tratamento de imagens, montagem de fotos, dicas de programação em HTML, MySql. No caso de dúvidas me passem por E-Mail.
Ai você deve estar se perguntado:
Devo ter um site?
A resposta que eu dou para essa pergunta é sim! Quando questionado por meus clientes, sobre ter um site, eu os respondo que Web Site é a extensão de seu patrimônio comercial, que amplia seu foco de venda para infinito. O Mundo virtual, abre portas e janelas e o que mais você quiser, para trazer seu cliente próximo à você.
Com essas respostas em mãos surge outra questão:
Ter um Web Site? Ou ter um Blog?
Bem! Ambos projetam você para o Mundo, tornando seu negócio ou você visível para seus Clientes e concorrentes.
Para criar um site, você necessita do auxilio de um profissional na área como eu! Pois pare para pensar. Quando você acessa um site, digitando na barra de endereço www.site.com.br, existem por traz deste simples comando, toda um sistema, desde o projeto do site, a criação, a execução a programação, tratamentos de imagens, URL ( www.site.com.br), Hospedagem em servidores, e manutenção do site.
Para se fazer um Blog apenas alguns passos se fazem necessários, coisa que você mesmo pode fazer! O projeto ( a que se destina seu blog), e execução (a maioria dos blogs são simples de serem criados), programação (essa é uma questão séria, trabalhar com HTML são para poucos, mas eu te darei uma ajuda!!), tratamento de fotos é claro, URL(site.blog.com, ou seja, seu endereço no Mundo Virtual, onde seus clientes irão achar sua empresa online, a hospedagem (em alguns blogs isso é feito automaticamente pelo servidor do blog, outros como o WordPress você terá um certo trabalho ), e a manutenção onde você mesmo fará isso, acrescentando mais conteúdos.
Assinar:
Postagens (Atom)