A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


Apresentação em tema: "PROF. FLÁVIO IZO Programação WEB AULA 04 ESTRUTURA HTML – PARTE II."— Transcrição da apresentação:

1 PROF. FLÁVIO IZO Programação WEB 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 é 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 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 para exibir uma popup quando colocar mouse sobre a imagem.

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

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 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, assim como faz-se no link convencional; Site do IFES

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:, e ;

10 2.0 Criando tabelas Vejamos um exemplo: Entendeu? É simples assim… Célula 1 Célula 2 Célula 3 Célula 4

11 2.0 Criando tabelas Vamos às tags: abre e fecha uma tabela; Table Row: abre e fecha uma linha; Table Data: abre e fecha uma coluna; Célula 1 Célula 2 Célula 3 Célula 4

12 2.0 Criando tabelas Se quisermos que apareçam as bordas basta adicionar o atributo border=1 na tag table. Veja: Célula 1 Célula 2 Célula 3 Célula 4

13 2.0 Criando tabelas Outros atributos da tag : 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; Célula 1 Célula 2 Célula 3 Célula 4

14 2.0 Criando tabelas Outros atributos da tag : bordercolor: cor da borda da linha; bgcolor: cor de fundo de TODA A LINHA; Célula 1 Célula 2 Célula 3 Célula 4

15 2.0 Criando tabelas Outros atributos da tag : 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; Célula 1 Célula 2 Célula 3 Célula 4

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: Este parágrafo em tamanho de fonte igual a 20px Este parágrafo em fonte Courier Este parágrafo em fonte Courier e tamanho 20px

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 Minha primeira página CSS h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} Minha primeira página CSS Bem vindo à minha primeira página CSS Aqui você verá como funciona CSS

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; Texto verde Cabeçalho com fundo azul

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.comangelfire.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; 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: Título texto texto

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


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

Apresentações semelhantes


Anúncios Google