Frontpage





Examples of styling form fields

First I want to show you a couple of usages of the "border" style-tag.
Here I make an ordinary textfield look a little more funky.

Here you see the, for your browser, default look of a textfield, selectbox and submitbutton.
<INPUT TYPE='text' SIZE='22' VALUE='Hey I am a textfield'>

<SELECT><OPTION>First line of choice<OPTION>Second line of choice<OPTION>Third line of choice<OPTION>Fourth line of choice</SELECT>
<INPUT TYPE='submit' VALUE='Hello world of the web'>



Here I try to use a border with at width of 1 pixel.
<INPUT TYPE='text' STYLE='border-left:1px solid #515151;border-bottom:1px solid #515151;border-top:0px;border-right:0px;'>

<SELECT STYLE='border:1px solid #515151;background:#FFFFFF;'><OPTION>First line of choice<OPTION>Second line of choice<OPTION>Third line of choice<OPTION>Fourth line of choice</SELECT>
<INPUT TYPE='submit' VALUE='Hello world of the web' STYLE='border:1px solid #515151;background:#FFFFFF;'>


Here I try to use a double border.
<INPUT TYPE='text' STYLE='border-left:4px solid #515151;border-bottom:4px double #515151;border-top:0px;border-right:0px;'>
<SELECT STYLE='border:4px double #515151;background:#FFFFFF;' WIDTH='22'><OPTION>First line of choice<OPTION>Second line of choice<OPTION>Third line of choice<OPTION>Fourth line of choice</SELECT>
<INPUT TYPE='submit' VALUE='Hello world of the web' STYLE='border:4px double #515151;background:#FFFFFF;'>


Here I try to use a color in the borders. And in the selectbox each <OPTION> have a seperate background color.

<INPUT TYPE='text' STYLE='border-left:2px solid red;border-bottom:2px solid red;border-top:0px;border-right:0px;background:yellow;'>

<SELECT STYLE='border-left:2px solid red;border-bottom:2px solid red;border-top:0px;border-right:0px;background:yellow;' WIDTH='22'><OPTION STYLE='background:yellow;'>First line of choice<OPTION STYLE='background:orangered;background:white;'>Second line of choice<OPTION STYLE='background:greeb;'>Third line of choice<OPTION STYLE='background:blue;color:white;'>Fourth line of choice</SELECT>
<INPUT TYPE='submit' VALUE='Hello world of the web' STYLE='border:2px solid red;background:yellow;'>


Further more you can use border, where you see the "solid", and "double" I use in the above. You can also use "dotted" or "dashed".
Also you can use size and color.



Here are some ways that your can style the text on your webpages.

As you see, this is how to set the color of the text. This can be any of the "safe colors, by name" or any colors in Hex code (24bit)
<DIV STYLE='color:orangered;'>Hello world</DIV>
Hello world
Next you see how we can change the fonttype for the text. The rules are that the browser should make use of the first fontface, if available, if not then see if the second font is on the system, and that way on. If none of the listed fonts are available, then the browser wil use the default font of that browser.
<DIV STYLE='fontfamily:verdana,tahoma,arial;'>Hello world</DIV>
Hello world
Here you see how we can make the text bold.
<DIV STYLE='font-weight:bold;'>Hello world</DIV>
Hello world
Here you see how to underline the text.
<DIV STYLE='text-decoration:underline;'>Hello world</DIV>
Hello world
Now, next, you see how we set the size of the text. You can use units like following.

Relative Values:
  • em (the 'font-size' of the relevant font)
  • ex (the 'x-height' of the relevant font)
  • px (pixels, relative to the viewing device)
Absolute Values:
  • in (inches -- 1 inch is equal to 2.54 centimeters)
  • cm (centimeters)
  • mm (millimeters)
  • pt (points -- the points used by CSS2 are equal to 1/72th of an inch)
  • pc (picas -- 1 pica is equal to 12 points)
<DIV STYLE='font-size:12pt;'>Hello world</DIV>
Hello world
<HR>
A nice tag for setting up the fomat of your text, is the <HR> tag. You can set size, width and color.
See these three examples:

<HR SIZE='6' NOSHADE>

NOSHADE is used here to show the Horisontal Ruler (HR) in 2D, not in 3D. You can try using it either way. And you can combine it with the color.

<HR WIDTH='50%'>
This HR is set to be 50% of the width.


<HR WIDTH='50%' ALIGN='left'>
Here again the ruler is set to 50% width, but the alignment is set to be left.

<HR COLOR='#FF00FF'>
And finally we can make the Horisontal Ruler in any 24 bit color we want it to be.


Shortly, let me present the PADDING tag used in styling.
First we make use of padding, where we set the space to be 36 pixels all around the text. As you see I have not set the height of the textfield. And the padding is set to 36 pixels, so the textfield is therfore expanded so it fits the set padding. 36 pixels on all sides.
<INPUT STYLE='WIDTH:420px;padding:36px;' TYPE='text' VALUE='I am a piece of text.'>



Next we make use of two of the four 'sides', being; top, right, bottom and left.
I use the left and top in this example.
And as you can see the text is aligned to the left, (6 pixels from the absolute left, and 'pushed' down 16 pixels from the top.

<INPUT STYLE='HEIGHT:48px;WIDTH:420px;padding-left:16px;padding-top:16px;' TYPE='text' VALUE='I am a piece of text.'>

This tag is good to use where youre design needs the content to be "pushed" into a position, like a few pixels from the left, in f.ex. textfields, so the text dosent get too close to the left side. Then a few pixels like 16, or less, to make it look better. In some cases you may have to use "margin" instead of "padding". To be useed in the same way, top, right, bottom, left or without, for being used on all sides.

This is not a manual in how to use CSS, so I will limit the exapmles to this. (But maybe there one day will be a comprehensive guide to CSS, - who knows).
So, I suggest that you find a reference to CSS and go exploring all the possibilities that there is in Styling your webpages.

More about Styling

<DIV STYLE="background:#C0C0C0; color: #000000">Here is an example of styling a text</DIV>;
This example sets the background for the enclosed text to a grey color, and the text itself is written in black.
Notice how the commands are written. Here you don’t use = between the tags and their values. Instead a colon “:” is used, and the value is closed off by a semicolon “;”.

We now use the same example, but write the codes that manage the fontface itself.
<DIV STYLE="background:#C0C0C0; color:#000000;font-family:Tahoma, Arial, Times; font-size:20pt; font-style:italic;font-weight:demi-bold;">Here is another example of how to style some text.</DIV>;
The font-family code can be the name, or a list of names, of the font you wich to use. By using a list of fonts, the first will be used, if it exist on the users machine. If that is not present the following font will be used, and so on. If none of the listed fonts are available, then the browser will show the text in its default font. The font-size sets the size of the font. This size is here given in pt (points), but you can also use; in (inches), px (pixels), or % (percentage).
The font-style tag can have several properties. These; italic, normal, oblique, small caps.
The font-weight can have the following settings; extra-light, light, demi-light, medium, demi-bold, bold, extra-bold.

We will now insert more commands in the <DIV> tag. Here follows another example. We use the same example.
<DIV STYLE="background:#C0C0C0; color:#000000;padding-left:240px;padding-right:120px;padding-top:48px;line-height:24px">
Here is another example of how to style some text.</DIV> By the padding-left code you can insert a margin to the left. In this example a width of 240 pixels. Also there is a padding to the right and a top padding. The last property line-height sets the height of the lines. All these commands can be set with the pt (points), px (pixels) or % (percentage). With these padding settings you can finely adjust the placement of your content. If you like to place an image 120 pixels from the left side, and 100 pixels from the top, it will look like so;
<DIV STYLE="padding-left:120px;padding-top:100px"><IMG SRC=image.png></DIV>
Now we will look at yet a styling -tag. You can use it to set for example a border, a frame, around an <DIV> block.
<DIV STYLE="border:1px solid #000000;background:#C0C0C0;color:#000000; margin-left:240px;margin-right:120px;margin-top:48px;line-height:24px">Here is another example of how to style some text.More text here..</DIV>
The property “border” makes so there will be a border around the enclosed element. You can set the border to several values, types. F.ex “dotted”, “solid” or “dashed”. Also the size, in the above example, where it is set to 1 pixel. The last of the three values is the color code.
The complete list of border is, none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

You can also use the <DIV> tag to simple adjusting of content. Its done by using the ALIGN property. It can be like;
<DIV ALIGN=’center’></DIV>
You can use the values; left, right, center, justify.
Justify will adjust the widt of the text so that it will fill out the whole space of the line. And you will get the text aligned as you can see it in news papers, books, and such. Here is an example;
<DIV ALIGN="justify" STYLE="width:240px;">
Here, at the end I will mention two other ways to manipulate text using the <DIV> tag. “text-decoration” that will add an effect to the text. You can use these; none, italic, underline, line-through, overline.
Besides “text-indent” that will set an indentation of the first line of your text, as used for a new section in books.
“text-indent” an be used with thre following values;
pt (points), in (inches), cm (centimeters), px (pixels).

Links.

Probably the most basic and important feature on a webpage.
HTML stands for; Hyper Text Markup Language.
Hypertext is links. You can write a longer text about f.ex penguins on the south-pole, and in the text have links to other pages, that in more details describe the animals feeding habits, pictures of the bird, a map of the south-pole, even audio files and videos. You can then jump to those other pages about the feeding habits, maybe even the favorite food and see a picture. And now with that extra knowledge go back and read further in the original text, or jump further out from one of those linked pages. This is truly a network of information. And access can be from either of these pages. So what James doesn’t know about penguins, Allan does. On who’s page you can enter, via a link from James webpage. It will be wrong by James to copy Allans information. But then he can just link to the site, and then the user can surf around for what he wants to know about the penguins. And now that he is on Allans page, he can see that Allan has some different information than James. And that Allan have a link to Yang’s website where he will find deeper knowledge about the birds eating habit and favorite food. Etc. etc.

The network of the webpages is called “The Web”. The web is the nickname for this world wide network of information, linked together. And from that comes the www, meaning World Wide Web. And goes in front of many URLs that links to the webpages. It shows that it is all about that www. The World Wide Web.

Hyper text was known before the web turned the whole wide world up-side-down. On the Internet there was before the web some service called “Gopher”. Gopher was an only text based search system, where you like the web could search and find information. But HTML, with its far more expanding possibilities to set up the pages with graphics and any ways of formatting the text, and present the content.

Welcome to the newst incarnation of webpages.dk... You can now find some texts here. About Web developing in a OSS environment, a new document. My old ebook about photography, while we wait for the second edition.. The old text; "The Creative Kitchen". The PHP snippet collection. Find some valuable tips here.... and ofcource you still find the photo album here also.