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: <!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" --> <HEAD> <TITLE> </TITLE> <BODY> </HEAD> <HTML> </BODY> </HTML> 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.: <TITLE>) e terminam (Ex.: </TITLE>. 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.: <TITLE> DFranK's Homepage </TITLE> ). 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.: <BODY BGCOLOR="YELLOW"> ). 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.: <BODY BACKGROUND="imagem.gif"> ). 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 <H1>Nome da Homepage </H1>. Para que o título da sua homepage fique no centro da página, você precisa colocá-lo entre os tags <CENTER> </CENTER> Para Incrementar mais seu título você pode usar os seguintes TAGs: <CENTER></CENTER> - Coloca o texto ou o título no centro <U></U> - Sublinha o texto ou o título <B></B> - Deixa o texto ou o Título em Negrito <BLINK></BLINK> - Faz o Título ficar piscando (Só funciona no Netscape) <I></I> - Deixa o texto ou o Título em itálico <P ALIGN="RIGHT"></P> - Alinha o texto à direita <MARQUEE></MARQUEE> - Faz o título ficar correndo da direita para esquerda (Só funciona no Explorer) <BR> - 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. 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></TABLE>:Para iniciar e terminar uma tablela %ltTR></TR>: Para iniciar e terminar uma linha <TD></TD>: Para iniciar e terminar célula Ex.: <TABLE BORDER="1"> <TR> <TD>Cel. 1 Linha 1</TD> <TD>Cel. 2 Linha 1</TD> </TR> <TR> <TD>Col. 1 Linha 2</TD> <TD>Col. 2 Linha 2</TD> </TR> </TABLE> Vai ficar assim: Cel. 1 Linha 1 Cel. 2 Linha 1 Cel. 1 Linha 2 Cel. 2 Linha 2 Você pode alterar a borda e a cor da tabela: No TAG <TABLE> você pode mudar o tamanho da borda da tabela inserindo a opção BORDER="X". X é o tamanho que você quiser para a bordada tabela. Ex.: <TABLE BORDER="2">. O tamanho varia de 0 a 99. No TAG <TD> você pode alterar a cor da célula inserindo a opção BGCOLOR="X". X é o código da cor que você quiser. Ex.: < <TD BGCOLOR="#000080"> Você pode mudar a imagem de fundo da céluca com a opção BACKGROUND="X". X é o endereço da imagem de fundo que você quer colocar. Ex.: <TD BACKGROUND="http://www.dfranksite.com/imagens/texturab.gif"> Testando sua Página VOLTAR AO INÍCIO Vá até o Explorer ou o Netscape e digite na barra de endereços: (c:\homepage\index.htm). Teste cada link da página verifique se cada imagem está aparecendo direito, e se os textos estão do jeito que você quer. Confira se o código da sua página está mais ou menos assim. Clique aqui para ver o exemplo. Se estiver tudo OK você poderá exportar sua página para a Internet. Lembre-se de que você já deve ter feito a inscrição de uma página em um dos Sites de Hospedagens listados na sessão Grátis/Hospedagem. Você tem que estar com o código que lhe foi fornecido pelo Site de Hospedagem e o LOGON ou Nome da Página . TAGs VOLTAR <CENTER></CENTER> - Coloca o texto ou o título no centro <U></U> - Sublinha o texto ou o título <B></B> - Deixa o texto ou o Título em Negrito <I></I> - Deixa o texto ou o Título em itálico <BLINK></BLINK> - Faz o Título ficar piscando (Só funciona no Netscape) <P ALIGN="RIGHT"></P> - Alinha o texto à direita <P ALIGN="LEFT"></P> - Alinha o texto à esquerda <P ALIGN="JUSTIFY"></P> - Justifica o texto <HR> - Cria uma linha horizontal cortando a tela <BR> - Muda de linha <MARQUEE></MARQUEE> - Faz o título ficar correndo da direita para esquerda (Só funciona no Explorer)