Vous êtes sur la page 1sur 33

Aplicaes Web

Professor Jlio Csar


Contato: csr49@yahoo.com.br

Aplicaes Web
Aula anterior
Presentation-oriented e Service-oriented;
Executadas em um ambiente distribudo (servidor);
Arquitetura 2 nveis, 3 nveis e N nveis;
Hospedagem de sites e seus tipos;
Provedores;
Registro e domnio;
Conceito de E-business e E-commerce;
Softwares e ferramentas.

Aplicaes Web
Aula anterior
HTML (HyperText Markup Language). Linguagem utilizada
para construo de websites.
Hipertexto um documento eletrnico composto
por pginas e ligaes entre elas (links).
Pode integrar diversos tipos de informao: texto, imagem, som,
vdeo, animao.
Tag significa etiqueta e qualquer cdigo deve estar
compreendidos entre < e >.
Cada Elemento formado por uma etiqueta inicial + texto +
etiqueta final.
Todo valor est relacionado a um atributo e fica localizado na
etiqueta inicial.

Aplicaes Web
Aula anterior...

<html> Define para o navegador que este comando inicia um


documento HTML.
</html> Define para o navegador que este comando termina um
documento HTML.
<body> Define que a partir dessa tag, o texto ser mostrado no
navegador.
</body> Define tag de fechamento do comando para exibir o texto no
navegador.
<i> Define que o texto ficar em itlico.
</i> Define tag de fechamento do comando para mostrar o texto em
itlico.
<b> Define que o texto ficar em negrito.
</b> Define tag de fechamento do comando para mostrar o texto em
negrito.

Aplicaes Web
Aula anterior...
<p> Define incio de pargrafo.
</p> Define tag de fechamento do comando de pargrafo para
quele texto.
<img src=nome_da_imagem.extenso>.
Ex: <img src=imagem3.jpg>

<font color=red> Define incio de comando para inserir cor de


texto vermelho, onde o atributo color e o valor red.
</font> Define tag de fechamento do comando anterior.
<br> Define quebra de linha. No possui tag de fechamento.
<hr> Define uma linha horizontal. No possui tag de
fechamento.

Aplicaes Web
Na aula de hoje...
Outras tags bsicas:
Ttulos : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, onde h1 o ttulo
maior e h6 o ttulo menor. Possui tag de fechamento.
Comentrio : <!-- -->. Define um comentrio. O texto no ficar
visvel para o navegador.
Ex: <!-- Exemplo de comentrio. Esse texto no aparecer no
navegador. -->

Aplicaes Web
Tags de formatao
Alm de <b> e <i>, temos:
<big> Define texto grande
<small> Define texto pequeno
<em> Define texto enfatizado
<strong> Define texto forte
<sub> Define texto subescrito
<sup> Define texto superescrito
<ins> Define texto inserido
<del> Define texto cancelado

Obs : <s>, <strike> e <u> no so mais usadas.

Aplicaes Web
Links : Usa-se a tag <a> (ncora) para criar um vnculo
(link) com outro documento.
Ex: <a href="url">Texto a ser exibido</a>

A tag <a> usada para criar uma ncora de onde vincular.


O atributo href usado para onde enderear o documento.

Ex: <a href=www.globo.com> Entre na globo.com ! </a>

O atributo Alvo (Target)


Define onde o documento ser aberto.
Ex: <a href=www.globo.com target=_blank> Entre na globo.com
! </a>
Nesse exemplo far com que o site da Globo seja exibida em nova
janela ( _blank )

Aplicaes Web
Atributo Nome ( name )
Usado para criar uma ncora nomeada. Usamos ncoras nomeadas
para criar vnculos que saltam diretamente para uma sesso
especfica em uma pgina. Evita arrastar a barra de rolagem at o
texto onde est procurando.
Ex: <a name=rotulo> Texto a ser exibido </a>
Texto localizado na prpria pgina :
<a href=#C4>Captulo 4...................................... 10</a>
<a name=C4><h3>Captulo 4</h3></a>

Texto localizado em outra pgina :


<a href=pagina3.html#C4>Para ler mais, v para o Captulo 4,
localizada na pgina 3.</a>
<a name=C4><h3><Captulo 4</h3></a>

Aplicaes Web
Molduras (Frames)
Com molduras, voc pode exibir mais de um documento HTML na
mesma janela do navegador. Cada documento HTML chamado de
moldura, e cada moldura independente das outras.
As desvantagens de usar molduras so:
O desenvolvedor Web deve vigiar mais documentos HTML
difcil imprimir a pgina inteira

<frame src=frame_a.html>

Aplicaes Web
Molduras (Frames)
Frameset : Define como dividir a janela em molduras.
Cada conjunto de molduras define um conjunto de linhas/colunas.
Os valores das linhas/colunas indicam a quantidade de rea da tela
que cada linha/coluna ir ocupar.
Ex: <frameset cols=25%, 75%>
<frame src=frame_a.html>
<frame src=frame_b.html>
</frameset>

Noframes : Define uma sesso noframe para navegadores que no


dispes de molduras.
Iframe : Define uma subjanela (moldura) inline.

Aplicaes Web
Tabelas (Tables)
Ex: <table>
<tr>
<td>linha 1, coluna 1</td>
<td>linha 1, coluna 2</td>
</tr>
<tr>
<td>linha 2, coluna 1</td>
<td>linha 2, coluna 2</td>
</tr>
</table>

Aplicaes Web
Tabelas : Atributo Border (Borda)

Se no for especificada uma borda, a tabela ser exibida sem qualquer


borda.
Insira apenas o atributo border dentro da tag <table>.
Ex: <table border=1>
<tr>
<td>linha 1, coluna 1</td>
<td>linha 1, coluna 2</td>
</tr>
<tr>
<td>linha 2, coluna 1</td>
<td>linha 2, coluna 2</td>
</tr>
</table>

Aplicaes Web

Tabelas : Cabealho

Identificados pela tag <th>.


As tags podem ser inseridas uma aps a outra. Cada linha corresponder a uma coluna.
Ex: <table border=1>
<tr>
<th>Cabealho</th>
<th>Outro Cabealho</th>
</tr>
<tr>
<td>linha 1, coluna 1</td>
<td>linha 1, coluna 2</td>
</tr>
<tr>
<td>linha 2, coluna 1</td>
<td>linha 2, coluna 2</td>
</tr>
</table>

Aplicaes Web
Tabelas : Cabealho

Identificados pela tag <th>.


Ou podem ser inseridas a cada linha, fazendo com que o cabealho
fique na vertical.
Ex: <table border=1>

<tr>
<th>Cabealho</th>
<td>linha 1, coluna 1</td>
</tr>
<tr>

<th>Outro Cabealho</th>
<td>linha 2, coluna 1</td>
</tr>
</table>

Aplicaes Web
Tabelas : Ttulo (Caption)
Identificados pela tag <caption> e </caption>.
Ex: <table border=3>
<caption>Minha tabela</caption>

<tr>
<td>linha 1, coluna 1</td>
</tr>
<tr>
<td>linha 2, coluna 1</td>
</tr>
</table>

Aplicaes Web
Tabelas : Colspan (Espaamento da coluna)

Identificados pelo atributo colspan.


Ex: <table border=3>

<tr>
<th>Nome</th>
<th colspan=2>Telefone</th>
</tr>

<tr>
<td>Jlio Csar</td>
<td>99128596</td>
<td>81153621</td>
</tr>
</table>

Aplicaes Web
Tabelas : Rowspan (Espaamento de linha)

Identificados pelo atributo rowspan.


Ex: <table border=3>
<tr>
<th>Nome</th>
<td>Jlio Csar</td>
</tr>
<tr>
<th rowspan=2>Telefone</th>
<td>99128596</td>
</tr>
<tr>
<td>81153621</td>
</tr>
</table>

Aplicaes Web

Tabelas : Imagem e cor de fundo

Inserimos o atributo bgcolor ou background para mostrar a cor de fundo ou a


imagem de fundo, respectivamente.
Ex: Cor de fundo
<table border=3 bgcolor=red>
<tr>
<th>Nome</th>
<td>Jlio Csar</td>
</tr>
<tr>
<th rowspan=2>Telefone</th>
<td>99128596</td>
</tr>
<tr>
<td>81153621</td>
</tr>
</table>

Aplicaes Web

Tabelas : Imagem e cor de fundo

Inserimos o atributo bgcolor ou background para mostrar a cor de fundo ou a


imagem de fundo, respectivamente.
Ex: Imagem de fundo
<table border=3 background=imagem.jpg>
<tr>
<th>Nome</th>
<td>Jlio Csar</td>
</tr>
<tr>
<th rowspan=2>Telefone</th>
<td>99128596</td>
</tr>
<tr>
<td>81153621</td>
</tr>
</table>

Aplicaes Web
Tabelas : Alinhar o contedo de uma clula
Ex: <table width="320" border="1">
<tr>
<th align="left">Gastos com ...</th>
<th align="right">Janeiro</th>
<th align="right">Fevereiro</th>
</tr>
<tr>
<td align="left">Roupas</td>
<td align="right">R$ 241,10</td>
<td align="right">R$ 50,20</td>
</tr>
</table>

Aplicaes Web
Listas
Lista no ordenada
Lista ordenada

Numerada
Letras Maisculas
Letras Minsculas
Nmeros romanos
Nmeros romanos minsculos

Lista de definies

Aplicaes Web
Listas
Lista no ordenada ( ul )
<ul>
<li>Caf</li>
<li>Leite</li>
</ul>

Lista no ordenada ( ol )

<ol>
<li>Caf</li>
<li>Leite</li>
</ol>

Aplicaes Web
Listas
Define uma lista de definies ( dl )
Define um termo de definio ( dt )
Define uma descrio de definio ( dd )
<dl>
<dt>Caf</dt>
<dd>Bebida quente preta</dd>
<dt>Leite</dt>
<dd>Bebida fria branca</dd>

</dl>

Aplicaes Web
Listas
Lista ordenada numerada
<ol>
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>

Aplicaes Web
Listas
Lista ordenada com letras minsculas
<ol type="a">
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>

Aplicaes Web
Listas
Lista ordenada em romano maisculo
<ol type="I">
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>

Aplicaes Web
Listas
Lista ordenada em romano minsculo
<ol type="i">
<li>Mas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>

Aplicaes Web
Imagens
<img src=imagem.extenso">
Ex: <img src=relogio.jpg>

O atributo Alt : Define um texto alternativo para a imagem.


Ex: <img src=relogio.jpg alt=Relgio de pulso>

O atributo src : Define um local ( source ) da imagem.

Aplicaes Web
Imagens
Imagem de fundo (background)
Ex: <body background="background.jpg">
<h3>Veja: Uma imagem de fundo!</h3>

Alinhar Imagens
Imagens no meio

Texto na parte superior


Texto na parte central
Texto na parte inferior

Imagens antes do texto


Imagens depois do texto

Aplicaes Web
Imagens
Imagens no meio

Texto na parte superior

Ex:
<p> Texto localizado na

<img src ="images/xhtml.gif" align="top" width="100" height="50">


parte superior </p>
Texto na parte central

Ex:
<p> Texto localizado na
<img src ="images/xhtml.gif" align=middle" width="100" height="50">
parte central </p>

Aplicaes Web
Imagens
Imagens no meio

Texto na parte inferior

Ex:
<p> Texto localizado na
<img src ="images/xhtml.gif" align=bottom" width="100" height="50">
parte inferior </p>

Imagens antes do texto

Ex:
<p> <img src ="images/xhtml.gif" width="100" height="50"> Uma
imagem antes do texto </p>

Aplicaes Web
Imagens
Imagens depois do texto
Ex:
<p> Uma imagem antes do texto <img src="images/xhtml.gif"
width="100" height="50"></p>

Ajustando a imagem

Atributo width e height


Ex:
<p> Uma imagem antes do texto <img src="images/xhtml.gif"
width="100" height="50"></p>

Usando imagem no link


Ex:
<a href="lastpage.htm"> <img border="0" src="buttonnext.gif"
width="65" height="38"> </a>