Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama Ders 14

Selamun aleyküm değerli arkadaşlar son dersimizde kaldığımız yerden devam ediyoruz taki php ve veritabanlı siteler yapmayı öğrenene kadar devam Allahın izniyle son olarak tablolara arkaplan rengi ve arkaplan resmi atamayı öğrenmiştik bu dersimiz ise tabloların boyutlandırılmasını ve sayfamızda hizalandırmayı görecez öncelikle bir önceki dersi inceleme imkanı bulamayan arkadaşlar için aşağıda linkini paylaşalım.

Bir Önceki Dersimiz: Web Tasarım Dersleri Tablolara Arkaplan Vermek Ders 13

Width ve Height

Valign arkadaşlar hücre içerisindeki nesneleri düşey olarak hizalamamızı sağlar ve 3 değer almakla birlikte yukardada belirttiğim gibi

Width parametresi arkadaşlar tablolarda tablo yada hücrenin genişliğini piksel cinsinden ayarlamamız için kullanılır.

Height parametresi ise tablo yada hücrelerin yüksekliğini piksel cinsinden ayarlamızı sağlar.

Width ve Height Tablolarda Kullanımı

Dikkat etmemiz gereken width ve height table etiketinde kullanılırsa bu tablonun tüm ölçüsünü belirlemeyi sağlar.

Unutmamanız gereken tablomuza boyutlandırma yaparken aynı satırdaki hücrelerin (sütunların) yüksekliklerinin eşit olacağı unutulmamalıdır.

Aynı satırda aynı satırda farklı yüksekliğe yada aynı sütunda farklı genişlik istenen hücreler için birden fazla hücrenin bir hücrede birleştirilmesi sonucu yapılabilir bunu 1 yada 2 ders sonra tablo birleştirmeleri göreceğiz ozaman daha net anlayacasınız demek istediğimi.

NOT: Tablolarda bir hücreye her hangi bir nesne eklenmeyecekse boş bırakılmak isteniyorsa tamamen boş bırakmak yerine aşağıdaki kodu         kullanmanız mantıklı olur boş geçmeniz durumunda tablolarda görüntülenme sorunu yaşanabilir.

Tablo Boyutlandırma Uygulaması

Uygulama yapacağımız tablo 2 satır 3 sütundan oluşacak arkadaşlar

Sütun (Hücre Genişlikleri) 1. 25 piksel 2. 50 piksel 3. 75 piksel
Satır Yükseklikleri 1. satır 100 piksel 2. satır 200 piksel olan bir tablo yapacağız

Açıyoruz not defterimizi arkadaşlar aşağıdaki kodları yazarak farklı kaydet diyerek dosya adı tabloboyut.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Tabloları Boyutlandırma Ders 14</title>
</head>
<body>

<table border=”1″>
<tr height=”100″>
<td width=”25″>&nbsp;</td>
<td width=”50″>&nbsp;</td>
<td width=”75″>&nbsp;</td>
</tr>

<tr height=”200″>
<td width=”25″>&nbsp;</td>
<td width=”50″>&nbsp;</td>
<td width=”75″>&nbsp;</td>
</tr>
</table>

</body>
</html>

Html Tablo Boyutlandırılması
Html Tablo Boyutlandırılması

Hemen yukarda yaptıkalrımı öetliyim arkadaşlar 2 satır 3 sütunlu bir tablo dedimki ilk satır yüksekliği 100 piksel olsun 2. satır yüksekliği ise 200 piksel olsun o nedenle alt satır farklı görünüyor.

Sütunlar içinse her satıra 3 sütun istedim ve genişlik olarak 1. sütun 25 2. sütun 50 3. sütun 75 piksel dikkat ederseniz genişleyerek gidiyor.

Tabloların ve Hücrelerin Hizalanması

Tablo ve tablomuzda yer alan yazı, resim türü içeriğin tablo içerisinde hizalanası ve konumlandırılmasını sağlamak için align ve valign parametresinden faydalanacağız.

Align

Align parametresi table ile kullanıldığında tablomuzu yatayda hizalamaya yarar değerli arkadaşlar sağ orta sol şeklinde hizalar.
td etiketi yani sütun etiketi ile kullanıldığında ise sütun hücre içerisinde yer aln yazı, resim türü materyalleri hizalar

Align Parametreleri 3 adettir arkadaşlar nedir bunlar hemen bakalım

  1. left (sola yaslar)
  2. center (ortalar)
  3. right (saga yaslar)

Tablo Hizalama Uygulaması

evet arkadaşlar uygulamamızda 3 satır tek sütun olan bir tabo kullanacağız açıyoruz not defterimizi ve aşağıdaki kodları uyguluyoruz farklı kaydet diyerek dosya adı tablohzalama.html olarak masaüstüne kaydedin ve inceleyin.

<html>
<head>
<title>Web Tasarım Dersleri Tabloları Hialandırma Ders 14</title>
</head>
<body>

<table border=”1″ align=”center”>
<tr>
<td height=”50″ width=”150″ align=”left”>1. HÜCRE</td>
</tr>

<tr>
<td height=”50″ width=”150″ align=”center”>2. HÜCRE</td>
</tr>

<tr>
<td height=”50″ width=”150″ align=”right”>3. HÜCRE</td>
</tr>

</table>

</body>
</html>

Html Tablo Hizalama
Html Tablo Hizalama

Evet arkadaşlar yukardaki örnekte tablomuzu ortaladık sonrasında ilk sütun sola yasladık 2. sütun ortaladık ve 3. sütun ise sağa yasladık.

Tabloların Üstten Hizalanması

Yukardaki örneğimizde yandan hizalama yaptık arkadaşlar sağa sola yasladık ortaladık peki birde üstten hizalamayı görelim dikkat etmeniz gereken diğerinde tabloda dahil hizalanıyordu bunda ise sadece hücreler hizalanabilir .

Valign

Valign arkadaşlar hücre içerisindeki nesneyi düşey olarak hizalamaya yarar valign 3 değeri bulunmaktadır ve şimdi aşağıda görecez bu paraketreler sadece<tr> ve <td> içerisinde kullanılabilir.

  1. valign=”top”   Hücre içindeki nesneyi üst kısma hizalar
  2. valign=”top”   Hücre içindeki nesneyi ortalar
  3. valign=”top”   Hücre içindeki nesneyi alt kısma hizalar

Valign Uygulaması

Evet arkadaşlar 3 satır tek sütunlu bir tablo yapıcam ve height değerini atayacam yani yükseklik genişlik bu durumda içeriğe göre otomatik oluşacaktır. Kodları yazıp farklı kaydet diyerek dosya adı tabloduseyhizalama.html olarak kaydedin

<html>
<head>
<title>Web Tasarım Dersleri Tabloları Düşey Hizalandırma Ders 14</title>
</head>
<body>

<table height=”200″ border=”1″ align=”center”>
<tr>
<td  valign=”top”>ÜST HİZALANDI</td>
</tr>

<tr>
<td valign=”middle”>ORTA HİZALAMA</td>
</tr>

<tr>
<td valign=”bottom”>ALT HİZALAMA</td>
</tr>
</table>

</body>
</html>

Tablolarda Düşey Hizalama
Tablolarda Düşey Hizalama

Evet arkadaşlar bu dersimizinde sonuna geldik bir sonraki dersimizde tablo hücrelerinin birleştirilmesini göreceğiz ve artık 2 ders sonrası projeye ve uygulamaya başlıyoruz artık sitelerimizi yapmaya başlayacaz basit anlamda sonrasında veritabanlı siteleri görecez kurulum, ayar, tema yükleme, tema editleme, forum kurulumu, ayarları, tema yükleme, veritabanı işlemleri çok faydası olacak allahın izniyle.

Derslerimi istediğiniz legal alanda yayınlayabilirsiniz www.webmasteryolcu.com ibaresini eklemek kaydı ile

About SEO Uzmanı Mustafa Gövercin

Merhaba arkadaşlar ben SEO uzmanı Mustafa Gövercin yaklaşık 20 yıldır İnternet siteleri ve SEO konusunda kendimi geliştirmeye çalışıyorum. İnternet siteleri ile tanışmam 1999 yılına uzanmaktadır. Windows 95 işletim sisteminin olduğu ve harici depolama aracı olarak 1.44 MB alanı olan disketli bilgisayarlarla başlamıştım.

Mustafa Gövercin
Esenyurt Belediyesi kültür merkezinde öğrendiğim bilgisayarı o zaman yeni açılan ve hızla yaygınlaşmaya başlayan İnternet kafe türü yerlerde geliştirme imkânı bulmuştum. Çünkü kendime ait ne bilgisayar nede İnternetim vardı. İnternet kafede insanlar o dönemin en ünlü Chat (sohbet) programı Mirc ve ICQ ile vakit geçirirken ben Word ile yazı yazarak parmaklarımı hızlandırmaya çalışıyordum.

Sonrasında İnternet sitelerini incelemeye ve onların nasıl yapıldığını merak etmeye başlamıştım. Karşıma HTML işaretleme dili çıktı. O zaman henüz CSS stil dili bulunmuyordu. Biraz oradan bilgi, biraz bir yerden kod çalma derken site olamayacak kadar kötü siteler yapmaya başlamıştım.

İlk sitem sadece 10MB hosting olan bedavaweb.gen.tr olduğunu söylemeliyim. Eskiden free hosting kelimesi en çok aranan kelimeler arasında yer alıyordu. Çünkü hosting fiyatları gerçekten fahiş fiyatlarla satılıyordu. Depolama alanı ise oldukça azdı. İnsanlar bu nedenle özellikle yabancı kaynaklardan ücretsiz hosting alarak bir şeyler yapmaya çalışıyordu. Hatta bu hizmeti verenlerin büyük bir bölümü sitenize rahatsız edici reklamlar koyardı. Reklam koymayanlar ise çok kaliteli oldukları söylenemez. Bende Atspace.com sitesinden 50MB fakat MYSQL veritabanı olmayan birkaç hosting aldım. Halen o sitelerin açık olduğunu söyleyebilirim. Bu nedenle Atspace firmasına yürekten teşekkür ediyorum.

Toplistler ve Dizinler Çok Yoğun Kullanılıyordu

Google 1998 yılında kurulmasına karşın tam olarak etkin hale gelmesi 2002 sonrası olmuştur. Biz o süreçte sitelerimize trafik çekebilmek için yerli ve yabancı toplist, dizin sitelerini kullandık, o nedenle sitelerin alt (footer) kısmı toplist ve dizinlerin verdiği banner çöplüğü haline gelirdi. Çünkü bir toplist ya da dizinde siten yer alması için o banneri eklemek zorunda kalıyorsun. Tabii ki şuan bu tür siteler tamamen yok olmasa bile sayıları bir elin parmakları kadar az diyebilirim. Arama motoru olarak Yahoo.com daha eski fakat ABD’den başka ülkelere hayrı yok diyebilirim.

Eskiden SEO Diye Bir Şey Yoktu

Çünkü Google algoritmaları çok amatörce çalışıyordu. Bir kelimede ilk sayfaya gelmek için Title kısmına yazman yeterli olurdu. Daha fazla kelimede yer almak için kelimeler arasına virgül koyman yeterli diyebilirim. Şuan 60-70 karakter olan Title (başlık sınırı) eski sistemde title etkili olduğu için insanlar 600-700 hatta daha fazla başlıklara yer verirdi. Çok iyi hatırlıyorum sitemin biri Hülya Avşar kelimesinde ilk sırada çıkıyordu. Hülya Avşar ile ilgili hiçbir içerik ya da görsel olmadığı halde! Çünkü title Hülya Avşar yazması yeterli oluyordu.

2004 Yılında Google Adsense İle Kazanmaya Başladım

Bu işe başladığım ilk zamanlarda bu işlerden para kazanmayı hedefliyordum. İlk olarak kitapyurdu.com gibi sitelerin reklamını alarak başladım. Fakat biriken paramı hiçbir şekilde ödemediler. Şuan büyük bir şirketiz diye övünseler bile geçmişte benim gibi insanların küçük meblağ olmasına karşın ödemedikleri ve hiçbir şekilde cevap vermedikleri haklarını eminim unutmazlar.

Tabii ki böylesi başarısız Türk sponsorlar sonrası Google Adsense Türkiye’de de başvuru almaya başladı. Bende kayıt oldum ve reklam yayınlamaya başladım. İlk ödemem 1400$ değerinde olmuştu (birkaç aylık reklam yayını sonrası) çek gönderdiler. O zaman Havele vs yoktu, çek gönderdiler ama ne yapacağımı bilemiyorum. Bankaları dolaşmaya başladım. Çözüm bulan banka neredeyse hiç çıkmadı. Hatta Ziraat Bankasında görevli bir ihtiyar artık sinirimi dayanılmaz hale getirmişti. Koydum önüne bakmadan bile ne bu diyerek artistçe bir yaklaşımda bulunmuştu. Neyse ki Akbank görevlisi durumu anladı ve sorunu çözdü. Çeki bankaya veriyorum 20$’da işlem ücreti ödüyorum. 1 Ay sonra çekin ödemesi hesabıma geçiyordu.

Eğitim, Moda, Turizm Siteleri Yaptım

Google Adsense ile kazanmaya başlayınca artık sitelerimin sayısını artırmaya karar verdim. Bu kapsamda başlıkta da belirtildiği gibi eğitim, moda ve turizm alanında siteler yaptım. Fakat şuan ki kadar başarılı içerik oluşturduğum söylenemez. Bu nedenle sitelerim birçok algoritmadan zarar gördüler. Bunlar benim için aslında engel ve tecrübe oluyordu. Böylece Google’yi daha iyi anlama ve kurallara adapte olmayı öğrendim.

Sağlık Alanında Hizmet Vermeye Başladım

2009 Yılında Webmastersitesi.com yöneticiliği yaparken bir iş ilanı konusu açıldı ve ben başvuru yaptım orada başladım. Tek şubesi olan bir sağlık merkeziydi. Başladığım o işte 10 yıl geçti ve halen devam ediyorum. 1 Olan şube sayısı 3 tanesi İstanbul’da olmak üzere 6’ya yükseldi. Bu süreçte yaklaşık 100 sitenin tasarım ve SEO işlemlerini gerçekleştirdim.

Sağlık Alanında İçerik Oluşturmayı Öğrendim

En sevdiğim şeylerden biri haline gelen sağlık alanında yazı yazmak, öğrenmek, öğretmek daha önce yaptığım işlerin tümünü geride bıraktı diyebilirim. Çünkü bazı hastalıkların çok kolay nüfus ettiğini öğreniyorsun. İnsanlar çok basit, çok kolay önlemlerle hastalıklardan korunabileceğini öğreniyorsun. Bu bilgiyi bir an evvel insanlarla paylaşmak için heyecanlanıyorsun. Bu nedenle sağlık alanında her yazıyı yazabilirim. Tabii ki henüz ilgilenmediğim alanlarda önce araştırma ve öğrenme süreci olacağı için bazen 2-3 saat geç bitebilir.

Bundan Sonraki Çalışma Alanım Sağlık Siteleri

Bugüne kadar yaptığım işler arasında en keyiflisi olan sağlık ve doktorlarla bir arada çalışma güzelliğini devam ettireceğim. Bunda sonra her işi yapmak, her sektörde yer almak yerine sadece sağlık sektöründe olarak, hastaneler, klinikler ve doktorların İnternet siteleri ve SEO çalışmalarını yapacağım. Çünkü severek yaptığım bu işte daha başarılı oluyorum. Böylece hizmet verdiğim kurum, kuruluş ve bireylere faydalı oluyorum.

3 comments

  1. tablo resim boyutlarını cep telefonlarına uyumlu hale nasıl getiririz bununla ilgili bir makale yazabilirmisiniz. teşekkürler…

    • WEBMASTERYOLCU

      Kadir: Bunun için CSS bilgisi gerekmektedir. Boyutlandırmayı sabit yerine % olarak yapılmalıdır.

  2. web tasarım anlatıyosunuz sayfanın düzenini beğenmedim puanım 1/10

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir