HTML

HTML
Prof. Marcos Alexandruk
UNINOVE
WEBDESIGN
SUMRIO
CONCEITOS BSICOS INTERNET INTRANET EXTRANET HIPERTEXTO MULTIMDIA HIPERMDIA BROWSER PROTOCOLOS TCP/IP HTTP HTTPS FTP TELNET DNS HTML CONSIDERAES INICIAIS BLOCOS BSICOS HTML TAGS HTML <html> <head> <title> <meta> <body> <hn> <font> <p> <br> <pre> <hr> <blockquote> <div> <script>  LISTAS LISTAS ORDENADAS <ol> LISTAS NO ORDENADAS <ul> LISTAS DE DEFINIO <dl> LINKS LOCAIS REMOTOS NA PRPRIA PGINA PARA UM E-MAIL TARGET CORES
03 03 03 03 03 03 03 04 04 04 04 05 05 06 07 08 08 08 08 09 09 09 10 10 10 11 11 11 11 11 12 12 12 13 13 13 13 14 14
WEBDESIGN
IMAGENS TIPOS JPEG GIF PNG INSERO MAPEAMENTO SONS INSERO TABELAS <table> <tr> <td> <th> exemplo completo FORMULRIOS form text password radio checkbox reset submit image hidden select textarea exemplo completo FRAMES <frameset> <frame> <noframes> exemplo completo FRAMES FLUTUANTES <iframe> CARACTERES ESPECIAIS E ACENTUAO TABELAS DE CORES HTML STANDARD COLORSET HTML EXTENDED COLORSET
15 15 15 15 16 17 18 18 18 18 19 19 19 19 19 20 20 20 21 21 21 21 22 23 24 24 25 26 27 28 28
WEBDESIGN
CONCEITOS BSICOS INTERNET

Rede mundial de informao, a rede das redes. Criada nos EUA, tornou-se uma associao mundial de redes interligadas. Utiliza a arquitetura de protocolos de comunicao TCP/IP.
INTRANET
Redes corporativas que utilizam da tecnologia de comunicao utilizada pela INTERNET. Utilizadas na comunicao interna da prpria empresa.
EXTRANET
Conjunto de INTRANETS interligadas atravs da INTERNET.
HIPERTEXTO
Um mtodo de acoplamento de informaes relacionadas sem a necessidade de um sistema hierrquico ou de menus. O usurio pode navegar atravs de um documento seguindo as ligaes (links) pr-definidas.
MULTIMDIA
Combinao interativa de textos, grficos, animaes, imagens, udio e vdeo exibidos por e sob o controle de um PC.
HIPERMDIA
Combinao de HIPERTEXTO e MULTIMDIA. O usurio pode ler um texto, visualizar uma imagem, animao ou vdeo e ouvir um udio.
BROWSER
Software que fica do lado cliente utilizado para apresentar os documentos na tela do PC. Atravs do BROWSER possvel ler, imprimir, visualizar imagens e ouvir udio.
WEBDESIGN
PROTOCOLOS
Protocolo de rede um conjunto de regras utilizadas pelos computadores de uma rede para estabelecer a comunicao entre eles. Assim como na lingugem falada, onde duas pessoas somente se comunicam se falarem a mesma lngua, dois computadores s podem se comunicar se utilizarem o mesmo protocolo.
TCP/IP (Transmition Control Protocol/Internet Protocol)

um conjunto de protocolos de comunicao utilizado para troca de dados entre computadores em ambientes de redes locais e/ou remotas. A arquitetura TCP/IP surgiu em 1975 na rede Arpanet (criada em 1969 pela ARPA - Advanced Research Projects Agency rgo do departamento de defesa dos EUA). As especificaes dos protocolos TCP/IP so pblicas e genricas, o que permite sua implementao por diversos fabricantes. Todos os sistemas operacionais atuais (Windows, Linux, Unix, MacOS, Netware, etc.) fornecem uma implementao do protocolo TCP/IP
HTTP (HiperText Transfer Protocol)

HTTP o protocolo usado pela WWW World Wide Web para transmitir recursos. Um recurso algum tipo de informao que pode ser identificada por um URL Uniform Resource Locator. O tipo mais comum de recurso um arquivo no formato HTML, mas um recurso pode ser o resultado de uma consulta gerada dinamicamente, a sada de um script CGI, uma imagem ou qualquer outra forma de informao.
FTP (File Tranfer Protocol)

O protocolo FTP permite a transferncia de arquivos entre um computador local e um servidor remoto, sendo muito utilizado para upload e download de arquivos na Internet. Permite a nagevao em uma parte da estrutura de diretrios do servidor remoto para a localizao do arquivo desejado. O FTP diferencia arquivos de texto (ASCII) e arquivos binrios (imagens, aplicativos, etc.)
WEBDESIGN
TELNET
O protocolo Telnet permite o acesso tipo terminal a um computador remoto. A conexo a um sistema utilizando o protocolo Telnet permite interagir com o servidor como se estivesse utilizando a console p prprio servidor. possvel executar comandos do sistema operacional a partir de linhas de comandos, executar scripts e utilizar sistemas instalados no host remoto. No processo de conexo solicitado o nome do usurio e a senha para autenticao do terminal remoto.
DNS (Domain Name System)

O servio DNS tem como objetivo facilitar o modo de especificar um host numa rede TCP/IP, utilizando um nome amigvel em vez do seu endereo IP. No servidor DNS so cadastrados os hosts e seus endereos IP. Quando um computador (cliente DNS) precisa saber a qual endereo IP um nome se refere, solicita a resoluo deste nome ao servidor DNS. Para distribuir essa tarefa entre diversos servidores, criou-se uma estrutura hierrquica, agrupando computadores em grupos chamados domnios e instalando um ou mais servidores de DNS para cada domnio.
WEBDESIGN
HTML CONSIDERAES INICIAIS

Para desenvolver um website fundamental conhecer HTML (Hipertext Markup Language ou Linguagem de Hipertexto baseada em Marcas). Produzir um documento HTML muito parecido com o que fazemos ao formatar um texto num editor como o Word. Definiu-se que os documentos HTML fossem gerados num formato muito simples, o txt. Por isso, os documentos HTML podem ser produzidos partir de qualquer editor de texto. No UNIX o vi muito utilizado e no Windows temos o NotePad (Bloco de Notas). MARCAS (TAGS) Para que o contedo de uma pgina Web seja exibido devidamente formatado, utiliza-se as marcas-padro (ou tags, em ingls). Por definio, as marcas so delimitadas pelos sinais < e >. H um conjunto de palavras reservadas que so interpretadas pelo browser, responsvel por apresentar o documento devidamente formatado. Por exemplo, a tag <center> centraliza o texto na pgina, <br> insere uma "quebra" de linha, <b> altera o texto para negrito, etc. A maioria das marcas trabalham em pares, indicando o incio e o fim de um trecho do documento. A marca para finalizar o bloco idntica a do incio, porm precedida por uma barra /. Exemplo: <center> ... </center> Algumas marcas no precisam de complemento ou finalizao. Ex: <br> EDITORES Desde o surgimento do padro HTML surgiram vrios editores especficos para esta linguagem. H dois tipos bsicos: WYSIWYG (What You See IS What You Get o que voc v o que voc obtm). Exemplos: FrontPage e DreamWeaver. Editores com menus especficos da linguagem que apresentam o conjunto de tags conforme padro HTML. Exemplos: FirstPage, HomeSite, HotDog. Embora os editores WYSIWYG estejam cada dia mais sofisticados e ajudem muito na produtividade, importante para o aprendizado da linguagem HTML esquecer um pouco esses produtos e utilizar um editor de textos simples para desenvolver pginas web. H pelo menos dois motivos importantes para conhecer a linguagem apesar das facilidades oferecidas por esses produtos: Os editores WYSIWYG muitas vezes inserem marcaes desnecessrias que so indesejveis para uma pgina "enxuta", que possa ser carregada mais rapidamente. s vezes necessrio fazer um "ajuste fino" nas pginas o que pode ser difcil ou impossvel se contarmos exclusivamente com os recursos de um editor WYSIWYG. WEBDESIGN 7
BLOCOS BSICOS <html> <head> <title>Ttulo da pgina</title> </head> <body> Contedo da pgina </body> </html>
WEBDESIGN
TAGS HTML
<html> ... </html> Indicam o incio e o fim de um documento. Todo o resto deve estar entre estas marcas. <head> ... </head> Delimitam a seo de cabealho do documento. Trata-se da primeira seo do documento. <title> ... </title> Indicam o ttulo do documento, que ser apresentado na barra superior do browser. Estas marcas so internas seo <head> ... </head> <head> <title>Ttulo da pgina</title> </head>
<meta> ... </meta> Utilizada para indicar instrues especiais ao browser do cliente ou servidor, realizando uma operao de anlise gramatical. Estas tags tambm so internas ao cabealho <head> de um documento. <meta name="nome" http-equiv="nome" content="valor"> name http-equiv content Exemplo:
<html> <head> <title>Exemplo marcador meta</title> <meta name="authors" content="Nome do Autor"> <meta name="keywords" content="palavra_chave1, palavra_chave2"> <meta name="description" content="Descricao da pagina ou site"> <meta http-equiv="creation-date" content="01-fev-2004 14:00:00 GMT"> <meta http-equiv="content-type" content="text/html; charset=isso-8859-1"> <meta http-equiv="expires content="31-jan-2005 14:00:00 GMT"> <meta http-equiv="refresh" content="10; URL=refresh.htm"> </head> <body> Dentro de dez segundos a pgina refresh.htm ser exibida. </body> </html>
authors, keywords, description creation-date, content type, expires, refresh depende do valor de name ou http-equiv
WEBDESIGN
<body> ... </body> Marca o incio e o final do corpo da pgina e determina algumas propriedades. Entre estas marcas estar contida a maior parte do contedo a ser apresentado, textos, imagens, etc. <body topmargin="n" leftmargin="n" background="arquivo" bgcolor="cor" text="cor" link="cor" alink="cor" vlink="cor"> ... </body> topmargin leftmargin background bgcolor text link alink vlink <hn> ... </hn> Utilizada para formatar ttulos e subttulos. Podemos utilizar at seis nveis de ttulos ou "headings", que so numerados de 1 (o maior) a 6 (o menor). <h1>Ttulo nvel 1</h1> ... <h6>Ttulo nvel 6</h6> Os elementos de ttulo podem ter o parmetro opcional align: <h1 align="alinhamento">Ttulo nvel 1 alinhado</h1> left right center alinhamento esquerda alinhamento a direita alinhamento centralizado 0, 1, 2 ... 0, 1, 2 ... arquivo.ext #FFFFFF #000000 #0000FF #00FF00 #FF0000 margem superior da pgina margem esquerda da pgina imagem para o fundo da pgina cor de fundo da pgina cor padro do texto da pgina cor dos links da pgina (v. LINKS) cor do link ativo (i.e. clicado) cor dos links j visitados
<font> ... </font> Determina o tamanho, o tipo e a cor da fonte. <font size=n face="tipo da fonte" color="cor"> Texto </font> size face color 1a7 "Times", "Arial", etc. #FFFF00 yellow #00FF00 green Configura o tamanho da fonte Configura o tipo da fonte Configura a cor da fonte
WEBDESIGN
10
Alm das propriedades j citadas, s vezes necessrio destacar palavras e frases. Para isso podemos utilizar as seguintes tags: <b>negrito</b> <i>itlico</i> <u>sublinhado</u> <s>riscado</s> <big>maior</big> <small>menor</small> <sub>subscrito</sub> <sup>sobrescrito</sup> <p> ... </p> Indica o incio e o final (opcional) de um pargrafo. <p align="alinhamento"> Primeiro pargrafo. </p> <p align="alinhamento"> Segundo pargrafo. </p> left direita center justify <br> Insere uma quebra de linha no texto. Neste ponto <br> a linha foi "quebrada" esquerda direita central justificado negrito itlico sublinhado riscado
maior
menor
texto texto
subscrito sobrescrito
<pre> ... </pre> Conserva o texto da mesma forma como foi digitado no editor de textos. <pre> Este texto ter a formatao que foi aplicada pelo editor. </pre>
WEBDESIGN
11
<hr> Desenha uma linha (horizontal) na pgina. <hr size="altura" width="comprimento" align="alinhamento" noshade> size witdh align noshade nmero inteiro (1, 2, 3 ...) comprimento (em pixels ou porcentagem) left, right, center preenche a linha
<blockquote> ... </blockquote> Utilizado para deslocar um bloco de texto. <blockquote> Texto deslocado </blockquote> <div> ... </div> Utilizado para posicionar um elemento (texto, imagem, etc.) na pgina. <div align="alinhamento">Texto ou imagem</div> left direita center justify esquerda direita central justificado
<script> ... </script> Utilizado para inserir o cdigo de uma linguagem de programao voltada Internet (JavaScript, VBScript, etc.). Pode ser inserida dentro do cabealho <head> ou fazer parte do corpo <body> da pgina. <script language="linguagem"> ... Inserir o cdigo da linguagem. </script>
 Utilizado para inserir um comentrio na pgina html. O comentrio no ser visvel, destinando-se basicamente para documentar o cdigo.
WEBDESIGN
12
LISTAS
LISTAS ORDENADAS <ol> Insere uma lista ordenada, com marcadores do tipo: 1, 2, 3, ..., a, b, c, ... <ol type="a"> <li> Item 1</li> <li> Item 2</li> </ol> type: 1, a, I, i, A, ...
LISTAS NO ORDENADAS <ul> Insere uma lista com marcadores diferenciados, sem uma ordem lgica. <ul type="square"> <li>Item 1</li> <li>Item 2</li> </ul> type: disk, square e circle
LISTAS DE DEFINIO <dl> Insere uma lista onde cada item possui uma definio ou descrio do item. <dl> <dt>Item 1 <dd> Descrio 1 <dt>Item 2 <dd> Descrio 2 </dl>
WEBDESIGN
13
LINKS
<a href="arquivo"> ... </a> Um link liga uma pgina a outras pginas, e-mails e a pontos especficos da prpria pgina ou de outras. LOCAIS Link com pginas ou arquivos de um mesmo site (inclusive localizados em outros diretrios ou pastas). <a href="pagina2.htm" title="Texto explicativo">LINK LOCAL</a> ou <a href="./outro_diretorio/pagina2.htm">LINK LOCAL</a> O parmetro title faz com que um texto explicativo (referente ao link) seja exibido prximo ao mouse quando este encontrar-se sobre o link. REMOTOS Link com pginas ou arquivos de outro site. <a href="http://www.outrosite.com.br/pagina2.htm">LINK REMOTO</a>
NA PRPRIA PGINA Link para outras partes da prpria pgina. <a href="#marcador1">LINK NA PRPRIA PGINA</a> <a name="marcador1"></a>Texto ...
PARA UM E-MAIL Este link abre o programa cliente de e-mail do usurio e preenche o campo de cabealho para: com o mesmo valor indicado em mailto: <a href="mailto:destinatario@empresa.com.br">LINK PARA E-MAIL</a>
WEBDESIGN
14
TARGET <a href= ... target= ...> ... </a> Atributo que direciona o browser para exibir o contedo de uma URL em uma janela especfica. <a href="arquivo.ext" target="nome">LINK</a> _blank _parent _self _top carrega o contedo em uma nova janela exibe o contedo na "janela-pai" exibe o contedo na mesma janela carrega o contedo numa janela que preenche o espao de visualizao do browser
CORES <link ... alink ... vlink> Define uma cor para cada um dos estados que um link pode assumir: link alink vlink link no visitado link ativo (clicado) link j visitado
So utilizados com a tag <body> e valem para toda a pgina. <body link="cor" alink="cor" vlink="cor">
WEBDESIGN
15
IMAGENS
TIPOS JPEG (Joint Photografic Experts Group) O formato JPEG foi criado para que imagens true-color (16 milhes de cores) pudessem ser armazenadas em arquivos pequenos. Imagens JPEG no podem ser transparentes, portanto sempre aparecem retangulares na tela. Diferente do GIF, que tem uma compresso padro, o JPEG tem uma compresso vrivel. Porm, quanto mais comprimido o arquivo, maior ser a perda da qualidade da imagem. Numa escala de 1 a 100, a compresso padro situa-se em torno de 33, mas recomendvel testar a qualidade da imagem antes de public-la. GIF (Graphics Interchange Format) Os arquivos GIF podem ter no mximo 256 cores (8 bits por pixel). O padro permite o entrelaamento e a transparncia de imagens. Uma imagem entrelaada (interlaced) pode ser vista medida que vai sendo carregada (melhorando a definio aos poucos) e uma imagem transparente permite visualizar, atravs de certas partes, o que est por trs. O recurso de transparncia oferece a impresso de que as imagens no so retangulares. PNG (Portable Network Graphics) Outro formato aceito pelos navegadores. INSERO <img src= ...> Insere uma imagem na pgina. <img src="arquivo" border="n" alt="texto" width="n" height="n"> src border alt width height nome do arquivo de imagem tamanho da borda (em pixels) texto associado imagem largura (tamanho ou percentual) altura (tamanho ou percentual)
WEBDESIGN
16
MAPEAMENTO <map name="mapa"> Divide a imagem em vrios setores ou pedaos. Cada setor corresponde a um link diferente. <img src="arquivo" usemap="#mapa"> <map name="mapa"> <area shape="tipo" coords="valor" href="URL"> <area shape="tipo" coords="valor" href="URL"> ... <area shape="tipo" coords="valor" href="URL"> </map> O "valor" dado em pixels, de acordo com o "tipo": tipo="circ" tipo="rect" tipo="poly" valor="x,y,r" valor="x1,y1,x2,y2" valor="x1,y1,x2,y2,x3,y3, ..."
WEBDESIGN
17
SONS
INSERO <embed src= ...> Insere um arquivo de som na pgina (formatos aceitos: WAV, AU, MIDI). Internet Explorer:
<bgsound src="arquivo" loop="quantidade">
src loop
nome do arquivo de msica "infinite" ou qualquer valor inteiro
Internet Explorer e Netscape:

<embed src="arquivo" autostart="true" hidden="true" width="1" height="1">
src loop autostart hidden width=1 e height=1
nome do arquivo de msica "infinite" ou qualquer valor inteiro a msica ser iniciada quando a pgina for carregada esconde o "plugin" (programa necessrio para tocar a msica) assegura que o objeto incorporado no utilizar nenhum espao
<noembed> ... </noembed> Utilizado para compatibilidade com browsers que no suportam <embed>.
WEBDESIGN
18
TABELAS
<table> ... </table> Cria uma tabela, formata bordas, tamanho e alinhamento. <table border="n" cellspacing="n" cellpadding="n" width="n" height="n" align="alinhamento"> ... </table> border cellspacing cellppading width height align <tr> Especifica o incio e o fim de uma linha da tabela. <tr align="valor" valign="valor"> ... </tr> align valign alinhamento horizontal alinhamento vertical left, center, right top, center, bottom largura da borda espao entre o contedo e o lado da clula espao entre as clulas adjacentes largura da tabela (em pixels ou percentual) altura da tabela (em pixels ou percentual) alinhamento da tabela 0, 1, 2, ... 0, 1, 2, ... 0, 1, 2, ... 250, 60% ... 100, 30% ... left, right, center
<td> ... </td> Especifica o contedo de uma clula da tabela. <td colspan="n" rowspan="n" width="n" align="valor"> ... </td> colspan rowspan width align nmero de colunas ocupadas pela clula nmero de linhas ocupadas pela clula largura da clula (em pixels ou percentual) alinhamento horizontal 2, 3, ... 2, 3, ... 80, 15% ... left, center, right
<th> ... </th> Define as clulas de cabealho. Apresenta caractersticas idnticas s clulas de dados <td>, exceto pelo alinhamento horizontal padro, que centralizado, e pela utilizao de fontes em negrito. WEBDESIGN 19
TABELA EXEMPLO COMPLETO
<html> <head> <title>TABELA</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" rowspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html>
WEBDESIGN
20
FORMULRIOS
<form> ... </form> Elementos que delimitam um formulrio. Todos os outros elementos devem ficar entre eles. <form action="script" method="mtodo" target="valor"> ... </form> action method target endereo do programa que vai receber os dados do formulrio "get" ou "post" opcional, necessrio se a resposta ser exibida em um frame diferente do formulrio
<input type= ... > Determina como ser a entrada de dados nos campos de um formulrio.
<input type="tipo" name="nome" value="valor" size="n" maxlength="n">
type name value TEXT
define o tipo do elemento (caixa de texto, boto, etc.) nome ou identificador do campo valor do campo (opcionalmente pode ser predefinido)
O valor "text" no parmetro "type" indica que o campo ser de texto.

<input type="text" name="nome" value="valor" size="n" maxlength="n">
size maxlenght
define o tamanho do campo que ser mostrado na pgina nmero mximo de caracteres que podem ser digitados
PASSWORD Funciona da mesma forma que o valor "text", exceto que todas as letras digitadas aparecem como um asterisco *.
<input type="password" name="nome" value="valor" size="n" maxlength="n">
RADIO O valor "radio" no parmetro "type" define botes de escolha. Eles so usados onde somente UMA opo pode ser selecionada. WEBDESIGN 21
Coloque sua pergunta aqui ... <input type="radio" name="pesquisa1" value="opo1"> <input type="radio" name="pesquisa1" value="opo2" checked> <input type="radio" name=vpesquisa1" value="opo3">
type name value checked
define o tipo do elemento, neste caso "radio" (boto de escolha) deve ser o mesmo para todos os campos no grupo, pois est identificando a questo formulada valor do campo que ser passado ao ao programa interpretador do formulrio deve ser usado quando voc desejar que uma das opes esteja selecionada como padro (Ex: Deseja receber nossos e-mails?)
CHECKBOX Deve ser usado quando UMA ou MAIS opes so vlidas ou aceitveis.
Coloque sua pergunta aqui ... <input type="checkbox" name="pesquisa2" value="opo1"> <input type="checkbox" name="pesquisa2" value="opo2" checked> <input type="checkbox" name="pesquisa2" value="opo3">
type name value checked
define o tipo do elemento, neste caso "checkbox" deve ser diferente para cada campo valor do campo que ser passado ao programa interpretador do formulrio deve ser usado quando voc desejar que uma das opes esteja selecionada como padro
RESET Define um boto que limpa todos dos campos, colocando os mesmos valores de quando a pgina foi carregada. No parmetro "value" pode-se definir o que estar escrito no boto. Caso nenhum valor seja definido, aparecer escrito somente "Reset".
<input type="reset" value="limpar">
SUBMIT Define um boto que aciona o envio das informaes preenchidas no formulrio ao programa interpretador (definido no campo "action" do elemento "form". Caso nenhum valor seja definido no parmetro "value", aparecer escrito "Submit" no boto correspondente.
<input type="submit" value="enviar">
WEBDESIGN
22
IMAGE Alternativamente ao boto "submit", pode-se utilizar uma imagem. Para isso, existe o tipo "image".
<input type="image" name="enviar" src="URL" alt="texto">
src alt HIDDEN
nome ou endereo (URL) do arquivo de imagem texto que ser mostrado caso a imagem no seja carregada
O valor "hidden" (oculto) no parmetro "type" define dados que devem ser passados ao programa interpretador, mas que no so visveis ao usurio.
<input type="hidden" name="nome" value="valor">
name value
identifica o dado define o valor que deve ser passado
<select name= ... > ... </select> O elemento "select" possibilita definir uma lista de opes.
<select name="nome" size="tamanho"> <option value="opo1">opo1</option> <option value="opo2">opo2</option> <option value="opo3">opo3</option> </select>
<textarea name= ... > ... </textarea> O elemento "textarea" (rea de texto) permite definir um campo de texto com vrias linhas.
<textarea name="nome" rows="n" cols="n"> </textarea>
name rows cols
nome da caixa de texto nmero de linhas da caixa de texto nmero de caracteres (colunas) cada linha possui
WEBDESIGN
23
FORMULRIO - EXEMPLO COMPLETO
<html> <head> <title>FORMULARIO</title> </head> <body> <p> <form action="AnyForm.cgi" method="post"> <input type="hidden" name="AnyFormMode" value="mail"> <input type="hidden" name="AnyFormDisplay" value="MeuFormulario"> <input type="hidden" name="AnyFormTo" value="usuario@empresa.com.br"> <input type="hidden" name="AnyFormSubject" value="MensagemDoSite"> <input type="text" name="AnyFormFrom" size="40"> <p> Entre com o seu nome: <input type="text" name="AnyFormMode" value="mail"> <p> Voc gostou da pgina? <input type="radio" name="gostou" value="sim">sim <input type="radio" name="gostou" value="mais ou menos">mais ou menos <input type="radio" name="gostou" value="no">no <p> Qual a pgina que voc mais gostou? <select name="Melhor Pgina"> <option value="Links">Links</option> <option value="Curriculum">Curriculum</option> <option value="Fotos">Fotos</option> <option value="Biblioteca">Biblioteca</option> </select> <p> Deixe aqui seus comentrios: <br> <textarea name="Comentarios" rows="5" cols="40"> </textarea> <p> Deseja receber nossos e-mails diariamente? <input type="checkbox" name="Deseja receber e-mails" value="sim"> sim <p> <input type="submit" value="Enviar"> <input type="reset" value="Limpar"> </form> </body> </html>
WEBDESIGN
24
FRAMES
Dividem a janela do browser em diferentes reas, cada uma comportando-se como mini-pginas. Cada frame pode exibir, separadamente, um arquivo HTML. Um uso comum para os frames a navegao. A janela do browser dividida em duas reas, e os botes de navegao ou links so carregados em um dos frames, com o resto do site sendo exibido pelo outro. Clicando em um link no frame de nagevao, o frame principal altera a exibio da pgina selecionada e mantm o frame de navegao imutvel. Isso permite ter uma nica pgina de navegao para o site inteiro, que carregada somente uma vez e permanece ali enquanto o visitante estiver acessando o site. <frameset> <frameset frameborder="yes/no" border="largura" rows="n" cols="n"> frameborder border rows cols yes/no largura da borda altura da "linha" (em % ou pixels) largura da "coluna" (em % ou pixels)
Desenvolver um site utilizando frames envolve criar o documento de frameset para dividir a janela do browser em vrias partes. O frameset um documento HTML padro, conforme o exemplo a seguir: <html> <title>Dois frames horizontais</title> <frameset rows="20%,80%"> <frame src="superior.htm"> <frame src="inferior.htm"> </frameset> </html> No exemplo acima, um frame ocupar 150 px da altura da pgina e o outro 80%. No h o elemento <body> no frameset, e as pginas que sero carregadas nos frames so especificadas na declarao do prprio frameset (superior.htm e inferior.htm). Para criar frames verticais: <html> <title>Dois frames verticais</title> <frameset cols="20%,80%"> <frame src="esquerdo.htm"> <frame src="direito.htm"> </frameset> </html> WEBDESIGN 25
Para criar trs frames, com a rea superior cobrindo toda a largura da pgina e abaixo dois frames dividindo verticalmente a rea restante. <html> <title>Um frame horizontal e dois frames verticais</title> <frameset rows="20%,80%"> <frame src="superior.htm"> <frameset cols="20%,80%"> <frame src="inferior_esquerdo.htm"> <frame src="inferior_direito.htm"> </frameset> </frameset> </html> Nos exemplos apresentados, cada frame ocupa um percentual da pgina (20%, 80%). No entanto, possvel utilizar medidas baseadas em pixels, conforme exemplo a seguir: <frameset rows="100,*"> O primeiro frame ocupar 100 pixels e o segundo ocupar o restante do espao inferior da pgina (janela do browser). <frame>
<frame src="URL_ pagina" name="nome_ frame" scrolling="yes/no/auto nosesize">
src name scrolling noresize
endereo do arquivo HTML a ser apresentado nesta parte nome dado a uma parte especfica, ser utilizado pelo atributo target indica a existncia da barra de rolagem informa que a parte especificada no pode ser redimensionada
Esse marcador especifica que pgina estar em uma determinada parte. <noframes> <noframes> ... tags HTML e pgina a ser exibida </noframes> Utilizado para compatibilidade com browsers antigos que no reconhecem frames, este marcador evita que ocorram erros.
WEBDESIGN
26
FRAMES - EXEMPLO COMPLETO index.htm <html> <head> <title>FRAMESET</title> </head> <frameset cols="150,*" frameborder="no" border="0"> <frame src="menu.htm" name="esquerda" scrolling="no" noresize> <frame src="pagina1.htm" name="principal"> </frameset> </html> menu.htm <html> <head> <title>MENU</title> </head> <body bgcolor=#CCCCCC> <a href="pagina1.htm" target="principal">PGINA 1</a> <a href="pagina2.htm" target="principal">PGINA 2</a> </html> pagina1.htm <html> <head> <title>PAGINA 1</title> </head> <body> Esta a pgina 1. </body> </html> pagina2.htm <html> <head> <title>PAGINA 2</title> </head> <body> Esta a pgina 2. </body> </html>
WEBDESIGN
27
FRAMES FLUTUANTES <iframe> <iframe width=n height=n src="arquivo" name="nome"> width height src name largura do frame altura do frame endereo do arquivo HTML a ser apresentado nesta parte nome dado a uma parte especfica, ser utilizado pelo atributo target
EXEMPLO: index.htm <html> <head> <title>FRAMES FLUTUANTES</title> </head> <body> <iframe width=250 height=200 src="quadro1.htm" name="quadro"> </body> </html> quadro1.htm <html> <head> <title>QUADRO 1</title> </head> <body bgcolor="#003366"> FRAME FLUTUANTE (IFRAME) </body> </html> EXEMPLO LBUM DE FOTOS: index.htm <html> <head> <title>ALBUM DE FOTOS</title> </head> <body> <a href="foto1.jpg" target="fotos">FOTO 1</a><br> <a href="foto2.jpg" target="fotos">FOTO 2</a><br> <a href="foto3.jpg" target="fotos">FOTO 3</a><br> <iframe width=250 height=200 src="foto1.jpg" name="fotos"> </body> </html>
WEBDESIGN
28
CARACTERES ESPECIAIS E ACENTUAO

¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï < > ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï & " Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ & " Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
< >
WEBDESIGN
29
TABELAS DE CORES
HTML STANDARD COLORSET
aqua black blue fuchsia gray green lime maroon #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 navy olive purple red silver teal yellow white #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF
HTML EXTENDED COLORSET

aliceblue antiquewhite aquamarine azure beige bisque blachedalmond blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue drakslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen #F0F8FF #FAEBD7 #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #FFEBCD #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC1436 #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 gainsboro ghostwhite gold goldenrod greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow limegreen linen magenta mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream #DCDCDC #F8F8FF #FFD700 #DAA520 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #FFFFE0 #32CD32 #FAF0E6 #FF00FF #66CDAA #0000CD #BA55D3 #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA mistyrose moccasin navajowhite oldlace olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna skyblue slateblue slategray snow springgreen steelblue tan thistle tomato turquoise violet wheat whitesmoke yellowgreen #FFE4E1 #FFE4B5 #FFDEAD #FDF5E6 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #F5F5F5 #9ACD32
WEBDESIGN
30
CSS
Cascading Style Sheet
UNINOVE
WEBDESIGN
31
SUMRIO
INTRODUO FORMA DE ESTILO ESTILO INLINE ESTILO INCORPORADO ESTILO IMPORTADO ESTILO EXTERNO CLASSES DE ESTILO ESTILOS INDIVIDUAIS MARCADORES <div> E <span> DIV SPAN HERANA DE ESTILOS ELEMENTOS DE CONTEXTO FOLHAS DE ESTILO FONTES COR E TEXTO LISTAS MOUSE BACKGROUND BORDAS E MARGENS POSICIONAMENTO VISIBILIDADE 33 34 34 34 34 35 36 36 37 37 37 38 38 39 39 40 41 42 43 44 45 46
WEBDESIGN
32
INTRODUO
Com o objetivo de tratar das caractersticas de design de maneira mais efetiva e melhorar o gerenciamento das pginas de um site foi criada uma extenso do HTML, padronizada pelo W3C (World Wide Web Consortium) em 1996, chamada CSS (Cascading Style Sheets) ou folhas de estilo: CSS1 (1996) e CSS2 (1998). Algumas caractersticas de design: Espaamento entre linhas; Posicionamento de imagens e textos; Cores e imagens de fundo; Tratamento de fontes; Margem e identao; Tratamento de caractersticas dos links. Benefcios: Separar a definio do layout das pginas do contedo a ser exibido; Padronizao das pginas de um site; Cdigo HTML mais simples e fcil de ser manipulado; Otimizao para qualquer resoluo de monitor de vdeo; Controle mais preciso e previsvel do formato da apresentao; Impresso melhor das pginas. Sintaxe geral: marcador { atributo1: valor1; atributo2: valor2; ... atributoN: valorN } Exemplos: h1 { font-family: arial; color: yellow } O texto dentro do marcador h1 ter fonte Arial e cor Amarela. p { font-size: 20pt; margin-left: 1.0in } O texto dentro do marcador p ter fonte tamanho 20 pontos e margem esquerda de uma polegada. a { text-decoration: none } O texto dentro do marcador a no ser sublinhado.
WEBDESIGN
33
FORMAS DE ESTILO
Quatro tipos: Estilo Estilo Estilo Estilo INLINE; INCORPORADO; IMPORTADO; EXTERNO.
Nota: O estilo INLINE prevalece sobre todos os outros.
Estilo inline
Utilizado quando deseja-se modificar somente um marcador especfico dentro da pgina. Aplicado nos marcadores (tags) dentro de <body> ... </body>. Sintaxe geral:
<marcador style="atributo1: valor1; atributo2: valor2; ... atributoN: valorN">
Estilo incorporado
Utilizado quando deseja-se especificar alguma caracterstica para os marcadores internos pgina. A especificao de um estilo vlida para todos os marcadores dentro do arquivo HTML. Aplicado dentro de <head> ... </head>. Sintaxe geral:
<style type= "text/css"> marcador1 {atributo1: valor1; atributo2: valor2; ... atributoN: valorN } marcador2 {atributo1: valor1; atributo2: valor2; ... atributoN: valorN } ... marcador3 {atributo1: valor1; atributo2: valor2; ... atributoN: valorN } </style>
Estilo importado
Utilizado quando deseja-se especificar ou acrescentar alguma caracterstica para os marcadores de uma ou mais pginas. Deve-se criar um arquivo separado com a extenso .css que ser importado pgina na qual deseja-se aplicar o estilo. Aplicado dentro de <head> ... </head>.
WEBDESIGN
34
Sintaxe geral:
<style type= "text/css"> @import url(nome_url/arquivo.css); marcador1 {atributo1: valor1; atributo2: valor2; ... atributoN: valorN } marcador2 {atributo1: valor1; atributo2: valor2; ... atributoN: valorN } ... marcador3 {atributo1: valor1; atributo2: valor2; ... atributoN: valorN } </style>
Estilo externo
Utilizado quando deseja-se especificar alguma caracterstica para os marcadores que sero utilizados em mais de uma pgina e deseja-se que este seja o padro para todas elas. Qualquer mudana realizada no arquivo externo, que tambm recebe a extenso .css, refletido em todas as pginas do site que utilizam este arquivo. Aplicado dentro de <head> ... </head>. Sintaxe geral:
<link rel=stylesheet href= "arquivoexterno.css" type="text/css">
EXERCCIO: Elaborar quatro pginas utilizando os quatro tipos de estilo (inline, incorporado, importado e externo). Altere as caractersticas dos elementos elementos: <h1>, <p> e <a ...>. (Exemplos na pgina 33)
WEBDESIGN
35
CLASSES DE ESTILO
Classes de estilo podem ser teis quando deseja-se que um marcador assuma estilos diferentes ou para aplicar estilos iguais a marcadores diferentes. Pode-se fazer uso de classes de estilo utilizando-se o atributo class nos marcadores. Exemplo:
<style type= "text/css"> h1.naoprioritario { color: blue; font-family: georgia; } h1.prioritario { color: red; font-family: verdana; text-align: center; font-size: 30pt; } .importante { color: black; font-size: 40pt; background-color: yellow; } </style> ... <h1 <h1 <h1 <h2 class="naoprioritario">h1 class="naoprioritario"</h1> class="prioritario">h1 class="prioritario"</h1> class="importante">h1 class="importante"</h1> class="importante">h2 class="importante"</h2>
ESTILOS INDIVIDUAIS
Utilizados para criar estilos exclusivos, independentes de qualquer tag HTML, tal como o seletor de classes. O acesso ao estilo individual obtido utilizando-se o atributo id dentro dos marcadores. Exemplo:
<style type= "text/css"> #fundo { background-color: yellow; } #individual { color: red; } </style> ... <h1 id="fundo">h1 id="fundo"</h1> <h1 id="individual">id="individual"</h1>
WEBDESIGN
36
Notas: Pode-se combinar um id a uma classe e/ou estilo inline dentro de uma tag HTML. Um nome de id no pode ser uma palavra JavaScript. A diferena entre os id e as classes est no seu uso efetivo. Os ids so normalmente utilizados para dar a cada elemento do cdigo HTML um nome e uma identidade exclusivos. Por esse motivo, um id usado apenas uma vez dentro do documento HTML, permitindo a sua manipulao com o JavaScript.
MARCADORES <div> E <span>

So utilizados quando deseja-se criar suas prprias tags HTML. A diferena entre os dois que com o marcador div ocorre uma quebra de linha anterior e posterior a ele e com o span no ocorre esta quebra de linha.
div
Sintaxe geral:
<div class="classeestilo">... texto ...</div> ou <div id="nomeestilo">... texto ...</div>
Exemplo:
<style type= "text/css"> .importante { color: blue; background-color: yellow; text-decoration: underline; } </style> ... <p>Este pargrafo utiliza o marcador <div class="importante">div com classes de estilo.</div> Verifica-se que onde o div utilizado ocorre uma quebra de linha no texto anterior e posterior a ele.</p>
span
Sintaxe geral:
<span class="classeestilo">... texto ...</span> ou <span id="nomeestilo">... texto ...</span>
WEBDESIGN
37
Exemplo:
<style type= "text/css"> .importante { color: blue; background-color: yellow; text-decoration: underline; } </style> ... <p>Este pargrafo utiliza o marcador <span class="importante">span com classes de estilo.</span> Verifica-se que onde o span utilizado no ocorre quebra de linha no texto.</p>
HERANA DE ESTILOS
Exemplo:
<style type= "text/css"> h1 { color: red; font-family: verdana; } u { font-size: 30pt; } </style> ... <h1>Texto <u> cor <i> vermelha </i> e fonte tipo <i> verdana</i></u></h1>
<h1> Hierarquia dos marcadores <u> <i>
ELEMENTOS EM CONTEXTO
Somente ocorre o estilo se o marcador estiver dentro do contexto definido. Exemplo:
<style type= "text/css"> h1 u i { color: blue; background-color: yellow; text-decoration: underline; } </style> ... <h1>Ttulo <u> com <i> contexto </i></u></h1> <h1>Ttulo sem <i> contexto </i></h1>
WEBDESIGN
38
FOLHAS DE ESTILO Fontes

Os atributos disponveis para formatao de fontes so: font-family Famlia de fontes disponveis Abadi, Lcida Sans, Arial, Tahoma, Times New Roman, Courier New ... font-size Tamanho de fontes pt, px, in, cm, mm, pc, em, ex, palavras-chave font-weight Caracteres normais ou negrito normal, bold, lighter, bolder, 100, 200, 300, 400, 500, 600, 700, 800 e 900 font-style Caracteres normais ou itlico normal, italic, oblique (inclina o texto para direita) font-variant Caracteres normais ou maisculas normal, small-caps font Define diversos atributos simutaneamente em uma regra de estilo font: font-style font-variant font-weight font-size font-family Exemplos: <html> <head> <style type = "text/css"> p { font-family: courier new; font-size: 20px; font-weight: bold; font-style: italic; font-variant: small-caps; } </style> </head> <body> <p<Texto formatado</p> </body> </html>
WEBDESIGN
39
<html> <head> <style type = "text/css"> p { font: italic small-caps bold 20px courier new } </style> </head> <body> <p>Texto formatado</p> </body> </html>
Texto e Cor
Alguns atributos para a formatao de texto e cor so: color Especifica a cor do texto color: nomedacor ou color: #RRGGBB (ver pgina 30) letter-spacing Espaamento entre letras normal, pt, px, in, cm, mm, pc, em, ex, palavras-chave line-height Altura de uma linha normal, (nmero a ser multiplicado pelo tamanho da fonte*), %, px * neste caso 2 equivale a espao duplo text-transform Letras maisculas e minsculas normal, capitalize, uppercase, lowercase text-align Alinhamento horizontal do texto left, right, center, justify vertical-align Alinhamento vertical do texto baseline, super, sub text-indent Recuo do texto para a primeira linha de um pargrafo pt, px, in, % text-decoration Presena de linhas sobrescritas em um texto underline, overline, line-through, none
WEBDESIGN
40
Exemplo: <html> <head> <style type = "text/css"> p { color: #FF0000; letter-spacing: 10px; line-height: 2; text-transform: capitalize; text-align: justify; vertical-align: baseline; text-indent: 20px; text-decoration: underline; } </style> </head> <body> <p>Os Sistemas Gerenciadores de Banco de Dados tornaram-se pea fundamental na implantao de sistemas.</p> </body> </html>
Listas
list-style-type Tipo de smbolo a ser utilizado como marcador de item disc, circle, square, decimal, upper-roman, lower-roman, upper-alpha, lower-alpha list-style-position Posicionamento dos itens da lista inside (alinhamento interno ao item anterior), outside (alinhamento externo ao item anterior) list-style-image Imagem a ser exibida no lugar do smbolo utilizado em cada item da lista url(arquivodeimagem.gif) list-style Juno dos trs atributos (type, position e image) { list-style: url(arquivodeimagem.gif) simbolopadrao alinhamento; } Exemplo: <html> <head> <style type="text/css"> li.outside { list-style-position: outside; list-style-type: disc; } li.inside { list-style-position: inside; list-style-type: circle; } </style> </head> WEBDESIGN 41
<body> <ul> <li class="outside">Item 1</li> <li class="inside">Item 1.1</li> <li class="inside">Item 1.2</li> <li class="outside">Item 2</li> <li class="inside">Item 2.1</li> </ul> </body> </html> Valores permitidos para list-style-type: disc circle square decimal upper-roman lower-roman upper-alpha lower-alpha
Mouse
Utilizado para modificar a aparncia do cursor do mouse quando o mesmo est sobre algum elemento da pgina. style= "cursor:valor" default, crosshair, hand, pointer, help, move, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, text, wait Exemplo: <html> <table width="400" border="1"> <tr> <td style="cursor:default">default</td> <td style="cursor:crosshair">crosshair</td> <td style="cursor:hand">hand</td> <td style="cursor:pointer">pointer</td> </tr> <tr> <td style="cursor:help">help</td> <td style="cursor:move">move</td> <td style="cursor:n-resize">n-resize</td> <td style="cursor:ne-resize">ne-resize</td> </tr> <tr> <td style="cursor:e-resize">e-resize</td> <td style="cursor:se-resize">se-resize</td> <td style="cursor:s-resize">>s-resize</td> <td style="cursor:sw-resize">sw-resize</td> </tr> WEBDESIGN 42
<tr> <td <td <td <td </tr> </html>
style="cursor:w-resize">w-resize</td> style="cursor:nw-resize">nw-resize</td>> style="cursor:text">text</td> style="cursor:wait">wait</td>
Background
Os atributos possveis para formatao de fundo so: background-color Definio da cor de fundo background-color: nomedacor ou background-color: #RRGGBB (ver pgina 30) background-image Definio da imagem de fundo background-image:url(arquivodeimagem.gif) background-repeat Define se haver repetio da imagem de fundo ou no repeat Repete a imagem tanto na horizontal quanto na vertical repeat-x Repete a imagem na horizontal repeat-y Repete a imagem na vertical no-repeat Exibe a imagem somente uma vez background-attachment Define se ocorrer rolagem da imagem em relao aos outros elementos HTML scroll Faz a rolagem do texto e da imagem fixed Fixa a imagem permitindo a rolagem somente do texto background-position Posiciona a imagem de fundo em algum ponto especfico da tela background-position: x y ou background-position: x% y% (em relao ao elemento HTML considerado "pai" na hierarquia) top Posiciona a imagem no topo da pgina center Posiciona a imagem no centro da pgina bottom Posiciona a imagem no rodap da pgina left Posiciona a imagem esquerda da pgina right Posiciona a imagem direita da pgina background Todos os atributos juntos style= "background: background-color background-image background-repeat background-attachment background-position"
WEBDESIGN
43
Exemplo: <html> <head> <style type="text/css"> body { background-color: yellow; background-image: url(logo.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 50 80; } p { font-size: 25px; margin-left: 200px; line-height: 3; } </style> </head> <body> <p>Linha1</p> <p>Linha2</p> <p>Linha3</p> <p>Linha4</p> <p>Linha5</p> <p>Linha6</p> <p>Linha7</p> <p>Linha8</p> </body> </html>
Bordas e Margens
Os atributos disponveis para formatao das bordas e das margens so: width e height Definem a largura e altura dos elementos margin Permite definir o espao de um elemento em relao ao outro margin, margin-top, margin-bottom, margin-left, margin-right border Define o estilo, largura e cor da borda que envolve o elemento. border, border-style, border-color, border width, border-top, border-bottom, border-left, border-right padding Define o espao entre a borda do elemento e o seu contedo Outros trs atributos relacionados a bordas e margens so: float Permite que um elemento "flutue" sobre um outro elemento WEBDESIGN 44
clear Evita que um elemento "flutue" sobre um outro elemento display Define como um elemento deve ser exibido (ou no) Exemplo:
<html> <head> <style type="text/css"> .frame { width: 250px; margin-top: 150px; margin-left: 100px; border-top: 1mm dotted #990000; border-bottom: 3px dashed #009900; border-left: 3pt solid #000099; border-right: 20pt inset #990000; } </style> </head> <body> <div class="frame"><img width="100" height="100" src="logo.jpg"></div> </body> </html>
Posicionamento
O posicionamento dos elementos podem ser definidos atravs do atributo position. Este atributo pode assumir um dos trs valores de posicionamento: static Faz o contedo "fluir in line", mas no pode ser alterado pelos atributos top e left ou por linguagem JavaScript. relative Posiciona o elemento de forma relativa ao elemento pai. absolute Posiciona o elemento de forma independente com relao a origem (0,0). O posicionamento pode ser definido de duas formas: 1. top e left (superior e esquerda) 2. bottom e right (inferior e direita) Exemplo:
<style type="text/css"> .stat { position: static; font: bold 30pt verdana; color: green; } .abs { position: absolute; top: 25px; left: 380px; witdh: 100 px; font: bold 20pt arial; color: red; } .rel { position: relative; top: 80px; left: 25px; font: bold 30pt georgia; color: blue; } </style> </head>
WEBDESIGN
45
<body> <div class="stat">Uma das principais vantagens da TV Digital</div> <div class="abs">no pas a possibilidade do aumento da interatividade entre o telespectador e a televiso.</div> <div class="rel">Esse um novo mercado de <span class="rel">software </span>, uma grande oportunidade para desenvolvedores.</div> </body> </html>
O posicionamento 3D realizado atravs do atributo z-index. Os elementos posicionados recebem automaticamente nmeros de empilhamento: 0, 1, 2 e assim por diante, na ordem em que aparecem. O nmero do ndice z um valor que mostra sua relao 3D com outros elementos da janela.
<img style="position:absolute; top:50px; left:50px; z-index:0" src="azul.jpg"> <img style="position:absolute; top:100px; left:100px; z-index:2" src="vermelho.jpg"> <img style="position:absolute; top:150px; left:150px; z-index:1" src="verde.jpg">
Opes: position:absolute e position:relative Notas: Quando um elemento posicionado relativamente colocado dentro de um elemento posicionado absolutamente, ele se move com o elemento absolute. Quando um elemento posicionado absolutamente alinhado dentro de outro elemento que tem posicionamento relativo, o elemento absoluto flui a partir da origem do canto superior esquerdo do elemento relativo, em vez de fluir a partir da posio (0,0) da origem da janela. A ordem dos elementos empilhados de forma 3D pode ser alterada utilizando-se uma linguagem Script. O uso de um nmero negativo para o ndice z faz com que um elemento seja empilhado aquele nmero de nveis abaixo de seu elemento pai em vez de ser empilhado acima.
Visibilidade
Os atributos de visibilidade so: visibility: define a visibilidade de um elemento clip: define a rea visvel de um elemento overflow: descreve o tratamento da rea que ultrapassa o limite da rea de exibio
visibility Sintaxe geral: style="position: valor; visibility: valores" WEBDESIGN 46
valor: relative ou absolute valores: hidden, visible ou inherit NOTA: Se a visibilidade estiver definida como hidden o elemento ficar invisvel, mas ainda ocupar espao no documento e um retngulo vazio aparecer no lugar do elemento. Utilizando a opo display: none o espao vazio desaparece do documento. clip Sintaxe geral: style="position: valor; clip: valores" valor: relative ou absolute valores: rect(<toplength>,<rightlength>,<bottomlength>, <leftlength>) ou auto overflow Sintaxe geral: style="width: valorunidade; height: valorunidade; overflow: valor" valorunidade: valor e unidade correspondente para a largura e a altura da regio a ser realizado o overflow valor:
scroll: hidden: visible: auto:
Barras de rolagem ao redor da rea visvel Oculta o overflow e evita que a barra de rolagem aparea A parte recortada exibida O browser resolve como o material extra ser tratado
Exemplo:
<html> <head> </head> <body> <img style="position:absolute; visibility: visible; top:10px; left:20px; z-index:0" src="logo.jpg"> <img style="position:absolute; visibility: hidden; top:10px; left:250px; z-index:1" src="logo.jpg"> </table> </body> </html>
WEBDESIGN
47
JAVA SCRIPT
UNINOVE
WEBDESIGN
48
SUMRIO
1. INTRODUO 2. SINTAXE E CONVENES 3. VARIVEIS 4. OPERADORES 5. ESTRUTURAS CONDICIONAIS 6. COMANDOS DE REPETIO 7. ARRAYS (MATRIZES) 8. FUNES 50 50 51 52 54 55 57 59
WEBDESIGN
49
1. INTRODUO
Colocando JavaScript em uma pgina web
<html> <head> <title>Exemplo 01</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-document.write('Este o meu primeiro JavaScript'); //--> </SCRIPT> </body> </html>
2. SINTAXE E CONVENES
JavaScript sensvel a maisculas e minsculas (case sensitive). Ex: a diferente de A Todas as instrues em JavaScript devem terminar com ; (ponto e vrgula) Aspas duplas (" ") e aspas simples (' '): As aspas simples so usadas dentro de uma instruo com aspas duplas ou vice-versa. Exemplo:
<FORM> <INPUT TYPE="Button" VALUE="Clique aqui" onClick="alert('At breve');"> </FORM> \b \f \n \r \t \' \" Barra invertida \ e linhas de texto (strings) backspace form feed inserir linha retorno (sem insero de linha) tabulao aspas simples (apstrofo) aspas duplas
Exemplos: <SCRIPT LANGUAGE="JavaScript"> <!-alert('Fulano de Tal\nGerente Comercial'); //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-alert('She said \"I don\'t like you\"'); //--> </SCRIPT> Comentrios
Comentrios so teis para mostrar informaes sobre direitos autorais, datas de atualizaes, funes, etc. Ajudam a entender o cdigo mais tarde.
WEBDESIGN
50
Para comentar uma linha: <SCRIPT LANGUAGE="JavaScript"> <!-// A linha abaixo escreve o texto na pgina document.write('Este cdigo est comentado'); //--> </SCRIPT> Para comentar mais de uma linha: <SCRIPT LANGUAGE="JavaScript"> <!-/* A linha abaixo escreve o texto na pgina e eu estou usando mais de uma linha no meu comentrio */ document.write('Este cdigo est comentado'); //--> </SCRIPT> Nomes de variveis e de funes: Devem seguir algumas regras simples, conforme mostrado a seguir: 1. O primeiro caractere deve ser uma letra do alfabeto (maiscula ou minscula), uma barra _ (underscore) ou um sinal de dlar $. O sinal de dlar no recomendado, j que algumas verses mais antigas do JavaScript no o reconhecem. 2. Voc no deve usar um nmero para iniciar o nome de uma varivel ou funo. 3. Nomes de variveis ou de funes no devem conter espao. No caso de precisar de um espao para identificar melhor uma varivel ou uma funo, utilize _ (underscore). Palavras reservadas: O JavaScript possui uma srie de palavras que so usadas internamente pela linguagem e pelo interpretador. Estas no podem ser usadas como nomes de variveis ou funes.
3. VARIVEIS
Variveis so nomes dados aos locais na memria do computador onde os dados so armazenados durante a execuo de nossos scripts. Quando declaramos uma varivel, ela fica guardada na memria at que decidamos fechar a janela em que o script est sendo executado. Variveis so declaradas usando a palavra-chave var. Observe o exemplo: <SCRIPT LANGUAGE="JavaScript"> <!-var Texto = 'Esta a minha primeira varivel'; document.write(Texto); //--> </SCRIPT> Valores de variveis alterados em tempo de execuo:
<SCRIPT LANGUAGE="JavaScript"> <!-var Frase = 'O valor da varivel ser alterado em seguida'; alert(Frase); Frase = 'O valor da varivel Frase foi alterado aqui'; document.write(Frase); //--> </SCRIPT>
WEBDESIGN
51
Clculo matemtico usando variveis:
<form name="form1"> Primeiro nmero: <input type="text" name="text1"><br> Segundo nmero: <input type="text" name="text2"><br> Clique aqui para calcular: <input type="button" value="Calcular" onClick="Calcular()"> </form> <SCRIPT LANGUAGE="JavaScript"> <!-function Calcular() { var primeiroNum = eval(document.form1.text1.value); var segundoNum = eval(document.form1.text1.value); alert(primeiroNum+segundoNum); } //--> </SCRIPT> Armazenando dados do usurio usando variveis:
<SCRIPT LANGUAGE="JavaScript"> <!-var Nome; Nome = prompt('Por favor, digite o seu nome', 'Digite o seu nome aqui'); document.write('Ol '+Nome+'! Bem vindo ao meu site.'); //--> </SCRIPT>
4. OPERADORES
Operadores Aritimticos Operador + * / % ++ -Usado para Adio Subtrao Multiplicao Diviso Mdulo Incremento Decremento Nmero negativo Exemplo 1+2 12-10 2*3 10/3 10%3 x=5 x++ x=5 x--20 Resultado 3 2 6 3.333333 1 x=6 x=4 20 negativo
<SCRIPT LANGUAGE="JavaScript"> <!-var Numero = 10; Numero++; document.write(Numero); //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-var Numero1 = 10; var Numero2 = 20; document.write(Numero1+Numero2); //--> </SCRIPT>
WEBDESIGN
52
Operadores de Atribuio Operador += -= *= /= %= Exemplo x+=y x-=y x*=y x/=y x%=y Significado x=x+y x=x-y x=x*y x=x/y x=x%y
<SCRIPT LANGUAGE="JavaScript"> <!-var Numero1 = 10; var Numero2 = 20; Numero2 += Numero1; documento.write(Numero2); //--> </SCRIPT> Operadores de Comparao Operador == != > >= < <= Significado igual a diferente maior que maior ou igual a menor que menor ou igual a Exemplo 15==13 false 15!=13 true 15>13 true 15>=13 true 15<13 false 15<=13 false
<SCRIPT LANGUAGE="JavaScript"> <!-var Numero = 12; if(Numero==10) { alert('A varivel Numero igual a 10'); } //--> </SCRIPT> Operadores Lgicos Operador && || ! Significado E OU NO Se x=10 e y=5 ento ... x (x=10) && (y<10) true (x=10) || (y=10) true x!=y true
<SCRIPT LANGUAGE= "JavaScript"> <!-var Numero1 = 20; var Numero2 = 30; if ((Numero1==20)&&(Numero2==30)){ alert('Os valores esto corretos'); } //--> </SCRIPT>
WEBDESIGN
53
5. ESTRUTURAS CONDICIONAIS
IF
<html> <SCRIPT LANGUAGE="JavaScript"> <!-function Checar() { var Cor = document.form1.text1.value; if (Cor == 'Verde') { alert('Voc escolheu VERDE'); } if (Cor == 'Amarelo') { alert('Voc escolheu AMARELO'); } if (Cor == 'Azul') { alert('Voc escolheu AZUL'); } } //--> </SCRIPT> <form name="form1"> Escolha uma cor (Verde, Amarelo, Azul)<br><br> <input type="text" name="text1"> <input type="button" value="OK" onClick="Checar()"> </form>
IF ... ELSE
<html> <SCRIPT LANGUAGE="JavaScript"> <!-function Checar() { var Cor = document.form1.text1.value; var Voltar = true; if (Cor == 'Verde') { alert('Voc escolheu VERDE'); Voltar = false; } if (Cor == 'Amarelo') { alert('Voc escolheu AMARELO'); Voltar = false; } if (Cor == 'Azul') { alert('Voc escolheu AZUL'); Voltar = false; } else { if (Voltar == true) { alert ('Voc precisa digitar uma opo vlida'); } } } //--> </SCRIPT> <form name="form1"> Escolha uma cor (Verde, Amarelo, Azul)<br><br> <input type="text" name="text1"> <input type="button" value="OK" onClick="Checar()"> </form>
WEBDESIGN
54
6. COMANDOS DE REPETIO
WHILE
<html> <head> </head> <body> <SCRIPT LANGUAGE="JavaScript"> i=1; while (i<10) { document.write("Esta a linha ", i,"<br>"); i++; } </SCRIPT> </body> </html>
DO ... WHILE
<SCRIPT LANGUAGE="JavaScript"> i=1; do { document.write("Esta a linha ", i,"<br>"); i++; } while (i<10); </SCRIPT>
FOR
<SCRIPT LANGUAGE="JavaScript"> for (i=1; i<10; i++) { document.write("Esta a linha " ,i, "<br>"); } </SCRIPT>
FOR (2)
<SCRIPT LANGUAGE="JavaScript"> for (i=1; i<=3; i++) { for (j=1; j<=4; j++) document.write("Esta a linha " ,i, "." ,j, "<br>"); } </SCRIPT>
WEBDESIGN
55
Ex1: Quadrado dos nmeros 1 a 100

<SCRIPT LANGUAGE="JavaScript"> i=1; while (i<=100) { document.write("O quadrado de ", i, " igual a " ,i*i, "<br>"); i++; } </SCRIPT>
Ex2: Tabuada
<SCRIPT LANGUAGE="JavaScript"> n=2; i=1; while (i<=10) { document.write(n, " multiplicado por ", i, " igual a " ,n*i, "<br>"); i++; } </SCRIPT>
Ex3: Soma 20 primeiros nmeros (apresenta somente o resultado)

<SCRIPT LANGUAGE="JavaScript"> i=0; j=1; while (j<=20) { i=i+j; j++; } document.write(i); </SCRIPT>
Ex3: Soma 20 primeiros nmeros (apresenta passo-a-passo e resultado)

<SCRIPT LANGUAGE="JavaScript"> i=0; j=1; while (j<=20) { document.write(i=i+j, "<br>"); j++; } </SCRIPT>
Ex3: Soma 20 primeiros nmeros (apresenta passo-a-passo e resultado)

<SCRIPT LANGUAGE="JavaScript"> i=0; for (j=1; j<=20; j++){ document.write(i=i+j, "<br>"); } </SCRIPT>
WEBDESIGN
56
7. ARRAYS (MATRIZES)
Um array um conjunto de variveis do mesmo tipo que referenciado por um nome comum. Um elemento especfico de um array acessado por meio de um ndice. Temos dois tipos de ndices: Ordenado: baseado em nmeros (comea com ZERO) Associativos: formados por caracteres alfa-nmericos
Ex1:
<SCRIPT LANGUAGE="JavaScript"> var Nomes = new Array(); Nomes[0] = "Augusto"; Nomes[1] = "Roberto"; Nomes[2] = "Fernando"; Nomes[3] = "Mrcio"; Nomes[4] = "Carlos"; Nomes[5] = "Antonio"; window.alert("O funcionrio do dia : "+Nomes[3]); </SCRIPT>
Ex2:
<html> <head> <SCRIPT language="JavaScript"> function mostrar() { var nome= new Array(5) nome[0]="Um"; nome[1]="Dois"; nome[2]="Trs"; nome[3]="Quatro"; nome[4]="Cinco"; var x=0; for (x=0; x<5; x++) { alert(nome[x]); } } </SCRIPT> </head> <body> <a href="javascript:mostrar()">Mostrar elementos do Array!</a> </body> </html>
Ex3:
<html> <head> <SCRIPT language="JavaScript"> function mostrar2() { var nome= new Array(5); var y=0; for (y=0; y<5; y++) { nome[y]=prompt('Entre com um nome!',' ');
WEBDESIGN
57
} var x=0; for (x=0; x<5; x++) { alert(nome[x]); } } </SCRIPT> </head> <body> <A HREF="javascript:mostrar2()">Entre com os elementos do Array</A> </body> </html>
Ex4: Array Associativo

<html> <head> </head> <body> <SCRIPT language="JavaScript"> function escolher_carro() { var meu_carro= new Array() meu_carro["esporte"]="Mustang"; meu_carro["compacto"]="Ka"; meu_carro["antigo"]="Braslia"; var carro_tipo=prompt("Qual o tipo de carro que voc prefere?","");
if ((carro_tipo=="esporte") || (carro_tipo=="compacto") || (carro_tipo=="antigo"))
alert("Para esta opo oferecemos: "+meu_carro[carro_tipo]+"."); else alert("Entre com um tipo vlido: esporte, compacto ou antigo"); } </SCRIPT> <FORM> <INPUT TYPE="button" onClick="escolher_carro()" value="Escolha seu carro!"> </FORM> </body> </html>
WEBDESIGN
58
8. FUNES
Uma funo um grupo de linhas de cdigo de programao identificado por um nome, por meio do qual pode ser referenciado em qualquer parte do programa principal, destinado uma tarefa bem especfica e que podemos se necessrio, utilizar vrias vezes.
Ex1: Chamando a funo ao carregar a pgina

<html> <head> <SCRIPT LANGUAGE="Javascript"> function Mensagem() { document.write("Bem vindo a minha pgina"); } </SCRIPT> </head> <body onLoad="Mensagem()"> </body> </html>
Ex2: Chamando a funo atravs de um boto

<html> <head> <title>Funo 1</title> <SCRIPT LANGUAGE="JavaScript"> function Mensagem(){ alert('Mensagem chamada atravs de uma funo'); } </SCRIPT> </head> <body> <form name="teste"> <input type="button" value="Exibir Mensagem" onClick="Mensagem()"> </form> </body> </html>
Ex3: Chamando a funo atravs de um link

<html> <head> <title>Funo 1</title> <SCRIPT LANGUAGE="JavaScript"> function Mensagem(){ alert('Mensagem chamada atravs de uma funo'); } </SCRIPT> <head> <body> <a href="JavaScript:Mensagem()">Exibir Mensagem</a> </body> </html>
WEBDESIGN
59
Ex4: Funo utilizando um array

<html> <head> <title>Funo 1</title> <SCRIPT LANGUAGE="JavaScript"> matFigura = new Array(2) matFigura[0] = "foto1.gif" matFigura[1] = "foto2.gif" numFigura = 0 totalFigura = 2 function mudaBanner(){ document.imgBanner.src = matFigura[numFigura] numFigura +=1 if (numFigura == totalFigura) {numFigura = 0} setTimeout("mudaBanner()", 2000) } </SCRIPT> </head> <body onLoad="mudaBanner()"> <center> <img name="imgBanner"><br><br> </center> </body> </html>
Ex5: Funo utilizando o comando de repetio for e array

<SCRIPT LANGUAGE="JavaScript"> function semana(hoje) { document.write("<ul>") for (i=0;i<7;i++) { document.write("<li>" + hoje[i]) } document.write("</ul>") } </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> dias = new Array("Domingo","Segunda","Tera","Quarta","Quinta","Sexta","Sbado") semana(dias) </SCRIPT>
Ex6: Funo recursiva (recursivas: funes que chamam a elas mesmas)

<SCRIPT LANGUAGE="JavaScript"> function fatorial(n) { if (n<0) { return -1; } if (n<=1) { return 1; } return n*fatorial(n-1); } document.write("O fatorial de 3 : "+fatorial(3)); </SCRIPT>
WEBDESIGN
60

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

Prof. Marcos Alexandruk

CONCEITOS BSICOS INTERNET

TCP/IP (Transmition Control Protocol/Internet Protocol)

HTTP (HiperText Transfer Protocol)

FTP (File Tranfer Protocol)

DNS (Domain Name System)

HTML CONSIDERAES INICIAIS

nome do arquivo de msica "infinite" ou qualquer valor inteiro

Internet Explorer e Netscape:

src loop autostart hidden width=1 e height=1

TABELA EXEMPLO COMPLETO

type name value TEXT

O valor "text" no parmetro "type" indica que o campo ser de texto.

type name value checked

type name value checked

src alt HIDDEN

identifica o dado define o valor que deve ser passado

name rows cols

FORMULRIO - EXEMPLO COMPLETO

src name scrolling noresize

CARACTERES ESPECIAIS E ACENTUAO

HTML EXTENDED COLORSET

Prof. Marcos Alexandruk

Nota: O estilo INLINE prevalece sobre todos os outros.

MARCADORES <div> E <span>

<h1> Hierarquia dos marcadores <u> <i>

FOLHAS DE ESTILO Fontes

<tr> <td <td <td <td </tr> </html>

style="cursor:w-resize">w-resize</td> style="cursor:nw-resize">nw-resize</td>> style="cursor:text">text</td> style="cursor:wait">wait</td>

visibility Sintaxe geral: style="position: valor; visibility: valores" WEBDESIGN 46

scroll: hidden: visible: auto:

Prof. Marcos Alexandruk

Clculo matemtico usando variveis:

Ex1: Quadrado dos nmeros 1 a 100

Ex3: Soma 20 primeiros nmeros (apresenta somente o resultado)

Ex3: Soma 20 primeiros nmeros (apresenta passo-a-passo e resultado)

Ex3: Soma 20 primeiros nmeros (apresenta passo-a-passo e resultado)

Ex4: Array Associativo

Ex1: Chamando a funo ao carregar a pgina

Ex2: Chamando a funo atravs de um boto

Ex3: Chamando a funo atravs de um link

Ex4: Funo utilizando um array

Ex5: Funo utilizando o comando de repetio for e array

Ex6: Funo recursiva (recursivas: funes que chamam a elas mesmas)

Anda mungkin juga menyukai