AULA 7: Barras de rolagem, dicas para criar um site
Vamos aprender dois pormenores gráficos que pode querer utilizar. São eles o Background (imagem de fundo) e o tag <hr> (horizontal rule, ou barra horizontal). Vamos ainda saber como criar um site, e alguns cuidados a ter.
Até aqui já aprendeu praticamente todos os tags básicos para construir uma homepage completamente funcional. Vamos agora só acrescentar mais dois pormenores gráficos que são dispensáveis mas que pode querer utilizar. São eles o Background (imagem de fundo) e o tag <hr> (horizontal rule, ou barra horizontal).
Imagens de fundo
Na sua página poderá querer ter como fundo, não apenas uma côr, mas sim uma
textura, ou algo gráficamente mais complexo.
Para isto usamos um parâmetro do tag <body> que se chama background=""
Usamos assim:
<body background="nomedaimagem"
Óbviamente que deve substituir a parte 'nomedaimagem' pelo nome e extenção real
de uma imagem previamente guardada na mesma directoria da sua página. Se por
exemplo quiser uma página inundada de rádios, usará:
<body background="radio.jpg">
</body>
(este <body> é o mesmo onde já definiu a côr do texto, links, etc. Aliás, só
existe um body e um /body num dado ficheiro HTML)
Este parâmetro vai pegar na imagem que definiu e repeti-la até preencher toda a
sua página, como se de um azulejo se tratasse. Não aconselhamos a usar o rádio
como fundo, já que pode tornar a sua página num
autêntico caos.
Opte pelas imagens simples, tons suaves com pouca informação. Na aula anterior
já demos alguns endereços de sites onde pode encontrar imagens próprias para
serem usadas como fundo.
Repare que a imagem de fundo sobrepõe a côr que definiu para fundo. Isto é : se
definir na sua página uma côr de fundo e uma imagem de fundo (background) a
imagem irá sempre sobrepôr-se à côr de fundo. O que poderá, no entanto,
acontecer é, quando a sua página está alojada num servidor e um utilizador a
visita, poderá vêr primeiro a côr de fundo e de seguida a imagem de fundo a
sobrepôr-se a ela. Se a imagem do background fôr muito pesada, o visitante ainda
ficará algum tempo a vêr a sua página com a côr de fundo definida. É portanto
aconselhável definir sempre uma côr que respeite mais ou menos os tons da imagem
de fundo.
Outro acréscimo gráfico: o <hr>
O tag <hr> significa horizontal rule, ou régua horizontal. Não é uma régua, é
apenas um traço. Este tag , embora tenha caído em desuso, pode ajudar na
organização gráfica da sua página criando uma separação de zonas e temas.
Para o usar não é preciso ser nenhum perito, apenas acrescente o tag <hr> na
zona onde pretende ter uma linha a separar o conteúdo da sua homepage. Este tag
automáticamente cria um parágrafo e 'parte' o conteúdo em dois.
O <hr> tem alguns parâmetros que podem ser usados. O mais útil será o do
tamanho. Se não lhe definir qualquer tamanho ele automáticamente adoptará toda a
largura da sua página.
Parâmetro para o comprimento:
width=""
Parâmetro para a altura:
size=""
Assim, se pretender uma pequena linha apenas como quebra usará, por exemplo:
<hr width="200" size="2">
Esta linha terá 200 pixeis de comprimento e 2 de altura.
Poderá também definir uma côr para o seu <hr>, com o parâmetro color="" que é
usado precisamente da mesma maneira que a côr do texto, links ou fundo. No
entanto, este parâmetro NÃO é reconhecido pelo Netscape.
Mais uma vez vamos ver qual o estado possível da sua página, utilizando estes
dois novos elementos:
<HTML>
<TITLE>A minha primeira página</TITLE>
<BODY bgcolor="#FFFF00" text="#0000FF" link="#FF0000" vlink="#808000"
background="fundopagina.gif">
<center>
<h1>A minha primeira página</h1>
</center>
<IMG SRC="radio.jpg" width="75" height="100" border="0" align="left" alt="Fotografia
de um rádio antigo">
<b>
<font face="arial, helvetica" size="3" color="#000000">
Viva, esta é a minha primeira página.<br>
Estou ainda a aprender como construir
uma página html.
Nesta ultima aula aprendi como inserir uma imagem de fundo.
<br>
Sei também que se quiser posso
linkar esta imagem para outra página.
<br>
Numa das aulas anteriores compilei
alguns dos meus sites preferidos, que poderá visitar.
Que estão por baixo de uma linha que criei com o tag HR.<br>
Como podem ver a minha página aos poucos e poucos vai ganhando forma.
Estou a tornar-me um verdadeiro profissional :) .
<br><br>
</font>
</b>
<center>
<hr width="500" color="#FF0000">
</center>
<font face="arial, helvetica" size="3" color="#000000">
<UL>
<LI>
<a href="http://www.aminharadio.com">
<b>AMINHARADIO</b>
</a> - O site português dedicado à rádio, Restauro,
Sons, fotos, música antiga, etc.
<LI>
<a href="http://www.sapo.pt">
<b>Sapo</b>
</a> - O mais famoso dos índices de sites portugueses.
<LI>
<a href="http://www.negocios.pt">
<b>Canal de Negócios</b>
</a> - Onde eu vou para saber como estão as minhas acções da bolsa.
<LI>
<a HREF="autor.html">
<b>Acerca de mim</b>
</a> - Um pouco sobre o autor desta página.
</UL>
<p align="right">
Envie-me um
<b>
<a href="mailto:a.silva@xpto.pt">e-mail</a>
</b>
</p>
</font>
</BODY>
</HTML>
Nunca é demais relembrar que a melhor maneira de criar boas páginas, é criando
muitas. Experimente vários fundos, veja como eles combinam com as cores que
escolheu para o seu texto, para os links etc.. Se for necessário (ou mesmo que
não seja) não tenha problemas em começar tudo de novo, agora com outras cores,
outras fontes com vários tamanhos. Insira imagens alinhe à esquerda e à direita,
mude a posição do texto, se correr mal, pode sempre recomeçar.
Criar um 'Site'
Até aqui supomos que já tenha a sua página de entrada minimamente estruturada,
mas ter toda a informação numa só página pode ser um pouco desagradável.
Imagine como vai querer o seu site. Quantas páginas vai ter, idealize o aspecto
gráfico geral, mantenha uma coerência em todas as páginas que dele fazem parte.
A primeira página, geralmente funciona como um hall de boas vindas, onde o
visitante chega e tem à disposição os caminhos por onde poderá seguir (links)
Estes links serão, neste caso links internos, já que apontam para outras páginas
pertencentes ao mesmo site, o seu.
Todos os htmls e demais ficheiros deverão estar na mesma directoria, assim o
link será simplesmente com o nome do ficheiro html sem necesitar de um endereço
tipo 'http://www....'.
Depois, e apenas como sugestão poderá criar a tal página autor.html, que já
falámos mas ainda não criámos, uma página de links interessantes, uma sobre os
seus hobbies, família, currículum vitae... enfim, escolha o que vai querer
mostrar.
Lembre-se que é sempre agradável para o visitante dispôr de um link de regresso
à página principal. No fim das páginas acrescente sempre este link. Assim a
pessoa que o visita escolhe uma área, e depois pode voltar atrás para visitar
outra. Mais tarde iremos falar de formas possíveis de organizar o seu site.
Lembre-se que deve sempre facilitar a navegação aos visitantes da sua página.<
Comentários
Bil (não verificado)
Qui, 2009-02-19 15:15
Ligação permanente
Re: AULA 7: Barras de rolagem, dicas para criar um site
Categoría: ADMINISTRACIÓN
14 Feb 2009 ~ ¡Feliz San Valentín!
El Día de San Valentín es una celebración tradicional en la que los enamorados, novios o esposos expresan su amor y cariño mutuamente. Se celebra el 14 de febrero, onomástico de San Valentín. En algunos países se conoce como Día de los Enamorados y en otros como Día del Amor y la Amistad.En la actualidad se celebra mediante el intercambio de notas de amor conocidas como «valentines», con símbolos como la forma del corazón o de Cupido, aunque con el auge de Internet se ha extendido la costumbre de intercambiar postales virtuales. También en este día es común la tradición de regalar rosas a aquellas personas a las que se tiene un especial afecto.¡Feliz Dia del Amor y la Amistad! te desea la administración de HabboRNT
Por: rNt
(7) Comentarios
Categoría: MEFWARS
14 Feb 2009 ~ Nuevo server multiusuario gratis!
MeFwArS!!! es un juego de estrategias multiusuario, gratis y online.
Crea tu pueblo y hazlo crecer, desarrolla el comercio y la agricultura y forma tu ejército. Pronto la guerra por el dominio del continente comenzará
Entrar a MeFwArS!!!
Es un juego de Mendozaenfoco
No olvides leer la ayuda para empezar a jugarPor: FedeGM
(0) Comentarios
Categoría: NUEVO DISEÑO
10 Feb 2009 ~ Ya esta llegando!!!
Pues si asi como lo ven la v6.0 casi esta terminada a continuacion les dare las estadisticas dle proyecto.Diseño v6: 100%Minichat: 20%iframe: 58%Novedades: 100%Esperala muy Pronto!!!
Por: Darths
(9) Comentarios
Categoría: AYUDANOS
05 Feb 2009 ~ Ayudanos a Ser los Primeros
¿Nos ayudas a ser de las mejores centrales?Pues tan solo con tú click no estarás ayudando.¿Que clicks?En la imagen que se muestra abajo o un click AquíTambién recuerden dar clicks a la publicidad de 1 a 2 veces al día y nos estarán ayudando a mantener el sitio web.¡Saludos y Gracias!Por: rNt
(6) Comentarios
Categoría: HERRAMIENTAS
03 Feb 2009 ~ Crea tú Loader
¿Tienes un Retro?¿No tienes un loader?Pues bien, ahora lo puedes crear accediendo a este sitio web.www.habbodcrs.esEs fácil y sencillo, solo eliges la categoría que quieres, luego el tipo de fondo que quieres para tu loader. Cuando eligas el fondo se abrirá en una ventana nueva con un código HTML tienes que seleccionarlo y editarlo con tu IP y tu PUERTO, Cuando lo ayas editado solo ponlo en tu sitio web, Recuerda tener prendido el server para que puedas entrar al retro con el loader.Actualmente la web esta en mantenimientoPor: rNt
(2) Comentarios
Content Management Powered by CuteNews