HTML Hile Sayfası
Son güncelleme
Belge yapısı
Her HTML sayfası bu iskeletle başlar.
| Element | Ne yapar |
|---|---|
<!DOCTYPE html> | Belgeyi HTML5 olarak bildirir (ilk satır) |
<html lang="en"> | Kök element; lang dili ayarlar |
<head> | Üst veri: başlık, bağlantılar, betikler - sayfada gösterilmez |
<meta charset="UTF-8"> | Karakter kodlaması (her zaman ekleyin) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Mobilde duyarlı ölçekleme |
<title> | Tarayıcı sekmesinde ve arama sonuçlarında gösterilen sayfa başlığı |
<body> | Sayfada görünen her şey buraya gelir |
Metin ve başlıklar
| Element | Ne yapar |
|---|---|
<h1> … <h6> | Başlıklar, <h1> en önemlisi (sayfa başına bir tane) |
<p> | Metin paragrafı |
<br> | Satır sonu (kapanış etiketi yok) |
<hr> | Tematik ayrım / yatay çizgi |
<strong> | Önemli metin (kalın) |
<em> | Vurgulu metin (italik) |
<span> | Bir metin parçasını biçimlendirmek için satır içi kapsayıcı |
<code> | Satır içi kod |
<pre> | Önceden biçimlendirilmiş metin (boşlukları korur) |
<blockquote> | Alıntılanmış metin bloğu |
Bağlantılar ve görseller
| Element | Söz dizimi |
|---|---|
| Bağlantı | <a href="https://coddy.tech">Coddy</a> |
| Yeni sekmede aç | <a href="..." target="_blank" rel="noopener"> |
| Çapa (id'ye atla) | <a href="#section">Jump</a> |
| Görsel | <img src="cat.png" alt="A cat" width="200"> |
| Duyarlı görsel | <img src="..." srcset="..." sizes="..."> |
| Açıklamalı figür | <figure><img ...><figcaption>…</figcaption></figure> |
Listeler
| Element | Ne yapar |
|---|---|
<ul> | Sırasız (madde işaretli) liste |
<ol> | Sıralı (numaralı) liste |
<li> | Liste öğesi (<ul> veya <ol> içinde) |
<dl> | Açıklama listesi |
<dt> / <dd> | Açıklama terimi / açıklama ayrıntısı |
Tablolar
| Element | Ne yapar |
|---|---|
<table> | Tablo kapsayıcısı |
<thead> / <tbody> / <tfoot> | Tablo başlığı, gövdesi ve alt bilgi grupları |
<tr> | Tablo satırı |
<th> | Başlık hücresi (kalın, ortalanmış) |
<td> | Veri hücresi |
colspan / rowspan | Hücreleri sütunlar / satırlar boyunca birleştir |
Formlar ve girdiler
Girdi toplayan her formun yapı taşları.
| Element | Söz dizimi / amaç |
|---|---|
| Form | <form action="/submit" method="post"> |
| Metin girdisi | <input type="text" name="q" placeholder="Search"> |
| E-posta / parola | <input type="email">, <input type="password"> |
| Onay kutusu / radyo | <input type="checkbox">, <input type="radio"> |
| Sayı / tarih | <input type="number">, <input type="date"> |
| Etiket | <label for="q">Search</label> |
| Çok satırlı | <textarea rows="4"></textarea> |
| Açılır menü | <select><option>One</option></select> |
| Düğme | <button type="submit">Send</button> |
| Zorunlu alan | <input required> |
Anlamsal ve düzen etiketleri
Tarayıcılar, ekran okuyucular ve arama motorlarının sayfanızı anlaması için genel <div>'ler yerine bunları kullanın.
| Element | Neyi işaretler |
|---|---|
<header> | Bir sayfanın veya bölümün üstü (logo, gezinme) |
<nav> | Gezinme bağlantıları |
<main> | Baskın içerik (sayfa başına bir tane) |
<section> | İçeriğin tematik bir gruplaması |
<article> | Kendi kendine yeten içerik (gönderi, kart) |
<aside> | Kenar çubuğu / yan içerik |
<footer> | Bir sayfanın veya bölümün altı |
<div> | Genel blok kapsayıcısı (anlamı yok) |
Sık kullanılan global öznitelikler
| Öznitelik | Ne yapar |
|---|---|
id | Bir element için benzersiz tanımlayıcı |
class | Bir veya daha fazla sınıf adı (CSS / JS için) |
style | Satır içi CSS (idareli kullanın) |
title | Üzerine gelindiğinde araç ipucu metni |
data-* | Özel veri özniteliği, örn. data-id="42" |
hidden | Elementi gizler |
Başvurduğunuz her HTML etiketi ve özniteliği, ne yaptığına göre gruplanmış halde. Bu HTML hile sayfası; sayfa iskeletini, metin ve bağlantıları, görseller ve medyayı, listeleri, tabloları, formları ve işaretlemenize anlam katan anlamsal etiketleri kapsar.
Hepsi standart HTML5'tir ve her modern tarayıcıda çalışır. Bir etiket kopyalayın ya da canlı önizlemeyle düzenlemek için HTML playground'u açın - kurulum gerekmez.
HTML hile sayfası SSS
Bu HTML hile sayfası ücretsiz mi?
Evet. Bu HTML hile sayfası kayıt gerektirmeden ücretsiz kullanılabilir. Yer imlerinize ekleyin ve bir etiket veya özniteliğe bakmanız gerektiğinde geri dönün.
<section> ile <div> arasındaki fark nedir?
<section> anlamsal bir etikettir - tarayıcılara ve ekran okuyuculara içeriğinin anlamlı, tematik bir grup olduğunu söyler ve genellikle bir başlığı vardır. <div> hiçbir anlam taşımaz ve yalnızca biçimlendirme veya betik için genel bir kapsayıcıdır. Uyduğunda anlamsal bir etikete (<section>, <article>, <nav>) başvurun ve yalnızca hiçbiri uymadığında <div>'e geri dönün.Tüm HTML etiketleri kapanış etiketine ihtiyaç duyar mı?
Çoğu duyar (
<p>...</p>), ancak birkaç "void" element duymaz çünkü içlerinde hiçbir şey barındıramazlar: <img>, <br>, <hr>, <input>, <meta> ve <link>. HTML5'te bunları sondaki eğik çizgiyle veya çizgisiz yazabilirsiniz.HTML'i çevrimiçi olarak deneyebilir miyim?
Evet. HTML playground'u açarak HTML'i tarayıcınızda canlı önizlemeyle yazabilirsiniz - kurulum gerekmez. Yapı istediğinizde, Coddy'nin ücretsiz etkileşimli HTML kursu etiketleri, formları ve düzeni adım adım öğretir.
Bu hile sayfası yeni başlayanlar için uygun mu?
Evet. Sayfa iskeletiyle ve ilk kullanacağınız günlük etiketlerle başlar, ardından formlara ve anlamsal işaretlemeye geçer, böylece üstteki bölümleri ilk günden kullanabilirsiniz.
İlgili kaynaklar
Daha fazla kopya kağıdı
