Let's Build the Web!
What is HTML?
Common HTML Elements
Semantic HTML
Basic Structure
The Power of the Inspector Tool
Block vs inline
# What is HTML?
HTML is the language of the World Wide Web. It is the standard text formatting language used for creating and displaying pages on the Web. HTML documents are made up of two things: the content and the tags that format it for proper display on pages.
# What is HTML?
# What is HTML?
# What is HTML?
# Basic Structure
HTML organizes content using a tree-like structure. This means that elements can be nested within each other, creating a hierarchy.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
In this example, the <html> element is the root of the tree. Inside it, we have the <head> and <body> elements. The <title> element is nested within the <head>, and the <h1> and <p> elements are nested within the <body>.
# Basic Structure
HTML Elements are called Tags it's like a keyword that we use to structure and give meaning to web content. It's a bit like punctuation marks in a sentence: they tell the browser how to interpret and display the text.
# Basic Structure
# Basic Structure
<p>some text here mainly used for paragraphs </p>
<input >
Lets dive a little deeper :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="My first website" />
<title>Document</title>
</head>
<body></body>
</html>
# Basic Structure
# Basic Structure
# Common HTML Elements
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
1. Text Elements
<p>This is a paragraph ✨</p>
The bigger the heading number is the smaller the heading font.
# Common HTML Elements
<b>This is a bold text</b>
<strong>This is also bold but ...</strong>
<em>This is an italic text</em>
<u>And is underlined !!</u>
<s>A strikethrough text ✨</s>
<mark>And a Highlited one</mark>
<small>This is a small text</small>
<sub>This text is lowered</sub>
<sup>Anď this is raised !</sup>
1. Text Elements
# Common HTML Elements
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
2. Lists
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
# Common HTML Elements
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
2. Lists
# Common HTML Elements
Assignement: create a new HTML document and create the following lists:
<a href="https://example.com">This is a standard link</a>
<a href="https://example.com" target="_blank">Open is new tab</a>
<a href="mailto:example@example.com">Send email</a>
<a href="#section1">jump to section 1</a>
3. Links: anchor tags
<img src="image.jpg" alt="Example Image" />
<img src="image.jpg" alt="Example Image" width="300" height="200" />
4. Images
# Common HTML Elements
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
5. Tables
# Common HTML Elements
<input type="text" placeholder="Text input" />
<input type="password" placeholder="Password" />
<input type="number" placeholder="Email" />
<input type="date" />
<input type="checkbox" name="exemple" />
<input type="radio" name="gender" value="female" />
<label for="female">Female</label>
<input type="radio" name="gender" value="male" />
<label for="male">Male</label>
<input type="file" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="button" value="Click me" />
6. Inputs
# Common HTML Elements
<audio controls src="audio.mp3"></audio>
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
or
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
</video>
7. Media
<!-- This is a comment and nobody can see it besides me 🤭 -->
8. Comments
# Common HTML Elements
# Common HTML Elements
# Inspector Tool
Pov : When you open Inspector for the first time
# Attributes
Attribute | Element | Description |
---|---|---|
id | any | Unique identifier for an element. |
class | any | Specifies one or more class names for an element. |
style | any | Specifies an inline style for an element. |
title | any | Specifies an extra information about an element. |
href | <a> | Specifies the URL of the linked document. |
src |
<img> , <audio> , <video>
|
Specifies the URL of the resource. |
alt |
<img> , <area>
|
Specifies an alternate text for an image. |
# Attributes
# Semantic HTML
# Block vs inline
# Block vs inline
<div>this is a block element</div>
<article>this is a block element</article>
<section>this is a block element</section>
<header>this is a block element</header>
<footer>this is a block element</article>
1. Block Elements: Always start on a new line, take up the full width.
<span>this is an inline element</span>
<a href="#">this is an inline element</a>
<strong>this is an inline element</strong>
<em>this is an inline element</em>
2. Inline Elements: Do not start on a new line, only take up the space required.
# Block vs inline