www.PorttalMasters.net
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -= =-
-= Autor =-
-= =-
-= Nome: Marcos Silveira - M@RcOs/rs =-
-= =-
-= MSN: marcoswebmaster@suportephpbb.org =-
-= =-
-= E-mail: marcoswebmaster182@gmail.com =-
-= =-
-= Localização: Guaíba/rs =-
-= =-
-= Site: www.PorttalMasters.net =-
-= =-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Apostila criada para iniciantes/insperientes no webdesign...então, se vc ja passou da parte do HTML básico, essa apostila não sera muito util!
-=-=-=-==-
-=Índice=-
-=-=-=-==-
Cap. 1 => Indrodução ao HTML
Cap. 2 => Estrutura HTML/Tags Essenciais
Cap. 3 => Tags Básicas
Cap. 4 => Tabelas
Cap. 5 => Links
Cap. 6 => Frames (quadros)
Cap. 7 => Imagens
Cap. 8 => Programas Para Criação de Sites
---------------------------------------
Capitulo 1 -=- Introdução ao HTML -=-
=======================================
HTML ( Hiper Text Markup Language )... uma linguagem que muitos concideram dificil ...é normal achar issu no começo...afinal, quem pode imaginar que atravez d um monte de letras e numeros vai sair a sua página?!? É... mas pode acreditar... é atravez disso que você irá obter a sua tão sonhada página na web! Mas cuidado! Um erro por minimo que seje podh custar a página toda!...mas é importante lembrar que HTML não é uma linguagem de programação como muitos pensam, e sim, uma linguagem d formatação de textos desenvolvido no inicio da Internet.
Aqui o modelo essencial para uma página HTML:
------------------------------------------------------
Capitulo 2 -=- Estrutura do HTML/Tags Essenciais -=-
======================================================
A estrutura do documento HTML é composta por tags...sendo que delas 3 são essencias, <html>, <body> e <head>...toda a tag tem um inicio
< exemplo de inicio de uma tag >...
...e um fim </ exemplo de fim de uma tag >... agora veremos as descrições das tags + utilizadas!
<html> => Aqui é oh inicio da pagina...sem esse comando, na tem pagina!
<body> => O corpo da pagina, é aqui q vc escolhe a cor de fundo da sua pagina, cor da letra, tamanho da letra..e talz! (veremos estes comandos + adiante!)
<head> => O cabeçalho da pagina, aqui vc digita o titulo da sua pagina, e outras demais configurações, abaixo do <head> é ond colokaremos os códigos em JavaScript da pagina(veremos + adiante!)
/ => A barra é um comando essencial... é com ela que fechamos todas as tags. Imaginem um tigre em uma jaula, seria necessario colocar a grade (a barra, no nosso caso!) para fechar a jaula...isto é o que devemos fazer na nossa página, a barra deve ser colocada sempre ANTES da tag. Ex: </html>,</body>, </head>
Toda e qualquer página HTML deve ser iniciada desta forma:
<html> - Começo da Página
<head> - Cabeçalho
<title>SEU TÍTULO</title>
</head> - Fim do Cabeçalho
<body> - Corpo da Página
</body> - Fim do Corpo da Página
</html> - Fim da Página
P.S: sem os comentarios após as tags! :wink:
---------------------------------
Capitulo 3 -=- Tags Básicas -=-
=================================
Nesse capitulo vou ser rápido em descrever as tags basikas!...
Bem...tags básicas são tags não avançadas...prontu!...
...huachuachuachuachuachuach!....
...bem, voltanduh ao assuntoh sériuh...
As Tags:
<title> aqui é ond vc escreve o titulo da sua pagina! </title>
<p> Iniciar um paragrafo para texto </p>
<center> Centrualizar o texto </center>
<p align="right"> Alinha o texto a direita <p align="rigth">
<p align="left"> Alinha o texto a 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 ingles ou hexadecimal" (veremos na proxima 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 + legal e + usado é fazer ele ir para um lado e para o outro (tipow uma bola batendo entre 2 paredes!)...para fazer issu basta colocar a seguinte tag... <marquee behavior="alternate">
...e nunca esqueça de fechar "</>"
----------------------------
Capitulo 4 -=- Tabelas -=-
============================
As tabelas seguem as mesmas régras d todas as tags... <table> - </table> ...e como textos, podem sofrer muitas alterações! Isso é o que veremos agora!
<table border="numero"> define o tamãnho da borda da tabela </table>
bordercolor="cor em ingles ou hexadecimal", cor da tabela.
width="numero" 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>
--------------------------
Capitulo 5 -=- Links -=-
==========================
Link...uma coisa simples de fazer e um dos elementos + utilizados na web, atravez de um link vc pode se redirecionar para o resultado de alguma pesquisa, para fazer um dowload, simplesment, para passas d uma pagina para outra!...uma pagina sem links é "dezastroso!"...uma pagina GIGANTE (como a que eu vi uma vez mas não irei falar que pagina, pois, o webmaster da pagina deve ter seus motivos (ou não leu uma apostila como essa!) q a barra d rolagem éra MINUSKULA, sem brinkadeira, uma index muito grande!...com issu, a pagina fika muito lerda e os visitantes ficam insatisfeitos...por issu, sempre use o link!
Tag d link:
<a> </a> (simples, não!?)
Tags d Comandos...
<a href="nome do link"> Texto do link </a>
<a href= "especifique o endereço" target="_blank"> Abre uma nova janela com o endereço q vc especifikou!
<a href= "mailto:email@provedor.com> Texto do link </a>
-------------------------------------
Capitulo 6 -=- 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 xxxxxx..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 aew vai umas dicas...
<frameser cols="150,*"> Define o tamãnho do frame esquerdo, mas quando seu valor fica 500 são divididos em partes iguais e ficam os dois do mesmo tamãnho!
<frame name="especifica o nome do frame">
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
----------------------------
Capitulo 7 -=- Imagens -=-
============================
Coloque na sua página imagens...é...imagens, sejam elas .jpg - .gif -.bmp...imagens dão vida a uma página, recomendo antes de tudo que criem suas imagens nu Fireworks MX ( disponivel em www.PorttalMasters.net ).
Para colocar uma imagem em um documento html faça a seguinte tag...
<img scr ="imagem.(extenção, .gif .jpg, .bmp)>
Vamos formatar a imagem?!?
<img src = "imagem.(extenção) height ="numero"> modificar a altura da imagem em pixels.
<img src = "imagem.(extenção) width ="numero"> modifica a largura da imagem em pixels.
Dica:
Deixe sempre a imagem dentro da pasta raiz do site, pois caso contrario, a imagem pode não ficar disponivel!
SUPER DICA!... imagem .gif é recomendado para imagens q possuem grandes extenções da área da mesma cor....
...imagem .jpg apresenta melhor desemprenho na otmização de imagens com muitas cores.
Comparação de tamãnho em kb uma imagem .gif para .jpg:
Imagine uma imagem 30 cores, na qual seu tamanho original é 65kb...se fosse uma imagem .gif, ficaria com 10 cores e 3,60kb...que diferença em!...mas se fosse uma imagem .jpg, ficaria com 50% da imagem original e 6,1kb! (.gif é o + 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 fikaria com 80% da imagem e 7kb...pouco né! (para esse tipo de imagem o + recomendado é .jpg)
------------------------------------------------------
Capitulo 8 -=- Programas Para a Criação de Sites -=-
======================================================
Bem...aqui irei falar os programas no qual eu uso para a criação de sites!
Fireworks MX => Nele você cria toda a interface/layout do seu site, plano de fundo, botões, banner...estas coisas. Conciderado a "base de tudo" ( P.S: não necessariamente ).
Dreamweaver MX => Organiza o site todo, nele você tambem pode aplicar tudo que você aprendeu aqui e mais!...mas é sempre bom saber o básiko do html por conta própia!...nele vc tambem faz up-load de seus arquivos para o site via ftp! Isso e muito mais.
Flash MX => Cria animações em flash para o site, benner animado, botóes...tudo de bom para o seu site!...mas CUIDADO...não va encher seu site de animações em flash...ou ficara esperandu sua página abrir por horas e horas!!! Flash são "atrativos"...porem em alguns casos são bem "pesados".
By M@RcOs/rs - Web Designer
Copyright 2005®
