Let's Build the Web!

{Dive into the World of HTML}

1

What is HTML?

3

Common HTML Elements

5

Semantic HTML

Summary

2

Basic Structure

4

The Power of the Inspector Tool

6

Block vs inline

#  What is HTML?

1.  What

   is HTML ?

HyperText Markup Language

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?

You can see HTML as the skeleton of your web page, youhouhouhou. 

#  What is HTML?

Or a Building Blueprint.

#  What is HTML?
# Basic Structure

2. 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.

Notes

  • Every html file has '.html’ extention.  
  • The main page of the website is usually named index.html
  • All html documents have the same structure and should start with a document type declaration <!doctype html>. 
# Basic Structure

Notes

  • Everything in HTML is built using tags.
  • Tags are enclosed in angle brackets < >, and usually come in pairs.
  • An opening tag <tagname> and a closing tag </tagname>.
  • The visible part of the HTML document is between <body> and </body>.
  • There are two types of tags: Paired tags and unpaired tags
    • Paired tag: it has to be closed, it is composed of an opening tag and a closing tag with content inside of it.

  

 

    • Unpaired tag: It does not have to be closed because it is a self closing tag.
# Basic Structure
<p>some text here mainly used for paragraphs </p>
<input >

Lets dive a little deeper :

  • <Head> : Contains meta-information about the document, such as title, links to stylesheets, scripts, etc.
  • <title>: Sets the title of the document (shown in the browser's title bar or tab).
  • <body>: Contains the content of the document.

<!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

3. Common HTML Elements

Basic Html tags Cheat Sheet!

<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​

  • Heading tags
<p>This is a paragraph ✨</p>
  • Paragraph tag

The bigger the heading number is the smaller the heading font.

# Common HTML Elements

Basic Html tags Cheat Sheet!

<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​

  • Text Formatting
# Common HTML Elements

Basic Html tags Cheat Sheet!

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

2. Lists

  • Ordered Lists
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Unordered Lists
# Common HTML Elements

Basic Html tags Cheat Sheet!

<dl>
    <dt>Term 1</dt>
    <dd>Description 1</dd>
    <dt>Term 2</dt>
    <dd>Description 2</dd>
</dl>

2. Lists

  • Description List
# Common HTML Elements

Assignement: create a new HTML document and create the following lists:

  • An unordered shopping list of your favorite foods
  • An ordered list of todo’s you need to get done today
  • An unordered list of places you’d like to visit someday
  • An ordered list of your all time top 5 favorite video games or movies

Basic Html tags Cheat Sheet!

<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

Basic Html tags Cheat Sheet!

<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

Basic Html tags Cheat Sheet!

<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

Basic Html tags Cheat Sheet!

<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

POV : you realized that a web page is just a bunch of tags…

# Common HTML Elements
# Inspector Tool

4. The Power of the  Inspector Tool 

Pov : When you open Inspector for the first time

# Attributes​

5. Attributes

Attributes : modifiers for HTML elements.

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

6. Semantic HTML

# Block vs inline

7. Block vs inline

Block vs inline elements

# 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.​

Block vs inline elements

<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

HTML

Basics

ENDS

HTML introduction

By Fatima BENAZZOU

Made with Slides.com

HTML introduction

  • 214

More from Fatima BENAZZOU