Scribd
Upload
14 views37 pages

WSMT Lab Manual-2210520137

The document is a lab workbook for the Web Social Media & Technology course, detailing various experiments and coding exercises for students. It includes a list of 26 experiments, covering topics such as HTML programming, CSS styling, and social media account management. Each experiment provides coding examples and instructions for creating web pages and utilizing social media effectively.

Uploaded by

artsketch40
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views37 pages

WSMT Lab Manual-2210520137

The document is a lab workbook for the Web Social Media & Technology course, detailing various experiments and coding exercises for students. It includes a list of 26 experiments, covering topics such as HTML programming, CSS styling, and social media account management. Each experiment provides coding examples and instructions for creating web pages and utilizing social media effectively.

Uploaded by

artsketch40
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

BCA

Department of Computer Science Applications

LAB WORKBOOK
22CA1209 – Web Social Media & Technology

2210520137 - Web Social Media & Technology lab manual


22CA1209
Web Social Media & Technology

LABORATORY WORK BOOK

Student Name K. Saranya


Reg. No 2210520137
Year 1
Semester 2
Section 1
Faculty Mr. Trinath Basu

2210520137 - Web Social Media & Technology lab manual


LIST OF EXPERIMENTS
EXPT.NO TITLE PAGE No
1 Build a Program to describe various text formatting commands
2 To prepare a Program to Display an Unordered list and Ordered list
3 Create a html Program to Create a Table
4 Construct a Home page for an online book store web site
5 Create a Login Page for online book store web site
6 Construct a catalogue page for online book store web site
7 Build a Registration page for online book store web site
8 To prepare a CSS document on In line style sheet
9 Build a CSS document on Internal style sheet
10 Create a CSS document on External style sheet
11 Develop a CSS document on placing Images at different position
12 Plan for a CSS document for demonstrating the Selectors
13 Improve a CSS document for demonstrating the box model
14 Invent a CSS document for demonstrating conflict resolution
15 Creation of a LinkedIn profile
16 Utilize LinkedIn for Career Search
17 Examine the LinkedIn profile to make sure it is ready for
networking, job searching and applying for positions
18 Building a strategically network on LinkedIn
19 Practically define how you create the Facebook Account
20 Demonstrate creation of Twitter account
21 Building of Blogs
22 Sign up in various social media platforms and implement the
security measures
23 Search people in the network using various social media platforms
and connect with them, also learn how to save content and filter it
later
24 Identify and use security features for each platform
25 Identify and apply the safety guidelines when communicating on
social media platforms
26 Utilize the social media Outcasts for developing personal blog and
channels in YouTube

2210520137 - Web Social Media & Technology lab manual


Experiment 1: Build a HTML Program to describe various text formatting commands
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Formatting Commands</title>
</head>
<body>
<h1>Text Formatting Commands</h1>
<p><b>Bold Text:</b> The <b>bold</b> tag is used to make text bold.</p>
<p><i>Italic Text:</i> The <i>italic</i> tag is used to make text italic.</p>
<p><u>Underlined Text:</u> The <u>underline</u> tag is used to make text
underlined.</p>
<p><strike>Strikethrough Text:</strike> The <strike>strike</strike> tag is used to make text
strikethrough.</p>
<p><sup>Superscript Text:</sup> The <sup>superscript</sup> tag is used to make text
appear as a superscript.</p>
<p><sub>Subscript Text:</sub> The <sub>subscript</sub> tag is used to make text appear
as a subscript.</p>
<p><small>Small Text:</small> The <small>small</small> tag is used to make text appear
smaller than surrounding text.</p>
<p><big>Big Text:</big> The <big>big</big> tag is used to make text appear larger than
surrounding text.</p>
<p><code>Code Text:</code> The <code>code</code> tag is used to display computer
code.</p>
<p><kbd>Keyboard Text:</kbd> The <kbd>kbd</kbd> tag is used to indicate keyboard
input.</p>
</body>
</html>

Output:
1
Page

2210520137 – Web Social Media & Technology Manual


Experiment 2: Prepare a HTML program to Display an Unordered list and Ordered list
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Types of Lists</title>
</head>
<body>
<h1>Ordered List</h1>
<ol>
<li>Apple</li>
<li>Grapes</li>
<li>Watermelon</li>
</ol>
<h1>Unordered List</h1>
<ul>
<li>Purple</li>
<li>Green</li>
<li>Black</li>
</ul>
<h1>Nested List</h1>
<ol>
<li>Apple</li>
<li>Grapes
<ul>
<li>Green Grapes</li>
<li>Black Grapes</li>
</ul>
</li>
<li>Kiwi</li>
</ol>
</body>
</html>
2
Page

2210520137 – Web Social Media & Technology Manual


Output:

Experiment 3: Create a html Program to Create a Table


Code:
<html>
<head>
<title>Time Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid black;

th {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>Time Table</h1>
<table>
<thead>
<tr>
<th>Time</th>
<th>8:15 AM - 9:05 AM</th>
<th>9:05 AM - 9:55 AM</th>
<th>9:55 AM - 10:45 AM</th>
3

<th>10:45 AM - 11:00 AM</th>


Page

<th>11:00 AM - 11:50 AM</th>

2210520137 – Web Social Media & Technology Manual


<th>11:50 AM - 12:40 AM</th>
<th>12:40 PM - 1:20 PM</th>
<th>1:20 PM - 2:10 PM</th>
<th>2:10 PM - 3:00 PM</th>
<th>3:00 PM - 3:50 PM</th>
<th>3:50 PM - 5:15 PM</th>
<th>5:15 PM - 6:00 PM</th>
<th>6:00 PM - 9:00 PM</th>
<th>9:00 PM - 9:30 PM</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td colspan="2", bgcolor=Gray>DS(L)</td>
<td bgcolor=Coral>OS(L)</td>
<td>BREAK</td>
<td colspan="2", bgcolor=Yellow>EP(P)</td>
<td>LUNCH BREAK</td>
<td colspan="2", bgcolor=Lavender>CODING</td>
<td bgcolor=Brown>LIBRARY</td>
<td>TRAVEL</td>
<td>REST</td>
<td>DINNER</td>
<td>STUDY</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2", bgcolor=Orange>DBMS(L)</td>
<td bgcolor=Red>WSMT(P)</td>
<td>BREAK</td>
<td bgcolor=Coral>OS(T)</td>
<td bgcolor=LightGreen>HOBBY CLUB</td>
<td>LUNCH BREAK</td>
<td colspan="2", bgcolor=LightBlue>OOP(P)</td>
<td bgcolor=LightBlue>OOP(L)</td>
<td>TRAVEL</td>
<td>REST</td>
<td>DINNER</td>
<td>STUDY</td>
</tr>
<tr>
<td>Wednesday</td>
<td colspan="2", bgcolor=Orange>DBMS(S)</td>
<td bgcolor=Red>WSMT(P)</td>
<td>BREAK</td>
<td colspan="2", bgcolor=LightBlue>OOP(S)</td>
<td>LUNCH BREAK</td>
4

<td colspan="2", bgcolor=Gray>DS(P)</td>


Page

<td bgcolor=Brown>LIBRARY</td>

2210520137 – Web Social Media & Technology Manual


<td>TRAVEL</td>
<td>REST</td>
<td>DINNER</td>
<td>STUDY</td>
</tr>
<tr>
<td>Thursday</td>
<td colspan="2", bgcolor=Orange>DBMS(P)</td>
<td bgcolor=Orange>DBMS(L)</td>
<td>BREAK</td>
<td colspan="2", bgcolor=Coral>OS(L)</td>
<td>LUNCH BREAK</td>
<td bgcolor=LightGreen>HOBBY CLUB</td>
<td colspan="2", bgcolor=Yellow>EP(P)</td>
<td>TRAVEL</td>
<td>REST</td>
<td>DINNER</td>
<td>STUDY</td>
</tr>
<tr>
<td>Friday</td>
<td colspan="2", bgcolor=Lavender>CODING</td>
<td bgcolor=Gray>DS(L)</td>
<td>BREAK</td>
<td colspan="2", bgcolor=LightBlue>OOP(P)</td>
<td>LUNCH BREAK</td>
<td colspan="2", bgcolor=Orange>DBMS(S)</td>
<td bgcolor=LightPink>SPORTS</td>
<td>TRAVEL</td>
<td>REST</td>
<td>DINNER</td>
<td>STUDY</td>
</tr>
<tr>
<td>Saturday</td>
<td colspan="2", bgcolor=LightBlue>OOP(S)</td>
<td bgcolor=LightGreen>HOBBY CLUB</td>
<td>BREAK</td>
<td colspan="2", bgcolor=Red>WSMT(P)</td>
<td>LUNCH BREAK</td>
<td bgcolor=LightGreen>HOBBY CLUB</td>
<td bgcolor=LightPink>SPORTS</td>
<td bgcolor=LightPink>SPORTS</td>
<td>TRAVEL</td>
<td>REST</td>
<td>DINNER</td>
<td>STUDY</td>
</tr>
5

</tbody>
Page

</table>

2210520137 – Web Social Media & Technology Manual


Output:

Experiment 4: Construct a Home page for an online book store web site
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BookStore - Home</title>
<style>
body {
background-color: #bc61f5;
font-family: Monospaced, courier;
}
header {
background-color: #b24bf3;
border-bottom: 1px solid #ccc;
padding: 10px;
text-align: center;
}
h1 {
color: white;
font-size: 48px;
margin-top: 0;
}
h6{
color: #461257;
font-size: 12px;
text-align: right;
}
h2{
6

color: white;
Page

font-size:20px;

2210520137 – Web Social Media & Technology Manual


margin-top: 0;
}
input[type="search"] {
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
font-size: 16px;
width: 300px;
}
button[type="submit"] {
background-color: #461257;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
margin-left: -5px;
}
nav {
color: white;
display: flex;
justify-content: center;
padding: 10px;
}
main{
color: white;
background-color: ;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
img{
height: 220px;
width: 160px;
}

section {
margin-bottom: 40px;
}
footer {
background-color: #3a1b2f;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
7

</head>
Page

<body>

2210520137 – Web Social Media & Technology Manual


<header>
<h1>BookTopia <h2>World of ebooks</h2> </h1>

<form action="/search">
<input type="search" placeholder="Search for your favourite book..">
<button type="submit">Search</button>
</form>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Authors</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Welcome to BookTopia!</h2>
<p>Here at BookTopia, we offer a wide variety of books from different genres and
authors. Our collection includes both fiction and non-fiction books, as well as eBooks and
audiobooks. Our books are hand-picked by our team of experts to ensure the highest quality
and relevance.</p>
</section>
<hr>
<section>
<h2>Featured Books</h2>
<ul>
<li>
<img
src="https://upload.wikimedia.org/wikipedia/commons/7/7a/The_Great_Gatsby_Cover_1925
_Retouched.jpg" alt="The Great Gatsby">
<sub>Rs. 1,143.00</sub>
<h3>The Great Gatsby by F. Scott Fitzgerald</h3>
<p>The novel chronicles an era that Fitzgerald himself dubbed the "Jazz Age".
Following the shock and chaos of World War I, American society enjoyed unprecedented
levels of prosperity during the "roaring" 1920s as the economy soared. At the same time,
Prohibition, the ban on the sale and manufacture of alcohol as mandated by the Eighteenth
Amendment, made millionaires out of bootleggers and led to an increase in organized crime,
for example the Jewish mafia. Although Fitzgerald, like Nick Carraway in his novel, idolized
the riches and glamor of the age, he was uncomfortable with the unrestrained materialism and
the lack of morality that went with it, a kind of decadence.</p>
<a href="#">Buy now</a>
</li>
<hr>
<li>
<img src="https://m.media-amazon.com/images/I/91bYsX41DVL.jpg"
alt="Atomic Habits">
8

<sub>Rs. 799.00</sub>
Page

<h3>Atomic Habits by James Clear</h3>

2210520137 – Web Social Media & Technology Manual


<p>The book guides you through an easy & proven way to build good habits &
break bad ones.</p>
<a href="#">Buy now</a>
</li>
<hr>
<li>
<img src="https://rvalibrary.org/wp-
content/uploads/2021/07/27362503._SY475_.jpg" alt="It Ends With Us">
<sub>Rs. 2,042.00</sub>
<h3>It Ends With Us by Colleen Hoover </h3>
<p>It Ends with Us is a book that follows a girl named Lily who has just moved
and is ready to start her life after college. Lily then meets a guy named Ryle and she falls for
him. As she is developing feelings for Ryle, Atlas, her first love, reappears and challenges the
relationship between Lily and Ryle.</p>
<a href="#">Buy now</a>
</li>
</ul>
</section>
<h6>Feedback: <br> Contact us: +918309532178 <br> Email us:
booktopia@gmail.com</h6>
</main>
<footer>
<p>&copy; 2023 BookTopia. All Rights Reserved.</p>
</footer>
</body>
</html>

Output:

9
Page

2210520137 – Web Social Media & Technology Manual


Experiment 5: Create a Login Page for online book store web site.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
box-sizing: border-box;
}

body {
font-family: Times New Roman, sans-serif;
background-color: #c576f6;
}

.container {
margin: 0 auto;
max-width: 400px;
background-color:Lavender;
padding: 20px;
margin-top: 50px;
border-radius: 5px;
10

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);


}
Page

2210520137 – Web Social Media & Technology Manual


h1 {
text-align: center;
margin-bottom: 30px;
}

form {
display: flex;
flex-direction: column;
}

label {
font-weight: bold;
margin-bottom: 5px;
}

input[type="email"],
input[type="password"] {
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

button[type="submit"] {
background-color: #593876;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
margin-top: 20px;
}
</style>
<title>Login to BookTopia</title>
</head>
<body>
<div class="container">
<h1>Login to BookTopia</h1>
<form>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="password">Password</label>
<input type="password" id="password" name="password" required>
11

<button type="submit">Login</button>
</form>
Page

</div>

2210520137 – Web Social Media & Technology Manual


</body>
</html>

Output:

Experiment 6: Construct a catalogue page for online book store web site.
Code:
<!DOCTYPE html>
<html>
<style>
*{
box-sizing: border-box;
}
body {
font-family: Monospaced, courier;
background-color: #bc61f5;
}
header {
background-color: #461257;
color: white;
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
h1 {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
12

justify-content: center;
Page

2210520137 – Web Social Media & Technology Manual


.book {
width: 300px;
margin: 20px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
text-align: center;
}

.book img {
width: 200px;
height: 250px;
margin-bottom: 10px;
}

h2 {
margin-top: 0;
}

p{
margin-bottom: 5px;
}

button {
background-color: #461257;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
margin-top: 20px;
}

</style>
<head>
<title>Book Catalogue</title>
</head>
<body>
<header>
<h1>Book Catalogue</h1>
</header>
<main>
<section class="book">
<img
src="https://upload.wikimedia.org/wikipedia/commons/7/7a/The_Great_Gatsby_Cover_1925
13

_Retouched.jpg" alt="Book Cover">


<h2>The Great Gatsby</h2>
Page

<p>by F. Scott Fitzgerald</p>

2210520137 – Web Social Media & Technology Manual


<p>&#x20B9;1,067.78</p>
<button>Add to Cart</button>
</section>
<section class="book">
<img src="https://m.media-amazon.com/images/I/91bYsX41DVL.jpg" alt="Book Cover">
<h2>Atomic Habits </h2>
<p>by James Clear</p>
<p>&#x20B9;903.38</p>
<button>Add to Cart</button>
</section>
<section class="book">
<img src="https://rvalibrary.org/wp-content/uploads/2021/07/27362503._SY475_.jpg"
alt="Book Cover">
<h2>It Ends With Us</h2>
<p>by Colleen Hoover</p>
<p>&#x20B9;821.18</p>
<button>Add to Cart</button>
</section>
</main>
</body>
</html>
Output:

Experiment 7: Build a Registration page for online book store web site
Code:
<!DOCTYPE html>
<html>
<style>
*{
box-sizing: border-box;
}
14

body {
Page

background-color: #bc61f5;

2210520137 – Web Social Media & Technology Manual


font-family: Monospaced, courier;
}
header {
background-color: #461257;
color: white;
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
h1 {
margin: 0;
}
main {
display: flex;
justify-content: center;
}
form {
width: 400px;
background-color: #f4e3ff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
}
button {
background-color: #461257;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
margin-top: 20px;
}
</style>
15

<head>
<title>Registration Page</title>
Page

</head>

2210520137 – Web Social Media & Technology Manual


<body>
<header>
<h1>Register for an Account</h1>
</header>
<main>
<form id="registration-form" onsubmit="validateForm(event)">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>
<button type="submit">Register</button>
</form>
</main>
<script>
function validateForm(event) {
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var confirm-password = document.getElementById("confirm-password").value;
if (username == "") {
alert("Please enter your full name.");
return false;
}
if (email == "") {
alert("Please enter your email address.");
return false;
}
if (password == "") {
alert("Please enter a password.");
return false;
}
if (confirm-password == "") {
alert("Please confirm your password.");
return false;
}
16

if (password !=confirm-password) {
alert("Passwords do not match.");
Page

return false;

2210520137 – Web Social Media & Technology Manual


}
alert("Registration successful!");
document.getElementById("registration-form").reset();
}
</script>
</body>
</html>

Output:

Experiment 8: To prepare a CSS document on In line style sheet


Code:
<!DOCTYPE html>
<html lang="en">
<body style="background-color:#bc61f5";>
<h1 style="color:purple;padding:30px;">This is a heading</h1>
<p style="color:#461257;text-align:center;font-family:Monospace;font-size:46px;">This is a
paragraph</p>
</body>
</html>
17
Page

2210520137 – Web Social Media & Technology Manual


Output:

Experiment 9: Build a CSS document on Internal style sheet


Code:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: #bc61f5;
color: #461257;
font-family: Monospace, sans-serif;
}
</style>
</head>
<body>
<h1>HELLO!</h1>
<p>This is an example of an internal CSS style sheet.</p>
</body>
</html>
18
Page

2210520137 – Web Social Media & Technology Manual


Output:

Experiment 10: Create a CSS document on External style sheet


Code:
HTML:
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is an example of an HTML document that uses an external CSS style sheet.</p>
</body>
</html>
Styles.css:
body {
background-color: #bc61f5;
font-family:Monospace, sans-serif;
}

h1 {
color: #461257;
font-size: 36px;
}

p{
font-size: 18px;
19

line-height: 1.5;
margin: 20px;
Page

2210520137 – Web Social Media & Technology Manual


Output:

Experiment 11: Develop a CSS document on placing Images at different position


Code:
<!DOCTYPE html>
<html>
<head>
<title>Placing Images at Different Positions</title>
<style>
img {
position: absolute;
}
.top-left {
top: 2;
left: 0;
width: 280px;
height: 300px;
}
.top-right {
top: 2;
right: 0;
width: 280px;
height: 280px;
}
.bottom-left {
bottom: 0;
20

left: 2;
Page

width: 280px;

2210520137 – Web Social Media & Technology Manual


height: 280px;
}
.bottom-right {
bottom: 0;
right: 0;
width: 280px;
height: 280px;
}
</style>
</head>
<body>
<h1>Placing Images at Different Positions</h1>
<img src="https://staticg.sportskeeda.com/editor/2022/07/26258-16581970257970-
1920.jpg?w=840" class="top-left" alt="Image at Top-Left">
<img src="https://sportshub.cbsistatic.com/i/2021/03/17/38c095a5-50bf-436b-8da5-
948ac4769426/dio-brando-2-1194154.jpg" class="top-right" alt="Image at Top-Right">
<img src="https://i.pinimg.com/736x/a6/07/d5/a607d51d954e3c9efe9e423488e8e09c.jpg"
class="bottom-left" alt="Image at Bottom-Left">
<img src="https://i.pinimg.com/736x/7a/e7/43/7ae743e5b7ca2a8b3b547ddde1586388.jpg"
class="bottom-right" alt="Image at Bottom-Right">
</body>
</html>
Output:

21
Page

2210520137 – Web Social Media & Technology Manual


Experiment 12: Plan for a CSS document for demonstrating the Selectors
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
/* Universal Selector */
*{
margin: 0;
padding: 0;
}
h1 {
font-size: 2em;
}
.Purple {
color: purple;
}
#Violet {
color: Violet;
}
[href="https://www.google.com"] {
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
p::first-letter {
font-size: 2em;
font-weight: bold;
}
.container p {
font-style: italic;
}
.container > h2 {
margin-bottom: 10px;
}
h2 + p {
color: #461257;
}
h2 ~ p {
border-top: 1px solid gray;
}
</style>
</head>
<body>
22

<div class="container">
<h1>Welcome to CSS Selectors Example</h1>
Page

<p class="Purple">This is an example of how to use various CSS selectors in your

2210520137 – Web Social Media & Technology Manual


code.</p>
<p id="Violet">The ID selector is used to select a specific element based on its unique ID
attribute.</p>
<a href="https://www.google.com">This is a link with an attribute selector applied to
it.</a>
<h2>Selector Combinators</h2>
<p>The following paragraphs demonstrate the different types of selector combinators in
CSS:</p>
<p>Descendant combinator: This is a paragraph inside a div with class "container".</p>
<h2>Child Combinator</h2>
<p>This is a paragraph that is a direct child of the div with class "container".</p>
<h2>Adjacent Sibling Combinator</h2>
<p>This is a paragraph that comes immediately after an h2 element.</p>
<p>This is another paragraph that comes immediately after an h2 element.</p>
<h2>General Sibling Combinator</h2>
<p>This is a paragraph that comes after an h2 element, but is not an immediate sibling.</p>
<p>This is another paragraph that comes after an h2 element, but is not an immediate
sibling.</p>
</div>
</body>
</html>

Output:

23
Page

2210520137 – Web Social Media & Technology Manual


Experiment 13: Improve a CSS document for demonstrating the box model
Code:
<!DOCTYPE html>
<html>
<head>
<title>Box Model Demo</title>
<style>
.box {
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
border: 2px solid #461257;
background-color: #bc61f5;
}
</style>
</head>
<body>
<div class="box">This is a box element.</div>
</body>
</html>

Output:

24
Page

2210520137 – Web Social Media & Technology Manual


Experiment 14: Invent a CSS document for demonstrating conflict resolution
Code:
<!DOCTYPE html>
<html>
<head>
<title>Conflict Resolution Demo</title>
<style>
h1 {
color: purple;
font-size: 24px;
font-weight: bold;
}
#special-header {
color: violet;
font-size: 36px;
}
</style>
</head>
<body>
<h1 id="special-header">This is a special header!</h1>
<h1>This is a regular header.</h1>
</body>
</html>

Output:

25
Page

2210520137 – Web Social Media & Technology Manual


Experiment 15: Creation of a LinkedIn profile

Steps to create a LinkedIn profile:


 Go to the LinkedIn website (www.linkedin.com) and click on the "Join now" button.
 Enter your first and last name, email address, and a password. Then click "Agree &
Join" to create your account.
 Add your job title, company, and education information on the next page.
 Customize your profile by adding a profile picture, headline, summary, and any
additional information you want to share.
 Start building your network by connecting with colleagues, classmates, and other
professionals in your industry.
 Join groups related to your profession or interests to expand your network and engage
with others in your field.
 Share updates, articles, and other content on your profile to showcase your expertise
and engage with your network.
 Explore job opportunities on LinkedIn's job board or through your connections.
 Engage with others by commenting on their posts, sending messages, and
participating in group discussions.
 Continuously update your profile and stay active on the platform to build your
professional brand and expand your network.

Experiment 16: Utilize LinkedIn for Career Search


List of steps to utilize LinkedIn for career search:

 Optimize your LinkedIn profile: Make sure your LinkedIn profile is complete, up-to-
date, and optimized for search engines. Highlight your skills, experiences, and
accomplishments that are relevant to your career goals.
 Build your network: Connect with professionals in your industry, including former
colleagues, classmates, and industry leaders. Join LinkedIn groups related to your
profession or interests to expand your network and engage with others in your field.
 Use job search tools: LinkedIn offers a range of job search tools, including job alerts,
job recommendations, and a job search engine. Use these tools to find job postings
that match your skills and interests.
 Apply for jobs: Apply for job postings that interest you and match your skills and
qualifications. Make sure to customize your application materials, including your
resume and cover letter, for each job you apply to.
 Research companies: Use LinkedIn to research companies you're interested in and
learn about their culture, values, and employees. Use this information to tailor your
job search and make informed decisions about job opportunities.
 Engage with your network: Engage with your network by sharing updates, articles,
26

and other content related to your industry. Comment on and share others' posts to
build relationships and stay top of mind with your connections.
Page

2210520137 – Web Social Media & Technology Manual


 Use LinkedIn Learning: Take advantage of LinkedIn Learning to develop new skills
and enhance your professional expertise. This can help you stand out to potential
employers and expand your career opportunities.
 Stay organized: Keep track of your job search activities, including applications and
networking efforts. Use LinkedIn's job application tracker to stay organized and
ensure you're following up on job opportunities.

Experiment 17: Examine the LinkedIn profile to make sure it is ready for networking, job
searching and applying for positions
 Update your profile picture: Choose a professional profile picture that reflects your
personal brand and industry.
 Optimize your headline: Use your headline to convey your current or desired job title
and highlight your areas of expertise.
 Customize your URL: Customize your LinkedIn URL to make it easy for others to
find you and remember your profile.
 Highlight your achievements: Use your summary, experience, and education sections
to showcase your achievements, skills, and experiences.
 Utilize keywords: Incorporate relevant keywords into your profile to improve your
search engine visibility and attract potential employers.
 Get recommendations: Request recommendations from colleagues, mentors, or other
professionals to add credibility to your profile.
 Join relevant groups: Join LinkedIn groups related to your industry or interests to
expand your network and stay up-to-date on industry news and trends.
 Engage with others: Engage with others by commenting on and sharing relevant
content, and responding to messages and connection requests.
Experiment 18: Building a strategically network on LinkedIn
 Define your goals: Determine what you want to achieve from your networking efforts
on LinkedIn. Are you looking for a new job, building business connections, or
seeking mentorship opportunities?
 Optimize your profile: Ensure that your LinkedIn profile is complete and showcases
your skills, experiences, and achievements.
 Connect with relevant people: Identify people who are relevant to your goals and
connect with them on LinkedIn. Send personalized connection requests and follow-up
with a message after they accept.
 Engage with your network: Engage with your connections by commenting on and
sharing their content, sending messages, and offering support or assistance where
possible.
 Join groups: Join LinkedIn groups related to your industry, interests, or goals to
expand your network and stay up-to-date on industry news and trends.
 Attend events: Attend virtual or in-person events hosted by LinkedIn or other
organizations to meet new people and build your network.
27

 Offer value: Offer value to your connections by sharing relevant content, offering
Page

your expertise or advice, and connecting them with others in your network.

2210520137 – Web Social Media & Technology Manual


 Build relationships: Focus on building authentic and meaningful relationships with
your connections rather than simply collecting numbers. Invest time in getting to
know people and helping them achieve their goals.
Experiment 19: Practically define how you create the Facebook Account
 Go to the Facebook website: Visit the Facebook homepage at www.facebook.com.
 Sign up: Click on the "Create New Account" button. You will need to provide your
name, mobile number or email address, password, date of birth, and gender. Click
"Sign Up" when you are done.
 Confirm your email or mobile number: Facebook will send a confirmation code to
your email or mobile number. Enter the code when prompted to confirm your
account.
 Complete your profile: Add a profile picture, cover photo, and other details to your
profile. This will help other people find you on Facebook and learn more about you.
 Find friends: Facebook will suggest people for you to connect with based on your
email contacts and other factors. You can also search for friends by name and send
them friend requests.
 Customize your settings: Go to the settings menu to customize your privacy and
security settings. You can control who can see your posts, who can send you friend
requests, and more.
Experiment 20: Demonstrate creation of Twitter account

 Go to the Twitter website: Open a web browser and navigate to the Twitter homepage
at https://twitter.com/.
 Sign up: Click on the "Sign up" button on the homepage. You will be taken to the
registration page.
 Provide your information: On the registration page, enter your full name, phone
number or email address, and a password that meets the requirements.
 Choose your username: Choose a unique username that will identify you on Twitter.
Your username cannot exceed 15 characters and should reflect your personal or
business brand.
 Verify your account: Once you have entered your information and chosen your
username, Twitter will send a verification code to your phone or email address. Enter
the code to verify your account.
 Set up your profile: Customize your Twitter profile by adding a profile picture, header
image, bio, and website link. You can also choose to follow suggested accounts based
on your interests.
 Start tweeting: Begin using Twitter by composing your first tweet, following other
users, and engaging with the community.
28
Page

2210520137 – Web Social Media & Technology Manual


Experiment 21: Building of Blogs
Code:
<!DOCTYPE html>
<html>
<head><h1>MY PERSONAL BLOG</h1></head>
<body>
<body bgcolor="lavender">
<label> Name: K. SARANYA</label><br>
<label>DOB: 26/01/2004</label><br>
<label> ADDRESS:Plot No. 109, Flat No. 501, Padmasai Towers, Motinagar, Hyderabad,
Telangana-500018</label> <br>
<label>Gender: Female</label><br>
<label> Email Address: saranyakosuru10@gmail.com</label><br>
<label>Phone Number: 8309532178</label><br>
<img src="C:\Users\HP\Downloads\pp photo.jpg" height="250px"width="250px"><br>
<p><h1>EDUCATION:</h1><br>
SSC -<br>
CGPA -9.3<br>
SRI SAI SIDDHARTHA SCHOOL<br>
2018-2019<br>
INTERMEDIATE-<br>
SRI CHAITANYA JUNIOR COLLEGE <br>
CGPA-93%<br>
2019-2021<br>
UNDER GRADUATE -<br>
KL UNVERSITY <br>
2022-2025<br>
<p><h1> PERSONAL DETAILS:</h1><br>

<label>FATHER NAME: K. TRINADH</label><br>


<label>MOTHER NAME: K. BHARATHI</label><br>
<label>SIBLING: K. NILAYA</label><br>
<label>FATHER PROFESSION: private sector</label><br>
<label>MOTHER PROFESSION: Central govt. employee</label><br>
<label>LANGUAGES KNOWN: English, Hindi, Telugu</label><br>
<label>STRENGTHS: Teamwork, Communication skills, Hardworking</label><br>
<label>WEAKNESSES: Inexperienced, Nervousness</label><br>
<label>HOBBIES: Cooking, Drawing, Playing video games</label><br>
</html>
29
Page

2210520137 – Web Social Media & Technology Manual


Output:

Experiment 22: Sign up in various social media platforms and implement the security
measures
 Choose strong and unique passwords: Create a strong password that includes a
combination of uppercase and lowercase letters, numbers, and special characters.
Avoid using easily guessable information such as your name or birthdate.
Additionally, use a different password for each social media account to minimize the
impact of a potential data breach.
 Enable two-factor authentication (2FA): Two-factor authentication adds an extra layer
of security to your account. It typically requires you to provide a second verification
factor, such as a temporary code sent to your mobile device or generated by an
authentication app. Enable 2FA on your social media accounts whenever possible.
 Verify the platform's security settings: During the sign-up process, most social media
platforms provide security and privacy settings that allow you to control who can
view your posts, access your personal information, and interact with you. Review
30

these settings and configure them according to your preferences to ensure your
privacy.
Page

2210520137 – Web Social Media & Technology Manual


 Be cautious with personal information: Be mindful of the information you provide
during the sign-up process. While some platforms may require certain information for
account verification, avoid sharing excessive personal details that could potentially be
used for identity theft or other malicious activities.
 Keep your software up to date: Regularly update your operating system, web browser,
and any other software you use to access social media platforms. Software updates
often contain important security patches that help protect against known
vulnerabilities.
 Be wary of phishing attempts: Phishing is a common method used by attackers to
trick users into revealing their login credentials or other sensitive information. Be
cautious of emails, messages, or links that appear suspicious or ask for your social
media login details. Always verify the authenticity of such requests before providing
any information.
 Regularly review your account activity: Periodically review your social media
account activity, including login history and connected devices. Most platforms allow
you to view these details in your account settings. If you notice any suspicious
activity or unrecognized devices, take immediate action to secure your account

Experiment 23: Search people in the network using various social media platforms and
connect with them, also learn how to save content and filter it later
 Sign up or log in to the social media platforms of your choice (e.g., Facebook,
Twitter, LinkedIn, Instagram).
 Utilize the search functions on these platforms to find specific people or groups by
their names, usernames, or relevant keywords.
 Explore different search filters provided by each platform to narrow down your search
results based on location, interests, occupation, etc.
 Connect with people on social media:
 Once you find someone you'd like to connect with, you can typically send them a
friend request (on Facebook), follow them (on Twitter and Instagram), or connect
with them (on LinkedIn).
 Some platforms also allow you to send direct messages (DMs) to initiate
conversations with people.
 Save content for later reference:
 Many social media platforms provide options to save or bookmark content for later
viewing.
 On Facebook, you can click on the three-dot menu on a post and choose "Save Post"
to save it to your Saved section.
 On Twitter, you can click on the bookmark icon (represented by a ribbon) below a
tweet to save it to your Bookmarks.
 On Instagram, you can tap the bookmark icon (represented by a flag) below a post to
save it to your Saved collection.

31

Filter and organize saved content:


 Different platforms offer different ways to organize and filter your saved content.
Page

2210520137 – Web Social Media & Technology Manual


 On Facebook, you can access your saved items from the menu on the left-hand side of
your News Feed and use tags to categorize them.
 On Twitter, you can access your Bookmarks from your profile page and organize
them by creating different bookmark folders.
 On Instagram, you can access your Saved posts by tapping on your profile icon,
selecting the three-line menu, and choosing "Saved." You can further categorize them
by creating collections.

Experiment 24: Identify and use security features for each platform
a. Twitter:
1) Two-Factor Authentication (2FA): Twitter supports 2FA, which adds an extra layer of
security by requiring users to provide a verification code in addition to their password
when logging in.
1) Login Verification: This feature enables users to set up additional security checks, such as
requiring a verification code sent to their mobile device or email address when logging in
from a new device or browser.
2) Password Reset: Twitter provides a password reset option through registered email
addresses or phone numbers, allowing users to regain access to their accounts if they
forget their passwords.
3) App Permissions: Users can manage the permissions granted to third-party applications
and revoke access to their Twitter accounts if needed.
4) Privacy Settings: Twitter offers various privacy settings that allow users to control who
can view their tweets, tag them in photos, send direct messages, and more.
b. LinkedIn:
1) Two-Step Verification: LinkedIn supports 2FA, requiring users to provide a
verification code in addition to their password during login.
2) Account Recovery: In case users forget their passwords, LinkedIn provides account
recovery options via email or phone number.
3) App Permissions: Users can review and manage the permissions granted to third-party
applications and revoke access to their LinkedIn accounts.
4) Privacy Settings: LinkedIn offers privacy settings that allow users to control who can
view their profile, contact them, see their connections, and more.
5) Profile Visibility: Users can choose what information is visible to the public and their
connections on their LinkedIn profiles.
c. Facebook:
1) Two-Factor Authentication (2FA): Facebook supports 2FA, providing an extra layer
of security during login by requiring a verification code in addition to the password.
2) Login Alerts: Users can enable login alerts to receive notifications whenever their
Facebook accounts are accessed from an unrecognized device or browser.
3) Trusted Contacts: Facebook allows users to designate trusted contacts who can help
them regain access to their accounts if they are locked out.
4) App Permissions: Users can review and manage the permissions granted to third-party
32

applications and revoke access to their Facebook accounts.


5) Privacy Settings: Facebook offers a wide range of privacy settings to control who can
Page

see posts, friend requests, profile information, and more.

2210520137 – Web Social Media & Technology Manual


Experiment 25: Identify and apply the safety guidelines when communicating on social
media platforms

 Use Strong and Unique Passwords: Create strong passwords that are difficult to guess
and use a unique password for each social media account. Avoid using easily
guessable information like your name or birthdate.
 Enable Two-Factor Authentication (2FA): Enable 2FA whenever possible to add an
extra layer of security to your social media accounts. This typically involves
providing a verification code or using a security app in addition to your password
during login.
 Be Mindful of Privacy Settings: Familiarize yourself with the privacy settings of the
social media platforms you use. Adjust your settings to control who can see your
posts, photos, and personal information. Regularly review and update these settings as
needed.
 Be Selective with Friend Requests and Connections: Only accept friend requests or
connection requests from individuals you know and trust. Be cautious of accepting
requests from unknown or suspicious profiles.
 Think Before You Share: Exercise caution when sharing personal information or
sensitive content on social media. Be aware that anything you post can potentially be
viewed by a wide audience. Avoid sharing your address, phone number, financial
information, or any other sensitive data publicly.
 Avoid Clicking on Suspicious Links: Be cautious of clicking on links shared by
unknown or untrusted sources. These links can lead to malicious websites or phishing
attempts. If something looks suspicious, verify it independently before clicking on it.
 Report and Block Abusive or Harassing Users: If you encounter abusive or harassing
behavior on social media, report the user to the platform and consider blocking them.
Protect your mental well-being by removing toxic individuals from your online
experience.
 Be Wary of Impersonation: Be cautious of fake profiles or accounts impersonating
someone else. Verify the authenticity of accounts, especially if they request personal
information or financial transactions.
 Educate Yourself About Scams and Hoaxes: Stay informed about common social
media scams and hoaxes. Be skeptical of offers that seem too good to be true or
requests for personal information. Learn to recognize warning signs and avoid falling
victim to scams.
 Regularly Update and Secure Your Devices: Keep your devices, including
smartphones and computers, updated with the latest security patches and antivirus
software. Use strong device passwords or biometric authentication methods to protect
your accounts.
33
Page

2210520137 – Web Social Media & Technology Manual


Experiment 26: Utilize the social media Outcasts for developing personal blog and channels
in YouTube

 Define Your Niche: Determine the specific topic or theme that your blog and
YouTube channel will focus on. Choose something you are passionate about and that
aligns with your expertise or interests. This will help you attract and engage with a
target audience.
 Set Clear Goals: Establish goals for your blog and YouTube channel. Define what you
want to achieve, whether it's building a community, sharing knowledge, promoting a
cause, or generating income. Having clear goals will guide your content creation and
overall strategy.
 Create Compelling Content: Develop high-quality and engaging content that provides
value to your target audience. Craft well-written blog posts and create visually
appealing videos. Consistency is key, so establish a content schedule and stick to it.
 Optimize for Search Engines: Utilize search engine optimization (SEO) techniques to
increase the visibility of your blog and YouTube channel. Research relevant keywords
and incorporate them strategically in your blog posts and video titles, descriptions,
and tags.
 Engage with Your Audience: Actively interact with your audience by responding to
comments, messages, and feedback. Encourage discussion and create a sense of
community around your content. This will help build loyalty and attract new
followers.
 Promote Your Content: Share your blog posts and YouTube videos on other social
media platforms to expand your reach. Utilize platforms like Twitter, Facebook,
Instagram, or LinkedIn to drive traffic to your blog and channel.
 Collaborate with Others: Collaborate with other bloggers, YouTubers, or influencers
in your niche. This can help you tap into their audience and gain exposure. Consider
guest posting on established blogs or participating in collaborative videos.
 Utilize Analytics: Monitor the performance of your blog and YouTube channel using
analytics tools provided by the platforms. Analyze data on views, engagement,
demographics, and audience retention. Use these insights to optimize your content
strategy and make data-driven decisions.
 Stay Consistent and Patient: Building a successful blog and YouTube channel takes
time and consistent effort. Don't get discouraged if you don't see immediate results.
Stay committed, continuously improve, and be patient as your audience grows over
time.
34
Page

2210520137 – Web Social Media & Technology Manual

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy