Pages

Thursday, July 8, 2010

:: HTML Elements Part 10 ::

HTML Lists

HTML Lists offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements.

For example

<html>
<head>
<title> The tenth lesson </title>
</head>
<body>
<br>Unordered List
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<br>Ordered List
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<br>Definition List
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>

Lists may contain:
  • Unordered information.
  • Ordered information.
  • Definition information
HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML Definition Lists

A definition list is a list of items, with a description of each item.The <dl> tag defines a definition list.The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Conclusion


HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list


Wednesday, July 7, 2010

:: HTML Elements Part 9 ::

HTML Forms

HTML Forms are used to pass data to a server. The most important form element is the the input element. The input element is used to select user information. An input element can be vary in many ways depending on the type attribute. An input element can be of type text field, checkbox , password, radio button, submit button and more. A form can also contain select lists , textarea, fieldset, legend and label elements.There are many attributes of form syntax such as name, method, action .

For example


<html>
<head>
<title> The nineth lesson </title>
</head>
<body>
<form name=”student” action=”student.php” method=”post” >
Input elements
</form&gt;
</body>
</html>

Input elements

Input elements are very important to select user information. Normally, these input elements will be send to server side. The server will take action whether to save the information or display information of users.There are many input elements can be added in HTML Forms. Several of them are textfield, checkbox, password, radio button, submit button and more.

Textfield

Textfield allow user to enter text into one-line input field.

<form>
First name : <input type =”text” name=”firstname”/>
</form>

Checkbox

Checkbox element allow user to select ONE or MORE options of a limited number of choices.

<form>
<input type ="checkbox" name="vehicle" value="Mawar" /> Mawar <br/>
<input type ="checkbox" name="vehicle" value="Teratai" /> Teratai <br/>
</form>

Password field

Password field almost same to the textfield. But when user enter text into one-line input filed, it will display in asterisk character.

<form>
Password : <input type =”passwordt” name=”pass”/>
</form>

Radio button

Radio button allow user to select ONLY ONE option of a limited number of choices.

<form>
<input type ="radio" name="sex" value="male" /> Male <br/>
<input type ="radio" name="sex" value="female" /> Female <br/>
</form>

Submit button

Submit button allow user to pass user information to server side.

<form>
<form name=”student” action=”student.php” method=”post” >
Username : < input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Drop down list

Drop down list allow user to choose one of many options.

Below is the simple example drop down list.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Below is the simple example drop down list with a pre-selected value.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Textarea

Textarea allows user to write unlimited number of characters. This textarea will be add in HTML Forms.

<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>

Conclusion.

HTML Form Tags

Tag Description

<form>

Defines an HTML form for user input

<input />

Defines an input control

<textarea>

Defines a multi-line text input control

<label>

Defines a label for an input element

<fieldset>

Defines a border around elements in a form

<legend>

Defines a caption for a fieldset element

<select>

Defines a select list (drop-down list)

<optgroup>

Defines a group of related options in a select list

<option>

Defines an option in a select list

<button>

Defines a push button


:: HTML Elements Part 8 ::

HTML Tables

HTML Tables uses <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td&gt; tag can contain text, links, images, lists, forms, other tables, etc. Remember , you need to specify border attribute.If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

Below is the simple example of table with border.

<html>
<head>
<title> The eighth lesson </title>
</head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

You can also put header in the table. Header information in a table are defined with the <th> tag.The text in a th element will be bold and centered.

For example :

<html>
<head>
<title> The eighth lesson </title>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

There are other attributes can be put together in table syntax.

Attribute
Description
cellpadding
Give tables a little extra space between the border of the cell and the text
cellspacing
Give tables a little extra space between the cells of a table
colspan
Merge two colums
rowspan Merge two rows

For example

<table border= "1" cellpadding="10">

In conclusion,the HTML Tables requires start and end tags.This syntax can be added in body section.

Forget to put end tags , will make your table not created.


Wednesday, June 30, 2010

:: HTML Elements Part 7 ::

HTML Images is used to display image/s.It uses <img> tag and the src attribute.The <img> tag is empty, which means that it contains attributes only, and has no closing tag.To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<<img src="url" alt="text" />

HTML The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text:

<img src="ensem.gif" alt="Ensem" />

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

For example :

<html>
<head>
<title> The seventh lesson </title>
</head>
<body>
<img src="ensem.gif" alt="Ensem" />
<img src="www.mutak.com/ensem.gif" alt="Ensem" />
</body>
</html>

In conclusion , the HTML Images do not require end tags. This syntax can be added in body section.

Making too many images can make loading images take long time.


Monday, June 28, 2010

:: HTML Elements Part 6 ::

Links are found in nearly all Web Pages. Links allow users to click their way from page to page.

HTML Hyperlinks(Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.When you move the cursor over a link in a Web page, the arrow will turn into a little hand.Links are specified in HTML using the <a> tag.The <a> tag can be used in two ways:

  1. To create a link to another document, by using the href attribute
  2. To create a bookmark inside a document, by using the name attribute
HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<html>
<head>
<title> The sixth lesson </title>
</head>
<body>
<a href="url">Link text</a>
</body>
</html>

The href attribute specifies the destination of a link.

HTML Links-The target Attribute

The target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window:

Example :

<a href="http://www.mutak.com/" target="_blank">Mutak Pages!</a>

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.The name attribute is used to create a bookmark inside an HTML document.Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:

<a name="tips">New Section</a>

Create a link to the "New Section" inside the same document:

<a href="#tips">New Section</a>

Or, create a link to the "New Section" from another page:

<a href="http://www.mutak/links.htm#tips">New Section</a>

In conclusion , the HTML Links requires both start and end tags. This syntax can be added in body section. Forget to use end tag can make all html pages be hyperlinks.


Sunday, June 27, 2010

:: HTML Elements Part 5 ::

HTML Formatting Tags

To making your website more attractive , you need HTML Formatting Tags. There are many HTML Formatting Tags was provided in HTML Documents. HTML uses tags like <b> and <i> for formatting output, like bold or italic text.These HTML tags are called formatting tags.

HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

HTML Computer Output Tags


Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text

HTML Citation,Quotation and Definition Tags


Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockqoute> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

For example :

<html>
<head>
<title> The fifth lesson </title>
</head>
<body>
<b>This is a bold text </b>
</body>
</html>

To better understanding , you should try all these tags. But remember all these tags requires start and end tags !!

Saturday, June 26, 2010

:: HTML Elements Part 4 ::

Choosing font or heading is very important in creating html pages . Both font and heading almost same but have different function and used in different situation.

HTML Headings

Headings are important in HTML documents. Headings are defined with the <h1> to <h6>.<h1> is the largest heading while <h6> is the smallest heading. This syntax requires both start /opening tag and end/closing tag. The closing tag (i.e <h1>) will be used when users do not want to use it. Use HTML headings for headings only. Do not use it to make text big or bold. Search engines use headings to index the structure and content of web pages. It is important to use headings to show the document structure. H1 headings should be used as main headings , followed by H2 headings then the less important H3 headings and so on.


For example :

<html>
<head>
<title> The fourth lesson </title>
</head>
<body>
<h1>This is H1 heading </h1>
<h2>This is H2 heading </h2>
<h3>This is H3 heading </h3>
</body>
</html>

HTML Fonts

The <font> tag specifies the font face,font size and font color of text.The end/closing tag will be used to make limit the words that will be affected by attributes of fonts.

For example

<html>
<head>
<title> The fourth lesson </title>
</head>
<body>
<font color="FFFFFF" face="verdana" size="3">This is the example using attributes of font </font>
</body>
</html>

Optional Attributes

Attribute Value Description
color rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the color of text
face font_family Deprecated. Use styles instead.
Specifies the font of text
size number Deprecated. Use styles instead.
Specifies the size of text

Standard Attributes

The <p> tag also supports the following standard attributes:

Attribute Value Description
class classname Specifies a classname for an element
dir rtl
ltr
Specifies the text direction for the content in an element
id id Specifies a unique id for an element
lang language_code Specifies a language code for the content in an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element

Using the standard attributes will make complicated. To avoid it, I will not recommend web developer to use it. But if they know how to use it, they may use it.

Tip: Use CSS to define the font face, font size, and font color of text.

Now , you already learned and know about HTML Headings and Fonts.Selamat Mencuba !!

:: HTML Elements Part 3 ::

Normally when you create html pages , there will be have more than one paragraph and one line in a html page. So , its necessary for you to know how to make new paragraphs , new lines and break lines.

HTML Paragraph

Paragraphs are defined with the <p> tag. Do not forget the end / closing tag (</p>) . Most browsers still can display HTML correctly even if you forget the end / closing tag . But forgetting the end / closing tag can produce unexpected results or errors. For the future version of HTML will not allow you to skip the end / closing tag.

For example :

<html>
<head>
<title> The third lesson </title>
</head>
<body>
<p> This is the exampe using HTML Paragraph </p>
</body>
</html>

HTML Line Breaks

Use the <br/> tag if you want a line break (a new line) without starting a new paragraph. The tag does not have any HTML element. It has no end tag . Besides that , you can use <br> tag . Both tags will be used depend on situations . If you want to break the line , you will use <br/> tag. But if you want to use new line , you will use <br> tag . In XHTML , XML and future versions of HTML , HTML elements with no end tag or closing tag are not allowed. Even if <br> always work in all browser , writing <br/> instead is more future proof.

For example :

<html>
<head>
<title> The third lesson </title>
</head>
<body>
<p> This is the exampe using HTML Paragraph </p>
<br> This is the exampe using HTML Line Breaks <br/>
</body>
</html>

Now , you already learned and know about HTML Paragraph and Line Breaks.

Thursday, June 24, 2010

:: HTML Elements Part 2 ::

In this lecture , I would like to discuss about the <body> tags . There are many attributes can be applied in the <body> tags . These attributes will be added in start tag / opening tag <body> tag . Do not forget to include the values.. The coding should have both attribute/s and value/s.These attributes are optional. If you do not want to use any attribute , you can use the basic <body> tags.(<body></body>)

For example:

<html>
<head>
<title> The second lesson</title>
</head>
<body background = "image.jpg "> This is the contain of body </body>
</html>

Below are the list of attributes and values that can be added in start tag / opening tag <body> tag .

Optional Attributes

The <body> tag supports the following optional attributes:

Attribute Value Description
alink rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the color of an active link in a document
background URL Deprecated. Use styles instead.
Specifies a background image for a document
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the background color of a document
link rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the default color of unvisited links in a document
text rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the color of the text in a document
vlink rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the color of the visited links in a document

Standard Attributes

The <body> tag supports the following standard attributes:

Attribute Value Description
class classname Specifies a classname for an element
dir rtl
ltr
Specifies the text direction for the content in an element
id id Specifies a unique id for an element
lang language_code Specifies a language code for the content in an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents

Event Attributes

The <body> tag supports the following event attributes:

Attribute Value Description
onclick script Script to be run on a mouse click
ondblclick script Script to be run on a mouse double-click
onload script Script to be run when a document load
onmousedown script Script to be run when mouse button is pressed
onmousemove script Script to be run when mouse pointer moves
onmouseout script Script to be run when mouse pointer moves out of an element
onmouseover script Script to be run when mouse pointer moves over an element
onmouseup script Script to be run when mouse button is released
onkeydown script Script to be run when a key is pressed
onkeypress script Script to be run when a key is pressed and released
onkeyup script Script to be run when a key is released
onunload script Script to be run when a document unload

*I am not recommend users to use standard and event attributes..Its make complicated.I just want to show the attributes that available for start tag / opening tag <body> tag .

Briefly , the codings should be formulated in this form <body attribute = "value "> .For example <body background = "image.jpg ">.

Monday, June 21, 2010

:: HTML Elements Part 1 ::

In order to make your first website , you only need a notepad to start a website. For the first lecture , I would like to show you the basic of HTML.The most important html syntax is <html> tags . Everytime you created the html page, you have to ensure that you put <html> tags together in your code.

Below is the example coding that using <html> tags . To put other codes , you have to put its between <html> and </html>

<html>
<head><title>My Homepage</title></head>
<body>Hello world, this is my first website.</body>
</html>

*The green text is the additional codes that I put in html page. In this code , I use <head> tags and <title> tags. Both syntax require start tag / opening tag and end tag / closing tag same with <html> tags . Before running your website in web browser(i.e Internet Explorer,Mozilla Firefox) , save your works in .htm or .html extension.For example you save it as home.html.Now , you can see your work by using web browser.Good Luck !!

This is your result..(Screenshot)
Notice the title of your website enclosed between the <title> tags of your HTML file is shown on the top left of the page and is not included in the page. This is the title that will be shown to viewers when users search for your website on the search engines or when someone bookmarks your website. The page of your website only shows the texts between the <body> tags of your HTML codes.

Remember , <title> tags must be put between <head> tags like the example above. The <body> tags will be put after <head> tags.

In conclusion, html codings are divided by two sections which are head and body section. The head section is start with <head> and end with <head> . While the body section is start with <body> and end with <body> . Most of coding or tags will be put either in head or body section .

Sunday, June 20, 2010

:: Introduction to HTML ::

As the previous post , I already mentioned about the essentials for learning php. There are 5 essentials for learning php. At the beginning , I will focus about the basic of understanding html. I think we do not need to discuss details about html or advanced html. It is necessary to just understand and apply basic of html.But if you have an intention to study about it, you can learn its.The example of advanced html such as HTML 4.0, HTML Meta, HTML Scripts, HTML Entities, HTML URLs, HTML URL Encode, and HTML Webserver InsyaAllah , I will also put about Cascading Style Sheet(CSS) and Java Script. These two elements are the additional coding that can be put together in html files.

What is HTML?

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords surrounded by angle brackets like
  • HTML tags normally come in pairs like and
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

  • HTML documents describe web pages
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

Create Or Edit HTML

The best way to learn html is by using a plain text editor (like Notepad) to create/edit HTML. However, professional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text.

.
HTM or .HTML File Extension

When you save an HTML file, you can use either the .htm or the .html file extension. For example is home.htm or home.html.

HTML Elements

HTML documents are defined by HTML elements. An HTML element is everything from the start tag to the end tag. The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

* An HTML element starts with a start tag / opening tag
* An HTML element ends with an end tag / closing tag
* The element content is everything between the start and the end tag
* Some HTML elements have empty content
* Empty elements are closed in the start tag
* Most HTML elements can have attributes

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).HTML documents consist of nested HTML elements.

Friday, June 18, 2010

:: How to learn PHP ::

The essentials for learning PHP:
Learning a new language (programming or otherwise) can be a bit overwhelming. Many people just don't know where to start and give up before they even begin. Learning PHP is NOT as overwhelming as it might seem, I promise you. Just take it one step at a time, and before you know it you'll be off and running.

1.)
Basic Knowledge:
The first thing you need, before you start learning PHP, is a basic understanding of HTML. You can switch between PHP and HTML right in the same document. You can even run PHP from an HTML file.

2.)
Tools:
When creating PHP pages, you can use the same program you use to create your HTML pages. Any plain text editor will do. You will also need an FTP client to transfer files from your computer to your web hosting. If you already have an HTML website you most likely already use an FTP program.

3.)
The Basics:
Now you can finally get started learning PHP! The first thing you should read is our PHP Basics tutorial. This will take you through creating your first file, using variables, basic math, and basic IF statements (a form of logic).

4.)
Learning Loops :
Once you have mastered these skills, it is time to learn about loops. Loops repeat the same actions over and over again until a condition is met. There are several different types of loops which are explained in our Learning Loops tutorial.

5.)
PHP Functions:
Finally, you can learn to write your own custom functions. From here the sky is the limit... With a solid knowledge of these PHP basics, adding PHP functions to your arsenal when you need them will be easy.

Thursday, June 17, 2010

:: Introduction to PHP::

What is PHP?

  • PHP stands for PHP: Hypertext Preprocessor
  • PHP is a server-side scripting language, like ASP
  • PHP scripts are executed on the server
  • PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
  • PHP is an open source software
  • PHP is free to download and use

What is a PHP File?

  • PHP files can contain text, HTML tags and scripts
  • PHP files are returned to the browser as plain HTML
  • PHP files have a file extension of ".php", ".php3", or ".phtml"

What is MySQL?

  • MySQL is a database server
  • MySQL is ideal for both small and large applications
  • MySQL supports standard SQL
  • MySQL compiles on a number of platforms
  • MySQL is free to download and use

PHP + MySQL

  • PHP combined with MySQL are cross-platform (you can develop in Windows and serve on a Unix platform)

Why PHP?

  • PHP runs on different platforms (Windows, Linux, Unix, etc.)
  • PHP is compatible with almost all servers used today (Apache, IIS, etc.)
  • PHP is FREE to download from the official PHP resource: www.php.net
  • PHP is easy to learn and runs efficiently on the server side

:: Muqaddimah ::

First, syukur yg xt'hingga kpd Allah dgn nikmat Islam dan kesihatan. Dgn izinNya , aku dpt menulis blog ni.. Tujuan sbnr aku wat blog ni utk diri aku sendiri..Dgn cara ni , aku blh bljr psl php dgn lbih mendalam..InsyaAllah , aku akn masukkn sume maklumat yg b'kaitan php ..Dah lame aku t'fikir nk bljr psl php tp xde mase yg ssuai utk bljr.. Aku rse ni la mase yg ssuai utk aku bljr php..Dpt jugak aku mengisi mase lapang aku..Smoga dgn usaha aku ni , dpt merealisasikn impian aku utk menjd php programmer suatu hari nnti...Slmat berjaya utk diriku!!