Slides Aula Mini Curso Linguagem HTML

Curso
Construção de Páginas
para a Internet
Prof. Fernando Schütz, M.Sc.

UTFPR
Campus Pato Branco
fschutz@pb.cefetpr.br
Internet
z International Network
• WAN
• DoD/ARPA
• ARPANet: 1969
• Universidades e org. comerciais: USENET (1974)
• Ligação com outras redes (protocolos): 1982 – ARPANet e
MILNet
• IAB (Internet Activities Board):
• Nortear a evolução: 1983
• NSF (National Science Foundation):
• NFSNet: 1986
• Brasil
• Início 1989/1990, porém comercial em 1995 (Embratel)
Rede de Redes
Backbones – Protocolos – Internet Society e W3C
1
wwwWWWwww
z Definição
• “Iniciativa de busca de informação hipermídia a longa
distância visando dar acesso a um vasto universo de
documentos".
z Permitir que usuários em rede um acesso
compatível a inúmeras mídias de maneira
simples.
z WEB
• Março de 1989, Tim Berners-Lee do CERN
• Meio de transportar efetivamente pesquisa e idéias
através da organização.
Hipertexto e Hipermídia
z Hipertexto
• Meio de interação com os usuários.
• O mesmo que um texto regular - pode ser
armazenado, lido, ou editado - com uma importante
diferença: o hipertexto contém conexões dentro do
texto para outros documentos.
• Links hipertexto (hyperlinks) podem criar uma
complexa "teia" (web) virtual de conexões.
z Hipermídia
• Hipertexto com uma diferença: links para formas de
mídia - sons, imagens, e filmes
Browser
z NSCA Mosaic, Netscape, Microsoft....
• Interface gráfica orientada por mouse.
• Exibição de documentos hipertexto e hipermídia.
• Exibição de texto numa grande variedade de fontes
• Formatação de documentos (parágrafos, listas, etc.)
• Suporte para sons
• Suporte para filmes
• Exibição de caracteres definidos no conjunto ISO 8859
• Suporte para formulários eletrônicos interativos
• Suporte para gráficos interativos (em GIF, XBM e JPEG).
• Links hipermídia
2
Cliente/Servidor
Endereços
z Endereço IP
• 192.168.1.1
z URL/URI
• http://www.md.cefetpr.br/fschutz/index.html
z Domínio
• com, edu, gov, mil, net, org
• aero, biz, coop, info,museum, name, pro
• agr.br, far.br, imb.br, ato.br, pol.br, etc...
HTML
HyperText Markup
Language
3
HTML
z Uso de TAG’s
• <comando atributo=“valor”> ... </comando>

z Regras?
• Case insensitive
• Fechamento
• Ordem
• Caracteres Especiais
exemplo
Formatação
Página
z Corpo da Página
• <body
bgcolor=“cor”
background=“imagem”
text=“cor”
link=“cor”
vlink=“cor”
alink=“cor”>
exemplo
4
Círculo Cromático
Cores
RRGGBB
Hexadecimal
8 bits para cada cor x 3 cores = 224 (16.777.216)
Cores
White rgb=#FFFFFF Forest Green rgb=#238E23 Orchid rgb=#DB70DB
Red rgb=#FF0000 Gold rgb=#CD7F32 Pale Green rgb=#8FBC8F
Green rgb=#00FF00 Goldenrod rgb=#DBDB70 Pink rgb=#BC8F8F
Blue rgb=#0000FF Grey rgb=#C0C0C0 Plum rgb=#EAADEA
Magenta rgb=#FF00FF Green Copper rgb=#527F76 Quartz rgb=#D9D9F3
Cyan rgb=#00FFFF Green Yellow rgb=#93DB70 Rich Blue rgb=#5959AB
Yellow rgb=#FFFF00 Hunter Green rgb=#215E21 Salmon rgb=#6F4242
Black rgb=#000000 Indian Red rgb=#4E2F2F Scarlet rgb=#8C1717
Aquamarine rgb=#70DB93 Khaki rgb=#9F9F5F Sea Green rgb=#238E68
Baker's Chocolate rgb=#5C3317 Light Blue rgb=#C0D9D9 Semi-Sweet Chocolate rgb=#6B4226
Blue Violet rgb=#9F5F9F Light Grey rgb=#A8A8A8 Sienna rgb=#8E6B23
Brass rgb=#B5A642 Light Steel Blue rgb=#8F8FBD Silver rgb=#E6E8FA
Bright Gold rgb=#D9D919 Light Wood rgb=#E9C2A6 Sky Blue rgb=#3299CC
Brown rgb=#A62A2A Lime Green rgb=#32CD32 Slate Blue rgb=#007FFF
Bronze rgb=#8C7853 Mandarian Orange rgb=#E47833 Spicy Pink rgb=#FF1CAE
Bronze II rgb=#A67D3D Maroon rgb=#8E236B Spring Green rgb=#00FF7F
Cadet Blue rgb=#5F9F9F Medium Aquamarine rgb=#32CD99 Steel Blue rgb=#236B8E
Cool Copper rgb=#D98719 Medium Blue rgb=#3232CD Summer Sky rgb=#38B0DE
5
Layout de Textos
z Cabeçalhos (Títulos/Headers)
• <h1>Cabeçalhos de nível 01</h1>
exemplo
Layout de Textos
z Parágrafos
• <p align=“center, left, right”>
texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto
</p>
z Quebras de linha
• texto texto texto texto texto <br>
z Linhas horizontais
• <hr size=“x” color=“x” width=“x” align=“x”>
exemplo
Formatação do Texto
Comando Sintaxe
Negrito <B> texto </B>
Itálico <I> texto </I>
Sublinhado <U> texto </U>
Typerwriter <TT> texto </TT>
Big <BIG> texto </BIG>
Small <SMALL> texto SMALL>
Sobrescrito <SUP> texto </SUP>
Subscrito <SUB> texto </SUB>
Pulsante <BLINK> texto</BLINK>
exemplo
6
Formatação de Textos
z <font>....</font>
• Tamanho (1 a 7):
• <font size=“1”>...</font>
• Tipo
• <font face=“Verdana”>...</font>
• Cor
• <font color=“blue”>...</font>
exemplo
Listas
Listas Simples
z Listas Ordenadas
• <ol>
<li>Primeiro item</li>
<li>Segundo item</li>
</ol>
z Listas Não-Ordenadas
• <ul>
<li>Primeiro item</li>
<li>Segundo item</li>
</ul>
exemplo
7
Lista Aninhadas
z Ordenadas e não-ordenadas
• <ol>
<li>Primeiro ordenada</li>
<li>Segundo ordenada</li>
<ul>
<li>Primeiro não-ordenada</li>
<li> Segundo não-ordenada</li>
</ul>
<li>Terceiro ordenada</li>
exemplo
</ol>
Âncoras e Ligações
Âncoras
z Pontos de referência na página
• <a name=“identificação”>Texto</a>
• <a name=“intro”>
<h1>Introdução</h1>
</a>
.....
<a name=“cap1”>
<h1>Capítulo 01</h1>
</a>
8
Ligações
z Locais
• <a href=“#nome”>Vai para nome</a>
<a href=“#intro”>Introdução</a>
<a href=“#cap01”>Capítulo 01</a>
<a href=“#cap02”>Capítulo 02</a>
exemplo
Ligações
z Externas
• <a href=“url”>Local/Página</a>
<a href=“http://www.pb.cefetpr.br>
CEFET – Unidade Pato Branco
</a>
• Onde abrir: <a href=“url” target=“?”>

• _blank, _self, _top, _parent nome_frame,
Ligações
z Externas (cont)
• <a href=“url#nome>Local/Página local</a>
<a href=“http://www.li.com/texto.html#cap01>
Livro li – Capítulo 01
</a>
• <a href=“pagina.html” target=“_blank”>
Vai para a página
</a>
exemplo
9
Imagens
Imagens
z Informar a localização
• <img src=“url/arquivo.ext”>
• <img src=“http://www.site.com/imagem.jpg”>
z Posicionamento
• <img src=“img.gif” align=“top”>
• <img src=“img.gif” align=“bottom”>
• <img src=“img.gif” align=“middle”>
• <img src=“img.gif” align=“center”>
• <img src=“img.gif” align=“right”>
exemplo
Imagens
z Imagem como links
• <a href=“http://www.pb.cefetpr.br”>
<img src=“logo_cefet.gif">
</a>
z Alternativas
• <img src=“ img.gif” alt=“significado”>
z Especificar tamanhos
• <img src=“img.gif” width=“x” height=“y”>
exemplo
10
Tabelas
Tabelas
z Marcas da tabela
• <table>...</table>
• border
• bordercolor
• cellpadding
• cellspacing
• width
• <table border=“1”>...</table>
• <table cellpadding=“0”>...</table>
• <table cellspacing=“0”>...</table>
exemplo
Tabelas
z Linhas e Colunas
• <tr>...</tr>
• <th>...</th>
• <td>...</td>
z Atributos
• align
• valign
• nowarp
• bgcolor
exemplo
11
Tabelas
z Mesclar linhas
• <td rowspan=“valor”>...</td>
z Mesclar colunas
• <td colspan=“valor”>...</td>
exemplo
Formulários
Formulários
z <form
name=“nome”
method=“get/post”
action=“ação”>...</form>
12
Entradas de Dados
• <form method=“get" action=“#">
qual o seu primeiro nome?
<input type="text"
name="primeiro_nome“
value="carlos"
size="10"
maxlength="15">
</form>
Entradas de Dados
informe sua senha de acesso (8 caracteres):
<input type="password"
value="xpto"
name="sua_senha"
size="8"
maxlength="8">
</form>
exemplo
Entradas de Dados
Por favor, escreva aqui suas sugestões,
dúvidas e críticas:<br>
<textarea name="critica" rows="3" cols="40">
gostaria de obter mais informações sobre
este servidor. grato.
</textarea>
</form>
exemplo
13
Entradas de Dados
onde você pretende fazer turismo nas férias?
<select name="lugares_para_ver">
<option>Fortaleza</option>
<option value="sul">Floripa ou Curitiba</option>
<option>Rio de Janeiro</option>
<option selected>Brasília </option>
<option value="amazonia">Manaus </option>
</select>
</form>
exemplo
Entradas de Dados
z <form method=“get" action=“#">
<input type="checkbox" name="boletim" checked>
sim, eu desejo receber o boletim de notícias.
<p>
<input type="checkbox" name="info">
sim, eu gostaria de receber mais informações
turísticas.
</form>
exemplo
Entradas de Dados
z <form method=“get" action=“#">
suas preferências na viagem:
classe do bilhete:
<input type="radio" name="classe" value="eco">econômica
<input type="radio" name="classe" value="exe">executiva
<input type="radio" name="classe" value="pri"
checked>primeira localização:
<input type="radio" name="local" value="frente">área fumante
<input type="radio" name="local" value="tras">área não
fumante
</form>
exemplo
14
Entradas de Dados
<form method=“get" action=“#">
qual o seu primeiro nome?
<input type="text">
<br>aperte este botão:
<input type="radio" name="nada"><br>
<input type="reset" value="limpa campos">
<input type="submit">
</form>
exemplo
Frames
Frames
z Arquivo de “conjunto de frames”
• <frameset rows=“x,y” cols=“x,y”>..</frameset>
• x e y são os tamanhos de linhas e colunas
• 3 linhas
• <framset rows=“20%,*,10%”>...</frameset>
• 2 colunas
• <frameset cols=“180,*”>...</frameset>
15
Frames
z Definição de cada frame
• <frame src=“http://www.google.com”
name=“home”
marginwidth=“5”
marginheight=“5”
scrolling=“no”
noresize>
Frames
z Conjunto de frames completo
• <frameset cols=“200,*”>
<frame src=“menu.html” name=“menu” noresize>
<frameset rows=“50%,50%”>
<frame src=“meio1.html” scrolling=“no”
name=“meio_cima”>
<frame src=“meio2.html” name=“meio_baixo”>
</frameset>
</frameset>
exemplo
Ligação entre frames

z Usar a diretiva target
• <a href=“xx” target=“nome_do_frame”>

vai para o frame
</a>
exemplo
16
Idéias para Design
Gestalt
z Conceito
• Conjunto de
informações
representadas por
elementos gráficos
(cor, tipografia,
imagens) que juntos
transmitem uma idéia.
Sites originais
z http://www.noedesign.com
z http://www.piperboy.com
z http://www.deliriumest.be
z http://www.jmfotografias.cjb.net
z http://www.imaginationcubed.com
z http://fernandonieto.free.fr
17
Diagramação
z Legibilidade
• Usuários decompõem o texto
• Destacar palavras-chave
• Divida o texto com títulos
• Faça listas por tópicos
• Preferência a vários parágrafos e pequenos
• Utilizar menos palavras
• Ilustrar o texto com imagens
• Contraste entre o texto e o fundo
• Utilizar HIPERTEXTO
Diagramação
z Alinhamento
• Esquerdo
• Confortável, pois resulta em comprimentos
diferentes para cada linha (usuário ñ se perde)
• Direita
• Parágrafos curtos e opções estéticas
• Justificado
• Massa de texto quadrada
• Centralizado
• Somente em títulos
Áreas do site
18
Psicologia das Cores
z Branco: limpeza, ofuscante, pureza, luz, paz casamento,
hospital, harmonia
z Preto: austero. Com branco é moderno.
Preponderantemente masculina. Nobreza
z Cinza: duvidosa e neutra. Indecisão e ausência de energia.
Chuva, máquinas, velhice
z Vermelho: força, virilidade, masculinidade, dinamismo.
Exaltante e enervante. Quente
z Laranja: Irradiação, expansão, acolhedor, íntimo, outono,
pôr-do-sol, festa, comida, movimento

z Amarelo: estimula a criatividade, luz, esperança, atenção,
excesso é cansativo, conversação
z Verde: natureza, frescor, harmonia, equilíbrio. Claro
tranqüiliza, escuro eficiência, juventude
z Azul: segurança e confiança, tranqülidade. Exagero
deprime. Maturidade. Clara higiene
z Roxo: meditação, místico, mistério, egoísmo, nobreza,
doença, fantasia
z Marrom: maciço, denso, compacto. Segurança, solidez.
z Rosa: feminilidade e afeição, doçura, romântica

z Depende da cultura de países
• Vermelho
• EUA: Perigo ou Pare
• China: Felicidade
• Verde
• Egito: fertilidade e força
• EUA: seguro, prossiga
• França: criminalidade
z Veja o público alvo
19
Cores
• Luminâncias de uma mesma cor
• Evitar cores opostas do círculos cromático
• Compor baseado na temperatura das cores
• Branco como área de “respiração”
• Cor quente predomina sobre fria
• Prevalecendo as cores frias, pequenas áreas de cores quentes
chamarão atenção
• Contrastes
• Chamar a atenção
• Legibilidade
• Manter a diferença de cores entre links (visitados/ñ)
Tipografia
• Fontes fantasia (desenhadas) apenas para títulos
• Blackadder ITC
• Maiandra GD
• Textos corridos, melhor fontes nativas como
•Verdana
• Tahoma
• Arial
• Evitar a serifa
•Courier e Times
Imagens
• Cada forma inserida na estrutura deve ser
considerada como elemento do esquema total
• Produtos
• Cortes, eliminando elementos não-informativos
• Redução pode deixar a imagem muito abstrata
• Utilizar o mesmo tratamento gráfico para todas
• Quanto mais elementos destacados, menos
importância será dada a cada um
20
Exemplos
z Harmonia
• http://fragrance.tommy.com
• http://www.nikeid.com
• http://www.carolinaherrera.com
z Desequilíbrio
• http://www.saquaonline.com.br
• http://www.bandasdechile.cl
• http://www.paopaws.com
z Imagens
• http://www.gallaher.com.au
• http://www.theheadsofstate.com
• http://www.gradiente.com/site/shopping
• http://www.31three.com
CSS
Cascading Style Sheets
Adicionando Estilos
z Adicionando estilo localmente
• <tag STYLE="propriedade:valor;”>
z Adicionando estilo geral

• <html>
<style type="text/css">

<body></body>
</html>
z <head>
<link rel=“stylesheet” href="exemplo.css" type="text/css">
</head>
Códigos para Formatação
22
Fontes
z color
z font-family
z font-size
z font-weight
z font-style
z text-transform
• uppercase, lowercase, capitalize
z text-decoration
• overline, underline, line-trought, blink, none
Parágrafos
z line-height
z text-align
z text-indent
z margin-left (top, right, bottom)
z padding-right (top, left, bottom)
z border-color, border-width, border-style
• solid, double, dotted, dashed, groove, ridge,
inset, outset
Imagens
z color
z background-color
z background-image
• url (descrição da url)
z background-repeat
• repeat-x, repeat-y, no-repeat
z background-attachment
• fixed
z background-position
• horizontal vertical
23
Camadas
z position
• relative
• absolute
z left, top
z width
z z-index
Photoshop
Photoshop
• Novo arquivo
• Criar divisões
• Camadas
• Pintar (preencher)
• Texto
• Propriedades da Camada
• Transformação e transformação livre
• Seleção
• Ajustes da Imagem
• Fatias e conteúdo WEB
24
Dreamweaver
Dreamweaver
Familiarizando-se
• Configurar o site
• Editar as configurações gerais
• Propriedades da página
• Menu específico
• Barra de propriedades
• Visualização
• Código
• Design
• No Browser
25
Formatações
• Formatar o texto
• Quebras de linha e parágrafo (Shift+enter)
• Linha horizontal (insert)
• Inserir figuras
• Definir hiperlinks
• Definir mapas para imagens
Objetos
• Adicionar arquivos multimídia
• Adicionar formulários
• Inserindo tabelas
• Ordenando dados
Estilos
• Atribuindo estilos em cascata
• Definir novos estilos
• Modificar estilos existentes
• Criar DHTML
• Botões Rollover
• Camadas e linhas de tempo
26
Javascript
Inserindo código
• <html>
<head>
<script language=“javascript”>
...
</script>
</head>
</html>
exemplos
Obrigado pela presença
fschutz@pb.cefetpr.br
27

Slides Aula Mini Curso Linguagem HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Slides Aula Mini Curso Linguagem HTML

Transféré par

Droits d'auteur :

Formats disponibles

Curso

Prof. Fernando Schütz, M.Sc.

Backbones – Protocolos – Internet Society e W3C

• <comando atributo=“valor”> ... </comando>

• Onde abrir: <a href=“url” target=“?”>

Ligação entre frames

• <a href=“xx” target=“nome_do_frame”>

Psicologia das Cores

Psicologia das Cores

Cascading Style Sheets

z Adicionando estilo geral

Adicionando estilos Global

Códigos para Formatação

Obrigado pela presença

Vous aimerez peut-être aussi