Les Basiques - Web Développement HTML5, CSS3, JS and PHP

1. <Hmidi Hamdi>

2. Hmidi Hamdi
Web & Mobile Developer
Software Engineering @ ISSATSo
Founder & Member @ IGC
JSA @ JCertif Tunisia

3. Agenda
- Basic Notations(URL , WWW , HTTP , Web ...)
- Static and dynamic Web sites
- HTML & CSS & JS Basics
- Client/Server Architecture and PHP & MYSQL Basics
- Git basics and TeamWork agil methods (Scrum)

4. IGC Projects
2015-2016

10. Basic Notations

11. What is Internet ?
The Internet is essentially a global
network of computing resources.
You can think of the Internet as a
physical collection of routers and
circuits as a set of shared
resources.

12. Internet Based-Services
● Email − A fast, easy, and inexpensive way to communicate with other Internet
users around the world.
● Telnet − Allows a user to log into a remote computer as though it were a local
system.
● FTP − Allows a user to transfer virtually every kind of file that can be stored on a
computer from one Internet-connected computer to another.
● UseNet news − A distributed bulletin board that offers a combination news and
discussion service on thousands of topics.
● World Wide Web (WWW) − A hypertext interface to Internet information
resources.

13. WWW (World Wide Web)
A technical definition of the World Wide
Web is − All the resources and users on
the Internet that are using the Hypertext
Transfer Protocol (HTTP).

14. HTTP
HTTP stands for Hypertext Transfer Protocol. This is the protocol
being used to transfer hypertext documents that makes the World
Wide Web possible.
A standard web address such as Yahoo.com is called a URL and here
the prefix http indicates its protocol.

15. URL
URL stands for Uniform Resource Locator, and is
used to specify addresses on the World Wide Web.
A URL is the fundamental network identification for
any resource connected to the web (e.g., hypertext
pages, images, and sound files).

16. What is Website ?
It is a collection of various pages written in HTML
markup language. Similarly, there are millions of
websites available on the web.

17. What is Web Server ?
Every Website sits on a computer known as a Web server. This
server is always connected to the internet. Every Web server that is
connected to the Internet is given a unique address made up of a
series of four numbers between 0 and 256 separated by periods. For
example, 68.178.157.132 or 68.122.35.127.

18. What is Web Browser ?
Web Browsers are software installed on
your PC. To access the Web you need a
web browsers, such as Netscape
Navigator, Microsoft Internet Explorer or
Mozilla Firefox.

19. What is SMTP Server ?
SMTP stands for Simple Mail Transfer Protocol
Server. This server takes care of delivering emails
from one server to another server. When you send
an email to an email address, it is delivered to its
recipient by a SMTP Server.

20. What is ISP ?
ISP stands for Internet Service Provider.
They are the companies who provide you
service in terms of internet connection to
connect to the internet.

21. What is HTML ?
HTML stands for Hyper Text Markup Language. This is the language
in which we write web pages for any Website. Even the page you are
reading right now is written in HTML.
This is a subset of Standard Generalized Mark-Up Language (SGML)
for electronic publishing, the specific standard used for the World
Wide Web.

22. What is DNS ?
DNS stands for Domain Name System. When someone types in your
domain name, www.example.com, your browser will ask the Domain
Name System to find the IP that hosts your site. When you register
your domain name, your IP address should be put in a DNS along
with your domain name. Without doing it your domain name will not
be functioning properly.

23. What is W3C ?
W3C stands for World Wide Web Consortium which is an
international consortium of companies involved with the Internet and
the Web.
The W3C was founded in 1994 by Tim Berners-Lee, the original
architect of the World Wide Web. The organization's purpose is to
develop open standards so that the Web evolves in a single direction
rather than being splintered among competing factions. The W3C is
the chief standards body for HTTP and HTML.

24. Web Devloper and Web Designer
A Web Designer
• Designs the look and feel of a website (creative side of
website)
• Decides the layout, fonts, color, images and overall
branding
• Creates the visual mock-up of the website
• Rarely does the development of a website!
• A Right-brained (Creative) Person
A Web Developer
• Brings the website mock-up to life on the Internet
(development side of website)
• Develops the website and hosts on a web server
• Has Web Development Skills: HTML, CSS, JavaScript,
PHP, Perl, Python, Java, Ruby
• A Left-brained (Logical) Person

25. FrontEnd and BackEnd
Front End Web Development
• Defined components on the page with HTML
• Make them look pleasing with CSS
• Enable interactivity with JavaScript
• Enhance productivity with use of frameworks
Back End Web Development
• Create the page components and content dynamically on
the web server
• Send the HTML + CSS + JavaScript to web browser
(used by a human user)
• Generate pages by programming in Java, JavaScript,
PHP, Perl, Python, Ruby
• Aim to achieve fast response times to end users

26. Static Web HTML5, CSS3
and JavaScript

27. Static Web

28. Overview
HTML
• Hypertext Markup Language
• Structure of Page
JavaScript
• Interactivity with User
• Dynamic Updates in a Web Page
CSS
• Cascading Style Sheets
• Presentation/Styling

29. Hello World !
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

30. HTML Elements
HTML elements are written with a start tag, with an end tag, with the content in between:
<tagname>content</tagname>

31. HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
<tagname attName=”AttValue”>content</tagname>

32. HTML Headings
HTML headings are defined with the <h1> to <h6> tags:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

33. HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

34. HTML Links
HTML links are defined with the <a> tag:
<a href="http://www.w3schools.com">
This is a link
</a>

35. HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:
<img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">

36. The HTML Style Attribute
The HTML style attribute has the following syntax:
style="property:value"
The property is a CSS property. The value is a CSS value.
Use
background-color for background
color
Use
color for text colors
Use
font-fam
ily
for text fonts
Use
font-size
for text sizes
Use
text-align
for text alignm
ent

37. HTML Formatting Elements
<p><strong>This text is strong</strong>.</p>
<p><i>This text is italic</i>.</p>
<p><em>This text is emphasized</em>.</p>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is _subscripted text.</p>
<p>This is ^{superscripted} text.</p>

38. CSS3
CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
● Inline - using a style attribute in HTML elements
● Internal - using a <style> element in the HTML <head> section
● External - using one or more external CSS files

39. Why Using CSS?
CSS is used to define styles for your web pages,
including the design, layout and variations in
display for different devices and screen sizes.

40. Css Syntax

41. Css Comments
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */

42. Css Selectors
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and
more.

43. Element Selector
p {
text-align: center;
color: red;
}

44. ID Selector
#ElementID {
text-align: center;
color: red;
}

45. Class Selector
.ElementClass {
text-align: center;
color: red;
}

46. CSS3 Features !
- New CSS Selectors
- 2D Transform
- Animations

47. Not a Web Designer

48. Use Bootstrap

49. JavaScript
- Script Language
- Interpreted by Browser
- Orientée Objet
- DOM manipulation
- Dynamic UI
- Used in Servers (NodeJS)

50. What JavaScript can do with DOM?
- Change an HTML Element
- Change an attribute of an HTML Element
- Change the CSS style of an HTML Element
- Remove an existing HTML element or its attributes
- Add new a HTML Element or a new attribute to an Element
- React to an event associated with an HTML Element
- Create a new event listener and associate with an HTML Element

51. Why JavaScript
- It's pretty easy to learn. Trust me!
- Libraries! Javascript has libraries for everything. Literally. You can build
a complete mobile website in a day using jQuery mobile.
- Speed: Javascript is fast. And client side. Reduces load on server.
- Javascript can also be used to provide offline functionality.
- JSON started with Javascript! So did XML!
- Ajax: Every web developer knows and loves Ajax. No point to be made
on this.

52. Let’s Dive in

53. Dynamic Web

54. WAMP/LAMP Stack

56. PHP Language
PHP is a server scripting language, and a powerful
tool for making dynamic and interactive Web
pages.
PHP is a widely-used, free, and efficient alternative
to competitors such as Microsoft's ASP, NodeJS
and JEE.

57. Hello world
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>

58. Variables
In PHP, a variable starts with the $ sign, followed by the name of the variable:
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>

59. Let’s Hack

60. Let’s Hack

61. Database Story

62. Database Notations

63. MySql

64. PHP and Mysql !!

65. mysql, mysqli and PDO
Connectors

66. Connect Example
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>

67. Fetch Data
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password,
$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn-
>connect_error);
}
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row
["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>

68. Insert Data
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username,
$password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn-
>connect_error);
}
$sql = "INSERT INTO MyGuests (firstname,
lastname, email)
VALUES ('John', 'Doe', 'john@example.com')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn-
>error;
}
$conn->close();
?>

69. Update Data
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = mysqli_connect($servername,
$username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " .
mysqli_connect_error());
}
$sql = "UPDATE MyGuests SET lastname='Doe'
WHERE id=2";
if (mysqli_query($conn, $sql)) {
echo "Record updated successfully";
} else {
echo "Error updating record: " .
mysqli_error($conn);
}
mysqli_close($conn);
?>

70. Delete Data
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username,
$password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn-
>connect_error);
}
// sql to delete a record
$sql = "DELETE FROM MyGuests WHERE id=3";
if ($conn->query($sql) === TRUE) {
echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn-
>error;
}
$conn->close();
?>

71. Q/A

72. Thank You !!!