website development - part 1
Post on 24-Jan-2017
134 Views
Preview:
TRANSCRIPT
Web DevelopmentHTML5, CSS3 and PHP with MySQL
magumurap@gmail.com 2
Basic Concept
WWW – World Wide Web.
HTML – Hypertext Markup Language – The
Language of Web Pages on the World Wide Web.
HTML is a text formatting language.
URL – Uniform Resource Locator.
Browser – A software program which is used to
show web pages.
magumurap@gmail.com 3
Website Structure<!DOCTYPE html> <html> <head> <title>This is document title</title> </head> <body> <h1>This is a heading</h1> <p>Document content goes here.....</p> </body> </html>
magumurap@gmail.com 4
Front-End Designing Tags
• Meta tag’s
• Heading Tag (h1, h2….h6)
• Paragraph (<p>)
• Table(<table><tr><td>)
• Line Break (<br/>
• Image (<img src=“”>)
• Frame and I-frame Tag (frameset, iframe)
magumurap@gmail.com 5
Attributes and CommentsComment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability. Ex: <!-- Comments --
Attributes List:» Title Attributes» Style Attributes» Class Attributes
magumurap@gmail.com 6
Sample Layout using Basic HTML
<!DOCTYPE html> <html> <head> <title>Three Column Layout</title> </head> <body> <table width="100%" border="0"> <tr valign="top"> <td bgcolor="#aaa" width="20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#b5dcb3" height="200" width="60%"> Technical and Managerial Tutorials </td> <td bgcolor="#aaa" width="20%"> <b>Right Menu</b><br /> HTML<br />
PHP<br /> PERL... </td> </tr> <table> </body> </html>
O U T P U T:
magumurap@gmail.com 7
Advanced HTML<!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style="width:100%"> <div style="background-color:#b5dcb3; width:100%"> <h1>This is Web Page Main title</h1> </div> <div style="background-color:#aaa; height:200px;width:100px;float:left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#eee; height:200px;width:350px;float:left;"> <p>Technical and Managerial Tutorials</p> </div> <div
style="background-color:#aaa; height:200px;width:100px;float:right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#b5dcb3;clear:both"> <center> Copyright © 2007 Tutorialspoint.com </center> </div> </div> </body> </html>
magumurap@gmail.com 8
What is CSS?Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
Advantages of CSS
• CSS saves Time
• Pages load faster
• Easy maintenance
• Multiple Device
• Compatibility
• Global web standards
• Offline Browsing
• Platform Independence
magumurap@gmail.com 9
How to use CSSInline CSS - The style Attribute
<element style = "...style rules....">
Embedded CSS<style> p { color: #36CFFF; } h2 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }ul em { color: #000000; }</style>
• External CSS - The <link> Element<head> <link type = "text/css" href = "..." media = "..." /> </head>
magumurap@gmail.com 10
CSS @import rule
<style tyle="text/css"> <!– @import "mystyle.css"; or @import url("mystyle.css"); .......other CSS rules ..... --> </style>
magumurap@gmail.com 11
HTML Forms and Inputs• HTML forms are used to pass data to a server. A form
can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form. Only for internal circulation Page 8 of 14
• Input: An input element can 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.
magumurap@gmail.com 12
Ex: Forms and Inputs<html> <body> <form> Name: <input type="text" name="firstname" /><br /><br /> Password: <input type="password" name="pwd" /><br /><br /> <input type="radio" name="sex" value="male" />Male <input type="radio" name="sex" value="female" />Female<br /><br /> <input type="checkbox" name="vehicle"
value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car"
/> I have a car <br /><br /> <input type="submit“
value="Submit" /> </form> </body> </html> OUTPUT
magumurap@gmail.com 13
HTML5 TAG LIST• HTML-5-
tutorial• <!DOCTYPE>• <a>• <abbr>• <acronym> 2
• <address>• <applet> 3
• <area>• <article>• <aside>• <audio>• <b>• <base>• <basefont> 4
• <bdi>• <bdo>• <big> 4
• <blockquote>• <body>• <br>• <button>• <canvas>
• <caption>• <center> 4
• <cite>• <code>• <col>• <colgroup>• <command>• <datalist>• <dd>• <del>• <details>• <dfn>• <dir>• <div>• <dl>• <dt>• <em>• <embed>• <fieldset>• <figcaption>• <figure>• <font>• <footer>
• <form>• <frame>• <frameset>• <h1> - <h6>• <head>• <header>• <hgroup>• <hr>• <html>• <i>• <iframe>• <img>• <input>• <ins>• <kbd>• <keygen>• <label>• <legend>• <li>• <link>• <map>• <mark>• <menu>
• <meta>• <meter>• <nav>• <noframes>• <noscript>• <object>• <ol>• <optgroup>• <option>• <output>• <p>• <param>• <pre>• <progress>• <q>• <rp>• <rt>• <ruby>• <s>• <samp>• <script>• <section>• <select>
• <small>• <source>• <span>• <strike> 4
• <strong>• <style>• <sub>• <summary>• <sup>• <table>• <tbody>• <td>• <textarea>• <tfoot>• <th>• <thead>• <time>• <title>• <tr>• <track>• <tt>• <u>• <ul>
• <var>• <video> 5
• <wbr>
magumurap@gmail.com 14
HTML5 (Example1)• <!doctype html>• <html>• <head>• <meta charset="utf-8">• <title>Very Basic
Document</title>• <!--[if IE]><script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
• <style>header, footer, section, aside, nav, article {display: block;}</style>
• </head>• <body>• <nav>• <ul>• <li><a
href="#">Home</a></li>• <li><a
href="#">About</a></li>• <li><a
href="#">Products</a></li>• <li><a href="#">Contact
Us</a></li>• </ul>• </nav>• <header>• <h1><a href="#">Very Basic
Document</a></h1>• <h2>A tag line might go
here</h2>• </header>• <section>• <article>• <h3><a href="#">First Article
Title</a></h3>• <img src="images/flower.jpg"
alt="flower">• <p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Integer nec odio. </p>
• </article>• <article>• <h3><a href="#">Second
Article Title</a></h3>• <img src="images/tree.jpg"
alt="tree">• <p>Praesent libero. Sed
cursus ante dapibus diam.</p>
• </article>• </section>• <aside>• <h4>Connect With Us</h4>• <ul>• <li><a
href="#">Twitter</a></li>• <li><a
href="#">Facebook</a></li>• </ul>• </aside>• <footer>• <p>All rights reserved.</p>• </footer>• </body>• </html>
magumurap@gmail.com 15
The <canvas> element•<canvas> element is one of the most important aspects of HTML5 as it facilitates the production of graphs, interactive games, paint applications, and other graphics on the fly without requiring external plug-ins such as Adobe Flash.
•<!DOCTYPE HTML>•<html>•<body>
•<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">•Your browser does not support the canvas element.•</canvas>•<script type="text/javascript">•var c=document.getElementById("myCanvas");
•var cxt=c.getContext("2d");•var grd=cxt.createLinearGradient(0,0,175,50);•grd.addColorStop(0,"#FF0000");•grd.addColorStop(1,"#00FF00");•cxt.fillStyle=grd;•cxt.fillRect(0,0,175,50);•</script>•</body>•</html>
magumurap@gmail.com 16
<audio> and <video>• <audio controls="controls">• <source src="song.ogg" type="audio/ogg" />• <source src="song.mp3" type="audio/mpeg" />• Your browser does not support the audio element.• </audio>
• <video width="320" height="240" controls="controls">• <source src="movie.mp4" type="video/mp4" />• <source src="movie.ogg" type="video/ogg" />• <source src="movie.webm" type="video/webm" />• Your browser does not support the video tag.• </video>
magumurap@gmail.com 17
Cascading Style Sheets 3
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
magumurap@gmail.com 18
SQLWhat is SQL? • • SQL stands for Structured Query Language • • SQL lets you access and manipulate databases • • SQL is an ANSI (American National Standards Institute)
standard
Using SQL in Your Web Application • • An RDBMS database program (i.e. MS Access, SQL Server,
MySQL) • • A server-side scripting language, like PHP or ASP • • SQL • • HTML / CSS
magumurap@gmail.com 19
SQL QueriesData Definition Language (DDL)
• • CREATE DATABASE - creates a new database
• • ALTER DATABASE - modifies a database
• • CREATE TABLE - creates a new table
• • ALTER TABLE - modifies a table
• • DROP TABLE - deletes a table
• • CREATE INDEX - creates an index (search key)
• • DROP INDEX - deletes an index
magumurap@gmail.com 20
SQL QueriesData Manipulation Language (DDL)
• • SELECT - extracts data from a database
• • UPDATE - updates data in a database
• • DELETE - deletes data from a database
• • INSERT INTO - inserts new data into a database
magumurap@gmail.com 21
DATABASE, TABLE • CREATE DATABASE database_name
• CREATE TABLE table_name ( column_name1 data_type, column_name2 data_type, ....... )
• INSERT INTO table_name (column1, column2,...) VALUES (value1, value2,....)
• UPDATE table_name SET column_name = new_value WHERE column_name = some_value
• DELETE FROM table_name WHERE column_name = some_value
magumurap@gmail.com 22
PHPThe PHP Hypertext Preprocessor (PHP) is a
programming language that allows web developers to create dynamic content that interacts with databases. PHP is basically used for developing web based software applications.
<html> <head> <title>Online PHP Script Execution</title> </head> <body> <?php echo "<h1>Hello, PHP!</h1>"; ?> </body> </html>
magumurap@gmail.com 23
What is PHP?– PHP is an acronym for "PHP: Hypertext
Preprocessor"– PHP is a widely-used, open source
scripting language– PHP scripts are executed on the server– PHP is free to download and use
What is a PHP File?• PHP files can contain text, HTML, CSS,
JavaScript, and PHP code• PHP code are executed on the server, and the
result is returned to the browser as plain HTML
• PHP files have extension ".php“
What Can PHP Do?• PHP can generate dynamic page content• PHP can create, open, read, write, delete, and
close files on the server• PHP can collect form data• PHP can send and receive cookies• PHP can add, delete, modify data in your
database
• PHP can be used to control user-access• PHP can encrypt data• With PHP you are not limited to output HTML.
You can output images, PDF files, and even Flash movies. You can also output any text, such as XHTML and XML.
Why PHP?• PHP runs on various platforms (Windows,
Linux, Unix, Mac OS X, etc.)• PHP is compatible with almost all servers
used today (Apache, IIS, etc.)• PHP supports a wide range of databases• PHP is free. • PHP is easy to learn and runs efficiently on
the server side
magumurap@gmail.com 24
Characteristics of PHP
Simplicity
Efficiency
Security
Flexibility
Familiarity
magumurap@gmail.com 25
Commenting PHP Code<?
# This is a comment, and # This is the second line of the comment // This is a comment too. Each style comments only
/* This is a comment with multiline Author : Mohammad Mohtashim Purpose: Multiline Comments Demo Subject: PHP */
print "An example with single line comments";
?>
magumurap@gmail.com 26
What Do I Need?
• Find a web host with PHP and MySQL support
• Install a web server on your own PC, and then
install PHP and MySQL
magumurap@gmail.com 27
Example1<!DOCTYPE html>
<html><body>
<?php// This is a single-line comment
# This is also a single-line comment
/*This is a multiple-lines comment blockthat spans over multiplelines*/
// You can also use comments to leave out parts of a code line$x = 5 /* + 15 */ + 5;echo $x;?>
</body></html>
magumurap@gmail.com 28
PHP & MySQL
<?php
$dbhost = 'localhost:3036';
$dbuser = 'guest';
$dbpass = 'guest123';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{ die('Could not connect: ' . mysql_error()); }
echo 'Connected successfully'; mysql_close($conn); ?>
magumurap@gmail.com 29
PHP - Form Introduction
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
magumurap@gmail.com 30
Welcome.php <html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>Your email address is: <?php echo $_POST["email"]; ?>
</body></html>
magumurap@gmail.com 31
magumurap@gmail.com 32
top related