Aprendendo HTML

H

TML


Nesse blog iremos os princípios básicos para a edição e criação de paginas no formato HTML,
desde a formatação de texto até de links, imagens, atributos etc.
HTML - Hypertext Markup Language é uma linguagem para publicação de conteúdo.
incluindo imegens, texto etc, é uma liguagem interpretada e deve seguir o padrão Hypertexto/conjunto de elementos;
e para salvar um arquivo podemos usar a extensão HTM ou HTML.


ELEMENTOS E ATRIBUTOS


Elemento TAG - para abertura e fechamento ( < > ) de toda a formatação do arquivo e elementos.
Os Atributos são usados para definir uma propriedade de um elemento HTML, devem ser colocados
sempre na tag de abertura ,logo após o nome do elemento, precedido de um espaço e é composto um nome de atributo,
um sinal de igual (=) e um valor de atributo , cercado por aspas duplas (").



INICIANDO UM DOCUMENTO

Todo o documento HTML fica contido entre os TAGS: ). Temos duas seções básicas:
HEAD -> Contém parâmetros de configuração do documento.
BODY -> Contém corpo do documento em si.
A estrutura de um documento HTML é:

TAGS USADOS NO INÍCIO DO DOCUMENTO

HTML.... / HTML
Envolve/Abre e fecha um documento ou página.
(HEAD e BODY).
HEAD... / HEAD
Envolvem o cabeçalho do documento.
TITLE.. / TITLE
Indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na barra de título da sua Janela no Windows.
BODY... / BODY
Envolvem o corpo/conteúdo do documento. Aqui fica o conteúdo principal da Home Page.
Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND.

TÍTULOS E SUBTÍTULOS

Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), juntamente com as opções CENTER, RIGHT, OU LEFT
pode-se alinhar o texto no centro, direita ou esquerda.

Veja alguns exemplos:

Texto em H1 alinhado á direita.

Texto em H2

Texto em H3 alinhado ao centro.

FORMATAÇÃO DE TEXTOS

Além das TAGs CENTER.../CENTER, LEFT, RIGHT e as demais vistas acima existem as seguintes TAGs que podem ser utilizadas para a formatação de um texto.
B... / B - Aplica o estilo negrito
I... / I - Aplica o estilo itálico.
U... / U - Aplica o estilo sublinhado (nem todos os browser o reconhecem).
SUP.. / SUP - Faz com que o texto fique sobrescrito.
SUB.. / SUB - Faz com que o texto fique subscrito.
PRE.. / PRE - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.

IMPORTANTE

É importante lembrar porque utilizamos tags com letras minúsculas.
Em HTML os nomes das tags e elementos podem ser escritos tanto com letras maiúsculas quanto com letras minúsculas, tanto que B é a mesma coisa que b.
Se você observar em tutoriais encontrados pela Web, vai notar que os mais antigos
geralmente utilizam letras maiúsculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente letras minúsculas.
Nesta minha apostila utilizo sempre letras minúsculas porque existe uma razão muito forte para isso.
A nova geração do HTML é uma apl icação do XML
e é designada por XHTML. O XHTML é a melhor linguagem para se criar páginas para a Web, mas é mais restrita do que o HTML
(“ rouba” algumas das liberdades que o HTML oferece).
Ao contrário do que acontece em HTML, em XML as etiquetas B e b representam elementos diferentes, visto que em XHTML foi adotado uma convenção segundo a qual todas as etiquetas devem ser escritas com letras minúsculas.
Por este motivo é extremamente recomendável que se escreva todas as etiquetas com letras minúsculas.
Deste modo, você estará adqui rindo bons modos e quase não terá trabalho de conver ter suas páginas HTML para XHTML.

HTML - Imagens

HeinformatekaHTML

IMAGENS

Podemos inserir imagens dentro de um documento HTML, mas devemos ter o máximo de cuidado, para não onerar a transmissão para o usuário.
Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels.
Para inserir uma imagem, uso o TAG: , que é único, não exigindo um TAG finalizado.
Exemplo:

IMG SRC="figura1.gif"

Se a imagem estiver na sua maquina é preciso especificar a pasta como no exemplo:
img src="imagens/foto2.jpg" width="65px" height="75px"

As TAGs "WIDTH" e "HEIGHT" servem pra modificar o tamanho e largura da imagem conforme desejado
Os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso, juntamente com o documento HTML.

Você pode adicionar uma pequena descrição desta maneira:
img src="foto. jpg" width="221" height="300" alt="nome da foto"
O atributo alt (texto alternativo) é utilizado para dar a pequena descrição, neste caso "NOME DA FOTO".

BORDA DA IMAGEM

Uma borda (contorno) da imagem pode ser adicionada com o atributo border :
img src="foto. jpg" width="10%" height="10%" border="1"
img src="foto. jpg" width="10%" height="10%" border="2"
img src="foto. jpg" width="10%" height="10%" border="3"
O valor do atributo border indicará o tamanho dessa moldura.

Listas

HeinformatekaHTML

LISTAS

LISTAS NAO ORDENADAS

Uma lista não ordenada contém vários itens marcados todos com o mesmo símbolo, normalmente um círculo pequeno ou um quadrado pequeno. Para criar uma lista não ordenada, utilizamos o elemento
UL ( "unorderedlist ") . Dentro desse elemento, outros itens são criados com o elemento
LI ( " list item"), onde sao colocados os itens da lista.
O exemplo seguinte mostra uma lista simples:

Exibição no navegador :

• 1º item
• 2º item
• 3º item
• 4º item

Exibição das tags:

Dentro de uma lista não ordenada podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc.


LISTAS ORDENADAS:

Uma lista ordenada contém vários itens numerados e é criada com o elemento
OL ("ordered list").
Os itens da lista definem-se com o elemento
LI ( "list item").


Exibiçao das tags:

Exibição no navegador:

1. item
2. item
3. item

LISTAS DE DEFINIÇOES


Uma lista de definições não é constituída por uma série de itens, mas sim por vários termos acompanhados de descrições de seus significados. As listas de definições são criadas com o elemento
DL ("definition list")
O nome de cada termo fica dentro de um elemento
DT ("definition term") e a sua descrição fica no elemento
DD ("definition description").


Exibição da Tags:

Exibição no navegador:

Rum

Bebida espirituosa muito apreciada pelos piratas do Caribe

Bagaço

Bebida com elevado teor alcoólico. A sabedoria popular atribui - lhe for tespropr iedades terapêuticas .

Dentro de um elemento DD ("definition description") podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc.

Tabelas - HTML

HeinformatekaHTML

TABELAS



Tabelas auxiliam na visualização de dados ou na divisão de sua página em setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela que você desenhar ia numa folha de papel ou num outro programa de computador.
As tabelas são perfeitas para organizar e apresentar dados de forma prática. É possível inserir texto, imagens ou links em tabelas, distribuindo melhor as informações em uma página.
Este é um dos tópicos mais importantes, porque é imprescindível dominar bem o uso de tabelas para criar um bom layout html. Praticamente todas as páginas web utilizam recursos de tabela para diagramar seus elementos. Porém a utilização de estilos (CSS) para posicionamento de elementos na página está crescendo cada vez mais, e já existem páginas com layout muito bom sem o uso de tabelas, usando apenas CSS.
Uma tabela é formada pelas seguintes TAG's:
O elemento principal é o TABLE que vem sempre acompanhado do BORDER que abre e fecha o a tabela.
TR define o número de linhas na tabela.
TD (dentro da TAG TR) define o número de colunas da tabela.
TH define o cabeçalho da tabela, ou titulo das informaçoes a serem listadas.
E aqui segue um exemplo simples de tabela:

Cabeçalho	ou Tiitulo	titulo
info	info	info

Exibição das tag's:

È importante lembrar que a tag TH sempre será o titulo da informação e por isso automaticamente o texto fica em negrito, enquanto a tag TD será o conteúdo da informação independente da ordem da tabela.


É possível definir alguns atributos para tabelas como:

......em construção..............

......em construção..............