Post on 18-Apr-2015
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;
1.0 Inserindo imagens
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.
1.0 Inserindo imagens
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” />
1.0 Inserindo imagens
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” />
1.0 Inserindo imagens
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;
1.0 Inserindo imagens
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>
<tr> <td>Célula 3</td> <td>Célula 4</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>
<tr> <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
Se quisermos que apareçam as bordas basta
adicionar o atributo border=“1” na tag
“table”. Veja:<table border=“1”>
<tr> <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 <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>
<tr> <td>Célula 3</td> <td>Célula 4</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;
3.0 Introdução ao 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>
3.0 Introdução ao CSS
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:
3.0 Introdução ao CSS
<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>
3.0 Introdução ao CSS
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;
3.0 Introdução ao CSS
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;
4.0 Uploading páginas
Um servidor gratuito é o angelfire.lycos.com
Clique em Sign Up e faça seu cadastro;
4.0 Uploading páginas
Um programa de ftp interessante e gratuito é
o FireZilla;
Este programa está disponível em
filezilla.sourceforge.net;
4.0 Uploading páginas
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".
4.0 Uploading páginas
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");
4.0 Uploading páginas
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).
4.0 Uploading páginas
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.
4.0 Uploading páginas
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;
5.0 Web Standards e Validação
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);
5.0 Web Standards e Validação
Atualmente é o IE quem detém uma
considerável fatia do mercado e o HTML
passou a ser conhecido como XHTML
(eXtensible HTML);
5.0 Web Standards e Validação
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.
5.0 Web Standards e Validação
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>
5.0 Web Standards e Validação
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!
flavio@flavioizo.com
FLÁVIO IZO(28) 9986-5273