CIT (Club d'Informatique et Télécoms) offers free courses taught by INPT students across various tech domains. Our Web Development cell is dedicated to bringing your ideas to life through code - from concept to creation.

CIT Web Development Hub

Learn • Build • Collaborate

Welcome to web development! If you've ever wondered how websites are built, you're in the right place.

In this session, we'll start from zero and build a solid foundation in **HTML** — the language that structures every web page you see.

---

## What is HTML?

**HTML** stands for **HyperText Markup Language**.

Let's break that down:

- **HyperText** = documents that link to other documents (the "web" part of the web)
- **Markup** = tags that describe what content means (headings, paragraphs, etc.)
- **Language** = a system browsers understand to display content

Think of HTML as the **skeleton** of a web page:

- It defines structure (header, main content, footer)
- It organizes information (headings, lists, paragraphs)
- It doesn't handle design — that's CSS's job (we'll get there!)

---

## Why Learn HTML?

Every website you visit — Facebook, YouTube, Wikipedia — is built with HTML.

Even if you use tools like WordPress or Wix, understanding HTML gives you:

- Full control over your content
- The ability to fix issues yourself
- A foundation for learning JavaScript and backend languages
- Better job opportunities (web dev is in demand!)

---

## Your First HTML Page

Let's write the simplest HTML page possible.

Create a file called `index.html` and type this:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>
```

Save it, then **open it in a browser** (double-click the file).

You should see:

> # Hello, World!
> This is my first web page.

Congratulations! You just created a web page. 🎉

---

## Understanding the Structure

Let's break down what each part does:

### `<!DOCTYPE html>`

This tells the browser: "Hey, this is an HTML5 document!"

Always put this at the very top. It's not an HTML tag — it's a declaration.

### `<html>...</html>`

The root element. Everything goes inside here.

### `<head>...</head>`

Contains **metadata** — information about the page that doesn't show up on screen:

- Page title (shows in the browser tab)
- Links to CSS files
- Meta tags for SEO
- Character encoding

### `<title>My First Page</title>`

The text that appears in the browser tab. Important for SEO!

### `<body>...</body>`

Everything **visible** on the page goes here:

- Headings
- Paragraphs
- Images
- Links
- Forms
- Everything users see

---

## HTML Tags Explained

HTML uses **tags** to mark up content.

Most tags come in pairs:

```html
<tagname>Content goes here</tagname>
```

- **Opening tag**: `<tagname>`
- **Closing tag**: `</tagname>` (notice the `/`)

Some tags are **self-closing** (no content inside):

```html
<img src="photo.jpg">
<br>
<hr>
```

---

## Essential HTML Elements

### Headings

HTML has 6 levels of headings:

```html
<h1>Main Title (Largest)</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest heading</h6>
```

**Best practice:**
- Use `<h1>` once per page (your main title)
- Use headings in order (don't skip from `<h1>` to `<h3>`)
- Think of them as an outline for your content

### Paragraphs

```html
<p>This is a paragraph of text. Browsers automatically add space before and after paragraphs.</p>

<p>Each paragraph tag creates a new block of text.</p>
```

### Line Breaks

```html
<p>
  First line<br>
  Second line<br>
  Third line
</p>
```

The `<br>` tag creates a line break without starting a new paragraph.

### Horizontal Rule

```html
<hr>
```

Creates a horizontal line — useful for separating sections.

---

## Text Formatting Tags

Make text **bold**, *italic*, or add other emphasis:

```html
<p>This is <strong>important text</strong> (bold).</p>
<p>This is <em>emphasized text</em> (italic).</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <del>deleted text</del> (strikethrough).</p>
<p>This is <ins>inserted text</ins> (underline).</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup>.</p>
```

**Note:** `<strong>` vs `<b>` and `<em>` vs `<i>`

- Use `<strong>` and `<em>` — they have **semantic meaning** (screen readers understand them)
- Avoid `<b>` and `<i>` — they're just visual (no meaning)

---

## Practice Exercise

Try creating this page:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>About Me</h1>
    
    <p>Hi! My name is <strong>[Your Name]</strong>.</p>
    
    <h2>What I'm Learning</h2>
    <p>
      I'm learning <em>web development</em> at CIT.<br>
      This is my first HTML page!
    </p>
    
    <h2>My Goals</h2>
    <p>By the end of this course, I want to:</p>
    <p>1. Build my own website</p>
    <p>2. Understand how the web works</p>
    <p>3. Learn JavaScript</p>
    
    <hr>
    
    <p><small>Created on November 26, 2025</small></p>
  </body>
</html>
```

Save it as `about.html` and open it in your browser!

---

## Common Mistakes to Avoid

### 1. Forgetting closing tags

```html

<p>This is a paragraph
<p>Another paragraph


<p>This is a paragraph</p>
<p>Another paragraph</p>
```

### 2. Nesting tags incorrectly

```html

<p><strong>This is bold</p></strong>


<p><strong>This is bold</strong></p>
```

Tags must be closed in the **reverse order** they were opened.

### 3. Missing DOCTYPE

Always start with `<!DOCTYPE html>`!

---

## What's Next?

Now that you understand basic HTML structure, in **Part 2** we'll explore:

- Links (connecting pages)
- Images (adding visuals)
- Lists (organized content)
- Semantic HTML (better structure)

You're off to a great start! Keep practicing and experimenting. 🚀

---

## Quick Reference

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    
    
    <p>A paragraph of text.</p>
    
    
    <strong>Bold</strong>
    <em>Italic</em>
    <br> 
    <hr> 
  </body>
</html>
```

Learn the fundamentals of HTML: what it is, why it matters, and how to create your first web page with proper structure and basic elements.

Master the fundamentals of web development with HTML & CSS - from basic structure to styling beautiful, responsive pages

Introduction to HTML - Building the Web's Foundation

Now that you know basic HTML structure, let's explore the elements that make web pages interactive and organized.

---

## Links - Connecting the Web

The `<a>` (anchor) tag creates **hyperlinks** — clickable text that takes you to another page.

### Basic Link Syntax

```html
<a href="https://www.google.com">Go to Google</a>
```

- `href` = the destination URL (where the link goes)
- The text between tags = what users click on

### Different Types of Links

#### External Links (to other websites)

```html
<a href="https://github.com">Visit GitHub</a>
```

#### Internal Links (to pages in your site)

```html
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
```

#### Links to Specific Sections

```html

<a href="#contact-section">Jump to Contact</a>


<h2 id="contact-section">Contact Us</h2>
```

#### Email Links

```html
<a href="mailto:info@example.com">Send us an email</a>
```

#### Phone Links

```html
<a href="tel:+212123456789">Call us</a>
```

### Link Attributes

#### Open in New Tab

```html
<a href="https://example.com" target="_blank">Open in new tab</a>
```

#### Link Title (tooltip on hover)

```html
<a href="about.html" title="Learn more about us">About Us</a>
```

---

## Images - Adding Visuals

The `<img>` tag displays images. It's **self-closing** (no closing tag needed).

### Basic Image Syntax

```html
<img src="photo.jpg" alt="Description of image">
```

- `src` = path to the image file
- `alt` = text description (for screen readers and if image fails to load)

### Image Sources

#### Local Image (in your project folder)

```html
<img src="images/logo.png" alt="Company Logo">
```

#### Image from the Web

```html
<img src="https://example.com/photo.jpg" alt="Photo description">
```

### Image Attributes

#### Width and Height

```html
<img src="photo.jpg" alt="Photo" width="300" height="200">
```

**Note:** It's better to control size with CSS, but these attributes help prevent layout shifts while images load.

#### Making Images Clickable

```html
<a href="large-photo.jpg">
  <img src="thumbnail.jpg" alt="Click to see full size">
</a>
```

---

## Lists - Organizing Content

HTML has three types of lists:

### 1. Unordered Lists (Bullet Points)

```html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
```

**Result:**
- HTML
- CSS
- JavaScript

### 2. Ordered Lists (Numbered)

```html
<ol>
  <li>Open your code editor</li>
  <li>Write HTML code</li>
  <li>Save the file</li>
  <li>Open in browser</li>
</ol>
```

**Result:**
1. Open your code editor
2. Write HTML code
3. Save the file
4. Open in browser

### 3. Description Lists (Term + Description)

```html
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - structures web content</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - styles web pages</dd>
  
  <dt>JavaScript</dt>
  <dd>Programming language - adds interactivity</dd>
</dl>
```

### Nested Lists

```html
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
</ul>
```

---

## Semantic HTML - Meaningful Structure

**Semantic HTML** = tags that describe what content means, not just how it looks.

### Why Use Semantic Tags?

- **Better SEO** — search engines understand your content
- **Accessibility** — screen readers can navigate easier
- **Maintainability** — code is easier to read and update

### Common Semantic Tags

#### `<header>`

The top section of a page or article (logo, navigation, etc.)

```html
<header>
  <h1>My Website</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>
```

#### `<nav>`

Navigation links

```html
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
```

#### `<main>`

The main content of the page (only one per page)

```html
<main>
  <h1>Welcome to Our Site</h1>
  <p>This is the main content area.</p>
</main>
```

#### `<article>`

Self-contained content (blog post, news article, etc.)

```html
<article>
  <h2>How to Learn HTML</h2>
  <p>Published on November 26, 2025</p>
  <p>HTML is the foundation of web development...</p>
</article>
```

#### `<section>`

A thematic grouping of content

```html
<section>
  <h2>Our Services</h2>
  <p>We offer web design, development, and consulting.</p>
</section>
```

#### `<aside>`

Content related to main content but not essential (sidebar, ads, etc.)

```html
<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">CSS Basics</a></li>
    <li><a href="#">JavaScript Intro</a></li>
  </ul>
</aside>
```

#### `<footer>`

Bottom section of page or article (copyright, contact info, etc.)

```html
<footer>
  <p>&copy; 2025 CIT Web Development</p>
  <p>Contact: info@cit.com</p>
</footer>
```

---

## Putting It All Together

Here's a complete page using semantic HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
</head>
<body>
  
  <header>
    <h1>My Coding Blog</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>My First Blog Post</h2>
      <p><em>Published on November 26, 2025</em></p>
      
      <img src="coding.jpg" alt="Person coding" width="400">
      
      <p>Today I learned HTML! Here's what I covered:</p>
      
      <ul>
        <li>Page structure</li>
        <li>Headings and paragraphs</li>
        <li>Links and images</li>
      </ul>
      
      <p>Check out my <a href="https://github.com/username" target="_blank">GitHub profile</a>!</p>
    </article>
    
    <aside>
      <h3>Recent Posts</h3>
      <ul>
        <li><a href="#">Getting Started with HTML</a></li>
        <li><a href="#">CSS Basics</a></li>
      </ul>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2025 My Blog. All rights reserved.</p>
    <p>Contact: <a href="mailto:me@example.com">me@example.com</a></p>
  </footer>
  
</body>
</html>
```

---

## Practice Exercise

Create a page about your favorite hobby:

**Requirements:**
1. Use semantic HTML (`<header>`, `<main>`, `<footer>`)
2. Include at least 3 links (one external, two internal)
3. Add 2 images with proper `alt` text
4. Create an unordered list of items related to your hobby
5. Use a `<nav>` section with links to other pages

---

## What's Next?

Now you can structure content with meaning! In **Part 3**, we'll learn **CSS** to make it all look beautiful.

Keep practicing — the more you code, the better you'll get! 🚀

Master the essential HTML elements that bring your pages to life: hyperlinks for navigation, images for visuals, lists for organization, and semantic HTML for better structure.

Learn the fundamentals of CSS (Cascading Style Sheets) - how to select elements, apply styles, and use different methods to add CSS to your pages.

Introduction to CSS - Making Your Pages Beautiful


Understanding the **CSS Box Model** is the key to controlling layout and spacing on your web pages.

---

## What is the Box Model?

Every HTML element is a **box** made up of four layers:

```
┌─────────────────────────────────────┐
│           MARGIN (transparent)       │
│  ┌──────────────────────────────┐  │
│  │   BORDER                      │  │
│  │  ┌────────────────────────┐  │  │
│  │  │  PADDING               │  │  │
│  │  │  ┌──────────────────┐  │  │  │
│  │  │  │   CONTENT        │  │  │  │
│  │  │  │  (text, images)  │  │  │  │
│  │  │  └──────────────────┘  │  │  │
│  │  └────────────────────────┘  │  │
│  └──────────────────────────────┘  │
└─────────────────────────────────────┘
```

1. **Content** — The actual content (text, images, etc.)
2. **Padding** — Space between content and border (inside the box)
3. **Border** — A line around the padding
4. **Margin** — Space outside the border (separates elements)

---

## Content Width and Height

Control the size of the content area:

```css
div {
  width: 300px;
  height: 200px;
}
```

**Auto sizing:**
```css
img {
  width: 100%;  /* Takes full width of parent */
  height: auto; /* Maintains aspect ratio */
}
```

---

## Padding - Space Inside

Padding creates space **inside** the element (between content and border).

### All sides the same:

```css
div {
  padding: 20px;
}
```

### Different sides:

```css
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
```

### Shorthand (clockwise: top, right, bottom, left):

```css
div {
  padding: 10px 20px 10px 20px;
}
```

**More shortcuts:**
```css
padding: 10px 20px;      /* vertical horizontal */
padding: 10px 20px 30px; /* top horizontal bottom */
```

---

## Border - The Box Outline

Border goes around the padding:

```css
div {
  border: 2px solid black;
}
```

**Format:** `border: width style color`

### Border Styles:

- `solid` — continuous line
- `dashed` — dashed line
- `dotted` — dotted line
- `double` — double line
- `none` — no border

### Individual sides:

```css
div {
  border-top: 3px solid red;
  border-bottom: 1px dashed gray;
}
```

### Rounded corners:

```css
div {
  border: 2px solid black;
  border-radius: 10px; /* All corners */
}

button {
  border-radius: 50%; /* Circle */
}
```

---

## Margin - Space Outside

Margin creates space **outside** the element (between elements).

### All sides:

```css
div {
  margin: 20px;
}
```

### Individual sides:

```css
div {
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
```

### Shorthand:

```css
div {
  margin: 10px 20px; /* vertical horizontal */
}
```

### Centering elements:

```css
div {
  width: 600px;
  margin: 0 auto; /* Top/bottom: 0, left/right: auto */
}
```

This centers a block element horizontally!

---

## Box Sizing

By default, `width` and `height` only apply to the **content**.

**Example problem:**
```css
div {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
```

**Actual width = 344px:**
- Content: 300px
- Padding: 20px × 2 = 40px
- Border: 2px × 2 = 4px

**Solution: `box-sizing: border-box`**

```css
* {
  box-sizing: border-box;
}

div {
  width: 300px;      /* Total width INCLUDING padding and border */
  padding: 20px;
  border: 2px solid black;
}
```

Now the **total width is exactly 300px**. This is a best practice!

---

## Display Property

The `display` property controls how elements behave:

### `display: block`

- Takes up full width available
- Starts on a new line
- Can set width and height

**Examples:** `<div>`, `<h1>`, `<p>`, `<section>`

```css
div {
  display: block;
  width: 300px;
  height: 200px;
}
```

### `display: inline`

- Only takes up as much width as needed
- Does NOT start on a new line
- **Cannot** set width and height

**Examples:** `<span>`, `<a>`, `<strong>`, `<em>`

```css
span {
  display: inline;
  background-color: yellow;
}
```

### `display: inline-block`

- Like inline, but **CAN** set width and height
- Sits on the same line as other elements

```css
button {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 10px;
}
```

### `display: none`

Hides the element completely (removes it from the page flow):

```css
.hidden {
  display: none;
}
```

---

## Colors in CSS

### Named Colors:

```css
h1 {
  color: red;
  background-color: lightblue;
}
```

### Hex Colors:

```css
h1 {
  color: #FF0000;          /* Red */
  background-color: #0000FF; /* Blue */
}
```

**Shorthand:** `#F00` = `#FF0000`

### RGB Colors:

```css
h1 {
  color: rgb(255, 0, 0);    /* Red */
}
```

### RGBA (with transparency):

```css
div {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}
```

**Alpha channel:** `0` = fully transparent, `1` = fully opaque

---

## Typography Basics

```css
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal; /* or bold, 100-900 */
  font-style: normal;  /* or italic */
  line-height: 1.6;    /* Space between lines */
}

h1 {
  font-size: 2.5em;    /* Relative to parent */
  letter-spacing: 2px; /* Space between letters */
  text-transform: uppercase;
}

p {
  text-align: left;    /* left, center, right, justify */
  text-decoration: none; /* underline, line-through, etc. */
}
```

---

## Complete Example Project

Let's build a styled card:

**HTML:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Profile Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Profile Picture">
    <h2>John Doe</h2>
    <p class="title">Web Developer</p>
    <p class="description">
      Passionate about creating beautiful and functional websites.
    </p>
    <button class="btn">Contact Me</button>
  </div>
  
</body>
</html>
```

**CSS:**
```css
/* Global reset and setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Card container */
.card {
  background-color: white;
  width: 350px;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
}

/* Profile image */
.card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid #667eea;
  margin-bottom: 20px;
}

/* Name */
.card h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 5px;
}

/* Job title */
.title {
  font-size: 16px;
  color: #667eea;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Description */
.description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Button */
.btn {
  display: inline-block;
  background-color: #667eea;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #5568d3;
}
```

---

## Practice Project

Create your own **personal portfolio card**!

**Requirements:**
1. Use a card layout with proper box model properties (margin, padding, border)
2. Include:
   - Your name (styled heading)
   - A brief description
   - A profile image (rounded)
   - A contact button
3. Apply `box-sizing: border-box` to all elements
4. Center the card on the page
5. Use colors, spacing, and typography to make it look professional

**Bonus challenges:**
- Add a hover effect to the button
- Use a gradient background
- Add a subtle shadow to the card
- Make the image circular with a border

---

## Summary

You've completed Session 1! Here's what you learned:

### HTML:
✅ Page structure and semantic elements  
✅ Headings, paragraphs, text formatting  
✅ Links, images, lists  
✅ Semantic HTML (header, nav, main, footer)

### CSS:
✅ Selectors, properties, values  
✅ Ways to add CSS (inline, internal, external)  
✅ Box model (margin, padding, border)  
✅ Display property  
✅ Colors and typography

---

## What's Next?

In **Session 2**, you'll learn **advanced CSS layouts** including:
- Flexbox for flexible layouts
- Grid for complex layouts
- Positioning elements
- Responsive design

Keep practicing and building! The more you code, the better you'll become. 🚀

**Happy coding!** 💻✨


Master the CSS box model to control spacing, sizing, and layout of elements. Learn margin, padding, border, display properties, and build a complete project.

SESSION 1

Introduction to HTML - Building the Web's Foundation

HTML Elements - Links, Images, Lists & More

Introduction to CSS - Making Your Pages Beautiful

CSS Box Model - Understanding Layout & Spacing