Documentation sections
Introduction
Variables
Using Forms
Sending Email
MySQL Databases
This feature is ready for use on all hosting accounts at no extra cost.
1. Introduction
All hosting plans have PHP enabled by default. There is no need to install or enable anything extra. Unlike cgi scripts, no special permissions are required.
Simply give your PHP pages a .php extension and upload them to your web site. Think of these files as regular .html files with a special set of features.
First Example
<html>
<head><title>First Example</title></head>
<body>
<?php
echo "Our first example<br>";
?>
</body>
</html>
The php code starts with <?php and ends with ?>.
When someone points a browser to this web page, the server will convert the .php code and output the below.
<html>
<head><title>First Example</title></head>
<body>
Our first example
</body>
</html>
In other words, it will display a web page with the words "First Example" in the title and the phrase "Our first example" on the page itself.
Included at no extra cost with each hosting account, PHP allows you to make your web site more dynamic.
2. Documents
An html web page is basically a plain text (ASCII) file. It can be created/modified using any basic text editor.
1. Basic structure
The HTML tag starts and stops the web page. Different sections are defined within the web page.
<HTML>
<HEAD>
Header info for the page goes here
</HEAD>
<BODY>
Page body/text/content goes here
</BODY>
</HTML>
The HEAD html tag starts and stops header info which may or may not be visible to the browser.
The BODY tag starts and stops the part of the web page which will be shown in your browser's window.
2. Header section
This section holds the title of the page and information which tells search engines more about the web page.
2.1 Document title
The TITLE tag defines the title for the html document.
<HEAD>
<TITLE>Beginner html guide</TITLE>
</HEAD>
This would set the title of the page (shown in the top part of your browser window) to 'Beginner html guide'. This tag is placed within the HEAD section.
2.1 Meta tags
These tags come in many flavors. This beginner's guide only covers search engine related META tags.
<HEAD>
<TITLE>Beginner html guide</TITLE>
<META NAME="description" CONTENT="This page offers html help">
<META NAME="keywords" CONTENT="html, tutorial, guide, help">
</HEAD>
The NAME attribute defines what type of info the META tag provides. The CONTENT attribute sets the value.
3. Body section
This section is what you see in the browser window. Other html tags covered in this tutorial go here.
4. Example
This sample html code sets the title for the document and adds some text as content for the page.
<HTML>
<HEAD>
<TITLE>Beginner html guide</TITLE>
</HEAD>
<BODY>
This text is shown in the browser window
</BODY>
</HTML>
Simply create a text file (with a .html extension) with the above html code and save it do disk.
You could also upload it to your web hosting account. Point a browser to it to see what it does.
3. Formatting
Many different tags are available to control text on a web page. Some of the more basic are listed here.
1. Add a line break
The BR tag is used to add a line break to a html document. Simply pressing enter will not work.
Simply pressing enter
will not result in a line break.
This <BR> tag will.
The above lines of html produces the below result.
Simply pressing enter will not result in a line break. This
tag will.
No new line was started after the word 'enter'. The line break was added where the BR html tag was placed.
2. New paragraph
The P html tag is used to insert a new paragraph.
Simply pressing enter a few times
will not insert a new paragraph.
This <P> tag will.
The above lines of html produces the below result.
Simply pressing enter a few times will not insert a new paragraph. This
tag will.
3. Bold text
The B tag is used to start/stop this formatting style.
This is an <B>example</B> of bold text.
The above line of html code produces the below result.
This is an example of bold text.
4. Italicized text
The I tag is used to start/stop this formatting style.
This is an <I>example</I> of italicized text.
The above line of html produces the below result.
This is an example of italicized text.
3. The FONT tag
The FONT tag has various attributes which can be used to change the font properties in html documents.
This tag can be used to change <FONT COLOR="red">color</FONT>, <BR>
<FONT SIZE="+1">size</FONT> and also <FONT FACE="sans-serif"> font face</FONT>.
The above lines of html produces the below result.
This tag can be used to change color,
size and also font face.
The COLOR attribute is used to change the color. The SIZE attribute can increase and decrease size. The FACE attribute defines the font face in html documents.
4. Advanced Usage
Formatting tags can be combined to help make html documents easy to read. Many other formatting tags exist, only a few are covered in this beginner's guide.
4. Tables
A table is a great way to present tabular information organized in rows and columns.
1. Table basics
The below html code defines a basic table structure.
<TABLE BORDER="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
The TABLE html tag is used to start/stop tables. By setting the BORDER attribute to "1", we add a border to a table. Set the BORDER attribute to "0" for no border.
The TR html tag is used to add a row to tables. Create data (cells) by using TD tags.
The above html would produce this table structure :
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
This table contains two rows with three cells each.
2. Combining cells
Two (or more) cells can be combined to make a larger cell. The html code combines two cells on the first row.
<TABLE BORDER="1">
<TR>
<TD COLSPAN=2>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
</TR>
</TABLE>
The COLSPAN attribute defines the number of cells to combine in this column. The html produces this table.
Cell 1 Cell 2
Cell 3 Cell 4 Cell 5
The first cell now takes up two spaces on the first column. Cells on the same row can also be combined.
<TABLE BORDER="1">
<TR>
<TD ROWSPAN=2>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
</TR>
</TABLE>
The ROWSPAN attribute defines the number of cells to combine in this row. The html produces this table.
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5
Multiple cells can be combined across multiple rows and columns to create more complex html tables.
3. Advanced usage
Tables can be combined with html forms to create well organized, easy to use, feedback forms.
Only the basics are covered in this guide. More tags and attributes are available, backgrounds and colors can be added. This page exists to help beginners.
5. Forms
Forms allow you to gather information from your web site's visitors. These are often used for shopping carts, polls or to provide feedback. The information entered is sent to a program which in turn reads the form data.
1. Defining a form
A form starts with the below line of .html code.
<FORM METHOD="POST" ACTION="script.cgi">
The METHOD attribute tells the web server how to pass the data to the script. Usually, this is POST for forms.
Replace script.cgi with the name of your program which will receive the data from your web based form.
Forms end by closing the FORM tag, as shown below.
</FORM>
Form elements are defined between those html tags.
2. Submit button
Clicking a submit button sends the information entered in forms to the program which will handle the data.
<FORM METHOD="POST" ACTION="script.cgi">
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
This will create a button with the text we defined on it.
Most form fields are INPUT tags. The TYPE attribute defines the type of data it will provide. The VALUE attribute populates the html field with data.
3. Form fields
3.1 Text
This field type allows for text to be collected via forms.
<FORM METHOD="POST" ACTION="script.cgi">
Your name <INPUT TYPE="text" NAME="name"><BR>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
The INPUT tag is defined to be of the 'text' TYPE. The NAME attribute will tell the program receiving the data from the form how to find this specific html field.
This creates a form where plain text can be entered.
Your name
3.2 Checkbox
This html field type allows for one or more options to be selected in online forms.
<FORM METHOD="POST" ACTION="script.cgi">
Colors you like<BR>
<INPUT TYPE="checkbox" NAME="color1" VALUE="Red"> Red<BR>
<INPUT TYPE="checkbox" NAME="color2" VALUE="Green"> Green<BR>
<INPUT TYPE="checkbox" NAME="color3" VALUE="Blue"> Blue<BR>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
3.3 Radio buttons
This field type allows for only of of many options to be selected in html forms.
<FORM METHOD="POST" ACTION="script.cgi">
Your favorite color<BR>
<INPUT TYPE="radio" NAME="color1" VALUE="Red"> Red<BR>
<INPUT TYPE="radio" NAME="color2" VALUE="Green"> Green<BR>
<INPUT TYPE="radio" NAME="color3" VALUE="Blue"> Blue<BR>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
3.4 Drop down menus
<FORM METHOD="POST" ACTION="script.cgi">
Your favorite color<BR>
<SELECT NAME="color">
<OPTION VALUE="Red"> Red<BR>
<OPTION VALUE="Green"> Green<BR>
<OPTION VALUE="Blue"> Blue<BR>
</SELECT>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
3.5 Multiple lines of text
<FORM METHOD="POST" ACTION="script.cgi">
Your address<BR>
<TEXTAREA NAME="address">
</TEXTAREA>
<INPUT TYPE="submit" VALUE="Send Information">
</FORM>
Your address
4. Practical use of forms
The many html form fields can be combined in a single form to make it useful.
Additional attributes can be defined for the html tags used here. The goal of this tutorial/guide is to provide a place for beginners to find help and get started
The End
* This Tutorial is made by Promethian all credits is reserved *