SlideShare a Scribd company logo
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 simple
JagadishBabuParri
 
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
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
Michael Anthony
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
Strongback Consulting
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
imdurgesh
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
Jeff Cohan
 
Technical stream presentation
Technical stream presentationTechnical stream presentation
Technical stream presentation
Dynistics
 
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
 
No gEEk? No Problem!
No gEEk? No Problem!No gEEk? No Problem!
No gEEk? No Problem!
carolinecblaker
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
Introduction to whats new in css3
Introduction to whats new in css3Introduction to whats new in css3
Introduction to whats new in css3
Usman 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.ppt
TusharTikia
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
William Myers
 
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 Themes
Michelle Ames
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
 

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

BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdfBPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
MIGUELANGEL966976
 
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
awadeshbabu
 
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
obonagu
 
spirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptxspirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptx
Madan Karki
 
Understanding Inductive Bias in Machine Learning
Understanding Inductive Bias in Machine LearningUnderstanding Inductive Bias in Machine Learning
Understanding Inductive Bias in Machine Learning
SUTEJAS
 
Fundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptxFundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptx
manasideore6
 
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
thanhdowork
 
5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...
5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...
5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...
ihlasbinance2003
 
Water billing management system project report.pdf
Water billing management system project report.pdfWater billing management system project report.pdf
Water billing management system project report.pdf
Kamal Acharya
 
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
Mukeshwaran Balu
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
Victor Morales
 
一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理
一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理
一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理
zwunae
 
Building Electrical System Design & Installation
Building Electrical System Design & InstallationBuilding Electrical System Design & Installation
Building Electrical System Design & Installation
symbo111
 
ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024
Rahul
 
basic-wireline-operations-course-mahmoud-f-radwan.pdf
basic-wireline-operations-course-mahmoud-f-radwan.pdfbasic-wireline-operations-course-mahmoud-f-radwan.pdf
basic-wireline-operations-course-mahmoud-f-radwan.pdf
NidhalKahouli2
 
一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理
一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理
一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理
ydteq
 
Ethernet Routing and switching chapter 1.ppt
Ethernet Routing and switching chapter 1.pptEthernet Routing and switching chapter 1.ppt
Ethernet Routing and switching chapter 1.ppt
azkamurat
 
digital fundamental by Thomas L.floydl.pdf
digital fundamental by Thomas L.floydl.pdfdigital fundamental by Thomas L.floydl.pdf
digital fundamental by Thomas L.floydl.pdf
drwaing
 
01-GPON Fundamental fttx ftth basic .pptx
01-GPON Fundamental fttx ftth basic .pptx01-GPON Fundamental fttx ftth basic .pptx
01-GPON Fundamental fttx ftth basic .pptx
benykoy2024
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
obonagu
 

Recently uploaded (20)

BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdfBPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
BPV-GUI-01-Guide-for-ASME-Review-Teams-(General)-10-10-2023.pdf
 
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
[JPP-1] - (JEE 3.0) - Kinematics 1D - 14th May..pdf
 
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
 
spirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptxspirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptx
 
Understanding Inductive Bias in Machine Learning
Understanding Inductive Bias in Machine LearningUnderstanding Inductive Bias in Machine Learning
Understanding Inductive Bias in Machine Learning
 
Fundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptxFundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptx
 
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
 
5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...
5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...
5214-1693458878915-Unit 6 2023 to 2024 academic year assignment (AutoRecovere...
 
Water billing management system project report.pdf
Water billing management system project report.pdfWater billing management system project report.pdf
Water billing management system project report.pdf
 
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
 
一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理
一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理
一比一原版(IIT毕业证)伊利诺伊理工大学毕业证成绩单专业办理
 
Building Electrical System Design & Installation
Building Electrical System Design & InstallationBuilding Electrical System Design & Installation
Building Electrical System Design & Installation
 
ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024
 
basic-wireline-operations-course-mahmoud-f-radwan.pdf
basic-wireline-operations-course-mahmoud-f-radwan.pdfbasic-wireline-operations-course-mahmoud-f-radwan.pdf
basic-wireline-operations-course-mahmoud-f-radwan.pdf
 
一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理
一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理
一比一原版(UofT毕业证)多伦多大学毕业证成绩单如何办理
 
Ethernet Routing and switching chapter 1.ppt
Ethernet Routing and switching chapter 1.pptEthernet Routing and switching chapter 1.ppt
Ethernet Routing and switching chapter 1.ppt
 
digital fundamental by Thomas L.floydl.pdf
digital fundamental by Thomas L.floydl.pdfdigital fundamental by Thomas L.floydl.pdf
digital fundamental by Thomas L.floydl.pdf
 
01-GPON Fundamental fttx ftth basic .pptx
01-GPON Fundamental fttx ftth basic .pptx01-GPON Fundamental fttx ftth basic .pptx
01-GPON Fundamental fttx ftth basic .pptx
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
 

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.