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 &amp; 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

Estruturando um site