GFX Depot - HTML & CSS

Open Source For Training and Learning Online on Advance Graphic and Web Designing

Sat, 11 Apr 2009 12:17:50 +0000

The Training Shell is a website that allows you to watch and learn new techniques of 3d designing, Adobe & Macromedia Family, Operating System, Web Programming and Technology, Art, Fashion, Food, Games, Music, on one site. It comes with over 1000 tutorials and all are free of charges.

The Training Shell takes the pain of uploading videos you just simply have to register on that site. Gone are the days of searching the internet for movies and tutorial and the hassle of registering on every site before you can learn from that tutorial and create new things It is simple to use that even a beginner can now be a 3d designer, Adobe & Macromedia Family Master, Learn OS usage from scratch and do web programming, Learn Art Work, Learn Fashion Designing, Manage to Cook Food in days.

You also contribute your experience with us, and gave us suggestion how we make that more useful for all of you.

With Regards

Sharon

Making your own 404Error Page

Wed, 30 May 2007 06:54:12 +0000

in this tutorial i will show you how to create those custom 404 error pages for your site. If a visitor enters a wrong url they will see this custom error page!

Step1:
Make your custom page, with the message 404 error on it, make it fancy or basic.

Step2:
Open up notepad and enter:

Code:

errordocument 404 http://urdomain.com/customerrorpage.html

Where you see 'http://urdomain.com/customerrorpage.html' replace that with the address to your custom error page.

Now save the file with the file name '.htaccess' make sure it is .htaccess with nothing else.

Step3:
Now upload the .htaccess file to your server and your done!
Try going to a wrong address.

-ED

Changing the color of the ScrollBar in CSS

Wed, 30 May 2007 06:52:05 +0000

Open up a text editor, and make a new document or open your css document

Add the following code to your css

Code:

body{

scrollbar-arrow-color: #444444;

scrollbar-face-color: #555555;

scrollbar-track-color: #444444;

scrollbar-shadow-color: #000000;

scrollbar-highlight-color: #666666;

scrollbar-dark-shadow-color: #000000;

scrollbar-3d-light-color: #666666;

}

Edit the color codes according to what you want changed and your done!

-ED

Basics of CSS Syntax

Wed, 30 May 2007 06:49:28 +0000

The CSS syntax is made up of three parts. The selector, property and value.

Code:

selector {property: value}

The code shown above, is the correct order, in which to put the three parts.

The three parts mean:

1. selector - the html tag you wish to define
2. property - the attribute you want to change, such as color, etc...
3. value - the value of the changed attribute will show what you want, whether it be a color change, size change, etc..

If the value is more than two words, such as sans serif, a font you can edit with this CSS coding, you put it into quotes.

Code:

selector {property: "value, if more than one word"}

Let's say you want to change the color of your background.

Code:

body {color: black}

Now, if you wish to add more attributes, you seperate each one with a semi-colon.

Code:

p {text-align: center; color: red}

Now everytime I use

in my document, the text will be aligned in the center, and it will have a red color.

You can also group selectors. If you want all your headings to be green, let's say, just group them.

Code:

h1, h2, h3, h4, h5, h6 {color: green}

Each new selector must be seperated by a comma.

That is the basic formation of a CSS code.

-ED

How to: Visually improve the look of Header & Navbar

Fri, 14 Apr 2006 15:39:14 +0000

[CSS] Different margins in different browsers

Mon, 10 Apr 2006 12:21:41 +0000

Sometimes, if you visited a site in IE and afterwards you visit it again but then in FF some margins are not the same! e.g.: the text is a bit more the right of the border

You can fix this by first of all setting your margins to 0

Code:

* {

margin : 0 ;

padding : 0 ;

}

After that you can make your own margins in HTML

How to: Build a simple layout with CSS

Sun, 09 Apr 2006 23:53:54 +0000

How to: Connecting to FTP server

Fri, 07 Apr 2006 10:34:06 +0000

Connecting to server via FTP

This tutorial is aimed to absolute beginners who have never heard about thinks like FTP and uploading files. The others please be patient, more interesting stuff in DJ series will come later. Today I will talk about using TotalCommander and Dreamweaver for FTP acess.

FTP is protocol used to transfer files between your and remote PC. For us is important that using FTP protocol is the easiest way how to publish your files on web.

Using Total Commander
Total Comander is very popular file manager. Iam sure you have heard about TC, if no i recommend you to at least try it. Current version can be always found at http://www.ghisler.com/download.htm . Choose mirror, download and install.

1.) Net -> FTP connect... (Ctrl + F) or press picture

2.) New connection... you should see something like this

Session -> its your name of this account, so u can use whatever you want (ex. myGFX account, VIP DJ account)
Host name(:Port) -> url of host, conntact your provider for this information, it should be something like dj.vipzone.biz or http://ftp.dj.vipzone.biz or something similar
User name -> your username, usually your domain name (ex. shogun, sometimes full name is necessary like shogun@dj.vipzone.biz)
Password -> Your secret password
Remote Dir-> starting directory on remote server
Local Dir -> starting directory on local pc
you will probably never use other settings

3.) Press OK to save. Later press Edit to change settings.
4.) Press Connect and work same as if it were folder on local disk.

Usefull shortcuts:
spacebar - Select file (file name will go red) press on every file you want to copy/delete
Shift + up/down arrow - Select more files
F3 -> View file
F4 -> Edit file
F5 -> Copy
F6 -> Move
F7 -> New Folder
F8 -> Delete
Ctrl + R -> Reload directory

Using Macromedia DreamweaverBuilt-in clinet:
Iam using version MX 2004, but steps should be similar for all versions.

1.) Site -> Manage sites... -> New -> FTP & RDS site
2.) Fill in textboxes, example on picture below.

3.) Test - you should see Macromedia connected to your server sucessfuly.
4.) press OK to save settings
5.) open Window -> Files (F if its not opened yet

Working with remote files:
6.) Double click on file to edit it
make changes
7.) Press File -> Save (Ctrl + s)

Tip: try clicking right button on file, dialog appers -> explore what elese you can do.

In DW thers another possibility how to work with remote server. Lets mkae new "Site", it will create new directory on local disk. Andvantage is
that we can edit files locally and easily synchronize them with those on server. We can in adddition set testing server (second ftp server) and much more.

1.) Site -> Manage sites... -> New -> Site
2.) Go step by step, theres really siple wizard, for more options press Advanced tab

3.) open Files window (F
4.) Select view (Local view, Remote view, Map view or Testing server)

5.) edit files, upload them, download them, synchronize... by clicking right button on file

Tip: if you work in remote view dont forget to press "Connects to remote host" button , and use "Refresh" button (F5)

There are many FTP clients and many apllications have its own built-in clinets. Just use google and you must find client you will really like.

FTP protocol can be of course used also for downloading files. But thats another story.

Regards shogun

Tutorial Index

Wed, 05 Apr 2006 14:28:26 +0000

HTML
Basic look of a HTML page
Iframes
HTML Part I - By Cort
Frozen URL
Anchors (links within a page)
No Image Toolbar
Search Robots
Meta Tags
HTML BASICS - By Cort

XHTML & CSS
About CSS
XHTML + CSS Basics
Build a layout with CSS

FTP
How to connect to a FTP server

XHTML + CSS Basics

Mon, 03 Apr 2006 17:13:19 +0000

In this tutorial you will hopefully learn:
>>What CSS is
>>Why CSS is so useful
>>How to code CSS and which part does what
>>How to code CSS into your HTML (XHTML) Document

CSS stands for Cascading Style Sheets, it can and from my point of view should be used in most HTML or XHTML documents.

First of all, some people may be thinking why they should use CSS when they could just use some font tags?
Well CSS can speed up the loadind of your web pages because the CSS file can be placed in an external location, which will be called up just once and then cached (stored) on the user's computer so it does not need to be loading everytime somebody views your page. With CSS you can also position anything you want EXCATLY where you want it on the page, pixel perfect
CSS also saves coding, for example:

Code:

 Texty McTextus 

  Texty McTextus With a hint of more text 

 Texty McTextus with some text

This could be cleaned up by using CSS:

The CSS

Code:

.maintext {

font-color:#333333;

font-size:12px;

}

.subtext {

font-color:#cccccc;

font-size:9px;

}

The HTML

Code:

Texy McTestus 


 Texty McTextus With a hint of more text  


 Texty McTextus with some text

Right lets break all this down...

Lets look at the CSS, here I will show you what each part does.

.maintext { this gives the class a name, it is a class in this case because it has a dot (.) at the beginning. (I will go through classes, ID's and Tags later.) The '{' ends the list of classes,IDs or Tags.

font-color:#333333; This is as simple as it looks, font-color is telling what to modify, and the ':' is the beginning of the information and #333333 is what the modification is, ending with a ; to end the information.

font-size:12px; You should be able to guess this by now using the example above.

} This ends the 'maintext' class.

See if you can work out the 'subtext' class on your own

The HTML is very simple,

Texy McTestus

opens the paragraph tag, class= is stating which class (CSS Class) to use and '".maintext"' is the class to use. Don't forget the speech marks on the class!

See how simple it is?

Because I am a fan of the more simple designs with more code than images I always use divs and CSS instead of tables, I use Divs instead for many reasons:

* Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content

* Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered

* Tables encourage the use of spacer images to aid with positioning

* CSS generally requires less code than cumbersome tables

* All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads

* With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it.

Why should you use divs and not tables? Well first of all your code will be much cleaner,

is much tidier than loads of table tags and padding etc. you can also change complete sites without touching the html, just by modifying the CSS, a great example of this is CSSZenGarden. They have created some amazing layouts without touching the HTML.

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web.

The main problems with using tables is:

* mixes presentational data in with your content.

* This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.

* Bandwidth ain't free.

* This makes redesigns of existing sites and content extremely labor intensive (and expensive).

* It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.

* Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.

Here comes the trickest bit, still, this is not tricky...
There are 3 different rules you can apply, you can apply a:
>>Class (can apply to any tag)
>>Tag (which changes the look of that tag (everytime it is used ) )
>>ID's + pseudos (I just use ID)

Lets go into more detail; you need to know where to use each type of rule. This depends on your coding style, this is mine, it may be similar to yours or completely different.

I use classes for things such as text, ID's and Tags do not work with text so im forced to use a class.
I use a Tag rule when i want a rule to apply to only a certain tag, for example if i wanted every image's border to be removed i would create this CSS in the header:

img {
border:0;
}

So every image (in an img tag) would have its border removed, this is useful because you onyl need to create the rule and its done, you do not need to apply that to any tags etc.

I mainly use ID's when styling Divs, Not really sure why. Its the way I learnt it and i have never tried classes.

Now you know how to write CSS and apply it to tags go and practice it untill i have finished the full website tutorial
I will update this when its done

And note, i have been doing this for about a week (03/04/2006) and i know all this. That is how simple it is.

hope you learnt something,
xXx--Ben--xXx

Note: Please do not Rip this tutorial, if you wish to use it or any part of it please ask me and then I will give you permission.

UPDATED

Iframes

Thu, 09 Mar 2006 01:52:26 +0000

I don't really see a whole lot of sites that use Iframes, so I don't think people are aware of them, so I thought I'd make this (If its common knowledge, then i guess i'm an idiot). Iframes are an easier way for people to view pages (less to load), or just to make a page better looking.

The basic iframe code is;

Code:

note there is a name tag for it, this is so links will open up in the iframe, to get links to do this use these codes;

Code:

YOU CAN USE THIS AT THE VERY BEGINING OF YOUR PAGE AFTER 



OR in links

You also need another page for the iframe to bring up, as you saw in the src="#.html", use anything you want, but this will appear first when the page loads.

Now I'll show you the code I'll use to make a basic website, and you can take the code and use it yourself

Code:





tutorial



industrial revolution   |

   yeti

HERES WHAT IT ALL LOOKS LIKE!!

play around with it, change it up, add better fonts, backgrounds, and have fun

About CSS

Tue, 28 Feb 2006 11:53:22 +0000

First off all:
What is CSS, it means Cascading Style Sheets and its used to give your page (in HTML or similar) a better look.

You can make 1 CSS page wich is called the StyleSheet and you can define all different 'styles' that you want too use in your whole website in it.
For example:

Code:

A:link              { color: #FFFF00; background-color: #336699;

                     font-weight: bold; text-decoration: none; }

A:visited          { color: #FFFF00; background-color: #336699;

                     font-weight: bold; text-decoration: none; }

A:hover           { color: #336699; background-color: #FFFF00;

                     font-weight: bold; text-decoration: none; }

With the correct refers in every single page of your site, every link, visited link and link that you go over, will have the style defined in this Style Sheet.

You can create new styles, for BODY or just give them a name link title1 or attentionpart or for whatever you want to use it.

Define them like this:

Code:

.attentionpart  { color: #CCFFCC; background-color: #336699;

                     font-weight: bold; text-decoration: none; }

Now if you want to use it in any page use this reference:

Code:

 This will have the style defined in your self-created-syle of the Style Sheet
 This won't.

To use the css StyleSheet you must save it as .css
Here you see a complete CSS-page:

Code:

Well thats basically it for CSS, if you want to know more just ask.

Frozen URL

Thu, 29 Dec 2005 19:49:27 +0000

So you don't want your URL to change everytime someone visits a page on your website huh?

E.g. Your website is http://www.yoursite.com and someone visits your contact.html page, the URL your visitors will see in their browser would be http://www.yoursite.com/contact.html. But you want them to see http://www.yoursite.com everywhere.

There's a very simple trick to do this.
Make an invisible frame to 'distract' the browser. Because pages opining in frames, won't chage the URL at the top of your browser.

Use this code:

Quote:
http://www.yoursite.com/page.html" name="content" scrolling="yes" noresize>

Paste it between your HEAD tags.

_______________
Did you like this tutorial?
Please Register and give your opinion.

Anchors (links within a page)

Thu, 29 Dec 2005 19:49:05 +0000

With the Anchor-tag (also called Bookmark) you can 'jump' within the same page.
E.g. You have a FAQ page full of questions and answers and at the top of your page you have links to each questions.
(Example)
Anchors are also used to jump from the bottom of a page, back to the top with simply 1 click.

First you define the location where the browser should jump to

If you want to jump to the top of your page (like in the example), you just place the tag right after the tag or somewhere else at the top of your page.
The A stands for Anchor.

Now you just make a link to the defined location

Top

This would be placed anywhere on your page (for example at the bottom).

____________________________________

Another example:

The one with the FAQ ^^
How are we going to do this?
Well, very simple
You just place right before the place where Question 3 starts
And you would place 3) How do I close a program in windows? at the top of your page (between Question2 and question4).

______________

If you have any more questions, feel free to ask me

_______________
Did you like this tutorial?
Please Register and give your opinion.

No Image Toolbar

Thu, 29 Dec 2005 19:48:35 +0000

Something I really hate when browsing websites is the stupid Image Toolbar that shows everytime I drag my mouse over an image.

Source: Microsoft.com

Some webbrowsers have an option to remove these (somewhere between the browser settings). But IE and some other browsers don't have this option, so we'll have to remove them ourselves.

Paste this between your HEAD tags:

Quote:

You can also remove the toolbar for just one image, use this code:

Quote:

_______________
Did you like this tutorial?
Please Register and give your opinion.

HTML Part I - By Cort

Thu, 29 Dec 2005 19:47:58 +0000

This is the first part for HTML coding.
In this part you'll learn how to use colors and the FONT tag.

Code:





 Html Tutorial PART 1 


















Everything between this tags will be centrated in the browser screen.











Instead of the center tags you can also use the align object, on object must be inclosed in an other 

tag. Because we only want to align our text we can use the DIV tag. Only the DIV tag will do nothing to your

text but you can put some object in it:







 This text will be placed right, you can do this with "left" and "center" instead of right 




When you use no ALIGN object in your TAG then the standard value is left. 


DIV is quite an simple TAG or BOX in wich you can't really do much. 


For colors, sizes and other FONT things we can use the FONT tag: 





 This will be colored red   


 This will have a size of 12 pixels and green  








To change the background color of your whole page you must add the object bgcolor in your BODY tag.


As you see the background color of this page is white, that's the standard value. You can change the 


color in whatever you want, black, green, red, blue, ... 







Ofcourse there will be colors from wich you don't know the correct name or some varities like 


darkblue, or lightgreen. 




To specify them you can use the standard color codes wich look like: #FFFF00. 



 

An example of the use:  




 This will be colored 



 

To get the correct code you can look in the colortable:










 Color Table 











There are lot's of 'fun' tags in HTML I will tell you one in this part: the MARQUEE tag will let your text scroll over the width of your page:




 This text will scroll over your page 



 In Part2 I will tell you how to insert images and how to use tables. 



 Part1 in HTML coding by C0rt for  gfx-depot.com 


  Basic Code of HTML

Here you see the page:

You can download all the Tutorialsfiles here [/code]

_______________
Did you like this tutorial?
Please Register and give your opinion.

Search Robots

Thu, 29 Dec 2005 19:45:37 +0000
ROBOTS

This part belongs between the Meta Tags.

Examples:

Descriptions:

INDEX: search engine robots should include this page.
FOLLOW: robots should follow links from this page to other pages.
NOINDEX: links can be explored, although the page is not indexed.
NOFOLLOW: the page can be indexed, but no links are explored.
NONE: robots can ignore the page.

GOOGLEBOT

The also belongs between the Meta Tags.

Example:

Description:

NOARCHIVE: Google uses this to prevent archiving of the page. (See http://www.google.com/bot.html)

In addition to the ROBOTS META Command above, Google supports a GOOGLEBOT command. With it, you can tell Google that you do not want the page archived, but allow other search engines to do so. If you specify this command, Google will not save the page and the page will be unavailable via its cache.
See Google's FAQ.

_______________
Did you like this tutorial?
Please Register and give your opinion.

META Tags

Thu, 29 Dec 2005 19:45:03 +0000
Meta tags are used for searchrobots (like Yahoo and Google) to find your page more easily.
Your visitors won't be able to view your meta tags, but searchrobots will find them

To use them, just copy the part below and paste it on your page between and .
Adjust the bold parts and remove the italic parts.

Microsoft FrontPage 4.0">
A description of which program is used to make your webpage.

FOLLOW,INDEX">
How far may searchrobots enter your site?
More info about search robots

Webdesign from A to Z">
Description of your website

webdesign, photoshop, cinema 4d, HTML, Javascript">
Keywords that have something to do with your website (Use as many as possible!)

AZ Tech">
Title of your webpage

English">
The language used on your website

6 days">
The revisit time

15;URL=http://www.az-tech.frih.net">
Optionally. The number is after how many seconds the page has to refresh automaticly, the URL is what page should be loaded next. (if the same page should refresh, remove the second part)

General">
What's the content of your webpage?

AZ Tech
Title of your website (this is the one shown in the top left corner)

info@email.com">
The webmaster's e-mailMr Webmaster">Name of the person or company that made the webpage.

_______________
Did you like this tutorial?
Please Register and give your opinion.

Basic look of a HTML page

Thu, 29 Dec 2005 19:44:38 +0000
Hi all.
This is a VERY EASY tutorial on how to make your first HTML webpage.

Step 1:
Make an empty folder somewhere and name it whatever you want.
In this new folder, make a new textdocument. (Right Click -> New -> Textdocument)
Give it a name and open it.

Step 2:
Copy this text:

Quote:

Your Page Title

Hello world!

What does this mean?
Tells the computer the HTML page starts here
Start of the Head-section, everything in the Head-section can not be seen by you visitors
The beginning of your title. Your title will show on the top left corner of your visitor's browser Tells the computer this is the place where your title stops
End of your head section
Beginning of your Body-section. This is where your actual webpage begins, the real content of your page begins here
Hello world! The text that will be shown on your webpage
The end of the Body-Section
This is where the HTML-code stops

Now simply save your textdocument as index.html (don't forget the .html part or the computer won't know it's a webpage)

Why index.html?
Every browser automaticly detects an index.html page as a homepage.
E.g. If you have 3 pages in your directory called aboutme.html, index.html and home.html, every webbrowser (Internet Explorer, Firefox, ...) will automaticly open index.html if someone goes to http://www.yoursite.com.

Congratulations, you're done
Just open your webpage to view your result.

If you want to edit your webpage, just right-click it and choose 'Edit' (if you want to edit it with Microsoft Frontpage or Dreamweaver) or Open With -> WordPad.

_______________
Did you like this tutorial?
Please Register and give your opinion.

HTML BASICS - By Cort

Thu, 29 Dec 2005 19:44:13 +0000
If you have already used HTML then you can better skip this rather short, basic 'tutorial'.
In this tutorial you will see and learn the basic structure of a HTML page. The following parts will be more intresting than this one.
Code:

When you open this page in a browser you'll get this:

to download all the tutorialfiles: Click here
C0rt

_______________
Did you like this tutorial?
Please Register and give your opinion.