Avatar

🇹🇷 🇬🇧

Doğukan Sahil

Antalya / Konya

Genetics and Bioengineering BEng. Biomedical Engineering M.Sc. Student.
#multidisciplinary



HTML TÜRKÇE REHBER

Notlar > Web Tasarım · 138

Web Tasarıma Giriş I. e-kitabımda HTML ve CSS konusunda derlediğim notları bulabilirisniz.

Anasayfa Oluşturma

Web sunucuları, internet üzerindeki siteleri yönetir ve kullanıcılara içerik sağlar. Bir siteye erişim isteğinde bulunulduğunda, sunucu bu isteği karşılamak için bir dosya arar. Genellikle bu dosya, web sitesinin ana sayfası olan "index.html" adlı dosyadır. Eğer belirtilen URL'de spesifik bir dosya adı belirtilmemişse, sunucu otomatik olarak bu "index.html" dosyasını arar ve kullanıcıya sunar. Bu şekilde, "index.html" web sitelerinin ana sayfası haline gelir ve kullanıcılar bu sayfa üzerinden siteye ilk girişlerini yaparlar. Bu durumda ilk yapmanız gereken herhangi bir text editör ile index.html adında bir dosya kaydetmeniz gerekmektedir. Bu sizin anasayfanız olacaktır. Web siteleri, belirli bir yapıya sahip olup, dosyalar ve klasörlerle organize edilir.

├── ana_dizin/
│   ├── index.html              # Ana sayfa dosyası
│   ├── iletisim.html           # İletişim sayfası dosyası
│   ├── css/                    # Stil dosyalarının bulunduğu klasör
│   │   ├── stil.css            # Genel stil dosyası
│   ├── js/                     # JavaScript dosyalarının bulunduğu klasör (isteğe bağlı)
│   │   ├── script.js           # Genel JavaScript dosyası
│   ├── resimler/               # Resim dosyalarının bulunduğu klasör
│   │   ├── logo.png            # Logo resmi
│   │   ├── arkaplan.jpg        # Arkaplan resmi
│   │   ├── ...                 # Diğer resimler

Aşağıdaki örnek kodu index.html adlı dosyanıza yazarsanız basit temel yapıda bir websitesi göreceksiniz. Kaydettikten sonra tarayıcınızla açmanız gerekmektedir.

<!DOCTYPE html> <!-- Bu satır, belgenin HTML5 olarak tanımlandığını belirtir. -->
<html lang="tr"> <!-- Ana html etiketi. "lang" özelliği sayfanın dilini belirtir. -->

<head> <!-- Sayfanın başlık kısmı. Sayfanın meta bilgileri, stil ve scriptleri bu bölümde yer alır. -->
    <meta charset="UTF-8"> <!-- Sayfanın karakter setini UTF-8 olarak tanımlar. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Sayfanın mobil uyumluluğunu sağlar. -->
    <title>Basit Web Sitesi</title> <!-- Tarayıcı sekmesinde gösterilen sayfa başlığı. -->
</head>

<body> <!-- Sayfanın görsel içeriğinin yer aldığı ana bölüm. -->

    <header> <!-- Sayfanın başlık bölümü. Genellikle logo, ana menü gibi öğeler burada yer alır. -->
        <h1>Merhaba Dünya!</h1> <!-- Başlık etiketi. "h1" en büyük başlık, "h6" en küçük başlıktır. -->
    </header>

    <nav> <!-- Navigasyon bölümü. Genellikle menüler bu bölümde yer alır. -->
        <a href="index.html">Ana Sayfa</a> <!-- Bir bağlantı etiketi. "href" özelliği ile yönlendirme yapılır. -->
        <a href="iletisim.html">İletişim</a>
    </nav>

    <main> <!-- Sayfanın ana içeriği bu bölümde yer alır. -->
        <p> <!-- Paragraf etiketi. Metin içerikleri bu etiket içinde tanımlanır. -->
            Bu bir deneme web sayfasıdır.
        </p>
    </main>

    <footer> <!-- Sayfanın alt bölümü. Genellikle telif hakkı, bağlantılar gibi bilgiler burada yer alır. -->
        <p>© 2023 Tüm Hakları Saklıdır.</p>
    </footer>

</body>

</html>

Bu h1 etiketi

Bu h2 etiketi

Bu h3 etiketi

Bu ise p etiketi

<a href="URL">Bağlantı Metni</a> etiketi, bir web sayfasından diğerine bağlantı vermek için kullanılır. "href" özelliği ile yönlendirme yapılır.

Bir <p> etiketi içerisine bu bağlantıyı eklemek için:
<p>Bu bir paragraf. <a href="URL">Tıkla</a> ve diğer sayfaya git.</p>

"target=_blank" özelliği, bağlantının yeni bir sekmede/tarayıcı penceresinde açılmasını sağlar:
<a href="URL" target="_blank">Yeni Sekmede Aç</a>

Temel HTML etiketleri aşağıda gösterilmiştir.

<!DOCTYPE html> <!-- Belgenin HTML5 olarak tanımlandığını belirtir. Doküman tipini tanımlar. -->

<html> <!-- HTML dokümanının başlangıcı. Tüm içerik bu etiketler arasında yer almalıdır. -->

<head> <!-- Sayfanın başlık kısmı. Meta bilgileri, stil ve scriptler bu bölümde yer alır. -->

<title> <!-- Tarayıcı sekmesinde gösterilen sayfa başlığı. -->

<body> <!-- Sayfanın görsel içeriğinin yer aldığı ana bölüm. -->

<h1>...</h1> <!-- Başlık etiketleri. h1 en büyük, h6'ya kadar giderek küçülür. -->

<p> <!-- Paragraf etiketi. Metin içerikleri bu etiket içinde tanımlanır. -->

<a href="URL"> <!-- Bağlantı etiketi. "href" ile yönlendirme yapılır. -->

<img src="resim_yolu.jpg" alt="açıklama"> <!-- Resim etiketi. "src" ile resim yolu, "alt" ile resim açıklaması belirtilir. -->

<ul> <!-- Sırasız liste başlangıcı. -->
    <li>...</li> <!-- Liste öğesi. -->
</ul>

<ol> <!-- Sıralı liste başlangıcı. -->
    <li>...</li> <!-- Liste öğesi. -->
</ol>

<br> <!-- Satır sonu. Yeni bir satıra geçilmesini sağlar. -->

<hr> <!-- Yatay çizgi. İçerikleri ayırmak için kullanılır. -->

<div> <!-- Bölme etiketi. İçerikleri gruplamak için kullanılır. -->

<span> <!-- Aralık etiketi. Metin parçalarını stillemek için kullanılır. -->
<link rel="stylesheet" type="text/css" href="stil.css"> etiketi ile <head> etiketinin arasına koyarak bir stil dosyasına link vereceğiz.