Top

color Tag

  • All
  • Dijital medya
  • Dijital reklam
  • Dijital strateji
  • Eğitim
  • Growth hacking
  • Haber
  • İnceleme
  • Kişisel
  • Kurumsal
  • Markalar
  • Medya
  • Rehber
  • Teknoloji

Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.

Ek açıklama da; bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…

Table Borders(tablo kenarları)

border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.

Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:

Örnek

table, th, td
{
border: 1px solid black;
}
Kendiniz deneyin! »

Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.

Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.

Text Color (Yazı rengi)

Renk özelliği yazının rengini değiştirebilmek için kullanılır.

CSS ile bir renk;

  • Bir hex değeri “#ff0000”
  • Bir rgb değeri “rgb(255,0,0)”
  • Bir renk ismi “red” ile tanımlanır.

CSS renk değerlerine ait referans Css derslerinin bitiminde verilecektir.

Sayfanın varsayılan rengi body seçicisinde tanımlanır. Misal;

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

W3C’nin css bildirisine göre; Color özelliğini verdiyseniz, background-color özelliğini de vermek zorundasınız.

Text Alignment (Yazı hizalama)

text-align özelliği yazının yatay hizalamasının ayarını tanımlar.

Yazı merkeze alınabilir veya sağa/sola hizalanabilir ve yahut iki tarafa hizalanabilir.

text-align, justify olarak belirlendiğinde ,her satır genişler iki yana yaslanmak için satır genişliğince ve sol ve sağ margin düz olur dergilerdeki ve gazetelerdeki gibi.

Text Decoration

text-decoration özelliği ile yazı süslemelerinin ekleyebilir ya da kaldırabilirsiniz.

HTML5 birkaç yeni input type özelliğine sahip formlar için. Bunlar daha iyi giriş kontrolü ve doğrulaması sağlamakta.

Yeni input type özellikleri;

  • email
  • url
  • number
  • range
  • tarih toplayıcıları(date, month, week, time, datetime, datetime-local)
  • search
  • color

Tarayıcı desteği

Input type IE Firefox Opera Chrome Safari
email Hayır 4.0 9.0 10.0 Hayır
url Hayır 4.0 9.0 10.0 Hayır
number Hayır Hayır 9.0 7.0 Hayır
range Hayır Hayır 9.0 4.0 4.0
Date pickers Hayır Hayır 9.0 10.0 Hayır
search Hayır 4.0 11.0 10.0 Hayır
color Hayır Hayır 11.0 12 Hayır

Not; Opera yeni giriş elemanları için en iyi desteği sunmakta. Bununla birlikte, tüm bilinen tarayıcılarda kullanmaya başlayabilirsiniz. Eğer desteklemiyorlarsa, normal text alanları olarak davranacaklardır.

Input Type – email

Kesinlikle e-posta adresinin girileceği bir giriş alanı sağlar.

Eposta alanının değeri otomatik olarak doğrulanır form onaylandığında.

Örnek ve deneme adresi; Anasayfa: <input type="url" name="user_email" />

İpucu; iPhone üzerindeki Safari email giriş elemanı özelliğini tnaımakta ve eşleşecek şekilde klavye girişlerini değiştirmekte ekranda (adds@and.com ayarları)

Input type – URL

Kesinlikle url adresinin girileceği bir giriş alanı sağlar.

Üstteki ipucu burada da geçerli.

HTML 4.01 1999’da standart olduğundan beri internet epey değişime uğradı.

Günümüzde, bazı HTML 4.01 elementlerinin ya modası geçti ya hiç kullanılmadı ya da amacının dışına çıktı kullanımı. Bu elementler de yeni HTML 5’te yeniden yazıldı ya da kaldırıldı.

Günümüzün internet kullanımının üstesinden daha iyi bir şekilde gelme, HTML5’in yapı için yeni elementlerin,çizim, medya içeriği, ve daha iyi form işleme ile mümkün.


Yeni işaretleme elementleri

Daha iyi bir yapı için elementler:

Etiket Tanım
<article> Harici bir kaynağa ait içerik için kullanılır. Blog, forum içeriği gibi.
<aside> İçeriği çerçeveler ve içeriğin yer aldığı yerdedir.
<command> Bir buton, radyo butonu ve bir onay kutusu için.
<details> Bir belge veya belge parçası için ayrıntıları ifade eder.
<summary> Bir başlık, veya özet, element içindeki ayrıntılara dair
<figure> Bir bölümün yerleşik içeriğinin gruplanması, misal video
<figcaption> Figure bölümü(section) için başlık
<footer> Bir belge veya bölümün footer kısmı için, yazarın adını içerebilir, belgenin tarihini de, iletişim bilgilerini de, veya kullanım haklarına dair ibareler de…
<header> Bir belge veya bölümün için tanıtım kısmı için, navigasyon yani yönlendirme menüsünü de içerebilir.
<hgroup> Başlıkların bir bölümüdür,  <h1> den <h6> ya kadardır, en büyük olan bölümün başlığı olur, ve diğerleri de alt başlık olur.
<mark> Yazıları vurgulamak için
<meter> Ölçü birimi için, en düşük ve en  yüksek değerleri bildiğinizde kullanırsınız.
<nav> Navigasyon bölgesi için
<progress> Bir çalışmanın sürecine dair bilgi verir. Flash’taki loading meselesi…
<ruby> Ruby için(Cince karakterler ve noktalamalar da dahil)
<rt> Ruby notuna dair açıklama için
<rp> Ruby elementini desteklemeyen tarayıcıların ne göstereceğini belirtiriz.
<section> Belgedeki bir bölge. Bölümler, başlıklar, footers veya belgenin diğer bölümleri
<time> Zaman ya da tarih tanımlamak için ya da her ikisi…
<wbr> kelime sonu. Satır sonu nun alternatifi.

 


Yeni medya elementleri

HTML5 yeni medya standartları sunmakta:

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.


HTML iFrame

Web sayfasının içinde web sayfası gösterimi iFrame ‘dir.

<iframe src=”URL”></iframe> şeklinde kullanılır. URL alınması istenen sayfadır.

Iframe – Height ve Width

Height ve Width genişlik ve yüksekliğin belirlenmesini sağlar iframe’de de. Piksel olarak olduğu gibi yüzdelik olarak da belirtilebilir.

<iframe src=”iframe.htm” width=”200″ height=”200″></iframe> gibi kullanılır.

Iframe  – Sınırları/Çerçeveyi yani border’i kaldırma

Frameborder özelliği border boyutu belirlenir ve bu sayede isterseniz kenarları gösterirsiniz isterseniz göstermezsiniz 0 değeri ile.

<iframe src=”iframe.htm” frameborder=”0″></iframe>

Bir hedef ya da bağlantı olarak iframe’i kullanma

Bir iframe bir bağlantı için hedef çerçeve/frame olarak kullanılabilir.

Linke bağlı target/hedef özelliği iframe’in name özelliğinin değerini taşıması gerekir.

<iframe src=”iframe.htm” name=”iframe”></iframe>

<p><a href=”http://nefarkederki.com” target=”iframe”>Nefarkederki</a></p>

gibi kullanılabilir.