Estrutura HTML – Parte II Programação WEB Prof. Flávio Izo Aula 04 Estrutura 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.

<img src=“img/logo_ifes.jpg” alt=“Logo do IFES” /> 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;

<a href=“http://www.ifes.edu.br”>Site do IFES</a> 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> <td>Célula 3</td> <td>Célula 4</td> </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> <td>Célula 3</td> <td>Célula 4</td> </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> <td>Célula 3</td> <td>Célula 4</td> </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> <td>Célula 3</td> <td>Célula 4</td> </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> </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> <td>Célula 2</td> <td rowspan="2" bgcolor="#0066FF">Célula 3</td> <td>Célula 4</td> </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.htm.

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! FLÁVIO IZO (28) 9986-5273 flavio@flavioizo.com