Embed Size (px)
Citation preview
HTML - HiperText Markup LanguageTecnologia para Web
Prof.º Enrique Pimentel Leite de [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>• Itálico
<I>Texto</I>• Sublinhado
<U>Texto</U>
• Sobrescrito
<SUP>Texto</SUP>• Subscrito
<SUB>Texto</SUB>• 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-html401-19991224/cover.html#minitoc
