slides aula mini curso linguagem html

1

CursoConstrução de Páginas

para a Internet

Prof. Fernando Schütz, M.Sc.

UTFPR Campus Pato Branco

[email protected]

InternetInternational 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

2

wwwWWWwww

Definição• “Iniciativa de busca de informação hipermídia a longa

distância visando dar acesso a um vasto universo de documentos".

Permitir que usuários em rede um acesso compatível a inúmeras mídias de maneira simples. 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

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.

Hipermídia• Hipertexto com uma diferença: links para formas de

mídia - sons, imagens, e filmes

BrowserNSCA 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

3

Cliente/Servidor

Endereços

Endereço IP• 192.168.1.1

URL/URI• http://www.md.cefetpr.br/fschutz/index.html

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 MarkupLanguage

4

HTMLUso de TAG’s• <comando atributo=“valor”> ... </comando>

Regras?• Case insensitive

• Fechamento

• Ordem

• Caracteres Especiaisexemplo

Formatação

Página

Corpo da Página• <body

bgcolor=“cor”background=“imagem”text=“cor”link=“cor”vlink=“cor”alink=“cor”>

exemplo

5

Círculo Cromático

Cores

RRGGBBHexadecimal

8 bits para cada cor x 3 cores = 224 (16.777.216)

CoresWhite rgb=#FFFFFF Forest Green rgb=#238E23 Orchid rgb=#DB70DBRed 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

6

Layout de Textos

Cabeçalhos (Títulos/Headers)• <h1>Cabeçalhos de nível 01</h1>• <h2>Cabeçalhos de nível 02</h2>• <h3>Cabeçalhos de nível 03</h3>• <h4>Cabeçalhos de nível 04</h4>• <h5>Cabeçalhos de nível 05</h5>• <h6>Cabeçalhos de nível 06</h6>

exemplo

Layout de Textos

Parágrafos• <p align=“center, left, right”>

texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto</p>

Quebras de linha• texto texto texto texto texto <br>

Linhas horizontais• <hr size=“x” color=“x” width=“x” align=“x”>

exemplo

Formatação do Texto

<BLINK> texto</BLINK>Pulsante<SUB> texto </SUB>Subscrito<SUP> texto </SUP>Sobrescrito<SMALL> texto SMALL>Small<BIG> texto </BIG>Big<TT> texto </TT>Typerwriter<U> texto </U> Sublinhado<I> texto </I>Itálico<B> texto </B>Negrito

SintaxeComando

exemplo

7

Formatação de Textos

<font>....</font>• Tamanho (1 a 7):

• <font size=“1”>...</font>

• Tipo• <font face=“Verdana”>...</font>

• Cor• <font color=“blue”>...</font>

exemplo

Listas

Listas Simples

Listas Ordenadas• <ol>

<li>Primeiro item</li><li>Segundo item</li>

</ol>

Listas Não-Ordenadas• <ul>

<li>Primeiro item</li><li>Segundo item</li>

</ul>

exemplo

8

Lista Aninhadas

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>

</ol>exemplo

Âncoras e Ligações

Âncoras

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>

9

Ligações

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

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

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

10

Imagens

Imagens

Informar a localização• <img src=“url/arquivo.ext”>• <img src=“http://www.site.com/imagem.jpg”>

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

Imagem como links• <a href=“http://www.pb.cefetpr.br”>

<img src=“logo_cefet.gif"></a>

Alternativas• <img src=“ img.gif” alt=“significado”>

Especificar tamanhos• <img src=“img.gif” width=“x” height=“y”>

exemplo

11

Tabelas

TabelasMarcas da tabela• <table>...</table>

• border• bordercolor• cellpadding• cellspacing• width

• <table border=“1”>...</table>• <table cellpadding=“0”>...</table>• <table cellspacing=“0”>...</table>

exemplo

Tabelas

Linhas e Colunas• <tr>...</tr>• <th>...</th>• <td>...</td>

Atributos• align• valign• nowarp• bgcolor

exemplo

12

Tabelas

Mesclar linhas• <td rowspan=“valor”>...</td>

Mesclar colunas• <td colspan=“valor”>...</td>

exemplo

Formulários

Formulários

<formname=“nome”method=“get/post”action=“ação”>...</form>

13

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

• <form method=“get" action=“#">informe sua senha de acesso (8 caracteres):<input type="password"

value="xpto" name="sua_senha" size="8" maxlength="8">

</form>

exemplo

Entradas de Dados

• <form method=“get" action=“#">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 sobreeste servidor. grato.</textarea></form>

exemplo

14

Entradas de Dados• <form method=“get" action=“#">

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<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<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ãofumante</form>

exemplo

15

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

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>

16

Frames

Definição de cada frame• <frame src=“http://www.google.com”

name=“home”marginwidth=“5”marginheight=“5”scrolling=“no”noresize>

Frames

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

Usar a diretiva target

• <a href=“xx” target=“nome_do_frame”>vai para o frame

</a>

exemplo

17

Idéias para Design

Gestalt

Conceito• Conjunto de

informações representadas por elementos gráficos (cor, tipografia, imagens) que juntos transmitem uma idéia.

Sites originais

http://www.noedesign.comhttp://www.piperboy.comhttp://www.deliriumest.behttp://www.jmfotografias.cjb.nethttp://www.imaginationcubed.comhttp://fernandonieto.free.fr

18

Diagramação

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

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

19

Psicologia das CoresBranco: limpeza, ofuscante, pureza, luz, paz casamento, hospital, harmoniaPreto: austero. Com branco é moderno. Preponderantemente masculina. NobrezaCinza: duvidosa e neutra. Indecisão e ausência de energia. Chuva, máquinas, velhiceVermelho: força, virilidade, masculinidade, dinamismo. Exaltante e enervante. QuenteLaranja: Irradiação, expansão, acolhedor, íntimo, outono, pôr-do-sol, festa, comida, movimento

Psicologia das CoresAmarelo: estimula a criatividade, luz, esperança, atenção, excesso é cansativo, conversaçãoVerde: natureza, frescor, harmonia, equilíbrio. Claro tranqüiliza, escuro eficiência, juventudeAzul: segurança e confiança, tranqülidade. Exagero deprime. Maturidade. Clara higieneRoxo: meditação, místico, mistério, egoísmo, nobreza, doença, fantasiaMarrom: maciço, denso, compacto. Segurança, solidez.Rosa: feminilidade e afeição, doçura, romântica

Psicologia das CoresDepende da cultura de países• Vermelho

• EUA: Perigo ou Pare• China: Felicidade

• Verde• Egito: fertilidade e força• EUA: seguro, prossiga• França: criminalidade

Veja o público alvo

20

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

21

ExemplosHarmonia• http://fragrance.tommy.com• http://www.nikeid.com• http://www.carolinaherrera.com

Desequilíbrio• http://www.saquaonline.com.br• http://www.bandasdechile.cl• http://www.paopaws.com

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 EstilosAdicionando estilo localmente• <tag STYLE="propriedade:valor;”>

Adicionando estilo geral• <html>

<style type="text/css"><!--h1 {font: 20pt "Trebuchet MS, Arial, Helvetica"; color: red}p {font: 12pt "Corrier, Times"; color: black}

-- > </style>

<body>Conteúdo da página

</body></html>

22

Adicionando Estilos

Especificação geral• <body></body></html> <head><link rel=“stylesheet” href="exemplo.css" type="text/css">

</head>

Códigos para Formatação

23

Fontes

colorfont-familyfont-sizefont-weightfont-styletext-transform• uppercase, lowercase, capitalize

text-decoration• overline, underline, line-trought, blink, none

Parágrafos

line-heighttext-aligntext-indentmargin-left (top, right, bottom)padding-right (top, left, bottom)border-color, border-width, border-style• solid, double, dotted, dashed, groove, ridge,

inset, outset

Imagenscolorbackground-colorbackground-image• url (descrição da url)

background-repeat• repeat-x, repeat-y, no-repeat

background-attachment• fixed

background-position• horizontal vertical

24

Camadas

position• relative• absolute

left, topwidthz-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

25

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

26

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

27

Javascript

Inserindo código

• <html><head><script language=“javascript”>...</script></head></html>

exemplos

Obrigado pela presença

[email protected]

slides aula mini curso linguagem html

Documents