PROF. FLÁVIO IZO Programação WEB AULA 04 ESTRUTURA HTML – PARTE II.

PROF. FLÁVIO IZOProgramação WEB

AULA 04ESTRUTURA HTML – PARTE II

Objetivos da Aula

1.0 Inserindo imagens;

2.0 Criando tabelas;

3.0 Introdução ao CSS;

4.0 Uploading páginas;

5.0 Web Standards e Validação;

6.0 Dicas Finais;

7.0 Exercício;

1.0 Inserindo imagens

Inserir imagens em um site é muito fácil e

fundamental para quem quer atrair o público com

visitas frequentes;

Tudo o que precisamos é utilizar os benefícios das

“tags”;

No caso das imagens a tag é <img

src=“foto.jpg” />

Repare que essa tag é simples, ou seja, se fecha

na mesma tag;


Suponhamos que temos uma imagem

denominada logo_ifes.jpg

Obs.: Para obter-se uma organização recomenda-se

criar uma pasta chamada img e colocar todas as

imagens do site dentro dela. O mesmo vale para pdfs,

criando-se uma pasta pdf, ou musicas para arquivos

mp3, wma etc.


Voltando à nossa imagem denominada logo_ifes.jpg;

Coloque a img dentro da pasta img;

Para inserí-la na página do site basta colocar:

O atributo “alt” serve para exibir um texto caso a

imagem não carregue, ou caso o usuário seja

deficiente visual; (Uso obrigatório!)

Utilize o <title> para exibir uma popup quando

colocar mouse sobre a imagem.

<img src=“img/logo_ifes.jpg” alt=“Logo do IFES” />


Outros atributos que podem ser utilizados:

height=“300” -> define a altura da imagem;

width=“600” -> define a largura da imagem;

border=“0” -> largura da borda, sendo “zero” define sem

borda;

Para editar as imagens recomenda-se o software Irfanview

encontrado no link <http://www.irfanview.com/>

<img src=“img/logo_ifes.jpg” alt=“algo” height=“300” width=“600” border=“0” />


Quando gostar de uma imagem que está na

Internet e quiser copiá-la, basta clicar com o

“botão direito” do mouse sobre a imagem e

“salvar imagem como”.

Assim, basta escolher um local no seu HD e

salvá-la;

Lembre-se de citar os direitos autorais;


E como fazer uma imagem ser um link, ou seja, ao

clicar nela, esta deverá abrir um link;

Vamos relembrar como colocar um link

convencional:

E com imagem:

Perceba que a imagem está entre as tags <a>,

assim como faz-se no link convencional;

<a href=“http://www.ifes.edu.br”>Site do IFES</a>

<a href=“http://www.ifes.edu.br”><img src=“img/logo_ifes.jpg” alt=“Logo do IFES” /></a>

2.0 Criando tabelas

Tabelas nada mais são do que linhas x colunas;

Para se criar um site elas são primordiais (que

não me ouçam os usuários de “tableless” );

Como tudo que temos visto, criar tabelas em html

é simples;

Basta conhecer cada uma das tags:

<table> , <tr> e <td>;

2.0 Criando tabelas

Vejamos um exemplo:

Entendeu? É simples assim…

<table>

<tr> <td>Célula 1</td> <td>Célula 2</td> </tr>


</table>

2.0 Criando tabelas

Vamos às tags:

<table> abre e fecha uma

tabela;

<tr> Table Row: abre e fecha

uma linha;

<td> Table Data: abre e fecha

uma coluna;

<table>



</table>

2.0 Criando tabelas

Se quisermos que apareçam as bordas basta

adicionar o atributo border=“1” na tag

“table”. Veja:<table border=“1”>



</table>

2.0 Criando tabelas

Outros atributos da tag <table>:

Cellpadding: Espaço dentro da célula;

Cellspacing: Espaço entre as células;

bordercolor: cor da borda;

bgcolor: cor de fundo de TODA A TABELA;

width: Define a largura da tabela;

<table border=“1” cellpadding="0" cellspacing="0" bordercolor="#FF0000“ bgcolor="#FFFF00" width=“400”> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr>


</table>

2.0 Criando tabelas

Outros atributos da tag <tr>:

bordercolor: cor da borda da linha;

bgcolor: cor de fundo de TODA A LINHA;<table border=“1” cellpadding="0" cellspacing="0" bordercolor="#FF0000“ bgcolor="#FFFF00“ width=“300” > <tr bgcolor="#00CC00" bordercolor="#000000" > <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr>

</table>

2.0 Criando tabelas

Outros atributos da tag <td>:

colspan: mescla uma quantidade de colunas;

rowspan: mescla uma quantidade de linhas;

bordercolor: cor da borda da célular;

bgcolor: cor de fundo da célula;

align: alinhamento do conteúdo da célula;

<table border=“1” cellpadding="0" cellspacing="0" bordercolor="#FF0000“ bgcolor="#FFFF00" > <tr> <td colspan="2" bgcolor="#00CC00" bordercolor="#000000" align="center">Célula 1</td> </tr> <tr> <td>Célula 2</td> <td rowspan="2" bgcolor="#0066FF">Célula 3</td> </tr> <tr> <td>Célula 4</td> </tr> </table>

2.0 Criando tabelas

Vamos tentar criar a tabela abaixo:

3.0 Introdução ao CSS

CSS é Cascading Style Sheets (CSS) ou

Folhas de Estilo em Cascata;

Para saber mais sobre CSS acesse o link

http://www.pt-br.html.net/tutorials/css/

A seguir será somente demonstrada algumas

técnicas de CSS;


Vamos ao exemplo:

<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a 20px</p>

<p style="font-family:courier;">Este parágrafo em fonte Courier</p>

<p style="font-size:20px; font-family:courier">Este parágrafo em fonte Courier e

tamanho 20px</p>


Apesar de funcionar, não é recomendado que

utilizemos a inserção de CSS da forma como

vimos no slide anterior;

É recomendável que façamos a centralização

dos códigos, para que possamos reaporveitá-

los;

A seguir veremos um exemplo:


<html>

<head> <title>Minha primeira página CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head>

<body> <h1>Minha primeira página CSS</h1> <h2>Bem vindo à minha primeira página CSS</h2> <p>Aqui você verá como funciona CSS</p> </body></html>


Uma outra solução (mais recomendada) é

criar a folha de estilos em um arquivo

separado.

Assim, basta importar esse arquivo e utilizar

a folha de estilos para todas as páginas;

É ou não é um grande quebra galho;


O CSS pode “moldar” muito mais coisas, tais

como cor e imagem de fundo;

<p style="color:green;">Texto verde</p>

<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>

<body style="background-image:

url('http://www.html.net/logo.png');">

4.0 Uploading páginas

Para disponibilizar sua página na Internet para

que todos vejam você precisa de duas coisas:

Um servidor de hospedagem;

Um programa de ftp para “subir” seu site;

Pode-se procurar um domínio disponível no site

http://registro.br ou http://100br.com

Um servidor pago muito bom é o Hostnet.com

A seguir, daremos exemplos de serviços gratuitos;


Um servidor gratuito é o angelfire.lycos.com

Clique em Sign Up e faça seu cadastro;


Um programa de ftp interessante e gratuito é

o FireZilla;

Este programa está disponível em

filezilla.sourceforge.net;


Para subir o site:

Conecte-se à Internet e abra o programa FTP.

Insira "Host Name" ("ftp.angelfire.com" no "Address"),

nome do usuário (em "User") e senha (em "Password")

Clique "Connect".


Para subir o site:

Você agora tem acesso ao servidor. Em um lado da

janela do programa você verá os diretórios e arquivos

do seu computador ("Local Site"), e no outro o do

servidor ("Remote Site");


Ache os seus documentos HTML e imagens a

serem publicadas (no "Local site") e transfira

para o servidor ("Remote site") simplesmente

dando um clique duplo nos arquivos. Agora o

mundo todo poderá ver seu site! (Por

exemplo, no endereço

http://www.angelfire.com/folk/flavio/pagina1.

htm).


Dê a uma das páginas o nome de "index.htm"

(ou "index.html") e ela será automaticamente

a página de entrada no site, ou seja, basta

digitar http://www.angelfire.com/folk/flavio e

abrirá

http://www.angelfire.com/folk/flavio/index.ht

m.


Quando estiver um expert em PW uma boa

ideia será comprar um domínio, ou seja, um

espaço só seu no servidor.

Assim, você poderá ter um site

www.seunome.com.br;

5.0 Web Standards e Validação

Há diversas formas de se escrever um código

HTML;

Assim, sendo possível que tenhamos diversos

sites com tecnologias e detalhes específicos;

Existe uma organização denominada W3C

(World Wide Web Consortium) que busca a

normalização da codificação HTML, para

facilitar a leitura e interpretação pelos browsers;


No início, sem concorrência, o Netscape não

se preocupava com normas;

Com o surgimento do IE, a Microsoft tentou

cada vez mais se fortalecer e além de

distribuir gratuitamente o navegador oferecia

suporte para as normas do W3C (não todas);


Atualmente é o IE quem detém uma

considerável fatia do mercado e o HTML

passou a ser conhecido como XHTML

(eXtensible HTML);


Então, quando você codifica HTML de acordo

com as normas do W3C, você está

construindo um website para ser visualizado

em “todos” os navegadores;

Está aí mais um motivo para desenvolver de

acordo com a mais nova versão do HTML,

que é o XHTML.


Para informar ao navegador a versão que

estamos utilizando é necessário colocar na

primeira linha:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>

<title>Título</title>

</head>

<body>

<p>texto texto</p>

</body>

</html>


Uma DTD informará ao navegador como deve

ser lido e renderizado o HTML. Use o

exemplo mostrado, como um template para

todos os seus futuros documentos HTML.

O DTD é importante ainda, para a validação

da página.

Quer validar a sua página? Acesse

http://validator.w3.org/

6.0 Dicas Finais

Aconselha-se a escrever seus documentos HTML de

forma ordenada e estruturada. Assim, você estará não

só mostrando aos outros que possui uma base sólida

de conhecimento mas também estará facilitando a

leitura, interpretação e manutenção do código.

Siga as normas e valide seu código. Mas, não faça

disto uma fonte de stress. Escreva um XHTML claro,

use o DTD e valide suas páginas no validator.w3c.org.

6.0 Dicas Finais

Coloque conteúdos nas suas páginas.

Lembre-se que HTML é apenas a ferramenta

que possibilita apresentar informação na

Internet, assim é necessário que haja a

informação a ser apresentada ou seja, o

conteúdo. Páginas lindas e bem desenhadas

são ótimas, mas as pessoas buscam

informação na Internet.

6.0 Dicas Finais

Evite encher suas páginas com imagens

pesadas e outros "balangandans" que você

encontra na Internet. Isto faz com que suas

páginas demorem a carregar e é frustante

para o usuário.

Páginas que demoram mais de 10 segundos

para carregar podem perder até 50% dos

seus visitantes.

7.0 Exercícios

Faça a lista02.pdf

Dúvidas!

[email protected]

FLÁVIO IZO(28) 9986-5273

PROF. FLÁVIO IZO Programação WEB AULA 04 ESTRUTURA HTML – PARTE II.

Documents

Transcript of PROF. FLÁVIO IZO Programação WEB AULA 04 ESTRUTURA HTML – PARTE II.