Introduction to HTML & CSS

HTML (HyperText Markup Language) is the standard markup language for creating web pages. CSS (Cascading Style Sheets) is used to style and layout web pages. Together, they form the foundation of web development.

An HTML document has a standard structure:

<!DOCTYPE html>


<html lang="en">


  <head>


    <title>Page Title</title>


  </head>


  <body>


    <h1>My First Heading</h1>


    <p>My first paragraph.</p>


  </body>


</html>

HTML uses tags to mark up content. Attributes provide additional information about elements.

<a href="https://example.com" target="_blank">Visit Example</a>

Head & Body

The <head> contains meta-information, links to CSS, and scripts. The <body> contains the visible content.

<head>


  <meta charset="UTF-8">


  <title>My Website</title>


  <link rel="stylesheet" href="style.css">


</head>

HTML supports ordered, unordered lists, and tables for tabular data.

<ul><li>Item 1</li><li>Item 2</li></ul>


<ol><li>First</li><li>Second</li></ol>


<table><tr><th>Name</th><th>Age</th></tr><tr><td>Alice</td><td>24</td></tr></table>

Forms collect user input. Common elements: <input>, <textarea>, <select>, <button>.

<form action="/submit" method="post">


  <input type="text" name="username">


  <input type="password" name="password">


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


</form>

Redirection can be done using meta tags or JavaScript.

<meta http-equiv="refresh" content="5;url=https://example.com">
window.location.href = "https://example.com";

Reload the page with:

location.reload();

<div> and <span> are generic containers. Use class and id attributes for styling and scripting.

<div id="header" class="main-header">Header Content</div>


<span class="highlight">Important</span>

Link CSS and JS files in the <head> or before </body>:

<link rel="stylesheet" href="style.css">


<script src="script.js"></script>

Use <img> for images and <video> or <audio> for media.