Diğer

CSS ile Başlıkların Harflerini Büyük veya Küçük Yapmak

Başlık yazarken bazen ilk harfleri büyük yapmayı unutmuş olabiliriz ya da hiçbir harfi büyük yapmıyoruzdur. Bu başlıkları en baştan düzenlemek yerine tek bir kod ile siz başlıklarınızı yeniden düzenleyene kadar idare edebilirsiniz ya da forumlardaki kullanıcıların başlıkları tamamen küçük harfle yazmasına rağmen kelimelerin ilk harfini büyük yapabilirsiniz. Bunun için text-transform: capitalize; kodunu kullanacağız.

Örnek kullanım

Yukarıda cümlemizin tüm harfleri küçük olmasına rağmen text-transform: capitalize; kodu sayesinde ilk harfleri büyük gösterebiliriz. text-transform: lowercase; ile de TÜM HARFLERİ BÜYÜK OLAN CÜMLELERİN harflerini otomatik olarak küçük gösterebilirsiniz. Örneğin bir sözlük sitesi açacaksanız bu kodu mutlaka kullanırsınız.

Ayrıca text-transform: uppercase; kodu ile de yazılarınızın başlıklarındaki cümlelerin tüm harflerini BÜYÜK yapabilirsiniz.

XHTML Introduction -Giriş seviyesinde xhtml ile ilgili bilgiler

Bir web sayfası temel anlamda 2 bloktan oluşmaktadır. Bu bloklara “Head” ve “Body” bloğu adi verilir. “Head” bloğu sayfanızın beyin kısmıdır. Bu blok içerisinde meta (temel) bilgilerinizi, sitenizin başlığını, sitenizde kullanacağınız stil bilgilerini ve JavaScript kodlarını kullanabilirsiniz.

“Body” bloğu ise, gövde bloğu olarak adlandırdığımız bolumdur. Bu bolum içerisinde yazmış olduğumuz her bir tasarımsal element tarayıcı tarafından okunur, yorumlanır ve iletilir.

Yukarıdaki meta bilgileri tamamı ile arama motorlarına yardımcı olmak için kullandığımız bilgilerdir. Bu bilgiler sayesinde anahtar kelimelerimizi, site yazarlarını kullanılan programlama dilini, vs… tüm meta (temel) bilgileri sitenizin “Head” bloğu içerisinde kullanabilirsiniz…

<p> p elementi, paragraf elementidir. p elementi içerisine yazmış olduğunuz her bir yazı, bir metinin paragrafı olarak kabul edilir.

<br /> br elementi bir alt satıra geçmek için kullanılır.

<hr /> hr elementi sayfaya soldan sağa doğru tahmini kaplayacak şekilde – eğer stil vermediyseniz – çizgi çekmeye yarar.

<b>Burası kalın harflerle yazılmıştır.</b> (Bold)

<u>Altı çizili olarak yazılmıştır</u> (Underline)

<i>Burası da yana yatık italik harflerle yazılmıştır.</i> (İtalic)

<center>Ortalamak için kullanılır.</center>

<strong>Yazı içerisinde bir kelimeyi bold yapmak için kullanılır.</strong>

<span>HTML icerisinde basi bos metin bırakmamak için kullanılır. </span>

<sup>Yazı içerisinde bir veya birden fazla karakteri yazının bir tık üstüne almak için kullanılır. Örnek olarak üslü sayılar gösterilebilir.</sup>

<sub>Yazı içerisinde bir veya birden fazla karakteri yazının bir tık altına almak için kullanılır. Örnek olarak Kimya elementleri.</sub>

<h1>VolkanYzc</h1> <h2>VolkanYzc</h2> <h3>VolkanYzc</h3>   <h4>VolkanYzc</h4> <h5>VolkanYzc</h5> <h6>VolkanYzc</h6>

<h > Yazının font büyüklüğünü ayarlar ve 1’den 6’ya doğru küçülmeye başlar.

<small>Yazı fontunu küçüktür.</small>

<big> Yazı fontunu büyütür. </big>

<cite>Alıntı için kullanılır(İtalik ile benzer) </cite>

<blockquote> Paragraf alıntısı olarak nitelendirebilir. Normal paragrafınıza göre daha içeride gözükür.</blockquote>

<pre>İçerisine yazıdğınız girdi çıktıları kullandığınız gibi gösterir.(Tab, space, enter)</pre>

&lt; Küçüktür işareti.(<)      &gt; Büyüktür işareti.(>)

<abbr title=”Bu Bir Açıklamadır.”>Yazının üzerinde gelince gösterilmesini istediğiniz açıklamayı title bölümüne yazarak gösterebilirsiniz.</abbr>

<q>İçerisine aldığınız yazı tırnak içerisinde gösterilir.</q>

HTML’de bir sayfadan başka bir sayfaya link verebilmek için kullandığımız temel <a> etiketidir.

Bu etiketin kendine ait temel iki özelliği bulunmaktadır:

href => İlgili linkin hangi sayfaya yönlendirme yapacağını bildirdiğimiz özniteliktir

target => İlgili linkin içinde bulunduğumuz pencere/sekme içinde mi yoksa yeni bir pencere/sekme içinde mi açılacağını bildirdiğimiz özniteliktir.

Örnek;

Dilerseniz kendi projenizdeki bir html sayfasınıda aynı şekilde gösterebilirsiniz.

Örnek;

Sayfa üzerinde bir resim göstermek için <img/> elementini kullanıyoruz.

Bu element temelde 3 ana özelliğiyle kullanılmaktadır.

src => Source kelimesini kısaltmasıdır. Bu görselin kaynağını belirttiğimiz özniteliktir.

alt => Alternative Text’in kısaltmasıdır. Eğer fotograf tarayıcı üzerinde gözükmez ise onun yerine ne yazsın sorusuna verilen cevaptır.

title => Fotograf başlığı olarak kullanılan özniteliktir. Mouse ile fotografınızın üstüne geldiğiniz zaman tooltip yardımıyla o fotograf ile ilgili açıklamaları içerir.Ancak bir çok tarayıcı artik, alt attribute’unu tıpkı bir title’mış gibi de kullanmaktadır.

Örnek;

Resminizin boyut değişikliği için örnek;

Resminiz üzerinde belirli noktalara geldiğinde bağlantı açmak için <map> </map> taglerini kullanarak haritamızı belirleyerek içerisinde <area> taglerini kullanarak nokta atışı yapabiliyoruz.

Örnek;

Yukarıda ‘Head’ bölümünden bahsetmiştik şimdi biraz daha derinlemesine bakalım. Head bölümü içerisinde kullandığımız elementler <title> <meta /> <link /> <script> <base />’dir

Bu elementlerden kısaca bahsedelim.

<title>Belgenin başlığını tanımlar</title>

<meta Burada yazar içerik ile ilgili sitemiz hakkında bilgilendirme yapılabilir./>

<link Burada bir belge ya da harici kaynağı referans verebilirsiniz/>

<script>İstemci tarafından komut dosyalarınız tanımlanır. JavaScript tarafından görüntü işleme, form doğrulama ve içeriğin dinamikleştirilmesinde kullanılan değişiklikler. </script>

<base Farklı bir internet sitesinden çektiğimiz resim için kullanılır. Örnek olarak bir resmin url’sini base ile belittikten sonra. İmg olarak sitemiz içerisinde gösterebiliriz. Bir head içerisinde sadece bir tane <base > kullanabilirsiniz. />

Sitemize stil kazandırmak için CSS kullanıyoruz. 3 Çeşit CSS bulunmakta bunlar;

Inline – Html içerisinde kullandığınız CSS

External – Head bloklarının içerisine yazdığınız dışarıdan referans alınan CSS

HTML sayfalarımızda tablolama işlemleri sık kullanılır. Sayfa üzerinde bir takim verilerin tablo formatında gösterilmesi için kullanılan element <table> elementidir.

Genellikle bir tablo yapısı tıpkı bir HTML sayfa gibi 3 bloktan oluşur. Bu bloklar <thead> (tablonun header bilgisi), <tbody> (tablonun gövde bilgisi – kayıtların listelendiği alan) ve <tfoot> dan (sayfanın footer alanı) oluşur.

Bu 3 elementinde bir alt (child) elementi <tr> dir (table row) elementidir. Tablo satırı olarak kullanılmaktadır. <tr> elementinin alt elementi olan <td> (table data”) elementi içerisinde ise veriler

listelenir. Satirin hücresi olarak düşünebilirsiniz.

<th> elementi ise kullanım bakımından <td> nin aynisidir ancak thead içerisinde kullanıldığında varsayılan olarak içerisindeki değerleri ortalar ve kalın harflerle yazar…

<caption>Buraya tablomuzun ismini yazıyoruz.</caption>

<colgroup>Bu elementin içerisinde <col/> elementlerini kullanarak tablo satırlarımıza ‘sütun içeriği hizalama, dikey olarak sutun içeriği hizalama ve genişlik özelliklerini verebiliriz. Özellik  vermeyi soldan sağa doğru yapmaktadır.</colgroup>

Örnek;

HTML ortamında listeleme yapabilmek için size iki tip liste seçeneği sunulmaktadır. Bunlardan bir tanesi <ul> (unordered list) bir tanesi ise <ol> (ordered list) ‘dir. <ul> olarak ifade ettiğimiz listeler sayı bazlı değil işaret imi bazlı çalışır. <ol> listeleri ise sayısal listelerdir… <ol> ya da <ul> farketmeksizin her liste tipinin içerisinde <li> (list item) adli elementler bulunur

Örnek;

Buraya kadar bütün block (ör;<h1>, <p>, <ul>, <table>) ve inline (ör;<b>, <td>, <a>, <img>) elementlerini gördünüz. Bu elementlere stil vermek için <div> ve <span> elemenlerini kullanmamız gerekmektedir.

<span> elementi sizin bir yazı içerisinde değişiklik yapmanızı sağlar.

Örnek;

</div> elementi ise sizin bir bölümünüzü tanımlayarak stil verir.

Örnek;

HTML ile input elementlerimizi form elementi içinde kullanmamız gerekmektedir. Başlıca input elementleri; text, checkbox, password, radio, button,file, multiple… Eğer birden fazla Checkbox kullanacaksak ve bunlardan sadece birinin işaretlenmesi öngörülüyorsa ikisinin de name bilgisinin aynı olması gerekmektedir.

Örnek(“text”);

Örnek(“checkbox”);

Örnek(“password”);

Örnek(“radio”);

Örnek

Örnek(“file”);

Örnek(multiple);

Html’de iframe ile bir siteyi ya da bir sitenin bir kısmını gösterebilirsiniz. Örnek olarak google maps verilebilir. Frame’inizin içerisinde görünen biçiminin yükseklik, genişliğini,  çerçevesini ayarlayabilir ve bağlantı linkini verebilirsiniz.

Örnek;

YouTube iframe boyutlandırma

Şimdi sizlere Youtube üzerinden aldığımız iframe kodunun yükseliğini ve genişliğini manüel olarak nasıl değiştirebiliriz bundan bahsedeceğim, öncelikle bilmeniz gereken Yotube’tan video için iframe alırken de bu işlemi yapabilirsiniz, Paylaş > Ekle yolunu kullanarak iframe alabiliyoruz, hemen altta bulunan video boyutu seçeneğinden daha önce hazırlanmış boyutlarda yada özel boyutlar girerek iframe kodlarını alabilirsiniz.

Eğer daha önce iframe alarak bunu sitenizde kullanmaya başladıysanız tekrar Yutube’a girmenize gerek yok, iframe kodunun bütününde geçen width=”xx” (genişlik) ve height=”xx” (yükseklik) değerlerini değiştirerek istedğiniz boyutlandırmayı yapabilirsiniz, örnek kodda genişlik 853 yükseklik ise 480 olarak görünmekte.

Youtube videolarını gizlemek.

Youtube videolarını gizlemek için aşağıdaki kodu kullanabilirsiniz.

Youtube embed’ini beyaz yapma

Sitelerinize eklediğiniz videoların renkleri siyah çerçeveli oluyor bu durumdan sıkıldıysanız eğer tam size göre bir kod var! aşağıdaki kodu youtube embed konu içerisindeki linkin sonuna eklediğinizde video rengi siyah çerçeve yerine, beyaz çerçeve olacaktır.

Youtube videolarını otomatik başlatmak

Youtube videolarını otomatik başlatmak için aşağıdaki kodu video linkini sonuna eklemeniz yeterli olacaktır.

Ek: iletişim formundan gelen soruya istinaden yazıyorum video adresinin hemen sonuna ” işaretinden önce eklemeniz gerekiyor, örnek aşağıda olduğu gibi;
Sayfa: 1 Toplam: 212