SlideShare a Scribd company logo
1 of 32
Web Programming
Submitted to:
Mr. Nukhbat Ullah Khan
Team layout
Submitted By:
Mahmood Shahryar Barirah
Abdullah
Division of topic
01
02
03
05
04
Introduction of Div
What is Div and how we can use in our Projects
Basic Use of Div
Div is block element
What is Div Tag
The Div tag is multi-purpose – you can use it to do several things on a web page.
You'll mostly use it in web layouts and CSS art, but it's super flexible.
Ultimately, you'll almost always to use it to style whatever it contains or manipulate such things with JavaScript
1. Use div in Web Layouts
You'll primarily use the div tag to group similar content together so you can style it easily. A great example o
f this is using div to group different sections of a webpage together. You can put together the header, nav, s
ections, and footer of a page in an individual div tag so they can be styled together.
2. Use div in CSS Art
With the div tag, you can make various shapes and draw anything because it is easy to style.
How to make a square with the div tag
To make a square with div tag, you first need to define an empty div tag and attach a class attribute to it
in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it
.
Example of Div
With Html and CSS
Output
Front End Section
Html and Css
Front Section
This is the front end section:
CSS/HTML
Css and html code for front end section
Experience Section
Html and Css
Experience Section
Code output
Css / Html
Css and html code for experience section
Php myAdmin Configuration
By using Xammp
Xampp
By using Xampp :
Click on Start
Go to Admin Panel
Data base Panel
I have already done
If you want to create
new one
DATA
Colum names
Note
Colum names is Most important thing you
have to remember
Insertion Query
Signup Page
By putting information in signup page we store data in database
Html / Php
Html and Php code for connection with database
Update Query
Updation Query
Use for modify data from database through query
Update Query ?
 The UPDATE statement is used to change or modify the existing records in a database table. This statement is typically use
d in conjugation with the WHERE clause to apply the changes to only those records that matches specific criteria.
 The basic syntax of the UPDATE statement can be given with:
 Let's make a SQL query using the UPDATE statement and WHERE clause, after that we will execute this
query through passing it to the PHP mysqli_query() function to update the tables records. Consider the following
persons table inside the demo database
Example
Let us consider the following table “Persons” with four columns ‘ Id ‘, ‘ first_name ‘, ‘ lastna
me ‘ and ‘ Email ‘.
To update the record of the Persons whose ID is 201 from the ‘ team ‘ table, the followi
ng code can be used.
Updation Query
Before & After
Before After
Delete Query
Delete Query is used for delete data from DB
What is Delete Query
Delete Query
The DELETE query is used to delete records from a database table.
It is generally used along with the “Select” statement to delete only those records that
satisfy a specific condition.
Syntax :
Example
Let us consider the following table “Data” with four columns ‘ ID ‘
, ‘ FirstName ‘, ‘ LastName ‘ and ‘ Age ‘.
To delete the record of the person whose ID is 201 from the ‘ Data ‘ table, the followi
ng code can be used.
Php Code
Output
Output :
Table after updation –
Web technology presentation

More Related Content

Similar to Web technology presentation

Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simpleJagadishBabuParri
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4imdurgesh
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPressJeff Cohan
 
Technical stream presentation
Technical stream presentationTechnical stream presentation
Technical stream presentationDynistics
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAPJeanie Arnoco
 
Introduction to whats new in css3
Introduction to whats new in css3Introduction to whats new in css3
Introduction to whats new in css3Usman Mehmood
 
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 Evan Mullins
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptTusharTikia
 
Lesson 2 cs5
Lesson 2   cs5Lesson 2   cs5
Lesson 2 cs5dtelepos
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesMichelle Ames
 

Similar to Web technology presentation (20)

Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
 
Master page
Master pageMaster page
Master page
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
 
Technical stream presentation
Technical stream presentationTechnical stream presentation
Technical stream presentation
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
No gEEk? No Problem!
No gEEk? No Problem!No gEEk? No Problem!
No gEEk? No Problem!
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Introduction to whats new in css3
Introduction to whats new in css3Introduction to whats new in css3
Introduction to whats new in css3
 
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
 
Lesson 2 cs5
Lesson 2   cs5Lesson 2   cs5
Lesson 2 cs5
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 

Recently uploaded

Block diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.pptBlock diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.pptNANDHAKUMARA10
 
COST-EFFETIVE and Energy Efficient BUILDINGS ptx
COST-EFFETIVE  and Energy Efficient BUILDINGS ptxCOST-EFFETIVE  and Energy Efficient BUILDINGS ptx
COST-EFFETIVE and Energy Efficient BUILDINGS ptxJIT KUMAR GUPTA
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueBhangaleSonal
 
University management System project report..pdf
University management System project report..pdfUniversity management System project report..pdf
University management System project report..pdfKamal Acharya
 
Introduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaIntroduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaOmar Fathy
 
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Bookingdharasingh5698
 
A Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityA Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityMorshed Ahmed Rahath
 
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...soginsider
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering  Unit - I & II . pptThermal Engineering  Unit - I & II . ppt
Thermal Engineering Unit - I & II . pptDineshKumar4165
 
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its PerformanceUNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performancesivaprakash250
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfKamal Acharya
 
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoorTop Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoordharasingh5698
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxJuliansyahHarahap1
 
Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086anil_gaur
 

Recently uploaded (20)

Block diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.pptBlock diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.ppt
 
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024
 
COST-EFFETIVE and Energy Efficient BUILDINGS ptx
COST-EFFETIVE  and Energy Efficient BUILDINGS ptxCOST-EFFETIVE  and Energy Efficient BUILDINGS ptx
COST-EFFETIVE and Energy Efficient BUILDINGS ptx
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
 
University management System project report..pdf
University management System project report..pdfUniversity management System project report..pdf
University management System project report..pdf
 
Introduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaIntroduction to Serverless with AWS Lambda
Introduction to Serverless with AWS Lambda
 
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
 
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
 
A Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityA Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna Municipality
 
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
 
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering  Unit - I & II . pptThermal Engineering  Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
 
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
 
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its PerformanceUNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
 
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoorTop Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptx
 
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
 
Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086
 
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced LoadsFEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
 

Web technology presentation

  • 1.
  • 3. Team layout Submitted By: Mahmood Shahryar Barirah Abdullah
  • 5. Introduction of Div What is Div and how we can use in our Projects
  • 6. Basic Use of Div Div is block element What is Div Tag The Div tag is multi-purpose – you can use it to do several things on a web page. You'll mostly use it in web layouts and CSS art, but it's super flexible. Ultimately, you'll almost always to use it to style whatever it contains or manipulate such things with JavaScript 1. Use div in Web Layouts You'll primarily use the div tag to group similar content together so you can style it easily. A great example o f this is using div to group different sections of a webpage together. You can put together the header, nav, s ections, and footer of a page in an individual div tag so they can be styled together. 2. Use div in CSS Art With the div tag, you can make various shapes and draw anything because it is easy to style. How to make a square with the div tag To make a square with div tag, you first need to define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it .
  • 7. Example of Div With Html and CSS Output
  • 9. Front Section This is the front end section:
  • 10. CSS/HTML Css and html code for front end section
  • 13. Css / Html Css and html code for experience section
  • 15. Xampp By using Xampp : Click on Start Go to Admin Panel
  • 16.
  • 17. Data base Panel I have already done If you want to create new one
  • 18. DATA Colum names Note Colum names is Most important thing you have to remember
  • 20. Signup Page By putting information in signup page we store data in database
  • 21. Html / Php Html and Php code for connection with database
  • 23. Updation Query Use for modify data from database through query Update Query ?  The UPDATE statement is used to change or modify the existing records in a database table. This statement is typically use d in conjugation with the WHERE clause to apply the changes to only those records that matches specific criteria.  The basic syntax of the UPDATE statement can be given with:  Let's make a SQL query using the UPDATE statement and WHERE clause, after that we will execute this query through passing it to the PHP mysqli_query() function to update the tables records. Consider the following persons table inside the demo database
  • 24. Example Let us consider the following table “Persons” with four columns ‘ Id ‘, ‘ first_name ‘, ‘ lastna me ‘ and ‘ Email ‘. To update the record of the Persons whose ID is 201 from the ‘ team ‘ table, the followi ng code can be used.
  • 27. Delete Query Delete Query is used for delete data from DB
  • 28. What is Delete Query Delete Query The DELETE query is used to delete records from a database table. It is generally used along with the “Select” statement to delete only those records that satisfy a specific condition. Syntax :
  • 29. Example Let us consider the following table “Data” with four columns ‘ ID ‘ , ‘ FirstName ‘, ‘ LastName ‘ and ‘ Age ‘. To delete the record of the person whose ID is 201 from the ‘ Data ‘ table, the followi ng code can be used.