View
95
Download
1
Category
Preview:
Citation preview
1
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Cores e Padrões de Fundo
18
18
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
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@servidor.com”>webmaster</A></ADDRESS>
20
20
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
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
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
Frames - Exemplo
Arquivo de definição:
<HTML><FRAMESET COLS=30%, * ><FRAME NAME=“menu” SRC=“indice.htm”><FRAME NAME=“texto”></FRAMESET>
</HTML>
24
24
Frames - Exemplo
Arquivo de índice:<HTML><HEAD><TITLE>Menu Principal</TITLE></HEAD>
<BODY>. . .</BODY></HTML>
25
25
Recommended