FTIN - Módulo de WebDesign

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

IMPLEMENTAÇÃO HTML/CSS
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 ( Opera (

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 , 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. ERRADO CORRETO
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 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. <input name=“masculino” type = “radio” value=“M” checked /> <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 Atributo alt para imagens 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) Comercio & Exportação 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=

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.

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" />

Define endereço de para contato. <meta name=“reply-to” /> 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" " <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> Tamanho de Fonte Maior 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 escreve- la <hr /> Em HTML esta Tag não tem a correspondente fechando!!!

Estruturando um site linha horizontal
<html xmlns=" 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 – 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

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

como.gif

O caminho da imagem pode ser Relativo; Absoluto; Ou uma URL completa. <img src = “imagem.gif” /> <img src = “../imagem.gif” /> <img src = “ />

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

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> Link Destino

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 numerada Listas de glossário

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 Lista de Compras Título Cabeçalho Células Dados Rodapé 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:

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

Atividade Prazo para postagem: 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

Ferramentas de apoio Apostilas e vídeos do AVASIS;
Fórum durante o módulo, com resposta em até 6 horas úteis; do professor:

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

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

FTIN - Módulo de WebDesign

Apresentações semelhantes

Apresentação em tema: "FTIN - Módulo de WebDesign"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

FTIN - Módulo de WebDesign

Apresentações semelhantes

Apresentação em tema: "FTIN - Módulo de WebDesign"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback