DEV Community

Ranjith srt
Ranjith srt

Posted on

MERN - Html (Day 1)

Image description

INTRODUCTION
Enter fullscreen mode Exit fullscreen mode 
what is HTML?
Enter fullscreen mode Exit fullscreen mode 
 https://youtu.be/hQNWJcWUIJc?si=pxAAiPTEvlP7GnhL
Enter fullscreen mode Exit fullscreen mode 
 1️⃣ What is HTML? (HyperText Markup Language)
Enter fullscreen mode Exit fullscreen mode

HTML is the foundation of all websites. It is used to structure content on a webpage.

 📝 Key Points about HTML
Enter fullscreen mode Exit fullscreen mode

✔HTML is a language used to create web pages.
✔ It consists of tags (like <h1>, <p>, <img>) that define the structure of a page.
✔ HTML alone does not add styling (CSS) or functionality (JavaScript).

📌 Example of HTML Usage
Enter fullscreen mode Exit fullscreen mode

- The text, images, and buttons you see on a website are created using HTML.
- When you visit a website, your browser reads the HTML file and displays the content.

 2️⃣ What is HyperText?
Enter fullscreen mode Exit fullscreen mode

HyperText means clickable text that links to other web pages.

📝 Key Points about HyperText
Enter fullscreen mode Exit fullscreen mode

✔ It allows users to navigate between web pages using links.
✔ Hypertext is created using anchor (<a>) tags in HTML.
✔ Example: When you click a link on Google, it takes you to another page.

📌 Example of HyperText in Action
Enter fullscreen mode Exit fullscreen mode

- You click on "Learn More," and it takes you to another page.
- Wikipedia uses hypertext links to connect different topics.

 3️⃣ What is a Markup Language?
Enter fullscreen mode Exit fullscreen mode

A Markup Language is a language that uses tags to structure and format contents.

📝 Key Points about Markup Language
Enter fullscreen mode Exit fullscreen mode

✔ HTML is a Markup Language because it uses tags to define elements.
✔ Markup languages do not perform logic or calculations like programming languages.
✔ Example: <p>Hello World</p> tells the browser to display text as a paragraph.

 📌 How Markup Language Works
Enter fullscreen mode Exit fullscreen mode 
<h1>Main Heading</h1> <!-- Displays a large heading -->
<p>This is a paragraph.</p> <!-- Displays a paragraph -->
Enter fullscreen mode Exit fullscreen mode 
4️⃣ What is a Web Page?
Enter fullscreen mode Exit fullscreen mode

A web page is a single document that you can view in a browser.

 📝 Key Points about Web Pages
Enter fullscreen mode Exit fullscreen mode

✔ A web page is built using HTML, CSS, and JavaScript.
✔ It can display text, images, videos, and links.

✔ Examples:
Enter fullscreen mode Exit fullscreen mode

- Static Web Page** (Fixed content, no interaction).
- Dynamic Web Page** (Changes based on user actions).

 📌 Example of Web Pages
Enter fullscreen mode Exit fullscreen mode

- Google’s homepage is a web page.
- A blog article is a web page.

5️⃣ What is a Web Application?
Enter fullscreen mode Exit fullscreen mode

A web application is a website with advanced functionality, like logging in, posting content, or interacting with a database.

 📝 Key Points about Web Applications
Enter fullscreen mode Exit fullscreen mode

✔ Web applications use HTML, CSS, JavaScript, and a backend (Node.js, PHP, Python, etc.).
✔ They allow user interaction (e.g., social media, online shopping, email).

✔ Examples:
Enter fullscreen mode Exit fullscreen mode 
- Facebook, Twitter(Social media apps).
- Gmail(Email app).
- YouTube (Video-sharing app).
Enter fullscreen mode Exit fullscreen mode 
📌 Difference Between Web Page and Web App
Enter fullscreen mode Exit fullscreen mode 


| Feature | Web Page | Web Application |
|---------|----------|-----------------|
| Function | Displays information | Allows user interaction |
| Example | Blog, News site | Facebook, Gmail |
| Requires Backend | No | Yes |
Enter fullscreen mode Exit fullscreen mode 
✨ Quick Summary
Enter fullscreen mode Exit fullscreen mode 

| Concept | Meaning | Example |
|---------|---------|---------|
| **HTML** | The language used to create web pages | `<h1>Welcome</h1>` |
| **HyperText** | Clickable text that links to another page | `<a href="page.html">Click Here</a>` |
| **Markup Language** | Uses tags to structure content | `<p>Hello</p>` |
| **Web Page** | A single document in a browser | Google homepage |
| **Web Application** | A website with interactive features | Twitter, YouTube |
Enter fullscreen mode Exit fullscreen mode

HTML (Hypertext Markup Language) is a language used to create the structure and content of websites. It is the foundation upon which all websites are built, and every web developer must have a good understanding of HTML to create dynamic and engaging web pages.

HTML stands for Hyper Text Markup Language
HTML was invented by Tim Berners-Lee in 1991.
HTML is used for creating web pages and web applications.
It is used to describe the structure of Web pages using markup tags.
Markup languages use sets of markup tags to characterize text elements within a document, which gives instructions to the web browsers on how the document should appear.

Important HTML Tags
Enter fullscreen mode Exit fullscreen mode

There are several important HTML tags that you should be familiar with as a web developer. Here are some of the most commonly used HTML tags:

<html>: This tag is the root element of an HTML document and contains all the other HTML elements.
<head>: This tag contains information about the document, such as the title, which is displayed in the browser's tab.
<body>: This tag contains the content of the web page.
<h1> to <h6>: These tags are used for headings, with <h1> being the most important heading and <h6> being the least important.
<p>: This tag is used for paragraphs.
<a>: This tag is used for links.
<ul> and <li>: These tags are used to create unordered lists.
<ol> and <li>: These tags are used to create ordered lists.
<img>: This tag is used to embed images in a web page.
Enter fullscreen mode Exit fullscreen mode 
Fundamental of HTML Tags
Enter fullscreen mode Exit fullscreen mode

HTML is written in the form of HTML elements consisting of markup tags. These markup tags are the fundamental characteristic of HTML. Every markup tag is composed of a keyword, surrounded by angle brackets <tagname>content</tagname>.

HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag.
The end tag is written like the start tag, but with a slash before the tag name.

Basic Structure of HTML
Enter fullscreen mode Exit fullscreen mode

Image description

The <html></html> tag is the highest level element that encloses every HTML page.
The <head></head> tag holds meta information such as the page’s title and charset.
The <body></body> tag encloses all the content that appears on the page.

Image description

Image description

Image description

Image description

Image description

Image description

1️⃣ Client (Frontend) – The part users see and interact with.
2️⃣ Server (Backend) – The part that processes requests, handles logic,
and connects to the database.

https://youtu.be/2WsianlhxDI?si=vVcWuVEylfGdyBQd
Enter fullscreen mode Exit fullscreen mode 
1️⃣ What is a Client?
Enter fullscreen mode Exit fullscreen mode

The client is the user-facing part of an application.
It sends requests to the server and receives responses from it.
In MERN, the client is built using React.js.

📌 Example Clients:
Enter fullscreen mode Exit fullscreen mode

Websites like Instagram, Facebook, and Twitter.
Mobile apps that fetch data from an online server.

📝 Key Notes on Clients
Enter fullscreen mode Exit fullscreen mode

✔ Runs in the web browser.
✔ Displays UI elements like buttons, forms, and text.
✔ Sends requests to the backend to fetch or update data.

2️⃣ What is a Server?
Enter fullscreen mode Exit fullscreen mode

The server processes requests from the client and sends back responses.
It performs operations like fetching, storing, or updating data in a database.
In MERN, the backend is built using Node.js and Express.js.

📌 Example Servers:
Enter fullscreen mode Exit fullscreen mode

Instagram’s backend, which stores user posts and comments.
Google’s search engine backend, which processes search queries.

📝 Key Notes on Servers
Enter fullscreen mode Exit fullscreen mode

✔ Runs on a web server (e.g., localhost or cloud).
✔ Handles data processing and business logic.
✔ Communicates with the database (MongoDB) to store or retrieve data.

3️⃣ How Do Client and Server Communicate?
Enter fullscreen mode Exit fullscreen mode

1️⃣ The client makes a request (e.g., "Show me all posts").
2️⃣ The server processes the request and fetches data from the database.
3️⃣ The server sends a response back to the client.
4️⃣ The client receives the response and displays the data to the user.

🖼️ Diagram: How Client and Server Work Together
Enter fullscreen mode Exit fullscreen mode 

[ Client (React.js) ] <-------> [ Server (Node.js + Express) ] <-------> [ Database (MongoDB) ]
Enter fullscreen mode Exit fullscreen mode

The client requests data from the server.
The server fetches data from the database and sends it back.
The client then displays the data to the user.

✨ Summary
Enter fullscreen mode Exit fullscreen mode 

Feature Client (Frontend)   Server (Backend)
Technology Used React.js    Node.js, Express.js
Main Role   Displays UI, makes requests Handles logic, processes data
Where It Runs   User’s browser    Web server (e.g., localhost, cloud)
Example Instagram website   Instagram’s backend handling posts
Enter fullscreen mode Exit fullscreen mode 
1️⃣ What is LAN? (Local Area Network)
Enter fullscreen mode Exit fullscreen mode

A LAN (Local Area Network) is a network that connects computers and devices within a small area, such as:

A home
An office
A school
Enter fullscreen mode Exit fullscreen mode 
📝 Key Points about LAN
Enter fullscreen mode Exit fullscreen mode

✔ Connects multiple devices using Wi-Fi or Ethernet cables.
✔ Devices in a LAN can share files, printers, and internet connections.
✔ A router or switch is used to manage the connections.

📌 Example of LAN:
Enter fullscreen mode Exit fullscreen mode

In a school, all computers in the computer lab are connected via LAN.
In an office, employees share files through a LAN network.

🖼️ Simple LAN Diagram
Enter fullscreen mode Exit fullscreen mode 

[ Computer 1 ] --|
[ Computer 2 ] --| --> (Router) --> Internet
[ Printer     ] --|
Enter fullscreen mode Exit fullscreen mode 
2️⃣ What is HTTP? (HyperText Transfer Protocol)
Enter fullscreen mode Exit fullscreen mode

HTTP (HyperText Transfer Protocol) is a set of rules for how web browsers and servers communicate over the internet.

📝 Key Points about HTTP
Enter fullscreen mode Exit fullscreen mode

✔ It allows users to access websites.
✔ It works on port 80 by default.
✔ Websites using HTTP are not encrypted (unsafe).

📌 Example of HTTP in Action:
Enter fullscreen mode Exit fullscreen mode

When you type http://www.google.com in a browser, your browser requests the webpage from Google’s server using HTTP.
The server then sends back the page, and you see it on your screen.

🖼️ Simple HTTP Communication
Enter fullscreen mode Exit fullscreen mode 

[ Client (Browser) ] ---> HTTP Request ---> [ Server ]
[ Server ] ---> HTTP Response ---> [ Client (Browser) ]
Enter fullscreen mode Exit fullscreen mode 
🚀 What is HTTPS?
Enter fullscreen mode Exit fullscreen mode 
HTTPS (HyperText Transfer Protocol Secure) is the secure version of HTTP.
Enter fullscreen mode Exit fullscreen mode

✔ It encrypts data using SSL/TLS to protect user information.
✔ Websites with HTTPS use port 443 instead of port 80.
✔ Example: https://www.google.com (🔒 Secure website).

✨ Quick Comparison:
Enter fullscreen mode Exit fullscreen mode 

Feature LAN HTTP
Meaning Local network for connecting devices    Protocol for web communication
Used For    Sharing files, internet, printers in small areas    Accessing websites over the internet
Security    Private (limited to local area) Public (open to internet users)
Example Office network, school Wi-Fi    Web browsing (Google, Facebook)
Enter fullscreen mode Exit fullscreen mode 
1️⃣ What is an IP Address? (Internet Protocol Address)
Enter fullscreen mode Exit fullscreen mode

An IP address is a unique number assigned to every device connected to the internet. It helps computers identify and communicate with each other.

📝 Key Points about IP Address
Enter fullscreen mode Exit fullscreen mode

✔ It acts like a home address for devices on the internet.
✔ Websites, computers, and phones all have IP addresses.
✔ Example of an IP address:

IPv4: 192.168.1.1
IPv6: 2001:0db8:85a3:0000:0000:8a2e:0370:7334

📌 Example of How IP Works
Enter fullscreen mode Exit fullscreen mode

When you type www.google.com, your browser translates it to Google’s IP address (e.g., 142.250.190.14) to load the website.

🖼️ Simple IP Address Concept
Enter fullscreen mode Exit fullscreen mode 

[ Your Device ] ---> [ 142.250.190.14 (Google Server) ] ---> [ Google Website ]
Enter fullscreen mode Exit fullscreen mode 
2️⃣ What is a Domain Name?
Enter fullscreen mode Exit fullscreen mode

A domain name is a human-friendly name that represents an IP address. Since IP addresses are hard to remember, domain names make it easier.

📝 Key Points about Domain Names
Enter fullscreen mode Exit fullscreen mode

✔ A domain name is like a nickname for an IP address.
✔ Instead of typing 142.250.190.14, you can type www.google.com.
✔ Domain names have extensions like .com, .org, .net.

📌 Example of Domain Names and IPs
Enter fullscreen mode Exit fullscreen mode

Domain Name IP Address
www.google.com 142.250.190.14
www.facebook.com 157.240.221.35

🖼️ Simple Domain Name Concept
Enter fullscreen mode Exit fullscreen mode 

[ You ] ---> [ www.google.com ] ---> [ 142.250.190.14 (Google Server) ] ---> [ Google Website ]
Enter fullscreen mode Exit fullscreen mode 
3️⃣ What is Web Hosting?
Enter fullscreen mode Exit fullscreen mode

Web hosting is a service that stores and serves website files on the internet.

📝 Key Points about Web Hosting
Enter fullscreen mode Exit fullscreen mode

✔ It is like renting space on a computer (server) to store your website.
✔ Web hosting providers include GoDaddy, Bluehost, Hostinger, AWS, and Google Cloud.
✔ Types of hosting:

Shared Hosting (Cheap, multiple websites share one server).
VPS Hosting (Private server space, better performance).
Dedicated Hosting (Entire server for one website, expensive).

📌 Example of Web Hosting in Action
Enter fullscreen mode Exit fullscreen mode

When you visit www.example.com, the browser contacts the hosting server, retrieves website files, and displays the page.
🖼️ Simple Web Hosting Concept


 [ You ] ---> [ www.example.com ] ---> [ Hosting Server (Files, Images, Database) ] ---> [ Website Loads ]
Enter fullscreen mode Exit fullscreen mode 
✨ Quick Summary
Enter fullscreen mode Exit fullscreen mode 

Feature IP Address  Domain Name Web Hosting
Meaning Unique identifier for devices   Human-friendly name for websites    Stores website files
Example 142.250.190.14  www.google.com  Hostinger, Bluehost
Purpose Identifies devices/websites Makes web addresses easy to remember    Stores websites for online access
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Top comments (0)