FTIN - Módulo de WebDesign Prof. Iran Pontes FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS 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. Hipermídia • 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. HTML • É 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. Navegadores Web • • • É um programa para visualizar e navegar na World Wide Web Disponível para quase todas as plataformas Freeware ou shareware (experimente antes de comprar) – Internet Explorer – Mozilla Firefox (http://www.firefox.st/pt/) – Opera (http://www.opera.com/) Servidores Web • É o programa responsável por responder às solicitações de arquivos do navegador da Web • Os documentos são publicados no servidor Web Servidores Web Formata a Informação Solicita página (http) Envia o conteúdo do arquivo NAVEGADOR SERVIDOR URLs • Localizadores de Recursos Uniformes • É um ponteiro para acessar dados na Web (documento Web, um arquivo FTP, um endereço de e-mail, etc.) • Pode ser digitado no navegador • Pode ser inserido dentro de um documento hipertexto HTML(Hypertext Markup Language) • É 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 • Não permite criar novas tags Aparência dos Arquivos HTML • 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: <nometag atributo=“valor”> texto afetado </nometag> Elemento HTML (TAG) Elementos da Linguagem • Possuem elementos que representam – Parágrafos, links, listas, tabelas, imagens, etc. <nome-elemento> conteúdo </nome-elemento> Estruturando o seu HTML • A estrutura geral da página é definida através das tags: <HTML>, <HEAD> e <BODY> XHTML • • • • • • Extensible Hypertext Markup Language Separação de conceitos como Apresentação e Estruturação de um documento WEB. Baseada na HTML – Tecnologia legada da W3C. Também baseada no XML. HTML => Dados +Estrutura + formatação XHTML => Dados +Estrutura XHTML x HTML • • • 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 – <p> texto de parágrafo <em>enfatizado.</p></em> CORRETO – <p> texto de parágrafo <em>enfatizado</em>.</p> XHTML x HTML • • Nomes de elementos e atributos devem sempre estar em minúsculo. – <li> and <LI> (ERRADO) Em HTML 4 alguns elementos permitem a omissão da tag de fechamento. Em XHTML isso não é permitido. – ERRADO <p>isto é um paragrafo.<p>isto é outro parágrafo. – CORRETO <p>isto é um paragrafo.</p><p>isto é outro parágrafo.</p> XHTML x HTML • • Nomes de elementos e atributos devem sempre estar em minúsculo. – <li> and <LI> (ERRADO) Em HTML 4 alguns elementos permitem a omissão da tag de fechamento. Em XHTML isso não é permitido. – ERRADO <p>isto é um paragrafo.<p>isto é outro parágrafo. – CORRETO <p>isto é um paragrafo.</p><p>isto é outro parágrafo.</p> XHTML x HTML • Todos os valores de atributos precisa estar entre aspas duplas (“”) – ERRADO <td rowspan=3> – CORRETO <td rowspan="3"> • Todo atributo tem que ter uma valor associado. – ERRADO <input name=“masculino” type = “radio” value=“M” checked /> – CORRETO <input name=“masculino” type = “radio” value=“M” checked=“checked” /> 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 /> – ERRADO <br><hr> – CORRETO <hr></hr> <br /><hr /> XHTML x HTML • • 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. – ERRADO <img src="imagem.gif" name="minha_imagem" /> – CORRETO • <img src="imagem.gif" id="minha_imagem" /> Por razões de compatibilidade com browsers antigos você pode usar ambos os atributos como abaixo <img src="imagem.gif" id="minha_imagem" name="minha_imagem" /> XHTML x HTML • Pontos de Âncora – Em HTML <p><a name="topo" >Início</a > do parágrafo..bla...</p> – Em XHTML adicione o atributo id <p><a id="topo" name="topo" >Início</a > do parágrafo..bla...</p> • Atributo alt para imagens – Em XHTML seu uso é obrigatório, mesmo que esteja com um espaço vazio <img src="imagem.gif" alt ="minha_imagem " /> <img src="imagem.gif" alt =" " /> XHTML x HTML • Cuidado com código gerado pelos editores de HTML – ERRADO onMouseOver=function() – CORRETO • onmouseover=function() Caracter & (e comercial) – ERRADO Comercio & Exportação – CORRETO Comércio & Exportação Estruturando um site • 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” Estruturando um site • Dentro do corpo (body) encontram-se elementos para representar: Comentários; Divisões; Títulos; Textos; Imagens; Links; Listas; Tabelas; Formulários. Estruturando um site • 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 Estruturando um site - html • • • • As tags <html> e </html> indicam respectivamente o início e o fim de um documento; Indica que se trata de um documento html ou xhtml. Devem englobar todas as tags; Na XHTML deve possuir um atributo associado a tag html: – <html xmlns=https://www.w3.org/1999/hhtml> Estruturando um site - head • • • Delimitam a seção de cabeçalho do documento; Não fazem parte do corpo do documento e não serão exibidas; Dentro da tag <head> ... </head> ficam encontrados as seguintes tags: – – – – meta; link; style; title. Estruturando um site - meta • • • • • 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; 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. Identificador: http-equiv ou name. 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. <meta name="description" content="site exemplo de padrões W3C" /> • Palavras chave que identificam o documento. É utilizado pelos mecanismos de busca. <meta name="keywords" content="html, xhtml, css, w3c" /> • Identificação dos autores do documento WEB. <meta name="author" content="Bruno Abreu, Carlos Eduardo" /> • Define informações sobre os direitos autorais do documento WEB. <meta name="copyright" content="Faculdade Marista" /> Estruturando um site - meta • Define endereço de email para contato. <meta name=“reply-to” content=“[email protected]” /> • Define a lingua utilizada no site. <meta name=“language” content=“pt-br” /> Estruturando um site – link / style link: Adicionam informações externas relacionadas ao documento html. Como Por exemplo, arquivos CSS. <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="/style/astro.css" /> .... </ head> </html> 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Compra de Livros on-line</title> ... </head> <body> ... </ body> </html> 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: ➢ ➢ ➢ 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. Estruturando um site – parágrafo • Existe uma tag especial para definição de parágrafos – Separação do texto em blocos – A tag <p> é utilizada para tal fim <p> Este é um parágrafo. </p> Estruturando um site – parágrafo • • Por padrão os parágrafos são alinhados à esquerda da página. É 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) <p align="center"> Texto do Parágrafo</p> Estruturando um site – cabeçalho • Tags utilizadas para estruturar páginas Web – Útil para separar informações de acordo com sua relevância • Existem 6 tags de título <h1>, <h2>, <h3>, <h4>, <h5> ou <h6> Maior Tamanho de Fonte Menor Estruturando um site – cabeçalho Combinando Títulos e Cabeçalhos Como seria o Código HTML desta Página?? Resposta.... Estruturando um site – texto • TAGS: – <em>... </em >: Enfatizar o texto, geralmente os navegadores mostram em itálico. – <strong>...</strong >: Dá uma ênfase mais forte ao texto, geralmente os navegadores mostram em negrito. Estruturando um site – quebra de linha • 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 <br> Em HTML esta Tag não tem a correspondente fechando!!! Estruturando um site – quebra de linha - Exemplo Estruturando um site linha horizontal • • • Utilizado para dividir regiões do documento horizontalmente. Em HTML a linha horizontal é feita com o uso da tag <hr> Para compatibilizar com XHTML deve-se escrevela <hr /> Em HTML esta Tag não tem a correspondente fechando!!! Estruturando um site linha horizontal <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Exemplo Body </title> </head> <body bgcolor="yellow" text="black"> <p> Parte superior a linha <hr /> Parte que vem após a linha horizontal. </p> </body> </html> Estruturando um site – DIV • • • • • É um Container; Permite que o documento seja dividido em blocos; 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. Atributos: id, class, style, title, dir, lang e eventos intrínsecos. Estruturando um site – Divisões Estruturando um site – Divisões Estruturando um site – imagem • 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 Estruturando um site – imagem • A tag <img> é utilizada para inserir imagens em páginas HTML • Não deve vir solta dentro do <body> • Atributos: – src: Indica a localização da imagem (URL) <img src=“imagens/logo.gif” /> Estruturando um site – imagem como.gif Estruturando um site – imagem • O caminho da imagem pode ser – Relativo; – Absoluto; – Ou uma URL completa. <img src = “imagem.gif” /> <img src = “../imagem.gif” /> <img src = “http://www.xyz.com/exemplo.gif” /> Estruturando um site – imagem • 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. Estruturando um site – links • 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 – Palavras ou Trechos de texto – Imagens Estruturando um site – links • A tag <a> é utilizada para se criar links – Deve-se definir qual o destino – Qual o elemento que será o link <a href=“arquivo_destino”>Um texto qualquer</a> Destino Link Estruturando um site – links Estruturando um site – links • Propriedade target – Possibilita controlar a janela do browser onde o link será aberto <a href=“teste.html” target=“valor”> Link de teste </a> – Pode ter um dos seguintes valores – _blank Abre em uma nova Janela – _self Abre na própria Janela Estruturando um site –Tipos de listas • Listas numeradas • Listas com marcadores • Listas de glossário Estruturando um site –Tipos de listas Listas com marcadores Listas de glossário Listas numerada Estruturando um site – listas numeradas • Também conhecidas como listas ordenadas • Utiliza-se a tag <ol>...</ol> – OL Abreviação para Ordered List – Cada item da lista é adicionado através da tag <li>...</li> Estruturando um site – listas numeradas <ol> <li>item de uma lista numerada </li> <li>item de uma lista numerada, que pode ser tão grande quanto se queira </li> <li>item de lista numerada </li> </ol> Estruturando um site –Tabelas • • • Úteis para apresentar informações de forma tabular. Foram muito usadas para a organização dos elementos em uma página Web. Suas células podem ter como conteúdo – – – – Textos Links Figuras Etc. Estruturando um site –Tabelas Partes da Tabela • • • • • Título Cabeçalho Células Dados Rodapé Lista de Compras Produto qtd. Maçã 4 Pera 10 uva 15 Laranja 12 Total 41 Exemplo 1 Formulários • Oferece uma maior interatividade com o usuário • Exemplos de uso – Pesquisa de informações – Cadastro – Envio de mensagens Formulários • Tag <form>: Servem como contêiner para os vários elementos de formulário que os compõem. <form> <input type=“text” /> <input type=“submit” value=“enviar!” /> </form> Formulários • Aprenda mais sobre formulários e suas aplicações em: • http://www.maujor.com/tutorial/cssforms.php ATIVIDADE 1) Reproduza o código em HTML para termos o mesmo resultado da imagem abaixo: ATIVIDADE Prazo para postagem: 28/09/2013 até às 23h55 • Evite enviar a postagem de sua atividade no último dia. Imprevistos podem ocorrer; • Sua organização e pontualidade também estão sendo avaliadas; •Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF). DÚVIDAS... Acesse o Fórum de dúvidas e discussões Diariamente. Chat na Terça-Feira 24/09/2013 19h00 as 20h30 FERRAMENTAS DE APOIO • Apostilas e vídeos do AVASIS; • Fórum durante o módulo com resposta em até 06 horas úteis; • Email do professor: [email protected] POR HOJE É SÓ! • PRÓXIMA AULA: – Implementação HTML/CSS • SIGA-ME: – Facebook.com/iranpontes – Twitter.com/iranpontes – www.designculture.com.br POR HOJE É SÓ! "Qual de vocês, se quiser construir uma torre, primeiro não se assenta e calcula o preço, para ver se tem dinheiro suficiente para completá-la? Pois, se lançar o alicerce e não for capaz de terminála, todos os que a virem rirão dele, dizendo: ‘Este homem começou a construir e não foi capaz de terminar”. Lucas 14:28-30
Download
