HTML Eğitimi

HTML ANA SAYFA HTML'ye Giriş HTML Düzenleyiciler HTML Temel HTML Öğeleri HTML Özellikleri HTML Başlıkları HTML Paragrafları HTML Stilleri HTML Biçimlendirme HTML Alıntılar HTML Yorumları HTML Renkleri HTML CSS'si HTML Bağlantıları HTML Görselleri HTML Sık Kullanılan Simgesi HTML Tabloları HTML Listeleri HTML Bloğu ve Satır İçi HTML Sınıfları HTML Kimliği HTML İç Çerçeveleri HTML JavaScript'i HTML Dosya Yolları HTML Başlığı HTML Düzeni HTML Duyarlı HTML Bilgisayar Kodu HTML Semantiği HTML Stil Kılavuzu HTML Varlıkları HTML Sembolleri HTML Emojileri HTML Karakter Seti HTML URL Kodlaması HTML'ye karşı XHTML

HTML Formları

HTML Formları HTML Formu Nitelikleri HTML Form Öğeleri HTML Giriş Türleri HTML Girdi Nitelikleri HTML Giriş Formu Nitelikleri

HTML Grafikleri

HTML Kanvas HTML SVG'si

HTML Ortamı

HTML Ortamı HTML Videosu HTML Ses HTML Eklentileri HTML YouTube

HTML API'leri

HTML Coğrafi Konum HTML Sürükle/Bırak HTML Web Depolama HTML Web Çalışanları HTML ÖAM

HTML Örnekleri

HTML Örnekleri HTML Testi HTML Alıştırmaları HTML Sertifikası HTML Özeti HTML Erişilebilirliği

HTML Referansları

HTML Etiket Listesi HTML Özellikleri HTML Genel Nitelikleri HTML Tarayıcı Desteği HTML Olayları HTML Renkleri HTML Kanvas HTML Ses/Video HTML Doktipleri HTML Karakter Kümeleri HTML URL Kodlaması HTML Dil Kodları HTTP Mesajları HTTP Yöntemleri PX'den EM'ye Dönüştürücü Klavye kısayolları

HTML Düzeni Öğeleri ve Teknikleri


Web siteleri genellikle içeriği birden çok sütunda görüntüler (dergi veya gazete gibi).


Örnek

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


HTML Düzen Öğeleri

HTML, bir web sayfasının farklı bölümlerini tanımlayan birkaç anlamsal öğeye sahiptir:

HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
HTML5 Semantik Öğeleri
  • <header> - Bir belge veya bölüm için bir başlık tanımlar
  • <nav> - Bir dizi gezinme bağlantısı tanımlar
  • <section> - Belgedeki bir bölümü tanımlar
  • <article>- Bağımsız, kendi kendine yeten bir içerik tanımlar
  • <aside>- İçeriği içerikten ayrı olarak tanımlar (kenar çubuğu gibi)
  • <footer>- Bir belge veya bölüm için bir alt bilgi tanımlar
  • <details>- Kullanıcının isteğe bağlı olarak açıp kapatabileceği ek ayrıntıları tanımlar
  • <summary><details>- Öğe için bir başlık tanımlar

Anlamsal öğeler hakkında daha fazla bilgiyi HTML Semantiği bölümümüzden okuyabilirsiniz .


HTML Düzen Teknikleri

Çok sütunlu düzenler oluşturmak için dört farklı teknik vardır. Her tekniğin artıları ve eksileri vardır:

  • CSS çerçevesi
  • CSS kayan nokta özelliği
  • CSS esnek kutusu
  • CSS ızgarası


CSS Çerçeveleri

Düzeninizi hızlı bir şekilde oluşturmak istiyorsanız, W3.CSS veya Bootstrap gibi bir CSS çerçevesi kullanabilirsiniz .

W3Schools Spaces'ı hiç duydunuz mu? Burada web sitenizi sıfırdan oluşturabilir veya bir şablon kullanabilir ve ücretsiz olarak barındırabilirsiniz.

Ücretsiz başlayın ❯

* Kredi kartına gerek yok


CSS Float Düzeni

Tüm web mizanpajlarını CSS floatözelliğini kullanarak yapmak yaygındır. Float'ı öğrenmesi kolaydır - sadece floatve clearözelliklerinin nasıl çalıştığını hatırlamanız gerekir. Dezavantajları: Kayan öğeler, esnekliğe zarar verebilecek belge akışına bağlıdır. CSS Float ve Clear bölümümüzde float hakkında daha fazla bilgi edinin .

Örnek

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


CSS Flexbox Düzeni

Flexbox kullanımı, sayfa düzeninin farklı ekran boyutlarını ve farklı görüntüleme cihazlarını barındırması gerektiğinde öğelerin öngörülebilir şekilde davranmasını sağlar.

CSS Flexbox bölümümüzde flexbox hakkında daha fazla bilgi edinin .

Örnek

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


CSS Izgara Düzeni

CSS Izgara Düzen Modülü, satırlar ve sütunlar içeren ızgara tabanlı bir düzen sistemi sunarak, kayan noktalar ve konumlandırma kullanmak zorunda kalmadan web sayfalarını tasarlamayı kolaylaştırır.

CSS Grid Giriş bölümümüzde CSS ızgaraları hakkında daha fazla bilgi edinin .