HTML ile Temel Sayfa Yapısı Oluşturma

HTML (HyperText Markup Language), web sitelerinin yapısal bileşenlerini oluşturmak için kullanılan bir işaretleme dilidir. Bu dili kullanarak web sayfalarının temel yapısını oluşturabiliriz. HTML, elementler ve etiketlerden oluşan bir yapısı vardır. Elementler, web sayfasının farklı bölümlerini tanımlamak için kullanılırken, etiketler ise elementlerin başlangıç ve bitişini belirtir.

HTML ile sayfa yapısı oluştururken bazı temel etiketler kullanılır. Bunlardan html etiketi, web sayfasının başlangıcını ve sonunu belirtir. head etiketi, sayfanın başlık bilgilerini içerir. Başlık bilgileri, tarayıcı sekmesindeki isim ve sayfanın genel meta verilerini içerir. body etiketi ise sayfanın görünen içeriğini içeren ana kısımdır.

Ayrıca, div etiketi de sayfa yapısı oluştururken sıkça kullanılan bir etikettir. Bu etiket, belirli bir alanı gruplamak ve stil vermek için kullanılır. CSS ile birlikte kullanıldığında daha etkili bir şekilde kullanılabilir. Örneğin, sayfanın ana başlık kısmını bir div içerisine alabilir ve bu div’e özel stil uygulayabiliriz.

HTML ile temel sayfa yapısı oluşturmak oldukça önemlidir, çünkü bu şekilde web sayfaları düzenli ve organize bir şekilde oluşturulabilir. Ayrıca, arama motorları gibi botlar da bu yapıyı okuyarak sayfaları daha iyi anlayabilir. Başlangıçta bu yapının doğru bir şekilde oluşturulması, daha sonra yapılacak stil ve içerik eklemelerini kolaylaştırır. Doğru kullanıldığında HTML, web sayfalarının daha erişilebilir, mantıklı ve görsel olarak hoş görünmesini sağlar.

Box Model Kavramı ve Özellikleri

HTML ve CSS kullanarak web sayfalarını oluştururken, bir elementin boyutları, içeriği ve kenar boşluklarıyla ilgili kontrolü sağlamak önemlidir. Bu kontrolü sağlamak için CSS’in temel bir kavramı olan “Box Model” kullanılır. Box Model, bir elementin içeriğini, padding’ini, border’ını ve margin’ini kapsayan bir yapıdır.

Box Model’e aşina olmak, web tasarımcıların ve geliştiricilerin elementlerin davranışını daha iyi anlamasına ve düzenlemesine yardımcı olur. Box Model, bir elementin toplam genişliğini ve yüksekliğini belirler ve elementin içeriği ile kenar boşluklarını gösteren bir yapı oluşturur.

Box Model’in temel özellikleri şunlardır:

• İçerik (Content): Elementin içeriğini temsil eder. Metin, görüntüler veya diğer HTML öğeleri içerebilir.
• Padding: İçerik ve border arasındaki boşluğu belirler. Padding, element içeriği etrafında bir boşluk bırakarak elementin içeriğini diğer içeriklerden ayırır.
• Border: Elementin etrafını çevreleyen bir çizgidir. Border, padding’in dışında ve margin’in içindedir. Border, elementin şekli ve boyutuyla ilgili bilgiler sağlar.
• Margin: Elementin çevresindeki boşluğu belirler. Margin, diğer elementlerle olan mesafeyi kontrol eder ve elementi diğer elementlerden ayırır.

Özellik	Açıklama
İçerik (Content)	Elementin içeriğini temsil eder
Padding	İçerik ve border arasındaki boşluğu belirler
Border	Elementin etrafını çevreleyen bir çizgidir
Margin	Elementin çevresindeki boşluğu belirler

Float ve Clear Kullanımı

Float ve Clear kullanımı, web tasarımında önemli bir konudur. Bu özellikler, sayfada elementleri yan yana veya alt alta hizalamak için kullanılır. Float özelliği, bir elementi sol veya sağ tarafa kaydırarak diğer elementlerin etrafında sarılmasını sağlar. Örneğin, bir resmi veya metin paragrafını sağa veya sola kaydırmak için float özelliği kullanılabilir.

Float özelliği her ne kadar kullanışlı olsa da, bazı sorunlara yol açabilir. Eğer bir elementin yanına float özelliği uygulandıysa, diğer elementlerin bu elementin çevresinden geçerek yerleşmesi gerekebilir. İşte bu noktada Clear özelliği devreye girer. Clear özelliği, bir elementin float özelliğine etki etmesini engeller. Yani, bir elementin etrafında diğer elementlerin yer almasını sağlayabilir.

Float ve Clear kullanımıyla ilgili dikkat edilmesi gereken bazı noktalar vardır. İlk olarak, float özelliği uygulanan elementin üzerine, daha sonra gelen elementlerin etrafından geçmesi gerektiğini belirtmek için Clear özelliği kullanılmalıdır. Aksi takdirde, elementler yan yana hizalanmayabilir veya sayfa düzeni bozulabilir.

• Float özelliği kullanılırken, float yapısını etkileyecek elementlerin üzerine Clear özelliği uygulanmalıdır.
• Float ve Clear özellikleri, genellikle yan yana sıralanan resimler veya metin paragrafları için kullanılır.
• Float özelliği, elementin yerleştiği konuma göre sol veya sağ tarafa kaydırabilir. Clear özelliği ise elementin etrafından geçilmesini sağlar.

Float Özelliği	Clear Özelliği
Elementleri yan yana hizalamak için kullanılır.	Bir elementin etrafından diğer elementlerin geçmesini engeller.
Sol veya sağ tarafa kaydırmayı sağlar.	Float özelliğinin etkisini engeller.

Grid Sistemi ile Kolon Düzenlemesi

Grid sistemi, web tasarımında kolayca düzenleme yapabilmemizi sağlayan bir tekniktir. Bu sistem sayesinde sayfalarımızı kolonlar halinde düzenleyebilir ve içerikleri yerleştirebiliriz. HTML ve CSS ile oluşturulan bu yapı, web tasarımında büyük bir kolaylık sağlar.

Grid sistemi kullanırken, sayfayı belirli bir düzene oturtmak için birkaç özelliği kullanabiliriz. Bu özelliklerden en önemlisi, kolon sayısını belirlememizi sağlayan “grid-template-columns” özelliğidir. Bu özelliği kullanarak sayfamızı istediğimiz sayıda sütuna ayarlayabiliriz.

Ayrıca, grid sisteminde kolonlar arasındaki boşlukları da belirleyebiliriz. Bu boşlukları ayarlamak için “grid-column-gap” ve “grid-row-gap” özelliklerini kullanabiliriz. Bu sayede kolonlar arasında istediğimiz kadar boşluk bırakabilir veya boşlukları istediğimiz ölçüde küçültebiliriz.

• Grid sistemi ile kolayca kolon düzenlemesi yapabilirsiniz
• Grid-template-columns özelliği ile kolon sayısını belirleyebilirsiniz
• Grid-column-gap ve grid-row-gap özellikleri ile boşlukları ayarlayabilirsiniz

Kolon 1	Kolon 2	Kolon 3
İçerik 1	İçerik 2	İçerik 3
İçerik 4	İçerik 5	İçerik 6

Media Queries ile Responsive Tasarım

Web tasarımında, responsive tasarım günümüzde oldukça önemli hale gelmiştir. İnternet kullanıcıları farklı cihazlarda ve ekran boyutlarında web sitelerine erişim sağladığından, sitelerin mobil cihazlarda doğru bir şekilde görüntülenmesi büyük bir öneme sahiptir. Bu noktada devreye Media Queries kavramı girer. Media Queries, sayfanın ekran boyutunu ve diğer özelliklerini kontrol etmek ve buna göre CSS stillerini uygulamak için kullanılan bir CSS3 özelliğidir.

Media Queries kullanarak, web sitelerimizin farklı ekran boyutlarına uyum sağlamasını ve optimal bir kullanıcı deneyimi sunmasını sağlayabiliriz. Bu, sitenin görüntülendiği cihazın ekran genişliği, yüksekliği, oryantasyonu ve diğer özelliklerine bağlı olarak farklı CSS stillerinin uygulanmasını sağlar. Böylece kullanıcılarımız web sitemizi herhangi bir cihazda rahatlıkla kullanabilirler.

Media Queries ile responsive tasarım yaparken, farklı ekran boyutları için genellikle önceden belirlenmiş bazı breekpoint’ler kullanılır. Bu breakpoint’ler, sayfanın görüntülendiği cihazın ekran genişliği belirli bir değeri geçtiğinde CSS stilinin değişmesini sağlar. Örneğin, 768 piksel genişliğe sahip bir tablet cihazda farklı bir CSS stili kullanmak istiyorsak, media queries kullanarak bu ayrımı yapabiliriz.

Günümüzde artan mobil kullanımı göz önüne alındığında, responsive tasarımın önemi hiçbir zaman azalmayacaktır. Media Queries kullanarak, web sitelerimizin farklı cihazlarda doğru bir şekilde görüntülenmesini sağlayabilir ve kullanıcılarımıza mükemmel bir deneyim sunabiliriz.

Flexbox Teknolojisi ile Düzenleme

Flexbox teknolojisi, modern web tasarımında kullanılan bir düzenleme yöntemidir. Bu teknoloji, HTML ve CSS kullanarak sayfaların görsel düzenini oluşturmamıza olanak sağlar. Flexbox ile birlikte sayfalarımızı kolayca ve esnek bir şekilde düzenleyebilir, elemanları istediğimiz şekilde yönlendirebiliriz.

Flexbox’un en önemli özelliklerinden biri, elemanları bir düzlem üzerinde hizalama yeteneğidir. Yani, elemanları yatay veya dikey olarak nasıl sıralamak istediğimizi belirleyebiliriz. Bu sayede, sayfalarımızda istediğimiz gibi kolonlar oluşturabilir, içerikleri düzenleyebiliriz.

Ayrıca, flexbox sayesinde elemanları hizalarken boşluklar ve aralıklar oluşturmak da oldukça kolaydır. Özellikle responsive tasarımlarda, elemanların farklı ekran boyutlarına göre nasıl yeniden düzenleneceğini belirlemek için flexbox teknolojisini kullanabiliriz.

• Flexbox ile kolayca sayfa düzeni oluşturabilirsiniz.
• Elemanları görsel olarak hizalayabilirsiniz.
• Responsive tasarımlar için ideal bir yöntemdir.
• Boşluklar ve aralıklar oluşturabilirsiniz.

Özellik	Açıklama
display	Sayfanın flexbox olarak düzenleneceğini belirtir.
flex-direction	Elemanların yatay veya dikey olarak nasıl sıralanacağını belirtir.
justify-content	Elemanları yatay eksende nasıl hizalayacağını belirtir.
align-items	Elemanları dikey eksende nasıl hizalayacağını belirtir.

Position Özellikleriyle Sayfa Navigasyonu

Web tasarımında kullanılan farklı position özellikleri, sayfa navigasyonunu düzenlemek için etkili bir şekilde kullanılabilir. Position özellikleriyle elementleri sayfada istenilen konuma yerleştirmek ve düzenlemek mümkündür. Bu sayede, kullanıcılar web sayfasındaki içeriklere daha rahat erişebilir ve doğru bilgilere daha hızlı ulaşabilirler.

İlk olarak, static pozisyon özelliğini kullanarak sayfa navigasyonunu oluşturabiliriz. Bu özellik, elementleri sayfanın normal akışına göre konumlandırır ve varsayılan değerdir. Ancak, sayfa navigasyonunu daha etkileyici hale getirmek isteyenler için farklı position değerleri de bulunmaktadır.

Bir diğer kullanışlı position özelliği fixed pozisyonudur. Bu özellikle, element belirli bir konumda sabitlenir ve kullanıcı sayfayı kaydırdığında bile yer değiştirmez. Özellikle sayfanın üst kısmında yer alan menüler veya hızlı ulaşım linkleri için idealdir. Böylece kullanıcılar her zaman sayfa navigasyonuna erişebilirler.

1. Absolute pozisyon özelliğiyle sayfa içindeki bir elementi belirli bir konuma yerleştirebilirsiniz. Bu özellik, normal akış içinde yer almadığı için diğer elementler üzerine gelebilir ve sayfa yapısını bozabilir. Ancak, doğru şekilde kullanıldığında etkili bir şekilde navigasyon sağlamaktadır.
2. Relative pozisyon özelliği ise elementi normal akıstan hareket ettirirken, diğer elementlerin konumunu değiştirmez. Bu özellikle sayfa içindeki öğeleri istenilen şekilde düzenlemek için kullanılabilir.

Pozisyon Özelliği	Açıklama
Static	Varsayılan pozisyon değeri, elementi normal akışta tutar.
Fixed	Elementi sayfada sabit bir konuma yerleştirir.
Absolute	Elementi belirli bir konuma yerleştirir ve diğer elementler üzerine gelebilir.
Relative	Elementi normal akışta hareket ettirir ancak diğer elementlerin konumunu değiştirmez.

Sık Sorulan Sorular

HTML ile Temel Sayfa Yapısı Oluşturma
1. HTML nedir ve ne için kullanılır?

HTML, Hypertext Markup Language’ın kısaltmasıdır ve web sitelerinin yapısını oluşturmak için kullanılan bir dildir. HTML, metinleri, görüntüleri, bağlantıları ve diğer öğeleri düzenleyerek kullanıcılara web sayfalarını sunar.

2. Temel bir HTML sayfa yapısı nasıl oluşturulur?

Temel bir HTML sayfa yapısı oluşturmak için aşağıdaki kod parçasını kullanabilirsiniz:









Merhaba Dünya!

İlk web sayfama hoş geldiniz!





Box Model Kavramı ve Özellikleri
3. Box model nedir ve HTML’de nasıl kullanılır?

Box model, bir HTML öğesinin içeriğini, kenar boşluklarını, kenarları ve dış boşluklarını gösteren bir kavramdır. Bu özellik, bir öğenin boyutlandırılması ve konumlandırılması için kullanılır.

4. Box modelde margin ve padding arasındaki fark nedir?

Margin, bir HTML öğesinin kenarlarının dışındaki boşluktur. Padding ise öğenin içeriği ile kenarları arasındaki boşluktur. Margin, öğeyle diğer öğeler arasındaki boşluğu ayarlamak için kullanılırken, padding öğe içeriğinin kenarlarından uzaklaşmasını sağlar.

Float ve Clear Kullanımı
5. Float nedir ve nasıl kullanılır?

Float, bir HTML öğesinin sağa ya da sola yüzmek için kullanılan bir özelliğidir. Float, sayfa düzenini kolaylaştırmak ve öğeleri yan yana yerleştirmek için kullanılabilir.

6. Clear özelliği ne işe yarar ve nasıl kullanılır?

Clear, yan yana yüzen öğelerin altına yeni bir satır eklemek için kullanılan bir özelliktir. Örneğin, bir öğenin her iki tarafta veya sadece sol ya da sağ tarafında float olması durumunda, clear özelliği kullanılarak yeni bir satır başlatılabilir.

Grid Sistemi ile Kolon Düzenlemesi
7. Grid sistemi nedir ve nasıl kullanılır?

Grid sistemi, bir web sayfasını kolonlar ve satırlar halinde düzenlemek için kullanılan bir yöntemdir. Bu sayede, sayfaları daha düzenli ve estetik bir şekilde tasarlayabilirsiniz. Grid sistemi, belirli bir sayfada içerikleri ve bileşenleri hizalamak için kullanılır.