Konular

IMG Tagı Nasıl Kullanılır?

Eger Web sayfalarini gezerken grafik destekleyen bir tarayıcı kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir.Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir

Artık resimlerimizi websayfamıza yerleştirmenin zamanı gelmiş bulunuyor. Şimdi bu resimi kullanacağız, sağ tıklayarak resim klasörüne kopyalayın...

IMG Tagı Nasıl Kullanılır

Bir resmi belirtmek için <IMG> (image) etiketini kullanırız.

<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>

  Aynı zaman da kaynağını ( src = source, yani dosya yolu ) ve ölçülerini ( size ) belirtiriz.

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH="130" HEIGHT="101" />
</BODY>

 

Kaynak yani SRC resmin hangi resim olduğunu belirtirken, aynı zamanda nerede olduğunuda bildirir. Yukardaki SRC, "chef.gif", browserin "chef.gif" adındaki resmi HTML dosyası ile aynı directory den yüklemesini belirtiyor (yani resim dosyası ile HTML dosyanız aynı klasörün içinde bulunuyor) Burada, nasil HTML dökümanlarin hepsi .html ile bitiyorsa, tüm resim dosyalarinin sonu da .xbm, .gif, .png veya .jpg ile bitmelidir.


Aşağıda şemalarla anlatmaya çalıştım (ilk baktığınızda anlamazsanız, gidin kendinize bir kahve yapın, yada mevsim meyvalarından atıştırın, uykunuz açılsın, tekrar okuyun. Bunların da faydası olmazsa, üzerinde resim olan herhangi bir web sayfasıı sağ tıklayı, kaynaığını görüntüleyin, bakın nasıl yapmışlar. Gene çözemediyseniz, üzülmeyin, bana da ilk 1-2 sefer böyle olmuştu, bakın şimdi size ders bile veriyorum :-))), gerçekten, anlamadığınız şeyleri hiç dert edinmeyin, nasılsa bir gün öğreniyorsunuz.)

IMG Tagı Nasıl Kullanılır

<img src="chef.gif" width="130" height="101" />

  chef.gif adındaki resmin onu çağırran HTML dökümanı ile aynı klasörde olduğu anlamına gelir.

IMG Tagı Nasıl Kullanılır

<img src="images/chef.gif" width="130" height="101" />

    chef.gif adındaki resmin, onu çağıran HTML dökümanından bir seviye aşağıda başka bir klasörde olduğunu belirtir. Bu daha da ileri seviyelere gidebilir.

IMG Tagı Nasıl Kullanılır

<img src="../chef.gif" width="130" height="101" />

chef.gif adındaki resmin, onu çağıran HTML dökümanından bir seviye yukarda olduğunu belirtir.

IMG Tagı Nasıl Kullanılır

<img src="../../chef.gif" width="130" height="101" />

chef.gif adındaki  resmin, onu çağıran HTML dökümanından iki seviye yukarda olduğunu belirtir.

IMG Tagı Nasıl Kullanılır

<img src="../images/chef.gif" width="130" height="101" />

chef.gif adındaki  resmin, onu çağıran HTML dökümanından bir seviye yukarda ve images klasöründe olduğunu belirtir.

 

Web alanınızı da saçma bir hale getirmemek için, bütün resimlerinizi resimler diye bir klasörde toplayın sonrada aşağıdaki formatta bir etiketleme yapın.

<img src="resimler/chef.gif" width="130" height="101" />

Veya tüm resimleriniz için URL adreside kullanabilirsiniz. 

<img src="http://www.korfez.net/resimler/chef.gif" width="130" height="101" />

Eğer resimler en üst klasörde (root -kök) yerleştirilmişse

<img src="/chef.gif" width="130" height="101" />

  Ancak kök adres web hosting için farklı, local makineniz için farklı adrestir. Webte bu adres hostingin size izin verdiği alanı, kendi makinenizde C: yi ifade eder.

 

Websayfanızı Upload ettikten sonra, resimleriniz gözükmüyorsa ve resimleri de yüklediğinize eminseniz (FTP programı ile program penceresinden orada olduklarını görün) aşağıdaki seçenekleri kontrol edin

  • Chef.gif ile CHEF.GIF aynı şeydir.
  • Dosya adlarında boşluk bırakmayın, alt karakter kullanın. Benim Annem.gif yerine benim_annem.gif i tercih edin.

 

IMG Parametresi [Alt]:

<img src="chef.gif" width="130" height="101" alt="Çok sevimli bir kuş türü" />

  ALT resimin yerine kullanılan bir açıklama yazısının bulunmasıdır. Kullanıcının tarayıcı programının resim yükleme özelliği sayfaların hızlı yüklenmesini sağlamak için kapatılmış, yada Kullanıcımız sadece metin gösteren bir browser kullanıyor olabilir. Bu gibi durumlarda ALT özelliği önemlidir. Ayrıca arama motorları resim hakkında bir fikre ulaşmak için alt içerisinde yazana bakarlar ki, SEO için bu önemli konulardan biridir.

IMG Parametresi [width] [heigth]:

  Aşağıdaki gibi width ve height parametrelerini kullanmadan IMG tagı kullandığınızda da tarayıcı resimleri gösterir. Ancak burada hızdan kaybedersiniz, çünkü tarayıcı bilmediği resim boyutları gelene kadar sayfayı yüklemez. Eğer boyutları bilse resim dosyası yüklenmese dahi pencerede resmin alanı kadar yer ayırır ve sayfayı yükledikten sonra eksikleri tekrar yükleyebilirdi.

<img src="chef.gif" alt="Çok sevimli bir kuş türü" />

 

 Width ve Height değerleri ile resim boyutlarında göreceli oynama yapabilirsiniz.

<img src="chef.gif" alt="Çok sevimli bir kuş türü" width="300" height="100" />

  IMG Tagı Nasıl Kullanılır

<img src="chef.gif" alt="Çok sevimli bir kuş türü" width="100" height="300" />

  IMG Tagı Nasıl Kullanılır

İstediğiniz ölçüleri yazabilirsiniz ve esas ölçülerin önüne geçersiniz.

Örneğin şu kırmızı noktaya bakın: .  Bu 1x1 pixel ölçüsünde bir kare aslında.

 

<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>

 

 

Parametreler:

Attribute Value Description HTML5
align top
bottom
middle
left
right
 Deprecated in HTML 4.01. Specifies the alignment of an image according to surrounding elements Desteklenmez
alt text Resmine açıklama eklemek için kullanılır. SEO için önem taşır.  
border pixels Resmin etrafını saran çizgi kalınlığı Desteklenmez
crossorigin anonymous
use-credentials
Allow images from third-party sites that allow cross-origin access to be used with canvas  
height pixels Specifies the height of an image  
hspace pixels Not supported in HTML5. Deprecated in HTML 4.01. Specifies the whitespace on left and right side of an image Desteklenmez
ismap ismap Specifies an image as a server-side image-map  
longdesc URL Not supported in HTML5. Specifies the URL to a document that contains a long description of an image  
src URL Specifies the URL of an image  
usemap #mapname Specifies an image as a client-side image-map  
vspace pixels Not supported in HTML5. Deprecated in HTML 4.01. Specifies the whitespace on top and bottom of an image  
width pixels Specifies the width of an image  

 

Hizalama Parametresi [align]:

Bu şekilde yapılan hizalama işlemleri HTML 4 ve sonrasında tavsiye edilmemektedir. Bunun yerine CSS kodlarını kullanmak elbette daha mantıklıdır.

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="LEFT">

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="RIGHT">

 

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="TOP">

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="TEXTTOP">

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="BOTTOM">

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="ABSBOTTOM">

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="MIDDLE">

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="ABSMIDDLE">

IMG Tagı Nasıl Kullanılır

<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="BASELINE">

 

Kaynak 

 

 

Yorumunuzu Ekleyin
Html Tag Listesi

Bazı html tagları hakkında açıklamalı referans listesi

46,428 Okunma 0 Yorum 04/07/2007 20:15:59 29/05/2014 20:16:20

HTML5 Form Yapısı ve Form Elemanları

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik.Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar.Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz.Formlar .etiketleri arasına yazılırlar.Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım

40,945 Okunma 0 Yorum 06/07/2007 00:41:58 31/12/2015 00:52:19

HTML ile İlk Sayfayı Oluşturmak

İlk HTML sayfamızı nasıl oluşturuyoruz?

40,405 Okunma 0 Yorum 04/07/2007 07:33:43 06/03/2015 17:26:45

Meta Tag Nedir?

Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır. Onun gibi düşünmelisiniz

38,460 Okunma 0 Yorum 17/11/2007 01:33:29 22/12/2015 23:06:42

UL OL DL Tagları

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

38,273 Okunma 0 Yorum 04/07/2007 15:22:49 19/09/2014 15:23:13

Web Site Tasarımında DIV Kullanımı

Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları ekranları için) kolay olmasıdır.

37,610 Okunma 2 Yorum 02/01/2014 19:28:21 08/03/2015 16:25:03

FRAME Tagı

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeri?ini yerleştirmektir

31,477 Okunma 1 Yorum 05/07/2007 15:10:58 19/09/2014 15:14:22

XHTML Nedir?

XHTML kısaltmasının açılımı İngilizce'de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise "Geliştirilebilir Büyütülmüş Metin İşaretleme Dili"dir

30,428 Okunma 2 Yorum 10/07/2007 21:07:41 27/03/2019 00:51:00

BODY Tagı Nasıl Kullanılır?

Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir.

29,352 Okunma 1 Yorum 02/07/2007 14:43:07 12/05/2014 14:43:16

A Tagı Nasıl Kullanılır?

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır.

28,845 Okunma 0 Yorum 05/07/2007 14:56:13 12/05/2014 14:56:12

HEAD Tagı Nasıl Kullanılır?

Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketlerinin bulunduğu bölümdür.

26,633 Okunma 0 Yorum 26/11/2012 19:54:51 20/12/2015 15:45:41

Html Nedir? Ve Html Tag'leri

Gelişen browser teknolojileri sayesinde, html içine yazılar dışında resim, ses, video, java, javascript, vbscript gibi dillerle yazılmış programlar, ya da diğer nesneler de gömülebilir. Bu sayede bir html dökümanı düzenlenmiş, mizampajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin, browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa, html'le online bir gazete, bir slide-show, şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz.

25,307 Okunma 0 Yorum 02/07/2007 13:41:57 06/03/2015 17:21:43

DOCTYPE Tagı

Genel bir bilgi vermek gerekirse; web sayfalarınızın tarayıcı tarafından nasıl yorumlanacağını başka bir değişle nasıl görüntüleneceğini ve bu görüntüleme işlemi sırasında hangi standart ve tanımlamaları (DTD: Document Type Definitions / Doküman türü tanımlamaları) kullanacağını belirten ve (X)HTML dokümanlarının en üst kısmında yer alan ifadelerdir.

23,835 Okunma 0 Yorum 05/07/2007 11:06:46 17/10/2012 11:52:03

Table Tagı Nasıl Kullanılır?

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodlar aşağıdadır.

23,638 Okunma 1 Yorum 05/07/2007 14:46:47 10/03/2015 10:45:13

P, PRE, B, EM, STRONG, I, SUP, SUB, DEL, CODE Taglar?

23,091 Okunma 0 Yorum 04/07/2007 17:35:12

Genel HTML Tagları

Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r.HTML içinde kullan?lan tüm etiketler ??ile biter.Ayr?ca etiketin yorum aral??? da ?? kal?b? ile bitirilir.A?a??da etiket kullan?m?na k?sa bir örnek

20,594 Okunma 0 Yorum 04/07/2007 11:53:30 06/03/2015 17:21:28

IFRAME Tagı

Bir web sayfasının içersine daha çok başka bir sitenin içeriğini aktarmak için kullandığımız bir yol

20,529 Okunma 0 Yorum 05/07/2007 02:54:09

FORM Tagı

Form tagı parametreleri

20,141 Okunma 0 Yorum 06/07/2007 02:04:13 16/05/2015 20:06:41

DOCTYPE Tagı Nasıl Kullanılır?

HTML sayfasının nasıl bir HTML versiyonu ile yazıldığını web tarayıcısına bildirmek DOCTYPE tagının görevidir.

19,772 Okunma 0 Yorum 26/11/2012 14:54:25 12/05/2014 14:54:43

Meta Tag nedir?

Meta tag’lar HTML kodunuzun HEAD bölümüne yerleştirilmiş bilgi etiketleridir. Arama motorlarına site ve içeriği hakkında bilgi sunar. Her ne kadar günümüzdeki arama motorlarının çoğu meta tag’lardaki bilgileri dikkate almayıp site içeriğini kendi tekniklerine göre indeksleseler de hala bu tag’lardan bazılarına kısmi destek verebiliyorlar. Arama motorlarının özellikleri için buraya bakabilirsiniz. Sitenizin bu arama motorlarınca doğru bir şekilde gösterimi için bazı Meta tag’ları kullanmakta fayda var. Burada sıklıkla kullanılan meta tag’ları açıklamaya ve onları site kodu içerisine nasıl yerleştirebileceğinizi açıklamaya çalışacağım

19,379 Okunma 0 Yorum 05/09/2007 03:38:58

HTML nedir?

Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir.

19,299 Okunma 0 Yorum 10/10/2012 20:26:08 29/05/2014 21:38:56

HTML Editörleri

HTML kodu yazarken hata yapmamak ve kodları daha düzgün görmek için HTML editörleri kullanırız. Aynı zamanda bu editörler kodları yazarken kodun alabileceği değerler hakkındada ön bilgi verir.

19,102 Okunma 0 Yorum 08/10/2012 09:21:06 08/10/2012 09:35:05

xml xhtml html hakkında

Xml Html arasındaki fark

18,881 Okunma 0 Yorum 15/11/2007 02:02:18 15/05/2014 02:02:30

HR Tag

etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.

18,466 Okunma 0 Yorum 03/12/2012 11:13:48 03/12/2012 11:17:37

Arama Motorlarına Kayıt

18,141 Okunma 0 Yorum 04/07/2007 12:17:00 11/03/2014 23:01:59

DIV Tagı Nedir?

Web sitelerinin iskeletleri DIV tagı kullanarak oluşturulur. Ayrıca web sitesindeki nesnelerin yerleri DIV tagı ile belirlenir.

16,258 Okunma 0 Yorum 16/12/2013 19:55:52 08/03/2015 15:32:04

BR Tag

Bir alt satıra geçmek için kullanılır.

16,187 Okunma 0 Yorum 03/12/2012 09:35:47 03/12/2012 09:35:55

P Tag

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.

16,111 Okunma 0 Yorum 03/12/2012 10:34:56 05/12/2012 01:50:50

HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Taglar...

HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür.

15,575 Okunma 0 Yorum 07/12/2013 14:52:37 27/12/2015 21:52:13

U Tag

İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.

15,271 Okunma 0 Yorum 03/12/2012 09:37:57 03/12/2012 09:38:20

Yükleniyor...