Code It All - Displaying Your Code



Menu - Home - Help Forum - CIA Topsite - Getting Started - HTML Tags - Links - Graphics - Text - Display Your Code - What is Code? - What is ASCII? - Display Code Using ASCII - Display Code Using Textareas - Textarea Settings - Site Formatting - CSS - PHP - Javascript - Guestbooks / Shoutbox - Lists - E-mail - Extras - Site Tips Tools - Color Chart - Scrollbar Gen - ASCII Chart - HTML Cheat Sheet - MySpace Ad Remover - Xanga Ad Remover Contact Me Site Links - MySpace Icons - Your link here - More Affiliates...	Displaying Your Code Some websites (such as this one) like to dislay their codes in order to give an explanation of the code or to provide a code to copy and paste onto their own sites. An example of a site like that would be My-Cons.com. This site provides codes to place images on your own website. In any case there are two effective ways to display your code. Below you will see an explanation of this. What is Code? Simply put code is what the computer reads to create the websites you see all over the internet. Top About ASCII? There is a chart (linked to in the left hand menu called an ASCII chart). ASCII is the American Standard Code for Information Interchange. Simply put its the different letters and other symbols that can be created using your keyboard. Each symbol or letter has its own ASCII code. Using the code correctly will tell the computer what to display. Top How can I use ASCII to display my code? Code is read and made into the design of the website all at once. Therefore, by using the ASCII code technique you can change a code from being used into being displayed. This is much more easily explained by using an example. The code below if copied and pasted into an html page will display an image. <img src="http://www.codeitall.com/images/example.gif"> The only way I am able to display that code is by using an ASCII html code for the '<' that begins the code. This then changes everything to text rather than being read as code. Therefore, to get what you see above. I needed to type the following. <img src="http://www.codeitall.com/images/example.gif"> This works because the html code for '<' is < To extend this explanation even further. The only way I was able to display the code for '<' in the code above was by typing the following. &#60;img src="http://www.codeitall.com/images/example.gif"> This works because the code for & is &. As you may have noticed, this explanation can go on forever. You just need to take out a main part of the code to keep it from being read as code. I'd suggest the initial '<' being replaced with its html code. You can find this out by reading the chart. Just find the character (in red) and copy the HTML code to the left of it. Granted this is more difficult than the other choice but it looks much nicer in the end. Top How can I use a textarea to display my code? Textareas state that whatever is found within them is treated as text. Therefore using the code below will display the image code, it will however have a box around it. <textarea><img src="http://www.codeitall.com/images/example.gif"></textarea> - See This Code In Action As you see the displaying of the code is much different from the use of ASCII but it works just as well. If you want to allow users to copy your code I would recommend using a textarea for the reasons you will see below. Top Textarea Settings There are many different settings that can be set for your textarea. The following are just a few of the many. Please note that while textareas can display code they cannot display </textarea> you will need to use ASCII code to display that because the code will be read as closing the textarea you want to write it in. Rows rows = "#" The number chosen is how many rows you want to display before scrolling. - See This Code In Action Columns cols = "#" The number chosen is how many columns you want to display. - See This Code In Action Read Only readonly = "True / False" Sets the text in the box to read only so the users cannot change them. - See This Code In Action onClick onClick = "this.focus(); (or) this.select()" When the user clicks in the box. - See This Code In Action (this.focus();) - See This Code In Action (this.select();) Mouseover onMouseover = "this.focus(); (or) this.select()" When the user hovers over the box. - See This Code In Action (this.focus();) - See This Code In Action (this.select();) Top
Code It All - Copyright 2008