AULA 7: Barras de rolagem, dicas para criar um site

Separadores primários


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

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


Faça um donativo!

Faça um donativo!

Agora é mais fácil com Paypal!

Com o paypal.me pode contribuir para o site em qualquer moeda e em qualquer valor com a segurança desta plataforma.

Clique aqui para ajudar com o que quiser, com o que poder.