HTML - HiperText Markup Language
Tecnologia para Web
Prof.º Enrique Pimentel Leite de Oliveira
[email protected]
HTML
• É uma linguagem de marcação que
utilizamos para criar páginas Web;
• O código-fonte é interpretado pelo
browser (Internet Explorer, Netscape,
etc.);
HTML
• Existem diversos programas de editoração
HTML, que tornaria nosso trabalho muito mais
simples, porém poderíamos nos tornar usuários
desta ferramenta sem entender o que realmente
estamos fazendo;
• Qual quer editor de textos como o bloco de notas
no Windows ou o emacs no Linux, pode ser
utilizado para criação de documentos html.
TAG (ou rótulos)
• São elementos HTML. Quando válidos são
interpretados pelo navegador (browser);
• São identificadas por serem envolvidas pelos
sinais < > ou </ >;
• O formato genérico de uma tag é:
<Nome da tag> Texto </Nome da tag>
Estrutura Básica
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<BODY>
Aqui você coloca os elementos HTML, seus
textos e imagens. Importante, as tags HTML não
são case sensitive.
</BODY>
</HTML>
Comentários
• Não são interpretados pelo browser;
• Sintaxe:
<!-- Comentário -->
• Tudo que for escrito nesta tag não
aparecerá em sua página.
Cor de fundo
•
Para se colocar cor de fundo em uma página é
preciso utilizar o argumento BGCOLOR juntamente
com a tag BODY;
•
Sintaxe:
<BODY BGCOLOR=“Cor”>Elementos</BODY>
– Importante: A cor pode ser um número em RGB
(#FF0000) ou um nome em Inglês (Red).
Cabeçalhos (Headings)
• Utilizado para inserir títulos, ou seja,
identificar tópicos ou seções. A letra é
diferenciada do restante do texto;
• Sintaxe:
<Hn>Texto do Cabeçalho</Hn>
– onde n pode variar de 1 a 6, sendo o maior
cabeçalho H1 e o menor H6.
Parágrafos
• Uma página não reconhece o fim de um
parágrafo pressionando “Enter”. Para
criar parágrafos, deve-se utilizar uma tag.
• Sintaxe:
<P>Texto</P>
Quebra de Linha
• A tag <P> insere uma linha em branco
imediatamente após sua especificação, em
muitas situações precisaremos apenas
“quebrar” a linha, continuando na linha
seguinte.
• Sintaxe:
Texto<BR>Texto
Estilo de Texto
• Negrito
<B>Texto</B>
• Sobrescrito
<SUP>Texto</SUP>
• Itálico
<I>Texto</I>
• Subscrito
<SUB>Texto</SUB>
• Sublinhado
<U>Texto</U>
• Espaçamento
Regular
<TT>Texto</TT>
Formatando Textos
• A tag FONT é utilizada com argumentos como:
– FACE, definirá que tipo de fonte seu texto irá utilizar.
O padrão é Times New Roman;
– COLOR, cor da fonte escolhida que seguirá o padrão
de cores RGB ou nome da cor em inglês;
– SIZE, definirá qual o tamanho da fonte a ser
utilizada, lembrando que deveremos seguir o padrão
de hipertexto e usar fontes de tamanho 1 a 7. O
padrão é 3.
Formatando Textos
• Sintaxe:
<FONT FACE=“Fonte" COLOR=“Cor" SIZE=“Tamanho">
Texto formatado </FONT>
• Exemplo:
<FONT FACE="ARIAL" COLOR="RED" SIZE="3">
Texto formatado </FONT>
Listas
• Lista não-ordenada. Sintaxe:
<UL>
<LI>Texto do item</LI>
<LI>Texto do item</LI>
</UL>
• Lista ordenada. Sintaxe:
<OL>
<LI>Texto do item</LI>
<LI>Texto do item</LI>
</OL>
Alinhamento centralizado
• Centraliza um texto, uma imagem ou um
elemento da página;
• Sintaxe:
<CENTER>Essa frase está centralizada na página</CENTER>
Linha Horizontal
• São utilizadas para dar destaque a títulos ou para
gerar a sensação de quebra entre um item de
informação e outro;
<HR>
ou
<HR SIZE=8 WIDTH=70%>
• WIDTH é a porcentagem da largura da janela do
browser;
• SIZE número de pixels da espessura.
Âncoras
• É um ponto de referência da página que
será acessado por um link;
• Sintaxe para criar uma âncora:
<A NAME=“#nomedaâncora”>Texto para linkar</A>
• Sintaxe para criar um link para a âncora:
<A HREF=“#nomedaâncora”>Texto usado como link</A>
Links
• Fazer uma ligação entre um texto e uma página;
• Sintaxe:
<A HREF=“http://endereço”>Texto na página com link</A>
• Exemplo:
<A HREF=“http://www.aes.edu.br”>AES</A>
Imagens
• Sintaxe para inserir uma imagem na posição
atual:
<IMG SRC=“Caminho\Imagem.jpg”>
• Textos em relação à imagem:
<IMG ALIGN=“top” SRC=“Caminho\Imagem.jpg”>
<IMG ALIGN=“middle” SRC=“Caminho\Imagem.jpg”>
<IMG ALIGN=“bottom” SRC=“Caminho\Imagem.jpg”>
Imagens clicáveis
• Sintaxe:
<A HREF=“http://endereço”><IMG SRC=
“Caminho\Imagem.jpg”></A>
Imagens como plano de fundo
• Para se colocar uma imagem como plano de
fundo é preciso utilizar o argumento
BACKGROUND juntamente com a tag
BODY;
• Sintaxe:
<BODY BACKGROUND=“Caminho\Imagem.gif”> Elementos</BODY>
Tabelas
• Para inserir uma tabela:
<TABLE>Elementos</TABLE>
• Para inserir uma linha:
<TR>Elementos</TR>
• Para inserir uma célula (ou coluna):
<TD>Texto da célula</TD>
Tabelas
• Exemplo:
<TABLE BORDER=2>
<TR>
<TD>Linha1Coluna1</TD>
<TD>Linha1Coluna2</TD>
</TR>
<TR>
<TD>Linha2Coluna1</TD>
<TD>Linha2Coluna2</TD>
<TR>
</TABLE>
Formulários HTML
• Elemento form
– Atributo method
• Especifica como os dados do formulário são enviados para o Web server
• method = “post”
– Adiciona os dados do formulário na requisição do navegador
• method = “get”
– Adicona os dados do formulário diretamente no final da URL
– Atributo action
• Especifica a URL que receberá a requisição
– input
• Especifica os dados que serão fornecidos a URL contida no atributo action
Formulários HTML
• Elemento textarea
– Atributo rows
• Define o número de linhas
– Atributo cols
• Define o número de colunas
– Input “password”
• Insere uma caixa de texto para receber senhas
• Elemento checkbox
– Permite que usuários escolham um conjunto de opções
• Elemento select
– Insere um drop-down list
Formulários HTML
• Elemento select
– Insere um drop-down list
• Elemento option
– Adiciona itens ao the drop-down list
– Atributo selected
• Especifica qual será o item será exibido como
selecionado
Elementos meta
• Especifica informações sobre um documento
– Atributo name
• Identifica o tipo de elemento meta
• “keywords” ( name = “keywords” )
– Fornece uma lista de palavras que descrevem a página
(utilizadas por sistemas de busca)
• “description” ( name = “description” )
– Fornece a descrição de uma site
– Atributo content
• Fornece informações para um sistema de busca
catalogar as páginas
– <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
Bibliografia
• RAMALHO, José Antônio Alves. Iniciando
em HTML. São Paulo: Makron Books,
1996.
• W3C - HTML 4.01 Specification:
http://www.w3.org/TR/1999/REC-html40119991224/cover.html#minitoc