View
218
Download
0
Category
Preview:
Citation preview
HTML
HyperText Markup Language
HTML
� Linguagem de Marcadores de Hipertexto
� Baseada em tags
� Diferentemente de outras linguagens como C e Pascal, a linguagem HTML não é compilada e sim interpretada.
Estrutura Geral
� O documento HTML deve começar com a declaração de si mesmo utilizando a tag<HTML>, colocada na primeira linha do arquivo.
� A última linha do documento será a tag</HTML>. Assim pode-se perceber que toda tag que utiliza a barra “/” sinaliza o fechamento do trecho que está sendo formatado.
Estrutura Geral (cont.)
� Todo documento tem duas divisões:
� O início do cabeçalho é definido pela tag<HEAD> e o fim é definido pela tag </HEAD>.
� O início do corpo é definido pela tag <BODY> e o fim pela tag </BODY>.
Títulos
� No cabeçalho existe uma tag, entre outras, que sempre deverá ser inserida: trata-se da tag que marca o título da página. O título será contido pelo par <TITLE>..</TITLE>.
� PS:O título de um documento não émostrado na página mas os browsers o utilizam para titular a janela de visualização. Nunca se esqueça de colocar um bom título para seus documentos.
Geral
� No corpo é que será visualizada a página propriamente dita, com todo texto, imagens, tabelas e formatações que forem definidas pelo código.
� Assim, um documento típico seria codificado da seguinte maneira:
Exemplo:
<HTML><HEAD><TITLE>Meu primeiro documento HTML</TITLE></HEAD><BODY>
Textos e mais textos, imagens, tabelas etc.</BODY></HTML>
Tags
Principais Tags HTML
<HN></HN>
� A tag de cabeçalho é definida pelo par <Hn>...</Hn> onde n representa seu nível, que varia de 1 até 6.
Exemplo:
<HTML>
<HEAD><TITLE>Titulo da pagina</TITLE>
</HEAD>
<BODY>
<H1> nível 1 de cabeçalho</H1>
<H2> nível 2 de cabeçalho</H2>
<H3> nível 3 de cabeçalho</H3>
<H4> nível 4 de cabeçalho</H4>
<H5> nível 5 de cabeçalho</H5>
<H6> nível 6 de cabeçalho</H6></BODY>
</HTML>
<HR>
� A tag <HR> é usada para inserir uma linha horizontal no local onde foi especificada.
� Esta tag não precisa ser fechada, isto é, não é preciso utilizar um par <HR>.</HR>.
Exemplo:
<HTML>
<HEAD><TITLE>Titulo da pagina</TITLE>
</HEAD>
<BODY>
<HR></BODY>
</HTML>
<P></P>
� A diferença entre um editor de texto normal é que no HTML você tem que forçar os espaçamentos entre cada parágrafo. Você faz isto usando a tag<P> sempre que quiser começar um novo parágrafo.
Exemplo:
<HTML>
<HEAD>
<TITLE> Título da pagina </TITLE>
</HEAD>
<BODY>
<P> Este é o primeiro parágrafo </P>
<P> Este é o segundo parágrafo </P></BODY>
</HTML>
<BR>
� Para apenas quebrar a linha, você deve inserir a tag <BR>. Esta tagtambém não precisa ser fechada, isto é, não precisamos utilizar um par <BR>...</BR>.
Exemplo:
<HTML>
<HEAD><TITLE>Titulo da pagina</TITLE>
</HEAD>
<BODY>
<P> Quebra <BR> Linha </P></BODY>
</HTML>
Formatação de textos
<B>.</B>: texto em negrito.
<I>.</I>: texto em itálico.
<U>.</U>: texto sublinhado.
<SUP>.</SUP>: texto sobrescrito
<SUB>.</SUB>: texto subscrito
Exemplo:
<HTML>
<HEAD><TITLE>Titulo da pagina</TITLE>
</HEAD>
<BODY>
Meu caro surfista,<B> não se esqueça </B> de configurar as fontes de seu <I> navegador </I>,<U> antes </U> de iniciar seu trabalho.
</BODY>
</HTML>
<FONT></FONT>
� Existe a possibilidade de alterar o tamanho, cor e tipo da fonte do texto utilizado.
<FONT SIZE=7 FACE="courier” COLOR=green>
Texto
</FONT>
Características
� SIZE=n - o tamanho da fonte utilizada;
� FACE="name"- permite uma fonte diferente para o texto;
� COLOR = cor do texto. Seu valor pode ser especificado pelo código hexadecimal ou, para algumas cores, seu nome em inglês (blue, black, white etc..).
Caracteres
Caracteres-entidadesCaractereEntidade
üü
óó
íí
éé
çç
ãã
àà
ââ
áá
CaractereEntidade
ÜÜ
ÓÓ
ÍÍ
ÉÉ
ÇÇ
à Ã
ÀÀ
 Â
ÁÁ
Caracteres de Escape
§§
©©
®®
&&
>>
<<
CaracterEntidade
Listas
Listas Ordenadas
� Listas Ordenadas
� O navegador se encarrega de colocar os números que referenciam cada linha.
� O início de uma lista ordenada deve ser marcado pela tag <OL> e o fim pela tag </OL>. Para definir cada item da lista utilize a tag <LI>.
Listas Ordenadas
<HTML><HEAD><TITLE> Título da Pagina </TITLE></HEAD><BODY>
<OL><LI> item 1 <LI> item 2<LI> item 3
</OL></BODY></HTML>
Listas Não Ordenadas
� Uma lista não ordenada deve ser envolvida pelo par <UL> </UL>.
Listas Não Ordenadas
<HTML><HEAD><TITLE> Título da Pagina </TITLE></HEAD><BODY>
<UL><LI> item 1 <LI> item 2<LI> item 3
</UL></BODY></HTML>
Listas Endentadas
� A quantidade de listas é infinita, desde que envolva cada nível de endentamento com <OL></OL> ou <UL></UL>.
Exemplo:<HTML><HEAD>
<TITLE> Título da Pagina </TITLE></HEAD>
<BODY>
<OL>
<LI> Valor 1
<LI> Valor 2
<UL>
<LI> Valor 2.1
<LI> Valor 2.2
</UL>
<LI> Valor 3
</OL></BODY></HTML>
Links de Hipertexto
� A tag utilizada para criar links é <A HREF>.</A> :
<A HREF=”URL do link”>Texto que vai servir como link</A>
Exemplo:
<HTML><HEAD><TITLE> Título da Pagina </TITLE></HEAD><BODY>
<A HREF="http://www.unesp.br">Site da UNESP</A></BODY></HTML>
Mailto
� Existe também o mailto, o link abriráuma janela especial para que se possa enviar um e-mail para o endereço específico.
<a href="mailto:XYZ@XYZ.com.br">
Fale Conosco
</a>
Imagem
� Para colocar imagens dentro da pagina pode utilizar a tag:
<img src="/images/imagem.gif">
� Pode usar uma imagem para servir de link.
<A HREF="documento.htm">
<IMG SRC="imagem.gif">
</A>
Tabelas
Tabelas
� O conceito é o mesmo conhecido usualmente.
Tabela <table>...</table>
� Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluídas entre as tags.
Tabelas
� <TR></TR>
� Define uma coluna
� <TD></TD>
� Define uma Linha
Exemplo:
…<table><tr><td>Texto A</td><td>Texto B</td>
</tr></table>…
Observações:
� Para indicar a largura da tabela. Usa-se como medida o número de pixels ou a porcentagem da largura do documento:
<table width="300“>
� Para a posição da tabela no documento:
<table align="center | Left | Right | Justify">
Observações: (cont.)
� Especifica uma imagem que seráutilizada como “fundo" da tabela:
<table background="imagem.gif">
� Especifica uma cor de fundo para a tabela:
<table border bgcolor="yellow">
Observações: (cont.)
� Especifica a largura da borda
<table border =“1”>
� Especifica a largura da linha
<table cellpadding="5">
� Especifica a distância entre as linhas
<table cellspacing="4“>
Cores e padrões de fundo
� È possível alterar as opções da tag <BODY>, responsável pelas cores da página. A sintaxe da tag<BODY> com relação às cores é a seguinte:
<BODY
BGCOLOR=#xxxxxx
TEXT=#xxxxxx
LINK=#xxxxxx
VLINK=#xxxxxx
ALINK=#xxxxxx
>
Cores (cont.)
� BGCOLOR: cor do background, padrão é cinza.
� TEXT: cor do texto, seu padrão é preto.
� LINK: cor do texto do link, padrão é azul.
� VLINK: cor do link que já foi visitado e o padrão évermelho-púrpura.
� ALINK: é a cor do link ativo, selecionado.
Códigos de algumas cores:
� Black (Preto) - #000000� White (Branco) - #FFFFFF� Blue (Azul) - #0000FF� Yellow (Amarelo) - #FFFF00� Green (Verde) - #00FF00� Cyan (Ciano) - #00FFFF� Red (Vermelho) - #FF0000� Magenta - #FF00FF� Dark green (Verde escuro) - #2F4F2F� Brown (Marrom) - #A62A2A
Formulários
Formulários
� Formulários permitem a interatividade entre o usuário, a pessoa que visualiza as páginas e o Servidor Web.
� Formulários podem ser gerados para a navegação entre páginas e Sites na Web.
Formulários (Métodos)
� Indica como os métodos serão passados pelo script.
� GET: envia os dados através da URL (Uniform Resource Locator)
� POST: envia os dados de forma “oculta”
Formulários (cont.)
<form method="POST“ action=“endereço">
<input type="text" name="T1" size="20">
<input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2">
</form>
Atributos de FORM
� Action: Indica a localização (URL) do script que irá receber e interpretar os dados enviados pelo formulário.
� Method: Indica o formato no qual os dados serão enviados.
Atributos de FORM
� Coletando informações
<input type=“” (tipo de dado)
name=“” (nome do campo)
values=“” (atribui um valor inicial para o campo)
size=“” (tamanho do campo)
maxlenght=“” (nº máximo de caracteres aceito)
>
Atributos de FORM
� Type
<input type="button"><input type="checkbox"><input type="file"><input type="hidden"><input type="image"><input type="password"><input type="radio"><input type="reset"><input type="submit"><input type="text">
Atributos de FORM
� Caixa de texto com múltiplas linhas
<textarea name=""></textarea>
Atributos de FORM
� Combo de seleção
<select name="select"><option value="valor">texto</option>
</select>
Ferramentas
� Existem programas sofisticados que "constroem" todo o código HTML de forma simples e rápida.
� Microsoft Front Page
� Macromedia DreamWeaver.
Recommended