Baixe HTML Básico e outras Notas de estudo em PDF para Informática, somente na Docsity!
Tutorial de HTML
Tutorial: (^) O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página
O que é HTML?
VOLTAR AO INÍCIO
HTML é uma linguagem essencial na criação de sites. Existem linguagens mais modernas como o Java e o HTML Dinâmico, mas são muito complicadas e é preciso muito mais tempo para fazê-las manualmente. O HTML é um arquivo de texto. Para fazer um, basta você pegar um programa de edição de Homepages ou abrir um bloco de notas no seu Windows. É necessário que você salve o texto com o final ( .htm ) em uma Pasta (ou diretório) criada para salvar sua homepage (Ex.: c:\homepage). Abra um bloco de notas, e se orientando à partir desse texto, vá criando aos pucos sua homepage.
Aprendendo
VOLTAR AO INÍCIO
Passo 1 - Abra um Bloco de Notas Passo 2 - Copie o texto abaixo e cole no Bloco:
Passo 3 - Agora salve o seu arquivo como index.htm. Lembre-se de salvar todos os arquivos escrevendo seu nome usando apenas letras minúsculas. Isso serve para imagens e para arquivos HTML. A primeira página da sua Homepage tem que se chamar index.htm Já deu pra perceber, que todos comandos que você colou no Bloco de Notas começam (Ex.: ) e
terminam (Ex.: . Esses comandos são chamados de TAGs. Entre esses TAGs devem ser colocados alguma coisa. Entre os TAGs TITLE, você deve colocar o título da sua Homepage (Ex.: DFranK's Homepage ). Agora que você já sabe, vai lá no Bloco de Notas e coloca um título na sua página. Esse título vai aparecer lá na barra mais alta do Explorer. Passo 4 - Agora vamos definir a cor ou a imagem do fundo da sua homepage. Dentro do TAG BODY coloque o seguinte: BGCOLOR="YELLOW" (Ex.: ). Você pode mudar para a cor que você quiser escrevendo no lugar do YELLOW, o nome da cor que você quiser, mas sempre em inglês. Para colocar uma imagem ao invés de uma cor, ao invés de BGCOLOR="YELLOW" coloque BACKGROUND="imagem.gif" (Ex.: ). A imagem pode ser gif ou jpg , por que carregam mais rápido. É necessário que você copie a imagem que você quer usar, para a pasta (c:\homepage) onde está o arquivo index.htm. A imagem pode ter qualquer nome. Agora você vai começar a montar a sua Homepage. Primeiro você tem que fazê-la no seu computador, e só depois de tudo pronto que você exporta para internet.
Títulos
VOLTAR AO INÍCIO
Passo 1 - Salve mais uma vez a sua página. Passo 2 Para criar títulos você pode usar TAGs como H1 a H5, dependendo do tamanho que você quiser H1 é o que deixa o título maior e H5 é o que deixa menor. Vá no Bloco de Notas e escreva abaixo do >BODY BGCOLOR< ou do >BODY BACKGROUND< (Dependendo de qual deles você escolheu fazer) e escreva Nome da Homepage . Para que o título da sua homepage fique no centro da página, você precisa colocá-lo entre os tags
Para Incrementar mais seu título você pode usar os seguintes TAGs:
- Coloca o texto ou o título no centro
- Sublinha o texto ou o título - Deixa o texto ou o Título em Negrito
- Faz o Título ficar piscando (Só funciona no Netscape) - Deixa o texto ou o Título em itálico
- Alinha o texto à direita - Faz o título ficar correndo da direita para esquerda (Só funciona no Explorer)
- Muda de linha. É como se fosse o ENTER quando se escreve no WORD
Para ver uma lista com quase todos TAGs clique aqui Vamos ver como é que está ficando a sua Homepage?. Abra um Explorer (Recomendado) ou um Netscape e escreva na barra de endereços: C:\homepage\index.htm. Se tudo deu certo, na barra superior do seu Browser vai estar escrito o nome da sua Homepage, O fundo vai estar da cor que você colocou, ou com a imagem que você escolheu.
Você pode fazer um link para a página de um amigo seu, ou uma página que você gostou: < A HREF="http://www.endereco.com.br /amigo"> ou < A HREF="http://www.cade.com.br">
Imagens Clicáveis
VOLTAR AO INÍCIO
Crie um arquivo de imagem (GIF ou JPG) ou copie alguma imagem para a pasta (c:\homepage) onde está o arquivo index.htm. Coloque o comando . Você pode modificar o valor de BORDER definindo a largura da borda da imagem.
Eplorando mais o TAG BODY
VOLTAR AO INÍCIO
É no TAG BODY que se define a cor sou imagem de fundo, como já foi parcialmente explicado. É também no BODY que definimos a cor dos links antes e depois de serem clicados, e também a cor inicial do texto Todo texto que não estiver entre o TAG fica da cor inicial. Para mudar a cor de fundo, como já foi explicado, você precisa escrever dentro do Tag BODY BGCOLOR="COR". Essa cor pode ser escrita em inglês ou podemos colocar no lugar da palavra COR, o código da cor, que está na tabela acima. Para Mudar as cores dos Links escreva dentro do TAG BODY:
LINK="COR" - Cor dos Links VLINK="COR" - Cor dos Links já Visitados ALINK="COR" - Cor dos links Ativos - O link fica ativo quando você clica nele. (Até que ele fica contornado por um pontilhadinho)
Música de Fundo
VOLTAR AO INÍCIO
Existem várias maneiras de colocar música em sua página. Uma das mais simples dela é com o Microsoft Internet Explorer a partir de sua vesão 2. Para tocar música em sua Home Page, inclua o TAG.
ao invés de arquivo.mid, você pode colocar também arquivo.wav. E ao invés de LOOP=INFINITE você pode colocar LOOP=(quantidade de vezes que você quer que a música toque ou que o som se repita). Lembre-se de que o arquivo MIDI ou WAVE deve estar no diretório (C:\homepage)
Pelo Netscape Navigator , o comando é outro:
CONTROLS="none> LEMBRE-SE: Os arquivos MID são bem menores que os arquivos WAV DICA: Inclua esses dois comandos na sua Home Page, pois assim, quem usa um desses dois Browser ( a imensa maioria ), irá escutar a música, enquanto se você colocar apenas o da Microsoft, apenas os quem usam o Explorer irão escutar ou vice-versa. Se você colocar esses comandos na primeira página, todos que entrarem na sua Home Page ouvirão automaticamente a música.
Gifs Animados
VOLTAR AO INÍCIO
Gifs Animados são imagens em formato GIF que fazem animações. Você mesmo pode fazer os seus usando o programa Microsoft GIF Animator , fazendo um Download dosite da Microsoft. Você vai ter que se virar pra fazer um GIF Animado. O mais fácil é sair pela internet procurando GIFs Animados. Já que você está navegando nesse momento pela DFranK, basta abrir outro explorer, entrar na DFranK e visitar a sessão GIFs Anim. Salve todos GIFs que interessarem (clicar com o botão direito do mouse no GIF e escolher salvar figura como...) na pasta (C:\homepage) Se você quiser, pode fazer links com esses GIFs, do mesmo geito que se faz com as imagens comuns.
Tabelas
VOLTAR AO INÍCIO
As tabelas são muito úteis e muito usadas em todas as páginas. Elas são um pouco complicadas de se entender mas vamos te passar uma noção básica. Os Comandos Básicos são: %ltTABLE>:Para iniciar e terminar uma tablela %ltTR>: Para iniciar e terminar uma linha : Para iniciar e terminar célula Ex.:
Cel. 1 Linha 1 Cel. 2 Linha 1
Col. 1 Linha 2 Col. 2 Linha 2
Vai ficar assim: Cel. 1 Linha 1 Cel. 2 Linha 1 Cel. 1 Linha 2 Cel. 2 Linha 2
