SlideShare a Scribd company logo
Web Development
A web page, broken down Web Browser Content/Data Client/Server Logic Styling Rules Website
A web page, broken down Web Browser IE/FF/Opera/Chrome HTML PHP/ASP/ JavaScript CSS Website
What is HTML HTML =  H yper T ext  M arkup  L anguage A markup language designed for the creation  of web pages and other information  viewable in a browser. The basic language used to write web pages. File extension: .htm, .html
<html> <head> <title> My first web page </title> </head> <body> <h1> Hello everyone </h1> </body> </html> The basic Tags
A tag is : Non-hierarchical keyword or term assigned to a piece of information  Document Tags :- The tags that are required for every HTML page we create. Tag usually goes with pair: an open tag (<b>) and an end tag (</b>) <  >  -  Opening Tag </ >  - Closing Tag HTML Tags
The element content is everything between the start and the end tag  ( <p>Hello</p> ) Some HTML elements have empty content( <br /> ) Most HTML elements can have attributes Its not case sensitive  - <p> means the same as <P> HTML Syntax
Open a text editor ( e.g. Notepad ) Create your HTML document Head - not displayed with body Body  Save the HTML (extension of .htm or .html) Display your HTML document in WWW browser window. Check your work and modify as necessary. Upload it on the Web. Steps for creating a HTML file
Working it out…
HTML <body> Tag The body element defines the document's body and contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
HTML <body> Tag (contd..) output
HTML <body> Tag (contd..) Attributes  bgcolor -  Specifies a background-color for a HTML page. <body bgcolor=&quot;#000000&quot;>  <body bgcolor=&quot;rgb(0,0,0)&quot;> <body bgcolor=&quot;black&quot;> background -  Specifies a background-image for a HTML page. <body background=&quot;clouds.gif&quot;>  <body background=&quot;http://www.abc.com/clouds.gif&quot;>
HTML <img> Tag The <img> tag embeds an image in an HTML page. The <img> tag has attributes:  src , alt, height, width. output HTML code <img src=&quot;sachin.jpg&quot; alt=&quot;sachin&quot;  height = &quot;200&quot; width= &quot;200“>
HTML <p> Tag The <p> tag defines a paragraph.
HTML <li> Tag The <li> tag defines a list item.
HTML <a> Tag - Anchor The  <a> tag defines an anchor. Attribute for <A ...> HREF = &quot;URL&quot; HREF indicates the URL being linked to.  A Hypertext link < a href=“http://www.google.com ”>Google</a> Output:  Google A Email link <a href=“mailto:sandeep@gmail.com”>Email me</a> Output:  Email me
HTML <pre> Tag The <pre> tag defines preformatted text. Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks .
HTML <font> Tag The <font> tag specifies the font face, font size, and font color of text.
HTML <table> Tag The <table> tag defines an HTML table. A simple HTML table consists of the table element and one or more tr, th, and td elements. Attribute Values Specifies the alignment of a table align Specifies the space between cells cellspacing Specifies the space between the cell wall and the cell content cellpadding Specifies the width of a table width Specifies the width of the borders around a table border Description Value
HTML <table> example
HTML <form> Tag A form is an area that can contain form elements . Commonly used form elements includes: Text fields Radio buttons Checkboxes List Boxes Submit buttons
HTML <input> Tag Attribute Values Defines a one-line input field that a user can enter text into. Default width is 20 characters text Defines a submit button. A submit button sends form data to a server submit Defines a reset button. A reset button resets all form fields to their initial values reset Defines a radio button radio Defines a password field. The characters in this field are masked password Defines a checkbox checkbox Defines a clickable button  button Description Value
HTML <input> Tag Text Input Fields . Used when you want the user to type letters, number, etc.
HTML <input> Tag contd… Submit and Reset button .
HTML <input> Tag contd… Checkboxes and Radio Button .
HTML <select> Tag The <select> tag is used to create a select list (drop-down list)
HTML <marquee> Tag Hi there! Are you guys having fun learning HTML .
HTML Header Tags <h1> defines the largest heading and <h6> defines the smallest heading.
 
What is CSS CSS =  C ascading  S tyle  S heets CSS is a way to style HTML. Whereas the HTML is  the content, the style sheet is the presentation of  that document.
Selector   Property  Value   p  {  color:  red ; } The property is followed by a colon (:) and the value is followed by a semicolon(;) A Style
Applying CSS There are three ways to apply CSS to HTML. Inline Affects only the element applied to. Internal or Embedded Affects only the elements in a single file. External Linked to an unlimited number of files.
Applying CSS (Inline) <p style=&quot;color: red&quot;>Hello Pailan !!</p>
Applying CSS (Internal) <style type=&quot;text/css&quot;> body { font-family: Tahoma, Arial, sans-serif; ... } </style>
Applying CSS (External) <link rel= &quot; stylesheet &quot;  type= &quot; text/css &quot;  href= &quot; web.css &quot;  />
Inline Style Sheets Inline styles are applied straight into the HTML tags using the style attribute.
Internal Style Sheets Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.
External Style Sheets Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.
CSS class example
 
What is JavaScript ? A scripting language that works with HTML to enhance web pages and make them more interactive.  Runs in a Web browser (client-side). Embedded in HTML files and can manipulate the HTML itself.
Why use JavaScript ? To add dynamic function to your HTML. JavaScript does things that HTML can’t—like logic. You can change HTML on the fly. JavaScript can validate the data the user enters into the form, before it is sent to your Web Application.
Add JavaScript to HTML In the HTML page itself: <html> <head> <script language=“javascript”> // JavaScript code </script> </head> As a file, linked from the HTML Page <head> <script language=“javascript” src=“ script.js ”> </script> </head>
JavaScript examples
JavaScript examples Image Zoom Image Menu Shutter Menu Tabs Contact Form Validation
Questions ?
Thank You ! SANDEEP BAJORIA Email :   [email_address] O:  (033) 6522 9071   M :   98309 36993 http://www.brainwarebaguiati.blogspot.com

More Related Content

What's hot (20)

PPTX
Front end web development
viveksewa
 
PPTX
Html, CSS & Web Designing
Leslie Steele
 
PPT
Html presentation
Amber Bhaumik
 
PPTX
Web Development
Lena Petsenchuk
 
PDF
Html / CSS Presentation
Shawn Calvert
 
PPT
CSS Basics
WordPress Memphis
 
PPTX
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
PPT
Html Ppt
vijayanit
 
PDF
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
PPT
Presentation on HTML
satvirsandhu9
 
PPTX
HTML-(workshop)7557.pptx
Raja980775
 
PDF
Report file on Web technology(html5 and css3)
PCG Solution
 
PPT
Introduction to CSS
Amit Tyagi
 
PPTX
Complete Lecture on Css presentation
Salman Memon
 
PPTX
JSON: The Basics
Jeff Fox
 
PDF
HTML CSS Basics
Mai Moustafa
 
PDF
Web Designing Presentation
RahulSuri30
 
PDF
Bootstrap
Jadson Santos
 
PDF
Web Development Presentation
TurnToTech
 
PPTX
Introduction to Web Development
Parvez Mahbub
 
Front end web development
viveksewa
 
Html, CSS & Web Designing
Leslie Steele
 
Html presentation
Amber Bhaumik
 
Web Development
Lena Petsenchuk
 
Html / CSS Presentation
Shawn Calvert
 
CSS Basics
WordPress Memphis
 
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Html Ppt
vijayanit
 
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Presentation on HTML
satvirsandhu9
 
HTML-(workshop)7557.pptx
Raja980775
 
Report file on Web technology(html5 and css3)
PCG Solution
 
Introduction to CSS
Amit Tyagi
 
Complete Lecture on Css presentation
Salman Memon
 
JSON: The Basics
Jeff Fox
 
HTML CSS Basics
Mai Moustafa
 
Web Designing Presentation
RahulSuri30
 
Bootstrap
Jadson Santos
 
Web Development Presentation
TurnToTech
 
Introduction to Web Development
Parvez Mahbub
 

Similar to Web Development using HTML & CSS (20)

PPTX
Web development Training in Ambala ! Batra Computer Centre
jatin batra
 
PPT
HTML & CSS.ppt
vaseemshaik21
 
PPT
html and css- 23091 3154 458-5d4341a0.ppt
ahoveida
 
PPTX
Web development (html)
AliNaqvi131
 
PPTX
gdsc-html-ppt.pptx
yuvakiran15
 
PPTX
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
johnmngoya1
 
PDF
web development.pdf
BagHarki
 
PPT
html
tumetr1
 
PDF
Chapter 2 Notes, MCQs, and QA (HTML and CSS).pdf
rehansayyadgolden07
 
PPTX
Lab1_HTML.pptx
IslamGhonimi1
 
DOCX
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
PPT
Unit 2 (html)
manochitra10
 
PPTX
Workshop 2 Slides.pptx
DaniyalSardar
 
PDF
Html & Html5 from scratch
Ahmad Al-ammar
 
PPTX
Html starting
Rahul Dihora
 
PDF
INTERNSHIP PROJECT PPT RAJ HZL.pdf
DineshKumar522328
 
PPT
Web Design.ppt
Dr.R.SUGANYA RENGARAJ
 
PPTX
html.pptx
JoelPimentel16
 
PPS
Web Designing
VNIT-ACM Student Chapter
 
Web development Training in Ambala ! Batra Computer Centre
jatin batra
 
HTML & CSS.ppt
vaseemshaik21
 
html and css- 23091 3154 458-5d4341a0.ppt
ahoveida
 
Web development (html)
AliNaqvi131
 
gdsc-html-ppt.pptx
yuvakiran15
 
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
johnmngoya1
 
web development.pdf
BagHarki
 
html
tumetr1
 
Chapter 2 Notes, MCQs, and QA (HTML and CSS).pdf
rehansayyadgolden07
 
Lab1_HTML.pptx
IslamGhonimi1
 
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
Unit 2 (html)
manochitra10
 
Workshop 2 Slides.pptx
DaniyalSardar
 
Html & Html5 from scratch
Ahmad Al-ammar
 
Html starting
Rahul Dihora
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
DineshKumar522328
 
Web Design.ppt
Dr.R.SUGANYA RENGARAJ
 
html.pptx
JoelPimentel16
 
Ad

Recently uploaded (20)

PDF
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
PPTX
Wondershare Filmora Crack Free Download 2025
josanj305
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
PDF
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
PDF
Quantum Threats Are Closer Than You Think – Act Now to Stay Secure
WSO2
 
PDF
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
PDF
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
PDF
FME in Overdrive: Unleashing the Power of Parallel Processing
Safe Software
 
PDF
How to Comply With Saudi Arabia’s National Cybersecurity Regulations.pdf
Bluechip Advanced Technologies
 
PDF
Next Generation AI: Anticipatory Intelligence, Forecasting Inflection Points ...
dleka294658677
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PPTX
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PDF
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
PDF
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
PPTX
Practical Applications of AI in Local Government
OnBoard
 
PDF
ICONIQ State of AI Report 2025 - The Builder's Playbook
Razin Mustafiz
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PPTX
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
Wondershare Filmora Crack Free Download 2025
josanj305
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
Quantum Threats Are Closer Than You Think – Act Now to Stay Secure
WSO2
 
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
FME in Overdrive: Unleashing the Power of Parallel Processing
Safe Software
 
How to Comply With Saudi Arabia’s National Cybersecurity Regulations.pdf
Bluechip Advanced Technologies
 
Next Generation AI: Anticipatory Intelligence, Forecasting Inflection Points ...
dleka294658677
 
Kubernetes - Architecture & Components.pdf
geethak285
 
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
Practical Applications of AI in Local Government
OnBoard
 
ICONIQ State of AI Report 2025 - The Builder's Playbook
Razin Mustafiz
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Ad

Web Development using HTML & CSS

  • 2. A web page, broken down Web Browser Content/Data Client/Server Logic Styling Rules Website
  • 3. A web page, broken down Web Browser IE/FF/Opera/Chrome HTML PHP/ASP/ JavaScript CSS Website
  • 4. What is HTML HTML = H yper T ext M arkup L anguage A markup language designed for the creation of web pages and other information viewable in a browser. The basic language used to write web pages. File extension: .htm, .html
  • 5. <html> <head> <title> My first web page </title> </head> <body> <h1> Hello everyone </h1> </body> </html> The basic Tags
  • 6. A tag is : Non-hierarchical keyword or term assigned to a piece of information Document Tags :- The tags that are required for every HTML page we create. Tag usually goes with pair: an open tag (<b>) and an end tag (</b>) < > - Opening Tag </ > - Closing Tag HTML Tags
  • 7. The element content is everything between the start and the end tag ( <p>Hello</p> ) Some HTML elements have empty content( <br /> ) Most HTML elements can have attributes Its not case sensitive - <p> means the same as <P> HTML Syntax
  • 8. Open a text editor ( e.g. Notepad ) Create your HTML document Head - not displayed with body Body Save the HTML (extension of .htm or .html) Display your HTML document in WWW browser window. Check your work and modify as necessary. Upload it on the Web. Steps for creating a HTML file
  • 10. HTML <body> Tag The body element defines the document's body and contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
  • 11. HTML <body> Tag (contd..) output
  • 12. HTML <body> Tag (contd..) Attributes bgcolor - Specifies a background-color for a HTML page. <body bgcolor=&quot;#000000&quot;> <body bgcolor=&quot;rgb(0,0,0)&quot;> <body bgcolor=&quot;black&quot;> background - Specifies a background-image for a HTML page. <body background=&quot;clouds.gif&quot;> <body background=&quot;http://www.abc.com/clouds.gif&quot;>
  • 13. HTML <img> Tag The <img> tag embeds an image in an HTML page. The <img> tag has attributes: src , alt, height, width. output HTML code <img src=&quot;sachin.jpg&quot; alt=&quot;sachin&quot; height = &quot;200&quot; width= &quot;200“>
  • 14. HTML <p> Tag The <p> tag defines a paragraph.
  • 15. HTML <li> Tag The <li> tag defines a list item.
  • 16. HTML <a> Tag - Anchor The <a> tag defines an anchor. Attribute for <A ...> HREF = &quot;URL&quot; HREF indicates the URL being linked to. A Hypertext link < a href=“http://www.google.com ”>Google</a> Output: Google A Email link <a href=“mailto:sandeep@gmail.com”>Email me</a> Output: Email me
  • 17. HTML <pre> Tag The <pre> tag defines preformatted text. Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks .
  • 18. HTML <font> Tag The <font> tag specifies the font face, font size, and font color of text.
  • 19. HTML <table> Tag The <table> tag defines an HTML table. A simple HTML table consists of the table element and one or more tr, th, and td elements. Attribute Values Specifies the alignment of a table align Specifies the space between cells cellspacing Specifies the space between the cell wall and the cell content cellpadding Specifies the width of a table width Specifies the width of the borders around a table border Description Value
  • 21. HTML <form> Tag A form is an area that can contain form elements . Commonly used form elements includes: Text fields Radio buttons Checkboxes List Boxes Submit buttons
  • 22. HTML <input> Tag Attribute Values Defines a one-line input field that a user can enter text into. Default width is 20 characters text Defines a submit button. A submit button sends form data to a server submit Defines a reset button. A reset button resets all form fields to their initial values reset Defines a radio button radio Defines a password field. The characters in this field are masked password Defines a checkbox checkbox Defines a clickable button button Description Value
  • 23. HTML <input> Tag Text Input Fields . Used when you want the user to type letters, number, etc.
  • 24. HTML <input> Tag contd… Submit and Reset button .
  • 25. HTML <input> Tag contd… Checkboxes and Radio Button .
  • 26. HTML <select> Tag The <select> tag is used to create a select list (drop-down list)
  • 27. HTML <marquee> Tag Hi there! Are you guys having fun learning HTML .
  • 28. HTML Header Tags <h1> defines the largest heading and <h6> defines the smallest heading.
  • 29.  
  • 30. What is CSS CSS = C ascading S tyle S heets CSS is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • 31. Selector  Property Value   p { color: red ; } The property is followed by a colon (:) and the value is followed by a semicolon(;) A Style
  • 32. Applying CSS There are three ways to apply CSS to HTML. Inline Affects only the element applied to. Internal or Embedded Affects only the elements in a single file. External Linked to an unlimited number of files.
  • 33. Applying CSS (Inline) <p style=&quot;color: red&quot;>Hello Pailan !!</p>
  • 34. Applying CSS (Internal) <style type=&quot;text/css&quot;> body { font-family: Tahoma, Arial, sans-serif; ... } </style>
  • 35. Applying CSS (External) <link rel= &quot; stylesheet &quot; type= &quot; text/css &quot; href= &quot; web.css &quot; />
  • 36. Inline Style Sheets Inline styles are applied straight into the HTML tags using the style attribute.
  • 37. Internal Style Sheets Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.
  • 38. External Style Sheets Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.
  • 40.  
  • 41. What is JavaScript ? A scripting language that works with HTML to enhance web pages and make them more interactive. Runs in a Web browser (client-side). Embedded in HTML files and can manipulate the HTML itself.
  • 42. Why use JavaScript ? To add dynamic function to your HTML. JavaScript does things that HTML can’t—like logic. You can change HTML on the fly. JavaScript can validate the data the user enters into the form, before it is sent to your Web Application.
  • 43. Add JavaScript to HTML In the HTML page itself: <html> <head> <script language=“javascript”> // JavaScript code </script> </head> As a file, linked from the HTML Page <head> <script language=“javascript” src=“ script.js ”> </script> </head>
  • 45. JavaScript examples Image Zoom Image Menu Shutter Menu Tabs Contact Form Validation
  • 47. Thank You ! SANDEEP BAJORIA Email : [email_address] O: (033) 6522 9071 M : 98309 36993 http://www.brainwarebaguiati.blogspot.com