HTML. HyperText Markup Language

(1)

HTML

(2)

HTML

Linguagem de Marcadores de Hipertexto

Baseada em tags

Diferentemente de outras linguagens

(3)

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

(4)

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

(5)

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.

(6)

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.

(7)

Exemplo:

<TITLE>Meu primeiro documento HTML</TITLE> </HEAD>

<BODY>

Textos e mais textos, imagens, tabelas etc. </BODY>

(8)

Tags

(9)

<HN></HN>

A tag de cabeçalho é definida pelo par

<Hn>...</Hn>

onde n representa

seu nível, que varia de 1 até 6.

(10)

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>

(11)

<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

(12)

Exemplo:

<HTML> <HEAD><TITLE>Titulo da pagina</TITLE> </HEAD> <BODY> <HR> </BODY>

(13)

<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.

(14)

Exemplo:

<TITLE> Título da pagina </TITLE> </HEAD>

<BODY>

<P> Este é o primeiro parágrafo </P> <P> Este é o segundo parágrafo </P>

(15)

<BR>

Para apenas quebrar a linha, você

deve inserir a tag

<BR>

. Esta tag

também não precisa ser fechada, isto

é, não precisamos utilizar um par

(16)

Exemplo:

<HTML> <HEAD><TITLE>Titulo da pagina</TITLE> </HEAD> <BODY> <P> Quebra <BR> Linha </P> </BODY>

(17)

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

(18)

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.

(19)

<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

(20)

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

(21)

(22)

Caracteres-entidades

Caractere Entidade ó &oacute í &iacute é &eacute ç &ccedil ã &atilde à &agrave â &acirc á &aacute Caractere Entidade Ó &Oacute Í &Iacute É &Eacute Ç &Ccedil Ã &Atilde À &Agrave Â &Acirc Á &Aacute

(23)

Caracteres de Escape

§ § © © ® ® & & > > < < Caracter Entidade

(24)

(25)

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>.

(26)

Listas Ordenadas

<TITLE> Título da Pagina </TITLE> </HEAD> <BODY> <OL> <LI> item 1 <LI> item 2 <LI> item 3 </OL>

(27)

Listas Não Ordenadas

Uma lista não ordenada deve ser envolvida pelo par <UL> </UL>.

(28)

Listas Não Ordenadas

<TITLE> Título da Pagina </TITLE> </HEAD> <BODY> <UL> <LI> item 1 <LI> item 2 <LI> item 3 </UL>

(29)

Listas Endentadas

A quantidade de listas é infinita, desde

que

envolva

cada

nível

de

endentamento com

<OL></OL>

ou

(30)

Exemplo:

<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

(31)

Links de Hipertexto

A tag utilizada para criar links é <A

HREF>.</A> :

<A HREF=”URL do link”>Texto que

vai servir como link</A>

(32)

Exemplo:

<TITLE> Título da Pagina </TITLE></HEAD> <BODY>

<A HREF="http://www.unesp.br">Site da UNESP</A>

</BODY> </HTML>

(33)

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

(34)

Imagem

Para colocar imagens dentro da pagina pode

utilizar a tag:

Pode usar uma imagem para servir de link.

(35)

(36)

Tabelas

O conceito é o mesmo conhecido

usualmente.

Tabela <table>...</table>

Todas as demais marcas referentes a tabelas

(37)

Tabelas

<TR></TR>

Define uma coluna

<TD></TD>

(38)

Exemplo:

… <table> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table>

(39)

Observações:

Para indicar a largura da tabela. Usa-se

como medida o número de pixels ou a porcentagem da largura do documento:

Para a posição da tabela no documento:

(40)

Observações:

(cont.)

Especifica uma imagem que será

utilizada como “fundo" da tabela:

Especifica uma cor de fundo para a

(41)

Observações:

(cont.)

Especifica a largura da borda

Especifica a largura da linha

Especifica a distância entre as linhas

(42)

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

(43)

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.

(44)

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

(45)

(46)

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

(47)

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)

(48)

Formulários

(cont.)

<form

method="POST“ action=“endereço"> <input type="text" name="T1" size="20">

(49)

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

(50)

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)

(51)

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">