HtStudio - Learn, Code and Compile HTML

🌐 What is HTML?

HTML (HyperText Markup Language) is the language that forms the structure of web pages. Browsers read this code and render it visually. HTML works together with CSS (styling) and JavaScript (behavior) to create modern websites.

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Every HTML file starts with the <!DOCTYPE html> declaration.

🏷️ Basic Tags

Headings (h1–h6)

H1 is the largest and most important heading. It is recommended to use only one H1 per page for SEO purposes.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller</h3>
<h4>Small</h4>
<h5>Very Small</h5>
<h6>Smallest</h6>

Text Tags

<p>Paragraph text goes here.</p>
<strong>Bold (important) text</strong>
<em>Italic (emphasized) text</em>
<u>Underlined text</u>
<s>Strikethrough text</s>
<mark>Highlighted text</mark>
<small>Small text</small>
<br>   ← Line break (self-closing)
<hr>   ← Horizontal rule

Quote and Code

<blockquote>Block quote</blockquote>
<code>Code snippet</code>
<pre>   Whitespace preserved</pre>
<abbr title="HyperText Markup Language">HTML</abbr>

🔗 Links and Images

Link (<a>)

<a href="https://google.com">Go to Google</a>
<a href="https://site.com" target="_blank" rel="noopener">Open in new tab</a>
<a href="#section2">Scroll down the page</a>   ← anchor link
<a href="mailto:ornek@mail.com">Send email</a>
<a href="tel:+905001234567">Call</a>

Image (<img>)

<img src="resim.jpg" alt="Description" width="300" height="200">
<img src="https://site.com/img.png" alt="Remote image" style="border-radius:12px">
<!-- alt attribute: required for accessibility -->

📋 Lists

Unordered List (ul)

<ul>
  <li>Apple</li>
  <li>Pear</li>
  <li>Strawberry</li>
</ul>

Ordered List (ol)

<ol type="1">   ← type: 1 A a I i
  <li>First step</li>
  <li>Second step</li>
</ol>

Nested List

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
</ul>

🎨 Styling with CSS

CSS (Cascading Style Sheets) adds visual design to HTML elements. It can be used in 3 ways: Inline, Internal (<style>) and External (separate .css file).

Internal CSS (<style>)

<style>
  body { background: #0a0a0a; color: #ffffff; font-family: sans-serif; }
  h1   { color: #00d4ff; text-align: center; font-size: 36px; }
  p    { background: #111; padding: 12px; border-radius: 8px; }
  .kart { border: 1px solid #333; margin: 10px; }
  #baslik { font-weight: bold; }   ← ID selector
</style>

Inline CSS

<p style="color:blue; font-size:18px; margin:0">Mavi metin</p>

Common CSS Properties

/* Renkler */
color: red;          /* text color */
background-color: #fff;
opacity: 0.8;        /* opacity 0-1 */

/* Tipografi */
font-size: 16px;
font-weight: bold;   /* or 100-900 */
font-family: 'Arial', sans-serif;
text-align: center; /* left right justify */
line-height: 1.6;
letter-spacing: 2px;

/* Kutu Modeli */
margin: 10px;        /* outer spacing */
padding: 20px;       /* inner spacing */
border: 1px solid #ccc;
border-radius: 12px;
width: 300px;
height: 200px;
max-width: 100%;

📦 Div, Span and Semantic Tags

Div and Span

div — block container (occupies full row). span — inline container (used within text).

<div style="background:#1a1a2e; padding:20px; border-radius:8px">
  <h2>Card Title</h2>
  <p>Normal <span style="color:#ff6b6b">red</span> text</p>
</div>

HTML5 Semantic Tags

Semantic tags explain the meaning of the page to both browsers and search engines.

<header>Page header / logo</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<section>Content section</section>
<article>Independent article</article>
<aside>Sidebar / ad</aside>
<footer>Page footer</footer>

📝 Forms

Forms are used to collect data from users. action specifies the URL to send to, method specifies GET/POST.

Basic Form Elements

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Your Name" required>
  <input type="email"    placeholder="Email">
  <input type="password" placeholder="Password">
  <input type="number"   min="0" max="100">
  <input type="date">
  <input type="color">
  <input type="range" min="0" max="100">
  <input type="checkbox"> Remember me
  <input type="radio" name="gender"> Male
  <input type="radio" name="gender"> Female
  <textarea rows="4" placeholder="Your message..."></textarea>
  <select>
    <option>Turkey</option>
    <option>USA</option>
  </select>
  <button type="submit">Submit</button>
</form>

📊 Tables

<table border="1" style="border-collapse:collapse; width:100%">
  <thead>
    <tr>
      <th style="padding:10px; background:#1a2540">Name</th>
      <th style="padding:10px; background:#1a2540">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding:8px">John</td>
      <td style="padding:8px">25</td>
    </tr>
    <tr>
      <td colspan="2">Merged cell</td>
    </tr>
  </tbody>
</table>

🎬 Media Tags

Video

<video src="video.mp4" controls autoplay loop muted width="640">
  Your browser does not support the video tag.
</video>

Audio

<audio src="muzik.mp3" controls></audio>

YouTube Embed

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560" height="315"
  allowfullscreen>
</iframe>

📐 Layout with Flexbox

Flexbox is used to align elements in rows or columns. It is the cornerstone of modern web layout design.

<div style="
  display: flex;
  flex-direction: row;      /* row | column */
  justify-content: center;  /* flex-start | flex-end | space-between | space-around */
  align-items: center;      /* flex-start | flex-end | stretch */
  gap: 16px;
  flex-wrap: wrap;
">
  <div>Box 1</div>
  <div>Box 2</div>
  <div style="flex:1">Fills remaining space</div>
</div>

🔲 Layout with Grid

CSS Grid is used to create two-dimensional (row + column) layouts.

<div style="
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  grid-template-columns: 200px auto 200px;
  gap: 16px;
">
  <div>1</div>
  <div style="grid-column: span 2">spans 2 columns</div>
  <div style="grid-row: span 2">spans 2 rows</div>
</div>

📱 Responsive Design

Responsive design means the page adapts to different screen sizes (mobile, tablet, desktop).

Viewport Meta Tag (Required!)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Query

<style>
  /* All screens */
  .card { width: 300px; }

  /* Tablet (768px and below) */
  @media (max-width: 768px) {
    .card { width: 100%; }
  }

  /* Mobile (480px and below) */
  @media (max-width: 480px) {
    body { font-size: 14px; }
    .sidebar { display: none; }
  }
</style>

✨ CSS Animations

Transition

<style>
  .button {
    background: #3b6bff;
    transition: all 0.3s ease;   /* property duration easing */
  }
  .button:hover {
    background: #00d4ff;
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
</style>

Keyframe Animation

<style>
  @keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
  }
  .bouncing {
    animation: yukar-as 1s ease-in-out infinite;
  }
</style>
<div class="bouncing">🚀 Bouncing element</div>

⚡ JavaScript Basics

Basic Structures

<script>
  // Variables
  let isim = "Ali";
  const age = 25;      // constant, cannot be changed
  var eski = "old method";

  // Condition
  if (age >= 18) {
    alert("Adult");
  } else {
    alert("Not of age");
  }

  // Loop
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }

  // Function
  function add(a, b) {
    return a + b;
  }
  console.log( add(3, 4) );  // 7
</script>

DOM Manipulation

<script>
  // Select element
  const el = document.getElementById("box");
  const butonlar = document.querySelectorAll(".btn");

  // Change content
  el.innerHTML = "<b>New Content</b>";
  el.textContent = "Text only";

  // Change style
  el.style.color = "red";
  el.style.display = "none";

  // Add/remove class
  el.classList.add("active");
  el.classList.remove("hidden");
  el.classList.toggle("open");

  // Click event
  el.addEventListener("click", function() {
    alert("Clicked!");
  });
</script>

💾 Data Storage with localStorage

localStorage is the easiest way to store data in the browser. Data persists even when the page is refreshed.

<script>
  // Save
  localStorage.setItem("name", "John");
  localStorage.setItem("data", JSON.stringify({age: 25}));

  // Read
  const name = localStorage.getItem("name");
  const data = JSON.parse( localStorage.getItem("data") );

  // Delete
  localStorage.removeItem("name");
  localStorage.clear();   // delete all
</script>

🎯 Complete Example Project

A real web page example that brings together everything you have learned:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Profile</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:sans-serif; background:#0d0d1a; color:#fff; }
    header { background:#1a1a2e; padding:20px; text-align:center; }
    h1     { color:#00d4ff; }
    main   { max-width:800px; margin:0 auto; padding:24px; }
    .card  { background:#111827; border-radius:12px; padding:20px; margin:16px 0; }
    .button { background:#3b6bff; color:#fff; border:none;
              padding:10px 24px; border-radius:8px; cursor:pointer;
              transition:0.2s; }
    .button:hover { background:#00d4ff; color:#000; }
    footer { text-align:center; padding:20px; color:#555; }
  </style>
</head>
<body>
  <header>
    <h1>👤 My Profile</h1>
    <p>Made with HtStudio</p>
  </header>
  <main>
    <div class="card">
      <h2>About Me</h2>
      <p id="bio">Hello! I am a web developer.</p>
      <button class="button" onclick="change()">Change</button>
    </div>
    <div class="card">
      <h2>Skills</h2>
      <ul>
        <li>HTML / CSS</li>
        <li>JavaScript</li>
        <li>Android</li>
      </ul>
    </div>
  </main>
  <footer>© 2025 My Profile</footer>
  <script>
    function change() {
      document.getElementById("bio").textContent =
        "Content updated! 🎉";
    }
  </script>
</body>
</html>

HtStudio Official Application

Download the official HtStudio app now to take advantage of more features.

⬇️ Download for Android

🍪

Cookie Policy

Our cookie usage policy

›

🔒

Privacy and data protection

›

📄

›

✖️

YOU ARE NOT LOGGED IN ✖️

You haven't logged in yet. Log in to save your projects and reduce lag.