CSS Tutorial - This is one of the better CSS tutorials on the net. Not because it is very lengthy but because it gets right down to the point of the matter. It's for those who are beginning CSS and for those who know but want to brush up on their skills. Take a look, learn, and teach!
TW Tech Glossary - Misplaced your bible? Well here it is! This truly took a while to complete and should be used by all from beginners to advance techies. Look into it, you won't be sorry. (Very Resourceful)
WYSIWYG Editors: A Wizard of Creating Web Sites - Very informal thoughts on WYSIWYG HTML editors like DreamWeaver and MS Frontpage and the likes.
One for All; All For None - As always, M!cro$#!t was there to help us with their awesome and almost God-like helping hand by creating Page Transitions feature in their (then latest) MS FrontPage. And other software manufacturers followed MS like a pack of sheep trying to stay tight in a herd…
Your First Web Page - This article will get you going in creating your first webpage solely created by HTML.
Favorites Icon (favicon.ico) - A Favicon is a multi-resolution image included on nearly all professional developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. Often, the Favicon reflects the look and feel of the web site or the organizations logo.
HTML5 - Setting New Standards in Hypertext - HTML5 is the latest buzz word in web development world. It comes with a lot of cool, new features and most importantly it aims at bringing consistency to the whole process of web development. The code is much cleaner, neater and standardized. For example, web software developers can replace the div tags with neat HTML5 elements. This also means that web developers across the board can read and understand code better even if they know nothing about the language because of the standardization. This also ensures that web developers building new hosted web applications can understand the features better and integrate well with it. The overall semantics would improve because of the new HTML elements and it would be easy to see the structure of the code and determine the header, footer, navigators etc.
What is HTML?
HTML stands for HyperText Markup Language, the language used to create documents on the World Wide Web. HTML is similar to SGML.htm HTML defines the structure and layout of a Web document by using a variety of tags and attribute The correct structure for an HTML document starts with
<HTML><HEAD> (enter here what document is about) </HEAD><BODY> and ends with </BODY></HTML>. All the information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags.
There are hundreds of other tags used to format and layout the information in a Web page. For instance, <P> is used to make paragraphs and <I> … </I> is used to italicize fonts. Tags are also used to specify hypertext links. These allow Web developers to direct users to other Web pages with only a click of the mouse on either an image or word(s).
Tips
Open a web page in a new window
To open a link within a new window, place
TARGET="_blank" within your link code.
<A HREF="http://www.yourdomain.com/" TARGET="_blank">Your Link</a>
Never Delete a Webpage Revisited
In the tip "Never Delete a Webpage," I discussed why you should notcompletely remove a web address. In the tip, I stated that you need to create areferrer page where the old page used to go that pushes people back to a page ofyour choosing, keeping visitors away from 404 errors. If your web server isrunning on a UN*x machine, and you have shell access, there is a better way tocreate referrer pages.
The command "ln" creates a symbolic link from one file to another.This allows you to create a file "1.htm," and a link to that filecalled "home.htm." That way, when someone accesses"home.htm" they are brought to the file "1.htm."
Instead of creating referrer pages, create symbolic links. Use the parameter"-s" to the "ln" command to create what is called a softlink from one page to another. Don't worry too much about the technicalities;just know that this works.
For example, to create a link to the file "home.html" called"home.htm", enter in this command at the shell prompt:
ln -s home.htm home.html
Use Text Menus Too!
If you create site navigation menus using graphics, you still should createtext-only versions as well. Some people browse the web with graphics turned off,and some use browsers that do not support images (such as LYNX).
More on Menu Navigation
A previous tip discuss placing menu navigation areas on all of your pages.This is a highly recommended practice to ease peoples' browsing of your website,but do not offset this great idea by placing your navigation areas at differingsections of the page. If your navigation area is at the top of the page, keep itthere on all of the pages of your site. If it is at the bottom of the page, keepit there for the entire site.
Sometimes Fancy Editors Won't Work
Fancy webpage editors are nice - they allow WYSIWYG (What You See Is What YouGet) web design. Cutting and pasting is easy, and selecting graphics is abreeze. Some even have features that would be time-consuming to replicate byhand, such as automatically adding image HEIGHT and WIDTH tags, or searching apage or website for broken links.
Many people think learning a web editor is the key to successful web design.My advice is to learn HTML anyway, no matter how nice your web editor may be.Many web editors add useless HTML tags that cannot be removed unless you editthe raw HTML source. Some editors have bugs, making it nearly impossible to, forexample, place a hard return at a certain area of a page. Most do not supportevery HTML tag. If you ever need to edit a template file (an HTML file that willbe parsed and filled with information from a database), most HTML editors couldcorrupt the template. Thus, there are times when knowing and editing raw HTML iscrucial.
Opening Up New Windows
In order for the browser to launch a new window when a link is activated, add this in the HTML for a normal link:
TARGET="resource window"
The complete link would appear like this:
<a href="http://www.deadhorse.com" TARGET="resource window">Click here</A>
Protect Your Email Address From Spam Robots
If you'd like to display your email address within your web pages, but are afraid Spam robots will harvest it, you can protect yourself. Instead of displaying the usual mailto:you@yourdomain.com, use the following code within your HTML:
<A HREF="mailto:you@yourdomain.com">Contact Us</A>
When clicked on, it will display your email address correctly
Subjects with Email
If you run a website and have an e-mail link, you're bound to get e-mail -possibly lots of it. Unfortunately, much of the e-mail you receive may have avery nondescript subject or none at all, leaving you to have to open everysingle message using your mail reader to see what the subject is about. There'sa better way. Attach the "?subject=SUBJECT" extension to your"mailto:" link and force a subject onto the user (unless they manuallychange it).
For example, the following e-mails someone@somewhere.com with the subject"Test Message."
<A HREF="mailto:someone@somewhere.com?subject=Test Message">
Displaying Text With An Image
To display your text wrapping around an image, place the following code within your <IMG> tag followed by your text.
<IMG BORDER="0" ALIGN="Left" SRC="yourimage.jpg"> Your Text
By placing the above code within your HTML, your image will be displayed on the left hand side with your text displayed on the right.
As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. This table's width is set up to span 50% of the page width.
<IMG BORDER="0" ALIGN="Right" SRC="yourimage.jpg"> Your Text
By placing the above code within your HTML, your image will be displayed on the right hand side with your text displayed on the left.
As you continue to type your text, it will automatically format itself to wrap around the left side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. This table's width is set up to span 50% of the page width.
Preventing Search Engine Indexing
To prevent a Search Engine from indexing a page, place the code below between the <HEAD> and </HEAD> tags
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
This tag tells the robots not to index this page and not to follow any links within the page.
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
This tag tells the robots not to index this page, but follow any links within the page.
More on Menu Navigation
A previous tip discuss placing menu navigation areas on all of your pages.This is a highly recommended practice to ease peoples' browsing of your website,but do not offset this great idea by placing your navigation areas at differingsections of the page. If your navigation area is at the top of the page, keep itthere on all of the pages of your site. If it is at the bottom of the page, keepit there for the entire site.
How to Indent Text on Both Sides
To indent text one tab-width (or one column) from both sides of the page, usethe <BLOCKQUOTE> </BLOCKQUOTE> tags. As the name of the tagsuggests, this is recommended when using large block quotes of text on awebpage.
Open all links in a new window
To open all links within a page in a new window, place the following code between your <HEAD> and </HEAD> tags.
<base target="main">
