Scribd
Upload
6 views

Web Tech Unit - 2 Notes

The document provides an overview of front-end web development, covering key aspects such as HTML structure, CSS presentation, and JavaScript interactivity. It discusses best practices for structuring HTML, various CSS types, and client-side scripting, alongside an introduction to APIs and their types, including REST and GraphQL. Additionally, it highlights the importance of proper error handling and the features introduced in HTML5.

Uploaded by

pandeyshashwat15
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Web Tech Unit - 2 Notes

The document provides an overview of front-end web development, covering key aspects such as HTML structure, CSS presentation, and JavaScript interactivity. It discusses best practices for structuring HTML, various CSS types, and client-side scripting, alongside an introduction to APIs and their types, including REST and GraphQL. Additionally, it highlights the importance of proper error handling and the features introduced in HTML5.

Uploaded by

pandeyshashwat15
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

‭OnedayStudy‬‭Visit‬

‭ nit 2: Web Technology - Frontend‬


U
‭Development‬
‭1. Front-End Design‬
‭ ront-end design focuses on the user interface (UI) and user experience (UX) of a website. It‬
F
‭involves creating visually appealing and functional layouts using HTML, CSS, and‬

‬
‭JavaScript.‬

dy
‭Key Aspects of Front-End Design:‬

‭‬
● ‭ ser Interface (UI):‬‭The graphical layout of a website.‬
U
‭●‬ ‭User Experience (UX):‬‭Enhancing usability and accessibility.‬

u
‭●‬ ‭Responsiveness:‬‭Ensuring the design works on different‬‭screen sizes.‬
‭●‬ ‭Performance Optimization:‬‭Reducing load times using‬‭efficient coding practices.‬
St
‭2. HTML (HyperText Markup Language)‬
y
‭HTML is the foundation of web pages, defining their structure and content.‬
da

‭Basic Structure of an HTML Document‬


‭ !DOCTYPE html>‬
<
‭<html lang="en">‬
‭<head>‬
ne

‭<meta charset="UTF-8">‬
‭<meta name="viewport" content="width=device-width, initial-scale=1.0">‬
‭<title>My Web Page</title>‬
‭</head>‬
‭<body>‬
‭O

‭<h1>Welcome to Web Development</h1>‬


‭<p>This is a basic HTML document.</p>‬
‭</body>‬
‭</html>‬

‭Important HTML Elements‬

<h1> to <h6>‬‭for titles and subtitles.‬


‭1.‬ ‭Headings:‬‭
‭ .‬ P
2 <p>‬‭for text content.‬
‭ aragraphs:‬‭
‭3.‬ ‭Lists:‬
‭OnedayStudy‬‭Visit‬

<ol><li>Item</li></ol>‬
‭○‬ ‭Ordered List:‬‭
<ul><li>Item</li></ul>‬
‭○‬ ‭Unordered List:‬‭
<a href="https://example.com">Click Here</a>‬
‭4.‬ ‭Links:‬‭
<img src="image.jpg" alt="Description">‬
‭5.‬ ‭Images:‬‭
<table>‬
‭6.‬ ‭Tables:‬‭ <tr>‬
‭,‬‭ <td>‬‭for tabular data.‬
‭,‬‭
<form>‬‭with‬‭
‭7.‬ ‭Forms:‬‭ <input>‬ <select>‬
‭,‬‭ <textarea>‬‭for‬‭user input.‬
‭,‬‭
‭8.‬ S <header>‬
‭ emantic Elements:‬‭ <nav>‬
‭,‬‭ <section>‬
‭,‬‭ <article>‬
‭,‬‭ <footer>‬‭for‬
‭,‬‭
‭better structure.‬

‬
‭3. Structuring HTML‬

dy
‭Proper structuring ensures better readability, SEO, and accessibility.‬

‭Best Practices for Structuring HTML‬

u
‭●‬ ‭Use‬‭semantic elements‬‭(‬‭
<article>‬ <aside>‬
‭,‬‭ St <section>‬
‭,‬‭ ‭)‬‭instead of generic‬
<div>‬
‭ ‭.‬
‭‬
● ‭ ollow‬‭nested elements‬‭properly (e.g., a‬‭
F <ul>‬‭should‬‭have‬‭
<li>‬‭inside).‬
‭●‬ ‭Keep‬‭consistent indentation‬‭for readability.‬
‭●‬ ‭Use‬‭alt attributes‬‭for images to improve accessibility.‬
‭●‬ ‭Use‬‭meta tags‬‭for SEO optimization.‬
y
‭Example of a Well-Structured HTML Page:‬
da

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title>My Website</title>‬
ne

‭<meta name="description" content="A simple web page">‬


‭</head>‬
‭<body>‬
‭<header>‬
‭<h1>My Website</h1>‬
‭O

‭</header>‬
‭<nav>‬
‭<ul>‬
‭<li><a href="home.html">Home</a></li>‬
‭<li><a href="about.html">About</a></li>‬
‭</ul>‬
‭</nav>‬
‭<section>‬
‭<h2>Welcome!</h2>‬
‭<p>This is the main content of the page.</p>‬
‭</section>‬
‭OnedayStudy‬‭Visit‬

‭<footer>‬
‭<p>&copy; 2024 My Website</p>‬
‭</footer>‬
‭</body>‬
‭</html>‬

‭4. Presentation through CSS‬


‭CSS (Cascading Style Sheets) controls the visual appearance of web pages.‬

‬
dy
‭Types of CSS‬
‭1.‬ I‭nline CSS:‬‭Directly inside an HTML tag.‬
‭<p style="color: blue;">This is blue text.</p>‬

u
‭2.‬ I‭nternal CSS:‬‭Inside‬‭<style>‬‭in the‬‭ <head>‬‭section.‬
‭<style>‬ St
‭body { background-color: lightgray; }‬
‭</style>‬

‭ xternal CSS:‬‭In a separate file (‬‭


‭3.‬ E styles.css‬ <link>‬
‭) and linked using‬‭ ‭.‬
‭<link rel="stylesheet" href="styles.css">‬
y
‭CSS Selectors‬
da

p { color: red; }‬
‭●‬ ‭Element Selector:‬‭
.classname { color: blue; }‬
‭●‬ ‭Class Selector:‬‭
#idname { color: green; }‬
‭●‬ ‭ID Selector:‬‭
h1, h2, h3 { font-family: Arial; }‬
‭●‬ ‭Group Selector:‬‭
ne

*{ font-family: Arial; }‬
‭●‬ ‭Universal Selector:‬‭

‭Box Model‬
‭O

‭CSS box model includes:‬

‭‬
● ‭ ontent:‬‭Actual text or image inside an element.‬
C
‭●‬ ‭Padding:‬‭Space between content and border.‬
‭●‬ ‭Border:‬‭Surrounds padding and content.‬
‭●‬ ‭Margin:‬‭Space between elements.‬

‭Example:‬

‭div {‬
‭width: 300px;‬
‭padding: 10px;‬
‭OnedayStudy‬‭Visit‬

‭ order: 2px solid black;‬


b
‭margin: 20px;‬
‭}‬

‭5. Client-Side Scripting with JavaScript‬


‭JavaScript adds interactivity and dynamic behavior to web pages.‬

‭Basic JavaScript Syntax‬

‬
‭document.getElementById("demo").innerHTML = "Hello JavaScript!";‬

dy
‭Key JavaScript Concepts‬

u
‭‬ V
● ‭ ariables:‬‭let name = "John";‬
‭●‬ ‭Functions:‬
‭function greet() {‬

‭alert("Hello, welcome!");‬
St
‭}‬
‭●‬ ‭Events:‬
‭<button onclick="greet()">Click Me</button>‬
y
‭ ‬ ‭DOM Manipulation:‬
●
‭document.querySelector("p").style.color = "red";‬
da

‭6. Common Image Types‬


ne

‭Different image formats are used based on quality, compression, and transparency needs.‬

‭Format‬ ‭Description‬ ‭Use Case‬


‭O

‭JPEG‬ ‭ ossy compression, small file‬


L ‭ hotos, web‬
P
‭size‬ ‭graphics‬

‭PNG‬ ‭Lossless, supports transparency‬ ‭Logos, icons‬

‭GIF‬ ‭Supports animation‬ ‭Simple animations‬

‭SVG‬ ‭Scalable, vector-based‬ ‭Icons, logos‬

‭WebP‬ ‭High quality, compressed‬ ‭Web images‬

‭Example of an Image in HTML:‬


‭OnedayStudy‬‭Visit‬

‭<img src="image.png" alt="A sample image" width="300">‬

‭7. APIs (Application Programming Interfaces)‬


‭What is an API?‬

‭ n‬‭API (Application Programming Interface)‬‭is a set‬‭of rules and protocols that allows‬
A
‭different software applications to communicate with each other. APIs are commonly used in‬
‭web development to retrieve, send, and modify data between a client (browser) and a server.‬

‬
‭ or example, when you use a weather app to check the temperature, it fetches data from a‬
F

dy
‭weather API instead of storing all the information locally.‬

‭Types of APIs‬

u
‭There are multiple types of APIs, but the two most commonly used in web development are:‬
St
‭1. REST API (Representational State Transfer API)‬

‭A‬‭REST API‬‭is a web service that uses‬‭HTTP requests‬‭to perform operations like:‬

‭‬
● ‭ ET‬‭- Retrieve data‬
G
y
‭●‬ ‭POST‬‭- Send data to the server‬
‭●‬ ‭PUT‬‭- Update existing data‬
da

‭●‬ ‭DELETE‬‭- Remove data‬

‭Example: If you want to retrieve user data from an API, a GET request might look like this:‬

‭GET https://api.example.com/users‬
ne

‭The API responds with user data in‬‭JSON format‬‭:‬

‭{‬
‭O

‭"id": 1,‬
‭"name": "John Doe",‬
‭"email": "[email protected]"‬
‭}‬

‭2. GraphQL API‬

‭ nlike REST,‬‭GraphQL‬‭allows clients to fetch only‬‭the specific data they need, reducing‬
U
‭unnecessary data transfer.‬

‭Example of a GraphQL query to fetch a user’s name and email:‬


‭OnedayStudy‬‭Visit‬

‭{‬
‭user(id: 1) {‬
‭name‬
‭email‬
‭}‬
‭}‬

‭GraphQL returns exactly what was requested:‬

‭{‬
‭"data": {‬

‬
‭"user": {‬

dy
‭"name": "John Doe",‬
‭"email": "[email protected]"‬
‭}‬
‭}‬
‭}‬

u
St
‭This makes‬‭GraphQL‬‭more flexible compared to‬‭REST‬‭.‬

‭Fetching Data Using JavaScript (AJAX and Fetch API)‬ ‭(Not include in Syllabus‬
y
‭optional for Exam purpose)‬

‭ o interact with APIs from a web page, JavaScript provides methods like‬‭AJAX‬
T
da

‭(Asynchronous JavaScript and XML)‬‭and‬‭Fetch API‬‭.‬

‭Using Fetch API (Modern Approach)‬

fetch()‬‭function allows web applications to send‬‭HTTP requests and process‬


‭ he‬‭
T
ne

‭responses asynchronously.‬

‭Example: Fetching Data from an API‬


‭fetch("https://api.example.com/data") // API URL‬
‭O

‭.then(response => response.json()) // Convert response to JSON‬


‭.then(data => console.log(data)) // Handle data‬
‭.catch(error => console.error("Error:", error)); // Handle errors‬

‭Breaking Down the Code:‬

‭1.‬ ‭
fetch("https://api.example.com/data")‬

‭ ‬ ‭Sends a‬‭GET request‬‭to the specified API endpoint.‬


○
‭2.‬ ‭
.then(response => response.json())‬
‭OnedayStudy‬‭Visit‬

‭ ‬ ‭Converts the received response from text to‬‭JSON format‬‭.‬


○
‭3.‬ ‭
.then(data => console.log(data))‬

‭ ‬ ‭Once the data is received, it is logged in the console.‬


○
‭4.‬ ‭
.catch(error => console.error("Error:", error));‬

‭○‬ ‭If there is any network error or issue, it is handled gracefully.‬

‭Example Response from API‬

‭If the API returns this JSON:‬

‬
‭{‬

dy
‭"id": 1,‬
‭"name": "John Doe",‬
‭"age": 30‬
‭}‬

u
‭The JavaScript console will output:‬ St
‭{id: 1, name: "John Doe", age: 30}‬
y
‭Making a POST Request with Fetch API‬
da

POST‬‭method along‬‭with‬‭
‭To‬‭send data‬‭to an API, use the‬‭ fetch()‬
‭.‬

‭Example: Sending Data to an API‬


‭fetch("https://api.example.com/users", {‬
‭method: "POST", // Specify request method‬
ne

‭headers: {‬
‭"Content-Type": "application/json"‬
‭},‬
‭body: JSON.stringify({‬
‭O

‭name: "Alice",‬
‭email: "[email protected]"‬
‭})‬
‭})‬
‭.then(response => response.json())‬
‭.then(data => console.log("User added:", data))‬
‭.catch(error => console.error("Error:", error));‬

‭How It Works:‬

‭●‬ ‭The‬‭headers‬‭specify that JSON data is being sent.‬


‭OnedayStudy‬‭Visit‬

‭‬ b
● ‭ody: JSON.stringify({...})‬‭converts the object to a‬‭JSON string‬‭.‬
‭●‬ ‭The‬‭API response‬‭is logged in the console.‬

‭Example API Response:‬


‭{‬
‭"id": 2,‬
‭"name": "Alice",‬
‭"email": "[email protected]",‬
‭"status": "User created successfully"‬
‭}‬

‬
dy
‭Conclusion‬

‭‬
● ‭ PIs allow web applications to communicate with servers.‬
A
‭●‬ ‭REST APIs‬‭use HTTP methods to send and receive data.‬

u
‭●‬ ‭GraphQL APIs‬‭enable fetching specific data more efficiently.‬
‭●‬ ‭Fetch API‬‭is a modern way to retrieve data from APIs using JavaScript.‬
‭●‬ ‭Proper error handling ensures smooth operation when working with APIs.‬
St
‭HTML5 Features‬
y
da

‭ TML5 introduced several new elements, attributes, and APIs to improve web development.‬
H
‭These enhancements provide‬‭better structure, interactivity,‬‭and multimedia capabilities‬
‭while ensuring cross-browser compatibility.‬
ne

‭1. New Semantic Elements in HTML5‬


‭ emantic elements define the meaning of the content they contain, improving accessibility‬
S
‭O

‭and SEO. Before HTML5, developers used‬‭ <div>‬‭elements‬‭for everything. Now, HTML5‬
‭provides‬‭meaningful‬‭elements that describe their purpose.‬

‭Key Semantic Elements‬


‭Element‬ ‭Description‬

<article‬ R
‭ ‭ epresents self-contained content (e.g., blog post, news‬
>‬
‭ ‭article).‬
‭OnedayStudy‬‭Visit‬

<section‬ ‭Groups related content (e.g., a chapter in a book).‬


‭
>‬
‭

<nav>‬
‭ ‭Contains navigation links (e.g., menu, sidebar links).‬

<header>‬ ‭Defines introductory content or navigation within a page.‬


‭

<footer>‬ ‭Represents footer content (e.g., copyright info, links).‬


‭

<aside>‬ ‭Represents related content, like a sidebar or ads.‬


‭

<figure>‬ ‭Contains images, illustrations, and captions.‬


‭

‬
dy
‭Example Usage‬
‭<article>‬
‭<header>‬

u
‭<h2>Introduction to HTML5</h2>‬
‭<p>Published on: <time datetime="2024-03-03">March 3, 2024</time></p>‬
‭</header>‬ St
‭<section>‬
‭<p>HTML5 brings new semantic elements, multimedia features, and APIs.</p>‬
‭</section>‬
‭<footer>‬
‭<p>Author: Abhishek</p>‬
y
‭</footer>‬
‭</article>‬
da

‭2. HTML5 Form Enhancements‬


ne

‭ orms in HTML5 come with‬‭new input types, validation‬‭features, and attributes‬‭to‬


F
‭improve user experience and reduce JavaScript reliance.‬

‭New Input Types‬


‭O

‭Input Type‬ ‭Description‬

email‬
‭ ‭Validates an email format automatically.‬

url‬
‭ ‭Ensures only URLs are entered.‬

tel‬
‭ ‭Used for phone numbers.‬

number‬
‭ ‭Allows numeric input with min/max values.‬

range‬
‭ ‭Creates a slider for numeric input.‬
‭OnedayStudy‬‭Visit‬

date/dateti‬ ‭Allows date selection via a date picker.‬


‭
me‬
‭

‭Example Usage‬
‭<form>‬
‭<label>Email:</label>‬
‭<input type="email" placeholder="Enter your email" required>‬

‭ label>Phone:</label>‬
<
‭<input type="tel" placeholder="Enter your phone number">‬

‬
dy
‭ label>Age:</label>‬
<
‭<input type="number" min="18" max="99">‬

‭ label>Choose a date:</label>‬
<
‭<input type="date">‬

u
‭ button type="submit">Submit</button>‬
< St
‭</form>‬

‭Validation Without JavaScript‬


y
required‬‭attribute ensures the field must be filled‬‭before submission.‬
‭●‬ ‭The‬‭
pattern‬‭attribute allows custom validation rules.‬
‭●‬ ‭The‬‭
da

‭Example: A required email field with validation:‬

‭<input type="email" required>‬


ne

‭3. Canvas and SVG for Graphics‬


‭O

‭ TML5 introduced‬‭Canvas‬‭and‬‭SVG (Scalable Vector Graphics)‬‭for creating graphics‬


H
‭directly in the browser.‬

‭Canvas‬

<canvas>‬‭element allows dynamic drawing using‬‭JavaScript. It is‬‭pixel-based‬‭and‬


‭ he‬‭
T
‭best for‬‭game graphics, animations, and real-time‬‭rendering‬‭.‬

‭Example: Drawing on Canvas‬


‭ canvas id="myCanvas" width="300" height="150" style="border:1px solid‬
<
‭#000;"></canvas>‬
‭OnedayStudy‬‭Visit‬

‭<script>‬
‭var canvas = document.getElementById("myCanvas");‬
‭var ctx = canvas.getContext("2d");‬

‭ tx.fillStyle = "blue";‬
c
‭ctx.fillRect(20, 20, 100, 50);‬
‭</script>‬

‭Explanation:‬

‬
‭●‬ ‭
getContext("2d")‬‭enables 2D drawing.‬

dy
‭●‬ ‭
fillStyle‬‭sets the fill color.‬
‭●‬ ‭
fillRect(x, y, width, height)‬‭draws a rectangle.‬

‭SVG (Scalable Vector Graphics)‬

u
‭ VG is‬‭XML-based‬‭and used for vector graphics that‬‭scale without losing quality. Ideal for‬
S
‭icons, illustrations, and charts‬‭.‬

‭Example: Drawing an SVG Circle‬


St
‭<svg width="200" height="200">‬
‭<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />‬
y
‭</svg>‬
da

‭Key Differences Between Canvas and SVG‬


‭Feature‬ ‭Canvas‬ ‭SVG‬

‭ raphics‬
G ‭Pixel-based (raster)‬ ‭Vector-based (scalable)‬
ne

‭Type‬

‭Performance‬ ‭Faster for animations/games‬ ‭Best for static graphics‬

‭Manipulation‬ ‭ equires JavaScript for‬


R ‭Uses XML, easy to modify‬
‭O

‭interaction‬

‭Conclusion‬
‭‬ H
● ‭ TML5 introduced‬‭semantic elements‬‭for better content‬‭structure.‬
‭●‬ ‭Forms‬‭now support new input types and built-in validation.‬
‭●‬ ‭Canvas‬‭is ideal for real-time graphics, while‬‭SVG‬‭is great for scalable images.‬
‭OnedayStudy‬‭Visit‬

‭Conclusion‬
‭ his unit covered the essentials of front-end web development, including HTML structuring,‬
T
‭CSS styling, JavaScript scripting, common image types, APIs, and HTML5 features.‬
‭Mastering these topics is crucial for building interactive and visually appealing web‬
‭applications.‬

‬
u dy
St
y
da
ne
‭O

You might also like