HTML-BÁSICO

MÓDULO 1: INTRODUÇÃO

Internet e Intranet

Internet: é uma rede mundial de computadores que permite ao usuário

obter informações e se comunicar com pessoas do mundo todo.

Intranet: é uma rede privada que permite ao usuário interagir com

pessoas de uma mesma organização.

World Wide Web (WWW)

Conhecida como web, é um sistema de informação que une dados de

vários serviços de internet.

A web refere-se ao corpo da informação compartilhada pela internet (rede

global).

Ou seja, o corpo da informação compartilhada pela internet são as

páginas web (conteúdos) que você acessa quando visita um site.

Através de brownsers (navegadores) ocorre o acesso aos sites.

Servidores web são computadores robustos que processam pedidos

recebidos pelos navegadores.

Home page

É a primeira página que um servidor web recebe de um site.

Uma home page é normalmente chamada de index.htm ou default.htm

Podem possuir a extensão .html como padrão.

Protocolos

São um conjunto de regras para a comunicação em rede. Determinam

como iniciar, como manter e como encerrar a comunicação.

HTTP (hyper text transfer protocol): é o protocolo utilizado pelos

servidores web para transmitir documentos HTML pela internet.

FTP (file transfer protocol): protocolo utilizado para transmitir arquivos,

porém sua interface gráfica não é tão agradável como o HTTP.

TCP (transfer control protocol): é um conjunto de protocolos para a

transmissão de informação pela web com função de verificar se os dados são
transferidos de forma correta, na sequência apropriada e sem erros.

IP (internet protocol): é um protocolo de endereçamento que fornece o

endereço dos computadores na rede.

URL

Sistema de endereçamento- UNIVERSAL RESOURCE LOCATOR

Utilizado pelos navegadores para localizar redes, computadores e

arquivos na internet.

http://www.ev.org.br/páginas/home.aspx

http:// : Protocolo HTTP, protocolo a ser usado para acessar o arquivo.

www.ev.org.br : ENDEREÇO, endereço do servidor.

páginas: SUBÁREA, área do servidor onde se encontr o arquivo.

Home.aspx : NOME DO ARQUIVO, nome do arquivo do servidor.

Linguagem de marcação

Para criar páginas web utiliza-se uma linguagem de marcação.

 As páginas web são armazenadas em arquivos com extensão htm ou
html, o que assegura que serão acessíveis por qualquer tipo de navegador em
qualquer lugar do mundo.
MÓDULO 2: HTML E A WEB

Linguagem de marcação de Hiper Texto

Para criar páginas web, utiliza-se a linguagem de marcação HTML.

Esta linguagem utiliza formato simples de código.

Qualquer navegador pode interpretar o código.

Para criar um documento HTML, é necessário um editor de texto ASCII,

como o Bloco de Notas.

Hiper Texto: todo conteúdo inserido em um documento para a web e que

tem como principal característica a possibilidade de se interligar a outros
documentos da web. Os links nas páginas dos sites possibilitam a construção de
hipertextos.

ASCII: AMERICAN STANDAR CODE for INFORMATION INTERCHANGE

ou Código Padrão Americano para o Intercâmbio de Informação, é uma codificação
de caracteres em 8 bits baseada no alfabeto norte-americano. Todos os caracteres
são convertidos em bits utilizando uma tabela.

Origem do HTML

Foi inventado em 1990 pelo cientista Tim Berners-Lee, a fim de tornar

possível a troca de informações entre cientistas de diferentes universidades.

HTML é uma linguagem que possibilita apresentar informações na

internet. Aquilo que se vê numa página na internet é a interpretação que o
navegador faz do HTML.

Vantagens do HTML

As vantagens estão no que você pode fazer com o HTML:

 Criar e adicionar facilmente documentos a web devido ao seu formato
simples.

Assegurar a acessibilidade das suas páginas web por um grande número

de plataformas e navegadores.

Transmitir facilmente documentos pela internet.

O papel do HTML na web

O HTML tem uma função importante em aplicações web.

Aplicações web aumentam a interação do usuário na web.

Aplicações web são programas que você incorpora em sites para

gerenciar tarefas adicionais como o gerenciamento de pedidos de usuários.

Quando você encontra com alguma informação em uma página web, o

navegador envia para os chamados CGI scripts, os quais processam a informação e
exibem o resultado no navegador segundos após.

CGI scripts: Common Getway Interface, é um conjunto especial de

programas.

Você usa o HTML para fornecer a interface básica para a interação com
aplicações web.

Usado para criar interfaces entre os bancos de dados usados nestas

aplicações e o usuário final.
MÓDULO 3: CRIANDO UM DOCUMENTO HTML

Criando uma página web em HTML

Para tornar possível a criação de páginas web, utilizaremos o Bloco de

Notas para criar documentos HTML.

No Bloco de Notas pode-se escrever o código HTML que desejar: <html>

Exemplo de código HTML

Há alguns termos em inglês entre os sinais < (menor que) e > (maior
que).

Estas palavras são chamadas de tags, utilizadas para especificar o

formato do conteúdo de uma página web.

Os sinais distinguem as tags de um texto comum e o conteúdo delas pode

ser digitado tanto em letras maiúsculas quanto em minúsculas.
Partes de um documento HTML

Um documento HTML possui duas partes:

Head (cabeçalho): você entra com o título da página web que será
exibido apenas na barra de endereços do navegador.

Body (corpo): você entra com o conteúdo da página web.

Tags com fechamento

Grande parte das tags requerem um fechamento e este é idêntico à tag

de abertura, porém com o sinal / (barra).

O conteúdo das tags pode ser digitado em minúsculo ou maiúsculo.

Tags sem fechamento

Algumas tags não necessitam de fechamento e sua sintaxe é somente de

abertura.

ex: <BREAK> ou <BR>, insere uma quebra de linha.

Salvando um documento HTML

Documentos gerados pelo Bloco de Notas assumem automaticamente a

extensão .txt  este tipo de arquivo não pode ser aberto por navegadores.

Para visualizar um documento HTML como página web:

Arquivo  salvar como  Nome: ------

Tipo: Todos os arquivos

Codificação: UTF-8

Codificação de caracteres

Codificação de caracteres é o mecanismo que armazena os símbolos em

forma binária no computador possibilitando a conversão de um símbolo em código e
de um código em símbolo.
 A codificação UFT-8 é recomendada para a codificação na web por ser
amplamente suportada em navegadores e editores de código, além de ser
compatível com praticamente todos os idiomas do mundo.

A codificação UTF-8 utiliza um número variável de bytes para representar

símbolos podendo usar de 1 a 4 bytes.

Visualizando a página web

MÓDULO 4: FORMATANDO UM DOCUMENTO HTML

Inserindo efeitos

Negrito (bold)

Sintaxe: <B>Texto</B>

Itálico (Italic)

Sintaxe: <I>Texto</I>

Sublinhado (Underline)

Sintaxe: <U>Teto</U>

Alterando o alinhamento do texto

Texto alinhado à esquerda

Sintaxe: <p align=left>Texto</p>

Texto centralizado

Sintaxe: <p align=center>Texto</p>

Texto alinhado à direita

Sintaxe: <p align=right>Texto</p>

Texto justificado

Sintaxe: <p align=justify>Texto</p>

Alterando a fonte

Pata alterar a fonte, tamanho ou cor é preciso usar a tag <FONT>

</FONT>

Esta tag vem acompanhada dos atributos face, size, color que servem
para alterar fonte, tamanho e cor respectivamente.

Um dos primeiro atributos utilizados com a tag <FONT> é o FACE.

 Sintaxe: <FONT FACE= “Nome da cor”>

Alterando o tamanho da fonte

Sintaxe: <FONT SIZE= “Número”>, o número varia de 1 a 7.

Alterando a cor da fonte

Sintaxe: <FONT COLOR= “Cor”>, a cor pode ser definida pelo nome ou
pelo código hexadecimal da cor.

As cores em HTML são definidas em notação hexadecimal pela

combinação dos valores RGB (red, green e blue)

Os valores em hexadecimal são definidos em três pares de números

começando com o símbolo hash (#).
Inserindo quebra de linha

Se você deseja quebrar o texto sempre no mesmo lugar, independente da

largura da janela do navegador, você pode utilizar a tag <P> </P> (PARAGRAPH)
ou a tag <BR> (BREAK)

A tag <P> </P> insere uma linha entre os parágrafos.

A tag <BR> insere apenas uma quebra de linha.

Inserindo linhas horizontais em uma página web

Usa-se estas linhas para dividir a informação exibida emdiferentes blocos.

Para criar a linha horizontal, use a tag HORIZONTAL RULLING <HR>

Criando subtítulos

Para criar um subtítulo utilize a tag HEADING <Hx> </Hx>

X é o número que representa o nível do tópico.

Você pode criar até 6 subtítulos.

Adicionando comentários

Você pode inserir comentários para incluir notas, sugestões e explicações

que o internauta não deve ver.

Para isso você usa a tag COMMENT

Sintaxe: <!- -xxxxxx- ->

Normalmente usa a tag COMMENT para fornecer informações sobre o

autor do documento ou para adicionar uma mensagem copyright.
Tag preformatted (pré-formatado)

Sintaxe: <PRE> </PRE>

O navegador exibe o bloco de texto exatamente como está descrito no

documento html.
MÓDULO 5: CRIANDO LISTAS

Tipos e funções das listas

Lista é uma colocação de itens relacionados.

Você usa uma lista para organizar dados ou para listar itens em grupo.

O HTML possui dois tipos de lista:

Lista numerada ou lista ordenada: você pode utilizar números ou

letras para criar uma sequência.

Ex:1.São Paulo A. São Paulo

2. Rio de Janeiro B. Rio de Janeiro

3. Belo Horizonte C. Belo Horizonte

Lista não numerada: Usada quando for necessário listar itens sem
que a ordem seja importante.

Ex:

 São Paulo
 Rio de Janeiro
 Belo Horizonte

Criando listas ordenadas

Para criar listas ordenadas utilizaremos duas tags.

<OL> </OL> : que abre e fecha o tipo de lista

<LI> : abre cada item da lista

Criando listas não numeradas

O que significa lista intercalada

Personalizando listas

O atributo type pode especificar o tipo de marcador em uma lista não

ordenada, ou tipo de número em uma lista ordenada.
MÓDULO 6: INSERINDO IMAGEM

Quando adicionamos uma imagem a uma página web, é preciso ter em

mente o formato, o tamanho e a posição dela na página.

Formatos de imagens mais utilizados em páginas web:

-JPEG OU JPG: suporta até 16,8 milhões de cores

-GIF: 256 cores e fundo transparente

-PNG: permite imagens com fundos transparentes e 16,8 milhões de

cores.

Inserindo imagens

A tag utilizada é a <IMG>

Para informar o endereço e o nome da imagem utiliza-se o atributo SRC

(Source (fonte)).

Sintaxe: <IMG SRC= “C:\pasta\nome imagem”>

Quando criamos uma imagem para uma página web, é preciso observar o
tamanho do arquivo para que usuários com qualquer tipo de conexão possam ter
acesso, pois quanto menor a velocidade de conexão do usuário, mais tempo irá
demorar para carregar a imagem.
Alinhando imagem

A imagem pode ser alinhada com outros elementos usados na página,

como textos ou outras imagens.

O atributo a ser utilizado em conjunto com a tag imagem é ALIGN.

Usando o atributo ALIGN

O atributo ALIGN e seus parâmetros para alterar a posição da imagem.

Usando o atributo ALT

Caso o navegador não consiga exibir a imagem, o atributo ALT permite

vincular um texto explicativo a ela.

É considerado um atributo de acessibilidade importante para deficientes

visuais, uma vez que os programas desenvolvidos para eles leem as imagens.

Sintaxe: <IMG ALT= “Texto explicativo”>

MÓDULO 7: CRIANDO LINKS

O que são links?

Links são conexões pelas quais você conecta páginas que podem ser do
mesmo website, externas ou ainda conectar páginas a outros documentos.

Os links pode ser criados no texto e também em outros elementos do

website, como imagens ou itens de um menu.

Usando a tag ANCHOR (âncora)

<A> </A>

É utilizada para criar links no hipertexto.

Sintaxe: <a href= “URL”> Texto descritivo</a>

a: abertura da tag ANCHOR

href: atributo usado para especificar a URL do documento linkado ou

interligado.

URL: endereço da página ou documento a ser linkado

/a: finaliza a tag ANCHOR

Criando links em textos

 Ao especificar uma URL apropriada para um serviço de internet, você
também pode linkar ou interligar sua página web a esse serviço. Por exemplo, você
pode criar um link entre sua página e o seu e-mail. Observe, neste caso, como os
atributos formam a sintaxe da tag <A>.

CRIANDO LINKS PARA SEÇÕES NA MESMA PÁGINA

Esse recurso é utilizado quando a página contém um texto muito extenso.

Você pode especificar a URL do documento que deseja interligar, com o

nome da seção precedido pelo símbolo “#”.

No entanto, será preciso utilizar um atributo que fará o navegador

entender para onde deve ir após o usuário clicar no link criado.

Este atributo é NAME.

O navegador exibe o link e quando selecionado, exibirá a seção que

começa com nome especificado.

Sintaxe neste caso:

<A href= “#nome da seção”>Texto explicativo</A>

Criando links em imagens

Para criar um link numa imagem utilizamos as combinações da tag

ANCHOR com a tag IMAGE.

Sintaxe: <a href=”URL”><img src= “img_url”></a>

Personalizando links

Também é possível personalizar cores dos links.

Podemos utilizar três elementos que modificam a apresentação dos links

Tag: <BODY>

<BODY LINK= “COR” VLINK= “#COR” ALINK= “COR”

LINK: especifica a cor dos links não acessado da página web.

VLINK: após ser acessado, o link apresentará a cor especificada por

este atributo.

ALINK: especifica a cor que o link deverá apresentar quando o mouse

estiver sobre ele.
MÓDULO 8: COMBINANDO TAGS

Combinações possíveis

Você pode utilizar combinações de tags em páginas web, para melhorar

sua aparência e funcionalidade.

A tag ANCHOR com tags de formatação e listas

A tag ANCHOR com tag lista e tag imagem

Esta combinação melhora a aparência da lista.

O navegador exibe a lista de imagens junto com o texto de descrição

Para isso, você define cada item como um link utilizando uma
combinação da tag ANCHOR e da tag IMAGE.

Assim, você pode construir uma lista de imagens que contém links
para outras páginas, documentos ou até mesmo outras imagens.

É muito comum a utilização de thumbnails, que são imagens em

tamanhos reduzidos.

É indicado utilizar um programa de edição de imagem (Paint por

exemplo) para produzir uma versão da imagem com tamanho reduzido.
MÓDULO 9: USNADO IMAGENS MAPEADAS

O que são imagens mapeadas

Uma imagem mapeada é diferente de um link numa imagem.

Imagem mapeada é uma imagem dividida em diferentes áreas e cada

área é interligada a um documento.

Na imagem mapeada, primeiramente o navegador identifica a área da

imagem que você selecionou e então a URL do documento vinculado a esta área.

Exemplo de uso: quando existe a necessidade de uma mesma imagem

direcionar o usuário para duas ou mais páginas web diferentes, como em um menu.

Link numa imagem: em um link colocado em uma imagem, o navegador

identifica a URL do documento especificado na tag ANCHOR e exibe a página
interligada.

Tipos de imagens mapeadas

Você pode criar dois tipos de imagens mapeadas:

Server-side (no servidor): você define um arquivo especial chamado

arquivo de definição das coordenadas com todos os detalhes da imagem mapeada e
armazena este arquivo no servidor.

Client-side (no cliente): você inclui todos os detalhes da imagem

mapeada no próprio documento. (Este será o tipo de imagem mapeada que será
visto no curso.)

Como mapear uma imagem

Primeiro precisa definir as áreas da imagem que possuirão links.

Para realizar este procedimento você pode definir as áreas utilizando

formas geométricas.
 São utilizadas coordenadas X e Y que são contadas pixel a pixel, para
delinear as formas geométricas. Sendo o 0 (zero) o ponto esquerdo superior da
imagem.

Mapeando uma imagem

Utilize um mapeador de imagens do programa editor de HTML.

Você desenha as formas geométricas e o programa fornece o código

pronto.

A tag MAP

Código da tag <MAP>, como resultado temos a imagem mapeada com

cada área colorida representando um link com uma página externa.
A tag AREA