Merhaba Arkadaşlar, size bu sıralar pek çok sitede kullanılan bir çalışmadan bahsedeceğim. Bazı sitelerde web sayfaların arkaplanında ekranı kaplayan videolar bulunmakta ve bunun üzerinde ise site inşaa edilmektedir. Yani arka planda video oynatılırken sitenin diğer materyalleri ( butonlar, resimler, yazılar vs.) bu videonun üzerinde bulunmaktadır. İşte bugün bu konudan sizlere bahsedeceğim. İnşallah beğenirsiniz
Size kendi yapmış olduğum çalışmanın indirme linkini vereceğim, çünkü çalışan dosyanın sizde örnek olarak durmasında yarar var. Ona bakarak kendi web sitenizin planına video koyabilirsiniz. Ama bazı şeyleri de burada anlatarak sizlere yol göstermek istiyorum. Dikkatlice okursanız hiçbir sorun olmayacaktır.
Örneğin İncelenmesi.
Aşağıdaki kodlar <head> ile </head> arasında olmalıdır.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bigvideo.css">
<script src="js/modernizr-2.5.3.min.js">
<body> ve </body> arasında yer vereceğiniz şeyler tamamen videonun üzerinde olacağından istediğiniz gibi sitenizi yapabilirsiniz. Kısacası burada video ile ilgili hiçbir şey yoktur. Sadece sitenizi divlerle veya tablolarla oluşturdurktan sonra onların en altına aşağıdaki kodları yerleştirmeniz gerekmektedir.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='js/jquery-1.7.2.min.js'></script>")</script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="js/bigvideo.js"></script>
<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
if (Modernizr.t
Çerçeveler tarayıcımızda birden fazla html döküman açmamızı sağlar. Her çerçeve de ayrı bir html sayfa vardır ve bunların hepsi birbirinden bağımsızdır.
Dezavantajları;
İstenilen sayfanın yazıcıya gönderilmesi zordur
Her sayfayı takip etmek zordur
Frameset etiketi
<frameset> sayfanın hangi biçimde çerçeveye ayrılacağını belirler, satır veya sütun olarak belirlenir.
Frame etiketi
Her bir çerçevede hangi dökümanın görüntüleneceğini belirtir.
<frameset cols="30%,70%">
<frame src="frame_1.htm">
<frame src="frame_2.htm">
</frameset>
Burada iki sütunlu bir çerçeve belirlenmiş, ilk çerçeve için tarayıcının %30 u ikinci çerçeve için tarayıcının %70 i ayrılmıştır.
%30 luk alana frame_1.html, %70 lik alana da frame_2.html dökümanları çağırılmıştır.
Çerçeveler günümüz standartlarında kullanılmayan, W3C tarafından kullanımdan kaldırlmış bir etikettir, bunun yerine daha çok tablolu sayfalar ya da daha da gelişmişi, tablo kullanmadan <div> ler ile yapılan sayfalar kullanımaktadır. <div> leri css ile birlikte anlatacağım.
Tablolar
Table etiketi ile belirlenir, tr ile satırlara, td ile de sütunlara bölünür.
<td> nin anlamı "table data" dır, yani veri hücresi, tablo içerisine eklenecek olan nesneler (resim, paragraf, form elemanları vs) td etiketinin içinde yazılır.
<table border="1">
<tr>
<td> 1. Satır, 1. Hücre </td>
<td> 1. Satır, 2. Hücre </td>
</tr>
<tr>
<td> 2. Satır, 1. Hücre </td>
<td> 2. Satır, 2. Hücre </td>
</tr>
</table>
Tablonun ekran çıktısı
1. Satır, 1. Hücre
1. Satır, 2. Hücre
2. Satır, 1. Hücre
2. Satır, 2. Hücre
border parametresi ile
Metin biçimlendirme, metnin kalın, italik, renkli olması gibi durumlardır.
Sayfamızı hazırlayalım.
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<strong>Bu metin kalın yazıldı</strong>
<em>Bu metin italik yazıldı</em>
<strong><em>Bu metin hem kalın hem italik yazıldı</em></strong>
<font color="red">Bu metin kırmızı yazıldı</font>
</body>
</html>
<strong> etiketi metni kalınlaştırır, bunun haricinde bir de <b> etiketi vardır, bold anlamına gelen, bu da metni kalınlaştırır fakat şu anda pek kullanılan bir etiket değildir.
<em> etiketi metni italik yapar, <i> etiketi de bunu yapan fakat bu da şu anda pek kullanılan bir etiket değil.
<font> etiketini daha önce de anlatmıştım, metnin yazı rengi, boyutu, fontu gibi özellikleri yapabileceğimiz bir etiket fakat bunu da şu and kullanmıyoruz, w3c bu etiketin kullanımını yasaklamış durumda :)
Metin biçimlendirmeyi daha çok CSS ile yapıyoruz. CSS konusuna daha sonra ayrıntılı olarak değineceğim.
HTML de özel karakterler vardır.
Sayfa içerisinde < veya > gibi karakterler kullanacaksanız bunların < ve > olarak kullanmanız gerekmekte.
< karakterinin karşılığı ≶
> karakterinin karşılığı >
HTML etiketler bu karakterler içerisinde yazıldığı için sayfada harici olarak bunları kullanırsak < > hatalı bir kullanım olur, bunun önüne geçmek için özel karakterleri kullanmalıyız.
& - Ve simgesi karakter karşılığı = &
© - Copyright simgesi karakter karşılığı = ©
® - Kayıtlı marka simgesi karakter karşılığı = ®
Özel karakterlerde büyük - küçük harf duyarlılığı vardır.
Link vermek için <a>
Bir önceki konuda htmlin ne olduğunu ve sayfa yapısını ve temel konuları anlatmıştım.
Şimdi genel olarak html etiketleri nedir onları göstereceğim.
Başlık Etiketleri
<h6>6. Dereceden Başlık</h6>
<h5>5. Dereceden Başlık</h5>
<h4>4. Dereceden Başlık</h4>
<h3>3. Dereceden Başlık</h3>
<h2>2. Dereceden Başlık</h2>
<h1>1. Dereceden Başlık</h1>
Başlık etiketleri <h1> ve <h6> olarak 6 tanedir, h1 en büyük puntoyu belirlerken h6 en küçük puntoyu belirler. Başlığın önemi ne kadar büyükse o kadar büyük puntolu yazılır, <h1> birinci derecen başlıktır. Genelde bir konu anlatılıyorken konu başlığı olarak bu belirlenir.
HTML başlık etiketini gördüğü zaman bu etiketten öncesinde ve sonrasında bir satır boşluk atlar.
Paragraf Etiketleri
<p>Bu bir paragraf</p>
Paragraf etiketi <p> dir yazılan yazının paragraf metni olduğunu belirtir, <p> etiketleri arasında yazılan bir yazının kendinden önceki ve sonraki satırlara bir satır boşuk atılır.
<p>Bu bir paragraftır</p>
<p>Bu başka bir paragraf</p>
Açtığınız her etiketi kapatmayı unutmayın.
Alt satıra geçme
Alt satıra geçmek için <br> etiketini kullanırız, bazı yerlerde <br /> şeklinde kullanımlarını da görürsünüz.
Bazı etiketler kapatılmaz, <br> <img> etiketleri kapatılmayan etiketlerdir, bu gibi istisnalarda <br /> bu şekil bir kullanım yapılır, <br> olarak kullanmamızda da sakınca yoktur fakat yeni nesil html kurallarına göre <br /> şeklinde kullanmak arama motorları açısından daha iyidir.
<p>Bu yazı <br /> alt satıra geçti</p>
Parametreler
Parametrele
HyperText Markup Language, zengin metin işaretleme dili, günümüzde web üzerinde veri paylaşımı için kullanılan bir metin dilidir, son sürümü HTML5'tir.
HTML programlama dili değildir, kendi başına çalışan bir program yazılamaz html kodlarıyla. HTML ile yazı, resim, video gibi verileri içeren sayfalar birbirlerine bağlanır. İnternette gördüğünüz her sayfanın yapısı htmldir. Sayfa kaynağına baktığınızda
<html>
<head>
<title>Sayfa Başlığız</title>
</head>
<body>
Sayfa içeriği
</body>
</html>
gibi kodlar görürsünüz. Burada temel bir html sayfasının kodlarını görmektesiniz.
<title> etiketi içerisinde sayfanın başlığı belirtilir, sayfanın web tarayıcısındaki görünen başlık kısmı.
<body> etiketi içerisinde ise sayfadaki görüntülenecek olan içerikler eklenir.
Html etiketleri Türkçe karakter içermezler.
< ve > işaretleri arasında yazılırlar.
<tagismi>olarak başlar ve </tagismi> olarak kapatılır.
Etiketler iç içe açılabilirler. En son açılan etiket en başta kapatılır
<strong><em>Kalın ve eğik yazı</em></strong>
Örnekte de gördüğünüz gibi strong etiketinin ardından em etiketi açılmış, ilk önce em sonra strong kapatılmış. Strong etiketi kalınlaştırmak için em etiketi de eğik yazı için kullanılmaktadır.
Bazı taglar parametre içerebilirler, örneğin img etiketi sayfaya resim eklemek için kullanılmakta ve
bu eklenilen resmin yükseklik ve genişliğini belirtmek için width ve height parametreleri kulalnılır;
<img src="resimyolu" width="genişlik değeri" height="yükseklik değeri" />
Bazı etiketler kapatılamak zorunda değildir, img etiketi de bunlardan biridir.
Genel Sayfa Yapısı
Sayfa <html> etiketi ile başlar ve </html&g
