Tutorial Básico
de HTML
HTML é a abreviação de Hyper Text Markup Language, uma linguagem de
marcação/descrição de páginas que utiliza códigos chamados TAG’s, que ficam
entre <> para criá-la. EX.: <HTML>
Criando um Documento HTML
Para criar um documento HTML é necessária a utilização de um editor de
textos ou de HTML como o Notepad (Bloco de Notas). Vá em Iniciar –
Executar... – e digite: "notepad". Logo após abrirá um documento do bloco
de notas.
Tags HTML
A primeira Tag de sua página é justamente a que indica o tipo de linguagem a
ser utilizada: <HTML>.
Toda Tag deve ter um inicio e um fim. Exceção:<Br>. Além disso, as
primeiras são sempre as ultimas a serem fechadas, fazendo com que as outras
fiquem encadeadas dentro destas. Assim, <html> será a primeira a abrir e a
ultima a fechar.
A partir daí você vai criar uma espécie de cabeçalho para sua página a partir
da tag <head>.
Utilizamos as seguintes Tag’s:
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME="author" content="WebMaster"
<META NAME="descrription" CONTENT="Minha Primeira Página de HTML">
<META NAME="keywords" content="Página HTML">
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
Title
A TAG Title vai dizer qual título aparecera na barra de nomes no topo da
página; do contrario aparecerá apenas o endereço da página.
A Tag Meta
As tag’s Meta são utilizadas por sites de busca como o Google® e o Cadê?®.
Através delas você irá descrever alguns comentários sobre sua pagina.
<META NAME=“DESCRIPTION”> Fará uma pequena descrição sobre seu
site.
Ex. <META NAME="DESCRIPTOIN" CONTENT="Site legal que estou
criando">.
<META NAME="KEYWORDS"> Com esta tag você colocará a(s) palavra(s)
chave(s).
Ex. <META NAME="keywords" content="Pagina web">.
<META NAME="AUTHOR"> Indica qual é o author de sua pagina.
Ex. <META NAME=“AUTHOR” CONTENT=“WebMaster Brenex>.
<META HTTP-EQUIV="language"> Indica o Idioma a ser utilizado na
página.
Ex. <META HTTP-EQUIV="language" content="pt-br">.
<META HTTP-EQUIV="Refresh"> Redireciona sua página para uma
página secundária, um outro Site ou para algum arquivo como uma foto.
Ex. <meta HTTP-EQUIV="Refresh" content="2;
URL=http://www.planetadorock.xpg.com.br/planetarock.html">, onde 2 é o
tempo em segundos que a página vai demorar até redirecionar e URL é para
onde o site será redirecionado.
BODY
A Tag BODY fará algumas configurações no corpo de sua pagina. Ela é quem
diz a cor do plano de fundo, a cor dos links, entre outras coisinhas.
ELEMENTOS BODY
BGCOLOR – Determina a cor do Plano de Fundo da pagina.
LINK – Determina a cor do Link que aparecerá na pagina
ALINK – Determina a cor que aparecera quando o link for clicado
VLINK – Determina a cor que aparecera no link após ser clicado.
BACKGROUND – Se você for por uma imagem como plano de fundo deve
usar este elemento de BODY no lugar de bgcolor.
LEFTMARGIN – margem esquerda da página(no MS Internet Explorer).
TOPMARGIN – margem superior da página(no MS Internet Explorer).
MARGINHEIGHT – margem superior(no Netscape).
MARGINWIDTH – margem esquerda(no Netscape).
EX. <BODY BACKGROUND="http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%2
0Background.jpg">
Parágrafo
Para iniciar um parágrafo utilizamos a Tag P.
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”descrription” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
<BODY BGCOLOR=”GRAY” LINK=”RED” ALINK=”YELLOW”
VLINK=”DARKGREEN”>
Entendendo P
ALIGN – Alinha o texto de acordo com o que você colocar:
Left – Esquerdo;
Justify – Justificado;
Center – Centralizado;
Right – Direito.
A Tag FONT
Face – Indica o tipo de fonte que você vai usar. Ex. <font face="Times New
Roman">;
Color – Indica qual a cor você vai por em seu texto. Ex. <font color=Navy>.
Navy é a mesma coisa que azul-marinho;
Size – Indica o tamanho do texto. Varia de 1 a 7 o tamanho.
ESTILOS DE TEXTO
Como em editores de texto, o HTML também permite alterar o estilo do texto.
<B> - Aplica o estilo negrito. Ex. <b>texto em negrito</b>
<I> - Aplica o estilo itálico. Ex. <i>texto em itálico</i>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME="author" content="WebMaster"
<META NAME="description" CONTENT="Minha Primeira Página de HTML">
<META NAME="keywords" content="Página HTML">
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN">
<p align=center><font face="Arial" color="navy" size="2">Este é o meu primeiro
parágrafo em HTML</font></p>
<U>- Aplica o estilo sublinhado (nem todos os browser o reconhecem).
Ex. <u>texto sumblinhado</u>
<SUP> - Faz com que o texto fique sobrescrito. Ex. <sup>Texto
sobrescrito</sup>
<SUB>- Faz com que o texto fique subscrito. Ex. <sub>texto
subscrito</sub>
<BIG> - Aumenta a fonte e atribui negrito. Ex. <big>Texto GRANDE</BIG>
<SMALL> - Reduz e altera a fonte. Ex. <small>TEXTO pequeno</small>
<TT> - Aplica um espaçamento regular ao texto. Ex. <tt>Texto com
espaçamento regular</tt>
TITULOS E SUBTITULOS
Estas Tag’s são utilizadas para dar ao leitor uma visão geral sobre o que se
trata o texto em questão.
Estas tags apresentam seis níveis de títulos que são numerado de 1 a 6 por
ordem de importância. (1 - Titulo principal, - 2 titulo secundário, 3 –
subtítulo...)
Ex. <h1>Este é o meu titulo principal</h1>
<h2>Este é meu titulo secundário</h2>
<h3>Este é o meu subtítulo</h3>
Quebras de Linha
São utilizadas para escreverem textos em linhas diferentes, mas em um
mesmo parágrafo, como num poema, versos em linha diferentes, mas numa
mesma estrofe.
EX. <p align=center><font face="Tahoma" size="2">Este é meu texto em
cima<br>Este é meu texto embaixo</font></p>
A TAG DIV
Ela permite o alinhamento horizontal de qualquer elemento em uma página.
Esta TAG é muito utilizada em DHTML pela propriedade de agrupar elementos
de página.
Ex. <div align="center">Este texto está alinhado no centro.</div>
A TAG HR
Insere uma linha horizontal no Browser.
EX.
<HR WIDTH="n%" ALIGN="posição" SIZE="n" NOSHADE
COLOR="#RRGGBB">
Onde:
ALIGN="posição": pode ser left, center e rigth;
WIDTH="n%": define a largura da linha, pode ser definida em pixels ou em
percentagem do tamanho horizontal da tela;
SIZE="n": define a espessura da barra, em pixels;
NOSHADE: define que a barra não deve ser com efeito 3D;
COLOR="#RRGGBB": define a cor da barra. (MS Internet Explorer).
Criando Links
Existem dois tipos de links:
1º - Para páginas Externas
2º - Para paginas Internas, chamados de âncoras.
Criando um Link Externo:
<a href=protocolo://endereçodapagina/arquivo.extensão>Texto mostrando o
Link(ex. “Clique aqui”)</a>
Ex. <a href="http://www.planetadorock.xpg.com.br/index.html">
Clique Aqui</a>
Criando âncoras
Antes de criar um link interno, temos que criar uma ancora, desse jeito;
<A NAME="seção1">Este é o texto da seção</A>, em
que “seção1” é o nome da seção e "Este é o texto da
seção" é em que texto foi feito a seção.
Colocando Links nas Âncoras
Agora que a ancora foi feita, falta linká-la, desse jeito:
<a href="#seção1">Seção 1</a>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME="author" content="WebMaster"
<META NAME="description" CONTENT="Minha Primeira Página de HTML">
<META NAME="keywords" content="Página HTML">
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN">
<h1><font face=Tahoma color=green>Este é o meu primeiro título
</font></h1>
<p align=center><font face="Arial" color="navy" size="2">Este é o meu primeiro
parágrafo em HTML</font></p>
<p align="justify"><font face=Verdana size=2 color=orange>Este é o meu
segundo parágrafo<Br>E esta é minha primeira quebra de
linha.</font></p>
<a href="http://www.google.com"><font face="Tahoma" size=2>
Google</font></a>
Inserindo Imagens
Para inserir imagens numa WebPage vamos utilizar a Tag IMG.
Ex. <img src="http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg">
Configurando a Imagem
Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você
pode utilizar para deixar a sua imagem ao seu gosto.
Utilizamos as seguintes Tag’s a partir de IMG SRC:
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME="author" content="WebMaster"
<META NAME="description" CONTENT="Minha Primeira Página de HTML">
<META NAME="keywords" content="Página HTML">
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW"
VLINK="DARKGREEN">
<h1><font face=Tahoma color=green>Este é o meu primeiro título
</font></h1>
<a name="1"><p align=center><font face="Arial" color="navy"
size="2">Este é o meu primeiro parágrafo em
HTML</font></p></a>
<p align="justify"><font face=Verdana size=2 color=orange>Este é
o meu segundo parágrafo<Br>E esta é minha primeira
quebra de linha.</font></p>
<a href="http://www.google.com"><font face="Tahoma" size=2>
Google</font></a>
<a href="#1">Voltar para o primeiro parágrafo</a>
Width – A partir dela informamos a largura da imagem. Se não for
configurada a imagem será inserida no seu tamanho original.
Height – Com ela, informamos a altura. Quando não é informada mantém
também sua altura original.
Border – Cria e configura o tamanho da borda da figura.
Align – Alinha a imagem em relação ao texto. Temos três tipos de
alinhamento.
Top – Alinha o texto paralelamente ao topo da Imagem.
Middle – Alinha o texto no centro da Imagem.
Bottom – Alinha o texto paralelamente à base da imagem.
Alt – É uma tag em que você insere um texto alternativo, para que se no caso
o browser não abrir a imagem o texto aparecerá no lugar.
Exemplo:
<img src="http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg" width=120 height=160 align="top" border="3" alt="imagem principal">
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME="author" content="WebMaster"
<META NAME="description" CONTENT="Minha Primeira Página de HTML">
<META NAME="keywords" content="Página HTML">
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN">
<h1><font face=Tahoma color=green>Este é o meu primeiro título
</font></h1>
<a name="1"><p align=center><font face="Arial" color="navy" size="2">Este é o
meu primeiro parágrafo em HTML</font></p></a>
Inserindo Imagens aos Links
Para inserir uma imagem num link basta colocar no lugar do texto do link a
tag que insere imagem.
Ex. <a href="teste.html><img src="http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg" width=120 height=160 align="middle" border="3" alt="fundo"></a>
SOM
Para inserir sons na sua pagina vamos utilizar as seguintes Tag’s:
EMBED SRC – Para colocar as músicas para reproduzir em uma espécie de
mini-media player na pagina.
Ex.<embed src="audio.mp3" loop="1">
BGSOUND SRC – Para colocar músicas em plano de fundo, para que apenas
toque sem que ninguém consiga ver, apenas ouvi-la.
Ex.<bgsound src="audio.mp3 loop="1">
LOOP – Utilizamos o loop para colocarmos quantas vezes queremos que a
música toque. Com loop=1, a musica tocara apenas duas vezes, loop=2, suas
vezes... Para colocarmos para que se repita inúmeras vezes, colocamos
loop=infinite.
<p align="justify"><font face=Verdana size=2 color=orange>Este é o meu
segundo parágrafo<Br>E esta é minha primeira quebra de
linha.</font></p>
<img src="http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg"
width=120 height=160 align="middle" border="3" alt="fundo">
<a href="http://www.google.com"><font face="Tahoma" size=2>
Google</font></a>
<a href="#1">Voltar para o primeiro parágrafo</a>
TABELAS
As Tabelas servem para deixar mais organizados os dados disponíveis em sua
pagina.
Criando tabelas
Para criar tabelas simples, vamos fazer da seguinte maneira:
As tag’s Table e /Table servem para indicar inicio e fim de tabela.
TR define cada linha de cada tabela.
TH Define o cabeçalho da Tabela. É uma célula da tabela.
TD Define os dados da Tabela.
Melhorando a Tabela
Agora vamos melhorar a aparência da tabela inserindo Tag’s
BORDER: espessura da borda em pixels.
BOREDERCOLOR: especifica a cor da borda da tabela
WIDTH: especifica a largura da tabela em relação ao browser, em pixels ou
%;
HEIGHT: especifica a altura da tabela em relação ao browser, em pixels ou
%;
CELLSPACING: especifica o espaço entre uma célula e outra, em pixels;
CELLADDING: especifica o espaço entre os dados e a borda da tabela, em
pixels;
BGCOLOR: cor de fundo das células da tabela.
<TABLE>
<TR>
<TH>Cabeçalho da Tabela</TH>
<TD>Dados da Tabela</TD>
</TR>
</TABLE>
Atributos Individuais
Vamos agora configurar individualmente cada célula.
ALIGN: alinha do conteúdo da célula ou das células da linha. Valores: right,
left, center.
BGCOLOR: define a cor de fundo das células da linha ou de uma célula
individual;
VALIGN: alinhamento vertical de uma célula ou de células de uma linha;
Pode ser top, middle ou bottom.
WIDTH: largura de uma célula em pixels ou %;
NOWRAP: indica ao browser que o texto da célula não pode ser dividido em
mais de uma linha. A coluna inteira terá o tamanho do texto escrito naquela
célula;
Células Mescladas
Para mesclar as células vamos atribuir à Tag TD os seguintes atributos:
COLSPAN: Será o numero de colunas que a célula ocupara.
ROWSPAN: Será o numero de linhas que a célula ocupara.
<table border="2" bordercolor="#003300" bgcolor="green" width="60%"
height="40%" cellspacing="3" celladding="3">
<table border="2" bordercolor="#003300" bgcolor="green" width="60%"
height="40%" cellspacing="3" celladding="3">
<tr align="left" valign="top"
<Table Border="2" width="50%" cellpadintg="3" celladding="3">
<TR bgcolor="#FFFACD">
<TD colspan="2">Célula 1</TD>
</TR>
</TABLE>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME="author" content="WebMaster"
<META NAME="description" CONTENT="Minha Primeira Página de HTML">
<META NAME="keywords" content="Página HTML">
<META HTTP-EQUIV="language" content="pt-br">
</HEAD>
<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN">
<h1><font face=Tahoma color=green>Este é o meu primeiro título
</font></h1>
<a name="1"><p align=center><font face="Arial" color="navy" size="2">Este é o
meu primeiro parágrafo em HTML</font></p></a>
<p align="justify"><font face=Verdana size=2 color=orange>Este é o meu
segundo parágrafo<Br>E esta é minha primeira quebra de
linha.</font></p>
<img src="http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg"
width=120 height=160 align="middle" border="3" alt="fundo">
<a href="http://www.google.com"><font face="Tahoma" size=2>
Google</font></a>
<a href="#1">Voltar para o primeiro parágrafo</a>
<embed src=http://planetadorock.bravehost.com/Chp Suey!.mp3 loop="1">
</embed>
<table border="2" bordercolor="#003300" bgcolor="green" width="60%"
height="40%" cellspacing="3" celladding="3">
<TR align="left" valign="top" bgcolor="#FFFACD">
<TH>Cabeçalho</TH>
<TD colspan="2">Minha primeira tabela</TD>
</TR>
</TABLE>
Frames
Frames são divisões de uma pagina em HTML. Ela é composta de uma pagina
principal e diversas outras divisões, compostas por outras paginas. Na pagina
principal você insere as outras paginas em colunas ou linhas, sendo que você
identifica o tamanho que cada uma deve ter.
É necessária cautela ao pôr frames, pois se você não souber como organizálas,
sua pagina perdera todo o sentido. No entanto, elas podem ser muito
úteis para criação de menus em sua pagina.
Para criar as frames vamos usar duas Tag’s:
FRAMESET: Indica como vai ser sua Frame, se vai ser Horizontal ou vertical.
ROWS: Com este tipo, a frame ficará na horizontal.
COLS: As Frames ficarão verticalmente.
Quando você for configurar frame terá que dar valores de tamanhos para elas,
preferencialmente em % para ficar mais fácil de configurar.
Note que colocamos uma parte que vem ser o menu com 16% da pagina, os
outros 84% foram embutidos no asterisco, após a virgula.
Agora vamos ver o atributo SRC da tag FRAME.
No quadro acima você pode ver que inserimos dois arquivos: “menu.html” e
“texto.html” e damos nomes à elas. Os nomes são muito importantes para que
quando for abrir um link na outra frame coloque o atributo target e o nome da
frame. Exemplo: <a href="Downloads.html" target="home">
Os atributos Noresize e Scrollolling, servem respectivamente para não
deixar modificar o tamanho da frame e nem que apareça a barra de rolagem
nela.
<frameset cols="16%,*" border="0">
<frame src="menu.html" name="frame" noresize scrolling="no">
<frame src="texto.html" name="home" noresize>
</frameset>
TecCodigos Copyright © 2011 | Template created by O Pregador | Powered by Blogger
0 comentários:
Postar um comentário