HTML area etiketi nedir?
İçindekiler
HTML area etiketi, HTML belgelerinde kullanılan bir etikettir. Bu etiket, belgede çizimler, grafikler veya metinler gibi bazı bölgeleri tespit etmek ve bunlara etkileşimli özellikler kazandırmak için kullanılır. Bu sayede, kullanıcılar bu bölgelere tıklayabilir veya üzerlerine gelerek farklı işlemler yapabilir.
HTML area etiketi, a href etiketi ile birlikte kullanılır ve genellikle bir harita üzerinde bölgeleri belirlemek veya bir resim üzerinde tıklanabilir alanlar oluşturmak için kullanılır. Bu sayede, kullanıcılar belirli bir bölgeye tıkladığında farklı bir sayfaya yönlendirilebilir veya belirli bir eylem gerçekleştirilebilir.
HTML area etiketi kullanırken bazı özellikleri belirtmek gereklidir. Bunlar şunlardır:
- shape: HTML alanın şeklini belirtmek için kullanılır. Örneğin, dikdörtgen, daire veya çokgen şekilleri kullanılabilir.
- coords: Şeklin koordinatlarını belirtmek için kullanılır. Bu koordinatlar, hangi alanın tıklanabilir olduğunu belirler.
- href: Tıklanabilir alanın nereye yönlendirileceğini belirtmek için kullanılır. Bu genellikle başka bir web sayfasının URL’sini içerir.
| Özellik | Açıklama |
|---|---|
| shape | HTML alanın şekli |
| coords | Şeklin koordinatları |
| href | Tıklanabilir alanın yönlendirileceği URL |
HTML area etiketi nasıl kullanılır?
HTML’de “area” etiketi, bir harita içinde hareketli bir alanı temsil eder. Bu etiket, kullanıcının fareyi bu belirli alana getirdiğinde veya tıkladığında bir işlem gerçekleştirmesini sağlar. Bu, bir web sitesinde gezinmeyi kolaylaştırmak veya bir görüntünün belirli bölümlerine bağlantılar eklemek gibi çeşitli kullanım senaryoları için faydalı olabilir.
Bir “area” etiketi oluşturmak için, “map” etiketi içinde bulunan “area” etiketini kullanırız. “map” etiketi, birden çok “area” etiketini bir arada tutmak için kullanılır ve bu alanlar tek bir görüntüyle ilişkilendirilir.
“area” etiketinin en önemli özelliği, “shape” ve “coords” özniteliklerini kullanarak hareketli alanın şeklini ve konumunu belirlemektir. “shape” özniteliği, alanın şeklini tanımlar ve genellikle “rect” (dikdörtgen), “circle” (daire) veya “poly” (çokgen) değerlerini alır. “coords” özniteliği, alanın koordinatlarını belirtir ve şekle bağlı olarak değerlerin farklı bir düzeni vardır.
Örneğin, aşağıdaki kodda, bir resim haritası oluşturulur ve bu haritada iki farklı alan tanımlanır:
<img src=”harita.png” alt=”Harita”>
<map name=”harita”>
<area shape=”rect” coords=”0,0,100,100″ href=”sayfa1.html”>
<area shape=”circle” coords=”150,150,50″ href=”sayfa2.html”>
</map>
Bu örnekte, “harita.png” adlı bir görüntü kullanılıyor ve bu görüntüye bir dikdörtgen ve bir daire şeklinde alanlar ekleniyor. Dikdörtgen alan, (0,0) noktasından (100,100) noktasına kadar uzanan bir alanı temsil ederken, daire alan, merkezi (150,150) noktası olan 50 piksel yarıçapına sahip bir daireyi temsil eder. Her iki alan da farklı sayfalara bağlantılıdır, bu yüzden farklı URL’lere gideceklerdir.
Liste Örneği:
- shape: Alanın şeklini belirtir. “rect”, “circle” veya “poly” değerlerini alabilir.
- coords: Alanın koordinatlarını belirtir. Şekle bağlı olarak farklı düzenlere sahip değerler alabilir.
- href: Alan tıklandığında veya fare üzerine gelindiğinde yönlendirilecek URL’yi belirtir.
- alt: Alanın alternatif metnini temsil eder.
- target: Bağlantının hedef penceresini belirtir. “_blank” kullanıldığında yeni bir sekmede açılır.
Tablo Örneği:
| shape | coords | href |
|---|---|---|
| rect | 0,0,100,100 | sayfa1.html |
| circle | 150,150,50 | sayfa2.html |
HTML area etiketi için gerekli özellikler
HTML’de area etiketi, bir resme ya da bir haritaya bazı özellikler eklemek için kullanılır. Bu özellikler, kullanıcının resmin belirli bir bölgesine tıkladığında yapılacak olan işlemleri tanımlar. İşte HTML area etiketi için gerekli olan özellikler:
- shape: Bu özellik, kullanılacak olan alanın şeklini belirler. Alanın şekli, dikdörtgen, daire veya çokgen olabilir. Şekil olarak “rect”, “circle” veya “poly” değerlerini kullanabiliriz.
- coords: Bu özellik, alanın konumunu belirleyen koordinatları içerir. Koordinatlar, x ve y değerlerini kullanarak belirtilir. Örneğin, dikdörtgen bir alan için “x1,y1,x2,y2” formatını kullanabiliriz.
- href: Bu özellik, alanın tıklanabilir olduğunda yönlendireceği URL’yi belirler. Kullanıcı tıkladığında, belirtilen URL’ye yönlendirilir.
| Özellik | Açıklama | Örnek |
|---|---|---|
| shape | Alanın şeklini belirler | shape=”circle” |
| coords | Alanın koordinatlarını belirler | coords=”50,50,30″ |
| href | Alanın tıklanabilir olduğunda yönlendireceği URL’yi belirler | href=”https://ornek.com” |
HTML area etiketi ile bağlantı oluşturma
HTML area etiketi ile bağlantı oluşturma, web sayfalarının etkileşimli bir şekilde çalışmasını sağlamak için kullanılan önemli bir HTML öğesidir. Bu etiket, kullanıcıların web sayfasında belirli bir alana tıkladıklarında farklı sayfalara veya farklı bölümlere yönlendirilmesini sağlar. Bu özellik, kullanıcı deneyimini artırmak ve kullanıcıların istedikleri bilgilere kolayca erişmelerini sağlamak için sıklıkla kullanılır.
HTML area etiketi nasıl kullanılır? Bu etiketi kullanmak için öncelikle ‘map’ etiketi içinde oluşturulmalıdır. ‘map’ etiketi, bir resim veya grafik üzerinde hangi alanın tıklanabilir olduğunu belirtmek için kullanılır. Daha sonra ‘area’ etiketi kullanılarak tıklanabilir alanın koordinatları ve bağlantının hedefi belirtilir. ‘area’ etiketi, ‘map’ etiketi içinde kullanılarak birden fazla tıklanabilir alan oluşturabilirsiniz. Bu sayede kullanıcılar, farklı alanlara tıklayarak farklı bağlantılara yönlendirilebilir.
HTML area etiketi için gerekli özellikler, ‘area’ etiketinde yer alan ‘shape’ ve ‘coords’ özellikleridir. ‘shape’ özelliği, tıklanabilir alanın şeklini belirler ve genellikle dikdörtgen veya daire şekilleri kullanılır. ‘coords’ özelliği ise tıklanabilir alanın koordinatlarını belirler. Örneğin, bir dikdörtgen şekli için ‘coords’ özelliği “x1, y1, x2, y2” olarak tanımlanırken, bir daire şekli için “x, y, radius” olarak tanımlanır. Bu özelliklerle birlikte ‘href’ ve ‘alt’ özellikleri de kullanılarak tıklanabilir alanın bağlantısı ve alternatif metni belirtilebilir.
- HTML area etiketi ile bağlantı oluşturma
- HTML area etiketi nasıl kullanılır?
- HTML area etiketi için gerekli özellikler
| Etiket | Açıklama |
|---|---|
| <area> | Tıklanabilir bir alana bağlantı oluşturur. |
| <map> | Tıklanabilir alanları birleştirir ve resim veya grafik üzerinde belirler. |
| <img> | Web sayfasında resim veya grafik koyar. |
HTML area etiketi ile şekil çizme
HTML area etiketi ile şekil çizme, web sayfaları üzerinde farklı şekiller oluşturmak için kullanılan bir özelliktir. Bu etiket, bir resim veya harita üzerinde belirli alanları tespit etmek ve bu alanlara ilişkin eylemler gerçekleştirmek amacıyla kullanılır. Bu makalede, HTML area etiketi ile şekil çizme konusunda daha fazla bilgi edineceksiniz.
HTML area etiketi kullanarak şekil çizmek için aşağıdaki adımları izleyebilirsiniz:
- Resim veya harita seçimi: İlk adım, şekil çizmek istediğiniz bir resim veya harita seçmektir. Bu resmi veya haritayı HTML sayfasına ekledikten sonra, şekilleri belirleyeceğimiz alanları işaretlemek için HTML area etiketini kullanabiliriz.
- Area etiketi kullanımı: Şekilleri belirlemek için HTML area etiketini kullanmalısınız. Area etiketleri, bir shape (şekil), coords (koordinatlar) ve href (bağlantı) özellikleriyle oluşturulur. Ayrıca, alternate (alternatif metin), target (açılış hedefi) ve title (başlık) gibi başka özellikler de ekleyebilirsiniz.
- Shape ve coords özellikleri: Shape özelliği, çizmek istediğiniz şekli belirtir. Örneğin, “rect” şekli dikdörtgen, “circle” şekli daire ve “poly” şekli ise çokgen olarak belirtilir. Coords özelliği ise şeklin koordinatlarını belirtir. Koordinatlar, şeklin konumunu ve boyutunu tanımlamak için kullanılır.
Bu şekilde HTML area etiketi kullanarak farklı şekiller oluşturabilirsiniz. Örneğin, bir harita üzerindeki farklı illeri veya bir resim üzerindeki farklı nesneleri belirlemek için bu etiketi kullanabilirsiniz. Ardından, bu şekillere tıklanarak başka bir sayfaya yönlendirme veya bir popup ile bilgi görüntüleme gibi interaktif işlemler gerçekleştirebilirsiniz.
HTML area etiketi ile yapılabilirlikler
HTML area etiketi, web sayfalarında kullanıcıların etkileşimde bulunabileceği ve çeşitli işlevler gerçekleştirebileceği birçok farklı özellik sunar. Bu özellikler sayesinde kullanıcılar, birçok farklı etkinlik ve deneyim yaşayabilirler. Bu yazıda, HTML area etiketi ile yapılabilirlikleri keşfedeceğiz ve nasıl kullanılacakları hakkında bilgi edineceğiz.
1. İnteraktif Haritalar Oluşturma: HTML area etiketi, web sayfalarına interaktif haritalar eklemek için ideal bir seçenektir. Bu etiket kullanılarak, belirli bölgeleri tıklanabilir hale getirebilir ve bu bölgelere ilişkin ayrıntıları kullanıcılara sunabilirsiniz. Böylece kullanıcılar, harita üzerinde tıklama işlemi yaparak belirli bir bölgenin detaylarını görüntüleyebilir veya yön bulma gibi işlemler gerçekleştirebilir.
2. Görsel Tablolar: HTML area etiketi, web sayfalarında görsel tablolar oluşturmanıza olanak sağlar. Bu sayede, kullanıcılar görsel bir şekilde verileri inceleyebilir ve istedikleri bölgeleri seçerek ayrıntılı bilgilere ulaşabilirler. Görsel tablolar, karmaşık veri setlerini anlaşılır hale getirmek için kullanışlı bir araçtır ve kullanıcı deneyimini iyileştirir.
3. Resim Alanları: HTML area etiketi, bir resmin belirli bölgelerini tıklanabilir hale getirerek etkileşimli bir deneyim sunmanıza olanak sağlar. Örneğin, bir fotoğraf galerisi oluştururken, her fotoğrafın üzerine tıklanabilir bir alan ekleyebilir ve bu alanın tıklanmasıyla ilgili bir eylem gerçekleştirebilirsiniz. Böylece kullanıcılar, fotoğrafları tek tek görüntülemek veya ileri-geri geçmek gibi işlemler yapabilirler.
HTML area etiketi ile yapılabilirlikler yukarıda sıralananlarla sınırlı değildir. Bu etiket, web sayfalarının daha etkileşimli, kullanıcı dostu ve çekici olmasını sağlar. Yaratıcılığınızı kullanarak, farklı işlevler ve deneyimler sunabilirsiniz. HTML area etiketi, web geliştirme sürecinde size daha fazla esneklik ve kontrol sağlayan önemli bir araçtır. Bu nedenle, bu etiketi ve yapılabilirliklerini iyi anlamak ve kullanmak önemlidir.
HTML area etiketi ile interaktif grafikler
HTML area etiketi ile interaktif grafikler oluşturmanın pek çok farklı yöntemi bulunmaktadır. Bu etiket, web sayfalarında kullanıcıların etkileşimde bulunabileceği ve verileri görsel bir şekilde sunabileceğimiz harika bir özelliktir. HTML area etiketi, kullanıcının tıkladığı bölgeye ilişkin bir eylem gerçekleştirilmesini sağlar.
HTML area etiketi kullanarak interaktif grafikler oluşturmak için öncelikle bir giriş noktası belirlememiz gerekmektedir. Bu noktalara genellikle şekil veya metin kutuları yerleştirilir ve kullanıcıya tıklama yapmasını sağlar. HTML area etiketi, birkaç farklı niteliği destekler: shape, coords ve href.
shape niteliği, genellikle dikdörtgen, daire veya poligon şekilleri için kullanılır. coords niteliği, şeklinin koordinatlarını tanımlar ve genellikle şeklinin yükseklik ve genişlik değerlerine dayanır. href niteliği ise kullanıcının tıklandığında yönlendirileceği bağlantı adresini belirler.
- Birinci nokta
- İkinci nokta
- Üçüncü nokta
| Şekil | Koordinatlar | Bağlantı |
|---|---|---|
| Dağ | 50,120,150,200 | https://www.orneklink.com/dag |
| Göl | 160,120,250,200 | https://www.orneklink.com/gol |
| Ağaç | 270,120,350,200 | https://www.orneklink.com/agac |
Sık Sorulan Sorular
HTML area etiketi nedir?
HTML area etiketi, bir resim veya harita üzerinde belirli bir bölgeyi tanımlamak için kullanılan bir etikettir. Bu bölgeye tıklanıldığında belirli bir işlem gerçekleştirilir.
HTML area etiketi nasıl kullanılır?
HTML area etiketi kullanmak için şu şekilde kullanabilirsiniz:
<map name="harita"> <area shape="rect" coords="x1,y1,x2,y2" href="link.html" alt="Bilgi" /> </map> <img src="resim.png" usemap="#harita" />
HTML area etiketi için gerekli özellikler nelerdir?
HTML area etiketi için gerekli olan özellikler şunlardır:
- shape: Bölgenin şeklini belirler. Rect (dikdörtgen), circle (daire), poly (çokgen) şekilleri kullanılabilir.
- coords: Bölgenin koordinatlarını belirler. Rect için x1,y1,x2,y2, circle için x,y,radius, poly için x1,y1,x2,y2,… şeklinde kullanılır.
- href: Bölgeye tıklanıldığında yönlendirilecek linkin adresini belirler.
- alt: Bölgenin alternatif metnini belirler.
HTML area etiketi ile bağlantı nasıl oluşturulur?
Bir bölgeye tıklanıldığında yönlendirilecek bir bağlantı oluşturmak için şu şekilde kullanabilirsiniz:
<map name="harita"> <area shape="rect" coords="x1,y1,x2,y2" href="link.html" /> </map> <img src="resim.png" usemap="#harita" />
HTML area etiketi ile şekil nasıl çizilir?
Bir bölgeyi belirli bir şekilde çizmek için şu şekilde kullanabilirsiniz:
<map name="harita"> <area shape="rect" coords="x1,y1,x2,y2" href="link.html" /> <area shape="circle" coords="x,y,radius" href="link.html" /> <area shape="poly" coords="x1,y1,x2,y2,..." href="link.html" /> </map> <img src="resim.png" usemap="#harita" />
HTML area etiketi ile yapılabilirlikler nelerdir?
HTML area etiketi ile şunları yapabilirsiniz:
- Resim veya harita üzerinde belirli bir bölgeyi tanımlayabilirsiniz.
- Bölgeye tıklandığında farklı sayfalara yönlendirme yapabilirsiniz.
- Alternatif metinler belirleyerek bölgenin anlaşılabilirliğini artırabilirsiniz.
HTML area etiketi ile interaktif grafikler oluşturulabilir mi?
Evet, HTML area etiketi kullanarak resim veya harita üzerinde interaktif grafikler oluşturabilirsiniz. Bölgeye tıklandığında belirli bir işlem gerçekleştirebilir veya farklı sayfalara yönlendirebilirsiniz.