html notes
General developmental notes on the Internet
SSL:https - web site security
What is https:// ?
When you submit data using a form, it is sent as 'plain text'. Somebody listening to the network communication can trap the data. In the html forms where very sensitive information (such as credit card number) is supplied, this is a security risk.
using SSL(Secure Socket Layer; https) the data sent will be encrypted by the browser. It is a lot of overhead but well worth it when money is involved.
( be sure to addslashes() to user input so that neither single nor double quotes can be interpreted. They will be treated like a contraction can't or like quoting someone else: He said "Howdy!" ... Namely, single quotes will be treated as another character in the string and NOT become a string terminator ... etc. )
a good one page list of css selectors, properties, and values:
http://www.lissaexplains.com/css.shtml
To get to a tag on another page:
example:
< a href="index.php#tag" > Go to "index.php#tag" < /a >
Go to index.php#tag
on that page, put < a name="tag"> < /a>
Changing an Inline Element to a Block element and Vice Versa
With CSS you can change the type of an element from inline to block or the reverse with just one CSS property:
display: block;
display: inline;
display: none;
The CSS property display lets you change an inline property to block or a block to inline or either of them to not display at all.
When to Change the Display Property
In general, I like to leave the display property alone, but there are some cases where turning a block-level element into an inline and vice versa can be useful.
- Horizontal list menus - Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element, so that newlines aren't added between each list item.
- Headers in the text - Sometimes you might want a header to remain in the text, but have the HTML header values. Changing the h1-h6 values to inline will let the following text flow next to it.
- Removing the element - And of course, if you want to remove the element completely from the document flow, you can set the display to none.
Setting the display to none can trick spammers/hackers into reading/believing something no one else sees (like seeing and filling in a form field no one else sees). putting text in the css, just the opposite, enables you to show your readers things the bots cannot see, like captcha instructions for a form field.
Putting content in the CSS: (Not where content belongs, but ...)
.formatname:after
{
content: 'subtract';
}
< span style="formatname"> [first number] < /span> [second number] = < input ...
div.codedirection { unicode-bidi: bidi-override; direction: rtl; }
and then you would display the email address on your page as
< div class="codedirection"> moc.elpmaxe@oof < /div>
The browser will display the email address as foo@example.com.
Note: table cellpadding and cellspacing should default to 0 if you do not specify anything however, they do not! They default to 2 - which is why (most?) web page tools have explicitly set them to 0 for you if you don't set it to something yourself.
However CSS with < div>'s has enabled getting away from table "overkill":
Tables do not display on-screen until they have been downloaded in their entirety. With div's, all the information a browser needs is contained in the style attributes you've added. Therefore, it will start displaying as soon as any part of it is downloaded.
Further:
Without CSS, your choices for borders were those crappy grey ones that surrounded tables and frames. Now however, since page presentation has become such an important aspect of web-design, stylesheets allow you lots of variety in your borders, and you can apply them to anything you want!
Box Model Issues [both div's and tables]:
The problem with the CSS box model is that not all Web browsers implment it the same way. In a nutshell, according to the W3C, width and height properties define the width and height of the content of the box. Items like padding, border, and margin surround that width and height.
Some versions of Internet Explorer instead define the width and height as the width and height of the entire element, including padding, and border.
If you want your designs to look the same in all browsers, you have to employ tricks and sometimes hacks to get IE to work correctly.
Word to the wise, download and use anything but I.E.
Windows incompentent programming does more than make it difficult to display pages correctly, it also makes it an "open window" for hackers to break into. Crashing your hard drive has become the least of your worries. Now, well financed, 'mafia-like' organizations write code to your computer that records your every keystroak including id's and passwords to your bank and savings accounts. They will steal all you have and never tell when or how they did it.
Better yet, download and install Ubuntu along with windows, and only go back to windoze when you half to, and only on the internet to web sites that you know and trust. Enjoy the internet in safety in Linux.
2 counter displays
and demo cursor
| move in the tr | wait |
nw-resize cursor height=100 |
ne-resize | pointer; and hand; |
| help in the tr |
sw-resize cursor height=50 |
se-resize | MS Windoze hand | |
| pointer in tr | 4321 | 01234 | ||
|
align=center height=75 crosshair cursor |
MS-windoze hand?!? not pointer! |
|||
There are in general 7 types of cursors you can choose from to be associated with any (with the exception of a few) elements in a document. They are the "hand", "crosshair", "text", "wait", "move", and "nw-resize" cursor.
a 1 line javascript print command (+ pointer style):
onClick=window.print() style="cursor:pointer;"
newer: you can put a < span title = "notes" > text or etc. < /span > and put a title on most anything
For some reason, many years ago, with html version 2.3, the < blink > < /blink > and the marquee tags were discontinued (both still supported). However the blink attribute, is officially back and supported in css. In both cases, only text blinks, not images - I guess we have to learn to create a blinking .gif (?).
Blink
You can now make some text blink with css. Give it a style="text-decoration:blink;"
< span style="text-decoration:blink;" > x
x < /span >
to make an image blink, make it a gif and animate it.
The marquee tag was crude but handy when all you need is something simple - and avoid tons of unreadable javascript.
< marquee > text < /marquee>
< marquee ALIGN="align"> text < /marquee>
< marquee BEHAVIOR="behavior"> text < /marquee>
< marquee BGCOLOR="#rrggbb"> text < /marquee>
< marquee BGCOLOR="colorname"> text < /marquee>
< marquee DIRECTION="direction"> text < /marquee>
< marquee HEIGHT=n> text < /marquee>
< marquee HEIGHT=n%> text < /marquee>
< marquee HSPACE=n> text < /marquee>
< marquee LOOP=n> text < /marquee>
< marquee SCROLLAMOUNT=n> text < /marquee>
< marquee SCROLLDELAY=n> text < /marquee>
< marquee WIDTH=n> text < /marquee>
< marquee VSPACE=n> text < /marquee>
< marquee WIDTH=n%> text < /marquee>
| Replace your text with a picture URL; 2 defaults: scrolldelay=0 scrollamount=6 |
|
|
|
|
see the MARQUEE tag and all its options at
www.webspawner.com/cc/html/marquee.html
