Aula - Aplicação Web

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: 
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>
</tr>
<tr>
</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>
</tr>
<tr>
</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.
<tr>
<th>Cabealho</th>
<th>Outro Cabealho</th>
</tr>
<tr>
</tr>
<tr>
</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.
<tr>
<th>Cabealho</th>
</tr>
<tr>
<th>Outro Cabealho</th>
</tr>
</table>
Aplicaes Web
Tabelas : Ttulo (Caption)
Identificados pela tag <caption> e </caption>.
<caption>Minha tabela</caption>
<tr>
</tr>
<tr>
</tr>
</table>
Aplicaes Web
Tabelas : Colspan (Espaamento da coluna)
Identificados pelo atributo colspan.

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

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

Aula - Aplicação Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula - Aplicação Web

Enviado por

Direitos autorais:

Formatos disponíveis

Aplicaes Web

Professor Jlio Csar

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

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

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

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

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

O atributo Alvo (Target)

Texto localizado em outra pgina :

Noframes : Define uma sesso noframe para navegadores que no

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

Identificados pela tag <th>.

Identificados pela tag <th>.

Identificados pelo atributo colspan.

Identificados pelo atributo rowspan.

Tabelas : Imagem e cor de fundo

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

Tabelas : Imagem e cor de fundo

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

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

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

Texto na parte superior

Imagens antes do texto

Texto na parte superior

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

Texto na parte inferior

Imagens antes do texto

Atributo width e height

Usando imagem no link

Você também pode gostar