Hot Posts

Module 5

vmstudypoint
Document

Great 👍 we’ve covered:
✅ Module 1: .NET Core & ASP.NET
✅ Module 2: ASP.NET MVC
✅ Module 3: Web API
✅ Module 4: SQL

Now let’s move to:

✅ Module 5: HTML & CSS

5.1 HTML (HyperText Markup Language)

Definition:

  • HTML is the standard markup language used to structure content on the web.

  • It describes elements like headings, paragraphs, forms, tables, and links.

Basic Structure of an HTML Page:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a sample HTML page.</p>
</body>
</html>

5.1.1 Important HTML Tags

  • Headings: <h1> to <h6>

  • Paragraph: <p>

  • Links: <a href="https://example.com">Click here</a>

  • Image: <img src="pic.jpg" alt="picture">

  • Lists:

    • Ordered: <ol><li>Item</li></ol>

    • Unordered: <ul><li>Item</li></ul>

  • Tables:

<table border="1">
   <tr><th>ID</th><th>Name</th></tr>
   <tr><td>1</td><td>John</td></tr>
</table>

  • Forms:

<form>
   Name: <input type="text" name="username"><br>
   Password: <input type="password" name="pwd"><br>
   <input type="submit" value="Submit">
</form>

5.1.2 Semantic HTML

  • Introduced in HTML5 to improve SEO & accessibility.

  • Examples:

    • <header> → page header

    • <footer> → footer section

    • <article> → independent content

    • <section> → logical grouping

5.2 CSS (Cascading Style Sheets)

Definition:

  • CSS controls the style and layout of HTML elements.

  • Styles can be applied in three ways:

    1. Inline CSS → Inside an element

      <p style="color:red;">Hello</p>

    2. Internal CSS → Inside <style> in <head>

      <style> p { color: blue; } </style>

    3. External CSS → Separate .css file linked with <link>

5.2.1 CSS Selectors

  • Element Selector → p { color: red; }

  • Class Selector → .btn { background: green; }

  • ID Selector → #title { font-size: 20px; }

  • Grouping Selector → h1, h2, h3 { color: navy; }

  • Descendant Selector → div p { color: gray; }

5.2.2 Box Model

Every HTML element is a box with:

  • Content → text or image.

  • Padding → space between content & border.

  • Border → edge around element.

  • Margin → space outside border.

5.2.3 CSS Layout Techniques

  1. Positioning: static, relative, absolute, fixed, sticky.

  2. Flexbox: One-dimensional layout (row/column).

    .container {
    display: flex;
    justify-content: space-between;
}

  3. Grid: Two-dimensional layout (rows + columns).

    .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

5.2.4 Responsive Design

  • Makes web pages work on mobile, tablet, desktop.

  • Achieved with media queries.

@media (max-width: 600px) {
   body { background: lightblue; }
}

📌 Summary for Module 5:

  • HTML → Structures content (tags, forms, tables, semantic elements).

  • CSS → Styles & layouts (selectors, box model, flexbox/grid).

  • Be ready to create a small form styled with CSS in test.