1. HTML Structure (بنيادي HTML جو ڍانچو)
Sindhi: Web Develpment Course Class 17
HTML ھڪ زبان آھي جيڪا ويب پيج ٺاھڻ لاءِ استعمال ڪئي ويندي آھي. ھن ڪوڊ ۾، اسان مختلف div عناصر (sections) استعمال ڪيا آھن، جيڪي ويب پيج جا مختلف حصا ٺاهڻ ۾ مدد ڏين ٿا.
English: Web Develpment Course Class 17
HTML is a language used to create web pages. In this code, we have used different div elements (sections) to organize various parts of the webpage.
2. Head Section (هيڊ سيڪشن)
htmlCopyEdit<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
Sindhi: Web Develpment Course Class 17
هيڊ سيڪشن ۾ ويب پيج جي اهم معلومات رکيل هوندي آهي، جيئن title جيڪو پيج جو نالو ڏيکاري ٿو، ۽ meta tags جيڪي ويب سائيٽ جي ترتيب ۾ مدد ڏين ٿا.
English: Web Develpment Course Class 17
The head section contains essential information about the webpage, such as the title, which displays the page name, and meta tags, which help with webpage settings.
3. Body Section (بوڊي سيڪشن)
htmlCopyEdit<body>
<div class="main">
</div>
</body>
Sindhi: Web Develpment Course Class 17
بوڊي سيڪشن ويب پيج جو بنيادي حصو آهي، جتي سڀ مواد نظر ايندو آهي. div class=”main” ويب پيج لاءِ مکيه ڪنٽينر (container) آهي.
English: Web Develpment Course Class 17
The body section is the main part of the webpage where all the content appears. The div class=”main” acts as the main container for the webpage.
4. Row 1: Header (مٿي وارو حصو)
htmlCopyEdit<div class="row1">
<h1>BILQEES RAZIA LAGHARI WELFARE TRUST</h1>
</div>
Sindhi: Web Develpment Course Class 17
ھي حصو ويب سائيٽ جو ھيڊر (header) آھي، جتي h1 ٽيگ استعمال ڪيو ويو آھي، جيڪو وڏي سائيز ۾ نالو ڏيکاريندو.
English: Web Develpment Course Class 17
This part is the header of the website, where the h1 tag is used to display the name in a larger size.
5. Row 2: Navigation Bar (ميونيو بار)
htmlCopyEdit<div class="ROW2">
<div class="ROW2-COL1">ABOUT US </div>
<div class="ROW2-COL2">MEDICAL SERVICES</div>
<div class="ROW2-COL3">EDUCATIONAL SERVICES</div>
<div class="ROW2-COL4">DISASTER SERVICES</div>
<div class="ROW2-COL5">DIGITAL SKILLS</div>
<div class="ROW2-COL6">CONTACT US</div>
</div>
Sindhi: Web Develpment Course Class 17
ھن سيڪشن ۾ مختلف آپشن آھن جيڪي ويب سائيٽ جي مختلف صفحن تي وڃڻ لاءِ استعمال ٿيندا آھن. هر div ھڪ الڳ بٽڻ جيان ڪم ڪندو.
English: Web Develpment Course Class 17
This section contains different options that are used for navigating to different pages of the website. Each div works as a separate button.
6. Row 3: Image and Sidebar (تصوير ۽ پاس واري لسٽ)
htmlCopyEdit<div class="row3">
<div class="row3-col1">
<img src="class 2.jpg" alt="" width="800px" height="220px">
</div>
<div class="row3-col2">
<div class="row3-col2-row1">projects</div>
<div class="row3-col2-row2">success stories</div>
<div class="row3-col2-row3">running programs</div>
<div class="row3-col2-row4">our vision</div>
</div>
</div>
Sindhi: Web Develpment Course Class 17
ھي حصو ٻه حصن ۾ ورهايل آھي. row3-col1 ۾ ھڪ تصوير آھي، ۽ row3-col2 ۾ ننڍا باڪس آھن، جيڪي مختلف موضوعن کي ڏيکارين ٿا.
English: Web Develpment Course Class 17
This section is divided into two parts. row3-col1 contains an image, and row3-col2 has small boxes displaying different topics.
7. Row 4: Digital Skills Section (ڊيجيٽل اسڪلس وارو سيڪشن)
htmlCopyEdit<div class="row4">
DIGITAL SKILLS
</div>
Sindhi:
ھي هڪ div آھي جيڪو text-align: center; جي مدد سان وچ ۾ ڏيکاريل آھي.
English:
This is a div that displays text in the center using text-align: center;.
8. Row 5: Computer Labs Information (ڪمپيوٽر ليب بابت معلومات)
htmlCopyEdit<div class="row5">
Our Computer Labs | GBELSS Memon Muhalla | GBELSS Rahmani Road | Sunny Laghari Digital Skills Academy
<br>
GBPS KN SHAH | GBELSS Bughia Muhalla | BRT Main Lab | GBELSS Ghula Nabi Babar (DADU)
</div>
Sindhi:
ھن حصي ۾ مختلف ڪمپيوٽر ليبس جا نالا ڏنا ويا آھن. <br> ٽيگ استعمال ڪيو ويو آھي نئين لائن تي اچڻ لاءِ.
English:
This section lists different computer labs. The <br> tag is used to move text to a new line.
9. Row 6: Color Boxes Section (رنگين باڪس)
htmlCopyEdit<div class="row6">
<div class="row6-col1"></div>
<div class="row6-col2"></div>
<div class="row6-col3"></div>
<div class="row6-col4"></div>
<div class="row6-col5"></div>
</div>
Sindhi:
ھي div پنج ننڍن رنگين باڪسز تي مشتمل آھي، جيڪي ويب پيج کي وڌيڪ سٺو ڏيکارڻ لاءِ استعمال ٿين ٿا.
English:
This div contains five small colorful boxes used to enhance the webpage’s appearance.
10. Row 7: Footer (پيج جو آخري حصو)
htmlCopyEdit<div class="row7">
HOME | ABOUT | CONTACT US
</div>
Sindhi:
ھي آخري سيڪشن آھي، جيڪو ويب سائيٽ جي تري (footer) تي نظر ايندو.
English:
This is the last section, which appears at the bottom of the website as a footer.
Text Centering Using Inline CSS (ٽيڪسٽ کي وچ ۾ رکڻ لاءِ CSS)
Sindhi:
جيڪڏهن اسان text کي هر باڪس جي وچ ۾ رکڻ چاهيون ٿا، ته ھيٺين CSS کي inline طور شامل ڪري سگهون ٿا.
htmlCopyEdit<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
ABOUT US
</div>
English:
If we want to center the text inside each box, we can add the following CSS inline.
htmlCopyEdit<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
ABOUT US
</div>
- display: flex; – to use the flexbox layout.
- justify-content: center; – to center text horizontally.
- align-items: center; – to center text vertically.
- height: 100%; – to ensure full height of the div.
Final Thoughts (آخري ڳالهيون)
Sindhi:
ھن سبق ۾ اسان HTML ۽ CSS کي مختلف sections ۾ ورهايو، ته جيئن نوان شاگرد آساني سان سمجهي سگهن.
English:
In this lesson, we divided HTML and CSS into different sections so that beginners can easily understand it.
SOURCE CODE COMPLET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width: 1000px;
height: 580px;
background-color: aquamarine;
}
.row1{
width: 1000px;
height: 100px;
background-color: #508DC3;
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: inherit;
}
.ROW2{
width: 1000PX;
height: 60PX;
background-color: blue;
text-align: cen;
font-size: 80%;
font-weight: 600;
}
.ROW2-COL1{
width:166PX;
height: 60PX;
background-color: antiquewhite;
float: left;
}
.ROW2-COL2{
width:166PX;
height: 60PX;
background-color: rgb(202, 118, 7);
float: left;
}
.ROW2-COL3{
width:166PX;
height: 60PX;
background-color: rgb(17, 240, 128);
float: left;
}
.ROW2-COL4{
width:166PX;
height: 60PX;
background-color: rgb(88, 63, 168);
float: left;
}
.ROW2-COL5{
width:166PX;
height: 60PX;
background-color: rgb(226, 177, 17);
float: left;
}
.ROW2-COL6{
width:166PX;
height: 60PX;
background-color: rgb(190, 12, 12);
float: left;
}
.row3{
width: 1000px;
height: 220px;
background-color: blueviolet;
text-align: center;
font-weight: 200;
}
.row3-col1{
width: 800px;
height: 220px;
float: left;
}
.row3-col2{
width: 200px;
height: 220px;
background-color: aliceblue;
float: left;
}
.row3-col2-row1{
width: 200px;
height: 55px;
background-color: aqua;
float: left;
}
.row3-col2-row2{
width: 200px;
height: 55px;
background-color: rgb(161, 204, 59);
float: left;
}
.row3-col2-row3{
width: 200px;
height: 55px;
background-color: rgb(206, 235, 187);
float: left;
}
.row3-col2-row4{
width: 200px;
height: 55px;
background-color: rgb(238, 15, 33);
float: left;
}
.row4{
width: 1000px;
height: 100px;
background-color: black;
color: aliceblue;
text-align: center;
}
.row5{
width: 1000px;
height: 100px;
background-color: rgb(11, 159, 170);
color: aliceblue;
text-align: center;
}
.row6{
width: 1000px;
height: 250px;
background-color: rgb(68, 255, 193);
}
.row6-col1{
width: 200px;
height: 250px;
background-color: bisque;
float: left;
}
.row6-col2{
width: 200px;
height: 250px;
background-color: rgb(62, 196, 9);
float: left;
}
.row6-col3{
width: 200px;
height: 250px;
background-color: rgb(37, 9, 196);
float: left;
}
.row6-col4{
width: 200px;
height: 250px;
background-color: rgb(19, 142, 151);
float: left;
}
.row6-col5{
width: 200px;
height: 250px;
background-color: rgb(212, 30, 182);
float: left;
}
.row7{
width: 1000px;
height: 70px;
background-color: rgb(190, 253, 44);
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div class="main"> <!--open main div-->
<div class="row1"> <!--open row 1-->
<H1>BILQEES RAZIA LAGHARI WELFARE TRUST </H1>
</div> <!--close row 1-->
<DIV class="ROW2"> <!--open ROW 2-->
<DIV class="ROW2-COL1">ABOUT US </DIV>
<DIV class="ROW2-COL2">MEDICAL SERVICES</DIV>
<DIV class="ROW2-COL3">EDUCATIONAL SERVICES</DIV>
<DIV class="ROW2-COL4">DISASTER SERVICES</DIV>
<DIV class="ROW2-COL5">DIGITAL SKILLS</DIV>
<DIV class="ROW2-COL6">CONTACT US</DIV>
</DIV> <!--end ROW 2-->
<div class="row3"> <!--open row 3-->
<div class="row3-col1"> <!-- open row3-col1-->
<img src="class 2.jpg" alt="" width="800px" height="220px">
</div> <!-- open row3-col1-->
<div class="row3-col2"> <!-- open row3-col2-->
<div class="row3-col2-row1">projects</div>
<div class="row3-col2-row2">success stories</div>
<div class="row3-col2-row3">running programms</div>
<div class="row3-col2-row4">our vision</div>
</div> <!--end row3-col2-->
</div> <!--close row 3-->
<div class="row4"> <!--open row 4-->
DIGITAL SKILLS
</div> <!--close row 4-->
<div class="row5"> <!--open row 5-->
Our Computer Labs | GBELSS Memon Muhalla | GBELSS Rahmani Road | Sunny Laghari Digital Skills Academy
<br>
GBPS KN SHAH | GBELSS Bughia Muhalla | BRT Main Lab | GBELSS Ghula Nabi Babar (DADU)
</div> <!--close row 5-->
<div class="row6"> <!--open row 6-->
<div class="row6-col1"> <!--open row 6-col1-->
</div><!--close row 6-col1-->
<div class="row6-col2"> <!--open row 6-col2-->
</div><!--close row 6-col2-->
<div class="row6-col3"> <!--open row 3-col1-->
</div><!--close row 6-col3-->
<div class="row6-col4"> <!--open row 6-col4-->
</div><!--close row 6-col5-->
<div class="row6-col5"> <!--open row 6-col5-->
</div><!--close row 6-col5-->
</div> <!--close row 6-->
<div class="row7"> <!--open row 7-->
HOME | ABOUT | CONTACT US
</div> <!--close row 7-->
</div> <!--close main div-->
</body>
</html>
