Scribd
Upload
2 views

Day -1 Web Developmet Bootcamp1

Uploaded by

munnaraj1205
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Day -1 Web Developmet Bootcamp1

Uploaded by

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

Day -1 Web Developmet Bootcamp

Today’s topics :-
1. What is Web Development ?
2. Client-Server Architecture
3. How internet works ?
4. What is HTML ?
5. Your First Webpage
1. What is Web Development ?

1. Web development is the process of creating websites or web


applications that run in a browser.
2. There are two main sides to web development :-
 Frontend
 Backend
Frontend
 This is what users see and interact with in their browser.
Backend
 This handles the logic, database interactions, and everything users don’t
see.
2. Client-Server Architecture
 Introduction to the Client-Server Model :-

 What is a Client?
• A user’s device (computer, phone, tablet) that requests data from a server
• Examples: Web browsers, mobile apps
 What is a Server ?
• A powerful computer that stores and delivers content or services.
• Examples: Web servers, API servers, database servers.

• A client is like a customer at a restaurant, and the server is like a waiter


bringing food from the kitchen.
3. How the Internet Works ?
 Web 1.0 (1990s – early 2000s) – The "Read-Only" Wed
• Websites were static with no interactivity.
• Built using HTML and CSS (no JavaScript).
• Users could only read content, there was no user engagement.
• No social media or real-time interactions.
• Example: Early Yahoo! pages, simple blogs.

 Web 2.0 (2004 – Present) – The "Read-Write" Wed

• Enabled dynamic and interactive experiences.


• Users could generate content (comments, reviews, blog posts, real-time chats).
• Example: Facebook, YouTube, Twitter, Amazon.
 Web 3.0 (Emerging) – The "Decentralized" Wed

• Uses blockchain technology to ensure decentralization.


• AI-driven and privacy-focused to give users more control over data.
• Example: Cryptocurrencies, smart contracts, decentralized apps (Ethereum, Filecoi

 Data Transmission & Packets

• The internet sends data in packets, which are small chunks of


information.
• Each packet has :
1. Header (destination and sender information)
• Uses TCP/IP protocols
2. Payload to ensure
(actual datatransferred)
data being reaches the right destination
4. What is HTML ?
1. HTML, which stands for Hypertext Markup Language, is a markup
language for creating web pages.
2. When you visit a website and see content like paragraphs, headings,
links, images, and videos, that's HTML.
3. It defines the structure using tags.
 Why HTML?

 Structure of Web Pages :-


• HTML defines the basic layout and structure of a web page —
headings, paragraphs, links, images, forms, etc.

 Standard Supported by Browsers :-


• Every web browser (like Chrome, Firefox, Safari) understands and renders H

 Easy to Learn :-
• It's beginner-friendly and doesn’t require programming knowledge to get star
 Creating Your First HTML page in VS Code
Steps :-
1. Open VS Code.
2. Create a new file name index.html
3. Write a basic HTML template

• Install live server Extension in VS Code


• Run the file by right click > open with live server
5. Your First
Webpage
 Understanding HTML Structure

Basic components of an HTML Document :-

Example -
 Understanding HTML Tags :-
Basic HTML tags :

Example :

Attributes :
 Let’s Explore About Websites :-

Heading (<h1> tag)

Paragraph (<p>
tag)

Image (<img> tag) SubHeading (<h2> tag)


 Heading Tag :-
• HTML headings are titles or subtitles that you want to display on a webpage.
• HTML headings are defined with the <h1> to <h6> tags.
 Paragraph :-

• The HTML <p> element defines a paragraph.

 Horizontal Rule :-

• The <hr> element is used to separate conten (or define a change ) in


an HTML page.
• The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.
 Line Break :-

• The HTML <br> element defines a line break.


• We can use <br> if we want a line break ( a new line ) without
starting a new paragraph
 The <pre> tag :-
• The HTML <pre> element defines preformatted text.

 HTML Comments :-

• Comments are not displayed in the browser, used for notes.


• <!-- This is a comment -->
 Hands-on Exercise :-

 Create a basic webpage with headings, paragraphs, and a title.

You might also like