Uniform Resource Locator (URL)
Uniform Resource Locator (URL) refers to a web address which uniquely identifies a
document over the internet. This document can be a web page, image, audio, video or anything else
present on the web
For example, www.tutorialspoint.com/internet_technology/index.html is an URL to the
index.html which is stored on tutorialspoint web server under internet_technology directory.
URL Types:
There are two forms of URL as listed below:
1. Absolute URL
2. Relative URL
Absolute URL:
Absolute URL is a complete address of a resource on the web. This completed address
comprises of protocol used, server name, path name and file name.
For example http:// www.tutorialspoint.com / internet_technology /index.htm. where:
∙ http is the protocol.
∙ tutorialspoint.com is the server name.
∙ index.htm is the file name
The protocol part tells the web browser how to handle the file. Similarly we have some other
protocols also that can be used to create URL are:
• FTP ∙
• https ∙
• Gopher ∙
• mailto ∙
• news
Relative URL
Relative URL is a partial address of a webpage. Unlike absolute URL, the protocol and server
part are omitted from relative URL,it used for internal links i.e. to create links to file that are part of
same website as the WebPages on which you are placing the link.For example, To link an image on
tutorialspoint.com/internet_technology/internet_ reference_models,we can use the relative URL
which can take the form like /internet_technologies/internet-osi_model.jpg.
webpage creation:
1. Planning and Purpose Definition
• Goal Setting: Determine the purpose of the website (e.g., blog, business site, e-commerce).
• Audience Identification: Define your target audience (e.g., professionals, students).
• Content Planning: Organize the type of content needed (e.g., text, images, videos).
2. Wireframing and Designing
• Wireframe Creation: Create a rough sketch of the website layout. This gives a visual
structure (using tools like Adobe XD, Figma, or simple paper sketches).
• User Experience (UX) Design: Plan how users will interact with the site. Focus on usability,
navigation, and user flow.
• User Interface (UI) Design: Design the visual elements (colors, fonts, buttons, etc.). Tools like
Figma or Photoshop can help design this.
3.HTML Structure
• Create the HTML Layout: Use HTML (HyperText Markup Language) to structure the content
of the webpage.
o Define headers (<h1>, <h2>, etc.).
o Create paragraphs (<p>), lists (<ul>, <ol>), and links (<a>).
o Embed media such as images (<img>), audio, or video.
• Ensure the HTML is semantic (e.g., use <header>, <footer>, <nav>, <article> for clarity).
4.Styling with CSS
• Add Styles: Use CSS (Cascading Style Sheets) to style the website.
o Define layout (flexbox, grid, etc.).
o Adjust fonts, colors, spacing, and alignment.
o Make the site responsive (adapt it to different screen sizes using media queries).
5. Add Interactivity with JavaScript
• Basic Interactivity: Use JavaScript to add dynamic elements (e.g., form validation, interactive
buttons, animations).
• Advanced Features: Integrate JavaScript frameworks/libraries (e.g., React, Vue, or jQuery)
for complex interactions.
• AJAX/Fetch API: Use JavaScript for asynchronous requests (fetching data from APIs without
reloading the page).
6. Backend Development (Optional)
• Choose a Backend Technology: If your site needs a database or server-side logic, you need
backend programming (e.g., PHP, Node.js, Python).
• Database Integration: Set up databases (MySQL, MongoDB, etc.) to store and manage data
like user accounts, products, etc.
• Server Communication: Ensure your front end communicates with your backend properly
(using REST APIs or GraphQL).
7. Testing
• Browser Compatibility: Test the website on different browsers (Chrome, Firefox, Safari, etc.)
to ensure compatibility.
• Responsive Design: Check that the website adapts well to different devices (desktop, tablet,
mobile).
• Bug Testing: Identify and fix any functional or visual bugs.
8. Deployment
• Choose a Hosting Provider: Select where you will host your website (e.g., Netlify, GitHub
Pages, or traditional hosting like Bluehost, AWS).
• Domain Registration: Register a domain name for your website.
• Upload Files: Deploy your website to the server using FTP or Git (if using version control).
9. Maintenance and Updates
• Regular Updates: Update content, design, and code as necessary.
• Security Patches: Ensure your website remains secure by updating libraries, software, and
implementing security measures.
Example:
HTML (structure):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to CSS file -->
</head>
<body>
<header>
<h1>Welcome to My Profile</h1>
</header>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm Alex, a web developer who loves to create simple and beautiful websites.</p>
<img src="profile.jpg" alt="Profile Picture">
</section>
<section id="hobbies">
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
</ul>
</section>
<footer>
</footer>
</body>
</html>
2.CSS (styling)
/* General body styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
text-align: center;
}
/* Header styling */
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
/* About section */
#about {
background-color: white;
padding: 20px;
margin: 20px;
border-radius: 10px;
#about img {
width: 150px;
border-radius: 50%;
/* Hobbies section */
#hobbies {
background-color: white;
padding: 20px;
margin: 20px;
border-radius: 10px;
/* Footer styling */
footer {
background-color: #4CAF50;
color: white;
padding: 10px 0;
margin-top: 20px;
client server scripting webpages:
1. Client-side scripting :
Web browsers execute client-side scripting. It is used when browsers have all code. Source code is
used to transfer from webserver to user’s computer over the internet and run directly on browsers. It
is also used for validations and functionality for user events.
It allows for more interactivity. It usually performs several actions without going to the user. It cannot
be basically used to connect to databases on a web server. These scripts cannot access the file
system that resides in the web browser. Pages are altered on basis of the user’s choice. It can also be
used to create “cookies” that store data on the user’s computer.
2. Server-side scripting :
Web servers are used to execute server-side scripting. They are basically used to create dynamic
pages. It can also access the file system residing at the webserver. A server-side environment that
runs on a scripting language is a web server.
Scripts can be written in any of a number of server-side scripting languages available. It is used to
retrieve and generate content for dynamic pages. It is used to require to download plugins. In this
load times are generally faster than client-side scripting. When you need to store and retrieve
information a database will be used to contain data. It can use huge resources of the server. It
reduces client-side computation overhead. The server sends pages to the request of the user/client.
Difference between client-side scripting and server-side scripting :
Client-side scripting Server-side scripting
Source code is not visible to the user because its
output
Source code is visible to the user.
of server-sideside is an HTML page.
Its main function is to provide the Its primary function is to manipulate and provide
requested output to the end user. access to the respective database as per the request.
In this any server-side technology can be used and it
It usually depends on the browser and does not
its version. depend on the client.
Client-side scripting Server-side scripting
It runs on the user’s computer. It runs on the webserver.
There are many advantages linked with
The primary advantage is its ability to highly
this like faster.
customize, response
response times, a more interactive
requirements, access rights based on user.
application.
It does not provide security for data. It provides more security for data.
It is a technique used in web It is a technique that uses scripts on the webserver
development in which scripts run on the to produce a response that is customized for each
client’s browser. client’s request.
HTML, CSS, and javascript are used. PHP, Python, Java, Ruby are used.
No need of interaction with the server. It is all about interacting with the servers.
It reduces load on processing unit of the
It surge the processing load on the server.
server.
Audio video tags:
1. Audio Tag
The <audio> tag is used to embed sound files in a webpage. You can provide multiple sources to
support different formats (e.g., MP3, OGG) so that different browsers can play the audio.
Basic Audio Example:
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Video Tag
The <video> tag is used to embed video content. Like the <audio> tag, it also supports multiple
formats and can display controls.
Basic Video Example:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
form creation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit-form" method="post">
<!-- Name Field -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required><br><br>
<!-- Email Field -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email" required><br><br>
<!-- Password Field -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<!-- Radio Buttons (Gender) -->
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<!-- Dropdown Menu (Country) -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="other">Other</option>
</select><br><br>
<!-- Checkbox (Subscribe to newsletter) -->
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to our newsletter</label><br><br>
<!-- Text Area (Message) -->
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Write your message
here"></textarea><br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS models:
CSS models refer to various conceptual frameworks used to understand and design how elements
are displayed and styled in a web page. These models define how CSS interacts with HTML elements
to create layout, positioning, and styles. The most important CSS models are:
1. Box Model
The CSS box model is the most fundamental concept in web design. Every HTML element is treated
as a rectangular box, consisting of four parts:
• Content: The actual content of the element (text, images, etc.).
• Padding: Space between the content and the border. This adds space inside the element.
• Border: The edge of the element surrounding the padding (can have styles like solid, dashed,
etc.).
• Margin: Space outside the border, used to create space between elements.
Box Model Structure:
.element {
width: 200px; /* Width of the content area */
padding: 20px; /* Space between content and border */
border: 5px solid black; /* Border around the element */
margin: 10px; /* Space outside the border */
2. Flexbox Model
The flexbox (Flexible Box Layout) model is used for arranging items in one dimension (either
horizontally or vertically) and helps align, distribute, and manage the space between them.
Key Concepts:
• Flex Container: The parent element that has display: flex; applied to it. It defines the flex
context.
• Flex Items: The direct children of the flex container, which are laid out according to flexbox
rules.
Example:
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between; /* Distributes items */
.flex-item {
background-color: lightcoral;
padding: 10px;
margin: 5px;
</style>
3. Grid Model
The CSS grid layout model is a powerful two-dimensional system for creating complex web page
layouts. It allows you to divide the page into rows and columns.
Key Concepts:
• Grid Container: The parent element with display: grid; that defines the grid structure.
• Grid Items: The direct children of the grid container that are positioned within the grid.
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal-width columns */
gap: 10px; /* Space between grid items */
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
</style>
4. Positioning Model
CSS also uses different positioning methods to lay out elements on the page.
Types of Positioning:
Relative Positioning:
.element {
position: relative;
top: 10px; /* Moves the element down 10px from its original position */
left: 20px; /* Moves the element right 20px */
Static Positioning:
.element {
position: static;
Fixed Positioning:
.element {
position: fixed;
bottom: 0;
right: 0;
}
Sticky Positioning:
.element {
position: sticky;
top: 0;
5. Display Model
The display property defines how an element is displayed. Common values include:
block
.element {
display: block;
inline
.element {
display: inline;
inline-block:
.element {
display: inline-block;
None
.element {
display: none;
tags elements:
1. Document Structure Tags
• <!DOCTYPE html>: Declares the document type and version of HTML.
• <html>: The root element of an HTML document.
• <head>: Contains meta-information about the document, such as title and links to
stylesheets.
• <title>: Sets the title of the document, displayed in the browser's title bar or tab.
• <body>: Contains the content of the HTML document, including text, images, and other
elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
2. Text Formatting Tags
• <h1> to <h6>: Headings, with <h1> being the highest level and <h6> the lowest.
• <p>: Paragraphs of text.
• <strong>: Makes text bold and indicates strong importance.
• <em>: Italicizes text and indicates emphasis.
• <br>: Inserts a line break.
• <hr>: Creates a horizontal rule (line) to separate content.
<h1>Main Heading</h1>
<p>This is a <strong>paragraph</strong> with some <em>emphasis</em>.</p>
<br>
<hr>
3. Links and Anchors
• <a>: Defines hyperlinks to other pages or resources. The href attribute specifies the URL.
• <link>: Specifies relationships between the current document and external resources
(usually for linking stylesheets).
<a href="https://www.example.com">Visit Example</a>
<link rel="stylesheet" href="styles.css">
4. Lists
• <ul>: Defines an unordered (bulleted) list.
• <ol>: Defines an ordered (numbered) list.
• <li>: Defines a list item, used inside <ul> or <ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
5. Forms
• <form>: Defines an HTML form for user input. The action attribute specifies where the form
data will be sent.
• <input>: Defines an input field. The type attribute specifies the type of input (e.g., text,
email, password).
• <label>: Defines a label for an input element.
• <textarea>: Defines a multi-line text input field.
• <button>: Defines a clickable button.
• <select>: Defines a drop-down list. The <option> tag is used to specify options in the list.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<button type="submit">Submit</button>
</form>
6. Multimedia
• <img>: Embeds an image. The src attribute specifies the image URL, and the alt attribute
provides alternative text.
• <audio>: Embeds audio content. The controls attribute provides playback controls.
• <video>: Embeds video content. The controls attribute provides playback controls.
<img src="image.jpg" alt="Description of image">
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<video controls width="600">
<source src="video.mp4" type="video/mp4">
</video>
7. Tables
• <table>: Defines a table.
• <tr>: Defines a table row.
• <th>: Defines a table header cell.
• <td>: Defines a table data cell.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
web browser:
A web browser is a software application that enables users to access, view, and interact with
websites and web applications on the internet. Browsers translate web code (written in HTML, CSS,
and JavaScript) into visual content that users can interact with.
Key Functions of a Web Browser:
1. Rendering Web Pages:
o Converts HTML, CSS, and JavaScript into a visual representation of a webpage.
o Handles multimedia content like images, audio, and video.
2. Navigation:
o Allows users to enter URLs (web addresses) to visit different websites.
o Provides navigation buttons (e.g., back, forward, refresh) for moving through web
pages.
3. User Interface:
o Includes elements like the address bar (where you type URLs), bookmarks, tabs, and
settings.
o Provides tools for managing web content and settings (e.g., cookies, privacy
settings).
4. Interactivity:
o Executes JavaScript code to enable dynamic content and interactions on web pages
(e.g., forms, animations).
o Supports features like filling out forms, clicking buttons, and interacting with
dynamic elements.
5. Security:
o Implements security features to protect users from malicious websites and content
(e.g., HTTPS, pop-up blockers).
o Manages cookies and privacy settings to ensure secure browsing.
6. Performance:
o Optimizes loading times and performance of web pages.
o Includes caching mechanisms to store frequently accessed content and reduce
loading times.
Popular Web Browsers:
1. Google Chrome:
o Developed by Google.
o Known for its speed, performance, and extensive extension support.
o Regularly updated with new features and security improvements.
2. Mozilla Firefox:
o Developed by Mozilla Foundation.
o Emphasizes privacy, open-source development, and customization.
o Supports a wide range of extensions and developer tools.
3. Safari:
o Developed by Apple.
o Optimized for Apple devices (macOS and iOS).
o Known for its energy efficiency and integration with the Apple ecosystem.
4. Microsoft Edge:
o Developed by Microsoft.
o The new version is built on Chromium, the same engine as Chrome.
o Includes features like integration with Microsoft services and improved security.
5. Opera:
o Developed by Opera Software.
o Known for its unique features like a built-in VPN and ad blocker.
o Offers a customizable user interface and additional tools for browsing.
Web Browser Components:
1. Address Bar:
o Displays the current URL and allows users to enter a new one.
2. Tabs:
o Enable users to open multiple web pages in a single browser window.
3. Bookmark Bar:
o Provides quick access to frequently visited websites.
4. Menu Bar:
o Includes options for settings, extensions, history, and more.
5. Status Bar:
o Displays information about the loading status of a web page and any potential
security warnings.
6. Developer Tools:
o Offers tools for inspecting and debugging web pages (e.g., HTML/CSS inspection,
JavaScript console).
How Web Browsers Work:
1. Request and Response:
o When a user enters a URL, the browser sends a request to the web server hosting
the site.
o The server responds with the requested web page, which the browser then
processes and displays.
2. Rendering Engine:
o Parses HTML to build the Document Object Model (DOM).
o Applies CSS to style the DOM elements and lay them out on the page.
o Executes JavaScript to add interactivity and dynamic content.
3. Network Communication:
o Uses protocols like HTTP or HTTPS to communicate with web servers.
o Handles data transfer, including requesting resources and sending form submissions.
4. Caching:
o Stores copies of frequently accessed resources (like images and stylesheets) to
improve loading times.
5. Security:
o Ensures safe browsing by managing certificates, blocking malicious content, and
enforcing security protocols.
Types of css:
CSS (Cascading Style Sheets) is used to style and lay out web pages. There are several ways to apply
CSS to HTML documents, each with its own purpose and use cases. Here’s a breakdown of the main
types of CSS:
1. Inline CSS
Inline CSS involves adding styles directly within an HTML element using the style attribute. This
method is useful for quick, one-off styles or for overriding external or internal styles.
Example:
<p style="color: blue; font-size: 20px;">This is a blue colored and larger text.</p>
2. Internal CSS
Internal CSS involves placing styles within a <style> tag in the <head> section of an HTML document.
This method is useful for applying styles to a single HTML document without affecting others.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightgray;
p{
color: green;
font-size: 18px;
</style>
</head>
<body>
<p>This is a green colored text on a light gray background.</p>
</body>
</html>
3. External CSS
External CSS involves placing styles in a separate CSS file, which is then linked to HTML documents
using the <link> tag in the <head> section. This method is ideal for applying styles across multiple
pages or an entire website.
Example:
CSS File (styles.css):
body {
background-color: lightblue;
p{
color: red;
font-size: 16px;
}
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a red colored text on a light blue background.</p>
</body>
</html>
