The ultimate HTML Colour Chart

   

// <![CDATA[
clr=new Array(’00’,’20’,’40’,’60’,’80’,’a0′,’c0′,’ff’);
for (i=0;i<8;i++) {
document.write(“”);for (j=0;j<8;j++) {document.write(“”);for (k=0;k<8;k++) {document.write(”); }
document.write(“”); }
document.write(”

‘);
document.write(‘ ');
document.write(clr[i]+clr[j]+clr[k]+'

“); }
// end
// ]]>
000000

000020 000040 000060 000080 0000a0 0000c0 0000ff
002000 002020 002040 002060 002080 0020a0 0020c0 0020ff
004000 004020 004040 004060 004080 0040a0 0040c0 0040ff
006000 006020 006040 006060 006080 0060a0 0060c0 0060ff
008000 008020 008040 008060 008080 0080a0 0080c0 0080ff
00a000 00a020 00a040 00a060 00a080 00a0a0 00a0c0 00a0ff
00c000 00c020 00c040 00c060 00c080 00c0a0 00c0c0 00c0ff
00ff00 00ff20 00ff40 00ff60 00ff80 00ffa0 00ffc0 00ffff
200000 200020 200040 200060 200080 2000a0 2000c0 2000ff
202000 202020 202040 202060 202080 2020a0 2020c0 2020ff
204000 204020 204040 204060 204080 2040a0 2040c0 2040ff
206000 206020 206040 206060 206080 2060a0 2060c0 2060ff
208000 208020 208040 208060 208080 2080a0 2080c0 2080ff
20a000 20a020 20a040 20a060 20a080 20a0a0 20a0c0 20a0ff
20c000 20c020 20c040 20c060 20c080 20c0a0 20c0c0 20c0ff
20ff00 20ff20 20ff40 20ff60 20ff80 20ffa0 20ffc0 20ffff
400000 400020 400040 400060 400080 4000a0 4000c0 4000ff
402000 402020 402040 402060 402080 4020a0 4020c0 4020ff
404000 404020 404040 404060 404080 4040a0 4040c0 4040ff
406000 406020 406040 406060 406080 4060a0 4060c0 4060ff
408000 408020 408040 408060 408080 4080a0 4080c0 4080ff
40a000 40a020 40a040 40a060 40a080 40a0a0 40a0c0 40a0ff
40c000 40c020 40c040 40c060 40c080 40c0a0 40c0c0 40c0ff
40ff00 40ff20 40ff40 40ff60 40ff80 40ffa0 40ffc0 40ffff
600000 600020 600040 600060 600080 6000a0 6000c0 6000ff
602000 602020 602040 602060 602080 6020a0 6020c0 6020ff
604000 604020 604040 604060 604080 6040a0 6040c0 6040ff
606000 606020 606040 606060 606080 6060a0 6060c0 6060ff
608000 608020 608040 608060 608080 6080a0 6080c0 6080ff
60a000 60a020 60a040 60a060 60a080 60a0a0 60a0c0 60a0ff
60c000 60c020 60c040 60c060 60c080 60c0a0 60c0c0 60c0ff
60ff00 60ff20 60ff40 60ff60 60ff80 60ffa0 60ffc0 60ffff
800000 800020 800040 800060 800080 8000a0 8000c0 8000ff
802000 802020 802040 802060 802080 8020a0 8020c0 8020ff
804000 804020 804040 804060 804080 8040a0 8040c0 8040ff
806000 806020 806040 806060 806080 8060a0 8060c0 8060ff
808000 808020 808040 808060 808080 8080a0 8080c0 8080ff
80a000 80a020 80a040 80a060 80a080 80a0a0 80a0c0 80a0ff
80c000 80c020 80c040 80c060 80c080 80c0a0 80c0c0 80c0ff
80ff00 80ff20 80ff40 80ff60 80ff80 80ffa0 80ffc0 80ffff
a00000 a00020 a00040 a00060 a00080 a000a0 a000c0 a000ff
a02000 a02020 a02040 a02060 a02080 a020a0 a020c0 a020ff
a04000 a04020 a04040 a04060 a04080 a040a0 a040c0 a040ff
a06000 a06020 a06040 a06060 a06080 a060a0 a060c0 a060ff
a08000 a08020 a08040 a08060 a08080 a080a0 a080c0 a080ff
a0a000 a0a020 a0a040 a0a060 a0a080 a0a0a0 a0a0c0 a0a0ff
a0c000 a0c020 a0c040 a0c060 a0c080 a0c0a0 a0c0c0 a0c0ff
a0ff00 a0ff20 a0ff40 a0ff60 a0ff80 a0ffa0 a0ffc0 a0ffff
c00000 c00020 c00040 c00060 c00080 c000a0 c000c0 c000ff
c02000 c02020 c02040 c02060 c02080 c020a0 c020c0 c020ff
c04000 c04020 c04040 c04060 c04080 c040a0 c040c0 c040ff
c06000 c06020 c06040 c06060 c06080 c060a0 c060c0 c060ff
c08000 c08020 c08040 c08060 c08080 c080a0 c080c0 c080ff
c0a000 c0a020 c0a040 c0a060 c0a080 c0a0a0 c0a0c0 c0a0ff
c0c000 c0c020 c0c040 c0c060 c0c080 c0c0a0 c0c0c0 c0c0ff
c0ff00 c0ff20 c0ff40 c0ff60 c0ff80 c0ffa0 c0ffc0 c0ffff
ff0000 ff0020 ff0040 ff0060 ff0080 ff00a0 ff00c0 ff00ff
ff2000 ff2020 ff2040 ff2060 ff2080 ff20a0 ff20c0 ff20ff
ff4000 ff4020 ff4040 ff4060 ff4080 ff40a0 ff40c0 ff40ff
ff6000 ff6020 ff6040 ff6060 ff6080 ff60a0 ff60c0 ff60ff
ff8000 ff8020 ff8040 ff8060 ff8080 ff80a0 ff80c0 ff80ff
ffa000 ffa020 ffa040 ffa060 ffa080 ffa0a0 ffa0c0 ffa0ff
ffc000 ffc020 ffc040 ffc060 ffc080 ffc0a0 ffc0c0 ffc0ff
ffff00 ffff20 ffff40 ffff60 ffff80 ffffa0 ffffc0 ffffff

DONE

HTML Charts

HTML, or Hyper Text Markup Language, is the language used to create web pages. Below is a reference chart of HTML tags.Here’s a list of all known tags (I think) for your hand-coding needs.

Fundamentals

Tag Property Description
<html>
</html>
Top line of all html document
<head>
</head>
Houses general browser information for web page
<title>
</title>
Title of document. Located in header
<body>
</body>
background
bgcolor
bgsound
font
link
alink
vlink
topmargin
leftmargin
marginheight
marginwidth
Applies attributes to entire document

Text Modification

Tag Description Example
<b> </b> Bolded text Sample text
<i> </i> Italicized text Sample text
<u> </u> Underlined text Sample text
<pre> </pre> Preformatted text
Sample text
<h1> </h1> Header 1

Header 1

<h2> </h2> Header 2

Header 2

<h3> </h3> Header 3

Header 3

<h4> </h4> Header 4

Header 4

<h5> </h5> Header 5
Header 5
<h6> </h6> Header 6
Header 6
<sub> </sub> Subscript Subscript
<sup> </sup> Superscript Superscript

Font

Tag Property Description
<font>
</font>
color
size
name
Applies style to text

Links

Tag Property Description
<a> </a> href
target
style
class
name
id
Generates a link to other documents or locations

Images

Tag Property Description
<img> src
alt
name
border
height
width
Creates an image

Formatting

Tag Description Example
<blockquote>
</blockquote>
Used for long quotes. Indents all text and images within the tags. Sample of text in a block quote format
<ol> </ol> Ordered List (used with <li>)
  1. Item 1
<ul> </ul> Unordered List (used with <li>)
  • Item 1
<li> List element
<dd> </dd> Definition List Sample text
<dt> Definition Term Sample text
<dd> Definition Description Sample text
<p> </p> Paragraph return Sample text
<br> Line break Sample
text
<hr> Horizontal rule

<center> </center> Center elements Sample

Tables

Tag Property Description
<table> </table> border
cellpadding
cellspacing
width
height
name
id
title
bgcolor
background
align
valign
Holds the table elements
<tr> </tr> height
bgcolor
background
align
valign
title
Defines a new row
<td> </td> height
width
bgcolor
background
align
valign
title
colspan
rowspan
Defines a table cell
<th> </th> height
width
bgcolor
background
align
valign
title
colspan
rowspan
Table header. Automatically bolds and centers contents
<tbody> </tbody> height
width
align
valign
bgcolor
background
Applies formatting to surrounded cells
<colgroup> </colgroup> height
width
align
valign
bgcolor
background
colspan
Applies formatting to given column

Forms

Tag Property Description
<form> </form> method
action
name
Holds the form elements
<input type=> text
password
hidden
radio
checkbox
submit
image
reset
Various types of form elements
text name
value
width
maxlength
password name
value
width
maxlength
hidden name
value
Used to pass hidden elements to forms
radio name
value
Radio 1
Radio 2
checkbox name
value
checked
Check 1
Check 2
submit value
image src
height
width
alt
name
border
reset value
<select> </select> name
size
Create Drop-down boxes. Used in conjunction with option
<option> selected
name
value
Option 1 Option 2
<textarea> </textarea> name
rows
cols
wrap
wrap off
virtual
physical
no wrap
word wrap, sent as one line
word wrap, sent with breaks

 

The Client/Server Model

global-search-icon-1By definition, every TCP/IP application is a client/server application. In this scenario the client makes requests of a server. That request flows down the TCP/IP protocol stack, across the network, and up the stack on the destination host. Whether the server exists on the same host, another host of the same LAN, or on a host located on another network, the information always flows through the protocol stack.

From the information presented to this point, the client/server model has some general characteristics:

  • The server provides services and the client consumes services.
  • The relationship between the client and the server is machine-independent.
  • A server services many clients and regulates their access to resources.
  • The client and server can exist on different hardware platforms.
  • The exchange between client and server is a message-based interaction.
  • The server’s methodology is not important to the client.
  • The client carries the bulk of the processing workload so that the server is free to serve a large number of clients.
  • The server becomes a client to another server when it needs information beyond that which it manages.

By specifying only the interface between the Application layer and the Transport layer, the TCP/IP Application layer permits various Application layer models. This open-ended approach to the Application layer makes it difficult to draw a single model that illustrates all TCP/IP applications. On one end of the scale, applications run as shell-level commands; on the other, applications run in various window environments. For example, the traditional telnet is run from the shell. Yet, some implementations of the telnet client take advantage of windows technology. To make life more complicated, telnet implementations are also available for the distributed computing environment (DCE). C++ client/server applications use the Object Management Group’s (OMG) Common Object Request Broker Architecture (CORBA) model. Consequently, trying to define a universal Application layer model is an exercise in futility.

However, even with all the variations, the Web browser continues to grow as a popular Windows environment for the implementation of the client side of the equation.

 

Applications, Plug-Ins, and Applets

Not too long ago, programmers developed applications; now they develop applications, plug-ins, and applets. Although a program is a program, the name attached to it tells us something about the nature of the program. Alas, there are more gray zones than black and white ones. In spite of this overlap, some well-defined characteristics separate applications, plug-ins, and applets.

Starting with an application, the common characteristics are that:

  • It is a standalone program.
  • A desktop program, including Web browsers, invokes an application in a separate window.
  • An application normally implements a specific application protocol such as FTP, telnet, or SMTP.

On the other hand, a plug-in’s characteristics are that:

  • It represents an extension to a Web browser.
  • It implements a specific MIME type in an HTML document.
  • It normally operates within the browser window.

And then we have the Java applet. Is it a “small application,” or is it something else? A Java applet

  • Is written in the Java language and compiled by a Java compiler
  • Can be included in an HTML document
  • Is downloaded and executed when the HTML document is viewed
  • Requires the Java runtime to execute

Whereas applications and plug-ins must be ported to each hardware platform, applets run on any platform that has a Java runtime. Thus, applets provide an object-oriented, multiplatform environment for the development of applications.

What does in XML mean?

article-page-main_ehow_images_a04_s0_bp_use-cdata-xml-800x800CDATA stands for Character Data and it means that the data in between these tags includes data thatcould be interpreted as XML markup, but should not be.

The key differences between CDATA and comments are:

  • CDATA is still part of the document, while a comment is not.
  • In CDATA you cannot include the string ]]> (CDEnd), while in a comment -- is invalid.
  • Parameter Entity references are not recognized inside of comments.

This means given these three snippets of XML from one well-formed document:

<!ENTITY MyParamEntity "Has been expanded">

<!--
Within this comment I can use ]]>
and other reserved characters like <
&, ', and ", but %MyParamEntity; will not be expanded
(if I retrieve the text of this node it will contain
%MyParamEntity; and not "Has been expanded")
and I can't place two dashes next to each other.
-->

<![CDATA[
Within this Character Data block I can
use double dashes as much as I want (along with <, &, ', and ")
*and* %MyParamEntity; will be expanded to the text
"Has been expanded" ... however, I can't use
the CEND sequence (if I need to use it I must escape one of the
brackets or the greater-than sign).
]]>

Why does it look so weird?

The CDATA section is a marked section. In SGML there is both an abstract syntax as well as a concrete syntax. The abstract syntax of a marked section declaration begins with a markup declaration open(mdo) delimiter followed by a declaration subset open (dso) delimiter. A status keyword comes next followed by a second declaration subset open (dso) delimiter. A marked section ends with a marked section close (msc) delimiter followed by a markup declaration close (mdc) delimiter. Therefore the abstract syntax of a marked section declaration is:

mdo dso status-keyword dso my-data msc mdc

concrete syntax is defined for each document. This syntax is specified within the SGML declaration associated with each document. The concrete syntax defines the delimiters to be used for the document. The default SGML delimiters, which I assume are defined in ISO 8879:1986, are as follows:

  • Markup declaration open: <!
  • Declaration subset open: [
  • Marked section close: ]]
  • Markup declaration close: >

But you are free to define your own concrete syntax and so can modify the characters used as the delimiters.

Therefore the default concrete syntax of a marked section declaration is:

<![ status-keyword [my-data]]>

Possible status-keywords are: CDATA, RCDATA, IGNORE, INCLUDE, TEMP

Which brings us to:

<![ CDATA [my-data]]>

HTML TUTOR

So much could be said about HTML. Right now, I am staring at over 1,200 pages of html guides (real paper pages) of which I know, maybe, 25 percent. Suffice it to say I will not go into a long tutorial here. There are plenty of great sites to become informed through, and I would recommend them to anyone who desires to learn more. One of the best is Microsoft.com. In fact, that is my standby reference on anything to do with coding.

I will however give you just a few reference pages to make this book a little more complete:

HTML Chart

HTML Special Characters

Full HTML – Web Safe Color Chart

To be brief, and skip all the ‘nonsense’ programming techie stuff, you MUST know this:

Each HTML “tag” begins with — <
and ends with </>

Make sure you always “tag”. It will almost always be the problem when you go to copy any of these scripts into your pages. 

Furthermore, you must know that each web page is composed of two MAIN parts: the head

<head>

</head>

AND the body

<body>

</body>

Simply put, we could compare the two to a human being. The “head” thinks for us, and the “body” carries out the actions. Same in HTML.

OK. That’s ALL I’m going to say about HTML. Scary? Not at all…you don’t need anymore. Let’s move on to some cool stuff. What do you say?

Pros and Cons of Flash-based Sites

Flash-based sites have been a craze since the past few years, and as Macromedia compiles more and more great features into Flash, we can only predict there will be more and more flash sites around the Internet. However, Flash based sites have been disputed to be bloated and unnecessary. Where exactly do we draw the line? Here’s a simple breakdown.

The good:

Interactivity

Flash’s Actionscript opens up a vast field of possibilities. Programmers and designers have used Flash to create interactve features ranging from very lively feedback forms to attractive Flash-based games. This whole new level of interactivity will always leave visitors coming back for more.

A standardized site

With Flash, you do not have to worry about cross-browser compatibility. No more woes over how a certain css code displays differently in Internet Explorer, Firefox and Opera. When you position your site elements in Flash, they will always appear as they are as long as the user has Flash Player installed.

Better expression through animation

In Flash, one can make use of its animating features to convey a message in a much more efficient and effective way. Flash is a lightweight option for animation because it is vector based (and hence smaller file sizes) as opposed to real “movie files” that are raster based and hence much larger in size.

The bad and the ugly:

The Flash player

People have to download the Flash player in advance before they can view Flash movies, so by using Flash your visitor range will decrease considerably because not everyone will be willing to download the Flash player just to view your site. You’ll also have to put in additional work in redirecting the user to the Flash download page if he or she doesn’t have the player installed.

Site optimization

If your content was presented in Flash, most search engines wouldn’t be able to index your content. Hence, you will not be able to rank well in search engines and there will be less traffic heading to your site.

Loading time

Users have to wait longer than usual to load Flash content compared to regular text and images, and some visitors might just lose their patience and click the Back button. The longer your Flash takes to load, the more you risk losing visitors.

The best way to go is to use Flash only when you absolutely need the interactivity and motion that comes with it. Otherwise, use a mixture of Flash and HTML or use pure text if your site is purely to present simple textual and graphical information.

HTML5 – a few bullet points

HTML has been on a wild ride. Sure, HTML started as a mere markup language, but more recently HTML’s put on some major muscle. Now we’ve got a language tuned for building true web applications with local storage, 2D drawing, offline support, sockets and threads, and more.

If you’ve never had exposure to HTML5 before, that’s okay, but you should have worked with HTML, and there are some basics you should know about like elements, tags, attributes, nesting, the difference between semantic markup and adding style, and so on.
If you aren’t familiar with all these, we’re going to make a small suggestion (and a shameless plug): there’s a book called Head First HTML
with CSS & XHTML, and you should read it. And if you’re somewhat familar with markup languages, you might want to skim it or use it as a reference while coding HTML5.

html5_1920x1200