A Few Templates
Here is a gallery of my templates that I have made. They are all released under the Creative Commons License 3.0. Here are some previews:
Archive for the ‘html’ Category
Clearing contents of a input box when a user clicks in it
One of the most annoying things I find in a website is a search bar that says “Search Here…” or something of those likes, because when you click in that box you have to manually erase the text, it is not a big thing but it is very easy to solve. All you need to do is copy and paste this code into the <input /> tag.
Code Snippet:
onfocus="this.value=''"
Full Code:
<input type="text" name="test" value="search" onfocus="this.value=''" />
Example:
Now this won’t work if the user has Javascript turned off, but that is their fault not yours. This only works on <input type=”text” />
Look for my article on the basics of CSS soon.
PHP Redirect
PHP redirects are better than Javascript redirects because it is done server side and there is no possibility of the user having JS turned off and not being redirected. The down side is that you need PHP on your server.
It is quite simple:
<?php
header( 'Location: http://www.yoursite.com/new_page.php' ) ;
?>
Just make sure you put it before the doctype and the <html> tag.
Javascript Redirect
This is a Javascript Redirect with a delay of 3 seconds
<script type="text/javascript">
<!--
setTimeout('window.location="http://www.google.com"', 3000);
//-->
</script>
This is valid XHTML and you need to put this code in between the <head> and </head> tags of your page. The 3000 means the page will redirect in 3000 milliseconds–or 3 seconds, change it to be what you want.
Do you want an instantaneous redirect? Here’s the code (same rules apply as above):
<script type="text/javascript">
<!--
window.location="http://www.google.com"';
//-->
</script>
The address can be relative or absolute. People may have Javascript turned off, so I find a PHP redirect much better.
Valid XHTML + Valid CSS: How to make a simple one column layout.
The most basic of all layouts is the one column layout. It has a small navigation above the header, a header, a navigation below the header, the content and the footer. This is a perfect design for a small organization or church, or a site where you don’t need a sidebar, or you have a lot of static content. I use a one-column layout on my personal site http://www.gorgefamily.com/alec and it works great!
We will make a fixed width version for this but you can make it fluid if you want.
Okay, let’s start with the basic tags.
<div id="wrapper">
<div id="top-nav"></div>
<div id="head"><h1>This is the header</h1></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
The wrapper allows us to center the content and get some separation from the top with the following CSS.
#wrapper {
width:790px;
margin:auto;
margin-top:15px;
}
What this does is it makes with entire website 790px wide and it centers it on the screen. This allows the page to be viewed at all popular resolutions. What the margin:auto part does is the browser renders a object with a margin that is the same on each side, thus centering it. Now let’s fill in some sample content:
<div id="wrapper">
<div id="top-nav">
<a href="#">Test Link 1</a><a href="#">Test Link 2</a>
</div>
<div id="head"><h1>The <span>header</span></h1></div>
<div id="nav"><a href="#">Test Link 1</a><a href="#">Test Link 2</a></div>
<div id="content">
Lorem ipsum dolor sit amet...
</div>
<div id="footer">Copyright blah blah blah</div>
</div>
The post gets really long after this so here is a break. Read the rest of this entry »
The font tag, the p tag, and tables
Anyway, today we’re going to talk about the font tag. It can only be used in HTML, not XHTML. CSS is better for this sort of thing, but i prefer the font tag. The font tag has three parts, face, color, and size. Each of these comes after the tag and can be separated by commas, but i don’t like the commas.
Well, I wrote the story about tutor.com below, by the way, it’s on my website as well. It seems the Internet isn’t down today, which is…well…take it how you want to take it. Continuing with our HTML theme, the tag is only available in non-XHTML, HTML webpages, meaning only in HTML, in case you didn’t figure that out. Yes, well, call me someone with bad jokes, but I bet you think something as simple as shouting “rabies” during class is funny, you shallow, crass individual. Anyway, the tag is what I must use for every web page, until I start using more CSS, though I did a great deal of editing with it to my homepage already, which Alec initially provided (personally, I might add, it’s not the same template he posted online, it’s just similar).
The p tag can best be used only for non-pictured texts, just plain text. The align = left, right, center, or justify can be used as well, but justify and center are the only ones you should use. If people with high rezzes are viewing your page, text aligned to the left or the right can look very strange. justify evens out the text across the screen, making it the best option, or for small titles center can be used, which obviously centers the text at the middle of the screen.
If you have have pictures and text, the p tag cannot be used very well, and it will look bad for people with high rezzes, so tables can be used. Tables can be made in MS Word and then saved into HMTL, or you can look it up. My HTML code will just disappear again, thank you. This is Josh, signing off.
The abbr tag
The abbr tag is somewhat useful. Look for your self. Example:
CSS
The title attribute is the thing that make the hover over effect.
‘nuf said.
The a Tag
The a tag is one of the most used tags in all of XHTML and HTML for that matter. The a means anchor and it links between XHTML pages or other files like PDFS or downloads like executables. When people click on them it sends them to the linked file. The browser knows to interpret files like .html .xhtml .xml .htm .php. aspx .asp and on until the cows come home. However, when the browser encounters a file that it doesn’t know what to do with it gives you a popup box like this:
But what do you write to get the a tag to go where you want? The href attribute tells it where to go. Example:
<a href=”http://cnn.com”>Click Me</a>
The href part is the attribute and http://cnn.com is the value of the attribute.
The official name is a hyperlink but it is more commonly known as a link. I personally find this particular tag quite useful.
XHTML
Here are all the XHTML Strict tags in alphabetical order. Once per day I will write about one of these tags starting with the a tag and working my way down to the var tag. I will describe each tag, tell what it does, give my two cents on it and show some examples. But first you might ask, “What is XHTML and how is it different than HTML. Is it better? Why or why not?” I will answer those questions right now. XHTML stands for Extensible HyperText Markup Language. From Wikipedia:
Whereas HTML is an application of Standard Generalized Markup Language (SGML), a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed, true XHTML documents allow for automated processing to be performed using standard XML tools—unlike HTML, which requires a relatively complex, lenient, and generally custom parser. XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C recommendation on May 31, 2001.
Here are the basic of XHTML
- Declare a DOCTYPE
- Declare an XML namespace
- Declare your content type
- Close every tag, enclosing or non-enclosing
- All tags must be nested correctly
- Inline tags can’t contain block level tags
- Write tags in lowercase
- Attributes must have values and must be quoted
- Use encoded equivalents for left brace and ampersand
Here is the list.
- a
- abbr
- acronym
- address
- area
- b
- base
- bdo
- big
- blockquote
- body
- br
- button
- caption
- cite
- code
- col
- colgroup
- dd
- del
- dfn
- div
- dl
- DOCTYPE
- dt
- em
- fieldset
- form
- h1, h2, h3, h4, h5, and h6
- head
- html
- hr
- i
- img
- input
- ins
- kbd
- label
- legend
- li
- link
- map
- meta
- noscript
- object
- ol
- optgroup
- option
- p
- param
- pre
- q
- samp
- script
- select
- small
- span
- strong
- style
- sub
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- title
- tr
- tt
- ul
- var
