VoyForums: odds & ends

[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

This page will focus on lessons which haven't yet appeared on the Tutorial.
First, you'll notice that many HTML Codes have numerous options.
and, additional effects can easily be added or removed.
For example, the sequence might read like this:

<div style="background-color:#0D2C4A; width:79%; padding:1px; color:#ffffff; font-size:1px; text-align:justify; ">material here </div>

If you removed color:#ffffff;, then all written text would simply use the website's default color of text.
If the width:79%; was removed, then your area would automatically be placed at 100% width of screen, rather than 79%.

part 2: Features may also be added, as well.
An excellent feature is smoothing the square edges, by making them curve.
border-radius:14px; (or, any desired number).
So, it might look something like this:
<div style="background-color:#B3C3E2; width:79%; padding:1px; border-radius:14px; color:#0F0F0F; font-size:1px; text-align:justify; ">
material here </div>
Even using a small number, would graphically enhance your Text-Field's overall appearance.

part 3: another unusual effect is adding transparency to the area.
opacity:0.8; will make your text slightly fade away. While, lowering the number to opacity:0.4; increases the transparency.
In other words, it becomes more and more 'See Through', as the number decreases from opacity:0.9 to opacity:0.1.
Unfortunately, if you put this into the wrong place, the entire page starts to disappear.
Here's an example of the Opacity feature: Voy 236990.
(Notice how each section fades to varying degrees. and, the starry background becomes visible).
Unfortunately, I haven't spent too much time using this feature. So, it's not a perfect application.
It's probably more suitable with CSS.

part 4: There's another irrelevant feature which is applied to Search Engines, such as Google, Bing, and Yahoo Search.
Within the search field, I added a simple phrase by using the code /placeholder="Yahoo".
so, within the code, it looks something like this: <input name="p" size="15" type="text" /placeholder="Yahoo">

The following page is using placeholders within the Yahoo search: voy/234300
and this one isn't using text within the search field: voy/234427.
disclaimer: copying of these search engines is prohibited.
This tutorial is shown for demonstrative purposes only.

part 5: General Purpose Advice
When adding anything extra (such as Width; Opacity; or border-radius), make sure to continue using the existing method.
SO, if your additions fail to work, the reason is probably because a different format of untypical HTML is being used.
for example:
Some sequences might use equal signs: height="79" width="1150" padding="2" font-size="1" etc.
....while another uses hyphens (or colons): height:87%; width:79%; padding:1px; font-size:1px;, or whatever the case may be.
Just realize that if you're using one method, you can't necessarily mix different techniques together.

part 6:
In a previous lesson, we had demonstrated how to place an image (or picture) into the background.
And, the Icon nicely covers your entire Webpage backdrop.
(Icons can be .jpg, .gif, .png, etc.) I prefer using simple designs rather than detailed photographs.
(Also notice: You may also choose whether to use a repeating image, or a singular picture.)

However, throughout our entire HTML Tutorial, the inner text-field has always remained one basic color scheme.
Usually, no photographs or patterns are used for the Text Areas.
Ironically, the <div> code refers this as "background-color:#;"
because it happens to be the background within the Text Field.

In all previous lessons, I've chosen a simple, basic color (such as "background-color:#B2C2E0;)
However, (technically speaking) you may place an background image throughout the entire text field.
Here, within this text field,
I'm currently using a grayish Stormy Cloud Combination, along with a lighthouse and rocky cliff.

In any case, here's the code for placing images within the Text Body:
<div style="background-image:url(http://Place Image Here); width:87%; padding:5px; color:#d1d1d1; font-size:21px; text-align:justify; "> <center>add your words & sentences here </center></div>

In this example, I'm using a Stormy Sea photograph:
<div style="background-image:url (http://1.bp.blogspot.com/-9J6zNLPWncQ/VJiwJWiUrNI/AAAAAAAAA1M/E3z_KbwuI0Y/s1200/5358676_xxl%2B123rf.com%2B%2Breservedbyowners.jpg ); width:87%; padding:5px; color:#d1d1d1; font-size:21px; text-align:justify; "> <center>add your words & sentences here </center></div>

The size of photograph may also be changed.

The size s1200 may be increased to s1600. Or, it may be decreased (s1000, etc.)
(However, if too small, the picture will not cover the entire backdrop).
Finally, I'm using a photograph in the innermost DIV sequence.
This is where the Text Field is located.
In many cases, 'Wraparound lines' surround the text-area as well.
They're using other DIV sequences, which shouldn't be altered.

In the Basic HTML page, I was sometimes using

This is a simple code: <textarea rows="2" cols="28"> Add Text Here </textarea>

(of course, textarea rows and Cols can be changed to make the field larger or smaller.

There's a simple code for browsing through pages.
They're sometimes called Link Buttons.

----------------------------
If desired, the page-link button can be re-sized. large or small: