3. BASICS OF WEB DEVELOPMENT

 Welcome to Rajasthan Polytechnic!

Hello and welcome to Rajasthan Polytechnic, a dedicated space for 2nd-semester Polytechnic students. Managed by Garima Kanwar, this blog provides essential notes, study materials, and video lectures for the subject Introduction to IT Systems. Our goal is to make learning easier and more accessible, helping you understand key concepts and excel in your studies.

Download Your Notes

Additionally, you can join our WhatsApp and Telegram groups for easy access to PDF and Handwritten Notes as well as updates on new materials.

We hope this blog helps you in your academic journey.

📢 🔔 Important:
👉 Full PDF available in our WhatsApp Group | Telegram Channel
👉 Watch the full lecture on YouTube: BTER Polytechnic Classes

3. BASICS OF WEB DEVELOPMENT

---

3.1 CSS: Introduction

CSS (Cascading Style Sheets) is a language used to style and format the layout of web pages. It allows web designers to control the appearance of HTML elements, such as text, images, and links, making the webpage visually appealing.

• Why CSS is used:
  • Separation of Content and Style: CSS separates the content (HTML) of a webpage from its design, making it easier to update the look of a website without changing its content.
  • Consistency: With CSS, the same design can be applied to multiple pages, ensuring consistency across a website.
  • Responsiveness: CSS helps create responsive web pages that adjust to different screen sizes, such as those of mobile devices and desktops.

Basic CSS Syntax:

selector {
    property: value;
}

• Selector: The HTML element you want to style.
• Property: The style you want to apply (e.g., font size, color, etc.).
• Value: The value of the style (e.g., 20px, red, center).

Example:

h1 {
    color: blue;
    font-size: 30px;
}

This will make all <h1> elements have a blue color and a font size of 30 pixels.

---

3.1.1 Font Attributes

CSS allows you to style text using various font-related properties, such as font family, font size, font weight, and font style.

1. Font Family: Specifies the font type.

   
   p {
       font-family: Arial, sans-serif;
   }
   

   • Example: The text will use the Arial font, and if Arial isn't available, it will use a generic sans-serif font.

2. Font Size: Defines the size of the text.

   
   p {
       font-size: 16px;
   }
   

   • Example: The text will have a font size of 16 pixels.

3. Font Weight: Controls the thickness of the font.

   
   p {
       font-weight: bold;
   }
   

   • Example: The text will be bold.

4. Font Style: Defines whether the text is normal, italicized, or oblique.

   
   p {
       font-style: italic;
   }
   

   • Example: The text will be italic.

5. Line Height: Controls the space between lines of text.

   
   p {
       line-height: 1.5;
   }
   

   • Example: The space between lines of text will be 1.5 times the font size.

---

3.1.2 Colour, Background

CSS allows you to control the color of text and the background of elements to make the webpage visually appealing.

1. Color: The color property is used to set the color of the text.

   
   p {
       color: red;
   }
   

   • Example: The text will be red.

   • Colors can be defined in different ways:

     • Named colors: (red, blue, green, etc.)
     • Hexadecimal values: (#FF5733 for a shade of orange)
     • RGB values: (rgb(255, 0, 0) for red)

2. Background Color: The background-color property is used to set the background color of an element.

   
   div {
       background-color: lightblue;
   }
   

   • Example: The background of the <div> element will be light blue.

3. Background Image: You can also set an image as the background.

   
   body {
       background-image: url('background.jpg');
   }
   

   • Example: The background.jpg image will be used as the background for the entire webpage.

4. Background Repeat: The background-repeat property determines if the background image should repeat.

   
   body {
       background-image: url('background.jpg');
       background-repeat: no-repeat;
   }
   

   • Example: The background image will not repeat and will only appear once.

5. Background Position: The background-position property specifies where the background image will be placed.

   
   body {
       background-image: url('background.jpg');
       background-position: top right;
   }
   

   • Example: The image will be placed at the top-right corner of the page.

---

3.2 Making a Basic Personal Webpage

To make a basic personal webpage, you need both HTML (for structure) and CSS (for styling). Here's an example of how to create a simple personal webpage.

1. Create an HTML File (index.html): This file will contain the content of your webpage.

   
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Personal Webpage</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <header>
           <h1>Welcome to My Personal Webpage!</h1>
           <nav>
               <ul>
                   <li><a href="#about">About Me</a></li>
                   <li><a href="#contact">Contact</a></li>
               </ul>
           </nav>
       </header>
   
       <section id="about">
           <h2>About Me</h2>
           <p>Hello, I'm John Doe. I'm a web developer who loves coding and designing websites.</p>
       </section>
   
       <section id="contact">
           <h2>Contact Me</h2>
           <p>Email: johndoe@example.com</p>
       </section>
   
       <footer>
           <p>&copy; 2025 John Doe</p>
       </footer>
   </body>
   </html>
   

2. Create a CSS File (styles.css): This file will style the webpage to make it look attractive.

   
   body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
       background-color: #f4f4f4;
   }
   
   header {
       background-color: #333;
       color: white;
       padding: 20px;
       text-align: center;
   }
   
   nav ul {
       list-style: none;
       padding: 0;
   }
   
   nav ul li {
       display: inline;
       margin: 0 15px;
   }
   
   nav ul li a {
       color: white;
       text-decoration: none;
   }
   
   section {
       padding: 20px;
       margin: 10px;
       background-color: white;
   }
   
   footer {
       text-align: center;
       padding: 10px;
       background-color: #333;
       color: white;
   }
   

3. Explanation of Code:

   • HTML:
     • The HTML structure includes a header, two sections (About Me and Contact), and a footer.
     • The link tag in the <head> section connects the HTML to the CSS file.
   • CSS:
     • The body element is styled to have a simple font and a light background color.
     • The header and footer have a dark background with white text.
     • The navigation menu is styled to be inline, with no bullets or underlines.
     • Each section has padding and a white background to stand out from the page background.

4. How to View the Webpage:

• Save the HTML code in a file called index.html.
• Save the CSS code in a file called styles.css in the same folder.
• Open the index.html file in a web browser to view your basic personal webpage.

Thanks for Visiting!

We hope the resources on Rajasthan Polytechnic assist you in your 2nd-semester journey. Stay tuned for regular updates, and feel free to reach out for any questions or suggestions. Best of luck, and happy learning!

Stay Connected & Get More Notes!

I hope these notes help you prepare and perform well in your exams. If you have any questions, feel free to reach out!

Join Our Group for More Updates and Notes:
Telegram: Join Now
WhatsApp: Join Now

Good luck with your studies! 📚