Html temelleri neler

ÖmeR · 31 Aralık 2024

HTML (HyperText Markup Language), web sayfalarının yapı taşlarını oluşturur içerik ile tasarımı tanımlar. HTML temelleri :

1- HTML Belgesi Yapısı: Her HTML belgesi, belirli bir yapıya sahiptir. Temel yapısı aşağıdaki gibidir:

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa Başlığı</title>
</head>
<body>
    <!-- İçerik buraya gelir -->
</body>
</html>

<!DOCTYPE html>: HTML5 belgesi olduğunu belirtir.
<html>: Belgenin başlangıcını tanımlar.
<head>: Sayfanın başlık, karakter seti, stil gibi meta bilgilerini içerir.
<meta charset="UTF-8">: Sayfanın karakter kodlamasını tanımlar.
<title>: Sayfanın başlığını tanımlar (tarayıcı sekmesinde görünür).
<body>: Sayfanın görünen içeriği burada yer alır.

2- Etiketler (Tags): HTML, etiketler kullanarak içeriği yapısal olarak organize eder. Etiketler genellikle açılış (<tag>) ve kapanış (</tag>) şeklinde çift olarak gelir.

Örnek:

<h1>: Başlık etiketleri (h1'den h6'ya kadar, önem sırasına göre)
<p>: Paragraf etiketi
<a>: Bağlantı etiketi
<img>: Resim etiketi
<ul>, <ol>, <li> : Sırasız ve sıralı listeler.

3-Nesneler ve Özellikler (Attributes): Etiketler, belirli özelliklerle donatılabilir. Özellikler etiketlerin içerdiği bilgilere göre şekillendirir.

Örnek:

<a href="https://www.example.com">Link</a>: href özelliği, bağlantının hedefini belirtir.
<img src="image.jpg" alt="Açıklama">: src resmi tanımlar, alt ise resmin açıklamasını sağlar.

4- HTML Listeleme (Lists):

Sırasız Liste (<ul>): Öğeler sırasızdır.

HTML:

<ul>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
</ul>

Sıralı Liste (<ol>): Öğeler sıralıdır.

HTML:

<ol>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
</ol>

Tanımlama Listesi (<dl>): Terim ve tanımlar içerir.

HTML:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

5-HTML Formları: Kullanıcıdan veri almak için kullanılır. Temel form elemanları:

<form>: Form etiketidir.
<input>: Veri girişi sağlar (metin kutusu, buton, onay kutusu vb.)
<textarea>: Çok satırlı metin girişi sağlar.
<button>: Buton oluşturur.

HTML:

<form action="/submit">
    <label for="name">Adınız:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Gönder</button>
</form>

6-Yorumlar: HTML yorumları  işaretleri ile yapılır ve tarayıcı tarafından görünmez. Yorumlar, kodu açıklamak için kullanılır.

HTML:

<!-- Bu bir yorumdur -->

7-Bağlantılar (Links): <a> etiketi ile sayfalar arasında bağlantılar oluşturulabilir.

HTML:

<a href="https://www.example.com">Örnek Siteye Git</a>

8-Resimler: <img> etiketi ile sayfada resimler gösterilebilir.

HTML:

<img src="resim.jpg" alt="Açıklama">

9-Tablolar: Veriyi satır ve sütunlar halinde düzenler. Temel etiketler:

<table>: Tabloyu tanımlar.
<tr>: Satırları tanımlar.
<th>: Başlık hücrelerini tanımlar.
<td>: Veri hücrelerini tanımlar.

HTML:

<table>
    <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
    </tr>
    <tr>
        <td>Veri 1</td>
        <td>Veri 2</td>
    </tr>
</table>

10-Semantik HTML: Sayfanın içeriğine anlamlı etiketler kullanarak erişilebilirliği artırmak için kullanılan HTML etiketleri. Örnekler:

<header>: Sayfanın üst kısmındaki başlık veya gezinme kısmı.
<footer>: Sayfanın alt kısmındaki bilgi.
<article>: Bağımsız ve anlamlı içerik bölümü.
<section>: Belirli bir içerik bölümü.

Bu temel HTML öğeleri, web sayfalarının temel yapısını oluşturur ve içerikleri düzenler. HTML' nin düzgün kullanımı, erişilebilir ve kullanıcı dostu web sayfaları oluşturulmasına yardımcı olur.

Html temelleri neler

ÖmeR

Kurucu CEO

Gizliliğinize önem veriyoruz