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

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

FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.

Apresentações semelhantes


Apresentação em tema: "FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."— Transcrição da apresentação:

1 FTIN - Módulo de WebDesign Prof. Ítalo Araújo

2 IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

3 Hipertexto É um sistema para a visualização de informação cujos documentos contêm referências internas para outros documentos (chamados de links), e para a fácil publicação, atualização e pesquisa de informação. O sistema de hipertexto mais conhecido atualmente é a World Wide Web. É um sistema para a visualização de informação cujos documentos contêm referências internas para outros documentos (chamados de links), e para a fácil publicação, atualização e pesquisa de informação. O sistema de hipertexto mais conhecido atualmente é a World Wide Web.

4 Hipermídia O conceito de hipermédia é uma extensão do hipertexto a documentos não puramente textuais. O conceito de hipermédia é uma extensão do hipertexto a documentos não puramente textuais. É a combinação de hipertexto com multimídia, permitindo a existência de ligações hipertextuais entre textos, imagens fixas ou animadas, sons, etc. É a combinação de hipertexto com multimídia, permitindo a existência de ligações hipertextuais entre textos, imagens fixas ou animadas, sons, etc.

5 HTML É a linguagem padrão da Internet para a construção de documentos Hipertexto e Hipermídia. É a linguagem padrão da Internet para a construção de documentos Hipertexto e Hipermídia. Os documentos que são escritos usando esta linguagem são chamados de páginas HTML ou páginas Web. Os documentos que são escritos usando esta linguagem são chamados de páginas HTML ou páginas Web.

6 Navegadores Web É um programa para visualizar e navegar na World Wide Web É um programa para visualizar e navegar na World Wide Web Disponível para quase todas as plataformas Disponível para quase todas as plataformas Freeware ou shareware (experimente antes de comprar) Freeware ou shareware (experimente antes de comprar) – Internet Explorer – Mozilla Firefox (http://www.firefox.st/pt/)http://www.firefox.st/pt/ – Opera (http://www.opera.com/)http://www.opera.com/

7 Servidores Web É o programa responsável por responder às solicitações de arquivos do navegador da Web É o programa responsável por responder às solicitações de arquivos do navegador da Web Os documentos são publicados no servidor Web Os documentos são publicados no servidor Web

8 Servidores Web Solicita página (http) NAVEGADOR Envia o conteúdo do arquivo Formata a Informação SERVIDOR

9 URLs Localizadores de Recursos Uniformes Localizadores de Recursos Uniformes É um ponteiro para acessar dados na Web (documento Web, um arquivo FTP, um endereço de , etc.) É um ponteiro para acessar dados na Web (documento Web, um arquivo FTP, um endereço de , etc.) Pode ser digitado no navegador Pode ser digitado no navegador Pode ser inserido dentro de um documento hipertexto Pode ser inserido dentro de um documento hipertexto

10 HTML(Hypertext Markup Language) É uma linguagem de marcação É uma linguagem de marcação – Deve-se escrever o texto da sua página e acrescentar tags especiais envolvendo palavras, parágrafos, etc. – As tags indicam as diferentes partes da página e produzem diferentes efeitos no navegador Possui um conjunto de tags definido Possui um conjunto de tags definido Não permite criar novas tags Não permite criar novas tags

11 Aparência dos Arquivos HTML Arquivos HTML contém: Arquivos HTML contém: – O texto da página – Tags HTML que indicam elementos de página, estrutura e links de hipertexto para outras páginas ou mídias – As tags podem ter atributos que servem para indicar alguma propriedade especial da tag que pode refletir na apresentação. – Exemplo: texto afetado Elemento HTML (TAG)

12 Elementos da Linguagem Possuem elementos que representam Possuem elementos que representam – Parágrafos, links, listas, tabelas, imagens, etc. conteúdo conteúdo

13 Estruturando o seu HTML A estrutura geral da página é definida através das tags:, e A estrutura geral da página é definida através das tags:, e

14 XHTML Extensible Hypertext Markup Language Extensible Hypertext Markup Language Separação de conceitos como Apresentação e Estruturação de um documento WEB. Separação de conceitos como Apresentação e Estruturação de um documento WEB. Baseada na HTML – Tecnologia legada da W3C. Baseada na HTML – Tecnologia legada da W3C. Também baseada no XML. Também baseada no XML. HTML => Dados +Estrutura + formatação HTML => Dados +Estrutura + formatação XHTML => Dados +Estrutura XHTML => Dados +Estrutura

15 XHTML x HTML Documentos precisam ser bem formados. Documentos precisam ser bem formados. – Conceito introduzido pela XML – Todo elemento precisa ter tag de fechamento ou ser escrito de uma forma especial; – Tags devem ser aninhadas corretamente. ERRADO ERRADO – texto de parágrafo enfatizado. CORRETO CORRETO – texto de parágrafo enfatizado.

16 XHTML x HTML Nomes de elementos e atributos devem sempre estar em minúsculo. Nomes de elementos e atributos devem sempre estar em minúsculo. – and (ERRADO) Em HTML 4 alguns elementos permitem a omissão da tag de fechamento. Em XHTML isso não é permitido. Em HTML 4 alguns elementos permitem a omissão da tag de fechamento. Em XHTML isso não é permitido. – ERRADO isto é um paragrafo. isto é outro parágrafo. – CORRETO isto é um paragrafo. isto é outro parágrafo.

17 XHTML x HTML Nomes de elementos e atributos devem sempre estar em minúsculo. Nomes de elementos e atributos devem sempre estar em minúsculo. – and (ERRADO) Em HTML 4 alguns elementos permitem a omissão da tag de fechamento. Em XHTML isso não é permitido. Em HTML 4 alguns elementos permitem a omissão da tag de fechamento. Em XHTML isso não é permitido. – ERRADO isto é um paragrafo. isto é outro parágrafo. – CORRETO isto é um paragrafo. isto é outro parágrafo.

18 XHTML x HTML Todos os valores de atributos precisa estar entre aspas duplas () Todos os valores de atributos precisa estar entre aspas duplas () – ERRADO – CORRETO Todo atributo tem que ter uma valor associado. Todo atributo tem que ter uma valor associado. – ERRADO – CORRETO

19 XHTML x HTML Elementos vazios devem ser fechados: tags que não possuem elemento, precisam ter a tag de fechamento, ou a tag de abertura deve ser finalizado com /> Elementos vazios devem ser fechados: tags que não possuem elemento, precisam ter a tag de fechamento, ou a tag de abertura deve ser finalizado com /> – ERRADO – CORRETO

20 XHTML x HTML Elementos com atributos id e name: Elementos com atributos id e name: – HTML 4 define o atributo name para os elementos: a, applet, form, frame, iframe, img e map. Em XHTML 1 o atributo id deve ser utilizado como identificador para os elementos mencionados acima em vez do atributo name. Em XHTML 1 o atributo id deve ser utilizado como identificador para os elementos mencionados acima em vez do atributo name. – ERRADO – CORRETO Por razões de compatibilidade com browsers antigos você pode usar ambos os atributos como abaixo Por razões de compatibilidade com browsers antigos você pode usar ambos os atributos como abaixo

21 XHTML x HTML Pontos de Âncora Pontos de Âncora – Em HTML Início do parágrafo..bla... – Em XHTML adicione o atributo id Início do parágrafo..bla... Atributo alt para imagens Atributo alt para imagens – Em XHTML seu uso é obrigatório, mesmo que esteja com um espaço vazio

22 XHTML x HTML Cuidado com código gerado pelos editores de HTML Cuidado com código gerado pelos editores de HTML – ERRADOonMouseOver=function() – CORRETOonmouseover=function() Caracter & (e comercial) Caracter & (e comercial) – ERRADO Comercio & Exportação – CORRETO Comércio & Exportação

23 Estruturando um site Elementos básicos da estrutura de um documento: Elementos básicos da estrutura de um documento: declaração DOCTYPE elemento html elemento head elemento meta elemento link elemento style elemento script elemento title elemento body

24 Estruturando um site Dentro do corpo (body) encontram-se elementos para representar: Dentro do corpo (body) encontram-se elementos para representar: Comentários; Divisões; Títulos; Textos; Imagens; Links; Listas; Tabelas; Formulários.

25 Estruturando um site A apresentação (design) que serão separados em folhas de estilo (CSS), incluem: A apresentação (design) que serão separados em folhas de estilo (CSS), incluem: Fontes de letras Formatação de textos; Listas; Cores de fundo; Espaçamento; Tipos de bordas; Margens; Dimensão; Posicionamento

26 Estruturando um site - html As tags e indicam respectivamente o início e o fim de um documento; As tags e indicam respectivamente o início e o fim de um documento; Indica que se trata de um documento html ou xhtml. Indica que se trata de um documento html ou xhtml. Devem englobar todas as tags; Devem englobar todas as tags; Na XHTML deve possuir um atributo associado a tag html: Na XHTML deve possuir um atributo associado a tag html: – https://www.w3.org/1999/hhtml

27 Estruturando um site - head Delimitam a seção de cabeçalho do documento; Delimitam a seção de cabeçalho do documento; Não fazem parte do corpo do documento e não serão exibidas; Não fazem parte do corpo do documento e não serão exibidas; Dentro da tag... ficam encontrados as seguintes tags: Dentro da tag... ficam encontrados as seguintes tags: – meta; – link; – style; – title.

28 Estruturando um site - meta Utilizado para incorporar metainformações (informações sobre informações) ao documento; Utilizado para incorporar metainformações (informações sobre informações) ao documento; Essas informações podem ser utilizadas para tificação, indexação e catalogação do site; Essas informações podem ser utilizadas para tificação, indexação e catalogação do site; Pode fornecer informações sobre quem criou, quando foi modificada pela última vez, data de expiração, sua descrição, etc. Pode fornecer informações sobre quem criou, quando foi modificada pela última vez, data de expiração, sua descrição, etc. Composta por duas partes: identificador e conteúdo. Composta por duas partes: identificador e conteúdo. Identificador: http-equiv ou name. Identificador: http-equiv ou name.

29 Estruturando um site - meta name : guarda informações sobre os documentos e não tem cabeçalhos http associado. Descrição do documento. É utilizado pelos mecanismos de busca. Descrição do documento. É utilizado pelos mecanismos de busca. Palavras chave que identificam o documento. É utilizado pelos mecanismos de busca. Palavras chave que identificam o documento. É utilizado pelos mecanismos de busca. Identificação dos autores do documento WEB. Identificação dos autores do documento WEB. Define informações sobre os direitos autorais do documento WEB. Define informações sobre os direitos autorais do documento WEB.

30 Estruturando um site - meta Define endereço de para contato. Define endereço de para contato. Define a lingua utilizada no site. Define a lingua utilizada no site.

31 Estruturando um site – link / style link: Adicionam informações externas relacionadas ao documento html. Como Por exemplo, arquivos CSS. link: Adicionam informações externas relacionadas ao documento html. Como Por exemplo, arquivos CSS.

32 Estruturando um site - title Representa o título da sua home page. O valor especificado pela tag title aparece na barra superior do navegador WEB. Representa o título da sua home page. O valor especificado pela tag title aparece na barra superior do navegador WEB. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd Compra de Livros on-line Compra de Livros on-line

33 Estruturando um site – atributos Para cada uma das tags que pertencem ao body, com exceção do comentário, possuem atributos em comum. Sendo eles: Para cada uma das tags que pertencem ao body, com exceção do comentário, possuem atributos em comum. Sendo eles: id: Identifica um elemento, atribuindo a ele um nome. Esse nome deve ser único dentro do documento. Geralmente associado a uma folha de estilo. class: identifica que o elemento pertence a uma classe específica de elementos.Geralmente associado a uma folha de estilo. style: Especifica as regras de formatação de folhas de estilo para o elemento em questão.

34 Estruturando um site – parágrafo Existe uma tag especial para definição de parágrafos Existe uma tag especial para definição de parágrafos – Separação do texto em blocos – A tag é utilizada para tal fim Este é um parágrafo.

35 Estruturando um site – parágrafo Por padrão os parágrafos são alinhados à esquerda da página. Por padrão os parágrafos são alinhados à esquerda da página. É possível alinhar da forma como você desejar É possível alinhar da forma como você desejar Centro ("center") Esquerda ("left") Direita ("right") Justificado ("justify") Utilizando a propriedade align (cai em desuso com o XHTML, deve-se usar CSS) Utilizando a propriedade align (cai em desuso com o XHTML, deve-se usar CSS) Texto do Parágrafo

36 Estruturando um site – cabeçalho Tags utilizadas para estruturar páginas Web Tags utilizadas para estruturar páginas Web – Útil para separar informações de acordo com sua relevância Existem 6 tags de título Existem 6 tags de título,,,, ou Maior Menor Tamanho de Fonte

37 Estruturando um site – cabeçalho

38 Combinando Títulos e Cabeçalhos Como seria o Código HTML desta Página??

39 Resposta....

40 Estruturando um site – texto TAGS: TAGS: –... : Enfatizar o texto, geralmente os navegadores mostram em itálico. –... : Dá uma ênfase mais forte ao texto, geralmente os navegadores mostram em negrito.

41 Estruturando um site – quebra de linha Muitas vezes é necessário iniciar uma nova linha sem necessariamente iniciar um novo parágrafo Muitas vezes é necessário iniciar uma nova linha sem necessariamente iniciar um novo parágrafo Em HTML a quebra de linha é feita com o uso da tag Em HTML a quebra de linha é feita com o uso da tag Em HTML esta Tag não tem a correspondente fechando!!!

42 Estruturando um site – quebra de linha - Exemplo

43 Utilizado para dividir regiões do documento horizontalmente. Utilizado para dividir regiões do documento horizontalmente. Em HTML a linha horizontal é feita com o uso da tag Em HTML a linha horizontal é feita com o uso da tag Para compatibilizar com XHTML deve-se escreve- la Para compatibilizar com XHTML deve-se escreve- la Em HTML esta Tag não tem a correspondente fechando!!! Estruturando um site linha horizontal

44 Exemplo Body Exemplo Body Parte superior a linha Parte que vem após a linha horizontal. Parte superior a linha Parte que vem após a linha horizontal.

45 Estruturando um site – DIV É um Container; É um Container; Permite que o documento seja dividido em blocos; Permite que o documento seja dividido em blocos; Fornece uma estrutura lógica para o documento; Fornece uma estrutura lógica para o documento; Associadas ao CSS podem aplicar regras de formatação a todos os elementos que compõem a div. Associadas ao CSS podem aplicar regras de formatação a todos os elementos que compõem a div. Atributos: id, class, style, title, dir, lang e eventos intrínsecos. Atributos: id, class, style, title, dir, lang e eventos intrínsecos.

46 Estruturando um site – Divisões

47

48 Estruturando um site – imagem Imagens fazem parte da maioria das páginas Web Imagens fazem parte da maioria das páginas Web – Ajudam muito no aspecto visual e informativo – Podem poluir a página e torná-la lenta – Os formatos mais comuns são GIF, BMP e JPG

49 Estruturando um site – imagem A tag é utilizada para inserir imagens em páginas HTML A tag é utilizada para inserir imagens em páginas HTML Não deve vir solta dentro do Não deve vir solta dentro do Atributos: Atributos: – src: Indica a localização da imagem (URL)

50 Estruturando um site – imagem como.gif

51 Estruturando um site – imagem O caminho da imagem pode ser O caminho da imagem pode ser – Relativo; – Absoluto; – Ou uma URL completa.

52 Estruturando um site – imagem Atributos (cont.): Atributos (cont.): – alt: Fornecem uma descrição alternativa sobre a imagem para navegadores que não podem mostras imagens ou estejam com essa funcionalidade desligada (obrigatório). – longdesc: Especifica uma URL para ima descrição longa da imagem; – title X alt: Apesar de muitos programadores HTML usarem o alt para dar umes descrição quanto o mouse passa sobre a imagem, o correto seria o uso do title. – height: Define a altura da imagem. – width: Define a largura de uma imagem.

53 Estruturando um site – links Os links são as peças fundamentais da Internet!! Os links são as peças fundamentais da Internet!! – Representam conexões entre documentos Nas páginas HTML existem elementos que quando clicados te levam à outras páginas Nas páginas HTML existem elementos que quando clicados te levam à outras páginas – Palavras ou Trechos de texto – Imagens

54 Estruturando um site – links A tag é utilizada para se criar links A tag é utilizada para se criar links – Deve-se definir qual o destino – Qual o elemento que será o link Um texto qualquer Destino Link

55 Estruturando um site – links

56 Propriedade target Propriedade target – Possibilita controlar a janela do browser onde o link será aberto Link de teste – Pode ter um dos seguintes valores – _blank Abre em uma nova Janela – _self Abre na própria Janela

57 Estruturando um site –Tipos de listas Listas numeradas Listas numeradas Listas com marcadores Listas com marcadores Listas de glossário Listas de glossário

58 Estruturando um site –Tipos de listas Listas com marcadoresListas numerada Listas de glossário

59 Estruturando um site – listas numeradas Também conhecidas como listas ordenadas Também conhecidas como listas ordenadas Utiliza-se a tag... Utiliza-se a tag... – OL Abreviação para Ordered List – Cada item da lista é adicionado através da tag...

60 Estruturando um site – listas numeradas item de uma lista numerada item de uma lista numerada, que pode ser tão grande quanto se queira item de lista numerada

61 Estruturando um site –Tabelas Úteis para apresentar informações de forma tabular. Úteis para apresentar informações de forma tabular. Foram muito usadas para a organização dos elementos em uma página Web. Foram muito usadas para a organização dos elementos em uma página Web. Suas células podem ter como conteúdo Suas células podem ter como conteúdo – Textos – Links – Figuras – Etc.

62 Estruturando um site –Tabelas Título Título Cabeçalho Cabeçalho Células Células Dados Dados Rodapé Rodapé Lista de Compras Maçã Produtoqtd. 4 Pera10 uva15 Laranja12 Partes da Tabela Total41

63 Exemplo 1

64 Formulários Oferece uma maior interatividade com o usuário Oferece uma maior interatividade com o usuário Exemplos de uso Exemplos de uso – Pesquisa de informações – Cadastro – Envio de mensagens

65 Formulários Tag : Servem como contêiner para os vários elementos de formulário que os compõem. Tag : Servem como contêiner para os vários elementos de formulário que os compõem.

66 Formulários Aprenda mais sobre formulários e suas aplicações em: Aprenda mais sobre formulários e suas aplicações em:

67 ATIVIDADE 1)Reproduza o código em HTML para termos o mesmo resultado da imagem abaixo:

68 Atividade Prazo para postagem: 21/07/12 até às 23:55h 21/07/12 até às 23:55h EVITE DEIXAR A POSTAGEM DE SUA ATIVIDADE PARA O ÚLTIMO DIA. FAZENDO ISSO, IMPREVISTOS NÃO VÃO LHE PREJUDICAR. * LEMBRANDO QUE SUA ORGANIZAÇÃO TAMBÉM ESTA SENDO AVALIADA

69 FERRAMENTAS DE APOIO Apostilas e vídeos do AVASIS; Apostilas e vídeos do AVASIS; Fórum durante o módulo, com resposta em até 6 horas úteis; Fórum durante o módulo, com resposta em até 6 horas úteis; do professor: do professor:

70 DÚVIDAS... Acesse o Fórum de dúvidas e discussões Diariamente Chat na Terça-Feira: dia 17/07/12 no horário: das 19:00 às 20:30 h

71 Por hoje é só! Na próxima aula: Na próxima aula: – Criando Layouts para Web Siga-me: Siga-me: – – Facebook.com/italoj.araujo – Twitter.com/italoj


Carregar ppt "FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."

Apresentações semelhantes


Anúncios Google