HTML Help

Member's Tutorials

PayneLess Designs — Tue Mar 17, 2009 12:36 pm

Author: PayneLess Designs

Posted: Tue Mar 17, 2009 12:36 pm

This section is for tutorials made by members. All tutorials should be original work and not a copy/paste of other authors' material.

Any posting of a tutorial which is deemed not to be of original work by poster will be deleted.

Tutorials from other authors may be posted if the permission from the author is also included and/or a link to that author's permission is posted along with the tutorial.

All posted tutorials by members become the property of htmlcodetutorials.com and may be referenced within other member's posts on this forum.

Resizing a New Window

Corey Bryant — Thu Dec 18, 2008 1:01 pm

Author: Corey Bryant

Posted: Thu Dec 18, 2008 1:01 pm

If you need to create a pop-up window for some reason or need to have some links open in a new window, check out:

_________________
Corey
Toll Free Numbers | Processing Credit Cards | Expression Web Blog

Basic dropdown menu using a little javascript

sticks464 — Tue Dec 16, 2008 11:22 am

Author: sticks464

Posted: Tue Dec 16, 2008 11:22 am

I've got some more of these posted in this section of the forums, don't run out of remarks just yet.
http://www.htmlcodetutorial.com/help/ftopic13353.html
http://www.htmlcodetutorial.com/help/ftopic13338.html
http://www.htmlcodetutorial.com/help/ftopic13337.html
http://www.htmlcodetutorial.com/help/ftopic13335.html

DOCTYPE

Corey Bryant — Fri Dec 12, 2008 5:50 am

Author: Corey Bryant

Posted: Fri Dec 12, 2008 5:50 am

When you start to develop a website, the first line of source code you should use is called a Document Type Definition (DOCTYPE or DTD).

For HTML 4.01, use:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If you think you want to adheree to stricter standards, use:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

And if you are using a frameset, then you would use:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

But if XHTML 1.0 is more your thing, use

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If you are going to adhere to a bit stricter code, use

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And finally if you still are using frames:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

If you do not use one of these, some browsers will go into quirksmode and you will have a difficult time validating your HTML code.

_________________
Corey
Virtual Office Solutions | Processing Credit Cards | Microsoft Expression Web Blog

100% height, fixed width, centered with footer at bottom

sticks464 — Tue Dec 09, 2008 5:24 am

Author: sticks464

Posted: Tue Dec 09, 2008 5:24 am

This is for those that don't have a lot of content but want the layout to fill the viewport vertically. One image will have to be created to make the left column look like it extends to the bottom. Content that exceeds the viewport height will push the footer down. Have fun!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
text-align:center; /* for ie6 and under */
min-width:760px;/* for mozilla*/
background-color: #F2E3EE;
color: #000000;
}
#outer{
min-height:100%;
width:758px; /* add 2px if borders are not used */
border-left:1px solid #000;
border-right:1px solid #000;
color: #000000;
text-align:left;
margin:auto;
position:relative;
background:pink url(images/blackbg3.gif) repeat-y left top;
/* The background image needs to be the same width as the #left div. The one I used is 138px X 9px */
}

* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
#header{
min-height:70px;
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
position:relative;
}
* html #header{height:70px}
#left {
position:relative;/*ie needs this to show float */
width:136px;
float:left;
color:#fff
}
#left p {padding:2px}
#footer {
width:758px; /* add 2px if borders are not used on the #outer div */
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
left:0;
bottom:0;
position: absolute;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
margin-bottom:-1px;
}
div,p {margin-top:0}/*clear top margin for mozilla*/
#centrecontent {
width:622px;
float:right;
}
#centrecontent p {padding-left:3px}

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
</style>
</head>
<body>
<div id="outer">
<div id="header">
<p>Header - No column longest - footer at bottom of window.</p>
</div>
<div id="centrecontent">


<p>Centre Content goes here : Centre Content goes here : Centre Content goes
here : Centre Content goes here : Centre Content goes here : Centre Content
goes here : Centre Content goes here : Centre Content goes here : Centre
Content goes here : Centre Content goes here : Centre Content goes here
: Centre Content goes here : </p>
<p>Centre Content goes here : Centre Content goes here : Centre Content goes
here : Centre Content goes here : Centre Content goes here : Centre Content
goes here : Centre Content goes here : Centre Content goes here : Centre
Content goes here : Centre Content goes here : Centre Content goes here
: Centre Content goes here : end </p>
</div>
<div id="left">
<p>Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : end</p>
</div>
<div id="clearfooter"></div>


<div id="footer">Footer - | |- Footer </div>
</div>

</body>
</html>

Centering horizontal and vertical

sticks464 — Mon Dec 08, 2008 6:43 am

Author: sticks464

Posted: Mon Dec 08, 2008 6:43 am

Most commonly used for centering flash content but will work with text and other elements.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html{height:100%}
html,body {margin:0;padding:0;}
body{
background:#ff6f02;
text-align:left;
min-width:650px;

}
#container{
position:absolute;
top:50%;
margin-top:-200px;/* half content height*/
left:0;
width:100%;
}
#content {
width:624px;
margin-left:auto;
margin-right:auto;
height:395px;
background:#666;
}
h1 {color:#fff;margin:0;padding:0}

</style>
</head>

<body>
<div id="container">
<div id="content">
<h1>Text goes here</h1>
</div>

</div>
</body>
</html>

How to achieve 100% height (tutorial)

sticks464 — Mon Dec 08, 2008 6:03 am

Author: sticks464

Posted: Mon Dec 08, 2008 6:03 am

A lot of people want 100% height but most times they want more than 100% height!
What they usually want is an element such as a navbar that will stretch 100% down the side of the page and keep stretching even when the document is longer than the page.

The easiest way to accomplish this is to use a small bg image for the column colour and repeat it down the y-axis of the body on the left hand side. In this way the column appears to extend forever and is a simple solution that works in nearly all browsers.

Code:

body {
padding:0;
margin:0;
background:#ffc0cb url(leftcolbg.jpg) repeat-y left top;
color: #000000;
}

The above image is 150px wide and 5px high. It is repeated on the left side of the body and will form a column that is as long as the viewport or as long as the document if greater than viewport. A border can be added to the repeated gif to give the illusion of a continuous border. You could also add a screen fade effect for a more interesting column colour.

The background is tiled quite quickly and the image is small enough not to make much difference to page weight.

Another way to achieve 100% height without background images is to use the following techniques. (This doesn�t work for ie5 mac and a few other minor browsers.)

The first thing we need is 100% height to work with and this must be declared in the html element and the body element to satisfy various browsers. While we�re there we will set padding and margins to zero so they don�t influence our design.

We also need to hide this from ie5 mac users so use the commented backslash hack.

Code:

/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
html,body {margin:0;padding:0}

The next important step is to create a whole page wrapper that will hold everything else on the page. This outer element is set to 100% height for IE browsers and 100% min-height for mozilla browsers. IE6 and under treat height as min-height anyway but mozilla needs to be specific.(IE7 now implements min-height and the correct version of height so treat it like firefox when using this method.)

We also then need to set mozilla to height auto so that it doesn�t remain at 100% only but will expand as required. This height auto needs to be hidden from <=IE6 and is the only real hack in this code. (The star (universal) selector hack is good for passing values to only <=IE6 browsers.)

Code:

#outer{min-height:100%;background:#ffffcc}
* html #outer{height:100%;}/* ie6 and under*/

Here is the code for the whole page:

Code:

While the code achieves 100% height and allows for the element to expand it does have some drawbacks.

The container element (#outer) is the only element that will inherit the 100% properly so you have to keep everything inside this element. The element will only expand when content inside it expands it past the bottom of the viewport. A lot of people expect it to expand automatically to the document length or the length of longer elements on the same page. When you think about it this can�t really happen unless all elements are wrapped inside this 100% element.

As mentioned above you can only have one of these elements on your page because inner elements will not inherit from the 100% min-height and default to height auto. (Of course IE6 and under may in some circumstances apply 100% height on inner elements but it is not guaranteed and not advisable because it does not work in other browsers.)

Creating Menus or Navigation

Corey Bryant — Sun Mar 23, 2008 3:11 pm

Author: Corey Bryant

Posted: Sun Mar 23, 2008 3:11 pm

Listamatic will help you change your list into a navigation that you will be proud of. And one more for your bookmarks is CSS only menus from Stu Nicholls.

For menus with sub-menus, check out:

And just in case you missed it, Dynamic Drive: Menus and navigation has a few more options as well.

_________________
Corey
Toll Free Phone Numbers | Processing Credit Cards | Microsoft Expression Web Blog

Included Content

Corey Bryant — Tue Jan 22, 2008 1:51 pm

Author: Corey Bryant

Posted: Tue Jan 22, 2008 1:51 pm

And for ASP.NET (ASPX) file

Code:

<%
Response.WriteFile ("Yourfile.inc")
%>

_________________
Corey
Residential Office Solutions | Mile High Merchant Accounts | Expression Web Blog

Form Processing

Corey Bryant — Thu Mar 22, 2007 6:40 am

Author: Corey Bryant

Posted: Thu Mar 22, 2007 6:40 am

To process a form, you need some type of server side language to help you out.

ASP has a few components like JMail, ASPEmail, ASPMail, CDOSYS / CDONTS.

An example of CDOSYS:

Code:

<%
" Create the e-mail server object
Set objCDOSYSMail = Server.CreateObject("CDO.Message")
Set objCDOSYSCon = Server.CreateObject ("CDO.Configuration")
" Outgoing SMTP server
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/con...ion/smtpserver") = "localhost"
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/con...smtpserverport") = 25
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/con...tion/sendusing") = 2
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/con...nectiontimeout") = 60
objCDOSYSCon.Fields.Update
" Update the CDOSYS Configuration
Set objCDOSYSMail.Configuration = objCDOSYSCon
objCDOSYSMail.From = "from@example.com"
objCDOSYSMail.To = "recipient@example.com"
objCDOSYSMail.Subject = "This is my subject for my test message"
objCDOSYSMail.HTMLBody = "This is the body "
objCDOSYSMail.Send
"Close the server mail object
Set objCDOSYSMail = Nothing
Set objCDOSYSCon = Nothing
%>

You can also check out How to use the Cdosys.dll library to embed a message in a new message by using Visual C#. Check with your hosting company to see what they might support. Most hosting companies will offer the code as well to help you show how to process the form. For ASPEmail, check out ASP Mail Manual.

For PHP, check out dB Masters FormM@iler to see how they do it.

If you need a third party to process the form check out EmailMe Form.

There is also Email Forms Service by Bravenet.

_________________
Corey
Toll Free Numbers | Merchant Accounts

Rollover Script

Corey Bryant — Mon Dec 04, 2006 4:38 pm

Author: Corey Bryant

Posted: Mon Dec 04, 2006 4:38 pm

Another way, using just CSS:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>CSS Rollovers</title>
<style type="text/css">
div.outer
{
float: left;
width: 120px; height: 25px;
margin: 0 3px 0 0;
background: url( '20020816c.jpg' ) 0 -50px no-repeat;
}
div.outer a
{
display: block;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
font: normal 300 13px Verdana;
color: #0000FF;
text-decoration: none;
background: url( '20020816fa.jpg' ) top left no-repeat;
}
div.outer span
{
display: block;
margin:0; padding: 7px 0 0 13px;
}
div.outer a:hover
{
background-image: none;
color: #800080;
}
div.outer a:active
{
color: black;
}</style>
</head>

<body>
<div id="menu">

<div class="outer"><a href="http://www.htmlcodetutorial.com/help/"><span>HTML Code Tutorial Forum</span></a></div>
<div class="outer"><a href="http://www.htmlcodetutorial.com/"><span>HTML Code Tutorial</span></a></div>
<div class="outer"><a href="http://www.loudcommerce.com"><span>Merchant Accounts</span></a></div>
</div>
</body>

</html>

How can I protect my images?

Corey Bryant — Wed Apr 19, 2006 5:25 pm

Author: Corey Bryant

Posted: Wed Apr 19, 2006 5:25 pm

Short answer, you cannot.

There is the disable right click:

Code:

but someone can easily turn JavaScript off or view the source code to grab the image path.

Also on Internet Explorer 6.0, there is the image toolbar that will come up. You can also disable this as well by placing this in the <head>

Code:

But once again not a fool-proof method.

You can place the image as a background and then place a spacer.gif over the image. Still, one can view the source to get the path to the image.

Ways around these are:

Viewing the source and then going directly to the image file, for example: http://www.htmlcodetutorial.com/graphics/logo.banner.guide.gif
Pressing CNTL-A (this will select everything on the webpage), CNTL-C (copy) and then going into Frontpage and pressing CNTL-V (paste) into a new page. This will copy the images and everything else.
Looking in the temporary internet cache and locating the image there - since all pages / images are usually stored on a user's machine for a few days.
Doing a Print Screen or Copy Screen
Another way around this would be to type into your browser:
view-source:http://www.htmlcodetutorial.com
You can consider placing a watermark on the image which will help some.
Some people also slice the image in a few pieces. This won't help, but might make it more difficult for someone to copy your image(s).

-Corey

How can I make HTML show up on a webpage?

Corey Bryant — Sun Apr 16, 2006 11:49 am

Author: Corey Bryant

Posted: Sun Apr 16, 2006 11:49 am

The best way would be to use a textarea and put everything in there:

Code:

<textarea rows="4" name="html" cols="50"><a href="http://www.htmlcodetutorial.com/">HTML Tutorial</a> for all your HTML needs</textarea>

You can also use Entities or even ASCII codes. Another great website for ASCII codes.

One example would be

Code:

<a href="http://www.htmlcodetutorial.com/">HTML Tutorial</a> for all your
HTML needs

-Corey

Membership Login

Corey Bryant — Sun Apr 09, 2006 4:52 am

Author: Corey Bryant

Posted: Sun Apr 09, 2006 4:52 am

Once you check with your hosting company to see what they support, review some of the codes down below:

ASP scripts | PHP

You will need a server side language and a database to maintain everythin

_________________
Corey
Toll Fax Numbers | Merchant Accounts

FavIcon

Corey Bryant — Sun Mar 12, 2006 10:50 am

Author: Corey Bryant

Posted: Sun Mar 12, 2006 10:50 am

The code is something like

Code:

Code:

FavIcon
Free Icon Editor
FavIcon from Pics -- how to create a favicon.ico for your website

-Corey