|
Tutorials/Html
these are just a bunch of Html codes and misalleanoues tutorials that I use.
text areas
plain
with color
with background
buttons that are colorful and linky
To create an iframe, use this html:
To add a name to your iframe use this : NAME="name here"
To add a border to your frame use this : FRAMEBORDER="1"
To make your iframe transparent use this: ALLOWTRANSPARENCY="true"
You can also apply stylesheets to the Iframe tag (border style or positioning for example)
As with frames, any links to be opened in the iframe need to be targetted. That means you need to add target="name of your iframe" to your link like this
Any links on the page inside the iframe will open inside the iframe unless you add target="_top" (same page as the page that contains the iframe) or target="_blank" (opens a new window)
Iframe w/Border
scrollable area
blah blah blah blah blah
Blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah
This is the code for a basic div:
Content goes here (images, text)
In the above code, there are a few variables that need to be defined:
id: This is just the number of your div. It helps you sort out easily which div element is which when you have many layers. It's also useful for identifying layers so that you can have different style attributes in your style sheet for each div element.
Top: This is the number in pixels that your div element will be positioned horizontally from the top of the page. If you give "top" a number value of "20," your div element will be 20 pixels down from the very top of your page.
Left: This is the number in pixels that your div element will be positioned vertically from the left of your page. If you give "left" a number value of "20," your div element will be 20 pixels left from the very left side of your page.
Width: This is the width of your div element in pixels.
Height: This is the height of your div element in pixels.
Z-index: This is the order in which your div elements are stacked, or overlapped. The number 1 would be the first layer, and the layer closest to the background of your site. The number 2 would be stacked on top of number 1, etc. You can remove this tag if you are using layers that you do not want to overlap.
Padding: This is the margin of your div element in pixels. For instance, if you have text in your div element, you'll need margins so that the text doesn't go from one end of the div element to the other. This tag acts just like the cellpadding tag for tables.
Border: This is the border of your div element in pixels. If you don't want a border, remove this variable. You can have a border that is solid, dottted, dashed, double, groove, ridge, inset, or outset.
Background-image: This is the background image of your div element for IE.
Layer-background-image:This is the background image of your div element for Netscape.
SCREENSHOT TUTORIAL
1.if you want to make a screenshot of your layout, hold down Ctrl Alt Print Screen when the
layout is being viewed.
2.open up paint, and hit Ctrl V and save the image.
3.upload it to an image server to get the code to put on your site.
mouse over image
button templates
You can use these templates to create your own avatars and buttons.
How to use them
¤ open them in an image editor (something like PS, PSP, Corel, Fireworks or similar)
¤ open the image you wish to edit
¤ copy the template on the layer above the image
¤ use the magic wand tool to select the black or transparent areas on the template
¤ switch the active layer to the original image - now you have areas the shape of the template selected on your image
¤ you can delete them, filter them or fill them with color... whatever you wish
¤ remember - if you want deleted areas on your image to look transparent, save it as .gif!
no right click
see it in action
colorful dropdown box
This is a drop down link box that has each line a different color. It looks much better than a regular colored dropdown box in my opinion. lol. I don't know how to explain it, so if you don't know what I mean and are interested, see my layout 32. In this code you need to put in the page urls, link names, colors, and if you wanna change the font name or size or the border style, go for it. [top]
[scrollbar on opposite side]
Here
Bordered images
boder types
DASHED Replace this with SOLID, DOTTED, OUTSET, INSET, RIDGE, GROOVE or DOUBLE.
A bulleted menu
color background for tables
| cell contents |
cell contents |
| cell contents |
cell contents |
picture background for tables
| cell contents |
cell contents |
| cell contents |
cell contents |
border color for tables
buleted list
circle
- blah blah blah
- blah blah blah
- blah blah blah
square
- blah blah blah
- blah blah blah
- blah blah blah
blinking text
see it in action
comment box
Do you like my little question box in my navagation panel? well you can use it too!Here's the code. Edit everything that starts with ***. So if it says ***YOURNAME, then edit it.
any direction marquee
blinking blocks
see it in action
left and right
top frame
top and left
top and left higher
div with transparenty
div text goes here.
more trasparenty
Alpha
Alpha 
Chroma
drop shadow
Shadow
glow
Glow
shadow
Shadow
pop up window
Click for Pop-Up
window.html the URL of the page you wish to pop up.
MyWindow the name you'd like to give to the pop-up window.
toolbar=no set to 'yes' if you'd like the window to have a toolbar.
location=no set to 'yes' if you'd like the window to have a location box.
directories=no set to 'yes' if you'd like the window to have a toolbar.
status=yes set to 'no' if you'd like the window to have no status bar.
menubar=no set to 'yes' if you'd like the window to have a menubar.
scrollbars=yes set to 'no' if you'd like the window to have no scrollbars.
resizable=no set to 'yes' if you'd like the window to be resizable.
width=400 the width in pixels of the window.
height=300 the height in pixels of the window.
left=200 the distance of the window from the left of the screen.
top=100 the distance of the window from the top of the screen.
drop down menu with no go button
|
|
|
