Moogle Talks: June 2009

Saturday, June 20, 2009

List of HTML Tags

Here is a reference of HTML tags, good for students and web developers. I hope you find it very useful.

Used for commenting. Any text placed in between these will be visible in the source code, but will not render on the page.

Example Usage:



<!DOCTYPE>

Should appear at the top of every HTML document, this informs the browser which XHTML/HTML specification you are using.

Example Usage:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<a>

Used for defining external documents or a location on the current page.

Example Usage:

<a href=”http://www.google.com”>Google</a> - Link to External

<a href=”#top”>Jump to the top of this page</a> - Anchor Inside Document

<abbr>

Used for marking up abbreviations in your document.

Example Usage:

<abbr title=”et cetera”>etc.</abbr>

Used for marking up acronyms in your document.

Example Usage:

<acronym title=”Advanced Technology Extended”>ATX</acronym>

Used to define addresses and signatures in documents.

Example Usage:

<address>Juan Dela Cruz<br />

1234 San Carlos<br />

Green Town</address>

Embedded applets are defined using this tag.

applet was deprecated in HTML 4.01

<area>

Used for defining an area inside of an image map.

Example Usage:

<img src="myimage.jpg" alt="My Image" usemap="#myimage" />

<map id="myimage" name="myimage">

<area shape="rect" coords="0,0,50,100" href="http://www.google.com" target="_blank" />

</map>

<b>

Used for defining bold text.

Example Usage:

<b>This text is bold</b>

<base>

Used for specifying a default URL for all images and links without a predefined url in the document.

Example Usage:

<base href="http://www.allaboutprog.blogspot.com/" />

Used for specifying a default font in the document.

This tag was deprecated in HTML 4.01.

<bdo>

Used for overriding the direction of a string.

Example Usage:

<bdo dir="rtl">This text is backwards</bdo>

<big>

Used for formatting a string of text larger than default.

Example Usage:

<big>This is some pretty big text</big>

Used for defining long quotations.

Example Usage:

<blockquote>"And that’s the end of that chapter"</blockquote>

<body>

Used for identifying the beginning and end of content in the document.

Example Usage:

<html xmlns="http://www.w3.org/1999/xhtml">

<head></head>

<body></body>

</html>

<br>

Used for inserting a line break.

Example Usage:

To Whom it May Concern,<br />I just successfully inserted a line break.

Used for creating a form button. It’s similar to the input element in every way, except you can wrap images and text using the button tag.

Example Usage:

<button>I’m a Button!</button>

Used for adding a center aligned caption above a table.

Example Usage:

<table>

<caption>Say Cheese!</caption>

<tr>

<td>Cell data</td>

</tr>

</table>

Used for center aligning.

This tag was deprecated in HTML 4.01.

<cite>

Used for proper text formatting of citeing.

Example Usage:

<cite>Webster’s Dictionary</cite>

<code>

Used for computer code formatting.

Example Usage:

<code>This is some computer code text</code>

<col>

Used for defining the attributes of columns in a table.

Example Usage:

<table>

<colgroup span="2">

<col width="20"></col>

<col width="30"></col>

</colgroup>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

</table>

Used for defining groups of table columns.

Example Usage:

<table>

<colgroup span="2">

<col width="20"></col>

<col width="30"></col>

</colgroup>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

</table>

<dd>

Used for defining the description of a term in a definition list.

Example Usage:

<dl>

<dt>Kool-Aid</dt>

<dd>Delicious Beverage</dd>

<dt>Milk</dt>

<dd>Nutricious Beverage</dd>

</dl>

<del>

Used for defining deleted text, formats with a strike-through.

Example Usage:

The answer is <del>false</del> true

<dir>

Used for defining a directory list.

This tag was deprecated in HTML 4.01.

<div>

Used for defining a division in a document. This is commonly used to wrap elements and then format them properly using cascading style sheets.

Example Usage:

<div>This is some text inside of a div</div>

<dfn>

Used for proper text formatting of a definition term.

Example Usage:

<dfn>This is a definition term</dfn>

<dl>

Used for defining a definition list.

Example Usage:

<dl>

<dt>Kool-Aid</dt>

<dd>Delicious Beverage</dd>

<dt>Milk</dt>

<dd>Nutricious Beverage</dd>

</dl>

<dt>

Used for defining a definition term.

Example Usage:

<dl>

<dt>Kool-Aid</dt>

<dd>Delicious Beverage</dd>

<dt>Milk</dt>

<dd>Nutricious Beverage</dd>

</dl>

<em>

Used for defining emphasized text, this will italicize the text.

Example Usage:

<em>This text is italicized</em>

Used for drawing a padded, outlined box around the data enclosed.

Example Usage:

<fieldset>Test Data</fieldset>

<form>

Used for opening a new form group, where all enclosed form elements will submit their data to the defined destination.

Example Usage:

<form action="mail.php" method="post">

Your Email: <input type="text" name="email" />

<input type="submit" />

</form>

Used for defining headers in your article. h1 being the largest and h6 being the smallest.

Example Usage:

<h2>Testing Header 2</h2>

<head>

Used for defining information on your document. Can include the following tags: title, style, script, meta, link, base.

Example Usage:

<html xmlns="http://www.w3.org/1999/xhtml">

<head></head>

<body></body>

</html>

<hr>

Used for displaying a horizontal rule. This creates a line break and displays a horizontal bar across the page.

Example Usage:

Hello<hr />My name is Joe

<html>

Used for opening an HTML document, this should appear at the top of all your html documents underneath the DOCTYPE tag.

Example Usage:

<html xmlns="http://www.w3.org/1999/xhtml">

<head></head>

<body></body>

</html>

<i>

Used to indicate that the enclosed text must be rendered in a italic (slanted) typeface.

Example Usage:

<b>This text is italized</b>

Used for displaying an inline frame in your document that sources an external one.

Example Usage:

<iframe src="http://www.google.com" width="500" height="300"></iframe>

<img>

Used for displaying an image in a document.

Example Usage:

<img src="image.jpg" width="100" height="100" alt="My Image" border="0" />

<input>

Used for defining an input field form element.

Example Usage:

Your Email: <input type="text" name="email" />

<ins>

Used for defining inserted text (gives an underline effect)

Example Usage:

The winner is <ins>you</ins>

<kbd>

Used for defining keyboard formatted text.

Example Usage:

<kbd>This is keyboard formatted text</kbd>

<label>

Used for defining the label of a form element. Most commonly used on check boxes and radio buttons to provide extended control (many users prefer clicking on the text rather than the box).

Example Usage:

<input type="radio" name="test" id="test" value="1" /> <label for="test">Testing</label>

Used for defining the title of a fieldset

Example Usage:

<fieldset><legend>The Title</legend>Testing</fieldset>

<li>

Used for defining a list item in an ordered (ol) or unordered (ul) list.

Example Usage:

<li>This is a list item</li>

<link>

Used for defining the relationship between 2 documents. Commonly used for defining external cascading style sheets.

Example Usage:

<link rel="stylesheet" type="text/css" href="global.css" />

<map>

Used for image mapping. This allows you to define multiple regions on your image that are clickable.

Example Usage:

<img src="myimage.jpg" alt="My Image" usemap="#myimage" />

<map id="myimage" name="myimage">

<area shape="rect" coords="0,0,50,100" href="http://www.google.com" target="_blank" />

</map>

<meta>

Used for providing meta information to search engines.

Example Usage:

<meta name="description" content="This is the short description of my page that spiders like Google will read and index" />

Used for outputting a message to the user if they’re not able to execute document frames. This tag must be placed inside the frameset element.

Example Usage:

<noframes>Your browser is ancient and isn’t able to render the frames on this page.</noframes>

Used for outputting a message to the user if they’re not able to execute your script.

Example Usage:

<noscript>You would have seen something nice here, but your browser does not support JavaScript</noscript>

Used for embedding an object into your document. Most common uses are Flash and other forms of multimedia.

Example Usage:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″

codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″

width=”300″ height=”120″>

<param name=”movie” value=”flash.swf”>

<param name=”quality” value=”high”>

<param name=”bgcolor” value=”#FFFFFF”>

</object>

<ol>

Used for displaying an ordered (1, 2, 3…) list.

Example Usage:

<ol>

<li>This is 1</li>

<li>This is 2</li>

</ol>

Used for defining a group of options in a drop down (select list).

Example Usage:

<select>

<optgroup label="Option Group 1">

<option value="01">Option 01</option>

</optgroup>

</select>

Used for defining individual items in a drop down (select) list.

Example Usage:

<select>

<option value="01">Option 01</option>

</select>

<p>

Used for defining a paragraph. By default it adds spacing and line breaks above and below the enclosed text.

Example Usage:

<p>This is my paragraph</p>

<param>

Defines parameters on objects.

Example Usage:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″

codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″

width=”300″ height=”120″>

<param name=”movie” value=”flash.swf”>

<param name=”quality” value=”high”>

<param name=”bgcolor” value=”#FFFFFF”>

</object>

<pre>

Used for rendering preformatted text. This preserves line breaks and spaces without the need for additional html code.

Example Usage:

<pre>This text is preformatted</pre>

<q>

Used for defining short quotations.

Example Usage:

<q>And that’s how I did it</q> said Joe

<samp>

Used for formatting text like computer code.

Example Usage:

<samp>Sample text</samp>

Used for defining script in a document, most commonly JavaScript.

Example Usage:

<script type="text/javascript"></script>

Form element used for displaying a single or multi-line selectable list.

Example Usage:

<select>

<option value="01">Option 1</option>

<option value="02">Option 2</option>

</select>

<small>

Used for defining small text.

Example Usage:

<small>This text is small</small>

<span>

Used for defining a section in a document. Typically used as a replacement for the font tag to add style to a section of text.

Example Usage:

Today is a <span >cold day</span>

Used for adding a strike through the middle of a strong of text.

This tag was deprecated in HTML 4.01.

Used for placing emphasis on text, bold effect.

Example Usage:

Welcome Back, <strong>Joe Somebody</strong>

<style>

Used for defining styles (CSS).

Example Usage:

<style type="text/css">

body { background-color: #000000; }

</style>

<sub>

Used for subscripted text.

Example Usage:

I’m feeling <sub>down</sub> today

<sup>

Used for superscripted text.

Example Usage:

E=mc<sup>2</sup>

<table>

Used for opening a new table.

Example Usage:

<table>

<tr>

<td>Testing</td>

</tr>

</table>

<tbody>

Used for defining the body of a table.

Example Usage:

<table>

<thead><tr><td>Testing the thead</td></tr></thead>

<tfoot><tr><td>Testing the tfoot</td></tr></tfoot>

<tbody><tr><td>Testing the tbody</td></tr></tbody>

</table>

<td>

Used for defining table cells/columns.

Example Usage:

<table>

<tr>

<td>Testing</td>

</tr>

</table>

Used for multi-line text-area form elements.

Example Usage:

<textarea rows=”3″ cols=”30″>This is a text area…</textarea>

<tfoot>

Defines a table footer.

Example Usage:

<table>

<thead><tr><td>Testing the thead</td></tr></thead>

<tfoot><tr><td>Testing the tfoot</td></tr></tfoot>

<tbody><tr><td>Testing the tbody</td></tr></tbody>

</table>

<th>

Defines a table heading on individual cells.

Example Usage:

<table>

<tr>

<th>Head 1</th><th>Head 2</th><th>Head 3</th>

</tr>

<tr>

<td>Content 1</td><td>Content 2</td><td>Content 3</td>

</tr>

</table>

<thead>

Defines a global table heading.

Example Usage:

<table>

<thead><tr><td>Testing the thead</td></tr></thead>

<tfoot><tr><td>Testing the tfoot</td></tr></tfoot>

<tbody><tr><td>Testing the tbody</td></tr></tbody>

</table>

<title>

Used for defining the title of the document.

Example Usage:

<title>Joh’s Website</title>

<tr>

Defines a table row.

Example Usage:

<table>

<tr>

<td>Testing</td>

</tr>

</table>

<tt>

Used for defining teletype text.

Example Usage:

<tt>Teletype Text</tt>

<u>

Used for underlining text.

This tag was deprecated in HTML 4.01.

<ul>

Used for displaying an unordered (bullets) list.

Example Usage:

<ul>

<li>List Item 1</li>

<li>List Item 2</li>

</ul>

<var>

Variable definition.

Example Usage:

<var>variable</var>

Computer Accronyms and Definitions

ADSL - Asymmetric Digital Subscriber Line
AGP - Accelerated Graphics Port
ALI - Acer Labs, Incorporated
ALU - Arithmetic Logic Unit
AMD - Advanced Micro Devices
APC - American Power Conversion
ASCII - American Standard Code for Information Interchange
ASIC - Application Specific Integrated Circuit
ASPI - Advanced SCSI Programming Interface
AT - Advanced Technology
ATI - ATI Technologies Inc.
ATX - Advanced Technology Extended

BFG - BFG Technologies
BIOS - Basic Input Output System
BNC - Barrel Nut Connector

CAS - Column Address Signal
CD - Compact Disk
CDR - Compact Disk Recorder
CDRW - Compact Disk Re-Writer
CD-ROM - Compact Disk - Read Only Memory
CFM - Cubic Feet per Minute (ft?/min)
CMOS - Complementary Metal Oxide Semiconductor
CPU - Central Processing Unit
CTX - CTX Technology Corporation (Commited to Excellence)

DDR - Double Data Rate
DDR-SDRAM - Double Data Rate - Synchronous Dynamic Random Access Memory
DFI - DFI Inc. (Design for Innovation)
DIMM - Dual Inline Memory Module
DRAM - Dynamic Random Access Memory
DPI - Dots Per Inch
DSL - See ASDL
DVD - Digital Versatile Disc
DVD-RAM - Digital Versatile Disk - Random Access Memory

ECC - Error Correction Code
ECS - Elitegroup Computer Systems
EDO - Extended Data Out
EEPROM - Electrically Erasable Programmable Read-Only Memory
EPROM - Erasable Programmable Read-Only Memory
EVGA - EVGA Corporation

FAT - File Allocation Table
FC-PGA - Flip Chip Pin Grid Array
FDC - Floppy Disk Controller
FDD - Floppy Disk Drive
FPS - Frame Per Second
FPU - Floating Point Unit
FSAA - Full Screen Anti-Aliasing
FSB - Front Side Bus
FTP - File Transfer Protocol

GB - Gigabytes
GBps - Gigabytes per second or Gigabits per second
GDI - Graphical Device Interface
GHz - GigaHertz
GNN - Global Network Navigator

HDD - Hard Disk Drive
HIS - Hightech Information System Limited
HP - Hewlett-Packard Development Company
HSF - Heatsink-Fan
HTML - Hyper Text Markup Language
HTTP - Hyper Text Transfer Protocol

IBM - International Business Machines Corporation
IC - Integrated Circuit
IDE - Integrated Drive Electronics
IFS- Item for Sale
IRQ - Interrupt Request
ISA - Industry Standard Architecture
ISO - International Standards Organization

JBL - JBL (Jame B. Lansing) Speakers
JPEG - Joint Photographic Experts Group
JVC - JVC Company of America

Kbps - Kilobits Per Second
KBps - KiloBytes per second

LG - LG Electronics
LAN - Local Are Network
LCD - Liquid Crystal Display
LDT - Lightning Data Transport
LED - Light Emitting Diode

MAC - Media Access Control
MB - MotherBoard or Megabyte
MBps - Megabytes Per Second
Mbps - Megabits Per Second or Megabits Per Second
MHz - MegaHertz
MIPS - Million Instructions Per Second
MMX - Multi-Media Extensions
MODEM - MODulate/DEModulate
MPEG - Motion Picture Experts Group
MSI - Micro Star International

NAS - Network Attached Storage
NAT - Network Address Translation
NEC - NEC Corporation
NIC - Network Interface Card
NMM - Network Management Module
NMS - Network Management System
NTFS - New Technology File System

OC - Overclock (Over Clock)
OCZ - OCZ Technology
ODI - Open Datalink Interface
OEM - Original Equipment Manufacturer
OLE - Object Linking Embedding
OSI - Open System Interconnection

PC - Personal Computer
PCB - Printed Circuit Board
PCI - Peripheral Component Interconnect
PDA - Personal Digital Assistant
PCMCIA - Peripheral Component Microchannel Interconnect Architecture
PGA - Professional Graphics Adapter
PLD - Programmable Logic Device
PM - Private Message / Private Messaging
PnP - Plug 'n Play
PNY - PNY Technology
POST - Power On Self Test
PPPoA - Point-to-Point Protocol over ATM
PPPoE - Point-to-Point Protocol over Ethernet
PQI - PQI Corporation
PSU - Power Supply Unit

QBE - Query By Example

RAID - Redundant Array of Inexpensive Disks
RAM - Random Access Memory
RAMDAC - Random Access Memory Digital Analog Convertor
RDRAM - Rambus Dynamic Random Access Memory
ROM - Read Only Memory
RPM - Revolutions Per Minute

SASID - Self-scanned Amorphous Silicon Integrated Display
SCA - SCSI Configured Automatically
SCSI - Small Computer System Interface
SDLC - Synchronous Data Link Control
SDRAM - Synchronous Dynamic Random Access Memory
SECC - Single Edge Contact Connector
SEO - Search Engine Optimization
SODIMM - Small Outline Dual Inline Memory Module
SPARC - Scalable Processor ArChitecture
SOHO - Small Office Home Office
SRAM - Static Random Access Memory
SSE - Streaming SIMD Extensions
SVGA - Super Video Graphics Array
S/PDIF - Sony/Philips Digital Interface

TB - Terabytes
TBps - Terabytes per second
Tbps - Terabits per second
TCP/IP - Transfer Control Protocol/Internet Protocol
TDK - TDK Electronics
TEC - Thermoelectric Cooler
TPC - TipidPC
TWAIN - Technology Without An Important Name

UART - Universal Asynchronous Receiver/Transmitter
URL - Uniform Resource Locator
USB - Universal Serial Bus
UTP - Unshieled Twisted Pair

VCD - Video CD
VPN - Virtual Private Network

WAN - Wide Area Network
WTB - Want to Buy
WYSIWYG - What You See Is What You Get

XGA - Extended Graphics Array
XFX - XFX Graphics, a Division of Pine
XML - Extensive Markup Language
XMS - Extended Memory Specification
XT - Extended Technology

ZAC - Zero Administration Client
ZAK - Zero Administration Kit
ZIP - Zero Insertion Force

Friday, June 19, 2009

Computer Programming Flowchart Symbols

What is a flowchart?

A flow chart is a graphical representation of a process or system that details the sequencing of steps required to create output. A typical flow chart uses a set of basic symbols to represent various functions, and shows the sequence and interconnection of functions with lines and arrows. Each flow chart is concerned with one particular process or system. It begins with the input of data or materials into the system and traces all the procedures needed to convert the input into its final output form.

Flow chart symbols

Flowcharting symbols are dynamic and their meanings continue to grow and change depending on who uses them. Although standards have been established, people deviate from these standards to suit their own needs. In many cases, individual companies develop standards for their internal use. Here is some list of most commonly used computer programming flowchart symbols.

Terminal - indicate the flowchart's starting and ending points.

Process - depicts a process such as a mathematical computation, or a variable assignment.

Input/Output Symbol - represents data that is available for input or resulting from processing.

Connector (on-page connector) - Sometimes a flowchart is broken into two or more smaller flowcharts. This is usually done when a flowchart does not fit on a single page, or must be divided into sections. A connector symbol, which is a small circle with a letter or number inside it, allows you to connect two flowcharts on the same page.

Off-page connector - A connector symbol that looks like a pocket on a shirt, allows you to connect to a flowchart on a different page.

Decision - The diamond is used to represent the true/false statement being tested in a decision symbol.

Flow lines - Note: The default flow is left to right and top to bottom. To save time arrowheads are often only drawn when the flow lines go contrary the normal.

Subroutine - The computer temporarily runs the instructions in the subroutine and then returns to the instruction immediately following the subroutine call. Flowcharts for subroutines can be on different pages than the flowchart for the main program.

Uses of Flowcharts:

Documenting process and interrelationship of process steps.
Identifying actual and ideal paths that any data flows.
Identifying the problems and potential improvements of the system or program.

Here are some examples of flowcharting:

1. Draw a flowchart to find the sum of first 30 natural numbers.

Answer:

2. Draw a flowchart to find the largest of three numbers A, B, and C.

Answer:

Flowcharting Tips:

Chart the process the way it is really occurring. Do not document the way a written process or a manager thinks the process happens. People typically modify existing processes to enable a more efficient process. If the desired or theoretical process is charted, problems with the existing process will not be recognized and no improvement can be made.

Note all circumstances actually dealt with. If the operations described on the chart don't happen as charted all the time, note the exceptions on the chart. Is the part or report generated in the process always available when needed or is there sometimes a delay?

Important assumptions and details should be noted on flow such as special training or assumed knowledge, special procedural requirements, time limitations, etc. to ensure awareness of all these issues when analyzing a process for changes.

Where process improvements are time-based, collect data on the "standard" or "typical" time it takes for each step in the process and note each time on the flowchart at each step.

Test the flowchart by trying to follow the chart to perform the process charted. If there is a problem performing the operation as charted, note any differences and modify the chart to correct. A better approach would be to have someone unfamiliar with the process try to follow the flow chart and note questions or problems found.

Include mental steps in the process such as decisions. These steps are sometimes left out because of familiarity with the process, however, represents sources of problems due to a possible lack of training or information used to make the decision can be inadequte or incorrect if performed by a different person.

Thursday, June 18, 2009

How To Make Programming Easy For You

Many students say that subjects concerning about computer programming and programming language are very hard and causing headache. Are you one of them? If you are then here are the things that may help you to make computer programming easy and enjoyable.

Know and understand what a program is

A program is an organized list of instructions. In science it is called "Laws". Everything has a program of its own, the nature, human behavior, energy, etc. A programmer is someone who create and organize these instructions. If you think you cannot be a programmer because you lack ability to understand codes, not good with Math subjects etc. then you think very wrong about yourself. The only thing needed to be a programmer is the ability to create and the good news is everyone is capable of creating things according to their will. Always keep in mind that programmers are the masters of their programs.

Learn and study the basics of the Computer Language you are using

It is very important that you first learn the basics before jumping to the advance level of program coding. Practicing and mastering the basics is the key to create strong advance codes.

Practice makes excellent

Experiment and try the basic codes you have learned. Always test them by "what if" questions (ex. what if I remove this what will happen to the code? will it still work? what if I add this code? will it work? etc.). Computer programs are just combinations of codes working altogether for a certain function. Try your own combination of codes by combining the basic codes that you have learned. Try to think of something you want to create. After experimenting and practicing with the basics try to think of a bigger project, something that can be very useful to other people or to you.

Express yourself and be the master of your programs

It isn't wrong to try or use other people's codes but as much as possible create your own program codes. This can save you from headaches or wasting your time debugging and searching for errors in your program codes

These are some reasons why people failed to become a programmer:

1. Not interested in the subjects or course
2. Lack of patience
3. They didn't develop and apply their ownl skills and talents but instead tried to imitate somebody's works.
4. Laziness

Programming is not that hard if you only give some effort studying it. Always remember that all people are natural programmers. Trust yourself, unleash your talents and start making programs in your own way.