(Parte 1 de 2)

Tutorial Básico de HTML

Tutorial Básico de

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

Executar– e digite: "notepad". Logo após abrirá um documento do bloco

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 – 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:

<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">

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://w.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.

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://w.univab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%2 0Background.jpg">

Parágrafo Para iniciar um parágrafo utilizamos a Tag P.

<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">

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.

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>

<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">

<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>

<T> - Aplica um espaçamento regular ao texto. Ex. <t>Texto com espaçamento regular</t>

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>

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>

Insere uma linha horizontal no Browser. EX. <HR WIDTH="n%" ALIGN="posição" SIZE="n" NOSHADE COLOR="#RGB"> 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="#RGB": 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://w.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>

<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">

<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN">

<h1><font face=Tahoma color=green>Este é o meu primeiro título

<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://w.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://w.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:

<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">

<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN"> <h1><font face=Tahoma color=green>Este é o meu primeiro título

<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://w.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://w.univab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background .jpg" width=120 height=160 align="top" border="3" alt="imagem principal">

<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">

<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN">

<h1><font face=Tahoma color=green>Este é o meu primeiro título

<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://w.univab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background .jpg" width=120 height=160 align="middle" border="3" alt="fundo"></a>

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

vezesPara colocarmos para que se repita inúmeras vezes, colocamos

música toque. Com loop=1, a musica tocara apenas duas vezes, loop=2, suas 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://w.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://w.google.com"><font face="Tahoma" size=2> Google</font></a> <a href="#1">Voltar para o primeiro parágrafo</a>

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.

<TH>Cabeçalho da Tabela</TH>

<TD>Dados da Tabela</TD>

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.

height="40%" cellspacing="3" celladding="3"> <tr align="left" valign="top"

<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">

<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW" VLINK="DARKGREEN">

<h1><font face=Tahoma color=green>Este é o meu primeiro título

<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://w.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://w.google.com"><font face="Tahoma" size=2> Google</font></a> <a href="#1">Voltar para o primeiro parágrafo</a>

(Parte 1 de 2)

Comentários