LINGUAGEM DE PROGRAMAÇÃO HTML
COMPONENTES:
ROBSON
EDMILSON
LINGUAGEM DE PROGRAMAÇÃO HTML
•
O HTML (Hiper Text Mark-up Language) é uma linguagem de programação
hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos
que definem o tipo de letra, qual o tamanho , cor ,espaçamento , e vários
outros aspectos.
•
Sendo uma das primeiras linguagens web criadas , não sendo porém a
única, porém ela prevalece.
LINGUAGEM DE PROGRAMAÇÃO HTML
TAGS
•
São rótulos usados para informar ao navegador como deve ser
apresentado o web site.
•
Existem dois tipos de tags – tags de abertura : <comando> e tags de
fechamento </comando>.
•
Tudo que estiver contido entre uma tag de abertura e uma tag de
fechamento será processado segundo o comando contido na tag.
LINGUAGEM DE PROGRAMAÇÃO HTML
•
Mas como toda regra tem sua exceção, no HTML a exceção é que em
algumas tags a abertura e fechamento se dá na mesma tag. São tags de
comandos isolados. Exemplo: um pulo de linha é conseguido com a tag
<br/>.
LINGUAGEM DE PROGRAMAÇÃO HTML
EXEMPLO TAGS
•
<b> informa ao navegador que todo o texto colocado entre si deve ser
mostrado em negrito</b>.(abr. bold= negrito).
LINGUAGEM DE PROGRAMAÇÃO HTML
•
<h1><h2><h3><h4><h5><h6> informa ao navegador que se trato de um
cabeçalho . O cabeçalho de <h1>primeiro nível é aquele apresentado com
o maior tamanho do texto, <h2> o cabeçalho de segundo nível é
apresentado com o tamanho do texto menor, O cabeçalho <h6> sexto nível
é apresentado com o menor tamanho do texto.
LINGUAGEM DE PROGRAMAÇÃO HTML
Exemplo de uma HTML
•
<HTML>
•
<HEAD>
•
<TITLE>
•
</TITLE>
•
</HEAD>
•
<BODY>
•
</BODY>
•
</HTML>
LINGUAGEM DE PROGRAMAÇÃO HTML
TÍTULO DA JANELA WEB
•
TITLE: define um título, que é mostrado no alto da janela do navegador.
•
Esse título é referenciado em buscas
ao documento.
pela rede, dando uma identidade
LINGUAGEM DE PROGRAMAÇÃO HTML
TAG BODY
•
Tudo que estiver contido em BODY será mostrado na janela principal do
browser , sendo apresentado ao leitor.
•
A seção BODY, pode conter cabeçalhos , parágrafos , listas, tabelas, links
para outros documentos, imagens, formulários entre outros.
LINGUAGEM DE PROGRAMAÇÃO HTML
Através de atributos , podemos definir cores, links e para o fundo das
páginas , bem como uma imagem de fundo. Onde:
BGCOLOR: cor de fundo.
TEXT: cor dos textos (padrão : preto).
LINK: cor dos links.(padrão : azul).
LINGUAGEM DE PROGRAMAÇÃO HTML
•
ALINK: cor dos links , quando acionados.( padrão: vermelho).
•
VLINK: cor dos links, quando visitados. (padrão: azul escuro ou roxo).
Seus valores são dados em hexadecimal , equivalentes a cores no padrão
RGB(Red, Green e Blue).
•
BACKGROUND: Indica o URL da imagem a ser replicada no fundo da
página, como uma marca d’água.
LINGUAGEM DE PROGRAMAÇÃO HTML
CABEÇALHO
•
Há seis níveis de cabeçalho em HTML, de <H1> a <H6>.
•
Os cabeçalhos têm atributos de alinhamentos :
•
ALIGN=CENTER: alinhamento centralizado.
•
ALIGN=RIGHT: alinhamento à direita.
•
ALIGN=LEFT: alinhamento à esquerda.
LINGUAGEM DE PROGRAMAÇÃO HTML
Quebra de Linhas:
Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é
necessário quando queremos uma quebra de linha em determinado ponto,
pois os browsers já quebram as linhas automaticamente para apresentar
os textos.
LINGUAGEM DE PROGRAMAÇÃO HTML
Parágrafo:
P: Para separar blocos de texto, usamos o elemento <p>.
Tem atributo de alinhamento como os cabeçalhos:
<P ALIGN=CENTER> : parágrafo com alinhamento centralizado.
<P ALIGN=LEFT>: parágrafo com alinhamento à esquerda.
<P ALIGN=RIGHT>: parágrafo com alinhamento à direita.
LINGUAGEM DE PROGRAMAÇÃO HTML
FORMATAÇÕES DE TEXTO
PRE: Apresenta o texto na mesma maneira em que foi digitado, mantendo
quebras de linhas de linhas e tabulações.
BLOCKQUOTE: É usado para citações longas.
ADDRESS:
Usado para formatar endereços E-mail
autores de documentos.
e referências
a
LINGUAGEM DE PROGRAMAÇÃO HTML
CITE: para títulos de livros, filmes, e citações curtas.
CODE: Para indicar trechos de códigos de programas.
DFN: Indica a definição de uma palavra.
EM: Ênfase, normalmente apresentado em itálico.
KBD: Indica uma entrada via teclado.
SAMP: Indica uma sequência de caracteres, por exemplo uma mensagem
de erro ou um resultado.
STRONG: Forte ênfase, mostrado normalmente em negrito.
VAR: Indica variáveis, ou valores que o usuário deverá escrever.
LINGUAGEM DE PROGRAMAÇÃO HTML
B: Quando disponível no navegador , é mostrado em negrito.
I: Itálico, em alguns casos mostrado inclinado.
TT: Fonte de espaçamento fixo . (Igual as antigas máquinas de escrever).
U: Sublinhado.
STRIKE: Frase riscada.
LINGUAGEM DE PROGRAMAÇÃO HTML
BIG: Fonte um pouco maior.
SMALL: Fonte um pouco menor.
SUB: Frase em estilo indice.
SUP: Frase em estilo expoente.
LINGUAGEM DE PROGRAMAÇÃO HTML
As cores são introduzidas através do elemento FONT , usando o sistema
RGB(RED, GREEN e BLUE).
FONT COLOR: Um trecho de texto pode ter uma cor diferente , feita
através dos atributos de BODY(EX: FONT COLOR=YELLOW).
LINGUAGEM DE PROGRAMAÇÃO HTML
Imagem: Elemento IMG insere imagens que são apresentadas junto com
os textos. Um atributo deve estar presente.
IMG SRC= “URL_imagem”: Onde URL é o endereço onde está a sua
imagem que se quer inserir, não esquecendo que todas as imagens
inseridas tem que colocar suas extensões.
LINGUAGEM DE PROGRAMAÇÃO HTML
CARACTERÍSTICAS
Pode ser criado em qualquer editor de texto.
Existem editores específicos para várias plataformas.
Documentos HTML são arquivos escritos em ASCII.
LINGUAGEM DE PROGRAMAÇÃO HTML
•
•
•
•
Bibliografia
Infoescola - INFORMÁTICA /HTML
Tutorial - HTML.NET
Tutorial HTML DO ICMC- USP.