100 % IT TRAINING WITH PLACEMENT
VETRI TECHNOLOGY SOLUTIONS
100 % IT TRAINING WITH PLACEMENTS
ESSENTIAL SKILLSET FOR
NEW SOFTWARE DELEVOPER
Prerequisites:
1. Internet
What?
The internet is a global network that connects millions of computers
worldwide.
Why?
It allows communication, data sharing, and access to information.
How?
Devices connect to the internet via ISPs (Internet Service Providers), using
protocols like TCP/IP.
2. IP Address (Internet Protocol Address)
What?
A unique numerical label assigned to every device on a network (e.g.,
[Link]).
Why?
It helps identify and locate devices on the internet.
How?
o IPv4: [Link] (32-bit)
o IPv6: 2001:db8::ff00:42:8329 (128-bit)
Private & Confidential : Vetri Technology Solutions
1
100 % IT TRAINING WITH PLACEMENT
3. Domain Name
What?
A human-friendly name used to identify a website (e.g., [Link]).
Why?
Easier to remember than IP addresses.
How?
o The DNS (Domain Name System) converts domain names into IP
addresses.
4. WWW (World Wide Web)
What?
A collection of web pages accessed through the internet.
Why?
It allows users to access information through a browser.
How?
Websites are stored on servers and accessed using URLs.
5. URL (Uniform Resource Locator)
What?
The web address used to access a specific webpage. Example:
[Link]
Why?
It helps locate web resources.
How?
A URL consists of:
o Protocol: https://
o Domain: [Link]
o Path: /search?q=example
6. HTTP & HTTPS (Hypertext Transfer Protocol)
Private & Confidential : Vetri Technology Solutions
2
100 % IT TRAINING WITH PLACEMENT
What?
A protocol used for communication between web browsers and servers.
Why?
o HTTP transfers web pages.
o HTTPS encrypts data for security.
How?
o A browser sends an HTTP request.
o The server responds with an HTML file.
7. Browser
What?
Software used to access websites (e.g., Chrome, Firefox).
Why?
It converts HTML, CSS, and JavaScript into a user-friendly format.
How?
o The browser requests a webpage from a server.
o It then displays the content.
8. Webpage
What?
A single document on a website, written in HTML.
Why?
It provides content (text, images, videos).
How?
Webpages are stored on a server and loaded in a browser.
Private & Confidential : Vetri Technology Solutions
3
100 % IT TRAINING WITH PLACEMENT
9. Website
What?
A collection of webpages under a single domain.
Why?
It provides information, services, or interactive experiences.
How?
Websites are hosted on servers and accessed via browsers.
10. Static Website
What?
A website with fixed content that does not change dynamically.
Why?
o Simple and fast.
o No need for a database.
How?
o Built with HTML, CSS, and JavaScript.
o Stored on a web server.
11. Dynamic Website
What?
A website that changes content based on user interaction.
Why?
o Personalization (e.g., Facebook, Amazon).
o Supports login, database storage.
How?
o Uses backend languages like Python, PHP, [Link].
o Connects to a database (MySQL, MongoDB).
Private & Confidential : Vetri Technology Solutions
4
100 % IT TRAINING WITH PLACEMENT
12. Server
What?
A powerful computer that stores and delivers web pages.
Why?
It serves website content to users worldwide.
How?
o A user requests a webpage.
o The server processes and responds with data.
13. API (Application Programming Interface)
What?
A set of rules that allows different applications to communicate.
Why?
o Enables integration between different services.
o Used in web and mobile apps.
How?
o REST API uses HTTP methods (GET, POST).
o Example: A weather app fetches data from an API.
14. UTF (Unicode Transformation Format) & UTF-8
What?
A character encoding standard for text.
Why?
It supports multiple languages and special symbols.
How?
o UTF-8 stores characters efficiently (1 to 4 bytes).
Private & Confidential : Vetri Technology Solutions
5
100 % IT TRAINING WITH PLACEMENT
Day 1
HTML Basics (Structure, Tags, Forms)
Structure
HTML (HyperText Markup Language) is the skeleton of every webpage.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my first webpage.</p>
</body>
</html>
<!DOCTYPE html> - Declares this as an HTML5 document
<html> - Root element wrapping all content
<head> - Contains meta-information (not displayed)
<title> - Shows in browser tab (e.g., "My First Page")
<body> - Contains visible content
Common Tags
1. Headings (h1-h6):
<h1>Main Title</h1> <!-- Largest -->
<h3>Subheading</h3>
2. Paragraph:
<p>This is a paragraph of text that appears as a block.</p>
3. Links:
1
Private & Confidential : Vetri Technology Solutions
100 % IT TRAINING WITH PLACEMENT
<a href="[Link] Google</a>
4. Images:
<img src="[Link]" alt="Company Logo">
5. Lists:
<ul> <!-- Unordered (bullets) -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol> <!-- Ordered (numbers) -->
<li>First step</li>
<li>Second step</li>
</ol>
Forms
Forms collect user input (like login/contact forms):
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Register">
</form>
action: Where form data is sent
method: How data is sent (GET/POST)
Common input types: text, email, password, checkbox, radio, submit
2
Private & Confidential : Vetri Technology Solutions
100 % IT TRAINING WITH PLACEMENT
Real-world Examples:
1. Blog Post would use <article>, <h1> for title, <p> for content
2. E-commerce Product would use <img> for product photo, <h2> for
name, <p> for description, <form> for "Add to Cart"
3. Contact Page would have a <form> with name, email, message fields
4. Product Page → <img> (photo) + <p> (price) + <button> (Buy Now)
Day 2
Semantic HTML (Header, Nav, Section, Footer)
1. <header>
The header represents introductory content, typically at the top of a page or
section.
Example:
<header>
<h1>Tech News Daily</h1>
<p>Your source for the latest technology updates</p>
</header>
Real-world use: The blue bar at the top of Facebook's page with the logo and
search box is a header.
2. <nav>
Defines a section with navigation links.
Example:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
3
Private & Confidential : Vetri Technology Solutions
100 % IT TRAINING WITH PLACEMENT
<li><a href="/about">About Us</a></li>
</ul>
</nav>
Real-world use: Amazon's main menu with departments like "Electronics",
"Books", etc. is inside a nav element.
3. <section>
Represents a thematic grouping of content.
Example:
<section>
<h2>Latest Articles</h2>
<article>
<h3>New iPhone Released</h3>
<p>Apple announced their latest smartphone yesterday...</p>
</article>
</section>
Real-world use: On YouTube, the "Recommended videos" and "Trending videos"
are separate sections.
4. <footer>
Contains information about the containing element (author, copyright, links).
Example:
<footer>
<p>© 2023 Tech News Daily</p>
<address>Contact: editor@[Link]</address>
</footer>
Real-world use: Google's footer at the bottom of search results with links like
"Settings", "Privacy", etc.
Complete Page Example:
<body>
<header>
4
Private & Confidential : Vetri Technology Solutions
100 % IT TRAINING WITH PLACEMENT
<h1>My Blog</h1>
</header>
<nav>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a>
</nav>
<section>
<h2>Tech News</h2>
<article>
<h3>AI Breakthrough</h3>
<p>Scientists made significant progress...</p>
</article>
</section>
<footer>
<p>© 2023 My Blog</p>
</footer>
</body>
5
Private & Confidential : Vetri Technology Solutions