Web development it slideWeb development it slidemy web development slide-1.pptx

Web development it slide

1. SOKOTO STATE UNIVERSITY SOKOTO DEPARTMEMT OF COMPUTER SCIENCE FUNDAMENTALS OF WEB DEVELOPMENT BY ALIYU UMAR 19134160

2. INTRODUCTION Web Development is important because it enables businesses, organizations and individuals to establish an online presence and communicate with a global audience. It allows people to create websites, web applications and other digital platforms that can be accessed from anywhere, at any time, using a variety of devices.

3. FRONTEND DEVELOPMENT Front-end development primarily focuses on user experience. Using the related coding and design techniques, you as front-end developers build the elements of an application that are directly accessed by end-users with a goal of rendering the entire interface elegant, easy to use, fast, and secure, fostering user engagement and interaction.

4. FRONTEND DEVELOPMENT Below are the most common programming languages for developing the front end. HTML :- Hypertext Markup Language CSS :- Cascading Style Sheet JAVASCRIPT

5. HYPERTEXT MARKUP LANGUAGE (HTML) The Hypertext Markup Language (HTML) programming language, which defines the structure and meaning of web content, is a building block for front-end development. Through HTML, browsers display text or load elements, rendering webpages , which contain hyperlinks and links to other webpages , for users.

6. HYPERTEXT MARKUP LANGUAGE (HTML) Headings HTML provides six levels of headings, from h1 (the largest) to h6 (the smallest). Headings are used to indicate the importance of different sections of content on a web page. For example: <h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <h3>This is a Heading 3</h3> Paragraphs The <p> tag is used to define a paragraph of text. For example: <p>This is a paragraph of text.</p>

7. Links The <a> tag is used to create links to other web pages or resources. For example: <a href = https://www.example.com >Click here to go to Example.com</a> Images The < img > tag is used to add images to a web page. For example: < img src =”image.jpg” alt=”Description of image”> Lists HTML provides two types of lists: ordered lists ( ol ) and unordered lists ( ul ). For example: HYPERTEXT MARKUP LANGUAGE (HTML) < ul > < li >Item 1</ li > < li >Item 2</ li > < li >Item 3</ li > </ ul > < ol > < li >Item 1</ li > < li >Item 2</ li > < li >Item 3</ li > </ o l >

8. CASCADING STYLE SHEETS (CSS) Cascading style sheets (CSS) is the standard language that specifies how to display HTML content: fonts, foreground and background colors, etc. With CSS, you can control the design layout and its components for various devices like desktops, tablets, and smartphones . Examples of the components are the header, body, footer, content, asides, and sections. Here are some key features of CSS Selectors CSS uses selectors to target HTML elements and apply styles to them. For example, you can use the following selector to target all <h> elements on a page: h { color: green; }

9. CSS PROPERTIES, CLASSES AND IDS Properties CSS uses properties to define how HTML elements should be styled. For example, you can use the following property to set the font size of a <p> element: p { font-size: 12px; } Classes and Ids CSS provides a way to target specific HTML elements using classes and Ids. For example, you can use the following class selector to target all elements with the class “example”: example { background-color: green; }

10. CASCADING AND INHERITANCE CSS styles can be cascaded and inherited, which means that styles applied to a parent element can be inherited by its child elements. This makes it easier to manage the style of a large website. To implement CSS in an HTML document, you can use the following methods: Inline styles Internal styles External styles

11. TYPE OF STYLES Inline styles You can add CSS styles directly to an HTML element using the “style” attribute. For example: <p style=”color: red; font-size: 14px;”>This text is red and 14 pixels in size.</p> Internal styles You can add CSS styles to the <head> section of an HTML document using the <style> tag. For example: <head> <style> p { color: green; font-size: 14px; } </style> </head>

12. TYPE OF STYLES External styles You can create a separate CSS file and link it to an HTML document using the <link> tag. For example: <head> <link rel =” stylesheet ” href =”styles.css”> </head> In the example above, “styles.css” is the name of the external CSS file. You can then add CSS styles to the file and they will be applied to the HTML document.

13. JAVASCRIPT JavaScript is a programming language that is primarily used for creating interactive and dynamic web pages. It allows developers to add interactivity and functionality to a website, such as form validation, animations, and dynamic content. JavaScript can be implemented in web development in several ways: Inline JavaScript Internal JavaScript External JavaScript

14. JAVASCRIPT Inline JavaScript You can add JavaScript code directly to an HTML element using the “ onclick ” attribute. For example: <button onclick =”alert(‘Hello world!’)”>Click me</button> Internal JavaScript You can add JavaScript code to the <head> section of an HTML document using the <script> tag. For example: <head> <script> function greet() { alert(‘Hello world!’); } </script> </head>

15. JAVASCRIPT External JavaScript You can create a separate JavaScript file and link it to an HTML document using the <script> tag. For example: <head> <script src =”script.js”></script> </head> In the example above, “script.js” is the name of the external JavaScript file. You can then add JavaScript code to the file and it will be applied to the HTML document. JavaScript can also be used with popular web development frameworks and libraries, such as React, Vue , and jQuery . These frameworks and libraries provide developers with pre-built components and functionality that can be used to build complex web applications more quickly and efficiently.

16. BACKEND DEVELOPMENT Back-end development involves everything that exists in the server. This includes everything from data modeling and storage to security concerns. Back-end development makes the front-end of a website possible by building and maintaining the systems that makes user interaction possible. Back-end development is a crucial part of websites since back ends are comprised of databases, authentication/authorization features, application programming interfaces (APIs) and all the different components that, combined with a front-end, allow users to view and interact with applications in their browser. Programming Languages for Backend Development Include HyperText Pree Processor {PHP} and MY Structured Query Languge (MYSQL}

17. HYPERTEXT PREE PROCESSOR (PHP) PHP (Hypertext Preprocessor) is a server-side scripting language that is primarily used for creating dynamic and interactive web pages. It is open source, easy to learn, and widely used in web development. PHP can be implemented in web development in several ways: Inline PHP External PHP

18. HYPERTEXT PREE PROCESSOR (PHP) Inline PHP You can embed PHP code directly into an HTML document using the “<? php ?>” tags. For example: <p><? php echo “Hello world!”; ?></p> External PHP You can create a separate PHP file and link it to an HTML document using the <form> tag. For example: <form action=”process.php” method=”post”> <label for=”name”>Name:</label> <input type=”text” name=”name” id=”name”> <input type=”submit” value=”Submit”> </form>

19. MY STRUCTURED QUERY LANGUGE (MYSQL) MySQL is a relational database management system (RDBMS) that uses Structured Query Language (SQL) for managing data. It is widely used in web development, particularly for building dynamic websites and web applications. Some of the basic operations in MySQL include: Creating a database Creating a table Inserting data Retrieving data Updating data Deleting data

20. CREATING DABASE AND TABLE Creating a database To create a new database in MySQL , you can use the CREATE DATABASE statement followed by the name of the database. For example: CREATE DATABASE mydatabase ; Creating a table Once you have a database, you can create tables to store data. To create a table, you need to specify the table name, columns, and data types. For example: CREATE TABLE customers ( Id INT PRIMARY KEY, Name VARCHAR(50), Email VARCHAR(50) );

21. INSERTING AND RETRIVING DATA Inserting data You can insert data into a table using the INSERT INTO statement. For example: INSERT INTO customers (id, name, email) VALUES (1, ‘ aliyu umar ’, ‘ au @example.com ’); Retrieving data To retrieve data from a table, you can use the SELECT statement. For example: SELECT * FROM customers; This will return all the rows and columns in the customers table.

22. THANK YOU FOR LISTINING