Estrutura HTML – Parte II

Apresentação em tema: "Estrutura HTML – Parte II"— Transcrição da apresentação:

1 Estrutura HTML – Parte II
Programação WEB Prof. Flávio Izo Aula 04 Estrutura HTML – Parte II

2 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;

3 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;

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

5 <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” />

6 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 < <img src=“img/logo_ifes.jpg” alt=“algo” height=“300” width=“600” border=“0” />

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

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

9 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>;

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

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

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

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

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

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

16 2.0 Criando tabelas Vamos tentar criar a tabela abaixo:

17 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 A seguir será somente demonstrada algumas técnicas de CSS;

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

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

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

21 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;

22 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('

23 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 ou Um servidor pago muito bom é o Hostnet.com A seguir, daremos exemplos de serviços gratuitos;

24 4.0 Uploading páginas Um servidor gratuito é o angelfire.lycos.com
Clique em Sign Up e faça seu cadastro;

25 4.0 Uploading páginas Um programa de ftp interessante e gratuito é o FireZilla; Este programa está disponível em filezilla.sourceforge.net;

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

27 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");

28 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

29 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 e abrirá

30 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

31 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;

32 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);

33 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);

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

35 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" " <html xmlns=" lang="pt-br"> <head> <title>Título</title> </head> <body> <p>texto texto</p> </body> </html>

36 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

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

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

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

40 7.0 Exercícios Faça a lista02.pdf

41 Dúvidas! FLÁVIO IZO (28)