Escolar Documentos
Profissional Documentos
Cultura Documentos
Histrico
A Internet deve incio em 1969 sob o nome de ARPANET (USA).
Composta de quatro computadores tinha coo finalidade,
demonstrar as potencialidades na construo de redes usando
computadores dispersos (espalhados) em uma grande rea. A
idia foi boa, e em 1972, 50 universidades e instituies militares
j possuam conexes.
CONECTANDO SE INTERNET
TIPOS DE CONEXES
Existem dois tipos de conexes para acesso a
Internet.
DEDICADA So as conexes diretas, utilizadas pelos
fornecedores de servios que vendem conexes de
todos os tipos para pessoas e organizaes. Estes
tipos de fornecedores chamamos de Provedores.
Estas linhas so de alta velocidade e tambm muito
caras.
DISCADA - o tipo de conexo usada por usurios
comuns. Nesse caso, voc disca para o provedor
atravs da Rede DialUp, pedindo acesso a Internet.
HTML
Toda vez que voc acessar um site (veja
tpico Word Wide Web) por meios de
domnios quando adiciona a URL na barra de
endereo, do seu Navegador (Browser), voc
ver pginas na WEB bem dinmicas,
organizadas, animadas e com ela trazendo
informaes, imagens, sons, vdeos e etc.
HIERARQUIA DE ELEMENTOS
Primeiramente, gostaria de lembrar, que
existem vrios editores de Home Pages, como
por exemplo: o Front Page Express, Netscape
Composer, Home Site, Dreamweaver etc. S
que na ausncia destes aplicativos e voc
desconhecendo a Linguagem de HyperTextos,
HTML, no poderia criar suas pginas. Da a
importncia de se conhecer esta linguagem.
<head>
<title>COLOQUE AQUI O TTULO DA PGINA</title>
</head>
<body>
DAQUI EM DIANTE Voc DESENVOLVE SUA PGINA
</body>
</html>
TAG
O QUE FAZ
</body>
</html>
Resposta
1) Abra o Menu Arquivo e escolha
Salvar
2) Na janela que aparecer como
mostrar figura ao lado, faa as
seguintes tarefas:
2.1) Na opo Salvar em selecione a
pasta onde deseja salvar, no caso
Meus Documentos
2.2) Na opo Nome do arquivo
coloque o nome do arquivo
exemplo1.html
2.3) Finalmente clique no boto
Salvar.
Exerccio 2
Em alguns momentos em sua pgina faz
necessrio comentar alguns trechos do cdigo
para facilitar na leitura e manuteno da pgina,
por isso adicionamos comentrios, ou seja,
palavras ou frases que no so exibidos no
Nevegador, apenas so visto como estamos
trabalhando no cdigo fonte.
Na listagem 1.3 faremos um novo exemplo e
incrementaremos novos tags. Digite a listagem
1.3 abaixo e salve com o nome exemplo2.html
na pasta Meus Documentos.
Listagem 1.3
<!Incio do Documento HTML>
<html>
<head>
<title>Melhorando Minha Home Page</title>
<meta name="author" content="NMBS Informtica">
<meta name="keywords" content="html, homepages">
</head>
<! Incio do Corpo da Pgina>
<body>
<h1>Este o ttulo Principal</h1>
<h2>Este o ttulo Secundrio</h2>
<h3> Estou adorando criar pginas</h3>
<hr>
<p>Este o 1 Primeiro Paragrfo <br> Esta 2 Linha do 1 Paragrfo
<p>Com este recurso inicio um paragrfo<br> E Com este recurso quebro uma linha
<hr>
<! Fim do Corpo da Pgina>
</body>
</html>
<! Fim do Documento HTML>
IMPORTANTE
TAG
<!>
<meta>
O QUE FAZ
Insere comentrios nas pginas
Marcas Metas. Servem para voc especificar o autor,
palavras-chaves, descrio da pgina, etc..
Dentro do tag<meta>, tem os comandos name e o
content. No comando name voc especifica que
informao voc quer dar, e no content voc descreve a
informao
<hn>
<hr>
<p>
<br>
Listagem 1.4
<html>
<head>
<title>Tags para Alinhamentos</title>
</head>
<body>
<h4 align=center>Ttulo Centralizado</h4>
<h4 align=right>Ttulo Direita</h4>
<h4 align=left> Ttulo Esquerda<h4>
<hr>
<p align=center> Pargrafo ao Centro
<p align=right>Pargrafo a direita
<p align=left>Paragrfo a esquerda
<p align=justify>Este um texto justificado. Na linguagem HTML
temos vrios tipos de alinhamentos que voc poder aplicar em sua pgina
<br> <br>
<hr width=50% align=center>
<blockquote>Texto com mais margem</blockquote>
<blockquote><blockquote>Mais margem
ainda</blockquote></blockquote>
</body>
</html>
O QUE FAZ
Alinha o trecho (texto, imagem ou tabela ao centro>
Atributos
Size = define a altura da linha. Exemplo: <hr size=50>
Width = define a largura da linha horizontal.
Exemplo: <hr width=200>ou <hr width=50%>
Noshade = desenha a linha sem a sombra para dar o
efeito de trs dimenses. Exemplo: <hr noshade>
Listagem 1.5
<html>
<head>
<title>Formatando Estilos</title>
</head>
<body>
<center>Mudando o Estilo dos Caracteres</center>
<p>
<b>Texto em Negrito</b><br>
<i>Texto em Itlico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaado</tt><br>
<br><font color=red>Texto em Vermelho</font>
<br><font size=5>Texto em Tamanho 5</font>
<br><font face=verdana>Texto com a letra Verdana</font>
<br><font face=arial black>Voc pode fazer combinaes</font>
<br><center>
<font color=blue face=verdana size=5><b>Editora rica</b></font></center>
<br>Voc poder os atributos para cada tipo de letra!
<br>
<font color=blue size=6>E</font><font color=red size=4>ditora rica</font>
<br>
<pre>
Estamos progredindo
no curso de HTML.
Este tag permite que todos os espaos feitos no cdigo fonte
sejam respeitados. Certo?
</pre>
</body>
</html>
<font>
O QUE FAZ
Coloca o texto em negrito
Coloca o texto em itlico
Coloca o texto sublinhado
Coloca o texto em fonte monoespaada. (fonte Courier,como
mquina de escrever)
Modifica a formatao do texto.
Atributos:
Size = define o tamanho da letra. Ex: <font size=5>Texto</font>
Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font color=red>Texto</font>
TABELA DE CORES
Assim como em uma carta ou qualquer outro documento comum, precisamos listar tpicos
atravs de smbolos ou nmeros. Para entender isto, digite a listagem 1.6, e salve como
exemplo5.html.
Listagem 1.6
<html>
<head>
<title>Listas</title>
</head>
<body>
<h3>Isto uma lista</h3>
<! Incio dos Numeradores>
<ol>
<li>Item 1
<li>Item 2
</ol>
<! Fim dos Numeradores>
<hr width=50% size=5 align=left>
<! Incio dos Marcadores>
<ul>
<li>Item 1
<li>Item 2
</ul>
<! Fim dos Marcadores>
</body>
</html>
O QUE FAZ
Marca o incio e o fim de uma lista ordenada. Recebem na primeira
linha um nmero ou letra. Devem ser usados com tag <LI>
Atributos
Start = especifica o nmero a partir do qual os itens comeam a ser
contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser: nmero, letras
ou algarismo romano.
Ex: <ol type=A> <ol type=I>
<ul>
Exerccio
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto uma listagem iniciando no nmero 4</h3>
<ol start=4>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<h3>Isto uma listagem com letras</h3>
<ol type=A>
<li>Editora
<li>rica
<li>Livros
</ol>
<h3>Isto uma listagem em algarismo romano</h3>
<ol type=I>
<li>Editora
<li>rica
<li>Livros
</ol>
<h3>Esta uma listagem em algarismo romano a partir do nmero 3</h3>
<ol type=I start=3>
<li>Editora
<li>rica
<li>Livros
</ol>
</body>
</html>
Imagem de Fundo
Listagem 1.10
<html>
<head><title>Inserindo Imagem no Fundo da Pgina</title>
</head>
<body background=parede.gif bgproperties=fixed>
<h1 align=center>Editora rica</h1>
<font size=4 face=verdana>
<ul>
<li>Livros
<li>Dicas
<li>Volte Sempre
</ul>
</font>
</body>
</html
Exerccio 7 IMAGENS
Neste exemplo exercitaremos os tags que permitem a
insero de imagens em sua home page.
Antes de iniciar o estudo sobre imagens, quero lembrar-lhe
que uma imagem s poder ser exibida no browser, se ela
estiver na mesma pasta, ou ento, voc dever apontar o
caminho onde est, conforme o exemplo de nmero 6.
Listagem 1.11
<html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos trabalhando com imagens</h1>
<h3> Esta sua primeira imagem. Sorria?</h3>
<img src=fig.jpg align=left>Veja se consegue enxergar, as
seguintes imagens?<br>
O rosto de um velho<br>
Uma moa<br>
Um cachorro<br>
Um outro velho<br>
Um pssaro<br>
E algo mais<br>
</body>
</html>
Alinhamento de Imagens
Listagem 1.12
<html>
<head><title>Imagens</title>
</head>
<body>
Note neste exemplo que a imagem <img src=fig2.jpg> est entre o texto<br>
<img src=fig2.jpg align=top>Imagem est esquerda e o texto no topo<br>
<img src=fig2.jpg align=middle>Imagem est esquerda e o texto no centro<br>
<img src=fig2.jpg align=left>Neste exemplo a imagem ficou alinhada esquerda,
permitindo que o texto ficasse todo direita ao redor da imagem. Utilize este
recurso toda vez que desejar que o texto fique ao lado da imagem <br>
</body>
</html>
Tabelas
Utilizaremos a tabela como recurso para a
definio dos layouts de nossas pginas.
Listagem 1.13
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=2> <! Aqui comea a Tabela>
<tr><! Aqui Comea uma linha>
<td>Clula1</td>
<td>Clula2</td>
<td>Clula3</td>
</tr><! Aqui termina uma linha>
<tr><! Aqui Comea outra linha>
<td>Frase 1</td>
<td>Frase 2</td>
<td>Frase 3</td>
</tr><! Fim da outra linha>
</table><! Fim da Tabela>
</body>
</html>
Tabelas
Resultado da listagem 1.13
Listagem 1.14
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=1 width=400 height=50 cellpadding=5 cellspacing=5>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
</table>
</body>
</html>
Tabelas
Resultado da listagem 1.14
Tabelas - Alinhamentos
Listagem 1.15
Os elementos dentro
da tabela tambm
podem ser alinhados
da mesma forma
que um pargrafo
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=1 width=400 height=120 cellpadding=5 cellspacing=5>
<tr>
<td align=center>No Centro</td>
<td align=right>Para Direita</td>
<td align=left>Para a Esquerda</td>
</tr>
<tr>
<td valign=bottom>Em baixo</td>
<td valign=top>No Topo</td>
<td valign=middle>Centro na Vertical</td>
</tr>
</table>
</body>
</html>
Tabelas
Resultado da listagem 1.15
Tabela - Cores
Cor de Fundo
Voc pode ainda adicionar cores no fundo da tabela ou apenas de
uma clula que deseja. Lembra do atributo bgcolor, ento com este
mesmo que voc pode adicionar um cor padro para tabela ou para a
clula. Veja o exemplo:
<table bgcolor=blue>
O resultado seria assim: Toda Tabela teria um preenchimento azul
Tabela - Cores
Veja mais este exemplo:
<table>
<tr>
<td bgcolor=beige>Bege</td>
<td bgcolor=red> Vermelho<td>
O resultado seria assim: As clulas teriam cores diferentes
Tabelas
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG
<table>
<tr>
<td>
border=n
O QUE FAZ
Marca o incio e o fim de uma tabela
Atributos
Width define a largura da tabela ou da clula
Height define a altura da tabela ou da clula
Cellpadding define a margem dentro das clulas
Cellspacing define o espao entre as clulas
Bgcolor define a cor de fundo da tabela ou da clula
Marca o incio e o fim de uma linha
Marca o incio e o fim de uma clula
Coloca uma borda na tabela, onde n o valor em pixels da borda
align=left
align=right
align=center
valign=top
Alinha o contedo da clula no topo (vertical)
valign=bottom Alinha o contedo da clula na base da clula (vertical)
valign=middle Alinha o contedo da clula no centro na vertical
Links
Estamos produzindo pginas de hipertextos, ou
seja, textos que podem fazer ligaes com outros
textos, ligando pginas entre si e a WEB. Ento, este
pontos ns chamamos de links ou hyperlinks,
ncoras de hipertexto, todos com a mesma funo,
de atravs de um nico clique sobre a frase ou
imagem conduzir a algum lugar no site ou na WEB.
Links
Tag responsvel o <A>, onde dentro deste,
atravs de um atributo coloco a referncia, ou
seja, A URL (Uniform Resource Locator).
Onde:
<a> tag que marca o incio e o fim do link
href= atributo que especifica o nome da referncia URL o
nome do local para onde desejar ligar (ir)
Listagem 1.16
<html>
<head><title>Estudando Links</title>
</head>
<body>
<h2>Exemplo de Links Internos</h2>
<h3>Seo de Exemplos</h3>
<a href=exemplo1.html>Exemplo1</a>
<a href=exemplo2.html>Exemplo2</a>
<hr>
<h2>Exemplo de Links Externos</h2>
<a href=http://www.erica.com.br>Conhea a Editora
rica</a><br>
<a href=http://www.apple.com>Apple Computer</a>
<h3>Voc pode usar imagens para usar nos links</h3>
<a href=exemplo10.html><img src=bola.gif>
</a>Imagens
</body>
</html>
Links
Resultado da listagem 1.16
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
...
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Listagem 1.17
Link para a
mesma Pgina
Listagem 1.19
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Ttulo da Web Page</h1></div>
<div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="conteudo" style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;">
Escreva o contedo aqui</div>
<div id="rodape" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright W3Schools.com</div>
</div>
</body>
</html>
Formulrios
Para criar uma interface entre o formulrio e o
usurio, usaremos a tag <FORM>
Nesta interatividade, teremos vrias opes para
entradas de textos (informaes):
campos de entrada de texto
menus de mltipla escolha ou escolha nica
botes sim-ou-no
botes para submisso ou limpeza de formulrio
Formulrios
TAGs Definindo um Formulrio
Formulrios
Atributos da tag <FORM>
Formulrios
Atributos da tag <FORM>
<html>
<head>
<title>Ttulo</title>
</head>
<body>
<form method="POST" action="www.site.com.br/script">
<!Contedo do formulrio>
</form>
</body>
</html>
<html>
<head>
<title>Ttulo</title>
</head>
<body>
</body>
</html>
Tag <input>
Muitos elementos de um formulrio html so definidos
pela tag <input>.
Cada tipo de elemento possui parmetros prprios,
mas quase todos possuem pelo menos dois
parmetros em comum: type, que define o tipo de
elemento, e name, que define o nome daquele
elemento.
Parmetro TYPE
SIZE=XXX"
</form>
*checked
</form>
*checked
</select>
*<option selected>