Sunteți pe pagina 1din 27

Training Report on X-HTML, PHP & MySQL

Building Static Sites through HTML HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the W3C, the organisation charged with designing and maintaining the language. The definition of HTML is HyperText Markuge Language. HyperText is the method by which you move around on the web by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear i.e. you can go to any place on the Internet whenever you want by clicking on links there is no set order to do things in. Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example). HTML is a Language, as it has code-words and syntax like any other language.

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 What are HTML Tags ? The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves dont appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: <b>These words will be bold</b>, and these will not.

HTML markup tags are usually called HTML tags -HTML tags are keywords surrounded by angle brackets like <html> -HTML tags normally come in pairs like <b> and </b> -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 Getting Started with HTML What you need? HTML is written simply in a plain text editor like Notepad. Advanced developers also use softwares like Frontpage, Expression Web & Dreamweaver. But we will be using advanced text editor Notepad++ (provided to you on NeepanTech.com Website and also with your Neepan Tech Package DVD). How to Save HTML Web Page. HTM or HTML Extension ? When you save an HTML file, you can use either the .htm or the .html extension. We use .htm in our examples. With new software it is perfectly safe to use .html

Understand the HTML Web Page Structure. <html> <body> Hello, How are you. </body> </html> Example Explained - The text between <html> and </html> describes the web page - The text between <body> and </body> is the visible page content This is the common structure of all the HTML Web Pages. Always you have to Start the HTML Page with opening HTML and Body Tags <html> and <body> and after putting all the content you need in the Web Page, You need to close the opened tags by </body> and </html>, in the order they were opened. HTML Elements. An HTML element is everything from the start tag to the end tag.

Illustration <p>This is Some Content.</p> Illustration Explained Here everything for start paragraph tag to end tag is the HTML Element. The content between the tags This is Some Content. is known as the element content. 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.

HTML Basic Tags Explained. Heading Tags There are six levels of headings in HTML specified by <H1>, <H2>, <H3>, <H4>, <H5> and <H6> tags. <h1> defines the largest heading and <h6> defines the smallest heading.

Paragraph Tag Illustration Explained HTML Paragraph element are defined with the <p> tags. Always rememeber to close the paragraph tag when a particular paragraph is written completely. Illustration <html> <body> <a href="http://www.neepantech.com">Neepan Tech Home Page.</a> </body> </html>

Illustration Output Neepan Tech Home Page. Some other Useful Tags. We will now discuss some other useful tags like HTML Rules, HTML Comments, Line Breaks etc.

Drawing HTML Rules <HR> (Horizontal Rule) is a stand alone tag that generates a horizontal line. There is no corresponding HTML command for a verticle line. Illustration <html> <body> <h1>My First Heading.</h1> <hr> <h2>My Second Heading.</h2> </body> </html> Illustration Output. My First Heading. My Second Heading. Rules Tag Illustration Explained The <hr> Tag generates a horizontal line between the 2 Headings.

HTML Comments All combinations of text placed within the comment tags will be ignored by the web browser, this includes any HTML tags, scripting language(s), etc. Line Breaks To break the line and move to the next line. Use the <br> tag. Marquee <sup> (Superscript) is a tag that makes any text between <sup> tags to be formatted as subscripted. You always had to remember closing the superscript tag after you have formatted the required text. HTML Styling Tags You may want to change the way the generated HTML output looks. The best way to do that is with a Cascading Style Sheet (CSS), which modern browsers support. Font family, type size, colors, and other styles can be controlled with CSS for each kind of element. Connect CSS to a Webpage

Insert the link of CSS Files into the HTML file. The link is to be put in the <HEAD> element. Illustration <link rel="stylesheet" href="stylesheet.css" type="text/css">

Illustration Explained The above tag, links the CSS file named stylesheet.css to the current Web page. HTML Table Tags The <table> tag defines an HTML table. A simple HTML table consists of the table element and one or more tr, th, and td elements. The tr element defines a table row, the th element defines a table header, and the td element defines a table cell. HTML List Tags Words or phrases which need to be set apart from the rest of the body of text can be emphasized with a bullet.

List Tag <LI>: creates a bullet in front of text which is to be set apart for emphasis and causes all text after it to be indented, either until another list tag is detected or until the end of the list is reached. It is used to itemize elements of unordered and ordered lists. Unordered List An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Illustration <html> <body> <ul> <li>January</li> <li>February</li> </ul>

</body> </html> Illustration Output -January -February Unordered List Illustration Explained January & February are put in Bullet as they are inside an <ul> unordered list tags. Ordered List An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Designing HTML Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.

Textfield Text fields are used when you want the user to type letters, numbers, etc. in a form. Radio Button Radio Buttons are used when you want the user to select one of a limited number of choices. Checkbox Checkboxes are used when you want the user to select one or more options of a limited number of choices. What are <div> Tags The <div> tag in XHTML is a tag that defines logical divisions within the content of a page. What this means is that a <div> tag defines sections of a Web page to make it easier to manage, style, and manipulate. "maincontent". <div id ="maincontent"> <div> Tag Illustration Explained We can then give any design or position to the easily to the <div> using the CSS.

PHP - What is it? Taken directly from PHP's home, PHP.net, "PHP is an HTML-embedded scripting language. Much of its syntax is borrowed from C, Java and Perl with a couple of unique PHP-specific features thrown in. The goal of the language is to allow web developers to write dynamically generated pages quickly." This is generally a good definition of PHP. However, it does contain a lot of terms you may not be used to. Another way to think of PHP is a powerful, behind the scenes scripting language that your visitors won't see! PHP - What's it do? It is also helpful to think of PHP in terms of what it can do for you. PHP will allow you to: - Reduce the time to create large websites. - Create a customized user experience for visitors based on information that you have gathered from them. - Open up thousands of possibilities for online tools. Check out PHP - HotScripts for examples of the great things that are possible with PHP - Allow creation of shopping carts for e-commerce websites.

PHP Syntax Before we talk about PHP's syntax, let us first define what syntax is referring to. Syntax - The rules that must be followed to write properly structured code. PHP's syntax and semantics are similar to most other programming languages (C, Java, Perl) with the addition that all PHP code is contained with a tag, of sorts. All PHP code must be contained within the following... PHP Code <?php ?> or the shorthand PHP tag that requires shorthand support to be enabled on your server... <? ?>

How to Save PHP Pages If you have PHP inserted into your HTML and want the web browser to interpret it correctly, then you must save the file with a .php extension, instead of the standard .html extension. So be sure to check that you are saving your files correctly. PHP Code <html> <head> <title>My First PHP Page</title> </head> <body> <?php echo "Hello World!"; ?> </body> </html> Display Hello World!

White Space As with HTML, whitespace is ignored between PHP statements. This means it is OK to have one line of PHP code, then 20 lines of blank space before the next line of PHP code. You can also press tab to indent your code . PHP Code <html> <head> <title>My First PHP Page</title> </head> <body> <?php echo "Hello World!"; echo "Hello World!"; ?> </body> </html> Display Hello World!Hello World!

PHP Variables A variable is a means of storing a value, such as text string "Hello World!" or the integer value 4. A variable can then be reused throughout your code, instead of having to type out the actual value over and over again. In PHP you define a variable with the following form: - $variable_name = Value; If you forget that dollar sign at the beginning, it will not work. This is a common mistake for new PHP programmers! PHP Variable Naming Conventions There are a few rules that you need to follow when choosing a name for your PHP variables. - PHP variables must start with a letter or underscore "_". - PHP variables may only be comprised of alphanumeric characters and underscores. a-z, A-Z, 0-9, or - Variables with more than one word should be separated with underscores. $my_variable - Variables with more than one word can also be distinguished with capitalization. $myVariable

PHP Echo As you saw in the previous lesson, the PHP function echo is a means of outputting text to the web browser. Throughout your PHP career you will be using the echo function more than any other. So let's give it a solid perusal! Outputting a String To output a string, like we have done in previous lessons, use the PHP echo function. You can place either a string variable or you can use quotes, like we do below, to create a string that the echo function will output. PHP Code <?php $myString = "Hello!"; echo $myString; echo "<h5>I love using PHP!</h5>"; ?>

Display Hello! I love using PHP! Careful When Echoing Quotes! It is pretty cool that you can output HTML with PHP. However, you must be careful when using HTML code or any other string that includes quotes! The echo function uses quotes to define the beginning and end of the string, so you must use one of the following tactics if your string contains quotations: Don't use quotes inside your string Escape your quotes that are within the string with a slash. To escape a quote just place a slash directly before the quotation mark, i.e. \" Use single quotes (apostrophes) for quotes inside your string. See our example below for the right and wrong use of the echo function: PHP Code

<?php // This won't work because of the quotes around specialH5! echo "<h5 class="specialH5">I love using PHP!</h5>"; // OK because we escaped the quotes! echo "<h5 class=\"specialH5\">I love using PHP!</h5>"; // OK because we used an apostrophe ' echo "<h5 class='specialH5'>I love using PHP!</h5>"; ?> PHP Strings In the last lesson, PHP Echo, we used strings a bit, but didn't talk about them in depth. Throughout your PHP career you will be using strings a great deal, so it is important to have a basic understanding of PHP strings. PHP - String Creation Before you can use a string you have to create it! A string can be used directly in a function or it can be stored in a variable.

MySQL Introduction MySQL is currently the most popular open source database server in existence. On top of that, it is very commonly used in conjunction with PHP scripts to create powerful and dynamic server-side applications. What is a database? A database is a structure that comes in two flavors: a flat database and a relational database. A relational database is much more oriented to the human mind and is often preferred over the gabble-de-gook flat database that are just stored on hard drives like a text file. MySQL is a relational database. Why use a Database? Databases are most useful when it comes to storing information that fits into logical categories. For example, say that you wanted to store information of all the employees in a company. With a database you can group different parts of your business into separate tables to help store your information logically.

mysql connect Before you can do anything with MySQL in PHP you must first establish a connection to your web host's MySQL database. This is done with the MySQL connect function. mysql localhost PHP & MySQL Code: <?php mysql_connect("localhost", "admin", "1admin") or die(mysql_error()); echo "Connected to MySQL<br />"; ?> Display: Connected to MySQ Choosing the working Database After establishing a MySQL connection with the code above, you then need to choose which

database you will be using with this connection. This is done with the mysql_select_db function. MySQL Tables A MySQL table is completely different than the normal table that you eat dinner on. In MySQL and other database systems, the goal is to store information in an orderly fashion. PHP & MySQL Code: <?php // Make a MySQL Connection mysql_connect("localhost", "admin", "1admin") or die(mysql_error()); mysql_select_db("test") or die(mysql_error()); // Insert a row of information into the table "example" mysql_query("INSERT INTO example (name, age) VALUES('Timmy Mellowman', '23' ) ") or die(mysql_error()); mysql_query("INSERT INTO example

(name, age) VALUES('Sandy Smith', '21' ) ") or die(mysql_error()); mysql_query("INSERT INTO example (name, age) VALUES('Bobby Wallace', '15' ) ") or die(mysql_error()); echo "Data Inserted!"; ?> Display: Data Inserted! mysql_fetch_array: why use it? Do you know what is returned when you used the mysql_query function to query a MySQL database? It isn't something you can directly manipulate, that is for sure. Here is a sample SELECT query of a table we created in the MySQL Create Table lesson. PHP and MySQL Code: <?php $result = mysql_query("SELECT * FROM example"); ?>

The value that mysql_query returns and stores into $result is a special type of data, it is a MySQL Resource. Additional PHP functions are required to extract the data from this Resource. MySQL Delete Maintenance is a very common task that is necessary for keeping MySQL tables current. From time to time, you may even need to delete items from your database. Some potential reasons for deleting a record from MySQL include when: someone deletes a post from a forum, an employee leaves a company, or you're trying to destroy your records before the federalies come! mysql delete example The DELETE query is very similar to the UPDATE Query in the previous lesson. We need to choose a table, tell MySQL to perform the deletion, and provide the requirements that a record must have for it to be deleted.

PHP & MySQL Code:


<?php // Connect to MySQL // Delete Bobby from the "example" MySQL table mysql_query("DELETE FROM example WHERE age='15'") or die(mysql_error()); ?> It is important to note that this query would have deleted ALL records that had an age of 15. Since Bobby was the only 15 year old this was not a problem. MySQL Delete Tips Before performing a large delete on a database, be sure to back up the table/database in case your script takes off a little more than desired. Test your delete queries before even thinking about using them on your table. As long as you take caution when using this powerful query you should not run into any problems.

S-ar putea să vă placă și