FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO...

FTIN - Módulo de WebDesign

Prof. Ítalo Araújo

IMPLEMENTAÇÃO HTML/CSSFTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

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

http://www.firefox.st/pt/

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

Solicita página (http)

NAVEGADOR

Envia o conteúdodo arquivo

Formata a Informação

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

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


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


• 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>

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.


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 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 externasrelacionadas 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>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

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 MenorTamanho de Fonte

Estruturando um site – cabeçalho

Combinando Títulos e Cabeçalhos

Como seria o Código HTMLdesta 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

• 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

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 – 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 = “http://www.xyz.com/exemplo.gif” />


• 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>

Destino Link


• 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

• Título• Cabeçalho• Células• Dados• Rodapé

Lista de Compras

Maçã

Produto qtd.

4

Pera 10

uva 15

Laranja 12

Partes da Tabela

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: 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; E-mail 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:– Criando Layouts para Web

• Siga-me:– www.italoaraujo.com– Facebook.com/italoj.araujo– Twitter.com/italoj

http://www.italoaraujo.com/

FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO...

Documents

Transcript of FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO...