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 http://www.pt-br.html.net/tutorials/css/ http://www.pt-br.html.net/tutorials/css/ 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 http://registro.br ou http://100br.com http://registro.brhttp://100br.com 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 http://www.angelfire.com/folk/flavio/pagina1.htm).

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 http://www.angelfire.com/folk/flavio e abrirá http://www.angelfire.com/folk/flavio/index.htm.

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 www.seunome.com.br; www.seunome.com.br

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 http://validator.w3.org/

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


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

Apresentações semelhantes


Anúncios Google