XHTML nedir, XHTML kuralları ve HTML sayfayı XHTML formatına çevirmek

Extensible HyperText Markup Language kelimesinin kısaltılmışıdır. XHTML’ in türkçe anlamı Genişletilebilir Büyütülmüş Metin İşaretleme Dili‘ dir. 

XHTML, HTML’ in eksik yapısının tamamlanması için yapılmış bir web standartıdır. HTML’ in eksik yapısı XHTML ile tamamlanmıştır.  HTML dilini daha düzenli bir hale getirmiştir. XHTML kesinlikle bir programlama dili değil, web standartıdır.  XHTML, HTML ile neredeyse aynıdır. Dediğimiz gibi HTML’ e bir kaç yeni kural eklenmiştir. 
XHTML nedir?
XHTML 26 Ocak 2000’de W3C  tarafından kabul edilmiştir. 

NOT: W3C web standartlarını belirleyen örgüte verilen isimdir.  HTML kodlarının her tarayıca aynı şekilde görünmesi için kararların verildiği yerdir. 

XHTML ile hazırlanan sayfalar daha hızlı açılır, bütün web taracıyıcılarında sorunsuz olarak çalışır ve web siteleri daha düzgün bir görünüme kavuşturur. 

Peki HTML’ de ne eksikti?

HTML ile sayfa tasarlarken etiketleri kapatmasanızda, eksik etiket girsenizde, etiket sırasını önemsemesenizde ve hatta bazı etiketleri yanlış yazsanızda tarayıcınız hata vermeden sayfanızı görüntüleyebilir.  İşte bu durumu ortadan kaldırıp düzgün web sayfalarının oluşturulabilmesi için, bir standart oluşturmak için XHTML piyasaya sürüldü. 

HTML’ in eksik yapısını incelemek ve XHTML’ i anlamak için XHTML kurallarına bakmak gerekir. 

XHTML kuralları

  1. XHTML sayfalarda DOCTYPE bulunması zorunludur. 

Sayfaları tasarlarken sayfanın başında mutlaka döküman tipini yazmalısınız. ibaresini sayfa başına belirtmek gerekiyor. Örnek bir DTD kullanımına bakalım.

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Continue reading “XHTML nedir, XHTML kuralları ve HTML sayfayı XHTML formatına çevirmek”

PSD’den CSS’e çevirme – PSD to CSS

Web dünyasında ön geliştiriciler (Front End) ve arka geliştiriciler(Back End) vardır. Ön geliştiriciler kullanıcıya görünen kısımda yani ön kısımda çalışırken arka geliştiriciler ise kullanıcı tarafından görülmeyen arka kısımdan görevlidirler. Ön taraf diye adlandırılan kısımda tasarım – client, arka taraf diye adlandırılan kısımdaysa dinamik – server tabanlı bir çalışma mevcuttur. Ön geliştiriciler de arka geliştiriciler gibi kod yazabilirler fakat bu kodların türü değişiktir. Örneğin kendini ön geliştirici olarak geliştiren kişi client tabanlı diller yani Jquery, Javascript, Html, Css vb.. dillerde ileriyken arka tarafta kendini geliştiren kişi ise sunucu tabanlı diller olan PHP, ASP, MySQL vs. gibi dillerde kendini geliştirmektedir.

PSD’den CSS’e çevirme – PSD to CSS

Bu alanda çok profesyonel yerlere gelmek istiyorsanız bir zamandan sonra size sadece PSD’den CSS’e çevirmek yetmeyecektir. Aynı zamanda Jquery gibi teknolojilerle de ilgilenmelisiniz. Başlarken dikkat edilmesi gerekenler arasında elbette size göre en kullanışlı bir web editörü ve hızlı bir şekilde açılan iyi bir tarayıcı PSD’den CSS’e çevirme işleminde sizi sonuca ulaştıracak gereksinimler arasında yatıyor. Fakat işleme geçmeden bilinmesi gereken en temel gereksinim elbette ki HTML. CSS kodlarını ilk aşamada ezberlemeye çalışmayın. Zaten bunu pratikte yapacaksınız. En başta işlemin mantığına odaklanın. Başlayalım…

Photoshop PSD dosyası  Proje dosyasını indir

Temayı indir

1.Aşama: Bölümlendirme

psdPSD’den CSS’e çevirme işlemini yapmadan önce PSD’ yi önce kendi kafanızda daha sonra ise fiziksel olarak bölümlendirmelisiniz. PSD to CSS işleminde bölümlendirme işlemini bir satır – sütün ilişkisi olarak adlandırın. Bu şekilde adlandırdığınız takdirde zihninizde CSS’e çevirmek istediğiniz temayı daha kolay bölümlendirebilirsiniz. Bazı PSD to CSS işlemindeki bölümlendirmeler. Profesyonel çalışmak istiyorsanız bölümlendirme işlemini px tabanlı olarak gerçekleştirin. Temayı kodlamadan önce pixel genişliklerini ve bölümleri kaba taslak olarak bir defteri geçirmenizi öneririm. Bu sayede temayı kodlarken tekrar tekrar bölümlendirmeye konusunda zaman kaybı yaşamazsınız.

Continue reading “PSD’den CSS’e çevirme – PSD to CSS”

Html’de linkler

Linkler sayfalar arasında gezmemize yarayan köprülerdir. Söylemek gerekiyorki link; köprü anlamına gelir.

(Ayrıca link nedir? konusuna göz atabilirsiniz.)

Web sayfalarında dolaşırken tıklama yapabildiğimiz herşeyi linkler sağlamaktadır. Dolayısıyla linklerin önemli bir konudur. Linkleri en geniş şekilde inleyeceğiz.

html sayfalarda link vermek

link verebilmemiz yarayan etiket

etiketidir. Bu etiket sayesinde yazılara, resimlere, web sayfalara, kendi sayfalarınıza ve sayfa içinde farklı bölümlere link verebilirsiniz. Sayfa içinde farklı bölümlere link vermeyi açarsak; örneğin uzun bir konu yazıyorsunuz ve birden fazla başlığa sahip bir konu. Bu konu başlıklarını konu başında belirtip, kişinin istediği başlığa kaydırma çubuğu ile değil linke tıklayarak gitmesini sağlayabiliriz.

bu etiketin kullanım şekli şu biçimdedir:

link yazısı

gidilecek olan adres; bir web sayfası, projede varolan başka bir dosya, herhangi bir dosya adı vs olabilir. Target ise sayfa aynı pencerede mi açılsın yoksa başka bir penceredemi veya sekmede mi açılmasını belirtir. Genelde blank ve self özelliği kullanılır.

Target değerini blank şeklinde verirsek(target=”blank”) link yeni bir sayfada açılır. self değerini verirsek, adres aynı sayfada açılır.

Bir web sayfasına link vermek

Bir web sayfasına link vermek için href özelliğinden faydalanıyoruz. Örneğin mynet.com’ a verelim.

Continue reading “Html’de linkler”

HTML’ de tablolar

Html için tablolar 3 ana etikette tanımlanır.

Bir tablo yaratmak için bu etiketi açmanız gerekir:

Bir tablo oluşturalım.

bilgius bilgius
bilgius bilgius

Satır ve sütün belirtmemiz gerekiyor. Sadece satır belirtirsek yazılan metinler tablo dışında görünür. Mutlaka satır ve sütun belirtmek zorundayız. Her satır sütun içerisinde belirtilir. Satır belirtmeden sütun belirtemezsiniz. Öncelikle satır çizgileri çekiyoruz ve sonra sütünlara bölüyoruz. Bu şekilde mantığını aklınızda tutabilirsiniz. Satır çizgisini sonsuza kadar gittiğini düşünün. Sütun belirttiğiniz yerde satır biter. Düz mantıkla kodları ezberlerseniz karıştırma ihtimaliniz daha fazladır.

Ve gördüğünüz gibi ilk table etiketinde border özelliğini kullanmışız. Eğer orada border özelliğini kullanmazsak tablo çerçevesi görünmez. Onun için border özelliğini en az 1 veriyoruz. Sıfır verirsek yine tablo çerçevesi görünmez.

Mesala bir tablo yaptık şu şekilde:

Tablomuzda bir futbol takımını, mevkilerini ve doğum tarihleri göstereceğiz.

Satır veya sütunları birleştirmek

Satır veya bir sütunu birleştirmek istiyorsak mutlaka sütun oluşturan etiketlerle oynamamız gerekir.

etiketleri içerisine satırları birleştirmek istiyorsak rowspan özelliğini veriyoruz.

Tablo içindeki sütünları birleştirmek için colspan özelliği ile yapılır. Örneğin colspan özelliğine 2 değerini verirsek 1 satır içinde 2 kolun birleşir. Bir örnek verirsek tam olarak anlayacaksınız.

Birde satın birleştirme örneği yapalım.

Continue reading “HTML’ de tablolar”

Dreamweaver’da tablo oluşturmak

Tablolar satır ve sütunlardan oluşan yapılardır.

Html’ de tablolar ile sayfa düzenleri oluşturulabilir. Tabloları kullanarak bir web sayfası tasarlayabiliriz. Tablolar ile web sayfalarımızı belirli bir düzene sokarız. Söylemem gerekir ki tabloları doğru kullandığınız zaman güzel göze hoş tasarımları ortaya koyabilirsiniz.

Tabloları ister kendiniz kodlayabilirsiniz isterde dreamweaver frontpage gibi html editörlerinden biriyle çok uğraşmadan yapabilirsiniz. Dreamwaver daha yaygın bir editör olduğundan bizde dreamwaver’ da tablomuzu oluşturacağız. Eğerki kodları kendiniz yazmak istiyorsanız şu konumuzu ziyaret ediniz: Html’de Tablolar

Öncelikle sayfamıza tablo nasıl eklenir ona bakalım.

insert panelini açalım ve common menüsüne gidelim Orada tablo simgesini göreceksiniz.

Continue reading “Dreamweaver’da tablo oluşturmak”

HTML’ de listeler

Html’ de linkler

Html’ de listeler iki şekilde sıralanır. Sıralı listeler(ordered list) ve sırasız listeler(unordered list).

Örneğin sıralı liste için bir basketbol takımı verelim:

1.Kerem Tunçeri

2.Hidayet Türkoğlu

3.İbrahim Kutluay

4.Mirsad Türkcan

5.Mehmet Okur

Aynı şekilde basketbol takımını sırasız liste olarak verelim:

.Kerem Tunçeri

.Hidayet Türkoğlu

.İbrahim Kutluay

.Mirsad Türkcan

.Mehmet Okur

Html listelerde kullanılan etiketler
<ol>:  Ordered List ifadesinin kısaltılmışıdır. Sıralı listeler anlamını taşır.
<ul>:  Unordered List ifadesinin kısaltılmışıdır. Sırasız listeler anlamını taşır.
<li>:  List Item  ifadesinin kısaltılmışıdır. Liste elemanları anlamını taşır. Her ekleceğimiz madde için bu etiketi kullanmak zorundayız. Diğer etiketleri sadece bir kere kullanıyoruz.Örneğin sıralı bir liste oluşturalım: Continue reading “HTML’ de listeler”

Frame nedir, frameler ve iframe

Frameler bir html sayfasında başka bir html sayfayı göstermeyi sağlar. Yani bir websayfası içinde başka bir web sayfasını gösterebilme imkanı sağlar. Bu sayfalar birbirinden bağımsız olarak çalışır. Söylemek gerekirse bir bir web sayfası içindeki web sayfa çalışıyorsa eğerki diğer web sayfa çalışmasada olur.

Frame nedir? 

Frame türkçe karşılığı çerçeve demektir. Web sayfalarını çerçevelere bölmek için kullanılır. 

Her bir html sayfası ayrı bir web sayfasını gösterir. Belirtmeliyimki her biri farklı bir site olabilir.

Frameler nerelerde kullanılır ve neden kullanılır?

Dediğimiz gibi bir web sitemiz var ise içerisinde başka bir web sayfasının herhangi bir yerini görüntülemek istiyorsak frameleri kullanırız. Mesela sitemiz bir eğitim sitesi olsun. ve öss sonuçlarını sitemizde görüntülemek istiyoruz. Frameler ise, öss sitesinin sonuç bölümünü alıyoruz, sitemizin herhangi bir noktasında yayınlıyoruz.

Framelerin faydaları

  1. Frame kullanarak bir çok siteden parçalar alarak sitenizde yayınlayabilirsiniz.
  2. Frame ile herhangi bir sitenin bir bölümünü sitenizde gösterebiliyoruz.
  3. Frame ile sitenizde her sayfada sabit olarak görünmesini istediğiniz kısmı yapabiliyorsunuz.
  4. Sayfa nagivasyonu kullanmak için frameler kullanabilirsiniz

Framelerin zararları

  1. Frameler sayfanın yavaşlamasına sebep olur. Çünkü aynı anda birden fazla web sayfası yüklenir.
  2. Ziyaretçinin ekran çözünürlüğü istenilen seviyede değilse, frame tamamen görünmez ve ziyaretçi kaydırma çubukları ile site içerisinde dolaşır.

Frameset özelliği

Frameleri kullanabilmek için frameset yapısı kullanılır. 

HTML ile Frameset oluşturma

Frameset yapısını kullanabilmek için öncelikle bir HTML sayfamızın olması gerekiyor ve bunun yanında bir index sayfası oluşturmalıyız. Basit kısa bir örneği birlikte yapalım.

Öncelikle 3 adet sayfa yapalım ve arkaplan renklerini mutlaka farklı renkler seçelimki sayfaları birbirine karıştırmayalım.

bunları ister Dreamweaver’ da yapın isterde not defterinde yapın. Biz not defterinden gösterim. Continue reading “Frame nedir, frameler ve iframe”

CSS Giriş, CSS Nedir? (Videolu)

CSS (Cascading Style Sheets) stil kullanmamız için oluşturulmuş bir teknolojidir. Web sayfalarına görsel bir tasarım eklememizi sağlar.

HTML’ in eski sürümlerinde web sayfalarını görselleştirebilmek için tek tek element özellikleri giriliyordu. HTML 4 ile birlikte CSS teknolojisi piyasaya sürüldü. Böylece yüzlerce sayfalık web projelerini bile tek bir stil sayfası ile şekillendirebiliyoruz. Continue reading “CSS Giriş, CSS Nedir? (Videolu)”

CSS Font İşlemleri – Font Biçimlendirme

FONT-FAMİLY

Yazının font ailesini belirtir. Bu özellikle bir font ailesi oluşturacağımız gibi birden çok font ailesinide bir başlıkta toplayabiliriz. Her tarayıcı bütün fontları desteklemediğinden birden fazla fontları grup içerisinde barındırın.

h1 {font-family: arial, verdana, sans-serif;}

h2{font-family: “Times New Roman”, serif;}

Basit bir örnek:

<html>
<style>
h1 {font-family: arial, verdana, sans-serif;}

h2{font-family: “Times New Roman”, serif;}
</style>
<body>
<h1> Arial font tipi </h1>
<h2> Times New Roman </h2>
</body>

 

FONT-STYLE

Bu özellik sayesinde yazının italik olup olmama niteliğini bildiririz.

Bu özellik 3 farklı değer alır:

  • normal – Metin normal görünür
  • italic – Metin italik yani eğik yazı olarak görünür
  • oblique – Metin yatık görünür (oblique italic ile benzerdir fakat daha az desteklenir)

<html>

<style>
p.normal {font-style:normal}
p.italic {font-style:italic}
</style>
<body>
<p class="normal">bu paragraf normal görünür</p>
<p class="italic">Bu paragraf italik görünür</p>
</body>
</html>

Bu paragraf, normal.

Bu paragraf, italic.

Bu paragraf, oblique.

FONT-WEIGHT 

Bu özellik ile fontun kalınlığı ile oynayabiliriz.

p.normal {font-weight:normal;} // Kalınlık değeri belirlenmemiştir.
2 p.thick {font-weight:bold;} // Yazdığımız yazılar kalın olarak görünecektir.
3 p.thicker {font-weight:900;} // Kalınlık değeri üzerinde oynamalar yapabileceğimiz kullanım şekli.
FONT-SİZE 
Yazı boyutunu ayarlamak için uygularız.
p {font-size:12px}
Ayrıca aşağıdaki bilgiler ilginizi çekebilir.

Font Büyüklüğünü Em Olarak Vermek

Internet Explorerdaki boyutlandırma problemlerini aşmak için çoğu geliştirici font boyutu olarak piksel yerine em kullanır.

Em biriminin kullanımı W3C tarafından tavsiye edilir.

1em boyutu varsayılan font boyutudur ve 16px’e eşittir.

pikselden em ye dönüşüm piksel/16=em formülü ile hesaplanabilir.

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.5625em;} /* 25px/16=1.5625em */
p {font-size:0.75em;} /* 12px/16=0.75em */

Yukarıdaki örnekde ki font boyutları bir önceki örnek ile aynıdır fakat tüm tarayıcılarda sorunsuz çalışacak olan em birimi kullanılmıştır.


Yüzde ve em birimlerinin beraber kullanılması

Aşağıdaki örnek çözüm tüm tarayıcılarda sorunsuz çalışır.

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

body seçicisinde font boyutunu 100% ayarlıyoruz böylece ilk olarak sitenin varsayılan font boyutunu ayarlamış oluyoruz. daha sonra diğer seçicilerde em kullanarak bu sabit bir font boyutu ayarlamış oluyoruz.

Artık CSS kodumuz sorunsuz olarak tüm tarayıcılarda çalışacaktır. Tüm tarayıcılarda aynı boyutlarda metinlerimiz olacaktır. Zoom ve yeniden boyutlandırma işlemleri bu sayede tüm tarayıcılar tarafından desteklenecektir.


Örnek:

Bu paragraf için font-size:250% verilmiştir.

Bu paragraf için font-size:150% verilmiştir.

Bu paragraf için font-size:100% verilmiştir.

Bu paragraf için font-size:18px verilmiştir.

Bu paragraf için font-size:1em verilmiştir.

Bu paragraf için font-size:xx-large verilmiştir.

Bu paragraf için font-size:x-small verilmiştir.

Bu paragraf için font-size:xx-small verilmiştir.


font-size özelliğinin aldığı değerler ve açıklamaları

Değer Açıklama
xx-small font boyutunu xx-small(ektra ektra küçük) olarak ayarlar.
x-small font boyutunu ekstra küçük olarak ayarlar.
small font boyutunu küçük olarak ayarlar.
medium font boyutunu ekstra medyum olarak ayarlar. Bu değer varsayılandır.
large font boyutunu büyük olarak ayarlar.
x-large font boyutunu ektra büyük olarak ayarlar.
xx-large font boyutunu xx-large (ektra ektra büyük) olarak ayarlar.
smaller font boyutunu parent elementin metin boyutundan daha küçük olarak ayarlar.
larger font boyutunu parent elementin metin boyutundan daha büyük olarak ayarlar.
length font boyutunu px,cm gibi sabit bir boyutta ayarlar.
% font boyutunu parent elementin boyutunun yüzdesi olarak ayarlar.
inherit font boyutunu parent elementin boyutunun ile aynı olacak şekilde ayarlar.

 

 

 

CSS Text(Metin) İşlemleri (Videolu)

CSS teknolojisi ile metinlerde bir kaç değişiklik yapabilme şansımız vardır. Aşağıdaki başlıklarda bunları inceleyeceğiz.

 Youtube

Continue reading “CSS Text(Metin) İşlemleri (Videolu)”