Apostila Básica de HTML

M@RcOs/rs · 20 de março de 2005

Apostila Básica de HTML

By M@RcOs/rs

Autor

Nome: Marcos Silveira - M@RcOs/rs

Apostila criada para iniciantes/inexperientes no webdesign... Então, se você ja passou da parte do HTML básico, essa apostila não será muito útil!

-=-=-=-==-

-=Índice=-

-=-=-=-==-

Cap. 1 => Minha História No Webdesign

Cap. 2 => Indrodução ao HTML

Cap. 3 => Estrutura HTML/Tags Essenciais

Cap. 4 => Tags Básicas

Cap. 5 => Tabelas

Cap. 6 => Links

Cap. 7 => Frames (quadros)

Cap. 8 => Imagens

Cap. 9 => Programas Para Criação de Sites

Cap. 10 => Agradecimentos

Capítulo 1 -=- Minha História No Webdesign -=-

Bem, me interesei pelo Webdesign através de um amigo, o Vinicios, agradeço a ele pelo webmaster que sou hoje! Ele me falou mais ou menos sobre o webdesign, e gostei MUITO! Mas é claro, não sou louco de criar uma página em HTML, HTML mesmo, pelo bloco de notas, de forma alguma! Peguei uns programas básicos: Fireworks, Dreamweaver e Flash... E como eu sempre faço, dei uma mexida. Até que mexendo aprendi o básico e mais um pouco, mas resolvi fazer um curso para pegar o avançado e é claro, o certificado.

Então começei o curso, nunca tinha feito um(nunca precisei, tenho meu pc desde os 5 - 6 anos), eles já tinham passado de parte da internet (que já conhecia), e como mexia já há algum tempo com HMTL tinhanoções do básico, mas aprendi bastante também sobre Fireworks, Dreamweaver e Flash, então ganhei o prêmio de aluno do ano com um amigo(o prêmio era dado apenas a dois alunos), e com este prêmio tive acesso a um curso grátis e estágio. Hoje eu e meu amigo somos parceiros na criação de sites, juntos a diversos outros colegas. Nossa, acho que escrevi bastante hein! Então é isso, vá atrás dos seus sonhos e seja um webmaster!

Valeu!

Capítulo 2 -=- Introdução ao HTML -=-

HTML ( HiperText Markup Language ), uma linguagem que muitos consideram difícil, é normal achar isso no começo, afinal quem pode imaginar que através de um monte de letras e numeros vai sair a sua página?!? É, mas pode acreditar, é através disso que você terá a sua tão sonhada página na web! Mas cuidado! Um erro por minimo que seja pode custar a página inteira! Mas é importante lembrar que HTML não é uma linguagem de programação como muitos pensam, e sim uma linguagem de formatação de textos desenvolvido no inicio da Internet.

Capítulo 3 -=- Estrutura do HTML/Tags Essenciais -=-

A estrutura do documento HTML é composta por tags... Sendo 3 delas essencias: <html>, <body> e <head>... Toda tag tem um início

< exemplo de inicio de uma tag >...

...e um fim </ exemplo de fim de uma tag >. Agora veremos as descrições das tags mais utilizadas!

<html> => Aqui é o inicio da página, sem esse comando não tem página!

<body> => O corpo da pagina, é aqui que você escolhe a cor de fundo da sua página, cor da letra, tamanho da letra, etc. (veremos estes comandos mais adiante!)

<head> => O cabeçalho da pagina, aqui você digita o título da sua página, e outras demais configurações, abaixo do <head> é onde colocaremos os códigos em JavaScript da pagina(veremos mais adiante!)

/ => A barra, por incrível que pareça, é um comando essencial... É com ela que fechamos as funções da página. Imaginem um tigre numa jaula, seria necessário colocar a grade (a barra no nosso caso!) para fechar a jaula, é o que devemos fazer na nossa página, a barra deve ser colocada sempre ANTES da tag. Ex: </html>,</body>, </head>, etc.

Capítulo 4 -=- Tags Básicas -=-

Neste capítulo serei rápido em descrever as tags básicas.

Bem, tags básicas são tags não avançadas, pronto!

Bem, voltando ao assunto sério...

As Tags:

<title> aqui é onde você escreve o título da sua página! </title>

<p> Iniciar um paragrafo para texto </p>

<center> Centralizar o texto </center>

<p align="right"> Alinha o texto à direita <p align="rigth">

<p align="left"> Alinha o texto à esquerda <p align="left">

<b> Texto em negrito </b>

<i> Texto em itálico </i>

<u> Texto sublinhado </u>

<bgolor="cor do fundo da pagina, em inglês ou hexadecimal" (veremos na próxima apostila). obs: colocar junto ao <body>

ex: <body bgcolor="red">

<font size="1"> Texto no tamanho minimo </font>

<font size="2"> Texto tamanho 2 <font>

<font size="3"> Texto no tamanho padrão </font>

<font size="4"> Texto tamanho médio </font>

<font size="5"> Texto tamanho 5 </font>

<font size="6"> Texto no tamanho máximo! </font>

<marquee> letreiro que se move em forma de letreiro digital </marquee>

Obs: O <marquee> tem direção padrão para direita, para ir para esquerda coloque a seguinte tag... <marquee direction="right"> ...mas o mais legal e mais usado é fazer ele ir para um lado e para o outro (como uma bola batendo entre 2 paredes), para fazer isso basta colocar a seguinte tag... <marquee behavior="alternate"> ...e nunca esqueça de fechar "</>"

Capítulo 5 -=- Tabelas -=-

As tabelas seguem as mesmas regras de todas as tags... <table> - </table> ...e como textos, podem sofrer muitas alterações. Isso é o que veremos agora!

<table border="número"> define o tamanho da borda da tabela </table>

bordercolor="cor em inglês ou hexadecimal", cor da tabela.

width="número" comprimento da tabela.

height="porcentagem (%)" altura da tabela

Obs: todas as funções vistas acima devem ser colocadas dentro da tag <table>, no nosso caso dentro da tag <table border>

Capítulo 6 -=- Links -=-

Link, uma coisa simples de fazer e um dos elementos mais utilizados na web, através de um link você pode redirecionar para o resultado de alguma pesquisa, para fazer um dowload, ou simplesmente para passar de uma página para outra. Uma página sem links é "desastrozo"! Uma página GIGANTE (como a que eu vi uma vez mas não irei falar que página, pois o webmaster deve ter seus motivos (ou não leu uma apostila como essa!) cuja a barra d rolagem era minúscula, sem brincadeira, um index muito grande!) e com isso a página fica muito lerda e os visitantes ficam insatisfeitos. Por isso, sempre use o link!

Tag de link:

<a> </a> (simples não?)

Tags de Comandos...

Texto do link

<a href= "especifique o endereço" target="_blank"> Abre uma nova janela com o endereço que você especifikou!

Texto do link

Capítulo 7 -=- Frames (quadros) -=-

Frames são legais, bons para a criação de menus, mas não são la tão utilizados...pois alguns webmasters gostam d frames e outros detéstam!...afinal, gostuh é que nem ###..cada um tem o seu!...huachuachuach!...por que criar um frame enquanto se pode criar um menu no fireworks?!? Preguiça!!!...eu não crio frames, mas comu existem preguisozus nesse mundo aê vai umas dicas...

<frameser cols="150,*"> Define o tamanho do frame esquerdo, mas quando seu valor fica 500 são divididos em partes iguais e fikam os dois do mesmo tamanho!

target="nome da base dos links do frame"

scr="diretório do arquivo html que ira se compor ao frame, ex: index.html

<noframes> Substitui a barra "/"...hehe...finaliza ah inserção dos frames

Capítulo 8 -=- Imagens -=-

Coloque na sua pagina imagens, é, imagens, sejam elas .jpg - .gif -.bmp. Iimagens dão vida a uma página.

Para colokar uma imagem em um documento html faça a seguinte tag:

Vamos formatar a imagem?!?

<img src = "imagem.(extensão) height ="numero"> modificar a altura da imagem em pixels.

<img src = "imagem.(extensão) width ="numero"> modifica a largura da imagem em pixels.

Dica:

Deixe sempre a imagem dentro da pasta raiz do site, caso contrário a imagem pode não ficar disponível!

SUPER DICA! imagem .gif são recomendadas para imagens que possuem grandes extenções de área da mesma cor. Imagems .jpg apresentam melhor desempenho na otimização de imagens com muitas cores.

Comparação de tamanho em KB de uma imagem .gif para .jpg:

Imagine uma imagem com 30 cores, na qual seu tamanho original é 65KB. Se fosse uma imagem .gif, ficaria com 10 cores e 3,60KB, que diferença hein! Mas se fosse uma imagem .jpg, ficaria com 50% da imagem original e 6,1KB. (.gif é o mais recomendado para esse tipo de imagem), mas agora suponha que seja uma imagem com 150 cores e 328KB. Se fosse uma imagem .gif ficaria com 64 cores e 15KB, mas se fosse uma imagem .jpg ficaria com 80% da imagem e 7KB, pouco né! (para esse tipo de imagem o mais recomendado é .jpg)

Capitulo 9 -=- Programas Para a Criação de Sites -=-

Bem, aqui irei falar nos programas que uso para a criação de sites.

Fireworks MX => Nele você cria toda a interface do seu site, plano de fundo, botões, banner, banner animado, movimento rollover, etc.

Dreamweaver MX => Organiza o site todo, nele você também pode fazer tudo que aprendeu aqui e mais um pouco! Mas é sempre bom saber o básico do html por conta própia! Nele você também faz upload de seus arquivos para o site via ftp e muito mais!

Flash MX => Cria animações em flash para o site, banner animado, botóes, tudo de bom para o seu site! Mas CUIDADO! Não vá encher seu site de animações em flash, ou ficará esperando sua pagina abrir por horas e horas!!! Pesa MUITO galera!

Capitulo 10 -=- Agradecimentos -=-

Quero agradecer primeiramente ao meu irmão, Vandre/rs, por ter me ensinadu o que ele sabe de pc (o cara é féra!), agradecer também ao Vinicius, pois hoje percebi que sou o webmaster que sou hoje por causa do incentivo dele! Ele que hoje também é meu parceiro na criação de sites junto ao Denner, André e Timotio. Quero agradecer a mim, M@RcOs/rs, por ter apagado todos os jogos do meu pc e baixadu centenas de tutoriais, apostilas, zines. Eu so louco não sou!? Agradecer ao Lucca, meu professor de webdesign, agradecer aos meus pais, ao @lex dá gb, nem sei porque, mas lembrei dele! Não, quero agradecer a ele por que se não fosse pelo seu site ( gamingbrasil.net ) nãa seria o gamemaker que sou hoje. Agradecer a quem tá lendo isso, por ter acreditado em mim e quem sabe se tornado um webmaster iniciante, e que um dia ainda será um master expert!!! É isso aí galera, esperu que tenham gostado da minha Apostila Básica de HTML. Qualquer duvida , críticas e perguntas contate-me. E em breve... Tutorial Para se Tornar um Web Master Avançado!!

Valeu!

By M@RcOs/rs