Top Banner
Web Development HTML5, CSS3 and PHP with MySQL
32

Website Development - Part 1

Jan 24, 2017

Download

Education

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Website Development - Part 1

Web DevelopmentHTML5, CSS3 and PHP with MySQL

Page 2: Website Development - Part 1

[email protected] 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.

Page 3: Website Development - Part 1

[email protected] 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>

Page 4: Website Development - Part 1

[email protected] 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)

Page 5: Website Development - Part 1

[email protected] 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

Page 6: Website Development - Part 1

[email protected] 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:

Page 7: Website Development - Part 1

[email protected] 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>

Page 8: Website Development - Part 1

[email protected] 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

Page 9: Website Development - Part 1

[email protected] 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>

Page 10: Website Development - Part 1

[email protected] 10

CSS @import rule

<style tyle="text/css"> <!– @import "mystyle.css"; or @import url("mystyle.css"); .......other CSS rules ..... --> </style>

Page 11: Website Development - Part 1

[email protected] 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.

Page 12: Website Development - Part 1

[email protected] 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

Page 13: Website Development - Part 1

[email protected] 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>

Page 14: Website Development - Part 1

[email protected] 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>

Page 15: Website Development - Part 1

[email protected] 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>

Page 16: Website Development - Part 1

[email protected] 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>

Page 17: Website Development - Part 1

[email protected] 17

Cascading Style Sheets 3

Selectors

Box Model

Backgrounds and Borders

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

Page 18: Website Development - Part 1

[email protected] 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

Page 19: Website Development - Part 1

[email protected] 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

Page 20: Website Development - Part 1

[email protected] 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

Page 21: Website Development - Part 1

[email protected] 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

Page 22: Website Development - Part 1

[email protected] 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>

Page 23: Website Development - Part 1

[email protected] 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

Page 24: Website Development - Part 1

[email protected] 24

Characteristics of PHP

Simplicity

Efficiency

Security

Flexibility

Familiarity

Page 25: Website Development - Part 1

[email protected] 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";

?>

Page 26: Website Development - Part 1

[email protected] 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

Page 27: Website Development - Part 1

[email protected] 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>

Page 28: Website Development - Part 1

[email protected] 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); ?>

Page 29: Website Development - Part 1

[email protected] 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>

Page 30: Website Development - Part 1

[email protected] 30

Welcome.php <html>

<body>

Welcome <?php echo $_POST["name"]; ?><br>Your email address is: <?php echo $_POST["email"]; ?>

</body></html>