W3 Web Tutorials
HTML Tutorial

HTML Tutorial

HTML is the standard markup language for Web pages. With HTML you can create your own website.

This tutorial walks through headings, links, images, overlays, galleries, and forms.

HTML Introduction

HTML stands for Hyper Text Markup Language. HTML elements are the building blocks of HTML pages, described by tags.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

HTML Headings

HTML headings are defined with the h1 to h6 tags. h1 defines the most important heading.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

HTML links are defined with the a tag. The href attribute specifies the destination.

Example

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

A page header often contains a logo, navigation, and a call-to-action button. Flexbox is commonly used to align these items.

Example 

<header class="menu">
    <div><a href="https://www.instagram.com" target="_blank"><img class="logo" src="obrazky/apple.png" alt=""></a></div>

    <nav class="navigace">
        <a>O nás</a>
        <a>Služby</a>
        <a>Obrázky</a>
        <a>Menu</a>
    </nav>

    <a href="#" class="btn btn-cta">prihlasit se</a>
</header>

HTML Hero Section

A hero section is a large banner at the top of a page. It usually contains a heading, a short description, and buttons.

Example 

<div class="hero-image">
  <div class="hero-text">
    <h1>I am John Doe</h1>
    <p>And I'm a Photographer</p>
    <p>And I'm a Photographer</p>

    <div class="hero-tlacitka">
        <button class="btn btn-cta">Hire me</button>
        <button class="btn btn-ghost">Hire me</button>
    </div>
  </div>
</div>

HTML Images

HTML images are defined with the img tag. The src attribute specifies the image path.

Example

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

HTML Image Overlay

An overlay appears when the user hovers an image. Place a container around the image and a second layer with text.

Example 

<h2>Fade in Overlay</h2>
<div class="sluzby-container">
    <div class="container">
        <img src="obrazky/apple.png" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>

    <div class="container">
        <img src="obrazky/apple.png" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>

    <div class="container">
        <img src="obrazky/apple.png" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>
</div>

HTML Lists

An unordered list starts with ul. Each item starts with li.

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Headings can call a JavaScript function when clicked. This is useful for swapping a preview image.

Example 

<div class="ukazky">
    <h2>Nase ukazky</h2>
    <div id="myDIV"></div>
    <div class="nazvy-sluzeb">
        <h3 onclick="zmenObrazek('obrazky/pesss.jpeg')">obrazek1</h3>
        <h3 onclick="zmenObrazek('obrazky/kocak.jpg')">obrazek2</h3>
        <h3 onclick="zmenObrazek('obrazky/pess.png')">obrazek3</h3>
    </div>
</div>

HTML Tables

HTML tables are defined with table, table rows with tr, and table data with td.

Example

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
  </tr>
</table>

HTML Forms

The form element is used to collect user input. A POST form sends data to the server.

Always validate form data on the server as well as in the browser.

Example

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <input type="submit" value="Submit">
</form>

Example 

<div class="formular">
<h2>PHP Form Validation Example</h2>
<form method="post" action="">
  Name: <input type="text" name="name">
  <br><br>
  E-mail: <input type="text" name="email">
  <br><br>
  Comment: <textarea name="comment" rows="5" cols="40"></textarea>
  <br><br>
  <input type="submit" name="submit" value="odeslat">
</form>
</div>
Home Next ❯