CloudsAndTrails

    HTML Bileşenleri ve Referans Rehberi

    4 min read

    Available Languages :

    HTML Referans Rehberi

    Markdown çok güçlü olsa da, bazen sayfaları görsel olarak zenginleştirmek için standart metin formatının ötesine geçmemiz gerekir. Quartz tabanlı bu dijital bahçede dilediğiniz gibi ham HTML kullanabilirsiniz.

    Bu rehber, sitede halihazırda tasarlanmış özel CSS sınıflarını (class) ve Markdown içinde harika duran standart HTML5 etiketlerini içerir. Tıpkı Markdown rehberi gibi bunu da bir kopya kağıdı olarak kullanabilirsiniz!

    Bohemian Rhapsody Queen

    1. Özel Bileşenler (Custom Components)

    Sitenin CSS (custom.scss) dosyasına gömülü, kopyala-yapıştır ile her yazıda kullanabileceğiniz özel tasarımlar:

    A. İstatistik Kutuları (Stats Grid)

    Hızlıca rakamları veya vurgulamak istediğiniz başarıları yan yana sıralamak için kullanılır:

    <div class="about-stats">
  <div class="stat-item">
    <span class="stat-number">10+</span>
    <span class="stat-label">Yıl Deneyim</span>
  </div>
  <div class="stat-item">
    <span class="stat-number">Azure</span>
    <span class="stat-label">Primary Platform</span>
  </div>
  <div class="stat-item">
    <span class="stat-number">Ultra</span>
    <span class="stat-label">Marathon Runner</span>
  </div>
</div>

    Görünümü:

    10+ Yıl Deneyim
    Azure Primary Platform
    Ultra Marathon Runner

    B. Teknoloji Etiketleri (Tech Chips)

    Yetenekleri, kullanılan dilleri veya araçları listelemek için hap şeklinde (pill) etiketler:

    <div class="tech-chips">
  <span class="tech-chip">Azure</span>
  <span class="tech-chip">Terraform</span>
  <span class="tech-chip">Kubernetes</span>
  <span class="tech-chip">DevOps</span>
  <span class="tech-chip">Cloud-Native</span>
</div>

    Görünümü:

    Azure Terraform Kubernetes DevOps Cloud-Native

    C. Kart Görünümleri (Grid Cards)

    Özellikleri, hizmetleri veya detaylı maddeleri ikonlarla birlikte bir grid yapısında sunmak isterseniz:

    <div class="about-grid">
  <div class="about-card">
    <span class="about-card-icon">☁️</span>
    <h3>Cloud Architect</h3>
    <p>Microsoft Azure ekosisteminde kurumsal çözümler tasarlarken...</p>
  </div>
  <div class="about-card">
    <span class="about-card-icon">🏃</span>
    <h3>Endurance Athlete</h3>
    <p>Sabır ve mental dayanıklılık...</p>
  </div>
</div>

    Görünümü:

    ☁️

    Cloud Architect

    Microsoft Azure ekosisteminde kurumsal çözümler tasarlarken...

    🏃

    Endurance Athlete

    Sabır ve mental dayanıklılık...

    D. İletişim / Link Kartları (Hover Effects)

    Üzerine gelince turuncu altın detaylarla parlayan, aksiyon odaklı kartlar:

    <div class="contact-grid">
  <div class="contact-card contact-card--primary" style="cursor: default;">
    <span class="contact-card-icon">📧</span>
    <h3>Mail At</h3>
    <p>mertyavuz@example.com</p>
    <div class="contact-card-action">Bana ulaşın →</div>
  </div>
</div>

    Görünümü:

    📧

    Mail At

    mertyavuz@example.com

    Bana ulaşın →

    2. Yararlı Standart HTML Etiketleri

    Hiç CSS sınıfı kullanmadan, sadece native HTML ile içeriklerinizi zenginleştirebilirsiniz.

    Klavye Kısayolları (<kbd>)

    Kullanıcılara komutları veya tuş kombinasyonlarını göstermek için. Kopyalamak için Ctrl + C (Mac için Cmd + C) tuşlarına basın.

    <kbd>Cmd</kbd> + <kbd>C</kbd>

    Kısaltmalar (<abbr>)

    Üzerine gelindiğinde anlamını gösteren noktalı yapılar. IaC günümüzde mimarilerin temel taşıdır.

    <abbr title="Infrastructure as Code">IaC</abbr>

    Katlanabilir Detaylar (<details> ve <summary>)

    Callout yapısına çok benzerdir ama HTML’in sunduğu standart, temiz bir formattır.

    Daha fazla bilgi görmek için buraya tıklayın...

    Bu metin siz tıklayana kadar gizliydi. İçine istediğiniz kadar HTML veya yazı ekleyebilirsiniz.

    <details>
  <summary>Daha fazla bilgi görmek için buraya tıklayın...</summary>
  <p>
    Bu metin siz tıklayana kadar gizliydi. İçine istediğiniz kadar HTML veya yazı ekleyebilirsiniz.
  </p>
</details>

    Yükleme ve İlerleme Çubuğu (<progress>)

    Dinamik olmasa da görsel bir tamamlama oranı göstermek isterseniz:

    Proje Tamamlanma Durumu: 75%

    <progress value="75" max="100">75%</progress>

    Metin Vurgulama (<mark>)

    Markdown’ın kendi == (highlight) işaretlemesinin HTML karşılığı. Lütfen bu kısmı okumadan geçmeyin.

    <mark>bu kısmı okumadan geçmeyin</mark>

    Embed iframe (Video veya Harita)

    Kendi videonuzu ya da dış bir sayfayı gömmek için:

    <iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
></iframe>

    Görünümü: