Introduction to Web Development and basics of HTML, CSS and javascript

Basics of web Development, basics of HTML, CSS and javascript

1. Program: BCA Semester:5 th Subject Name: BED Faculty Name: Dr. Jaspreet Singh Bajaj Email: [email protected] By: Dr. Jaspreet Singh Bajaj 1

2. Topic Covered Introduction to Web Development Client Server Architecture Prerequisites for Web Development Introduction to WWW Static and Dynamic webpages Introduction to HTML By: Dr. Jaspreet Singh Bajaj 2

3. Introduction to Web Development Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. A web developer is a person who can develop both client and server software. HTML and CSS can be used to develop the web design of the web page. The behaviour of the webpage can be controlled by client side scripting language e.g. JavaScript, jQuery A server which response to the user query back to specific user. Languages who used for server side scripting language are e.g PHP, ASP, Python, or Node.JS By: Dr. Jaspreet Singh Bajaj 3

4. Client Server Architecture By: Dr. Jaspreet Singh Bajaj 4 User1 User 2 User 3 Server Client having Browser Server respond to user as per query generated (User Specific) Front End Back End

5. Basics of Back end Development By: Dr. Jaspreet Singh Bajaj 5

6. Prerequisites for this course Minimum Hardware requirements AMD Ryzen 3 or intel i3 or higher Processor 8GB or higher ram or higher 250 GB Hard Disk (SSD or HDD) Software Requirements OS: Windows/Mac/Linux Based(Ubuntu) Web browser: Chrome/Mozilla/MS edge etc Editor: Microsoft Visual Studio Code, Notepad++, Sublime etc. By: Dr. Jaspreet Singh Bajaj 6

7. Introduction to WWW World Wide Web is a collection of websites or web pages stored in web servers and connected to local computers through the internet. These websites contain text pages, digital images, audios, videos, etc where the users can access the content of these sites from any part of the world over the internet using their devices. The first website which is created by Tim Berners-Lee in 1989 http://info.cern.ch/hypertext/WWW/TheProject.html The purpose of the website to share the documents for research. By: Dr. Jaspreet Singh Bajaj 7 HTML + CSS + JAVASCRIPT WEBPAGE =

8. Introduction to IP address An IP address is a unique address that identifies a device on the internet or a local network. IP stands for "Internet Protocol," which is the set of rules governing the format of data sent via the internet or local network. An IP address is a string of numbers separated by periods. IP addresses are expressed as a set of four numbers — an example address might be 192.158.1.38. Each number in the set can range from 0 to 255. So, the full IP addressing range goes from 0.0.0.0 to 255.255.255.255. By: Dr. Jaspreet Singh Bajaj 8

9. Introduction to DNS DNS (Domain Name System) is a network protocol that we use to find the IP addresses of hostnames. Computers use IP addresses but for us humans, it’s more convenient to use domain names and hostnames instead of IP addresses. DNS is distributed and hierarchical, there are thousands of DNS servers, but none of them has a complete database with all hostnames / domain names and IP addresses. There are 13 root name servers that have information for the generic top level domains like com, net, org, biz, edu or country specific domains like uk , nl , de, be, au, ca, and such. Take a look at the image below: By: Dr. Jaspreet Singh Bajaj 9

10. CONTD… By: Dr. Jaspreet Singh Bajaj 10

11. Introduction to URL URL stands for Uniform Resource Locator. A URL is nothing more than the address of a given unique resource on the Web. In theory, each valid URL points to a unique resource. By: Dr. Jaspreet Singh Bajaj 11

12. Static and dynamic websites By: Dr. Jaspreet Singh Bajaj 12 Static website is the basic type of website that is easy to create. You don't need the knowledge of web programming and database design to create a static website. Its web pages are coded in HTML. The codes are fixed for each page so the information contained in the page does not change and it looks like a printed page. Dynamic website is a collection of dynamic web pages whose content changes dynamically. It accesses content from a database. Therefore, when you alter or update the content of the database, the content of the website is also altered or updated. Dynamic website uses client-side scripting or server-side scripting, or both to generate dynamic content.

13. Introduction to HTML HTML  stands for HyperText Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages.  By: Dr. Jaspreet Singh Bajaj 13

14. Contd ….. Features of HTML: It is easy to learn and easy to use. It is platform independent. Images, video and audio can be added to a web page. Hypertext can be added to text. It is a markup language. Advantages: HTML is used to build a websites. It is supported by all browsers. It can be integrated with other languages like CSS, JavaScript etc. By: Dr. Jaspreet Singh Bajaj 14 Why learn HTML? It is a simple markup language. Its implementation is easy. It is used to create a website. Helps in developing fundamentals about web programming. Boost professional career. Disadvantages: HTML can create only static webpages so for dynamic web page other languages have to be used. Large amount of code has to be written to create a simple web page. Security feature is not good.

15. Standards of HTML HTML VERSION YEAR HTML 1.0 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML 5 2014 By: Dr. Jaspreet Singh Bajaj 15 Before start to create HTML, The current version used by all browser is HTML 5. But for the good programming technique start html code with <!DOCTYPE html> which inform the browser that HTML 5 is used. The extension of the file is *.htm or *.html. It is good approach to save the file first and then start to create the html page

16. By: Dr. Jaspreet Singh Bajaj 16

17. Introduction to CSS(Cascading Style sheet) The browser formats the HTML document based upon the information in the stylesheet. The browser access the stylesheets from the HTML document itself. There are 3 ways to add CSS styles in your document. Each of them can contain multiple properties: Inline styles Internal styles External styles By: Dr. Jaspreet Singh Bajaj 17

18. Introduction to JavaScript JavaScript is a lightweight, cross-platform and interpreted scripting language. It is well-known for the development of web pages. JavaScript can be used for Client-side developments as well as Server-side developments. JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of language elements like operators, control structures, and statements. By: Dr. Jaspreet Singh Bajaj 18

19. HTML vs CSS vs Javascript By: Dr. Jaspreet Singh Bajaj 19

20. Questions?????? Thank You By: Dr. Jaspreet Singh Bajaj 20