teste
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="Exemplo de aplicação de HTML. Manual de HTML básico ">
<meta name="keywords" content="html,htm,exemplo,curso,tutorial">
<meta name="robots" content="index,follow">
<link rel="bookmark" title="INFROMÁTICA BÁSICA">
<title>Tutorial de HTML, Exemplo 2 - Página do Luisão</title>
<style type="text/css">
<!-ul#menu {
width:180px;
border:1px solid #003399;
background:#FADE8B;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #A4A0F5;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#5E0F50;
border-left:10px solid #EEC591;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #FFE4B5;
color:#DAA520;
border-left:10px solid #FFD39B;
}
-->
</style>
<script type="text/vbscript">
sub mySub1()
dim nom,num
Página 1
teste
x=msgbox ("SEJA BEM VINDO",0, "CURSO DE ENGENHARIA DE ALIMENTOS")
nom = InputBox("Digite seu nome:","CURSO DE ENGENHARIA DE ALIMENTOS")
num = InputBox("Digite seu número:","CURSO DE ENGENHARIA DE ALIMENTOS")
x=msgbox ("O nome digitado foi: " &nom& " e o número foi: "&num,0,"CURSO DE
ENGENHARIA DE ALIMENTOS")
end sub
sub mySub2()
if msgbox ("Deseja dormir?",vbyesno,"Teste de mensagem 4")=vbyes then
x = msgbox ("BOA NOITEEEE...
",0, "Resposta para YES")
else
x = msgbox ("VAI LER UM BOM LIVROOO...",0, "Resposta para NO")
end if
end sub
</script>
</head>
<BODY BACKGROUND="funo.jpg" BGCOLOR=#BBBBBB LINK=RED VLINK=YELLOW>
<CENTER>
<TABLE WIDTH=1190 HEIGHT=150 BGCOLOR=#CCFFCC BORDER=2 ><TD><CENTER>
<FONT COLOR=BLUE SIZE=+5><B><U> INFORMÁTICA BÁSICA
</U></B></FONT><BR>
<BLINK>PODE SER UM LOGO TIPO, UMA FOTO, UMA ANIMAÇÃO </BLINK>
<marquee behavior="alternate" scrollDelay="50"><img src="estrela.gif"></marquee>
<menu label="File">
<button type="button" onclick="file_new()">SITE DA UFT</button>
<button type="button" onclick="file_open()">SITE DA ENGENHARIA</button>
<button type="button" onclick="file_save()">SITE DO ALUNO</button>
<button type="button" onclick="file_save()">BOTÃO DE TESTE</button>
</menu>
</CENTER></TD></TABLE>
<TABLE WIDTH=1190 BORDER=2> <!-- Esta tabela divide a tela em duas colunas -->
<TR>
<TD WIDTH=190 VALIGN=TOP> <!-- ABRE A COLUNA Esta celula representa a area azul -->
Página 2
teste
<CENTER>
<TABLE WIDTH=190 BGCOLOR=YELLOW BORDER=1><TD><CENTER>
<FONT COLOR=RED><B> CURSO DE HTML: </B></FONT><BR>
</CENTER></TD></TABLE>
<A HREF="pagina1.html">Tags básicas</A><BR>
<A HREF="menu.html">Tags avançadas</A><BR>
<A HREF="body.html" onclik="alert ( TCHAU, ATÉ LOGO! )">Imagens e tabelas</A><BR>
<A HREF="http://www.w3schools.com/vbscript/func_msgbox.asp" TARGET="_BLANK">Site
Legal</A><BR>
<BR>
<TABLE WIDTH=190 BGCOLOR=YELLOW BORDER=1><TD><CENTER>
<FONT COLOR=RED><B> PROGRAM EM VBS: </B></FONT><BR>
</CENTER></TD></TABLE>
<button onclick="mySub1()">EXEMPLO 1</button><BR>
<button onclick="mySub2()">EXEMPLO 2</button><BR>
<button onclick="mySub1()">EXEMPLO 3</button><BR>
<button onclick="mySub2()">EXEMPLO 4</button><BR>
<BR>
<TABLE WIDTH=190 BGCOLOR=YELLOW BORDER=1><TD><CENTER>
<FONT COLOR=RED><B> GRÁFICOS: </B></FONT><BR>
</CENTER></TD></TABLE>
<TABLE WIDTH=190 BGCOLOR=#CCFFCC ><TD><CENTER>
<A HREF="html1.htm"> <FONT COLOR=BLUE><B>LINEAR </B></FONT><BR> </A>
</CENTER></TD></TABLE>
<TABLE WIDTH=190 ><TD><CENTER>
<A HREF="html1.htm"> <FONT COLOR=BLUE><B>QUADRÁTICA </B></FONT><BR>
</A>
</CENTER></TD></TABLE>
<TABLE WIDTH=190 BGCOLOR=#CCFFCC ><TD><CENTER>
<A HREF="html1.htm"> <FONT COLOR=BLUE><B>EXPONENCIAL </B></FONT><BR>
</A>
</CENTER></TD></TABLE>
<TABLE WIDTH=190 ><TD><CENTER>
<A HREF="html1.htm"> <FONT COLOR=BLUE><B>LOGARÍTIMICA </B></FONT><BR>
</A>
</CENTER></TD></TABLE>
<BR>
<TABLE WIDTH=150 BGCOLOR=#CCFFCC><TD><CENTER>
<FONT COLOR=RED><B><U>Detalhe:</U></B></FONT><BR>
Este quadro é uma tabela de uma só célula.
</CENTER></TD></TABLE>
<BR>
<B>Links:</B><BR>
<A HREF="http://www.dokimos.org/ajff/">Ótimo portal</A><BR>
<A HREF="http://www.zmax.org/supergreg/sgdotcom/">Página do Greg</A><BR>
<A HREF="http://pixyland.org/">Página do Randy</A><BR>
<A HREF="http://www.meiodia.com.br/">Portal Meio dia</A><BR>
Página 3
teste
<A HREF="mailto:[email protected]">E-mail pessoal</A><BR>
</FONT>
<BR>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutoriais CSS</a></li>
<li><a href="#">Normas XHTML do W3C</a></li>
<li><a href="#">Posicionamento CSS</a></li>
<li><a href="#">Contato</a></li>
</ul>
</CENTER>
</TD> <!-- FECHA A COLUNA Esta celula representa a area azul -->
<TD WIDTH=1000 VALIGN=TOP> <!-- ABRE A COLUNA MAIOR Esta celula representa a
area branca -->
<CENTER><FONT FACE="COURIER NEW,COURIER" SIZE=+3 color=blue><B>
Diagramação em HTML
</B></FONT></CENTER>
<BR>
<HR WIDTH=50% SIZE=2 COLOR=GREEN>
<BR>
<P ALIGN=JUSTIFY>
Através dos simples comandos (ou <I>tags</I>) de HTML é possível fazer formatações bastante
elaboradas. Procure identificar no código fonte desta página os diferentes recursos que foram
utilizados.<BR>
</P>
<BR>
<UL>
<LI>Tags de formatação (cores, fontes...);
<LI>Colunas de texto;
<LI>Tabelas;
<LI>Uso de imagens;
<LI>Atributos de alinhamento;
<LI>Listas com marcadores (esta aqui!).
</UL>
<P ALIGN=JUSTIFY>
A tag <b><IMG></b> permite definir vários modos de alinhamento de texto, para que seja
possível inserir figuras dentro de uma seqüência de parágrafos sem que seja necessário recorrer a
uma tabela.<BR>
<IMG SRC="fundo.jpg" ALIGN=RIGHT HEIGHT=95 WIDTH=95>
Vejamos como exemplo a imagem ao lado. Esta é uma esfera texturizada gerada num programa de
Página 4
teste
editoração gráfica 3D. Ela foi colocada à direita deste parágrafo através da opção
<b>ALIGN=RIGHT</b>. A definição de alinhamento do texto manteve-se inalterada: o texto
continua justificado. O resultado torna-se bem natural, e não destoa do padrão visual geral da
página, sem formatações extras. À medida que o texto se estende e deixa de caber ao lado do figura,
sua formatação é encaixada normalmente logo abaixo da figura, como vemos aqui, e até mesmo
quando há quebras de linha.<BR>
<BR>
Quando se prepara a diagramação de uma página, é importante lembrar-se de que há diferentes
visualizações possíveis de uma página. A tendência é que a web seja acessível das mais diferentes
formas, não só a partir de PCs e Macs, mas também de outros computadores (alguns até de 8 bits),
videogames, set-top-boxes (como a WebTV) e até palmtops (como o Pilot). Isso significa diferentes
resoluções, capacidades gráficas e profundidade de cores (<i>color depth</i>).
<BR>
Limitando-se aos computadores desktop/notebook de 16 e 32 bits, confira nesta tabela algumas das
resoluções mais comuns:<BR>
</P>
<BR>
<CENTER>
<TABLE BGCOLOR=#eeeeee BORDER=1>
<TR>
<TH>Modo</TH> <!-- TH:table header, igual a TD, mas o padrao e' negrito centralizado -->
<TH>Resolução</TH>
<TH><i>Color depth</i></TH>
<TH><i>Cores</i></TH>
</TR>
<TR>
<TD>Sistemas de 16 bits<BR>(150 KB por tela)</TD>
<TD>640x480</TD>
<TD>4 bits</TD>
<TD>16</TD>
</TR>
<TR>
<TD>Laptops /<BR>Desktops low end</TD>
<TD>800x600</TD>
<TD>8 bits</TD>
<TD>256</TD>
</TR>
<TR>
<TD>Uma boa média<BR>(que eu uso <TT>:)</TT> )</TD>
<TD>800x600</TD>
<TD>16 bits</TD>
<TD>65.536</TD>
</TR>
<TR>
<TD>Desktops high end</TD>
<TD>1024x768</TD>
<TD>24 bits</TD>
<TD>16.777.216</TD>
</TR>
Página 5
teste
<TR>
<TD>Desperdício de VRAM<BR>(5 MB por tela!)</TD>
<TD>1280x1024</TD>
<TD>32 bits</TD>
<TD>4.294.967.296</TD>
</TR>
</TABLE>
</CENTER>
<BR>
<P ALIGN=JUSTIFY>
Procurar simular como a página aparecerá em cada sistema é importante. Experimentar os modos
vistos acima são uma boa solução para os dias de hoje, exceto o último, que é pouco usado e pouco
suportado pelas páginas de hoje.<BR>
Perceba que o papel de parede é sempre colocado "lado a lado" (<i>tiled</i>). Para que o papel de
parede aparente estar replicado apenas verticalmente e não horizontalmente, usa-se uma imagem
maior ou igual ao tamanho da tela.<BR>
Mas qual o tamanho da tela? Eu, e a maioria dos web designers, contenta-se em arquivos de 1024
pixels de largura, já que 1024x768 é um modo cada vez mais usado. Se sua placa de vídeo e monitor
suportam o modo 1280x1024, experimente visualizar esta página: a barra azul será replicada após o
texto, e este efeito desagradável aparece na maioria das páginas que desenham este "frame
virtual".<BR>
A solução seria usar um arquivo gráfico mais largo, mas sempre pode haver uma resolução maior
amanhã, então eleger 1024 como a maior largura entre as usadas parece ser razoável para os padrões
de hoje, no fim dos anos 90.
<BR>
</TD>
</TABLE>
</CENTER>
</BODY>
</HTML>
Página 6
Download
