HTML - governancamunicipal.sp.gov.br · Linguagem de Marcadores de Hipertexto Baseada em tags...

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>





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

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

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

<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

ü&uuml

ó&oacute

í&iacute

é&eacute

ç&ccedil

ã&atilde

à&agrave

â&acirc

á&aacute

CaractereEntidade

Ü&Uuml

Ó&Oacute

Í&Iacute

É&Eacute

Ç&Ccedil

Ã &Atilde

À&Agrave

Â &Acirc

Á&Aacute

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


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


<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:[email protected]">

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.

HTML - governancamunicipal.sp.gov.br · Linguagem de Marcadores de Hipertexto Baseada em tags...

Documents

Transcript of HTML - governancamunicipal.sp.gov.br · Linguagem de Marcadores de Hipertexto Baseada em tags...