Web development pkskckfkdkdkddkdkdkddkpt.pptx

An html css and js ppt

1. Introduction to Web Development HTML,CSS,JavaScript Submitted to: Submitted by: Dr. Nitesh kumar Dixit Himanshu (HOD,CSE) (22EBTCS021)

2. Introduction Of Web Development HTML ( HyperText Markup Language): Provides the structure of a webpage (headings, paragraphs, links, images, forms, etc.). CSS (Cascading Style Sheets): Defines the look and design (colors, layouts, fonts, spacing, responsiveness). JavaScript: Adds interactivity and functionality (animations, dynamic updates, form validation, event handling).

3. HTML - Basics HTML( HyperText Markup Language) is the backbone of the web. Used to create the structure and content of web pages. HTML uses tags and elements written inside angle brackets < >. Types of elements: Headings → <h1> to <h6> Paragraphs → <p> Links → <a href =" url "> Images → < img src ="image.jpg"> Lists → Ordered (< ol >) and Unordered (<ul>) HTML makes content readable, structured, and accessible .

4. Structure of an HTML Document • An HTML document has a standard layout: •!DOCTYPE html – Declares the HTML version. •html – Root element. •head – Contains metadata, title, and linked resources. •body – Contains all visible page content. •Importance of structure: •Makes pages browser-compatible. •Improves SEO and accessibility. •Forms the skeleton that CSS and JS enhance.

5. HTML – Lists , Tables & Forms Lists in HTML: Ordered List < ol > → Items displayed with numbers or letters. Unordered List <ul> → Items displayed with bullets. Definition List <dl> → Consists of terms (<dt>) and descriptions (<dd>). Tables in HTML: <table> → Defines a table. <tr> → Defines a row. <td> → Defines a data cell. < th > → Defines a header cell. Forms in HTML: <form> → Container for user input. <input> → Text, password, checkbox, radio, etc. < textarea > → Multi-line text input. <button> → Submit or reset actions. <select> → Drop-down list.

6. CSS - Basics CSS (Cascading Style Sheets) is used to style HTML elements. CSS controls how content looks: Colors and backgrounds. Fonts, text alignment, spacing. Layouts using flexbox and grid. Responsive design for mobile, tablet, desktop. Syntax example: body { background-color: lightblue ; font-family: Arial; } CSS makes websites attractive, modern, and user-friendly .

7. CSS - Types • Inline CSS •Applied directly inside an HTML tag. •Example: p style= color:blue;Hello /p •Good for quick changes but not reusable. • Internal CSS •Defined inside style tag in the head. style h1 { color: red; } /style • External CSS •Written in a separate . css file and linked using link. •Best for large projects; keeps code clean and reusable. •External CSS is industry standard.

8. CSS – Flexbox & Grid Flexbox (Flexible Box): One-dimensional layout → arranges items in a row or column. Container: display:flex ;, flex-direction, justify-content, align-items, flex-wrap. Items: flex-grow, flex-shrink, flex-basis, align-self, order. Best for navbars, toolbars, simple layouts. Grid Layout: Two-dimensional → arranges items in rows & columns. Container: display:grid ;, grid-template-rows, grid-template-columns, gap. Items: grid-row, grid-column, grid-area. Best for complex layouts & dashboards.

9. JavaScript - Basics • JavaScript (JS) is the programming language of the web. •Makes websites interactive and dynamic. •Features: •Variables (var, let, const) •Data types (string, number, boolean , object, array) •Functions (reusable blocks of code) •Operators and expressions •Control structures (if, else, for, while) •Example: document.write (Hello JavaScript!); •JS allows users to interact with content in real time .

10. JavaScript - Functions Definition: Functions are reusable blocks of code used to perform specific tasks. Improve modularity, readability, and reusability of programs. Regular Functions: Declared using the function keyword. Can accept parameters and return values. Have their own this context. Arrow Functions (ES6): Shorter syntax for writing functions. Do not have their own this (inherit from parent scope). Commonly used in modern JavaScript. Callback Functions: A function passed as an argument to another function. Used in asynchronous operations (e.g., event handling, API calls).

11. JavaScript - DOM Definition: The DOM is a programming interface for HTML & XML documents. Represents the page as a tree structure of nodes (elements, attributes, text). Why Important? Allows JavaScript to access, modify, add, or delete elements dynamically. Makes webpages interactive and dynamic . Accessing Elements: document.getElementById ("id") document.getElementsByTagName ("tag") document.querySelector ("selector"), querySelectorAll () Manipulating Elements: Change content → element.innerHTML = "Text" Change style → element.style.color = "red" Create/Remove elements → document.createElement (), element.remove () Events & DOM: DOM works with events (e.g., onclick, onchange , addEventListener ).

12. Asynchronous JavaScript Why Asynchronous? JavaScript is single-threaded (executes one task at a time). Asynchronous code lets tasks like API calls, file loading, timers run without blocking UI. Promises: Object representing the eventual completion or failure of an async task. States: Pending → Fulfilled → Rejected. async/await: Modern way to write async code → looks like synchronous. fetch API: Built-in JS API for making HTTP requests. Simpler replacement for XMLHttpRequest . Returns a Promise with response data.

13. Any Questions? Do you have any questions about HTML, CSS, or JavaScript? Ask anything – practical examples, syntax, or concepts

14. Thank You Thank you for your time and attention!