HTML. HyperText Markup Language

Tamanho: px

Começar a partir da página:

Download "HTML. HyperText Markup Language"

Helena Bardini Lagos
7 Há anos
Visualizações:

1 HTML HyperText Markup Language

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

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

A última linha do documento será a tag </HTML>.

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 o fim pela tag </BODY>.

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. Assim, um documento típico seria codificado da seguinte maneira:

7 Exemplo: <HTML> <HEAD> <TITLE>Meu primeiro documento HTML</TITLE> </HEAD> <BODY> Textos e mais textos, imagens, tabelas etc. </BODY> </HTML>

8 Tags Principais Tags HTML

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> </BODY> </HTML> <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>

de cabeçalho</h2> <H3> nível 3 de cabeçalho</h3> <H4> nível 4 de

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

12 Exemplo: <HTML> <HEAD><TITLE>Titulo da pagina</title> </HEAD> <BODY> </BODY> </HTML> <HR>

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: <HTML> <HEAD> <TITLE> Título da pagina </TITLE> </HEAD> <BODY> </BODY> </HTML> <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 <BR>...</BR>.

16 Exemplo: <HTML> <HEAD><TITLE>Titulo da pagina</title> </HEAD> <BODY> </BODY> </HTML> <P> Quebra <BR> Linha </P>

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. </BODY> </HTML>

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

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 (blue, black, white etc..).

21 Caracteres

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

23 Caracteres de Escape Entidade < > & Caracter < > &

24 Listas

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

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

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

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

29 Listas Endentadas A quantidade de listas é infinita, desde que envolva cada nível de endentamento com <OL></OL> ou <UL></UL>.

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

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: <HTML> <HEAD> <TITLE> Título da Pagina </TITLE></HEAD> <BODY> <A HREF=" da UNESP</A> </BODY> </HTML>

33 Mailto Existe também o mailto, o link abrirá uma janela especial para que se possa enviar um para o endereço específico. <a href="mailto:xyz@xyz.com.br"> Fale Conosco </a>

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

35 Tabelas

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

37 Tabelas <TR></TR> Define uma coluna <TD></TD> Define uma Linha

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: <table width="300 > Para a posição da tabela no documento: <table align="center Left Right Justify">

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

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

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 ALINK=#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. ALINK: é a cor do link ativo, selecionado.

44 Códigos de algumas cores: Black (Preto) - # 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

45 Formulários

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 navegação entre páginas e Sites na Web.

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) POST: envia os dados de forma oculta

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

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 dados serão enviados.

50 Atributos de FORM Coletando informações <input type= name= values= size= > (tipo de dado) (nome do campo) (atribui um valor inicial para o campo) (tamanho do campo) maxlenght= (nº máximo de caracteres aceito)

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

52 Atributos de FORM Caixa de texto com múltiplas linhas <textarea name=""></textarea>

53 Atributos de FORM Combo de seleção <select name="select"> <option value="valor">texto</option> </select>

54 Ferramentas Existem programas sofisticados que "constroem" todo o código HTML de forma simples e rápida. Microsoft Front Page Macromedia DreamWeaver.

Documentos relacionados

gedit Bloco de notas

GOVERNO DA REPÚBLICA PORTUGUESA gedit Bloco de notas Sistema Operativo Linux Tecnologias de Informação e Comunicação Professor: Joaquim Frias Instruções básicas do HTML TAGS TAGS Uma tag é uma instrução