Tüm yazılımcıların özellikle web sitesi kurulumu ile ilgilenenlerin bilmesi gereken bazı html özelliklerini burada bulabilirsiniz. Html, Front-End geliştirici için temel bir yapıtaşıdır ve ne kadar başlangıç aşaması olsa da bilinmesi gereken bir sürü özelliği de içinde barındırır.

İletişim bağlantıları

HTML’de iletişim bağlantıları oluşturmak oldukça basittir. Çeşitli iletişim yöntemleri için <a> (anchor) etiketini kullanabilirsiniz. İşte farklı iletişim yöntemleri için bağlantılar oluşturmanın birkaç örneği:

E-posta Bağlantısı:

<a href="mailto:info@ornek.com">Bize E-posta Gönder</a>

info@ornek.com yerine bağlantı kurmak istediğiniz e-posta adresini yazın. Kullanıcı bu bağlantıya tıkladığında, varsayılan e-posta istemcisi, alıcı e-posta adresi ön-tanımlı olarak doldurulmuş olarak açılır.

Telefon Bağlantısı:

<a href="tel:+1234567890">Bizi Ara</a>

+1234567890 yerine bağlantı kurmak istediğiniz telefon numarasını yazın. Kullanıcı bu bağlantıya mobil cihazda tıkladığında, telefonun arama ekranı açılır. Masaüstünde ise VOIP servisleriyle çağrı yapmaları istenebilir.

Sosyal Medya Bağlantısı:

<a href="https://www.facebook.com/ornek">Facebook</a>

https://www.facebook.com/ornek yerine sosyal medya profilinizin URL’sini yazın. Bu şekilde, Twitter, LinkedIn, Instagram gibi diğer platformlar için de bağlantılar oluşturabilirsiniz.

Birleşik İletişim Bağlantısı:

<a href="mailto:info@ornek.com">Bize E-posta Gönder</a> | 
<a href="tel:+1234567890">Bizi Ara</a> | 
<a href="https://www.facebook.com/ornek">Facebook</a>

Birden fazla iletişim bağlantısını bir arada göstermek için bu örneği kullanabilirsiniz. Bağlantıları kendi iletişim yöntemlerinize göre ayarlayın.

Html ile açılır kapanır içerik oluşturmak

HTML’de açılır kapanır içerik oluşturmak için <details> ve <summary> elementlerini kullanabilirsiniz. İşte nasıl yapılacağına dair bir örnek:

<details>
  <summary>Detayları Göster/Gizle</summary>
  <p>Bu içerik katlanabilir. İstediğiniz metni buraya yazabilirsiniz.</p>
</details>

Bu kod, bir özet metni ve altındaki gizli bir içerik bölümünü içerir. Kullanıcı özet metnine tıkladığında, içerik bölümü açılır veya kapanır.

Ayrıca, CSS kullanarak görünümü özelleştirebilirsiniz. Örneğin, açılır içeriği varsayılan olarak gizlemek veya özet metnine farklı bir stili uygulamak gibi.

<style>
  /* Açılır içeriği varsayılan olarak gizle */
  details:not([open]) > p {
    display: none;
  }

  /* Özet metni stilini özelleştir */
  summary {
    background-color: #f0f0f0;
    padding: 10px;
    cursor: pointer;
  }

  /* Açılır durumdayken özet metnini değiştir */
  details[open] > summary {
    background-color: #ccc;
  }
</style>

Bu CSS kodu, açılır içeriği varsayılan olarak gizler, özet metnine bir arka plan rengi ve fare imleci değiştirici ekler ve açılır durumdayken özet metninin arka plan rengini değiştirir.

HTML Form öğelerini gruplama

HTML’de form öğelerini gruplamak için <fieldset> ve <legend> etiketlerini kullanabilirsiniz. İşte nasıl yapılacağına dair bir örnek:

<form>
  <fieldset>
    <legend>Kişisel Bilgiler</legend>
    <div>
      <label for="ad">Ad:</label>
      <input type="text" id="ad" name="ad">
    </div>
    <div>
      <label for="soyad">Soyad:</label>
      <input type="text" id="soyad" name="soyad">
    </div>
  </fieldset>
  
  <fieldset>
    <legend>İletişim Bilgileri</legend>
    <div>
      <label for="email">E-posta:</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <label for="telefon">Telefon:</label>
      <input type="tel" id="telefon" name="telefon">
    </div>
  </fieldset>
  
  <button type="submit">Gönder</button>
</form>

Bu kod, “Kişisel Bilgiler” ve “İletişim Bilgileri” olarak iki farklı grup oluşturur. Her grup bir <fieldset> içine yerleştirilmiş ve bir başlık (<legend>) ile tanımlanmıştır. Gruplar, formda farklı bölümleri ayırmak için kullanılır ve formun daha düzenli ve anlaşılır olmasını sağlar.

Ayrıca, CSS kullanarak grupların stilini özelleştirebilirsiniz. Örneğin, grupların arka plan rengini veya kenarlık tarzını değiştirebilirsiniz. Bu şekilde, kullanıcılar formu doldururken hangi bilgilerin bir arada olduğunu daha iyi anlayabilirler.

HTML ile sayfada video oynatma ve bazı özellikler

HTML kullanarak video sunumunu geliştirmek için şu ipuçlarını kullanabilirsiniz:

  1. Gömülü Oynatıcılar: HTML5 <video> etiketi sayesinde videoları web sayfalarınıza kolayca gömebilirsiniz. Bu sayede ziyaretçileriniz videoyu web sayfanızda izleyebilir.
<video controls>
  <source src="video.mp4" type="video/mp4">
  Tarayıcınız video etiketini desteklemiyor.
</video>
  1. Resimli Kapaklar: Videonuzun oynatılma öncesi dikkat çekici bir resimli kapak (thumbnail) ekleyerek ziyaretçilerin ilgisini çekebilirsiniz. Bunun için <video> etiketine poster özelliğini ekleyebilirsiniz.
<video controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  Tarayıcınız video etiketini desteklemiyor.
</video>
  1. Otomatik Oynatma ve Durdurma: Videonun otomatik oynatılması veya durdurulması gerekiyorsa, bunu HTML özelliği veya JavaScript ile yapabilirsiniz.
<video autoplay loop>
  <source src="video.mp4" type="video/mp4">
  Tarayıcınız video etiketini desteklemiyor.
</video>
  1. Metin Altyazıları: Videonuz için metin altyazıları ekleyerek erişilebilirliği artırabilirsiniz. Bu, <track> etiketi kullanılarak yapılır.
<video controls>
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <source src="video.mp4" type="video/mp4">
  Tarayıcınız video etiketini desteklemiyor.
</video>
  1. İlerleme Çubuğu Özelleştirme: Videonun oynatma süresi ve ilerleme çubuğunu özelleştirmek için CSS kullanabilirsiniz.
/* İlerleme çubuğu özelleştirmesi */
video::-webkit-media-controls {
  background-color: transparent;
  color: white;
}

Bu ipuçlarını kullanarak HTML kullanarak videolarınızı daha etkili bir şekilde sunabilir ve kullanıcıların ilgisini çekebilirsiniz.

HTML ile metini üstte veya altta gösterme

HTML’de metni alt-ve üst-dizgi olarak görüntülemek için <sub> ve <sup> etiketlerini kullanabilirsiniz. İşte bu etiketlerle metin görüntülemenin birkaç örneği:

Alt-dizgi (Subscript) Kullanımı:

H<sub>2</sub>O

Bu, “H2O” formülünün “2” rakamını alt-dizgi olarak görüntüler.

Üst-dizgi (Superscript) Kullanımı:

x<sup>2</sup>

Bu, “x” karakterinin “2” rakamını üst-dizgi olarak görüntüler.

Örnek Kullanım:

<sup>E = mc<sup>2</sup></sup>

Bu, “E = mc²” formülünü üst-dizgi olarak görüntüler.

Alt-dizgi ve üst-dizgi etiketlerini istediğiniz gibi kombinleyebilirsiniz.

HTML’de alt-dizgi ve üst-dizgi etiketlerini kullanarak matematiksel ifadeler, kimyasal formüller, tarihler, ve daha birçok şeyi daha doğru bir şekilde gösterilebilir. Bu etiketler sayesinde metinler daha düzgün ve okunaklı hale gelir.

HTML ile dosya indirme

HTML’de tek veya çoklu indirme bağlantıları oluşturmak için <a> (anchor) etiketini kullanabilirsiniz. İşte bu etiketlerle nasıl indirme bağlantıları oluşturulacağına dair örnekler:

Tek İndirme Bağlantısı:

<a href="dosya_yolu" download>İndir</a>

Bu kod, dosya_yolu değişkeninde belirtilen dosyayı indirmek için bir bağlantı oluşturur. download özelliği, tarayıcıya indirme işleminin başlatılmasını sağlar.

Örnek:

<a href="images/resim.jpg" download>Resmi İndir</a>

Bu, “Resmi İndir” adında bir bağlantı oluşturur ve “images” klasöründeki “resim.jpg” dosyasını indirir.

Çoklu İndirme Bağlantıları:

<a href="dosya1_yolu" download>İndir Dosya 1</a>
<a href="dosya2_yolu" download>İndir Dosya 2</a>

Bu kod, iki farklı dosyayı indirmek için iki farklı bağlantı oluşturur.

HTML ile yazım denetimi ve hataları

HTML’de yazım denetimini kontrol etmek için spellcheck özelliğini kullanabilirsiniz. Bu özellik, bir metin alanının yazım denetimi için tarayıcı tarafından otomatik olarak kontrol edilip edilmeyeceğini belirler. İşte nasıl yapılacağına dair bir örnek:

<input type="text" spellcheck="true">

Yukarıdaki örnek, bir metin girişi alanını (input) ve bu alanın yazım denetimi özelliğini göstermektedir. spellcheck özelliğinin değeri true olduğunda, tarayıcı yazım denetimini etkinleştirir. Varsayılan olarak, bu özellik genellikle etkindir.

<textarea spellcheck="false"></textarea>

Bu örnekte, <textarea> etiketiyle oluşturulan bir metin alanının yazım denetimi özelliği devre dışı bırakılmıştır (false). Böylece, kullanıcılar metin girişi yaparken yazım denetimi yapılmaz.

<p contenteditable="true" spellcheck="true">Bu bir metin paragrafıdır.</p>

Bu örnek, bir <p> etiketinin içeriğinin düzenlenebilir olduğunu ve yazım denetiminin etkin olduğunu gösterir. Kullanıcılar bu paragrafı düzenlerken yazım denetimi yapılır.

spellcheck özelliği, varsayılan olarak tarayıcı tarafından desteklenir ve kullanıcıların metin girişlerinin doğru olup olmadığını kontrol etmelerine yardımcı olur. Bu özellik, kullanıcı deneyimini geliştirmenin yanı sıra, yanlış yazılmış kelimelerin tespit edilmesine de yardımcı olur.

HTML bağlantılarının açılışı


HTML’de bağlantıların hedef davranışını tanımlamak için target özelliğini kullanabilirsiniz. Bu özellik, bir bağlantının hedef penceresini veya çerçevesini belirler. İşte kullanımına dair birkaç örnek:

1. Aynı Sekme: Bağlantının aynı tarayıcı sekmesinde açılmasını istiyorsanız, target özelliğini boş bırakabilirsiniz veya _self değerini atayabilirsiniz (bu varsayılan davranıştır).

<a href="https://www.example.com" target="_self">Örneğe Git</a>

2. Yeni Sekme: Bağlantının yeni bir tarayıcı sekmesinde açılmasını istiyorsanız, target özelliğine _blank değerini atayabilirsiniz.

<a href="https://www.example.com" target="_blank">Örneğe Git</a>

3. Belirli Bir Çerçeve: Bağlantının belirli bir çerçevede açılmasını istiyorsanız, target özelliğine çerçevenin adını atayabilirsiniz.

<a href="https://www.example.com" target="myFrame">Örneğe Git</a>

4. Üst Çerçeve: Bağlantının üst çerçevede (frameset içinde) açılmasını istiyorsanız, target özelliğine _top değerini atayabilirsiniz.

<a href="https://www.example.com" target="_top">Örneğe Git</a>

5. Aynı Çerçeve: Bağlantının aynı çerçevede açılmasını istiyorsanız, target özelliğine çerçevenin adını atayabilirsiniz.

<a href="https://www.example.com" target="myFrame">Örneğe Git</a>

Bağlantıların hedef davranışını belirlemek, kullanıcı deneyimini yönetmek ve web sitesi navigasyonunu kontrol etmek için önemlidir. Özellikle, dış bağlantılar veya içeriği değiştirmek istediğiniz bağlantılar için bu özellikleri kullanabilirsiniz.

HTML belirli dosya türlerini kabul etme

Belirli dosya türlerini kabul etmek için HTML formunda accept özelliğini kullanabilirsiniz. Bu özellik, kullanıcının dosya seçim kutusunda yalnızca belirli türde dosyaları seçmesini sağlar. İşte kullanımına dair bir örnek:

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="dosya" accept=".jpg, .jpeg, .png">
  <button type="submit">Yükle</button>
</form>

Bu örnekte, dosya seçim kutusu yalnızca .jpg, .jpeg ve .png uzantılı dosyaları kabul eder. Kullanıcılar diğer dosya türlerini seçemez.

Ayrıca, belirli bir dosya türünü kabul etmek için MIME tipini de kullanabilirsiniz. Örneğin, sadece resim dosyalarını kabul etmek için:

<input type="file" name="dosya" accept="image/*">

veya belirli bir MIME türünü:

<input type="file" name="dosya" accept="image/jpeg, image/png">

Ancak, kullanıcı tarafındaki bu kısıtlama yalnızca görsel seçim kutusunda gösterilir; kullanıcı, dosya tarayıcısından farklı dosya türlerini seçebilir veya istediği dosyayı seçmek için dosya türünü değiştirebilir. Dolayısıyla, güvenlik nedenleriyle dosya türü doğrulaması sunucu tarafında da yapılmalıdır.

Kategoriler:

Front End, İpuçları,