<html> teste <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
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> <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> <TABLE WIDTH=1190 BORDER=2> <!-- Esta tabela divide a tela em duas colunas --> <TD WIDTH=190 VALIGN=TOP> <!-- ABRE A COLUNA Esta celula representa a area azul --> Página 2
<CENTER> <TABLE WIDTH=190 BGCOLOR=YELLOW BORDER=1><TD><CENTER> <FONT COLOR=RED><B> CURSO DE HTML: </B></FONT> <A HREF="pagina1.html">Tags básicas</a> <A HREF="menu.html">Tags avançadas</a> <A HREF="body.html" onclik="alert ( TCHAU, ATÉ LOGO! )">Imagens e tabelas</a> <A HREF="http://www.w3schools.com/vbscript/func_msgbox.asp" TARGET="_BLANK">Site Legal</A> <TABLE WIDTH=190 BGCOLOR=YELLOW BORDER=1><TD><CENTER> <FONT COLOR=RED><B> PROGRAM EM VBS: </B></FONT> <button onclick="mysub1()">exemplo 1</button> <button onclick="mysub2()">exemplo 2</button> <button onclick="mysub1()">exemplo 3</button> <button onclick="mysub2()">exemplo 4</button> <TABLE WIDTH=190 BGCOLOR=YELLOW BORDER=1><TD><CENTER> <FONT COLOR=RED><B> GRÁFICOS: </B></FONT> <TABLE WIDTH=190 BGCOLOR=#CCFFCC ><TD><CENTER> <A HREF="html1.htm"> <FONT COLOR=BLUE><B>LINEAR </B></FONT> </A> <TABLE WIDTH=190 ><TD><CENTER> <A HREF="html1.htm"> <FONT COLOR=BLUE><B>QUADRÁTICA </B></FONT> </A> <TABLE WIDTH=190 BGCOLOR=#CCFFCC ><TD><CENTER> <A HREF="html1.htm"> <FONT COLOR=BLUE><B>EXPONENCIAL </B></FONT> </A> <TABLE WIDTH=190 ><TD><CENTER> <A HREF="html1.htm"> <FONT COLOR=BLUE><B>LOGARÍTIMICA </B></FONT> </A> <TABLE WIDTH=150 BGCOLOR=#CCFFCC><TD><CENTER> <FONT COLOR=RED><B><U>Detalhe:</U></B></FONT> Este quadro é uma tabela de uma só célula. <B>Links:</B> <A HREF="http://www.dokimos.org/ajff/">Ótimo portal</a> <A HREF="http://www.zmax.org/supergreg/sgdotcom/">Página do Greg</A> <A HREF="http://pixyland.org/">Página do Randy</A> <A HREF="http://www.meiodia.com.br/">Portal Meio dia</a> Página 3
<A HREF="mailto:luisao.webmaster@gmail.com">E-mail pessoal</a> </FONT> <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> <HR WIDTH=50% SIZE=2 COLOR=GREEN> <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. </P> <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. <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
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. 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>). Limitando-se aos computadores desktop/notebook de 16 e 32 bits, confira nesta tabela algumas das resoluções mais comuns: </P> <CENTER> <TABLE BGCOLOR=#eeeeee BORDER=1> <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> <TD>Sistemas de 16 bits(150 KB por tela)</td> <TD>640x480</TD> <TD>4 bits</td> <TD>16</TD> <TD>Laptops /Desktops low end</td> <TD>800x600</TD> <TD>8 bits</td> <TD>256</TD> <TD>Uma boa média(que eu uso <TT>:)</TT> )</TD> <TD>800x600</TD> <TD>16 bits</td> <TD>65.536</TD> <TD>Desktops high end</td> <TD>1024x768</TD> <TD>24 bits</td> <TD>16.777.216</TD> Página 5
<TD>Desperdício de VRAM(5 MB por tela!)</td> <TD>1280x1024</TD> <TD>32 bits</td> <TD>4.294.967.296</TD> </TABLE> </CENTER> <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. 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. 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". 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. </TD> </TABLE> </CENTER> </BODY> </HTML> Página 6