Html Video Ekleme

Video ekleme

Bir web sayfasında istediğiniz herhangi bir video dosyasını görüntüleme işlemi, ses dosyası ekleme işlemi ile aynıdır.

Bir görüntü dosyasına link vererek ilgili videonun çalışmasını sağlayabilirsiniz.

Örnek:

<P>Cumhuriyet Bayramı kutlamalarını izlemek için <a href="cumhuriyet.avi"> tıklayınız.</a></P>

Buradaki kodu kaydedip tarayıcıda çalıştırdığımızda cumhuriyet.avi dosyası bilgisayarınızda bulunan video oynatıcı programı tarafından görüntülenecektir.

Video dosyaları ses dosyalarında olduğu gibi tarayıcının içine eklenerek de kullanılabilir.

Örnek:
            <embed src="istiklalmarsi.avi" width="200" height="200" autostart="true" loop="false">

NOT: .mpeg, .avi, .mov, .wmv, .asf yaygın olarak kullanılan video dosyası türlerinin uzantılarından bazılarıdır

Devamı...

Html Frameset Kullanımı

<frameset>

     Çerçeve oluşturmak için kullanılan etikettir. Bu komut ile tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutlarının ne kadar olacağı belirlenir.

    Kullanımı:

Bu etiketle birlikte kullanılacak iki parametre vardır. Bunlar Cols ve Rows parametreleridir.

      Cols

   <frameset> etiketi ile kullanılan parametrelerden birisidir. Ekranı dikey olarak (sütunlar halinde) tanımlanan boyutlara bölmek için kullanılır.

  Oluşturulacak sütunların genişlikleri pixel veya yüzde(%) cinsinde belirlenir. Sütun sayısı, çerçeve sayısını belirleyici niteliktedir.

Kullanımı:

     <FRAMESET COLS="1. sütun genişliği, 2. sütun genişliği, 3.sütunun genişliği, …">
Örnek 1:

    <frameset cols=”30%, 40%, 30%”>

      Buradaki 1.sütun sayfanın %30’u genişliğinde, 2. Sütun %40’ı genişliğinde ve 3. sütun ise %30’u genişliğinde boyutlandırılmıştır.
ÖRNEK:

Örnek 2:

     <frameset cols=”200,*,200”>

     Burada sütunlar şeklinde tanımlanan birinci ve üçüncü çerçeve 200 pixel değerinde, 2. çerçeve ise sayfanın geri kalan kısmını kapsayacak şekilde boyutlandırılmıştır.

    Rows

     <frameset> etiketi ile kullanılan bir diğer parametre ise rows parametresidir. Ekranı yatay olarak (satırlar halinde) tanımlanan boyutlarda bölmek için kullanılır.

   Kullanımı:

       <FRAMESET ROWS="1. satır genişliği, 2. satır genişliği, 3.satır genişliği, …">

  Örnek:

    <frameset rows=”200,*,200”>

   Sayfada görüntülenecek olan çerçevelerin sayısı ve boyutları belirlendikten sonra <FRAME> etiketi kullanılarak pencerelerin içeriğinde neler olacağı belirlenir.

Örnek:

Devamı...

Html Ses Araçları Ekleme

Ses Araçları Ekleme

        Html kodları ile hazırlamış olduğunuz sayfalara ses araçları ekleyerek sayfanızın daha çarpıcı olmasını sağlayabilirsiniz.

               Ses dosyalarını sayfanıza üç farklı durumda ekleyebilirsiniz.

         Sesi arka plân olarak ekleyebilirsiniz. Böylelikle sayfa tarayıcı tarafından yüklendiği anda ses
 dosyası arka plânda çalışmaya başlayacaktır.

       <bgsound src=”muzik.wav” loop=”infinite”>

Burada “loop” özelliğine infinite değeri verilerek, müziğin arka plânda sürekli çalması sağlanmış olunur. Sayfayı kapatana kadar ses dosyası çalmaya devam edecektir.

      “loop” özelliğine sayısal bir değer vererek de (örneğin loop=”5”) müziğin kaç kez tekrarlanıp duracağı belirlenir.

        Ses dosyasına link vererek de ses dosyalarının çalmalarını sağlayabilirsiniz.
ÖRNEK:
      Buradaki linke tıklandığı zaman bilgisayarda bulunan ses dosyası yürütücü programı çalışacak ve muzik.mid isimli ses dosyasının çalması sağlanacaktır.
 
     Ses dosyasını sayfaya ekleyerek, web sayfasını tarayıcıda çalıştırdığınız zaman çalmasını sağlayabilirsiniz.
  ÖRNEK:
 
    Kodunu kaydedip çalıştırdığımız zaman tarayıcıdaki görüntü aşağıdaki gibi olup İstiklal Marşımızın çalması sağlanmış olacaktır.
ÖRNEK:



     Autostart, sayfanın yüklendiği anda ses dosyasının çalışıp çalışmamasını belirler. “True” değerini aldığı zaman ses dosyası,sayfa yüklendiği anda çalışacaktır.

   NOT:.mp3, .wav, .aif, .ra, .mid yaygın olarak kullanılan ses dosyası türlerinin uzantılarından bazılarıdır.

Devamı...

Html Resim Ekleme

Resim Ekleme

Hazırlamış olduğunuz web sayfasının içeriğine uygun olarak resimler eklemek isteyebilirsiniz. Resim eklemek için kullanılan html etiketi <img src>’dir. Src, ekleyeceğimiz resmin bulunduğu dizini gösterir.

Kullanımı:

<img src=”res1.jpg”> res1.jpg resminin sayfamıza eklenmesini sağlar.

<img src> etiketi ile kullanılan birtakım parametreler bulunur. Bunlar; width, height, border, align, alt parametreleridir.
Width: Eklenilecek resmin pixel cinsinden genişliğini gösterir.

Height: Eklenilecek olan resmin pixel cinsinden yüksekliğini gösterir.

Border: Eklenilecek olan resme bir çerçeve çizilip kalınlığını belirlemek için kullanılır. Border=”0”
 olursa çerçeve çizilmez. Buradaki sayı arttıkça çerçevenin kalınlığı da artar.

Alt: Fare ile resmin üzerine gelindiğinde yazılmasını istediğiniz metni belirlemek için kullanılır.

Align: Eklenilecek olan resmin nasıl hizalanacağını belirtmek için kullanılır. Left değeri ile kullanıldığı zaman resim sağa hizalı, right değeri ile kullanıldığında resim sola hizalı, center ile kullanıldığında ise resim ortalanmış olarak sayfaya eklenecektir.

ÖRNEK:

Devamı...

Html Form Nesneleri

Form Nesneleri
Bir form içerisinde metin kutuları, radyo düğmeleri, onay kutuları, metin alanları, açılır menüler gibi elemanlardan istenilenler kullanılabilir. Bu elemanları içeren formları kullanılabilir hale getirmek için ise (submit) ve (reset) düğmeleri kullanılır. Şimdi bu elemanların ve düğmelerin ne işe yaradığını ve nasıl kullanıldığını öğrenelim.

CheckBox
Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılır. Onay kutuları, listelenen seçeneklerden istediğiniz kadarını seçebilmenize veya tümünü seçilmemiş duruma getirmenize olanak sağlar.
ÖRNEK:

Radio
Radio düğmeleri, kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin ayni olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir.
ÖRNEK:

Text
Hazırlamakta olduğunuz forma, tek satırlık yazı yazılabilecek alan (textbox) eklemek için kullanılır. Bu alan ile birlikte size maxlength özelliklerini de kullanabilirsiniz.
ÖRNEK:

Password
Hazırlamakta olduğunuz forma şifreli alanlar eklemek için kullanılır. Type özelliğine, “password” değeri atanarak oluşturulur.
ÖRNEK:

Textarea
Text kutularının görevi, hazırlamakta olduğumuz forma tek satırlık veri giriş alanları eklemek iken Textarea kullanarak forma, birden fazla satırdan oluşan alanlar ekleyebiliriz. Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir.
 ÖRNEK:

Açılır Menüler
Hazırlamakta olduğunuz formlara <select> (seç) etiketi kullanarak açılır menüler ekleyebilirsiniz. Listbox (liste kutusu) ve drop-down list (aşağı açılır liste) şeklinde iki farklı tür de seçim kutusu oluşturulabilir. Listede yer alacak elemanların neler olacağı ise <option> etiketi ile belirlenir.
 ÖRNEK:

Devamı...

Html Liste Yapma

<ol> etiketi kullanılarak oluşturulan listeler sıralı listelerdir. Sıralama sayısal, alfabetik ya da romen rakamları ile yapılabilir. <ul> etiketi ile oluşturulan listelerde ise sıralama elemanı bir grafik semboldür. <li> etiketi bu etiketlerin yorum aralığında kullanılarak liste öğeleri verilir.
Liste kullanımı için yardımcı kodlar :

Girilecek Kod	Görevi
type = "listeleme türü"	Bu alanda belirtilebilecek değerler aşağıda ayrı tablo olarak gösterilecek.
start = "değer"	Sadece <ol> etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır.
value = "değer"	Sadece <li> etiketi içindir. Yorum aralığındaki liste öğesinin numarasını belirtmek amacıyla kullanılır. start = "değer" parametresi ile belirtilen değer, sayısal olmasa bile burada sayısal bir "değer" belirtilebilir.

Sıralamasız liste (<ul>) türü değerleri:

Sıralamasız listlerde liste öğelerini belirtmek için 3 sembol ismi kullanılır:

1. disc - İçi dolu bir daire görüntüler
2. circle - İçi boş bir daire görüntüler
3. square - İçi dolu ya da boş bir kare görüntüler

 Sıralı liste  ( <ol> ) türü değerleri

Türü	Sıralama
1	Onluk tabanda numaralama (1,2,3,4,...)
i	Küçük rakamlarla romen sayıları (i,ii,iii,iv,...)
I	Büyük rakamlarla romen sayıları (I,II,III,IV,...)
a	Küçük harflerle alfabetik (a,b,c,...)
A	Büyük harflerle alfabetik (A,B,C,...)

Örnek :

1. otomobil
2. kamyon
• tekerlek
• direksiyon

Devamı...

Html Link(Bağlantı) Acma

<a> etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız. Web istemciler genellikle öntanımlı olarak bağları altı çizili ve mavi olarak görüntüler. etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir.<
ÖRNEK:
                  <a href="http//:www.google.com.tr">Google</a>

NOT:  Bu uzatıyı <body>...</body> Arasına Yazılcaktır...

Devamı...

Html Nedir?

HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur.

Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımızın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.

Devamı...

Html Arka Plan Renk Kodları

Son Zamanlarda Sık Kullanılan ArkaPlan Renkleri...!!

Shiny Silver

[#EEEEEE]

Reddit White

[#FFFFFF]

Magnolia Mag.Nolia

[#F9F7ED]

Interactive Action Yellow

[#FFFF88]

Qoop Mint

[#CDEBSB]

Gmail Blue

[#C3D9FF]

Shadows Grey

[#36393D]

Mozilla Red

[#FF1A00]

Rollyo Red

[#ECC0000]

Rss Orange

[#FF7100]

Techcrunch Green

[#008C00]

Newsvine Green

[#006E2E]

Fluck Blue

[#4096EE]

Flickr Blue

[#FF0084]

Ruby on Rail Red

[#B02B2C]

Etsy Vermillion

[#D15600]

43 Things Gold

[#C79810]

writely Olive

[#73880A]

Bascamp Green

[#6BBA70]

Mozilla Blue

[#3F4C6B]

Digg Blue

[#356AA0]

Last.fm Crimson

[#D01F3C]

Devamı...