BWD QUESTIONS

1.
Creating an HTML document, Mark up Tags, Heading-Paragraphs, Line Breaks,

HTML Tags.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Document</title>
</head>
<body>
<h1>This is a Heading Level 1</h1>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
hendrerit urna non ipsum consectetur, non ultricies justo vestibulum. Phasellus
sagittis orci in urna placerat, ac feugiat mauris mattis.</p>
<h2>This is a Heading Level 2</h2>
<p>This is another paragraph. Nullam et risus a risus gravida euismod. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce
suscipit lectus nec ligula rutrum, ac finibus est euismod. </p>
<br>
<p>This is a paragraph with a line break above it. A line break is created using the "br"
tag.</p>
<ul>
<li>This is a list item in an unordered list.</li>
<li>This is another list item.</li>
</ul>
<ol>
<li>This is a list item in an ordered list.</li>
<li>This is another list item.</li>
</ol>
</body>
</html>
Output:
2. Write a Source code for Working with Text , Working with Lists in Html, Tables and
Frames , Working with Hyperlinks, Images and Multimedia ,Working with Forms
and controls
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Working with Text</title>
</head>
<body>
<h1>Text Formatting</h1>
<p>This is a <strong>strong</strong> text.</p>
<p>This is an <em>emphasized</em> text.</p>
<p>This is a <u>underlined</u> text.</p>
<p>This is a <s>strikethrough</s> text.</p>
<p>This is a <code>code</code> text.</p>
<p>This is a <sup>superscript</sup> text.</p>
<p>This is a <sub>subscript</sub> text.</p>
<h1>Text Alignment</h1>
<p style="text-align: left;">This is a left-aligned text.</p>
<p style="text-align: center;">This is a center-aligned text.</p>
<p style="text-align: right;">This is a right-aligned text.</p>
<h1>Lists</h1>
<ul>
<li>Unordered list item 1</li>
</ul>
<ol>
<li>Ordered list item 1</li>
</ol>
<h1>Blockquotes</h1>
<blockquote>
<p>"The best way to predict your future is to create it." - Abraham Lincoln</p>
</blockquote>
<h1>Links</h1>
<p>Visit <a href="https://www.example.com">Example</a> website.</p>
<h1>Anchor Links</h1>
<p><a href="#section1">Go to Section 1</a></p>
<p><a href="#section2">Go to Section 2</a></p>
<h1>Section 1</h1>
<p>This is the content of Section 1.</p>
<h1>Section 2</h1>
<p>This is the content of Section 2.</p>
</body>
</html>
Output:
3. Write a Source code in HTML for Working with Tables and Frames
Source Code:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
</tr>
<tr>
</tr>
</table>
<table width="35%">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:
Source Code for Frames:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">

<frame name = "top" src = "D:/BWD/sample.png" />
<frame name = "main" src = D:/BWD/sample_document.png" />
<frame name = "bottom" src = D:/BWD/welcome to html.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
Output:
4. Write a Source code in HTML for Working with Images and Multimedia.
Source Code:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
<img src="MainBlock.jpg" alt="RIT MainBlock">
</body>
</html>
Output:
5. Write a Source code in HTML for Working with Forms and Controls
Source Code:
<!DOCTYPE html>
<html>
<body>

<label>Name:</label>
<input type="text" id="name" name="name"><br><br>

<label>Message:</label>
<textarea id="message" name="message" rows="5"></textarea><br><br>

<label><input type="radio" id="option1" name="option" value="1"> Option 1</label>

<label><input type="radio" id="option2" name="option" value="2"> Option 2</label>
<br><br>

<label><input type="checkbox" id="checkbox1" name="option[]" value="1"> Option

1</label>
<label><input type="checkbox" id="checkbox2" name="option[]" value="2"> Option
2</label><br><br>

<label for="dropdown">Select an option:</label>
<select id="dropdown" name="option">
<option value="1">Option 1</option>
</select><br><br>

<input type="submit" value="Submit"><br><br>

<input type="reset" value="Reset">
</body>
</html>
Output:
6. Create a Style Sheet in html using External CSS
Source Code: styles.css
/* styles.css */
/* Target all paragraphs */
p{
font-size: 24px;
color: #4B0082;
}
/* Target all elements with the class "highlight" */
.highlight {
background-color: gray;
}
Source Code: index.html

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p> This is a paragraph.</p>
<p class="highlight"> This is a highlighted paragraph.</p>
</body>
</html>
Output:
7. Create a style sheet in html document using CSS Properties
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the background color of all paragraphs to light blue */
p{
background-color: #ADD8E6;
}
/* Set the text color of all paragraphs to dark gray */
p{
color: #444;
}
/* Set the font of all paragraphs to Arial */

p{
font-family: Arial, sans-serif;
}
/* Set the font size of all paragraphs to 16 pixels */

p{
font-size: 16px;
}
/* Set a red, solid border with a width of 2 pixels around all images */
img {
border: 2px solid red;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Here's some text in a paragraph.</p>
<img src="example.png" alt="An example image">
</body>
</html>
Output:
8. Create a CSS styling with block elements and objects and working with Lists and
Tables
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the background color of the body to Cornsilk */
body {
background-color: #FFF8DC;
}
/* Style an unordered list */

ul {
list-style: none;
padding: 0;
}
/* Style the list items */

li {
margin-bottom: 10px;
}
/* Add a background color and padding to the table cells */

td {
background-color: #7FFFD4;
padding: 10px;
}
/* Add a border to the table cells */

td {
border: 1px solid #CCC;
}
/* Add a background color and padding to the table headers */

th {
background-color: #8A2BE2;
padding: 10px;
}
/* Add a border to the table headers */

th {
border: 1px solid #CCC;
}
</style>
</head>
<body>
<section>
<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>
<section>
<h2>Table</h2>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</section>
</body>
</html>
Output:
9. Create a Source Code for CSS ID and Class.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: blue;
color: white;
}
.text {
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to my website!</h1>
</div>
<div class="text">
<p>This is some sample text.</p>
</div>
</body>
</html>
Output:
10. Create a Source code for Box Model:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>This is some sample text.</p>
</div>
</body>
</html>
Output:
11. Create a CSS Advanced (Grouping, Dimension, Display, Positioning, Floating,

Align,Pseudo class, Navigation Bar, Image Sprites, Attribute selectors), CSS color.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Advanced CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
</div>
<div class="hidden">This element is hidden</div>
<div class="absolute">This element is absolutely positioned</div>
<div class="relative">This element is relatively positioned</div>
<div class="float-left">This element is floated left</div>
<div class="float-right">This element is floated right</div>
<div class="center">This element is centered</div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#" class="active">Link 3</a>
<div class="sprite sprite1"></div>
<a href="#" target="_blank">This link opens in a new tab</a>
</body>
</html>
SOURCE CODE CSS:
/* Grouping */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container div {
margin: 10px;
}
/* Dimension */
.box {
width: 100px;
height: 100px;
}
/* Display */
.hidden {
display: none;
}
/* Positioning */
.absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.relative {
position: relative;
top: 50px;
}
/* Floating */
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Align */
.center {
text-align: center;
}
/* Pseudo-classes */
a:hover {
color: red;
}
input:focus {
border-color: blue;
}
/* Navigation Bar */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
/* Image Sprites */
.sprite {
background-image: url("sprites.png");
background-repeat: no-repeat;
width: 50px;
height: 50px;
}
.sprite1 {
background-position: 0px 0px;
}
.sprite2 {
background-position: -50px 0px;
}
.sprite3 {
background-position: -100px 0px;
}
/* Attribute Selectors */
a[target="_blank"] {
background-color: yellow;
}
/* CSS Color */
.color-red {
color: red;
}
.color-blue {
color: blue;
}
.color-green {
color: green;
}
.color-yellow {
color: yellow;
}
.color-purple {
color: purple;
}
Note: In the HTML code, the CSS file is linked using the link tag in the head section. Make
sure the CSS file is saved as style.css in the same directory as the HTML file. The CSS color
section has been added at the end of the CSS code, with classes for different colors
Output:
12. Creating page Layout and Site Designs
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet massa at
justo facilisis commodo. Nulla facilisi. Ut vitae turpis vel diam interdum ultrices vitae et
turpis.</p>
</section>
<section>
<h2>Another Section Heading</h2>
<p>Phasellus scelerisque, arcu a aliquet rutrum, dui ipsum commodo nibh, quis dictum
turpis mi et nisl. Etiam non lectus a velit placerat efficitur. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</main>
<footer>
<p>© 2023 MyWebsite.com. All rights reserved.</p>
</footer>
</body>
</html>
SOURCE CODE CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin: 0 1rem;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
section {
margin-bottom: 2rem;
}
h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
p{
font-size: 1rem;
line-height: 1.5;
}
footer {
color: #fff;
padding: 1rem;
text-align: center;
}
OUTPUT:
13. What is JavaScript and what is its role in web development?
JavaScript is a high-level programming language primarily used for client-side web
development. It was created to add interactivity and dynamic behavior to websites. Here's an
explanation of JavaScript and its role in web development:
JavaScript is a versatile scripting language that runs on the client-side, meaning it is executed
by web browsers. It provides the ability to manipulate web page elements, respond to user
actions, and dynamically update the content of a web page without requiring a server-side
round trip.
The role of JavaScript in web development is crucial as it enables developers to create
interactive and engaging web pages. Here are some key roles and features of JavaScript in web
development:
1. Enhancing User Experience: JavaScript allows developers to create dynamic web
applications by providing features like form validation, animations, sliders, and carousels. It
helps in creating visually appealing and interactive user interfaces.
2. Manipulating HTML and CSS: JavaScript can modify the structure and style of HTML
elements on a web page. It can change content, modify styles, add or remove elements, and
handle events triggered by user interactions.
3. Handling User Interactions: JavaScript enables developers to respond to user actions such
as button clicks, mouse movements, keystrokes, and touch events. It allows for the creation of
responsive and interactive web experiences.
4. Communicating with Servers: JavaScript can make HTTP requests to servers and retrieve
data asynchronously, without requiring a page reload. This functionality, known as AJAX
(Asynchronous JavaScript and XML), allows for the seamless updating of content on a web
page.
5. Building Web Applications: JavaScript frameworks and libraries like React, Angular, and
Vue.js provide a structured way to develop complex web applications. They offer reusable
components, state management, and advanced routing capabilities.
6. Browser Compatibility: JavaScript is supported by all modern web browsers, making it a
universal language for client-side scripting. It ensures that web applications can run
consistently across different browsers and devices.
Overall, JavaScript plays a vital role in web development by adding interactivity,
responsiveness, and dynamic behavior to websites, making them more user-friendly and
engaging.
14. What are variables and Functions in JavaScript and how are they declared?
Variables in JavaScript:
In JavaScript, variables are used to store values. They are declared using the var, let, or const
keyword. The var keyword is used to declare variables that can be globally or locally scoped.
The let keyword is used to declare block-scoped variables that can be reassigned. The const
keyword is used to declare block-scoped variables that cannot be reassigned.
Here's an example of declaring and initializing variables in JavaScript:
var x = 5; // global variable

let y = 10; // block-scoped variable
const z = 15; // block-scoped constant
Functions in JavaScript:
Functions in JavaScript are used to group a set of statements that perform a specific task. They
can be declared using the function keyword and can accept parameters and return values.
Here's an example of a simple function in JavaScript:
function addNumbers(a, b) {
return a + b;
}
In this example, the addNumbers() function takes two parameters a and b, and returns the sum
of the two values.
Source Code:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables,Functions & Operators</h1>
<script>
// declaring and initializing variables
var x = 5;
let y = 10;
const z = 15;
// defining a function
function addNumbers(a, b) {
return a+b;
}
// using arithmetic and comparison operators

let a = 5;
let b = 10;
let c = a > b;
let d = a == b;
// outputting results to the console

console.log(x);
console.log(y);
console.log(z);
console.log(addNumbers(2, 3));
console.log(c);
console.log(d);
</script>
</body>
</html>
Output:
15. Explain the concept of JavaScript events and event handlers.
JavaScript Events and Event Handlers
JavaScript events and event handlers are used to create interactive web pages. Events are
actions or occurrences that happen in the browser, such as a user clicking a button, pressing a
key on the keyboard, or the page finishing loading. Event handlers are functions that are
executed in response to these events, and can be used to update the page or perform other
actions.
There are many types of events in JavaScript, including:
Here are some examples of JavaScript events and event handlers:

1. onclick Event: The onclick event occurs when a user clicks on an element. Here's an
example of using onclick to display an alert box when a button is clicked:
<button onclick="alert('Hello, world!')">Click me</button>
2. onsubmit Event: The onsubmit event occurs when a user submits a form. Here's an
example of using onsubmit to validate a form before submitting it:
<form onsubmit="return validateForm()">

<input type="text" name="username">
<input type="password" name="password">
<button type="submit">Submit</button>
</form>
<script>
functionvalidateForm()
{
let username = document.getElementsByName("username")[0].value;
let password = document.getElementsByName("password")[0].value;
if (username == "" || password == "")
{
alert("Please enter both username and password.");
return false;
}
return true;
}
</script>
3. onmouseover and onmouseout Events: The onmouseover event occurs when a user
moves the mouse over an element, and the onmouseout event occurs when the mouse
leaves the element. Here's an example of using onmouseover and onmouseout to change
the background color of a button when the mouse is over it:
<button onmouseover="this.style.backgroundColor='red'"onmouseout="this.style.background
Color='white'">Hover over me</button>
4. onload Event: The onload event occurs when a web page has finished loading. Here's
an example of using onload to display a welcome message when the page has loaded:
<body onload="alert('Welcome to my website!')"> 
</body>
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - Events and Event Handlers</title>
</head>
<body>
<button onclick="alert('Hello, world!')">Click me</button>
<br><br>
<input type="text" placeholder="Enter your username..." name="username">
<input type="password" placeholder="Enter your password" name="password">
<button type="submit">Submit</button>
</form>
<br><br>
<button onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroun

dColor='white'">Hover over me</button>
<script>
function validateForm() {
let username = document.getElementsByName("username")[0].value;
let password = document.getElementsByName("password")[0].value;
if (username == "" || password == "") {
alert("Please enter both username and password.");
return false;
}
return true;
}
</script>
</body>
</html>
Output:
16. Explain the concept of pattern matching in JavaScript using regular expressions.
Regular expression for matching pattern
Regular Expressions (also known as regex or regexp) are patterns used to match and manipulate
text. They are widely used in web development and programming in general to search, replace,
and validate strings.
In HTML, regex can be used to validate user input in form fields, such as email addresses,
phone numbers, and passwords. For example, a regex pattern can be used to ensure that an
email address is in the correct format (e.g. example@domain.com).
In JavaScript, regex can be used to search for patterns in strings and replace them with other
text. For example, a regex pattern can be used to search for all occurrences of a particular word
in a string and replace them with another word.
Regex patterns are constructed using a combination of special characters and normal
characters. Special characters have a special meaning in regex, such as ‘.’ which matches any
single character, ‘*’which matches zero or more occurrences of the previous character, and ‘|’
which represents an OR condition. Normal characters match themselves. For example, the
pattern ‘abc’ matches the exact string ‘abc’.
In addition to the special and normal characters, regex patterns can also use metacharacters to
represent a range of characters. For example, ‘[a-z]’ matches any lowercase letter between a
and z. Other metacharacters include ‘\d’ which matches any digit, ‘\s’ which matches any
whitespace character, and ‘\w’ which matches any word character (letter, digit, or underscore).
Regex patterns can be tested and matched against strings using the ‘test()’ and ‘match()’
methods in JavaScript. The ‘test()’ method returns true if the pattern matches the string and
false otherwise, while the ‘match()’ method returns an array of all matches in the string.
Overall, regular expressions are a powerful tool for text manipulation and can greatly simplify
and speed up certain programming tasks.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Regular Expressions Example</title>
</head>
<body>
<h1>Regular Expressions Example</h1>
<p>This page demonstrates how to use regular expressions in JavaScript.</p>
<h2>Validating Email example</h2>
<div>
<label for="email">Enter email address:</label>
<input type="text" id="email" name="email">
<button onclick="validateEmail()">Submit</button>
<p id="result"></p>
</div>
<h2>Matching a specific string example</h2>

<p>Enter a string to check if it contains the word "apple":</p>
<input type="text" id="input">
<button onclick="checkString()">Check</button>
<p id="output"></p>
<script>
// Example 1 Validate Email:
function validateEmail() {
let email = document.getElementById("email").value;
regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
let isValid = regex.test(email);
document.getElementById("result").innerHTML = "Example1: Validating input<br>
Email: " + email + "<br>Result: " + isValid + "<br><br>";
}
// Example 2: Matching a specific string

function checkString() {
let str = document.getElementById("input").value;
let regex = /apple/;
let result = regex.test(str);
let output = document.getElementById("output");
if (result) {
output.innerHTML = "The string contains 'apple'";
} else {
output.innerHTML = "The string does not contain 'apple'";
}
}
// Example 3: Replacing text

let str = "I have a dog and a cat.";
let regex = /dog/g;
let newStr = str.replace(regex, prompt('Enter the replacement text instead of DOG:'));
document.write("Example 3: Replacing text<br>");
document.write("New string: " + newStr + "<br><br>");
// Example 4: Matching a manually entered input with regular expression

const input = prompt('Enter your Phone number here like(987-897-6603):');
regex = /\d{3}-\d{3}-\d{4}/;
result = regex.test(input);
document.write("Example4: Matching a manually entered input with regular
expression<br>");
document.write(`Input: ${input}<br>`);
document.write("Result: " + result + "<br><br>");
</script>
</body>
</html>
Output:
17. How can you validate forms using JavaScript?
Source Code
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
<script type="text/javascript">
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name == "") {
document.getElementById("nameError").innerHTML = "Please
enter your name";
return false;
}
if (email == "") {
document.getElementById("emailError").innerHTML = "Please
enter your email";
return false;
}
var emailRegex = /\S+@\S+\.\S+/;

if (!emailRegex.test(email)) {
document.getElementById("emailError").innerHTML = "Please
enter a valid email";
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Form Validation Example</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<span id="nameError"></span><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span id="emailError"></span><br>
<input type="submit" value="Submit">

</form>
</body>
</html>
Output:
18. Creating a website involves several steps, including designing the layout, creating the
content, and publishing the website to a web server.
Here is an overview of the steps involved in web publishing:
1. Creating the website: The first step in web publishing is to create the website. This
involves designing the layout of the website, creating the content, and adding any
images or media files. There are many tools available for creating websites, including
website builders, content management systems (CMS), and programming languages
like HTML, CSS, and JavaScript.
2. Saving the website: Once the website is created, it needs to be saved in a format that
can be uploaded to a web server. Most website builders and CMS platforms allow you
to export the website as HTML files, which can be uploaded to a web server.
3. Working on the website: After the website is created and saved, you can make changes
to the website as needed. This can include updating the content, changing the layout, or
adding new pages.
4. Creating website structure: A website structure refers to the organization of pages
and content on a website. It is important to create a logical structure for your website,
with a clear navigation menu that allows visitors to easily find the information they are
looking for.
5. Creating titles for web pages: Each page on your website should have a unique and
descriptive title. This helps search engines understand the content of your website and
makes it easier for visitors to navigate your site.
6. Themes: Themes are pre-designed templates that can be used to customize the look
and feel of a website. Many website builders and CMS platforms offer a wide range of
themes to choose from, allowing you to create a professional-looking website without
the need for design skills.
7. Publishing the website: Once the website is complete and ready to be made public, it
needs to be uploaded to a web server. This can be done using an FTP client or through
a web hosting service. Once the website is uploaded, it can be accessed by anyone with
an internet connection.
In summary, web publishing involves creating a website, saving it in a suitable format, working
on the website, creating a structure, creating titles, selecting themes, and finally publishing the
website to a web server.
Source Code:
Main1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hi, my name is Mani and I am a web developer. I love creating
websites and learning new technologies.</p>
</section>
<section>
<h2>Recent Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
</ul>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
<section>
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
Output:
19. What are some emerging trends or technologies in web publishing that are shaping
the future of website creation?
Web hosting is a service of providing online space for storage of web pages.
These web pages are made available via World Wide Web. The companies which
offer website hosting are knownas Web hosts.
The servers on which web site is hosted remain switched on 24 x7. These servers
are run by webhosting companies. Each server has its own IP address. Since IP
addresses are difficult to remember therefore, webmaster points their domain name
to the IP address of the server their website is stored on.
It is not possible to host your website on your local computer, to do so you would
have to leaveyour computer on 24 hours a day. This is not practical and cheaper as
well. This is where web hosting companies comes in.
Types of Hosting
The following table describes different types of hosting that can be availed as per the
need:
S.N. Hosting Description
1. Shared Hosting
In shared hosting, the hosting company puts thousand of website on the same physical server. Each
customer has their own allocation of physical web space and a set of bandwidth limit. As all websites
share same physical memory, MYSQL server and Apache server, one website on the server
experiencing high traffic load will affect performance of all websites on the server.
2. Virtual Private Server VPS

It is also known as Virtual Dedicated Server. It is a server which is partitioned into smaller servers.
In this customer is given their own partition, which is installed with its own operating system. Unlike
shared hosting, VPS doesn’t share memory or processor time rather it allocates certain amount of
memory and CPU to use which means that any problem on a VPS partition on the same drive will
not affect other VPS customers.
3. Dedicated Server
In this kind of hosting, single dedicated server is setup for just one customer. It is commonly used by
the businesses that need the power, control and security that a dedicated server offers.
4. Reseller Hosting
A reseller acts as a middle man and sells hosting space of someone else’s server.
5. Grid Hosting
Instead of utilizing one server, Grid Hosting spreads resources over a large number of servers. It is
quite stable and flexible. The servers can be added or taken away from the grid without crashing the
system.
Web Hosting Companies

Following are the several companies offering web hosting service:
S.N. Hosting Company
1. Blue Host
2. Go Daddy
3. Host Gator
4. just Host
5. Laughing Squid
6. Hivelocity
7. liquid Web
8. Media TempleServInt
9. Wired Tree
10. Wild West Domains
11. Wix
12. WIPL
13. Big Rock

BWD QUESTIONS

Uploaded by

Copyright:

Available Formats

BWD QUESTIONS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BWD QUESTIONS

Uploaded by

Copyright:

Available Formats

1.

Creating an HTML document, Mark up Tags, Heading-Paragraphs, Line Breaks,

<frameset rows = "20%, 60%, 20%">

<label><input type="radio" id="option1" name="option" value="1"> Option 1</label>

<label><input type="checkbox" id="checkbox1" name="option[]" value="1"> Option

<input type="reset" value="Reset">

/* Set the font of all paragraphs to Arial */

/* Set the font size of all paragraphs to 16 pixels */

/* Style an unordered list */

/* Style the list items */

/* Add a background color and padding to the table cells */

/* Add a border to the table cells */

/* Add a background color and padding to the table headers */

/* Add a border to the table headers */

10. Create a Source code for Box Model:

11. Create a CSS Advanced (Grouping, Dimension, Display, Positioning, Floating,

SOURCE CODE CSS:

SOURCE CODE CSS:

Here's an example of declaring and initializing variables in JavaScript:

var x = 5; // global variable

Here's an example of a simple function in JavaScript:

<h1>JavaScript Variables,Functions & Operators</h1>

// using arithmetic and comparison operators

// outputting results to the console

Here are some examples of JavaScript events and event handlers:

<button onclick="alert('Hello, world!')">Click me</button>

<form onsubmit="return validateForm()">

<button onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroun

Regular expression for matching pattern

<h2>Matching a specific string example</h2>

// Example 2: Matching a specific string

// Example 3: Replacing text

// Example 4: Matching a manually entered input with regular expression

var emailRegex = /\S+@\S+\.\S+/;

<input type="submit" value="Submit">

2. Virtual Private Server VPS

Web Hosting Companies

You might also like