Press F for Fullscreen
1/8
REC
1
8

HTML Fundamentals Web Development Mastery

Part 1: Understanding HTML Basics

Instructor

Simegnew Destew

Senior Full-Stack Developer

Part 1: HTML Fundamentals

What is HTML?

HyperText Markup Language
HTML

HTML Definition

HTML stands for HyperText Markup Language

  • It's a formatting language used to define the appearance and contents of a web page
  • It's a standard markup language used to design documents displayed in browsers as web pages
  • HTML describes the structure of a web page
HT

HyperText Explained

Hypertext means "Text within Text"

  • A text that contains links to other texts
  • Clicking on a link takes you to a new document or section
  • This is the foundation of web navigation
ML

Markup Language

A markup language is used to define text documents within tags

  • Tags define the structure of web pages
  • HTML uses tags like <h1>, <p>, <div> to structure content
  • Browsers interpret these tags to display content properly
Part 1: HTML Fundamentals

HTML Characteristics

Advantages and Disadvantages

Advantages of HTML

Easy to Understand

Simple syntax with clear tag structure

Flexibility

Can be integrated with CSS and JavaScript

Linkable

Easy to create hyperlinks between pages

Limitless Features

Continuous evolution with new standards

Universal Support

Supported by all modern browsers

Disadvantages of HTML

Static Pages Only

Creates only static web pages

Limited Security

Lacks built-in security features

Many Tags Required

Simple pages need many tags

Not Centralized

No centralized language structure

Complex for Large Sites

Can become complex for huge websites

Part 1: HTML Fundamentals

HTML Editors

Tools for Writing HTML
NP

Notepad

Basic text editor included with Windows

Free Basic
NP++

Notepad++

Enhanced text editor with syntax highlighting

Free Feature-rich
ST3

Sublime Text 3

Sophisticated text editor for code

Freemium Fast
AT

Atom

Hackable text editor for the 21st Century

Free Customizable
VSC

Visual Studio Code

Most popular code editor with extensive features

Free Powerful Recommended
NOTE

Save HTML files with .html extension (e.g., hello.html)

Part 1: HTML Fundamentals

HTML with CSS & JavaScript

The Web Development Trio
HTML

HTML

Structure

Defines the content and layout of web pages

  • Headings & paragraphs
  • Images & links
  • Forms & tables
CSS

CSS

Presentation

Styles and makes HTML look beautiful

  • Colors & fonts
  • Layout & positioning
  • Animations & effects
JS

JavaScript

Behavior

Makes web pages interactive and dynamic

  • User interactions
  • Dynamic content
  • Form validation

How They Work Together:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <!-- CSS -->
  <style>
    body { font-family: Arial; }
    .highlight { color: blue; }
  </style>
</head>
<body>
  <!-- HTML -->
  <h1 class="highlight">Hello World!</h1>
  
  <!-- JavaScript -->
  <script>
    document.querySelector('h1').addEventListener('click', function() {
      alert('Hello from JavaScript!');
    });
  </script>
</body>
</html>
Part 1: HTML Fundamentals

Your First HTML File

Let's Create hello.html
hello.html 
<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Welcome to my first web page.</p>
  <p>This is created using HTML.</p>
</body>
</html>
hello.html

Hello World!

Welcome to my first web page.

This is created using HTML.

Steps to Create Your First HTML File:

  1. Open your preferred HTML editor (VS Code recommended)
  2. Create a new file and name it hello.html
  3. Type the HTML code shown above
  4. Save the file with .html extension
  5. Open the file in a web browser to see the result
Part 1: HTML Fundamentals

HTML Tags & Elements

Building Blocks of Web Pages

HTML Tags

A tag is a command that tells the web browser how to display content on a web page.

  • Tags are indicated with angle brackets: < >
  • They start with <tagname> and end with </tagname>
  • Most tags come in pairs: opening tag and closing tag
  • Tags are not case sensitive
  • Tags can have attributes for additional information

Common HTML Tags:

<html></html> <head></head> <title></title> <body></body> <h1></h1> <p></p> <div></div> <span></span> <a></a> <img>

HTML Elements

An HTML element consists of:

  • Start tag
  • Content
  • End tag
  • Optional attributes

Empty elements (void elements) don't require closing tags:

<br> <img> <hr> <input> <meta>

HTML Attributes

Attributes provide additional information about HTML elements:

  • Appear in the opening tag
  • Format: name="value"
  • Values are contained in quotes

Example:

<a href="https://devvoltz.com" target="_blank">Visit DevVoltz</a>
<img src="image.jpg" alt="Description" width="500">
COMPLETE

Great Job!

You've learned HTML Fundamentals

What We Covered in Part 1:

HTML

What is HTML

HyperText Markup Language basics

PROS/CONS

Characteristics

Advantages and disadvantages

EDITORS

HTML Editors

Tools for writing HTML code

TRIO

Web Trio

HTML with CSS & JavaScript

FIRST

First HTML File

Created hello.html

TAGS

Tags & Elements

HTML building blocks

Practice Exercise:

Create Your Bio Page

Create an HTML file with:

  • A main heading with your name
  • A paragraph about yourself
  • Your favorite hobbies in a list
  • A link to your favorite website

Next: Learn about DOCTYPE, head section, and body structure

Presenter Notes - Video 1

Intro Slide: Welcome students to HTML Fundamentals. Emphasize that HTML is the foundation of all web development.
What is HTML: Break down "HyperText Markup Language" term by term. Use analogies like HTML = skeleton, CSS = skin, JS = muscles.
Characteristics: Discuss real-world implications of advantages and limitations. Mention that HTML5 addresses many limitations.
HTML Editors: Demonstrate VS Code setup. Show extensions like Live Server. Emphasize the .html file extension.
Web Trio: Explain how these three technologies work together. Use building analogy: HTML=structure, CSS=paint, JS=electricity.
First HTML File: Live code hello.html. Show the result in browser. Encourage students to code along.
Tags & Elements: Differentiate between tags and elements. Show common mistakes. Emphasize proper nesting.
Recap: Summarize key takeaways. Assign the practice exercise. Preview what's coming in Video 2.
🎓 HTML Fundamentals - DevVoltz Academy 🌐 Website: www.devvoltz.com 📱 Telegram: @devvoltz 📸 Instagram: @devvoltz 👥 Facebook: facebook.com/devvoltz 💻 Next: HTML Document Structure