Histórico para February, 2007

Javascript

Wednesday, February 28th, 2007

Javascript
OBJETO + EVENTO = AÇÃO
Alert
O comando Alert serve para exibir uma caixa de mensagem ao usuário.
Ex.:
<script type=”text/javascript”>
alert(”Bom dia Unipeiros”);
</script>
Prompt
Prompt é uma caixa de mensagem na qual o usuário pode fornecer alguma informação de texto. Usado para fazer perguntas.
<script type=”text/javascript”>
alert(prompt(”Qual seu nome?”));
</script>
Confirm
Usado para fazer uma pergunta ao usuário, onde o mesmo pode ter no máximo uma resposta positiva ou negativa.
<script type=”text/javascript”>
confirm(”Você deseja entrar no site?”);
</script>
Write
Ação do objeto document para escrever na página.
<script type=”text/javascript”>
document.write(”São Paulo, 28 de setembro de 2006″);
</script>

Imagens

Wednesday, February 28th, 2007

Imagens
Figuras na web são basicamente de 3 tipos:
- GIF » 256 Cores, transparência, animação, usado mais em desenho
- JPG » 16,4 milhões de cores, usado mais fotos
- PNG » 16,4 milhões de cores, transparência (Não funciona
corretamente no I.E.)
Para inserir uma imagem no html, utilize a tag IMG.
Exemplo:
<img src=”logotipo.jpg” />
Com pasta, lembrando, utilize sempre o nome do caminho
<img src=”figuras/logotipo.jpg” />
Largura e altura:
<img src=”figuras/logotipo.jpg” width=”30″ height=”50″ />
Texto alternativo (ao passar o mouse)
<img src=”figuras/logotipo.jpg” width=”30″ height=”50″ alt=”Texto
alternativo” />
Alinhamento da imagem em relação ao texto (left, right, top, middle,
bottom)
<img src=”figuras/logotipo.jpg” width=”30″ height=”50″ alt=”Texto
alternativo” align=”right” />
Borda
<img src=”figuras/logotipo.jpg” width=”30″ height=”50″ alt=”Texto
alternativo” align=”right” border=”2″ />
Espaçamento vertical e horizontal
<img src=”figuras/logotipo.jpg” width=”30″ height=”50″ alt=”Texto
alternativo” align=”right” border=”2″ hspace=”3″ vspace=”4″ />

Tabela e Listas

Wednesday, February 28th, 2007

Tabelas
A tabela é iniciada pela tag “<table>” e encerrada por “</table>”.
Toda tabela é composta por uma cabeça de Tabela “<thead>”, corpo da Tabela “<tbody>” e pé da tabela “<tfoot>”.
Na tabela temos que criar linhas “<tr>” e células “<th>”. No caso da célula ser um titulo de cabeçalho, utilizamos o “<th>”.
Para mesclar células, utilize os atributos colspan (mesclar colunas) ou rowspan (mesclar linhas) na célula.
Passos para criação da tabela:
1. Definir a tabela “<table>”
2. Criar a cabeça, corpo e pé da tabela “<thead>” , “<tbody>” e “<tfoot>”
3. Inserir as linhas da tabela dentro das partes da mesma “<tr>”
4. Criar as células dentro das linhas “<th>, <td>” (Aqui também mesclamos as células)
Exemplo de Tabela:
<table>
<thead>
<tr>
<th colspan=”2″>Lorem Ipsum</td>
</tr>
</thead>
<tbody>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
</tfoot>
</table>
Listas
Lista de Definição: Precisa de um titulo.
<dl>
<dt>TV</dt>
<dd>Globo</dd>
<dd>MTV</dd>
<dd>SBT</dd>
<dt>Revista</dt>
<dd>Veja</dd>
<dd>Época</dd>
<dd>Isto É</dd>
</dl>
Lista Não-ordernada:
<ul>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
É possível utilizar outros tipos de marcadores para listas como “circle”, “disc” e “square”.
<ul type=”circle”>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
<ul type=”disc”>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
<ul type=”square”>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
Lista Ordernada:
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
É possível utilizar outros tipos de marcadores para numeradores como “a” “A”, “i” “I” e “1″.
<ol type=”1″>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”a”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”A”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”i”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”I”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>

Links e Caracteres Especiais

Wednesday, February 28th, 2007

Links
As páginas web são distintas uma das outras e para fazer uma conexão de hipertexto entre elas, utilizamos o link.
Os links são classicamente agrupados da seguinte forma:
*       Links internos: os que se dirigem a outras partes dentro da mesma página.
<a name=”superior”></a>
<a href=”#superior”>Topo</a>
*       Links locais: os que se dirigem a outras páginas do mesmo site web.
<a href=”produtos.htm”>Produtos</a>
*       Links remotos: os que se dirigem à páginas de outros sites web.
<a href=”http://www.unip.br”>Universidade Paulista</a>
*       Links com endereços de correio: para criar uma mensagem de correio dirigido a um endereço.
<a href=”mailto:helio.co@gmail.com?cc=heli@msn.com&subject=Dúvidas e Sugestões”>Fale com Hélião</a>
*       Links com arquivos: Para que os usuários possam fazer download de arquivos.
<a href=”trabalho.zip”>Trabalho</a>
Caracteres Especiais
Uma página web é vista por diferentes países, que usam conjuntos de caracteres distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma série de caracteres raros serão bem vistos em todos os computadores do mundo, independentemente de seu jogo de caracteres.
Estes conjuntos são os caracteres especiais. Quando queremos pôr um desses caracteres numa página, devemos substituí-lo por seu código.
Por exemplo, a letra “á” (a minúscula acentuada) se escreve: “á” de modo que a palavra página seria escrita numa página HTML desse modo: p&aamp;aacute;gina .
Caracteres especiais básicos
Na realidade estes caracteres se usam em HTML para não confundir um início ou final de etiqueta, umas aspas ou um & com seu correspondente caracter.
&lt;
<
&gt;

 

&amp;
&
&quot;

Caracteres especiais do HTML 2.0
&Aacute;
Á
&Agrave;
À
&Eacute;
É
&Egrave;
È
&Iacute;
Í
&Igrave;
Ì
&Oacute;
Ó
&Ograve;
Ò
&Uacute;
Ú
&Ugrave;
Ù
&aacute;
á
&agrave;
à
&eacute;
é
&egrave;
è
&iacute;
í
&igrave;
ì
&oacute;
ó
&ograve;
ò
&uacute;
ú
&ugrave;
ù
&Auml;
Ä
&Acirc;
Â
&Euml;
Ë
&Ecirc;
Ê
&Iuml;
Ï
&Icirc;
Î
&Ouml;
Ö
&Ocirc;
Ô
&Uuml;
Ü
&Ucirc;
Û
&auml;
ä
&acirc;
â
&euml;
ë
&ecirc;
ê
&iuml;
ï
&icirc;
î
&ouml;
ö
&ocirc;
ô
&uuml;
ü
&ucirc;
û
&Atilde;
Ã
&aring;
å
&Ntilde;
Ñ
&Aring;
Å
&Otilde;
Õ
&Ccedil;
Ç
&atilde;
ã
&ccedil;
ç
&ntilde;
ñ
&Yacute;
Ý
&otilde;
õ
&yacute;
ý
&Oslash;
Ø
&yuml;
ÿ
&oslash;
ø
&THORN;
Þ
&ETH;
Ð
&thorn;
þ
&eth;
ð
&AElig;
Æ
&szlig;
ß
&aelig;
æ
Caracteres especiais do HTML 3.2
&frac14;
¼
&nbsp;
&frac12;
½
&iexcl;
¡
&frac34;
¾
&pound;
£
&copy;
©
&yen;
¥
&reg;
®
&sect;
§
&ordf;
ª
&curren;
¤
&sup2;
²
&brvbar;
¦
&sup3;
³
&laquo;
«
&sup1;
¹
&not;
¬
&macr;
¯
&shy;
­
&micro;
µ
&ordm;
º
&para;

&acute;
´
&middot;
·
&uml;
¨
&deg;
°
&plusmn;
±
&cedil;
¸
&raquo;
»
&iquest;
¿
Outros caracteres especiais
&times;
×
&cent;
¢
&divide;
÷
&euro;

&#147;

&#153;

&#148;

&#137;

&#140;
Œ
&#131;
ƒ
&#135;

&#134;

Introdução

Wednesday, February 28th, 2007

Introdução ao HTML
Arquivo HTML

HTML » Hyper Text Markup Language
Um página HTML é um arquivo de texto contendo marcações (tag) HTML.
As tags são interpretadas pelo navegador e com isso a página é exibida.
A página pode ser salva em “htm” ou “html”, mas é recomendado usar “htm”.
Uma página HTML pode ser criada usando um editor simples de texto como o
Bloco de Notas
Iniciando: Primeira página.

Abra o Bloco de Notas do Windos
Digite o texto abaixo:
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>
Aqui é o corpo da Página
</body>
</html>
Salve o arquivo como *”pagina1.htm”*.
Abra seu navegador (*Internet Explorer ou Firefox*). Selecione “*Abrir*” no
menu “*Arquivo*”. Selecione “*Procurar*” e localize o arquivo “*pagina1.htm*”
- clique no botão “*Abrir*”. Clique “*OK*” e visualize a página.
A primeira tag do seu arquivo HTML é *<html>*. Esta tag server para o
navegador interpretar que será usado um código HTML na página. A última tag
é a *</html> *que indica a finalização do documento.
Todo texto que estiver entre a tag <head> e a tag </head> são
informações do cabeçalho.
A tag <title> serve para indicar um titulo ao documento, esse será
visualizado na barra de titulo do navegador.

Todo conteúdo que estiver entre a tag <body> será visualizado no corpo do
navegador.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Elementos HTML

Tags HTML

Tags HTML são elementos da Linguagem de Formatação HTML
As tags HTML sempre fica entre um sinal de  ”<” e “>”
Toda tag abre  e fecha. Ex.: “<b> conteúdo </b>” ou “<br />”
É recomendado usar letras minúsculas.
Exemplo de um documento HTML:
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>
Aqui é o corpo da <b>Página</b>
</body>
</html>
Exemplo de um elemento HTML: “<b>Página</b>”
Ele contem um elemento de início “<b>”, um conteúdo no meio “Página” e um
elemento de encerramento “</b>”.
Atributos

As tags contém atributos que são qualidades ou propriedades de uma tag.
Na tag “<body>” por exemplo existe o atributo “bgcolor” (background color)
que determina uma cor de fundo no corpo, este mesmo receberá um valor.
Ex.: <body bgcolor=”red”>

Tags básicas

Cabeçalho: *Cria níveis (1 à 6) de títulos de cabeçalho na página
<h1>Titulo</h1>
<h2>Titulo</h2>
<h3>Titulo</h3>
<h4>Titulo</h4>
<h5>Titulo</h5>
<h6>Titulo</h6>
Parágrafo: *Cria parágrafos de texto na página
<p>Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor. Lorem ipsum sit
amet dolor. </p>
Line Breaks: *Cria uma linha horizontal na página
<hr /> (repare q neste caso foi “abreviado” o fechamento da tag, pois não
existe conteúdo entre elas)
*Comentários: *Insere um texto que no código de fonte da página, este mesmo
não será visualizado no navegador.
<!– comentários –>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tags de formatação HTML

Tag         Descrição
<b>                 texto em negrito
<big>                 texto grande
<em>                 ênfase no texto
<i>                 texto em itálico
<small>         texto pequeno
<strong>         texto forte
<sub>                 Texto subscrito
<sup>                 Texto sobrescrito
<u>                 Texto sublinhado

Ter um blog?

Wednesday, February 28th, 2007

Assim como orkut, assim como msn, assim como fotolog e assim como um blog, achei que nunca iria fazer um blog. Mas como sou bombardiado de informações todos os dias e seguindo a tendência da web 2.0, resolvi compartilhar com vocês diversas informações.

Comercial bem interessante do Colégio Anchieta