Uma aulinha fácil para aprender o html

A Internet é um conjunto de redes de computadores interligados pelo mundo inteiro, que têm em comum um conjunto de protocolos e serviços, de forma que os usuários a ela conectados podem usufruir de serviços de informação e comunicação de alcance mundial.

A Internet no Brasil

A Internet chegou ao Brasil em 1988 por iniciativa da FAPESP (Fundação de Amparo à Pesquisa do Estado de São Paulo), da UFRJ (Universidade Federal do Rio de Janeiro e do LNCC - Laboratório Nacional de Computação Científica.

Em 1989 foi criada a Rede Nacional de Pesquisas (RNP) com o objetivo de iniciar e coordenar a disponibilização de serviços de acesso Internet no Brasil. O primeiro backbone interligava 11 estados a partir de Pontos de Presença (POP) em suas capitais. A exploração comercial se deu em dezembro de 1994 a partir de um projeto-piloto da Embratel.

*Aplicação*	*Port*	*Protocolo*
FTP	21	TCP
TELNET	23	TCP
SMTP (e-mail)	25	TCP
DNS	53	UDP
Gopher	70	TCP
HTTP (WWW)	80	TCP
Network News	119	TCP

Abaixo tabela da subdivisão de domínios institucionais:

Domínio	Tipo de instituições
mil	Instituições com fins militares
edu	Instituições educacionais
com	Instituições com fins comerciais
gov	Instituições governamentais
org	Instituições não-governamentais
net	Instituições provedoras de backbones

Ex.: na Embratel: www.embratel.net.br

empresa brasileira xyz: www.xyz.com.br

Conceitos iniciais

Hipertexto

É um texto que não obrigatoriamente é linear. Um exemplo, é o help.

Em um hipertexto teremos os links, que fazem uma interconexão de textos, ligando para outras páginas, mails, etc. Os links são sublinhados e dependendo do navegador podem aparecer em cores diferentes.

URL - Uniform Resource Location

O URL é a representação padronizada para nomes e endereços na WWW. Combina informações à respeito do tipo de protocolo usado, o endereço do site, a localização do subdiretório e o nome do arquivo.

HTML

HTML: Hypertext Markup Language

A interpretação não requer nenhum compilador, podendo ser criado e lido em qualquer editor de textos.

TAG

O TAG é uma marcação usada na linguagem HTML, que indicam o começo e fim de funções. A barra (/) vai indicar o fim do tag. Um tag vem sempre entre os sinais menor que (<) e maior que (>).

Forma Geral:

trecho que sofrerá a alteração

Exemplo:

TAG HTML

É o tag principal, envolvendo todo o arquivo HTML

Formato:

corpo do código

TAG HEAD

É o tag responsável pelo cabeçalho de uma página HTML.

Formato:

títulos

É utilizado para colocar o título e comentários ()

TAG TITLE

É o tag responsável pelo título da página que aparecerá no navegador.

Formato:

coloque aqui o título da sua página

TAG META

Define informações de documentos em forma de variáveis.

Formato:

Observe que não é necessário o tag final

Exemplo:

TAG BODY

A seção BODY indica onde inicia e termina o corpo do arquivo HTML.

Formato:

corpo do arquivo

Existem opções para cor de fundo, links que serão vistas mais a frente.

Observações:

para incluir linhas de comentário utiliza-se um sinal de exclamação (!), após o sinal de menor que.

Ex.:

procure usar sempre um padrão: ou utilize só letras maiúsculas ou só minúsculas.
grave seu trabalho em um editor não gráfico, por exemplo, bloco de notas.

Formatação

Abaixo tabela com estilos de caracteres ...

Estilo	Identificador	Função
Bold		negrito
Underline		sublinhado
Italic		itálico
Teletype		fonte fixa
Blink		piscando

Caracteres especiais

Caracter	Seqüência
<	<
>	>
&	&
"	"

Seqüência de Scapes

Ó , Copyrigth

â , Marca registrada

Estilos lógicos

emphasis		importante
strong		negrito
citation		muda letra
code		exemplo de instruções de programas
sample		caracteres literais
keyboard		caracteres parecidos com manual de instrução
variable		nome simbólico de uma entidade que pode assumir vários valores
definition		explicação do que o termo significa

Caracteres de acentuação

É composto por 4 itens:

& (e comercial), vogal (vogal que será acentuada), acento e por último ponto e vírgula (;).

à	à
í	í
é	é
á	á
ó	ó
ú	ú
ê	ê
ã	ã
å	å
ä	ä
æ	æ
ç	ç

TAG HN (Headers)

Cabeçalhos e sub-cabeçalhos. Existem 6 níveis que variam de 1 a 6. O cabeçalho negrita e pula um parágrafo.

Formato:

texto

onde n varia de 1 a 6

Exemplo:

texto alinhado a esquerda

O align (alinhamento) pode ser direito (right), esquerdo (left) ou centralizado (center)

TAG BR (Quebra de linha)

É utilizado para forçar a quebra de linha. Sem este tag, a quebra de linha acontece de acordo com o tamanho da janela.

Formato:

TAG P - Parágrafos

Para se obter um novo parágrafo, não adianta digitar ou deixar espaços em branco, pois eles serão desprezados.

O identificador

insere um parágrafo pula uma linha que eqüivale a quase o dobro do
.

Formato:

texto

Observação: no caso de só começar um novo parágrafo, não é necessário o

TAG DIV

Similar ao identificador

, mas o pulo de linha é equivalente ao
, pulando assim uma única linha.

Formato:

texto

TAG CENTER

Centraliza uma região

Formato:

texto

TAG PRE - Texto pré-formatado

Força o navegador a exibir um texto, parágrafos, espaços em branco e quebras de linha exatamente da maneira como foram digitados. O texto pré-formatado será exibido em fonte fixa.

Formato:

texto

TAG HR - Barra Horizontal

Permite o desenho de linhas horizontais. Pode-se controlar a altura, o comprimento, alinhamento e tirar a sombra (efeito 3D).

Formato:

onde SIZE = altura (em número de pixels)

WIDTH = % do comprimento

ALIGN = alinhamento (center, left, right)

NOSHADE = sem sombra

Observação: não é possível escrever em uma linha horizontal.

TAG FONT

Permite alterar o tamanho, a cor e a fonte das letras.

Formato:

texto

n = varia de 1 a 7 (default=3) rrggbb= valor hexadecimal da cor

Observações:

se a fonte indicada não for encontrada, o padrão será exibido.
pode-se também colocar SIZE=+n, por exemplo: o tamanho atual é 3, se for incluído o parâmetro +2, a fonte passará a ser 5.
algumas cores padrões podem ser escritas. Por exemplo: COLOR="YELLOW". Temos também: black, blank, cian, coral, etc...

TRABALHANDO COM IMAGENS

LISTAS

O HTML permite listas ordenadas, não-ordenadas e de definição.

Formatos:

Ordenadas	Não-ordenadas	De definição
item1 item2	item1 item2	tópico texto

Listas Ordenadas: cada item da lista é identificado por um número sequencial (1,2,3,...).

Listas não-ordenadas: parecida com a ordenada. No lugar do número haverá um identificador (• ¨ )

Listas de definição: esta lista tem dois níveis de informação. O primeiro é o tópico, que aparece em destaque. O segundo é a descrição que aparecerá deslocado em relação ao tópico.

Programação em HTML

Resultado

BROADCAST: sistema de envio de mensagem
DTE: Data Terminal Equipament,
por vezes traduzido para ETD

BROADCAST

sistema de envio de mensagem

DTE

Data Terminal Equipament,

por vezes traduzido para ETD

TAG A - Link

Permite a hipernavegação. Pode referenciar links locais, remotos, self e outros como ftp, e-mail, etc.

Formato:

Texto que aparecerá em destaque

Links Locais

Será colocado em serviço o nome de um arquivo que está no mesmo servidor onde está a sua página, poderá também ser especificado um diretório, por exemplo:

Conheça nossa vídeoteca

Observe que não é necessário colocar o diretório completo, iniciando apenas do diretório atual.

Links remotos

Será colocado em serviço uma URL, por exemplo uma página:

Procure informações no site do Yahoo

Link para E-mail

Para direcionar para um e-mail, é necessário acrescentar na referência a palavra MAILTO. Observe o modelo:

Envie-nos uma mensagem

E para acrescentar o "subject" basta incluir logo a frente do e-mail:

( ? + subject + = + "assunto" )

>Envie-nos suas sugestões

Link para localizações na própria página

Teremos um rótulo para estabelecermos a ligação. Portanto além de especificar para onde o link vai, devemos também colocar rótulos:

final da página

.....

....

No local desejado você deverá incluir o rótulo

TAG IMG -Imagens

O campo obrigatório nesse TAG é o nome do arquivo. Este arquivo deve ser .gif (não perde detalhes da imagem) ou .jpg (perde alguns detalhes da imagem).

Formato:

ALIGN="tipo"

ALT="texto"

WIDTH="pixel ou %"

HEIGHT="pixel ou %">

A opção alinhamento tem as seguintes opções: TOP, RIGHT, MIDDLE, LEFT, BOTTOM.

A opção ALT mostra um texto alternativo à imagem, é útil para navegadores não gráficos, ou quando a opção Auto Load Imagens está desabilitada.

Temos ainda a opção BORDER=0 que pode não permite a exibição da borda na figura.

IMAGE MAP - Mapa de Imagem

Um mapa de imagem é um recurso para acessar diferentes endereços clicando em áreas diferentes em uma imagem.

Você pode definir uma área (AREA SHAPE) através de um retângulo (RECT), um círculo (CIRCLE) ou um polígono (POLY).

Formato:

Para um retângulo deve-se indicar 2 coordenadas: ((x1,y1), (x2,y2))

Para um círculo é necessário indicar o centro e o raio.

Para um polígono é necessário indicar todas as coordenadas.

Exemplo:

HREF="pagina1.html"

COORDS="140,20,280,60">

HREF="pagina2.html"

COORDS="100,100,180,80,200,140">

HREF="pagina3.html"

COORDS="140,100,60">

Observação:

Existem programas para auxiliar nesse caso, por exemplo MAPEDIT. Esses programas, calculam as coordenadas e as transforma em código HTML.

BACKGROUND - Pano de fundo

No TAG BODY podemos incluir algumas opções, entre elas um pano de fundo. Se o tamanho da tela, for menor que o arquivo este será repetido.

Formato:

Exemplo:

BGCOLOR - Cor de fundo

Este atributo, assim como o BACKGROUND, altera o fundo da tela.

Formato:

texto da página

LINK - Alteração de cores

Você pode alterar a cor dos links visitados, não visitados e também a cor do link quando o mouse fica pressionado sobre o ele.

LINK - link não visitado

VLINK - link já vistado

ALINK - intervalo de tempo em que o mouse está pressionado sobre o link

Formato:

corpo da página

TABELAS

TABLE - Tabelas

Formato:

item

As tabelas, em HTML, são muito usadas para posicionamento de elementos numa página.

Cada tabela é delimitada por

Cada linha da tabela é delimitada por

são os itens; se diferem por

aparecer em negrito e centralizado.

Título:

Pode-se incluir o título em uma tabela usando os identificados

Borda:

Tamanho da borda especificado em pixels

Exemplo:


Marca	Tipo	Preço

FIAT	Pálio	11.500

FORD	Escort	12.500

ALIGN/VALIGN

Teremos dois tipos de alinhamentos em uma tabela e que poderão ser aplicados aos TR, TD e TH.

O alinhamento no por default é left. O é centralizado.

ALIGN pode ser left, right e center

VALIGN pode ser middle, top, bottom

Formato:

NOWRAP

Impede a quebra do texto em uma célula. Pode ser usado em TD e TH

Formato:


	item

ROWSPAN / COLSPAN

Define a abrangência da célula, ou seja, quantas linhas (ROWSPAN) e quantas colunas (COLSPAN) ela vai ocupar.

Por default tem valor 1. É aplicado aos tags e

Formato:

item


item

CELLSPACING /CELLPADDING

Cellspacing: define a espessura interna das linhas da tabela.

Cellpadding: define o espaçamento do elemento até a borda da célula.

Formato:

WIDTH - Largura da Tabela

Normalmente este cálculo é feito automaticamente, usando o mínimo espaço necessário. Mas pode-se incluir no identificador

uma porcentagem para a largura da janela.

Formato:

....

FORMULÁRIOS

Um formulário é uma área com entrada de dados para o usuário. Ressaltamos que o HTML, não trabalha com a manutenção desses dados. Para isso o usuário submete esses dados, enviando para um e-mail ou para um programa CGI.

FORM

Responsável pela criação de formulários

Formato:

TEXT - Caixa de entrada - textos

Formato:

VAR="variável"

VALUE=""

SIZE="n"

MAXLENGTH="m">

onde TYPE e VAR são obrigatórios

n,m são números inteiros.

SIZE = tamanho da caixa

MAXLENGTH = número máximo de caracteres.

Observação:

No retorno das informações, elas aparecerão da seguinte forma: "name=informação digitada"

PASSWORD - Entrada de Senhas

É um campo semelhante a caixa de textos. Quando digitado, asteriscos aparecem no lugar dos caracteres.

Formato:

NAME="senha"

VALUE=" "

SIZE="n"

MAXLENGTH="m">

HIDDEN - Campos ocultos

Cria variáveis ocultas dentro de um formulário. Declara variáveis que serão enviadas junto com os demais campos.

Formato:

NAME="var"

VALUE="valor">

Exemplo:

NAME="email"

VALUE="[email protected]">

FRAMES

Frames são subdivisões de uma janela. As marcações

são substituídas por

Formato:

Exemplo:

ROWS - Frames horizontais

Define as divisões horizontais entre os frames. Deverá ser indicado qual o espaço cada frame irá ocupar. Pode-se indicar em pixel, porcentagem. O caracter asterisco (*) completa a porcentagem que está faltando.

Formato:

Exemplo:

OBS.: Para carregar uma página em determinada região será incluído a opção TARGET no tag , ele informará em qual frame será exibido a página chamada. Deve-se também colocar nomes para os frames, através do atributo name no tag frame

COLS - Frames verticais

Idem ao ROWS, só que esta opção define verticalmente os frames.

Exemplo:

Exemplo 2:

NOFRAMES

Permite que o código HTML seja interpretado em browsers que não suportem o tag FRAME.

Formato:

....

________________________________