TechoCulture

HTML DERSLERİ 4 Tablolar Devam

HTML DERSLERİ 4 serimizde, bir önceki derste başlatmış olduğumuz tablolar konusuna kaldığımız yerden devam ediyoruz.

html dersleri̇ 4 tablolar devam 1 html dersleri̇ 4
HTML DERSLERİ 4 <table>#2

Örnekler çoğaldıkça etiketler ve komutlar gözünüzü korkutmasın. “Nasıl aklımda tutacağım?é diye karamsar düşünmeyin. Bu, bir çok kişinin başına gelen bir olay.

Tavsiye : Bu durumun üstesinden gelmek için konuyu anladıktan sonra etiketleri sesli okuma, onlara amacını hatırlayacağınız şekiller verme, kalemle yazma çalışması gibi egzersizler yapabilirsiniz. Öğrenme şekliniz nasılsa onun üzerinden bir yöntem uygulayabilirsiniz. Hızlı ilerlemek bir çok şeyi yüzeysel öğrenmenize sebep olabilir. Temeli sağlam tutmak gerek.

Yeni bir şey öğrenmenin tadını çıkarın. Şimdi tablo örneklerine bakarak özelliklerin kullanımını ve amaçlarını inceleyelim…

<TABLE>

html dersleri̇ 4 tablolar devam 2 html dersleri̇ 4
HTML DERSLERİ 4 <table>örnek

Yaptığımız alışveriş listesi örneğinde;
center: <!– Tabloyu ortaya hizalamasını –>
border: <!– kenarlığını “4” kalınlığında –>
widht: <!– genişliğini “250” –>
height: <!– yüksekliğini “50” –>
bordercolor: <!– kenarlığın rengini “mavi” olmasını belirttik. –>
<tr>etiketi ile satır oluşturup ile bu satırdaki <td> hücreyi, “30” yüksekliğinde, metni merkeze hizalamasını ve colspan ile “2” sütunu birleştirerek kalın” alışveriş listesi” yazmasını belirttik. Yiyeceklerin içerisinde yer alan ürünlerden aynı fiyatta olanların hücresini birleştirmek için “rowspan” komutunu kullandık. Tablo içeriğini ne kadar dolduracaksak işlem aynı şekilde devam eder…
Bu tabloya ve sayfamıza renk katalım biraz da..

html dersleri̇ 4 tablolar devam 3 html dersleri̇ 4
HTML DERSLERİ 4 background

<body> etiketine style vererek arka planını renklendirdik, etiketinin içerisindeki özelliklerin sonuna, bgcolor ile tabloya da renk verdik. Eğer her satır için yazılara farklı renkler kullanmak isteseydik o zaman da etiketinin içerisine yazılan özelliklerle beraber style=”color:” komutunu verirdik. İçeriği biraz daha zenginleştirmek istersek! Web sayfamıza nasıl resim ekleriz?

<img> RESİM EKLEME

html dersleri̇ 4 resim ekleme
HTML DERSLERİ 4 resim ekleme

Resim eklemenin en kolay yolu çalıştığınız HTML belgesi ile beraber klasör açıp kullanacağınız resimleri bu klasörde tutmak. Bu sayede kullanılacak olan resmi bu klasörden hemen çağırıp kullanabiliriz. Resminizin dosya türünü de bilmek gerek. JPG,JPEG vb. türünde ise kodlar içerisine yazarken de (örn:resim.jpg) şeklinde yazmak gerekir.

Resimleri imaj etiketi ile ekleriz ve src (source) <!– kaynak kelimesinin kısaltılmış halidir, resmin alınacağı kaynağı temsil eder. –> Burada biz aynı klasör içinde tuttuğumuz için direkt ismiyle ekleyebiliyoruz. Kullanılmak istenen resim ile sayfa aynı konumda yer alması gerekir. Eğer resim, sayfa ile aynı konumda değilse o zamanda bulunduğu klasör ile birlikte tanımlama yapılması gerekir.(örn:C:/resimler/resim.jpg). alt (atrribute)ise, resim açıklamasını yazacağımız yerdir. Görünen resim üzerine “açıklamasını” yazar. Görüntülememe gibi bir durum olduğunda açıklama kısmı görünür sadece. Daha sonrasında genişlik ve yükseklik ayarlarını dilediğiniz şekilde düzenleyebilirsiz. Border kullanarak da kenarlık ile süslenebilir. (Dipnot: Arama motorları optimizasyonu anlamında da her resim eklediğinizde alt kullanmanızı önerir. Çünkü arama motorları resimlerin içeriklerini göremez ama kendisine yapılan tanımları bilir. )

Bildiğiniz gibi tablolar verilerle beraber resimleri de içerisine alabiliyordu.Alışveriş listesi örneğinden incelersek;

TABLOYA RESİM EKLEME

html dersleri̇ 4 tabloya resim ekleme
HTML DERSLERİ 4 resim ekleme

Başta yaptığımız resim ekleme etiketini, <td> etiketinin içerisine <img> girip yine aynı şekilde ayarlamalarını yapabiliriz.

Peki web sitemizi konuyla ilgili daha da canlandırmak isteyip arka plana resim eklemek isteseydik;

ARKA PLANA RESİM EKLEME

html dersleri̇ 4 arka plana resim ekleme
HTML DERSLERİ 4 arka plana resim ekleme

Arka plan için <body> etiketinin içerisine background yazdıktan sonra arkaplan.jpeg yazmamız yeterli oluyor. Eğer arka plana haraketli bir resim eklemek isteseydik o zaman, yine aynı yere hangi isimle kayıtlıysa “background=arkaplan.gif” şeklinde yazardık.

Bu yapmış olduğumuz alışveriş listesi bir marketin web sitesi olsaydı o zaman bunu daha fazla kodla ve görselle gösterecektik. Kullanıcı bu ürünlerin arasında dolaşırken de çoğu web sitesinde de görmüşsünüzdür. #Başa dön yada #Sona git şeklinde kullanıcı site içerisinde gezmesine yardımcı olan yazılar vardır. Şimdi de bunu bizim nasıl yapacağımızı inceliyelim.

<a href>

html dersleri̇ 4 tablolar devam 4 html dersleri̇ 4
HTML DERSLERİ < a href>

Tablonun üst bölümüne bir başlık açıp oraya tıpkı internette bir siteyi ziyaret ediyormuş gibi biz de bu site içerisinde gezmek için bir id ismi belirleriz. Atadığımız id “baş”. <a href> (site içerisinde yönlendirme yaparken arama yapacak olan etiket) bunun içirişine de #baş yazarak. Bu < a href “#baş”> kısmına tıklandığında id’si #baş olana git komutu verilmiş olur. Sona git kısmı ise bunun tam tersi kodu ile yazılır. <a href> ayrıca sadece kendi sitemiz içerisinde değil başka bir adrese ulaşmak için de kullanılabilir.(örn:<ahref=”https://www.teknotower.com”>TeknoTower</a>) şeklinde yazardık. Tablolarla ilgili genel çalışmalar bu şekilde. Daha fazla örnek için bakabilirsiniz. Üretkenliğinizi arttırmak için etiketleri iyi öğrenin ama etiketlere bağlı kalmayın. Keyifli çalışmalar…

Yeni haber ve gelişmelerden geri kalmayın!

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


Başa dön tuşu