Técnicas de Programação para Internet 1

25
1 Técnicas de Programação para Internet 1

Transcript of Técnicas de Programação para Internet 1

Page 1: Técnicas de Programação para Internet 1

1

Técnicas de Programação para Internet 1

Page 2: Técnicas de Programação para Internet 1

Princípios de HTMLPágina Web:

– É um documento composto de texto e códigos especiais, chamadostags, que especificam a formatação do texto.

– Estes documentos também podem conter imagens, sons, vídeo,código de programação e links para outros documentos.

– As páginas são codificadas na linguagem HTML, usando-se umeditor de texto comum ou um programa específico para a produçãode páginas.

– As páginas são interpretadas por um browser ou navegador, sendoo código HTML independente de plataforma de hardware ousoftware.

Page 3: Técnicas de Programação para Internet 1

Princípios de HTMLO HTML é a principal linguagem de programação utilizada para a criação de uma

Pagina web.

A linguagem HTML não é COMPILADA, é LINKADA ou melhor dizendo ela é

interpretada por um BROWSER.

Por que a linguagem HTML ela não é compilada?

Porque a linguagem HTML é como se fosse a receita de um bolo, e não o próprio bolo.

Os ingredientes e a capacidade de processamento desses ingredientes, cabe ao

BROWSER mas quais ingredientes utilizar e como usar cabe a RECEITA, ou seja o

HTML, e o bolo é o SITE.

Por isso uma página Web pode ser exibida com algumas diferenças entre os diversos

BROWSERS do mercado. EX.: Firefox, Internet Explorer, Opera, Chrome etc.

3

3

Page 4: Técnicas de Programação para Internet 1

A Linguagem HTML-HTML = Hypertext Markup Language

-A HTML não é uma linguagem de programação, mas sim umalinguagem especializada para a formatação de texto.

-O texto produzido fica entre símbolos especiais, denominadosTags:

-Uma tag tem o seguinte formato:

<nome da tag>Texto de Exemplo</nome da tag>

-A grande maioria das tags ocorre aos pares, delimitando o textoa ser formatado, podendo ocorrer “aninhamento” de tags.

4

4

Page 5: Técnicas de Programação para Internet 1

Estrutura de uma página:Uma página HTML tem a seguinte estrutura básica:

<html><head>

<title>Título da página</title></head>

<body><p>Este é o primeiro parágrafo do texto.</p><p>Este é o segundo parágrafo.</p>

</body></html>

Exemplo disponível

5

5

Page 6: Técnicas de Programação para Internet 1

CabeçalhosOs cabeçalhos servem para marcar visualmente o início de umtópico no texto.

Podem apresentar seis tamanhos: H1, H2, H3, . . . , H6

Exemplo:

. . .

<h1>Cabeçalho de nível 1</h1><p>Esta é a seção principal do documento.<h2>Cabeçalho de nível 2</h2><p>Esta é uma sub-seção.

. . .

Exemplo disponível

6

6

Page 7: Técnicas de Programação para Internet 1

ParágrafosEspaços e quebras de linha não tem significado em HTML. Aoserem interpretados, são substituídos por um espaço simples.

Portanto, é preciso forçar um início de parágrafo, usando a tag:

<P>

Para quebras de linha, sem acrescentar uma linha em branco,usa-se:

<BR>

Para inserir uma linha horizontal:

<HR>

Exemplo disponível

7

7

Page 8: Técnicas de Programação para Internet 1

Formatação de CaracteresOs comandos de formatação de texto são todos do tipoliga/desliga. Ou seja:

<ativa formatação> texto formatado</desliga formatação>

Os principais são (formatação física):Negrito <B>texto</B> (bold)Itálico <I>texto</I>Sublinhado <U>texto</U> (underline)Sobrescrito <SUP>texto</SUP> (superscript)Subscrito <SUB>texto</SUB>

Estes comandos de formatação estão gradualmente sendo extintos e substituídos pela linguagem CSS, que é anexada ao código HTML

Exemplo disponível

8

8

Page 9: Técnicas de Programação para Internet 1

Formatação de CaracteresTambém é possível usar formatação LÓGICA para o texto:

Ênfase <EM>...</EM> (itálico) Mais ênfase <STRONG>...</STRONG> (negrito) Tamanho grande <BIG>...</BIG> Tamanho pequeno <SMALL>...</SMALL> Código <CODE>...<CODE>

É desaconselhável o uso de formatação lógica, pois quem vai definir a forma do itálico, negrito, grande, pequeno é o BROWSER, portando dessa forma não saberemos com certeza como a pagina será exibida em BROWSERS diferentes.

Exceto <CODE> que é interpretado da mesma forma em todos BROWSERS.

Exemplo disponível

9

9

Page 10: Técnicas de Programação para Internet 1

Formatação de CaracteresÉ possível fazer com que o texto apareça na tela exatamentecomo foi digitado NO BLOCO DE NOTAS, ou no programa que está sendo utilizado para a criação do HTML (texto pré-formatado). A tag é:

<PRE> . . . </PRE>

Também se pode alterar o tipo da fonte:

<FONT SIZE=n FACE=nome COLOR=cor>. . .

</FONT>

A Tag <FONT> possui atributos que são acrescentados na primeira tag de abertura.

Exemplo disponível

10

Page 11: Técnicas de Programação para Internet 1

ListasListas:

– Não-ordenadas– Ordenadas– de Definição

Listas Não-ordenadas (Unnumbered lists)

<H2>Exemplo de lista não-ordenada</H2><UL>

<LI>Primeiro item<LI>Segundo item

</UL>

11

11

Page 12: Técnicas de Programação para Internet 1

ListasListas Ordenadas (Ordered lists)

<H3>Exemplo de lista ordenada</H3><OL>

<LI>Item 1<LI>Item 2<LI>Item 3

</OL>

As listas ordenadas se diferenciam das não-ordenadas pela numeração de o BROWSER da aos itens.

1.2.3.etc. 12

12

Page 13: Técnicas de Programação para Internet 1

ListasListas Aninhadas

<B>Listas aninhadas</B><UL>

<LI>Item 1<LI>Item 2

<UL><LI>Item 2.1<LI>Item 2.2

</UL>

<LI>Item 3

</UL>

• Item 1• Item 2

• Item 2.1• Item 2.2

• Item 3

Exemplo disponível

13

13

Page 14: Técnicas de Programação para Internet 1

LinksLinks para a mesma página

– Para estabelecer um link para a mesma página, é preciso inicialmente criar uma âncora, ou seja, um ponto de referência que será apontado pelo link. A sintaxe é a seguinte:

<A NAME=“#Nome da âncora”>Texto em destaque</A>Ex.: <A NAME=“#primeiroparagrafo”> Parágrafo importante</A>

– Para criar o link, usa-se a tag HREF para especificar o nome daâncora que se quer acessar. Assim:

<A HREF=“#Nome da âncora”>Texto usado como hipertexto</A>Ex.: <A NAME=“#primeiro paragrafo”> Clique aqui e vá para o

PARAGRAFO IMPORTANTE</A> 14

14

Page 15: Técnicas de Programação para Internet 1

Links para outras páginasQuando a página está na mesmo servidor, mas em outroarquivo:

<A HREF=“intro.htm”>Introdução</A>

<A HREF=“conceitos.htm#parte2”>Conceitos Básicos</A>

<A HREF=“biblio/refer.htm”>Referências</A>

Quando a página está em outro servidor (na Internet):

<A HREF=“http://www.deinf.ufma.br/~espec”>Curso deEspecialização em Análise de Sistemas</A>

<A HREF=“http://www.deinf.ufma.br/prof/prof.htm”>Professores</A> 15

15

Page 16: Técnicas de Programação para Internet 1

ImagensFormato: geralmente GIF, JPEG ou PNG.

A sintaxe básica para incluir uma imagem na página é:<IMG SRC=“arquivo.gif”>

Pode-se também especificar o alinhamento:<IMG ALiGN=“top/middle/BOTTOM” SRC=“paisagem.jpg”>

É possível determinar a altura e largura da imagem:<IMG SRC=“arquivo.gif” HEIGHT=100 WIDTH=165>

Uma imagem também pode funcionar como um link:<A HREF=“livro-bd.htm”> <IMG SRC=“korth.gif”> </A>

Exemplo disponível

16

16

Page 17: Técnicas de Programação para Internet 1

Cores e Padrões de FundoÉ possível alterar a forma padrão com que os browsers mostramo texto e seus links, usando alguns atributos da tag <BODY>.

As cores são representadas por um código RGB (red/green/blue), de seis dígitos, em base hexadecimal.

Exemplo:<BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFFVLINK=#CC0000>

Também é possível especificar uma imagem como fundo detela:<BODY BACKGROUND=“marmore.gif”>

17

17

Page 18: Técnicas de Programação para Internet 1

Cores e Padrões de Fundo

18

18

Page 19: Técnicas de Programação para Internet 1

Cores e Padrões de FundoÉ possível alterar a forma padrão com que os browsers mostramo texto e seus links, usando alguns atributos da tag <BODY>.

As cores são representadas por um código RGB (red/green/blue), de seis dígitos, em base hexadecimal.

Exemplo:<BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFFVLINK=#CC0000>

Também é possível especificar uma imagem como fundo detela:<BODY BACKGROUND=“marmore.gif”>

19

19

Page 20: Técnicas de Programação para Internet 1

Endereços e Rodapé de página

Geralmente, o final de uma página é utilizado para identificar seu autor, informar a data de criação e para fornecer algum tipo de endereço de contato.

Para este fim, existe a tag <ADDRESS> :<ADDRESS>Criada por<A HREF=“mailto:[email protected]”>webmaster</A></ADDRESS>

20

20

Page 21: Técnicas de Programação para Internet 1

TabelasAs tabelas servem para a apresentação de informação de forma tabular, porém são também um poderoso recurso para a definição do layout de uma página HTML.Principais tags:

<TABLE> Inicia a definição de uma tabela <CAPTION> Cria uma legenda para a tabela <TR> (table row) Cria uma linha da tabela (uma tag deste

tipo para cada linha) <TD> (table data) Define o conteúdo de uma célula da

tabela <TH> (table header) Como <TD>, só que o texto é exibido

em negrito e centralizado 21

21

Page 22: Técnicas de Programação para Internet 1

TabelasAlguns atributos:

ALIGN Define o alinhamento horizontal da célulaVALIGN Define o alinhamento vertical da célulaCOLSPAN Indica quantas colunas da tabela a célula deve

ocuparROWSPAN Indica quantas linhas a célula deve ocuparBORDER Usada em <TABLE>, define a largura da borda da

tabela. O valor “0” indica ausência de borda.WIDTH Define a largura da tabela (percentual ou absoluta)

22

22

Page 23: Técnicas de Programação para Internet 1

FramesOs frames (molduras) permitem apresentar mais de uma página HTML na tela, simultaneamente.

É necessário, inicialmente, criar um documento especial quecontém as definições de todas as janelas:<FRAMESET COLS=tamanho FRAMEBORDER=1/0FRAMESPACING=espaçamentoROWS=tamanho><FRAME NAME=nome SCROLLING=yes/no NORESIZESRC=endereço>. . .</FRAMESET>

23

23

Page 24: Técnicas de Programação para Internet 1

Frames - Exemplo

Arquivo de definição:

<HTML><FRAMESET COLS=30%, * ><FRAME NAME=“menu” SRC=“indice.htm”><FRAME NAME=“texto”></FRAMESET>

</HTML>

24

24

Page 25: Técnicas de Programação para Internet 1

Frames - Exemplo

Arquivo de índice:<HTML><HEAD><TITLE>Menu Principal</TITLE></HEAD>

<BODY>. . .</BODY></HTML>

25

25