HTML - Hızlı Kılavuz

HTML'nin açılımı Hypertext MArkup Language ve Web Sayfaları yazmak için en yaygın kullanılan dildir.

HypertextWeb sayfalarının (HTML belgeleri) birbirine bağlanma biçimini ifade eder. Bu nedenle, bir web sayfasında bulunan bağlantıya Hypertext adı verilir.
Adından da anlaşılacağı gibi HTML bir Markup Language Bu, HTML'yi, bir Web tarayıcısına onu görüntülenecek şekilde nasıl yapılandıracağını söyleyen etiketlerle basitçe "işaretlemek" için kullandığınız anlamına gelir.

Başlangıçta HTML, araştırmacılar arasında bilimsel bilgilerin paylaşımını kolaylaştırmak için başlıklar, paragraflar, listeler vb. Gibi belgelerin yapısını tanımlamak amacıyla geliştirilmiştir.

Artık HTML, HTML dilinde bulunan farklı etiketlerin yardımıyla web sayfalarını biçimlendirmek için yaygın olarak kullanılmaktadır.

Temel HTML Belgesi

En basit haliyle, aşağıdaki bir HTML belgesi örneğidir -

<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
	
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>
	
</html>

HTML Etiketleri

Daha önce de belirtildiği gibi, HTML bir biçimlendirme dilidir ve içeriği biçimlendirmek için çeşitli etiketlerden yararlanır. Bu etiketler açılı parantez içine alınır<Tag Name>. Birkaç etiket dışında, etiketlerin çoğunun karşılık gelen kapanış etiketleri vardır. Örneğin,<html> kapanış etiketine sahip </html> ve <body> etiketinin kapanış etiketi var </body> etiket vb.

Yukarıdaki HTML belgesi örneği aşağıdaki etiketleri kullanır -

Sr.No	Etiket ve Açıklama
1	<!DOCTYPE...> Bu etiket, belge türünü ve HTML sürümünü tanımlar.
2	<html> Bu etiket, HTML belgesinin tamamını kapsar ve esas olarak <head> ... </head> ile temsil edilen belge başlığından ve <body> ... </body> etiketleriyle temsil edilen belge gövdesinden oluşur.
3	<head> Bu etiket, <title>, <link> vb. Gibi diğer HTML etiketlerini tutabilen belgenin başlığını temsil eder.
4	<title> <title> etiketi, belge başlığından bahsetmek için <head> etiketinin içinde kullanılır.
5	<body> Bu etiket, <h1>, <div>, <p> vb. Gibi diğer HTML etiketlerini tutan belgenin gövdesini temsil eder.
6	<h1> Bu etiket başlığı temsil eder.
7	<p> Bu etiket bir paragrafı temsil eder.

HTML öğrenmek için, metinsel bir belgeyi biçimlendirirken çeşitli etiketleri incelemeniz ve nasıl davrandıklarını anlamanız gerekir. HTML öğrenmek, kullanıcıların güzel bir web sayfası oluşturmak için metni veya görüntüleri biçimlendirmek için farklı etiketlerin kullanımını öğrenmesi gerektiğinden basittir.

World Wide Web Consortium (W3C), HTML 4'ten başlayarak küçük harfli etiketlerin kullanılmasını önerir.

HTML Belge Yapısı

Tipik bir HTML belgesi aşağıdaki yapıya sahip olacaktır -

<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>

Sonraki bölümlerde tüm başlık ve gövde etiketlerini inceleyeceğiz, ancak şimdilik belge bildirim etiketinin ne olduğunu görelim.

<! DOCTYPE> Bildirimi

<! DOCTYPE> bildirim etiketi, web tarayıcısı tarafından belgede kullanılan HTML sürümünü anlamak için kullanılır. HTML'nin mevcut sürümü 5'tir ve aşağıdaki beyanı kullanır -

<!DOCTYPE html>

Hangi HTML sürümünün kullanıldığına bağlı olarak HTML belgesinde kullanılabilecek birçok başka bildirim türü vardır. <! DOCTYPE ...> etiketini diğer HTML etiketleriyle birlikte tartışırken bununla ilgili daha fazla ayrıntı göreceğiz.

Başlık Etiketleri

Herhangi bir belge bir başlık ile başlar. Başlıklarınız için farklı boyutlar kullanabilirsiniz. HTML'de ayrıca öğeleri kullanan altı düzey başlık vardır.<h1>, <h2>, <h3>, <h4>, <h5>, ve <h6>. Herhangi bir başlığı görüntülerken, tarayıcı bu başlıktan önce bir satır ve sonra bir satır ekler.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Paragraf Etiketi

<p>etiketi, metninizi farklı paragraflar halinde yapılandırmanın bir yolunu sunar. Her bir metin paragrafı, aşağıdaki örnekte gösterildiği gibi bir açılış <p> ve bir kapanış </p> etiketi arasına girmelidir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Satır Sonu Etiketi

Ne zaman kullanırsanız <br />öğesi, onu izleyen her şey bir sonraki satırdan başlar. Bu etiket bir örnektirempty Aralarında girecek hiçbir şey olmadığından, açma ve kapama etiketlerine ihtiyacınız olmayan öğe.

<br /> etiketinde karakterler arasında boşluk vardır brve eğik çizgi. Bu boşluğu atlarsanız, eski tarayıcılar satır sonunu oluşturmada sorun yaşarlar, ancak eğik çizgi karakterini kaçırırsanız ve sadece <br> kullanırsanız, XHTML'de geçerli değildir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Merkezleme İçeriği

Kullanabilirsiniz <center> herhangi bir içeriği sayfanın ortasına veya herhangi bir tablo hücresine yerleştirmek için etiketi.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Yatay çizgiler

Yatay çizgiler, bir belgenin bölümlerini görsel olarak bölmek için kullanılır. <hr> etiketi, belgedeki geçerli konumdan sağ kenar boşluğuna doğru bir çizgi oluşturur ve buna göre satırı keser.

Örneğin, aşağıdaki örnekte olduğu gibi iki paragraf arasına bir satır vermek isteyebilirsiniz -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Tekrar <hr /> etiketi bir örnektir empty Aralarında girecek hiçbir şey olmadığından, açma ve kapama etiketlerine ihtiyacınız olmayan öğe.

<hr /> öğesinde karakterler arasında boşluk var hrve eğik çizgi. Bu boşluğu atlarsanız, eski tarayıcılar yatay çizgiyi oluşturmada sorun yaşarken, eğik çizgi karakterini kaçırır ve yalnızca kullanırsanız<hr> XHTML'de geçerli değil

Biçimlendirmeyi Koru

Bazen metninizin HTML belgesine nasıl yazıldığının tam biçimini izlemesini istersiniz. Bu durumlarda, önceden biçimlendirilmiş etiketi kullanabilirsiniz<pre>.

Açılış arasındaki herhangi bir metin <pre> etiket ve kapanış </pre> etiketi, kaynak belgenin biçimlendirmesini koruyacaktır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Aynı kodu içeride tutmadan kullanmayı deneyin <pre>...</pre> etiketleri

Bölünemez Alanlar

"12 Kızgın Adam" ifadesini kullanmak istediğinizi varsayalım. Burada, bir tarayıcının "12, Kızgın" ve "Erkekler" i iki satıra bölmesini istemezsiniz -

An example of this technique appears in the movie "12 Angry Men."

İstemci tarayıcısının metni kırmasını istemediğiniz durumlarda, bölünemez bir boşluk varlığı kullanmalısınız.  normal bir alan yerine. Örneğin, bir paragrafta "12 Kızgın Adam" ı kodlarken, aşağıdaki koda benzer bir şey kullanmalısınız -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Bir HTML elementbir başlangıç etiketi ile tanımlanır. Öğe başka içerik içeriyorsa, bir kapanış etiketiyle biter, burada öğe adından önce birkaç etiketle gösterildiği gibi bir eğik çizgi gelir -

Başlangıç Etiketi	İçerik	Bitiş Etiketi
<p>	Bu paragraf içeriğidir.	</p>
<h1>	Bu başlık içeriğidir.	</h1>
<div>	Bu bölüm içeriğidir.	</div>
<br />

Yani burada <p>....</p> bir HTML öğesidir, <h1>...</h1>başka bir HTML öğesidir. Kapatılması gerekmeyen bazı HTML öğeleri vardır, örneğin<img.../>, <hr /> ve <br />elementler. Bunlar olarak bilinirvoid elements.

HTML belgeleri bu öğelerin bir ağacından oluşur ve HTML belgelerinin nasıl oluşturulması gerektiğini ve bir HTML belgesinin hangi bölümüne ne tür içerik yerleştirilmesi gerektiğini belirtirler.

HTML Etiketi ve Öğe

Bir HTML öğesi, bir başlangıç etiketiyle tanımlanır . Öğe başka içerik içeriyorsa, bir kapanış etiketiyle biter .

Örneğin, <p> bir paragrafın başlangıç etiketi ve </p> aynı paragrafın kapanış etiketi ancak <p>This is paragraph</p> bir paragraf öğesidir.

İç içe geçmiş HTML Öğeleri

Bir HTML öğesinin başka bir HTML öğesinin içinde tutulmasına fazlasıyla izin verilir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu gösterecektir -

Birkaç HTML etiketi ve başlık etiketleri gibi kullanımlarını gördük <h1>, <h2>, paragraf etiketi <p>ve diğer etiketler. Şimdiye kadar onları en basit haliyle kullandık, ancak HTML etiketlerinin çoğunun ekstra bilgi parçaları olan öznitelikleri de olabilir.

Bir öznitelik, bir HTML öğesinin özelliklerini tanımlamak için kullanılır ve öğenin açılış etiketinin içine yerleştirilir. Tüm nitelikler iki bölümden oluşur - aname ve bir value

nameayarlamak istediğiniz özelliktir. Örneğin, paragraf<p> örnekteki eleman, adı olan bir öznitelik taşır align, sayfadaki paragraf hizalamasını belirtmek için kullanabileceğiniz.
valueözellik değerinin ayarlanmasını ve her zaman tırnak içine alınmasını istediğiniz şeydir. Aşağıdaki örnek, align özniteliğinin üç olası değerini gösterir: left, center ve right.

Öznitelik adları ve öznitelik değerleri büyük / küçük harf duyarlıdır. Bununla birlikte, World Wide Web Konsorsiyumu (W3C), HTML 4 önerilerinde küçük harfli öznitelikler / öznitelik değerleri önermektedir.

Misal

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Bu, aşağıdaki sonucu gösterecektir -

Temel Özellikler

HTML öğelerinin çoğunda kullanılabilen dört temel özellik (hepsi olmasa da) şunlardır:

Id
Title
Class
Style

Kimlik Özniteliği

idHTML etiketinin özniteliği, bir HTML sayfasındaki herhangi bir öğeyi benzersiz şekilde tanımlamak için kullanılabilir. Bir öğede id özniteliğini kullanmak isteyebileceğiniz iki ana neden vardır:

Bir öğe, benzersiz bir tanımlayıcı olarak bir id niteliği taşıyorsa, yalnızca o öğeyi ve içeriğini tanımlamak mümkündür.
Bir Web sayfasında (veya stil sayfasında) aynı adı taşıyan iki öğeniz varsa, aynı ada sahip öğeleri ayırt etmek için id niteliğini kullanabilirsiniz.

Stil sayfasını ayrı bir öğreticide tartışacağız. Şimdilik, aşağıda gösterildiği gibi iki paragraf öğesini birbirinden ayırmak için id niteliğini kullanalım.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Başlık Özniteliği

titleözellik, öğe için önerilen bir başlık verir. Onlar için sözdizimititle öznitelik açıklandığı gibi benzer id özellik -

Bu özelliğin davranışı, onu taşıyan öğeye bağlı olacaktır, ancak imleç öğenin üzerine geldiğinde veya öğe yüklenirken genellikle bir araç ipucu olarak görüntülenir.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Şimdi imlecinizi "Başlıklı Başlık Etiketi Örneği" nin üzerine getirmeyi deneyin ve kodunuzda kullandığınız başlığın imlecin bir ipucu olarak çıktığını göreceksiniz.

Sınıf Özniteliği

classözellik, bir öğeyi bir stil sayfasıyla ilişkilendirmek için kullanılır ve öğenin sınıfını belirtir. Basamaklı Stil Sayfasını (CSS) öğreneceğiniz zaman, sınıf özniteliğinin kullanımı hakkında daha fazla bilgi edineceksiniz. Yani şimdilik bundan kaçınabilirsiniz.

Özelliğin değeri, boşlukla ayrılmış sınıf adlarının bir listesi de olabilir. Örneğin -

class = "className1 className2 className3"

Stil Özniteliği

Style özelliği, öğe içinde Basamaklı Stil Sayfası (CSS) kuralları belirlemenize olanak tanır.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Şu anda CSS öğrenmiyoruz, bu yüzden CSS hakkında fazla uğraşmadan devam edelim. Burada, HTML niteliklerinin ne olduğunu ve içeriği biçimlendirirken nasıl kullanılabileceklerini anlamanız gerekir.

Uluslararasılaştırma Nitelikleri

Çoğu XHTML öğesi için (hepsi olmasa da) kullanılabilen üç uluslararasılaştırma özelliği vardır.

dir
lang
xml:lang

Dir Özniteliği

dirözellik, tarayıcıya metnin akması gereken yönü belirtmenize olanak tanır. Dir özelliği, aşağıdaki tabloda görebileceğiniz gibi iki değerden birini alabilir -

Değer	Anlam
ltr	Soldan sağa (varsayılan değer)
rtl	Sağdan sola (İbranice veya Arapça gibi sağdan sola okunan diller için)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Ne zaman dir nitelik <html> etiketi içinde kullanılır, bu metin bütün belge içinde sunulacak belirler. Başka bir etiket içinde kullanıldığında, metnin yalnızca o etiketin içeriği için yönünü kontrol eder.

Lang Özniteliği

langözniteliği, bir belgede kullanılan ana dili belirtmenize izin verir, ancak bu öznitelik yalnızca önceki HTML sürümleriyle geriye dönük uyumluluk için HTML'de tutulmuştur. Bu öznitelik,xml:lang yeni XHTML belgelerinde öznitelik.

Lang özniteliğinin değerleri , ISO-639 standart iki karakterli dil kodlarıdır. KontrolHTML Language Codes: ISO 639 dil kodlarının tam listesi için.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Xml: lang Özniteliği

Xml: lang niteliği için XHTML yerine geçer lang özniteliği. Xml: lang özniteliğinin değeri, önceki bölümde belirtildiği gibi bir ISO-639 ülke kodu olmalıdır.

Genel Özellikler

Burada, birçok HTML etiketiyle kolayca kullanılabilen diğer bazı özniteliklerin bir tablosu verilmiştir.

Öznitelik	Seçenekler	Fonksiyon
hizalamak	sağ, sol, merkez	Etiketleri yatay olarak hizalar
valign	üst, orta, alt	Bir HTML öğesi içindeki etiketleri dikey olarak hizalar.
bgcolor	sayısal, onaltılık, RGB değerleri	Bir elemanın arkasına bir arka plan rengi yerleştirir
arka fon	URL	Bir elemanın arkasına bir arka plan görüntüsü yerleştirir
İD	Kullanıcı tanımlı	Basamaklı Stil Sayfaları ile kullanılacak bir öğeyi adlandırır.
sınıf	Kullanıcı tanımlı	Basamaklı Stil Sayfaları ile kullanım için bir öğeyi sınıflandırır.
Genişlik	Sayısal değer	Tabloların, görüntülerin veya tablo hücrelerinin genişliğini belirtir.
yükseklik	Sayısal değer	Tabloların, görüntülerin veya tablo hücrelerinin yüksekliğini belirtir.
Başlık	Kullanıcı tanımlı	Öğelerin "Pop-up" başlığı.

Diğer HTML etiketlerini incelemeye devam edeceğimiz için ilgili örnekleri göreceğiz. HTML Etiketlerinin ve ilgili özniteliklerin tam listesi için lütfen HTML Etiketleri Listesi'ne bakın .

Bir kelime işlemci kullanıyorsanız, metni kalın, italik veya altı çizili yapma becerisine aşina olmanız gerekir; bunlar, metnin HTML ve XHTML'de nasıl görünebileceğini gösteren on seçenekten yalnızca üçüdür.

Kalın yazı

İçinde görünen her şey <b>...</b> öğesi, aşağıda gösterildiği gibi kalın olarak görüntülenir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

İtalik Metin

İçinde görünen her şey <i>...</i> eleman aşağıda gösterildiği gibi italik olarak görüntülenir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Altı Çizili Metin

İçinde görünen her şey <u>...</u> öğesi, aşağıda gösterildiği gibi altı çizili olarak görüntülenir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Strike Text

İçinde görünen her şey <strike>...</strike> öğe, aşağıda gösterildiği gibi metin boyunca ince bir çizgi olan üstü çizili olarak görüntülenir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Eş Aralıklı Yazı Tipi

Bir içeriği <tt>...</tt>eleman tek aralıklı yazı tipinde yazılmıştır. Yazı tiplerinin çoğu değişken genişlikli yazı tipleri olarak bilinir çünkü farklı harfler farklı genişliktedir (örneğin, 'm' harfi 'i' harfinden daha geniştir). Ancak tek aralıklı bir yazı tipinde her harf aynı genişliğe sahiptir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Üst Simge Metni

Bir içeriği <sup>...</sup>eleman üst simge olarak yazılır; kullanılan yazı tipi boyutu, onu çevreleyen karakterlerle aynı boyuttadır, ancak diğer karakterlerin yarım karakter yüksekliğinde görüntülenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Alt Simge Metni

Bir içeriği <sub>...</sub>eleman alt simge ile yazılır; kullanılan yazı tipi boyutu, onu çevreleyen karakterlerle aynıdır, ancak diğer karakterlerin altında yarım karakter yüksekliğinde görüntülenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Eklenen Metin

İçinde görünen her şey <ins>...</ins> öğe eklenen metin olarak görüntülenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Silinen Metin

İçinde görünen her şey <del>...</del> öğesi, silinmiş metin olarak görüntülenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Daha Büyük Metin

İçeriği <big>...</big> öğesi, aşağıda gösterildiği gibi, onu çevreleyen metnin geri kalanından bir yazı tipi büyüklüğünde görüntülenir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Daha Küçük Metin

İçeriği <small>...</small> öğesi, aşağıda gösterildiği gibi, onu çevreleyen metnin geri kalanından bir yazı tipi daha küçük görüntülenir -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

İçeriği Gruplama

<div> ve <span> öğeler, bir sayfanın bölümlerini veya alt bölümlerini oluşturmak için birkaç öğeyi bir araya toplamanıza olanak tanır.

Örneğin, <div> öğesinin içindeki tüm öğelerin dipnotlarla ilgili olduğunu belirtmek için bir sayfaya tüm dipnotları bir <div> öğesi içinde yerleştirmek isteyebilirsiniz. Daha sonra bu <div> öğesine, özel bir stil kuralları kümesi kullanarak görünmeleri için bir stil ekleyebilirsiniz.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öte yandan <span> öğesi yalnızca satır içi öğeleri gruplamak için kullanılabilir. Dolayısıyla, birlikte gruplamak istediğiniz bir cümlenin veya paragrafın bir kısmına sahipseniz, <span> öğesini aşağıdaki gibi kullanabilirsiniz.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Bu etiketler, bir sayfanın bir bölümüne stil eklemenize izin vermek için genellikle CSS ile kullanılır.

Kelime öbeği etiketleri, belirli amaçlar için tanımlanmıştır, ancak diğer temel etiketler gibi benzer bir şekilde görüntülenirler. <b>, <i>, <pre>, ve <tt>, önceki bölümde görmüştünüz. Bu bölüm sizi tüm önemli cümle etiketlerine götürecek, bu yüzden onları tek tek görmeye başlayalım.

Vurgulanan metin

İçinde görünen her şey <em>...</em> öğesi vurgulanmış metin olarak görüntülenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

İşaretli Metin

İçinde görünen her şey <mark>...</mark> öğesi sarı mürekkeple işaretlenmiş olarak görüntülenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Güçlü Metin

İçinde görünen her şey <strong>...</strong> öğesi önemli bir metin olarak görüntülenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Metin Kısaltma

Bir metni <abbr> açılış ve </abbr> etiketlerini kapatarak kısaltabilirsiniz. Varsa, başlık özelliği bu tam açıklamayı içermeli, başka hiçbir şey içermemelidir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Kısaltma Öğesi

<acronym> öğesi, <acronym> ve </acronym> etiketleri arasındaki metnin bir kısaltma olduğunu belirtmenize olanak tanır.

Şu anda, büyük tarayıcılar <acronym> öğesinin içeriğinin görünümünü değiştirmemektedir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Metin yönü

<bdo>...</bdo> öğesi İki Yönlü Geçersiz Kılma anlamına gelir ve mevcut metin yönünü geçersiz kılmak için kullanılır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Özel terimler

<dfn>...</dfn>öğesi (veya HTML Tanım Öğesi), özel bir terim tanıttığınızı belirtmenize olanak tanır. Kullanımı bir paragrafın ortasındaki italik kelimelere benzer.

Tipik olarak, bir anahtar terimi ilk kez tanıttığınızda <dfn> öğesini kullanırsınız. En yeni tarayıcılar, bir <dfn> öğesinin içeriğini italik yazı tipinde işler.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Alıntı Yapma

Başka bir kaynaktan bir alıntı yapmak istediğinizde, onu arasına koymalısınız. <blockquote>...</blockquote> etiketleri.

Bir <blockquote> öğesinin içindeki metin genellikle çevreleyen metnin sol ve sağ kenarlarından girintilenir ve bazen italik yazı tipi kullanır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Kısa Alıntılar

<q>...</q> öğesi, bir cümle içinde çift alıntı eklemek istediğinizde kullanılır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Metin Alıntıları

Bir metni alıntılıyorsanız, kaynağı bir açılış arasına yerleştirerek belirtebilirsiniz. <cite> etiket ve kapanış </cite> etiket

Bir basılı yayında beklediğiniz gibi, <cite> öğesinin içeriği varsayılan olarak italik metinle oluşturulur.

Misal

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Bilgisayar kodu

Bir Web sayfasında görünecek herhangi bir programlama kodu içine yerleştirilmelidir <code>...</code>etiketleri. Genellikle <code> öğesinin içeriği, çoğu programlama kitabındaki kod gibi tek aralıklı bir yazı tipinde sunulur.

Misal

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Klavye Metni

Bilgisayarlardan bahsederken, okuyucuya bir metin girmesini söylemek istiyorsanız, <kbd>...</kbd> Bu örnekte olduğu gibi, neyin yazılması gerektiğini gösteren öğe.

Misal

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Programlama Değişkenleri

Bu öğe, genellikle <pre> ve <code> bu öğenin içeriğinin bir değişken olduğunu gösteren öğeler.

Misal

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Program Çıkışı

<samp>...</samp> öğesi bir programdan örnek çıktıyı ve komut dosyasını vb. gösterir. Yine, esas olarak programlama veya kodlama kavramlarını belgelerken kullanılır.

Misal

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Adres Metni

<address>...</address> öğesi herhangi bir adresi içermek için kullanılır.

Misal

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

HTML, bir belge hakkında çeşitli şekillerde ek önemli bilgiler olan meta verileri belirlemenizi sağlar. META öğeleri, HTML belgesinin yazar, son kullanma tarihi, anahtar sözcük listesi, belge yazarı vb. Gibi özelliklerini tanımlayan ad / değer çiftlerini dahil etmek için kullanılabilir.

<meta>etiketi, bu tür ek bilgileri sağlamak için kullanılır. Bu etiket boş bir öğedir ve bu nedenle bir kapanış etiketine sahip değildir, ancak öznitelikleri dahilinde bilgi taşır.

Belgenizde saklamak istediğiniz bilgileri temel alarak belgenize bir veya daha fazla meta etiket ekleyebilirsiniz, ancak genel olarak meta etiketler belgenin fiziksel görünümünü etkilemez, bu nedenle görünüm açısından, eklemeniz önemli değildir onlar ya da değil.

Belgelerinize Meta Etiket Ekleme

Web sayfalarınıza meta veriler eklemek için <meta> etiketlerini belgenin temsil ettiği başlık içine yerleştirebilirsiniz. <head> ve </head>etiketleri. Bir meta etiket, temel niteliklere ek olarak aşağıdaki niteliklere sahip olabilir -

Sr.No	Öznitelik ve Açıklama
1	Name Mülkün adı. Herşey olabilir. Örnekler arasında anahtar kelimeler, açıklama, yazar, revize edilmiş, oluşturucu vb. Yer alır.
2	content Özelliğin değerini belirtir.
3	scheme Özelliğin değerini yorumlamak için bir şema belirtir (içerik özniteliğinde belirtildiği gibi).
4	http-equiv Http yanıt mesajı başlıkları için kullanılır. Örneğin, http-equiv, sayfayı yenilemek veya bir çerez ayarlamak için kullanılabilir. Değerler, içerik türü, sona erme, yenileme ve tanımlama bilgisini içerir.

Anahtar Kelimeleri Belirtme

Belge ile ilgili önemli anahtar kelimeleri belirtmek için <meta> etiketini kullanabilirsiniz ve daha sonra bu anahtar kelimeler arama motorları tarafından web sayfanızı arama amacıyla indekslerken kullanılır.

Misal

Aşağıda, belgeyle ilgili önemli anahtar sözcükler olarak HTML, Meta Etiketler ve Meta Verileri eklediğimiz bir örnek yer almaktadır.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Belge Tanımı

Doküman hakkında kısa bir açıklama vermek için <meta> etiketini kullanabilirsiniz. Bu da yine çeşitli arama motorları tarafından web sayfanızı arama amacıyla indekslerken kullanılabilir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

Belge Revizyon Tarihi

Belgenin en son ne zaman güncellendiği hakkında bilgi vermek için <meta> etiketini kullanabilirsiniz. Bu bilgiler, web sayfanızı yenilerken çeşitli web tarayıcıları tarafından kullanılabilir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Belge Yenileniyor

Web sayfanızın otomatik olarak yenilenmeye devam edeceği süreyi belirtmek için bir <meta> etiketi kullanılabilir.

Misal

Sayfanızın her 5 saniyede bir yenilenmesini istiyorsanız, aşağıdaki sözdizimini kullanın.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Sayfa Yönlendirme

Sayfanızı başka bir web sayfasına yönlendirmek için <meta> etiketini kullanabilirsiniz. Sayfayı belirli bir saniye sonra yeniden yönlendirmek istiyorsanız bir süre de belirtebilirsiniz.

Misal

Aşağıda, geçerli sayfanın 5 saniye sonra başka bir sayfaya yeniden yönlendirilmesine bir örnek verilmiştir. Sayfayı hemen yeniden yönlendirmek istiyorsanız, içerik özniteliğini belirtmeyin .

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Çerezleri Ayarlama

Çerezler, bilgisayarınızda küçük metin dosyalarında saklanan verilerdir ve web uygulaması ihtiyacınıza göre çeşitli bilgileri takip etmek için web tarayıcısı ile web sunucusu arasında değiştirilir.

Çerezleri istemci tarafında saklamak için <meta> etiketini kullanabilirsiniz ve daha sonra bu bilgiler Web Sunucusu tarafından bir site ziyaretçisini izlemek için kullanılabilir.

Misal

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

Son kullanma tarihini ve saatini dahil etmezseniz, çerez bir oturum çerezi olarak kabul edilir ve kullanıcı tarayıcıdan çıktığında silinir.

Note- Çerezler hakkında eksiksiz bir ayrıntı için PHP ve Çerezler eğitimine bakabilirsiniz .

Yazar Adını Ayarlama

Bir web sayfasında meta etiket kullanarak bir yazar adı belirleyebilirsiniz. Aşağıdaki bir örneğe bakın -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Karakter Setini Belirtin

Web sayfasında kullanılan karakter setini belirtmek için <meta> etiketini kullanabilirsiniz.

Misal

Varsayılan olarak, Web sunucuları ve Web tarayıcıları, Web sayfalarını işlemek için ISO-8859-1 (Latin1) kodlamasını kullanır. Aşağıda UTF-8 kodlamasını ayarlamak için bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Statik sayfayı geleneksel Çince karakterlerle sunmak için web sayfasının Big5 kodlamasını ayarlamak için bir <meta> etiketi içermesi gerekir -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Yorum, herhangi bir web tarayıcısı tarafından göz ardı edilen bir kod parçasıdır. HTML kodunuza, özellikle karmaşık belgelerde, bir belgenin bölümlerini ve diğer notları koda bakan herkese belirtmek için yorum eklemek iyi bir uygulamadır. Yorumlar, sizin ve başkalarının kodunuzu anlamasına yardımcı olur ve kod okunabilirliğini artırır.

HTML yorumları arasına yerleştirilir etiketleri. Bu nedenle, <! - ... -> etiketleri ile yerleştirilen herhangi bir içerik yorum olarak değerlendirilecek ve tarayıcı tarafından tamamen yok sayılacaktır.

Misal

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Bu, yorumların bir parçası olarak verilen içeriği göstermeden aşağıdaki sonucu verecektir -

Geçerli ve Geçersiz Yorumlar

Yorumlar iç içe geçmez, bu da bir yorumun başka bir yorumun içine konulamayacağı anlamına gelir. İkinci olarak, çift kısa çizgi dizisi "-", kapanış -> etiketinin parçası olması dışında bir yorumun içinde görünmeyebilir. Yorum dizesinin başlangıcında boşluk olmadığından da emin olmalısınız.

Misal

Burada, verilen yorum geçerli bir yorumdur ve tarayıcı tarafından silinecektir.

<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Ancak aşağıdaki satır geçerli bir yorum değildir ve tarayıcı tarafından görüntülenecektir. Bunun nedeni, sol açılı parantez ile ünlem işareti arasında bir boşluk olmasıdır.

<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Çok Satırlı Açıklamalar

Şimdiye kadar tek satır yorumlar gördük, ancak HTML çok satırlı yorumları da destekliyor.

Aşağıdaki örnekte gösterildiği gibi, ilk satırın önüne ve son satırın sonuna yerleştirilmiş özel başlangıç etiketi <! - ve bitiş etiketi -> ile birden çok satırı yorumlayabilirsiniz.

Misal

<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Koşullu Yorumlar

Koşullu yorumlar yalnızca Windows'ta Internet Explorer'da (IE) çalışır ancak diğer tarayıcılar tarafından yok sayılır. Explorer 5'ten itibaren desteklenirler ve bunları IE'nin farklı sürümlerine koşullu talimatlar vermek için kullanabilirsiniz.

Misal

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Internet Explorer'ın farklı sürümlerini temel alan farklı bir stil sayfası uygulamanız gereken bir durumla karşılaşırsınız, bu durumda koşullu yorumlar yardımcı olacaktır.

Yorum Etiketini Kullanma

HTML kodunun bir bölümünü yorumlamak için <comment> etiketini destekleyen birkaç tarayıcı vardır.

Note- <comment> etiketi HTML5'te kullanımdan kaldırıldı. Bu elemanı kullanmayın.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

IE kullanıyorsanız, aşağıdaki sonucu verecektir -

Ancak IE kullanmıyorsanız, aşağıdaki sonucu verecektir -

Komut Dosyası Koduna Yorum Ekleme

JavaScript'i HTML ile ayrı bir öğreticide öğrenecek olsanız da, burada bir not almalısınız, HTML kodunuzda Java Script veya VB Script kullanıyorsanız, bu komut dosyasını uygun HTML yorumlarının içine koymanız önerilir, böylece eski tarayıcılar düzgün çalışabilir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Yorum Oluşturma Stil Sayfaları

HTML ile stil sayfalarını ayrı bir öğreticide kullanmayı öğrenecek olsanız da, burada, HTML kodunuzda Basamaklı Stil Sayfası (CSS) kullanıyorsanız, bu stil sayfası kodunu uygun HTML yorumlarının içine koymanızın tavsiye edildiğini not etmelisiniz. böylece eski tarayıcılar düzgün çalışabilir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Görsellerin güzelleştirilmesi ve birçok karmaşık kavramı web sayfanızda basit bir şekilde tasvir edilmesi çok önemlidir. Bu eğitim, web sayfalarınızda resimleri kullanmak için size basit adımlarda yol gösterecektir.

Resim ekle

Kullanarak web sayfanıza herhangi bir görseli ekleyebilirsiniz. <img>etiket. Bu etiketi kullanmak için basit sözdizimi aşağıdadır.

<img src = "Image URL" ... attributes-list/>

<img> etiketi boş bir etikettir, yani sadece öznitelikler listesi içerebilir ve kapanış etiketi yoktur.

Misal

Aşağıdaki örneği denemek için, HTML dosyamızı test.htm ile test.png görüntü dosyamızı aynı dizinde tutalım -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Rahatınıza göre PNG, JPEG veya GIF resim dosyasını kullanabilirsiniz, ancak içinde doğru resim dosyası adını belirttiğinizden emin olun. srcöznitelik. Görüntü adı her zaman büyük / küçük harfe duyarlıdır.

alt özellik, resim görüntülenemiyorsa, resim için alternatif bir metin belirten zorunlu bir özelliktir.

Görüntü Konumunu Ayarla

Genellikle tüm resimleri ayrı bir dizinde tutuyoruz. Öyleyse HTML dosyası test.htm'yi ana dizinimizde tutalım ve bir alt dizin oluşturalımimages image test.png'yi saklayacağımız ana dizinin içinde.

Misal

Görsel konumumuzun "image / test.png" olduğunu varsayarsak, aşağıdaki örneği deneyin -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Görüntü Genişliğini / Yüksekliğini Ayarla

Kullanarak ihtiyacınıza göre görüntü genişliğini ve yüksekliğini ayarlayabilirsiniz. width ve heightÖznitellikler. Görüntünün genişliğini ve yüksekliğini piksel veya gerçek boyutunun yüzdesi cinsinden belirtebilirsiniz.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Görüntü Kenarlığını Ayarla

Varsayılan olarak, görüntünün çevresinde bir kenarlık olacaktır, kenarlık özelliğini kullanarak piksel cinsinden kenarlık kalınlığını belirtebilirsiniz. 0 kalınlık, resmin etrafında kenarlık olmadığı anlamına gelir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Görüntü Hizalamasını Ayarla

Varsayılan olarak, resim sayfanın sol tarafına hizalanır, ancak şunu kullanabilirsiniz: align merkeze veya sağa ayarlamak için öznitelik.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Ücretsiz Web Grafikleri

Ücretsiz Web Grafik dahil şablonlarında içine bakabilirsiniz Ücretsiz Web Graphics

HTML tabloları, web yazarlarının metin, resimler, bağlantılar, diğer tablolar, vb. Gibi verileri hücre satırları ve sütunları halinde düzenlemesine izin verir.

HTML tabloları, <table> etiketi <tr> etiketi, tablo satırları oluşturmak için kullanılır ve <td>etiketi, veri hücreleri oluşturmak için kullanılır. <td> altındaki öğeler normaldir ve varsayılan olarak sola hizalanır

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Burada border<table> etiketinin bir özniteliğidir ve tüm hücrelere bir sınır koymak için kullanılır. Kenarlığa ihtiyacınız yoksa, border = "0" kullanabilirsiniz.

Tablo Başlığı

Tablo başlığı kullanılarak tanımlanabilir <th>etiket. Bu etiket, gerçek veri hücresini temsil etmek için kullanılan <td> etiketinin yerini alacak. Normalde en üst sıranızı aşağıda gösterildiği gibi tablo başlığı olarak koyarsınız, aksi takdirde herhangi bir satırda <th> elemanını kullanabilirsiniz. <th> etiketinde tanımlanan başlıklar ortalanır ve varsayılan olarak kalındır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Hücre Dolgusu ve Hücre Boşluğu Nitelikleri

Denilen iki özellik vardır cellpadding ve cellspacing size tablo hücrelerinde beyaz boşluk ayarlamak için kullanacaktır. Cellspacing özelliği, tablo hücreleri arasındaki boşluğu tanımlarken, hücre dolgusu, hücre sınırları ile hücre içindeki içerik arasındaki mesafeyi temsil eder.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Colspan ve Rowspan Nitelikleri

Kullanacaksın colspaniki veya daha fazla sütunu tek bir sütunda birleştirmek istiyorsanız öznitelik. Benzer şekilde kullanacaksınrowspan iki veya daha fazla satırı birleştirmek istiyorsanız.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Tablo Arka Planları

Aşağıdaki iki yoldan birini kullanarak tablo arka planını ayarlayabilirsiniz -

bgcolor öznitelik - Tüm tablonun veya yalnızca bir hücre için arka plan rengini ayarlayabilirsiniz.
background öznitelik - Tüm tablo veya yalnızca bir hücre için arka plan resmi ayarlayabilirsiniz.

Kenarlık rengini de kullanarak bordercolor öznitelik.

Note- HTML5'te kullanımdan kaldırılan bgcolor , background ve bordercolor özellikleri. Bu nitelikleri kullanmayın.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

İşte kullanmanın bir örneği backgroundöznitelik. Burada / images dizininde bulunan bir resmi kullanacağız.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir. Burada arka plan görüntüsü tablonun başlığına uygulanmadı.

Masa Yüksekliği ve Genişliği

Kullanarak bir tablo genişliği ve yüksekliği ayarlayabilirsiniz. width ve heightÖznitellikler. Tablo genişliğini veya yüksekliğini piksel cinsinden veya mevcut ekran alanının yüzdesi cinsinden belirtebilirsiniz.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Tablo başlığı

captionetiketi, tablo için bir başlık veya açıklama görevi görür ve tablonun üst kısmında görünür. Bu etiket, HTML / XHTML'nin yeni sürümünde kullanımdan kaldırılmıştır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the caption</caption>
         
         <tr>
            <td>row 1, column 1</td><td>row 1, columnn 2</td>
         </tr>
         
         <tr>
            <td>row 2, column 1</td><td>row 2, columnn 2</td>
         </tr>
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Tablo Üstbilgisi, Gövde ve Altbilgi

Tablolar üç bölüme ayrılabilir - bir başlık, bir gövde ve bir ayak. Baş ve ayak, her sayfa için aynı kalan sözcükle işlenmiş belgedeki üstbilgi ve altbilgilere oldukça benzer, gövde ise tablonun ana içerik tutucusudur.

Bir masanın başını, gövdesini ve ayağını ayırmak için kullanılan üç unsur şunlardır:

<thead> - ayrı bir tablo başlığı oluşturmak için.
<tbody> - tablonun ana gövdesini belirtmek için.
<tfoot> - ayrı bir tablo altbilgisi oluşturmak için.

Bir tablo, farklı sayfaları veya veri gruplarını belirtmek için birkaç <tbody> öğesi içerebilir . Ancak <thead> ve <tfoot> etiketlerinin <tbody> 'den önce görünmesi dikkat çekicidir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

İç içe Tablolar

Bir tabloyu başka bir tablonun içinde kullanabilirsiniz. Sadece tablolar değil, tablo veri etiketi <td> içindeki neredeyse tüm etiketleri kullanabilirsiniz.

Misal

Aşağıda, bir tablo hücresi içinde başka bir tablo ve diğer etiketleri kullanma örneği verilmiştir.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML, web yazarlarına bilgi listelerini belirtmek için üç yol sunar. Tüm listeler bir veya daha fazla liste öğesi içermelidir. Listeler şunları içerebilir -

<ul>- Sırasız liste. Bu, öğeleri düz madde işaretleri kullanarak listeleyecektir.
<ol>- Sıralı bir liste. Bu, öğelerinizi listelemek için farklı sayı şemaları kullanacaktır.
<dl>- Bir tanım listesi. Bu, öğelerinizi bir sözlükte düzenlendikleri gibi düzenler.

HTML Sırasız Listeler

Sırasız liste, özel bir sırası veya sırası olmayan ilgili öğeler koleksiyonudur. Bu liste HTML kullanılarak oluşturulmuştur<ul>etiket. Listedeki her öğe bir madde işaretiyle işaretlenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Type Özniteliği

Kullanabilirsiniz type<ul> etiketi için öznitelik, beğendiğiniz madde işaretinin türünü belirtmek için. Varsayılan olarak bir disktir. Olası seçenekler aşağıdadır -

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Misal

Aşağıda, <ul type = "square"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ul type = "disc"> kullandığımız bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ul type = "circle"> kullandığımız bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML Sıralı Listeler

Öğelerinizi madde işaretli yerine numaralandırılmış bir listeye koymanız gerekiyorsa, HTML sıralı liste kullanılacaktır. Bu liste kullanılarak oluşturulur<ol>etiket. Numaralandırma birden başlar ve <li> ile etiketlenmiş ardışık her bir sıralı liste öğesi için bir artar.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Type Özniteliği

Kullanabilirsiniz type<ol> etiketi için öznitelik, beğendiğiniz numaralandırma türünü belirtmek için. Varsayılan olarak bir sayıdır. Olası seçenekler aşağıdadır -

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Misal

Aşağıda, <ol type = "1"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "I"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "i"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "A"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "a"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Başlangıç Özniteliği

Kullanabilirsiniz start<ol> etiketi için öznitelik, ihtiyacınız olan numaralandırmanın başlangıç noktasını belirtmek için. Olası seçenekler aşağıdadır -

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

Misal

Aşağıda, <ol type = "i" start = "4"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML Tanım Listeleri

HTML ve XHTML, adı verilen bir liste stilini destekler definition listsgirdilerin bir sözlük veya ansiklopedideki gibi listelendiği yer. Tanım listesi, bir sözlük, terimler listesi veya diğer ad / değer listesi sunmanın ideal yoludur.

Tanım Listesi aşağıdaki üç etiketi kullanır.

<dl> - Listenin başlangıcını tanımlar
<dt> - Bir terim
<dd> - Terim tanımı
</dl> - Listenin sonunu tanımlar

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Bir web sayfası, sizi doğrudan diğer sayfalara ve hatta belirli bir sayfanın belirli bölümlerine götüren çeşitli bağlantılar içerebilir. Bu bağlantılar, köprüler olarak bilinir.

Köprüler, ziyaretçilerin sözcüklere, tümceciklere ve resimlere tıklayarak Web siteleri arasında gezinmesine olanak tanır. Böylece, bir web sayfasında bulunan metin veya resimleri kullanarak köprüler oluşturabilirsiniz.

Note- URL'yi Anlama konusunda kısa bir eğiticiden geçmenizi tavsiye ederim

Belgeleri Bağlamak

HTML etiketi <a> kullanılarak bir bağlantı belirtilir. Bu etiketin adıanchor tagve açılış <a> etiketi ile kapanış </a> etiketi arasındaki her şey bağlantının parçası olur ve bir kullanıcı bağlantılı belgeye ulaşmak için o parçayı tıklayabilir. <a> etiketini kullanmak için basit sözdizimi aşağıdadır.

<a href = "Document URL" ... attributes-list>Link Text</a>

Misal

Sayfanıza http://www.tutorialspoint.com bağlantısını veren örneği takip edelim -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

Bu, Tutorials Point'in ana sayfasına (bu örnekte) ulaşmak için oluşturulan bağlantıya tıklayabileceğiniz aşağıdaki sonucu üretecektir.

Hedef Öznitelik

Kullandık targetönceki örneğimizdeki özniteliği. Bu özellik, bağlantılı belgenin açıldığı konumu belirtmek için kullanılır. Olası seçenekler aşağıdadır -

Sr.No	Seçenek ve Açıklama
1	_blank Bağlı belgeyi yeni bir pencere veya sekmede açar.
2	_self Bağlı belgeyi aynı çerçevede açar.
3	_parent Bağlı belgeyi üst çerçevede açar.
4	_top Bağlı belgeyi pencerenin tam gövdesinde açar.
5	targetframe Bağlı belgeyi adlandırılmış bir hedef çerçevede açar .

Misal

Hedef özellik için verilen birkaç seçenekteki temel farkı anlamak için aşağıdaki örneği deneyin.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

Bu, hedef özellik için verilen çeşitli seçenekler arasındaki farkı anlamak için farklı bağlantılara tıklayabileceğiniz aşağıdaki sonucu üretecektir.

Temel Yol Kullanımı

Aynı web sitesi ile ilgili HTML belgelerini bağladığınızda, her bağlantı için tam bir URL vermeniz gerekmez. Kullanırsan ondan kurtulabilirsin<base>HTML belge başlığınızdaki etiketi. Bu etiket, tüm bağlantılara temel bir yol vermek için kullanılır. Böylece tarayıcınız verilen göreceli yolu bu temel yola birleştirecek ve tam bir URL oluşturacaktır.

Misal

Aşağıdaki örnek, temel URL'yi belirtmek için <base> etiketini kullanır ve daha sonra, her bağlantı için tam URL vermek yerine tüm bağlantılara göreli yolu kullanabiliriz.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

Bu, oluşturulan bağlantıya tıklayabileceğiniz aşağıdaki sonucu üretecektir. HTML Tutorial HTML eğitimine ulaşmak için.

Şimdi verilen URL <a href = "/html/index.htm", <ahref = "http://www.tutorialspoint.com/html/index.htm" olarak kabul ediliyor

Bir Sayfa Bölümüne Bağlanma

Kullanarak belirli bir web sayfasının belirli bir bölümüne bağlantı oluşturabilirsiniz. nameöznitelik. Bu iki aşamalı bir süreçtir.

Note- HTML5'te kullanımdan kaldırılan ad özelliği. Bu özelliği kullanmayın. Kullanım kimliği ve başlık yerine nitelik.

Öncelikle bir web sayfası ile ulaşmak istediğiniz yere bir bağlantı oluşturun ve aşağıdaki gibi <a ...> etiketini kullanarak adlandırın -

<h1>HTML Text Links <a name = "top"></a></h1>

İkinci adım, belgeyi ve ulaşmak istediğiniz yeri bağlamak için bir köprü oluşturmaktır -

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Bu, oluşturulan bağlantıya tıklayabileceğiniz aşağıdaki bağlantıyı oluşturacaktır. Go to the Top HTML Metin Bağlantısı eğitiminin en üstüne ulaşmak için.

Go to the Top

Bağlantı Renklerini Ayarlama

Bağlantılarınızın, aktif bağlantılarınızın ve ziyaret ettiğiniz bağlantıların renklerini link, alink ve vlink <body> etiketinin öznitelikleri.

Misal

Aşağıdakileri test.htm'ye kaydedin ve nasıl yapıldığını görmek için herhangi bir web tarayıcısında açın. link, alink ve vlink öznitelikler işe yarar.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir. Tıklamadan önce bağlantının rengini kontrol edin, sonra etkinleştirdiğinizde ve bağlantı ziyaret edildiğinde rengini kontrol edin.

Bağlantılar İndir

PDF veya DOC veya ZIP dosyalarınızı indirilebilir hale getirmek için metin bağlantısı oluşturabilirsiniz. Bu çok basit; indirilebilir dosyanın tam URL'sini aşağıdaki gibi vermeniz yeterlidir -

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

Bu, aşağıdaki bağlantıyı oluşturacak ve bir dosyayı indirmek için kullanılacaktır.

Dosya İndirme İletişim Kutusu

Bazen, kullanıcının bir bağlantıya tıklayacağı ve gerçek içeriği görüntülemek yerine kullanıcıya bir "Dosya İndirme" kutusu açacağı bir seçenek vermeniz istenir. Bu çok kolaydır ve HTTP yanıtınızda bir HTTP başlığı kullanılarak gerçekleştirilebilir.

Örneğin, bir Filename dosya belirli bir bağlantıdan indirilebilirse sözdizimi aşağıdaki gibi olacaktır.

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){ print("$buffer");
}

Note- PERL CGI programları hakkında daha fazla ayrıntı için, eğitici PERL ve CGI'yi inceleyin .

We have seen how to create hypertext link using text and we also learnt how to use images in our webpages. Now, we will learn how to use images to create hyperlinks.

Example

It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below −

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

This will produce the following result, where you can click on the images to reach to the home page of Tutorials Point.

This was the simplest way of creating hyperlinks using images. Next we will see how we can create Mouse-Sensitive Image Links.

Mouse-Sensitive Images

The HTML and XHTML standards provides a feature that lets you embed many different links inside a single image. You can create different links on the single image based on different coordinates available on the image. Once different links are attached to different coordinates, we can click different parts of the image to open target documents. Such mouse-sensitive images are known as image maps.

There are two ways to create image maps −

Server-side image maps − This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.
Client-side image maps − This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.

Server-Side Image Maps

Here you simply put your image inside a hyper link and use ismap attribute which makes it special image and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a cgi or PHP script etc. to process the incoming request based on the passed coordinates.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.

For example, if a user clicks 20 pixels over and 30 pixels down from the upper-left corner of the following image −

Which has been generated by the following code snippet −

<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Ardından tarayıcı, aşağıdaki arama parametrelerini web sunucusuna gönderir ve bunlar tarafından işlenebilir. ismap.cgi komut dosyası veya map file ve istediğiniz belgeleri bu koordinatlara bağlayabilirsiniz -

/cgi-bin/ismap.cgi?20,30

Bu şekilde görüntünün farklı koordinatlarına farklı bağlantılar atayabilir ve bu koordinatlara tıklandığında ilgili bağlantılı belgeyi açabilirsiniz. Hakkında daha fazla öğrenmek içinismapözniteliğini kontrol edebilirsiniz Image ismap nasıl kullanılır?

Note- Perl programlamayı çalışırken CGI programlamayı öğreneceksiniz. Bu aktarılan koordinatları PHP veya başka bir komut dosyası kullanarak işlemek için komut dosyanızı yazabilirsiniz. Şimdilik, HTML öğrenmeye odaklanalım ve daha sonra bu bölümü tekrar ziyaret edebilirsiniz.

İstemci Tarafı Görüntü Haritaları

İstemci tarafı görüntü haritaları, usemap <img /> etiketinin niteliği ve özel <map> ve <area> uzantı etiketleriyle tanımlanır.

Haritayı oluşturacak görüntü, <img /> etiketi kullanılarak normal bir görüntü olarak sayfaya eklenir, tek farkı usemap. Usemap özniteliğinin değeri, harita ve resim etiketlerini bağlamak için bir <map> etiketinde kullanılacak değerdir. <map>, <area> etiketleriyle birlikte tüm görüntü koordinatlarını ve ilgili bağlantıları tanımlar.

Harita etiketinin içindeki <area> etiketi, görüntü üzerinde bulunan tıklanabilir her bir sıcak noktanın sınırlarını tanımlayan şekli ve koordinatları belirtir. İşte resim haritasından bir örnek -

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Koordinat sistemi

Koordinatların gerçek değeri tamamen söz konusu şekle bağlıdır. İşte bir özet, ardından ayrıntılı örnekler sunulacak -

rect = x₁ , y₁ , x₂ , y₂

x ₁ ve y ₁ , dikdörtgenin sol üst köşesinin koordinatlarıdır; x ₂ ve y ₂ , sağ alt köşenin koordinatlarıdır.
circle = x_c , y_c , radius

x _c ve y _c , dairenin merkezinin koordinatlarıdır ve yarıçap, dairenin yarıçapıdır. 200,50 merkezli ve 25 yarıçaplı bir dairenin öznitelik koordinatları = "200,50,25" olur
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Çeşitli xy çiftleri, bir noktadan diğer noktaya bir "çizgi" çizilerek çokgenin köşelerini (noktaları) tanımlar. En üst noktası 20,20 ve en geniş noktalarında 40 piksel olan bir elmas şeklindeki çokgen, öznitelik koordinatlarına = "20,20,40,40,20,60,0,40" sahip olacaktır .

Tüm koordinatlar görüntünün sol üst köşesine (0,0) görelidir. Her şeklin ilgili bir URL'si vardır. Farklı konumların koordinatlarını bilmek için herhangi bir görüntü yazılımını kullanabilirsiniz.

Web sayfanıza HTML e-posta bağlantısı koymak zor değildir, ancak e-posta hesabınız için gereksiz spam sorunlarına neden olabilir. Bu tür e-postaları toplamak için programlar çalıştırabilen ve daha sonra bunları çeşitli şekillerde spam göndermek için kullanabilen insanlar var.

İnsanların size e-posta göndermesini kolaylaştırmak için başka bir seçeneğiniz olabilir. Bir seçenek, kullanıcı verilerini toplamak için HTML formları kullanmak ve ardından bir e-posta göndermek için PHP veya CGI komut dosyası kullanmak olabilir.

Basit bir örnek, Bize Ulaşın Formumuza bakın. Bu formu kullanarak kullanıcı geri bildirimlerini alıyoruz ve ardından bu bilgileri toplayan ve bize verilen e-posta kimliğine e-posta gönderen bir CGI programı kullanıyoruz.

Note- HTML Formlarında HTML Formları hakkında bilgi edinecek ve başka bir eğitimimizde CGI hakkında bilgi edineceksiniz.Perl CGI Programming.

HTML E-posta Etiketi

HTML <a>etiketi, bir e-posta göndermek için bir e-posta adresi belirtme seçeneği sunar. <a> etiketini bir e-posta etiketi olarak kullanırken, kullanacaksınızmailto: email addresshref niteliği ile birlikte . Kullanım sözdizimi aşağıdadırmailto http kullanmak yerine.

<a href = "mailto: [email protected]">Send Email</a>

Bu kod, e-posta göndermek için kullanabileceğiniz aşağıdaki bağlantıyı oluşturacaktır.

Send Email

Şimdi, bir kullanıcı bu bağlantıyı tıklarsa, kullanıcının bilgisayarında yüklü bir E-posta İstemcisi (Lotus Notes, Outlook Express vb.) Başlatır. E-posta göndermek için bu seçeneği kullanmanın başka bir riski vardır, çünkü kullanıcının bilgisayarında e-posta istemcisi kurulu değilse, e-posta göndermesi mümkün olmaz.

Varsayılan ayarları

E - posta adresinizle birlikte varsayılan bir e-posta konusu ve e-posta gövdesi belirtebilirsiniz . Aşağıda, varsayılan özne ve bedeni kullanma örneği verilmiştir.

<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>

Bu kod, e-posta göndermek için kullanabileceğiniz aşağıdaki bağlantıyı oluşturacaktır.

Send Feedback

HTML çerçeveleri, tarayıcı pencerenizi, her bölümün ayrı bir HTML belgesi yükleyebileceği birden çok bölüme ayırmak için kullanılır. Tarayıcı penceresindeki bir çerçeve koleksiyonu çerçeve kümesi olarak bilinir. Pencere, tabloların düzenlendiği şekilde çerçevelere bölünmüştür: satırlar ve sütunlar halinde.

Çerçevelerin Dezavantajları

Çerçeve kullanmanın birkaç dezavantajı vardır, bu nedenle web sayfalarınızda çerçeve kullanmanız asla önerilmez -

Bazı küçük cihazlar, ekranları bölünecek kadar büyük olmadığından sık sık çerçevelerle baş edemez.
Bazen farklı ekran çözünürlüğü nedeniyle sayfanız farklı bilgisayarlarda farklı görüntülenecektir.
Tarayıcının geri düğmesi, kullanıcının umduğu gibi çalışmayabilir.
Çerçeve teknolojisini desteklemeyen hala birkaç tarayıcı var.

Çerçeve Oluşturma

Bir sayfada çerçeve kullanmak için <body> etiketi yerine <frameset> etiketini kullanırız. <frameset> etiketi, pencerenin çerçevelere nasıl bölüneceğini tanımlar. rows <frameset> etiketinin niteliği, yatay çerçeveleri tanımlar ve colsözellik dikey çerçeveleri tanımlar. Her çerçeve <frame> etiketiyle belirtilir ve çerçeveye hangi HTML belgesinin açılacağını tanımlar.

Note- <frame> etiketi HTML5'te kullanımdan kaldırıldı. Bu elemanı kullanmayın.

Misal

Aşağıda, üç yatay çerçeve oluşturma örneği verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Yukarıdaki örneği şu şekilde koyalım, burada satır niteliğini sütunlarla değiştirdik ve genişliklerini değiştirdik. Bu, üç çerçevenin tümünü dikey olarak oluşturacaktır -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Bu, aşağıdaki sonucu verecektir -

<frameset> Etiket Nitelikleri

<frameset> etiketinin önemli öznitelikleri aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	cols Çerçeve kümesinde kaç tane sütun olduğunu ve her bir sütunun boyutunu belirtir. Her bir sütunun genişliğini dört yoldan biriyle belirtebilirsiniz - Piksel cinsinden mutlak değerler. Örneğin, üç dikey çerçeve oluşturmak için cols = "100, 500, 100" kullanın . Tarayıcı penceresinin bir yüzdesi. Örneğin, üç dikey çerçeve oluşturmak için cols = "% 10,% 80,% 10" kullanın . Joker karakter sembolü kullanmak. Örneğin, üç dikey çerçeve oluşturmak için cols = "% 10, ,% 10" kullanın* . Bu durumda joker karakter, pencerenin geri kalanını alır. Tarayıcı penceresinin göreli genişlikleri olarak. Örneğin, üç dikey çerçeve oluşturmak için cols = "3 , 2 , 1 " kullanın* . Bu, yüzdelere bir alternatiftir. Tarayıcı penceresinin göreli genişliklerini kullanabilirsiniz. Burada pencere altıncılara bölünmüştür: ilk sütun pencerenin yarısını, ikincisi üçte birini ve üçüncüsü altıda birini kaplar.
2	rows Bu özellik, cols niteliği gibi çalışır ve aynı değerleri alır, ancak çerçeve kümesindeki satırları belirtmek için kullanılır. Örneğin, iki yatay çerçeve oluşturmak için rows = "% 10,% 90" kullanın . Her satırın yüksekliğini yukarıda sütunlar için açıklandığı şekilde belirtebilirsiniz.
3	border Bu özellik, her karenin kenarlığının genişliğini piksel cinsinden belirtir. Örneğin, border = "5". Sıfır değeri, sınır olmadığı anlamına gelir.
4	frameborder Bu öznitelik, çerçeveler arasında üç boyutlu bir kenarlığın gösterilip gösterilmeyeceğini belirtir. Bu öznitelik, 1 (evet) veya 0 (hayır) değerini alır. Örneğin, frameborder = "0" hiçbir sınır belirtmez.
5	framespacing Bu öznitelik, bir çerçeve kümesindeki çerçeveler arasındaki boşluk miktarını belirtir. Bu, herhangi bir tamsayı değeri alabilir. Örneğin, kare aralığı = "10", her kare arasında 10 piksel boşluk olması gerektiği anlamına gelir.

<frame> Etiketi Nitelikleri

<frame> etiketinin önemli öznitelikleri aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	src Bu nitelik, çerçeveye yüklenmesi gereken dosya adını vermek için kullanılır. Değeri herhangi bir URL olabilir. Örneğin src = "/html/top_frame.htm", html dizininde bulunan bir HTML dosyasını yükleyecektir.
2	name Bu nitelik, bir çerçeveye bir ad vermenizi sağlar. Bir belgenin hangi çerçeveye yüklenmesi gerektiğini belirtmek için kullanılır. Bu, özellikle bir çerçevede sayfaları başka bir çerçeveye yükleyen bağlar oluşturmak istediğinizde önemlidir; bu durumda, ikinci çerçevenin kendisini bağın hedefi olarak tanımlaması için bir ada ihtiyacı vardır.
3	frameborder Bu öznitelik, o çerçevenin kenarlıklarının gösterilip gösterilmeyeceğini belirtir; eğer varsa, <frameset> etiketinde frameborder özniteliğinde verilen değeri geçersiz kılar ve bu, 1 (evet) veya 0 (hayır) değerlerini alabilir.
4	marginwidth Bu nitelik, çerçevenin kenarlıklarının sol ve sağ tarafları ile çerçevenin içeriği arasındaki boşluğun genişliğini belirlemenize olanak tanır. Değer piksel cinsinden verilmiştir. Örneğin marginwidth = "10".
5	marginheight Bu nitelik, çerçevenin üst ve alt kenarlıkları ile içeriği arasındaki boşluğun yüksekliğini belirlemenize olanak tanır. Değer piksel cinsinden verilmiştir. Örneğin marginheight = "10".
6	noresize Varsayılan olarak, bir çerçevenin kenarlıklarını tıklayıp sürükleyerek herhangi bir çerçeveyi yeniden boyutlandırabilirsiniz. Noresize niteliği, bir kullanıcının çerçeveyi yeniden boyutlandırmasını engeller. Örneğin noresize = "noresize".
7	scrolling Bu nitelik, çerçevede görünen kaydırma çubuklarının görünümünü kontrol eder. Bu, "evet", "hayır" veya "otomatik" değerleri alır. Örneğin kaydırma = "hayır", kaydırma çubuklarına sahip olmaması gerektiği anlamına gelir.
8	longdesc Bu öznitelik, çerçevenin içeriğinin uzun bir açıklamasını içeren başka bir sayfaya bağlantı sağlamanıza olanak tanır. Örneğin longdesc = "framedescription.htm"

Çerçeveler için Tarayıcı Desteği

Bir kullanıcı, çerçeveleri desteklemeyen herhangi bir eski tarayıcı veya tarayıcı kullanıyorsa, kullanıcıya <noframes> öğesi görüntülenmelidir.

Bu nedenle <noframes> öğesinin içine bir <body> öğesi yerleştirmelisiniz çünkü <frameset> öğesi <body> öğesinin yerini almalıdır, ancak bir tarayıcı <frameset> öğesini anlamıyorsa, o zaman öğenin içinde ne olduğunu anlamalıdır. Bir <noframes> öğesinde bulunan <body> öğesi.

Eski tarayıcılara sahip olan kullanıcınız için güzel bir mesaj yazabilirsiniz. Örneğin, Üzgünüm !! tarayıcınız çerçeveleri desteklemiyor. yukarıdaki örnekte gösterildiği gibi.

Çerçevenin adı ve hedef nitelikleri

Çerçevelerin en popüler kullanımlarından biri, gezinme çubuklarını bir çerçeveye yerleştirmek ve ardından ana sayfaları ayrı bir çerçeveye yüklemektir.

Bir test.htm dosyasının aşağıdaki koda sahip olduğu aşağıdaki örneği görelim -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Burada, iki çerçeveyle doldurmak için iki sütun oluşturduk. İlk kare 200 piksel genişliğindedir ve aşağıdakiler tarafından uygulanan gezinme menü çubuğunu içerecektir:menu.htmdosya. İkinci sütun kalan alanı doldurur ve sayfanın ana bölümünü içerecek vemain.htmdosya. Menü çubuğunda bulunan üç bağlantının tümü için, hedef çerçeveden şu şekilde bahsettik:main_page, böylece menü çubuğundaki bağlantılardan herhangi birine tıkladığınızda, mevcut bağlantı ana sayfada açılacaktır.

Menu.htm dosyasının içeriği aşağıdadır

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

Main.htm dosyasının içeriği aşağıdadır -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Yüklediğimizde test.htm dosya, aşağıdaki sonucu verir -

Artık sol panelde bulunan bağlantılara tıklamayı deneyebilir ve sonucu görebilirsiniz. Hedef özellik ayrıca aşağıdaki değerlerden birini alabilir -

Sr.No	Seçenek ve Açıklama
1	_self Sayfayı geçerli çerçeveye yükler.
2	_blank Bir sayfayı yeni bir tarayıcı penceresine yükler. Yeni bir pencere açılıyor.
3	_parent Sayfayı, tek bir çerçeve kümesi durumunda ana tarayıcı penceresi olan ana pencereye yükler.
4	_top Geçerli çerçeveleri değiştirerek sayfayı tarayıcı penceresine yükler.
5	targetframe Sayfayı adlandırılmış bir hedef çerçeveye yükler.

HTML etiketi ile bir satır içi çerçeve tanımlayabilirsiniz <iframe>. <iframe> etiketi, bir şekilde <frameset> etiketiyle ilişkili değildir, bunun yerine belgenizin herhangi bir yerinde görünebilir. <iframe> etiketi, tarayıcının kaydırma çubukları ve kenarlıklar dahil olmak üzere ayrı bir belgeyi görüntüleyebileceği belge içinde dikdörtgen bir bölgeyi tanımlar. Bir satır içi çerçeve, başka bir belgeyi geçerli HTML belgesine gömmek için kullanılır.

src özellik, satır içi çerçeveyi kaplayan belgenin URL'sini belirtmek için kullanılır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
	
   <body>
      <p>Document content goes here...</p>
      
      <iframe src = "/html/menu.htm" width = "555" height = "200">
         Sorry your browser does not support inline frames.
      </iframe>
      
      <p>Document content also go here...</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

<Iframe> Etiketi Nitelikleri

Note- HTML5'te kullanımdan kaldırılan frameborder , marginwidth , longdesc , scrolling , marginheight özellikleri. Bu nitelikleri kullanmayın.

Sr.No	Öznitelik ve Açıklama
1	src Bu nitelik, çerçeveye yüklenmesi gereken dosya adını vermek için kullanılır. Değeri herhangi bir URL olabilir. Örneğin src = "/html/top_frame.htm", html dizininde bulunan bir HTML dosyasını yükleyecektir.
2	name Bu nitelik, bir çerçeveye bir ad vermenizi sağlar. Bir belgenin hangi çerçeveye yüklenmesi gerektiğini belirtmek için kullanılır. Bu, özellikle bir çerçevede sayfaları başka bir çerçeveye yükleyen bağlar oluşturmak istediğinizde önemlidir; bu durumda, ikinci çerçevenin kendisini bağın hedefi olarak tanımlaması için bir ada ihtiyacı vardır.
3	frameborder Bu öznitelik, o çerçevenin kenarlıklarının gösterilip gösterilmeyeceğini belirtir; eğer varsa, <frameset> etiketinde frameborder özniteliğinde verilen değeri geçersiz kılar ve bu, 1 (evet) veya 0 (hayır) değerlerini alabilir.
4	marginwidth Bu nitelik, çerçevenin kenarlıklarının sol ve sağ tarafları ile çerçevenin içeriği arasındaki boşluğun genişliğini belirlemenize olanak tanır. Değer piksel cinsinden verilmiştir. Örneğin marginwidth = "10".
5	marginheight Bu nitelik, çerçevenin üst ve alt kenarlıkları ile içeriği arasındaki boşluğun yüksekliğini belirlemenize olanak tanır. Değer piksel cinsinden verilmiştir. Örneğin marginheight = "10".
6	height Bu öznitelik, <iframe> yüksekliğini belirtir.
7	scrolling Bu nitelik, çerçevede görünen kaydırma çubuklarının görünümünü kontrol eder. Bu, "evet", "hayır" veya "otomatik" değerleri alır. Örneğin kaydırma = "hayır", kaydırma çubuklarına sahip olmaması gerektiği anlamına gelir.
8	longdesc Bu öznitelik, çerçevenin içeriğinin uzun bir açıklamasını içeren başka bir sayfaya bağlantı sağlamanıza olanak tanır. Örneğin longdesc = "framedescription.htm"
9	width Bu öznitelik, <iframe> genişliğini belirtir.

Tüm HTML öğeleri iki kategoriye ayrılabilir (a) Blok Seviyesi Elemanları (b)Satır İçi Elemanlar.

Blok Elemanları

Blok öğeleri, kendilerinden önce ve sonra satır sonu varmış gibi ekranda görünür. Örneğin, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> ve <address> öğelerinin tümü blok düzeyi öğelerdir. Hepsi kendi yeni çizgisinde başlar ve onları takip eden her şey kendi yeni çizgisinde görünür.

Satır İçi Öğeler

Satır içi öğeler ise cümlelerin içinde görünebilir ve kendilerine ait yeni bir satırda görünmeleri gerekmez. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd> ve <var> öğelerinin tümü satır içi öğelerdir.

HTML Öğelerini Gruplama

Diğer çeşitli HTML etiketlerini gruplamak için çok sık kullandığımız iki önemli etiket vardır (i) <div> etiketi ve (ii) <span> etiketi

<div> etiketi

Bu, çeşitli diğer HTML etiketlerinin gruplanmasında ve eleman grubuna CSS uygulanmasında büyük rol oynayan çok önemli blok seviyesi etiketidir. Şimdi bile <div> etiketi, <div> etiketini kullanarak sayfanın farklı bölümlerini (Sol, Sağ, Üst vb.) Tanımladığımız web sayfası düzeni oluşturmak için kullanılabilir. Bu etiket blokta herhangi bir görsel değişiklik sağlamaz ancak bu CSS ile kullanıldığında daha fazla anlam kazanır.

Misal

Aşağıda <div> etiketinin basit bir örneği verilmiştir. Basamaklı Stil Sayfasını (CSS) ayrı bir bölümde öğreneceğiz, ancak burada <div> etiketinin kullanımını göstermek için kullandık -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

<span> etiketi

HTML <span> bir satır içi öğedir ve bir HTML belgesindeki satır içi öğeleri gruplamak için kullanılabilir. Bu etiket ayrıca blokta herhangi bir görsel değişiklik sağlamaz ancak CSS ile kullanıldığında daha fazla anlam kazanır.

<span> etiketi ile <div> etiketi arasındaki fark, <span> etiketinin satır içi öğelerle, <div> etiketinin ise blok düzeyindeki öğelerle kullanılmasıdır.

Misal

Aşağıda, <span> etiketinin basit bir örneği verilmiştir. Basamaklı Stil Sayfasını (CSS) ayrı bir bölümde öğreneceğiz, ancak burada <span> etiketinin kullanımını göstermek için kullandık -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Varsayılan olarak, web sayfanızın arka planı beyaz renktedir. Beğenmeyebilirsin ama endişelenme. HTML, web sayfanızın arka planını dekore etmenin iki iyi yolunu izlemenizi sağlar.

Renklerle HTML Arka Planı
Resimlerle HTML Arka Planı

Şimdi uygun örnekleri kullanarak her iki yaklaşımı da tek tek görelim.

Renklerle HTML Arka Planı

bgcolor öznitelik, bir HTML öğesinin arka planını, özellikle sayfa gövdesini ve tablo arka planını kontrol etmek için kullanılır.

Note- bgcolor özelliği HTML5'te kullanımdan kaldırıldı. Bu özelliği kullanmayın.

Herhangi bir HTML etiketiyle bgcolor niteliğini kullanmak için sözdizimi aşağıdadır.

<tagname bgcolor = "color_value"...>

Bu renk_değer aşağıdaki formatlardan herhangi birinde verilebilir -

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Misal

Bir HTML etiketinin arka planını ayarlamak için örnekler -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Resimlerle HTML Arka Planı

backgroundöznitelik, bir HTML öğesinin arka planını, özellikle sayfa gövdesini ve tablo arka planını kontrol etmek için de kullanılabilir. HTML sayfanızın veya tablonuzun arka planını ayarlamak için bir resim belirtebilirsiniz.

Note- Arka plan özelliği HTML5'te kullanımdan kaldırıldı. Bu özelliği kullanmayın.

Herhangi bir HTML etiketiyle arka plan özniteliğini kullanmak için sözdizimi aşağıdadır.

Note- Arka plan özelliği kullanımdan kaldırılmıştır ve arka plan ayarı için Stil Sayfası kullanılması önerilir.

<tagname background = "Image URL"...>

En sık kullanılan resim formatları JPEG, GIF ve PNG resimleridir.

Misal

Bir tablonun arka plan resimlerini ayarlamak için örnekler.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Desenli ve Şeffaf Arka Planlar

Çeşitli web sitelerinde birçok desen veya şeffaf arka plan görmüş olabilirsiniz. Bu, arka planda desenli görüntü veya şeffaf görüntü kullanılarak kolayca elde edilebilir.

Yavaş yüklemeyi önlemek için desenler veya şeffaf GIF veya PNG görüntüleri oluştururken 1x1 kadar küçük bile mümkün olan en küçük boyutları kullanmanız önerilir.

Misal

İşte bir tablonun arka plan desenini ayarlamak için örnekler -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Web sitenize iyi bir görünüm ve his vermek için renkler çok önemlidir. <body> etiketini kullanarak sayfa düzeyinde renkleri belirtebilir veya tek tek etiketler için renkleri ayarlayabilirsiniz.bgcolor öznitelik.

<body> etiketi, farklı renkleri ayarlamak için kullanılabilecek aşağıdaki niteliklere sahiptir -

bgcolor - sayfanın arka planı için bir renk ayarlar.
text - gövde metni için bir renk ayarlar.
alink - etkin bağlantılar veya seçili bağlantılar için bir renk ayarlar.
link - bağlantılı metin için bir renk ayarlar.
vlink- ziyaret edilen bağlantılar için, yani zaten tıkladığınız bağlantılı metin için bir renk belirler .

HTML Renk Kodlama Yöntemleri

Web sayfanızda renkleri ayarlamak için aşağıdaki üç farklı yöntem vardır:

Color names - Doğrudan yeşil, mavi veya kırmızı gibi renk adlarını belirtebilirsiniz.
Hex codes - Rengi oluşturan kırmızı, yeşil ve mavi miktarını temsil eden altı basamaklı bir kod.
Color decimal or percentage values - Bu değer, rgb () özelliği kullanılarak belirtilir.

Şimdi bu renk şemalarını tek tek göreceğiz.

HTML Renkleri - Renk Adları

Metni veya arka plan rengini ayarlamak için doğrudan bir renk adı belirtebilirsiniz. W3C, bir HTML doğrulayıcısı ile doğrulanacak 16 temel renk adı listelemiştir, ancak başlıca tarayıcılar tarafından desteklenen 200'den fazla farklı renk adı vardır.

Note- HTML Renk Adı'nın tam listesini kontrol edin .

W3C Standart 16 Renk

İşte W3C Standart 16 Renk adlarının listesi ve bunların kullanılması tavsiye edilir.

Siyah	Gri	Gümüş	Beyaz
Sarı	Misket Limonu	Aqua	Fuşya
Kırmızı	Yeşil	Mavi	Mor
Bordo	zeytin	Donanma	Teal

Misal

İşte bir HTML etiketinin arka planını renk adına göre ayarlamak için örnekler -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Name</title>
   </head>
	
   <body text = "blue" bgcolor = "green">
      <p>Use different color names for for body and table and see the result.</p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML Renkleri - Hex Kodları

Onaltılık, bir rengin 6 basamaklı bir temsilidir. İlk iki hane (RR) kırmızı bir değeri temsil eder, sonraki ikisi yeşil bir değeri (GG) ve sonuncusu mavi değeri (BB) temsil eder.

Adobe Photoshop, Paintshop Pro veya MS Paint gibi herhangi bir grafik yazılımından onaltılık bir değer alınabilir.

Her onaltılık kodun önünde bir pound veya kare işareti # bulunur. Aşağıda, onaltılık gösterimi kullanan birkaç renk listesi bulunmaktadır.

Renk	Renk HEX
	# 000000
	# FF0000
	# 00FF00
	# 0000FF
	# FFFF00
	# 00FFFF
	# FF00FF
	# C0C0C0
	#FFFFFF

Misal

Bir HTML etiketinin arka planını renk koduna göre onaltılık olarak ayarlamak için örnekler -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Hex</title>
   </head>
	
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result.</p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML Renkleri - RGB Değerleri

Bu renk değeri, rgb( )Emlak. Bu özellik, her biri kırmızı, yeşil ve mavi olmak üzere üç değer alır. Değer, 0 ile 255 arasında bir tam sayı veya yüzde olabilir.

Note - Tüm tarayıcılar rgb () rengin özelliğini desteklemediğinden kullanılmaması önerilir.

Aşağıda, RGB değerlerini kullanarak birkaç rengi gösteren bir liste bulunmaktadır.

Renk	Renkli RGB
	rgb (0,0,0)
	rgb (255; 0; 0)
	rgb (0,255,0)
	rgb (0,0,255)
	rgb (255,255,0)
	rgb (0,255,255)
	rgb (255; 255)
	rgb (192.192.192)
	rgb (255,255,255)

Misal

Rgb () değerlerini kullanarak renk koduna göre bir HTML etiketinin arka planını ayarlamak için örnekler:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by RGB code</title>
   </head>
	
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result.</p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Tarayıcı İçin Güvenli Renkler

İşte en güvenli ve bilgisayardan bağımsız renkler olması gereken 216 rengin listesi. Bu renkler 000000 hexa kodundan FFFFFF'ye kadar oldukça fazladır ve 256 renk paletine sahip tüm bilgisayarlar tarafından desteklenecektir.

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size = "+n"> or <font size = "−n">

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

This will produce the following result −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.

Note − Check a complete list of HTML Standard Fonts.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

Note − You can check a complete list of HTML Color Name with Codes.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

This will produce the following result −

The <basefont> Element

The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

This will produce the following result −

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax −

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Form Attributes

Apart from common attributes, following is a list of the most frequently used form attributes −

Sr.No	Öznitelik ve Açıklama
1	action Arka uç komut dosyası, aktarılan verilerinizi işlemeye hazır.
2	method Verileri yüklemek için kullanılacak yöntem. En sık kullanılanlar GET ve POST yöntemleridir.
3	target Komut dosyasının sonucunun görüntüleneceği hedef pencereyi veya çerçeveyi belirtin. _Blank, _self, _parent vb. Değerleri alır.
4	enctype Tarayıcının verileri sunucuya göndermeden önce nasıl kodlayacağını belirtmek için enctype niteliğini kullanabilirsiniz. Olası değerler - application/x-www-form-urlencoded - Bu, çoğu formun basit senaryolarda kullandığı standart yöntemdir. mutlipart/form-data - Bu, ikili verileri resim, kelime dosyası vb. Gibi dosyalar biçiminde yüklemek istediğinizde kullanılır.

Note- Form veri yüklemesinin nasıl çalıştığı hakkında ayrıntılı bilgi için Perl & CGI'ye başvurabilirsiniz .

HTML Form Kontrolleri

HTML formunu kullanarak veri toplamak için kullanabileceğiniz farklı form denetimi türleri vardır -

Metin Giriş Kontrolleri
Onay Kutuları Denetimleri
Radyo Kutusu Kontrolleri
Kutu Kontrollerini Seçin
Dosya Seçme kutuları
Gizli Kontroller
Tıklanabilir Düğmeler
Gönder ve Sıfırla Düğmesi

Metin Giriş Kontrolleri

Formlarda kullanılan üç tür metin girişi vardır -

Single-line text input controls- Bu kontrol, arama kutuları veya adlar gibi yalnızca bir satır kullanıcı girişi gerektiren öğeler için kullanılır. HTML kullanılarak oluşturulurlar<input> etiket.
Password input controls- Bu aynı zamanda tek satırlık bir metin girişidir ancak bir kullanıcı girer girmez karakteri maskeler. Ayrıca HTMl <input> etiketi kullanılarak oluşturulurlar.
Multi-line text input controls- Bu, kullanıcının tek bir cümleden daha uzun olabilecek ayrıntıları vermesi gerektiğinde kullanılır. Çok satırlı giriş kontrolleri HTML kullanılarak oluşturulur<textarea> etiket.

Tek satırlı metin giriş kontrolleri

Bu kontrol, arama kutuları veya adlar gibi yalnızca bir satır kullanıcı girişi gerektiren öğeler için kullanılır. HTML <input> etiketi kullanılarak oluşturulurlar.

Misal

Adı ve soyadı almak için kullanılan tek satırlık bir metin girişinin temel bir örneği:

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Metin alanı oluşturmaya yönelik <input> etiketinin özniteliklerinin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün türünü gösterir ve metin giriş kontrolü için ayarlanacaktır. text.
2	name Tanınmak üzere sunucuya gönderilen kontrole bir isim vermek ve değeri almak için kullanılır.
3	value Bu, kontrolün içinde bir başlangıç değeri sağlamak için kullanılabilir.
4	size Metin girişi denetiminin genişliğini karakter cinsinden belirtmeye izin verir.
5	maxlength Bir kullanıcının metin kutusuna girebileceği maksimum karakter sayısını belirlemenize izin verir.

Şifre giriş kontrolleri

Bu aynı zamanda tek satırlık bir metin girişidir ancak bir kullanıcı girer girmez karakteri maskeler. Ayrıca HTML <input> etiketi kullanılarak oluşturulurlar ancak type özelliği şu şekilde ayarlanır:password.

Misal

Kullanıcı şifresini almak için kullanılan tek satırlık şifre girişinin temel bir örneği:

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Parola alanı oluşturmak için <input> etiketinin özniteliklerinin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün türünü gösterir ve şifre giriş kontrolü için ayarlanacaktır. password.
2	name Tanınmak üzere sunucuya gönderilen kontrole bir isim vermek ve değeri almak için kullanılır.
3	value Bu, kontrolün içinde bir başlangıç değeri sağlamak için kullanılabilir.
4	size Metin girişi denetiminin genişliğini karakter cinsinden belirtmeye izin verir.
5	maxlength Bir kullanıcının metin kutusuna girebileceği maksimum karakter sayısını belirlemenize izin verir.

Çok Satırlı Metin Giriş Kontrolleri

Bu, kullanıcının tek bir cümleden daha uzun olabilecek ayrıntıları vermesi gerektiğinde kullanılır. Çok satırlı giriş kontrolleri, HTML <textarea> etiketi kullanılarak oluşturulur.

Misal

Öğe açıklamasını almak için kullanılan çok satırlı metin girişinin temel bir örneği:

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

<textarea> etiketi için özniteliklerin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	name Tanınmak üzere sunucuya gönderilen kontrole bir isim vermek ve değeri almak için kullanılır.
2	rows Metin alanı kutusunun satır sayısını gösterir.
3	cols Metin alanı kutusunun sütun sayısını gösterir

Onay Kutusu Kontrolü

Onay kutuları, birden fazla seçeneğin seçilmesi gerektiğinde kullanılır. Ayrıca HTML <input> etiketi kullanılarak oluşturulurlar ancak type özelliği şu şekilde ayarlanır:checkbox..

Misal

İki onay kutusu olan bir form için örnek bir HTML kodu:

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

<checkbox> etiketi için özniteliklerin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün türünü gösterir ve onay kutusu giriş kontrolü için checkbox..
2	name Tanınmak üzere sunucuya gönderilen kontrole bir isim vermek ve değeri almak için kullanılır.
3	value Onay kutusu seçilirse kullanılacak değer.
4	checked Varsayılan olarak seçmek istiyorsanız işaretli olarak ayarlayın .

Radyo Düğmesi Kontrolü

Radyo düğmeleri, birçok seçenek dışında kullanılır, yalnızca bir seçeneğin seçilmesi gerekir. Ayrıca HTML <input> etiketi kullanılarak oluşturulurlar ancak type özelliği şu şekilde ayarlanır:radio.

Misal

İki radyo düğmesi olan bir form için örnek HTML kodu:

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Radyo düğmesinin özniteliklerinin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün türünü gösterir ve onay kutusu giriş kontrolü için radyoya ayarlanacaktır.
2	name Tanınmak üzere sunucuya gönderilen kontrole bir isim vermek ve değeri almak için kullanılır.
3	value Radyo kutusu seçilirse kullanılacak değer.
4	checked Varsayılan olarak seçmek istiyorsanız işaretli olarak ayarlayın .

Kutu Denetimini Seçin

Bir kullanıcının bir veya daha fazla seçeneği seçebileceği açılır liste biçiminde çeşitli seçenekleri listeleme seçeneği sağlayan açılır kutu olarak da adlandırılan bir seçim kutusu.

Misal

Bir açılır kutuya sahip bir form için örnek HTML kodu

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

<select> etiketinin önemli özniteliklerinin listesi aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	name Tanınmak üzere sunucuya gönderilen kontrole bir isim vermek ve değeri almak için kullanılır.
2	size Bu, kayan bir liste kutusu sunmak için kullanılabilir.
3	multiple "Çoklu" olarak ayarlanırsa, kullanıcının menüden birden fazla öğe seçmesine izin verir.

<Seçenek> etiketinin önemli özniteliklerinin listesi aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	value Seçme kutusundaki bir seçenek seçildiğinde kullanılacak değer.
2	selected Bu seçeneğin, sayfa yüklendiğinde başlangıçta seçilen değer olması gerektiğini belirtir.
3	label Seçenek etiketlemenin alternatif bir yolu

Dosya Yükleme Kutusu

Bir kullanıcının web sitenize dosya yüklemesine izin vermek istiyorsanız, dosya seçme kutusu olarak da bilinen bir dosya yükleme kutusu kullanmanız gerekecektir. Bu aynı zamanda <input> öğesi kullanılarak oluşturulur, ancak type özelliği şu şekilde ayarlanır:file.

Misal

İşte tek dosya yükleme kutusu olan bir form için örnek HTML kodu -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Dosya yükleme kutusunun önemli özelliklerinin listesi aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	name Tanınmak üzere sunucuya gönderilen kontrole bir isim vermek ve değeri almak için kullanılır.
2	accept Sunucunun kabul ettiği dosya türlerini belirtir.

Düğme Kontrolleri

HTML'de tıklanabilir düğmeler oluşturmanın çeşitli yolları vardır. Ayrıca <input> etiketini kullanarak, type özniteliğini şu şekilde ayarlayarak tıklanabilir bir düğme oluşturabilirsiniz:button. Type özelliği aşağıdaki değerleri alabilir -

Sr.No	Tip ve Açıklama
1	submit Bu, otomatik olarak bir form gönderen bir düğme oluşturur.
2	reset Bu, form denetimlerini otomatik olarak başlangıç değerlerine sıfırlayan bir düğme oluşturur.
3	button Bu, kullanıcı bu düğmeyi tıkladığında bir istemci tarafı komut dosyasını tetiklemek için kullanılan bir düğme oluşturur.
4	image Bu, tıklanabilir bir düğme oluşturur, ancak düğmenin arka planı olarak bir resim kullanabiliriz.

Misal

Üç tür düğme içeren bir form için örnek HTML kodu:

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Gizli Form Denetimleri

Gizli form kontrolleri, daha sonra sunucuya gönderilebilecek olan sayfanın içindeki verileri gizlemek için kullanılır. Bu kontrol kodun içinde gizlenir ve gerçek sayfada görünmez. Örneğin, geçerli sayfa numarasını korumak için aşağıdaki gizli form kullanılmaktadır. Bir kullanıcı bir sonraki sayfayı tıkladığında, gizli kontrol değeri web sunucusuna gönderilecek ve orada geçirilen geçerli sayfaya göre bir sonraki sayfanın görüntüleneceğine karar verecektir.

Misal

Gizli kontrolün kullanımını gösteren örnek HTML kodu -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Bazen web sayfanıza müzik veya video eklemeniz gerekir. Web sitenize video veya ses eklemenin en kolay yolu, adı verilen özel HTML etiketini eklemektir.<embed>. Bu etiket, tarayıcının kendisinin, tarayıcının <embed> etiketini ve verilen medya türünü desteklemesi sağlanan multimedya için kontroller içermesine neden olur.

Ayrıca bir <noembed><embed> etiketini tanımayan tarayıcılar için etiket. Örneğin, seçtiğiniz bir filmi görüntülemek için <embed> kullanabilirsiniz ve<noembed> Tarayıcı <embed> etiketini desteklemiyorsa tek bir JPG resmi görüntülemek için.

Misal

Gömülü bir midi dosyasını oynatmak için basit bir örnek:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

<embed> Etiketi Nitelikleri

Note-The hizalama ve autostart nitelikleri HTML5 kullanımdan kaldırılmış. Bu nitelikleri kullanmayın.

Sr.No	Öznitelik ve Açıklama
1	align Nesnenin nasıl hizalanacağını belirler. Ortaya, sola veya sağa ayarlanabilir .
2	autostart Bu boole özelliği, medyanın otomatik olarak başlaması gerekip gerekmediğini belirtir. Doğru veya yanlış olarak ayarlayabilirsiniz.
3	loop Sesin sürekli olarak mı (döngüyü doğru olarak ayarla), belirli sayıda (pozitif bir değer) mi yoksa hiç mi (yanlış) çalınması gerektiğini belirtir
4	playcount Sesin kaç defa çalınacağını belirtir. IE kullanıyorsanız , bu döngü için alternatif bir seçenektir .
5	hidden Multimedya nesnesinin sayfada gösterilip gösterilmeyeceğini belirtir. Yanlış bir değer hayır anlamına gelir ve doğru değerler evet anlamına gelir.
6	width Nesnenin piksel cinsinden genişliği
7	height Nesnenin piksel cinsinden yüksekliği
8	name Nesneye referans vermek için kullanılan bir isim.
9	src Yerleştirilecek nesnenin URL'si.
10	volume Sesin seviyesini kontrol eder. 0 (kapalı) ile 100 (tam ses) arasında olabilir.

Desteklenen Video Türleri

Flash filmler (.swf), AVI'ler (.avi) ve MOV'un (.mov) dosya türleri gibi çeşitli ortam türlerini gömme etiketinde kullanabilirsiniz.

.swf files - Macromedia'nın Flash programı tarafından oluşturulan dosya türleridir.
.wmv files - Microsoft'un Window Media Video dosya türleridir.
.mov files - Apple'ın Quick Time Movie formatıdır.
.mpeg files - Hareketli Resimler Uzman Grubu tarafından oluşturulan film dosyalarıdır.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Arka Plan Sesi

HTML kullanabilirsiniz <bgsound>film müziğini web sayfanızın arka planında çalmak için etiketi. Bu etiket yalnızca Internet Explorer tarafından desteklenir ve diğer tarayıcıların çoğu bu etiketi dikkate almaz. Ana belge kullanıcı tarafından ilk indirildiğinde ve görüntülendiğinde bir ses dosyası indirir ve çalar. Arka plan ses dosyası da kullanıcı tarayıcıyı her yenilediğinde yeniden oynatılacaktır.

Note- bgsound etiketi kullanımdan kaldırıldı ve HTML'nin gelecekteki bir sürümünde kaldırılması bekleniyor. Bu yüzden kullanılmamaları gerekir, ses eklemek için HTML5 etiketi ses kullanılması önerilir. Ancak yine de öğrenme amacıyla, bu bölüm bgsound etiketini ayrıntılı olarak açıklayacaktır.

Bu etiket, loop ve src olmak üzere yalnızca iki niteliğe sahiptir . Bu niteliklerin her ikisi de yukarıda açıklananla aynı anlama sahiptir.

İşte küçük bir midi dosyasını oynatmak için basit bir örnek -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

Bu, boş ekranı oluşturacaktır. Bu etiket herhangi bir bileşeni göstermez ve gizli kalır.

Internet Explorer ayrıca yalnızca üç farklı ses biçimi dosyasını işleyebilir - PC'ler için yerel biçim olan wav; au, çoğu Unix iş istasyonu için yerel format; ve MIDI, evrensel bir müzik kodlama şeması.

HTML Nesne etiketi

HTML 4, <object>genel nesne dahil etmeye yönelik çok amaçlı bir çözüm sunan öğe. <object> öğesi, HTML yazarlarının bir nesnenin bir kullanıcı aracısı tarafından sunumu için gerekli olan her şeyi belirtmesine izin verir.

İşte birkaç örnek -

Örnek 1

Bir HTML belgesini bir HTML belgesinin içine aşağıdaki şekilde gömebilirsiniz -

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

Tarayıcı, nesne etiketini desteklemiyorsa, burada alt özniteliği devreye girecektir .

Örnek - 2

Bir PDF belgesini bir HTML belgesine aşağıdaki gibi gömebilirsiniz -

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

Örnek - 3

Belge ile ilgili bazı parametreleri belirtebilirsiniz. <param>etiket. İşte bir wav dosyasını yerleştirmek için bir örnek -

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

Örnek - 4

Aşağıdaki gibi bir flash belge ekleyebilirsiniz -

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

Örnek - 5

HTML belgesine aşağıdaki gibi bir java uygulaması ekleyebilirsiniz -

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

classidözniteliği, hangi Java Eklentisi sürümünün kullanılacağını tanımlar. JRE'nin indirilip indirilmeyeceğini ve nasıl indirileceğini belirtmek için isteğe bağlı kod tabanı özniteliğini kullanabilirsiniz.

Bir HTML seçim çerçevesi, ayarlara bağlı olarak web sayfanızda yatay veya dikey olarak görüntülenen kayan bir metin parçasıdır. Bu, HTML <marquees> etiketi kullanılarak oluşturulur.

Note- <marquee> etiketi HTML5'te kullanımdan kaldırıldı. Bu öğeyi kullanmayın, bunun yerine bu tür efektler oluşturmak için JavaScript ve CSS kullanabilirsiniz.

Sözdizimi

HTML <marquee> etiketini kullanmak için basit bir sözdizimi aşağıdaki gibidir -

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>

<marquee> Etiketi Nitelikleri

<marquee> etiketiyle kullanılabilecek önemli özniteliklerin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	width Bu, seçim çerçevesinin genişliğini belirtir. Bu,% 10 veya% 20 gibi bir değer olabilir.
2	height Bu, seçim çerçevesinin yüksekliğini belirtir. Bu,% 10 veya% 20 gibi bir değer olabilir.
3	direction Bu, seçim çerçevesinin kaydırılması gereken yönü belirtir. Bu, yukarı, aşağı, sol veya sağ gibi bir değer olabilir .
4	behavior Bu, seçim çerçevesinin kaydırma türünü belirtir. Bunun kaydırma, kaydırma ve alternatif gibi bir değeri olabilir .
5	scrolldelay Bu, her atlama arasında ne kadar gecikme olacağını belirtir. Bunun 10 vb. Gibi bir değeri olacaktır.
6	scrollamount Bu, kayan yazı metninin hızını belirtir. Bunun 10 vb. Gibi bir değeri olabilir.
7	loop Bu, kaç kez döngü yapılacağını belirtir. Varsayılan değer INFINITE'tir, bu da seçim çerçevesinin sonsuz döngüye girdiği anlamına gelir.
8	bgcolor Bu, renk adı veya rengin onaltılık değeri açısından arka plan rengini belirtir.
9	hspace Bu, seçim çerçevesinin etrafındaki yatay boşluğu belirtir. Bu,% 10 veya% 20 gibi bir değer olabilir.
10	vspace Bu, seçim çerçevesinin etrafındaki dikey boşluğu belirtir. Bu,% 10 veya% 20 gibi bir değer olabilir.

Aşağıda, kayan yazı etiketinin kullanımını gösteren birkaç örnek bulunmaktadır.

Örnekler - 1

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Örnekler - 2

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee width = "50%">This example will take only 50% width</marquee>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Örnekler - 3

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>

   <body>
      <marquee direction = "right">This text will scroll from left to right</marquee>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Örnekler - 4

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee direction = "up">This text will scroll from bottom to up</marquee>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Tipik bir HTML belgesinin aşağıdaki yapıya sahip olacağını öğrendik -

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

Bu bölüm, HTML <head> etiketi ile temsil edilen başlık kısmı hakkında biraz daha detay verecektir. <head> etiketi, <title>, <meta>, <link>, <base>, <style>, <script> ve <noscript> etiketleri gibi çeşitli önemli etiketlerin bulunduğu bir kapsayıcıdır.

HTML <title> Etiketi

HTML <title> etiketi, HTML belgesinin başlığını belirtmek için kullanılır. Aşağıda, bir HTML belgesine başlık vermek için bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

HTML <meta> Etiketi

HTML <meta> etiketi, HTML belgesi hakkında sayfa son kullanma tarihi, sayfa yazarı, anahtar kelime listesi, sayfa açıklaması vb. Hakkında bilgiler içeren meta veriler sağlamak için kullanılır.

Aşağıda, bir HTML belgesi içindeki <meta> etiketinin önemli kullanımlarından birkaçı verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML <base> Etiketi

HTML <base> etiketi, bir sayfadaki tüm göreli URL'lerin temel URL'sini belirtmek için kullanılır; bu, diğer tüm URL'lerin, belirli bir öğe için bulunurken temel URL'ye birleştirileceği anlamına gelir.

Örneğin, verilen tüm sayfalar ve resimler, http://www.tutorialspoint.com/ dizini temel URL ile verilen URL'lerin önüne eklenerek aranacaktır -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Ancak temel URL'yi başka bir şeye değiştirirseniz, örneğin, temel URL http://www.tutorialspoint.com/home ise, resim ve verilen diğer bağlantılar http://www.tutorialspoint.com/home/images gibi olur. /logo.png ve http://www.tutorialspoint.com/html/index.htm

HTML <link> Etiketi

HTML <link> etiketi, geçerli belge ile harici kaynak arasındaki ilişkileri belirtmek için kullanılır. Aşağıda, içinde bulunan harici bir stil sayfası dosyasını bağlamak için bir örnek yer almaktadır.css web kökü içindeki alt dizin -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML <style> Etiketi

HTML <style> etiketi, geçerli HTML belgesinin stil sayfasını belirtmek için kullanılır. Aşağıda, <style> etiketi içinde birkaç stil sayfası kuralını tanımlamak için bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Note- CSS işleri, nazik ayrı bir öğretici kullanılabilir kontrol hakkında bilgi edinmek için css

HTML <script> Etiketi

HTML <script> etiketi, harici komut dosyası dosyasını dahil etmek veya HTML belgesi için dahili komut dosyasını tanımlamak için kullanılır. Aşağıda, basit bir JavaScript işlevi tanımlamak için JavaScript kullandığımız bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

Bu, verilen düğmeye tıklamayı deneyebileceğiniz aşağıdaki sonucu üretecektir -

Note- JavaScript'in nasıl çalıştığını öğrenmek için, lütfen javascript'te bulunan ayrı bir öğreticiye bakın

Basamaklı Stil Sayfaları (CSS) belgelerin ekranlarda, baskıda nasıl sunulduğunu veya belki de nasıl telaffuz edildiğini açıklar. W3C, konsorsiyum 1994'te kurulduğundan beri Web'de stil sayfalarının kullanımını aktif olarak teşvik etti.

Basamaklı Stil Sayfaları (CSS), HTML etiketleri için çeşitli nitelikleri belirtmek için kolay ve etkili alternatifler sağlar. CSS kullanarak, belirli bir HTML öğesi için bir dizi stil özelliği belirtebilirsiniz. Her özelliğin iki nokta üst üste (:) ile ayrılmış bir adı ve değeri vardır. Her özellik bildirimi noktalı virgülle (;) ayrılır.

Misal

İlk olarak, metin rengini ve yazı tipi boyutunu belirtmek için <font> etiketini ve ilişkili nitelikleri kullanan bir HTML belgesi örneğini ele alalım -

Note- Yazı tipi etiketi kullanımdan kaldırıldı ve HTML'nin gelecekteki bir sürümünde kaldırılması gerekiyor. Bu yüzden kullanılmamaları gerekir, yazı tiplerinizi değiştirmek için CSS stillerini kullanmanız önerilir. Yine de öğrenme amacıyla, bu bölüm yazı tipi etiketini kullanan bir örnekle çalışacaktır.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Yukarıdaki örneği Style Sheet yardımıyla aşağıdaki gibi yeniden yazabiliriz -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

CSS'yi HTML belgenizde üç şekilde kullanabilirsiniz -

External Style Sheet - Stil sayfası kurallarını ayrı bir .css dosyasında tanımlayın ve ardından bu dosyayı HTML <link> etiketini kullanarak HTML belgenize dahil edin.
Internal Style Sheet - <style> etiketini kullanarak HTML belgesinin başlık bölümünde stil sayfası kurallarını tanımlayın.
Inline Style Sheet - Stil sayfası kurallarını doğrudan HTML öğeleriyle birlikte tanımlayın: style öznitelik.

Her üç durumu da uygun örnekler yardımıyla tek tek görelim.

Harici Stil Sayfası

Stil sayfanızı çeşitli sayfalarda kullanmanız gerekiyorsa, her zaman ayrı bir dosyada ortak bir stil sayfası tanımlamanız önerilir. Basamaklı bir stil sayfası dosyası şu uzantıya sahip olacaktır:.css ve <link> etiketi kullanılarak HTML dosyalarına dahil edilecektir.

Misal

Bir stil sayfası dosyası tanımladığımızı düşünün style.css aşağıdaki kuralları olan -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Burada, HTML etiketleri için tanımlanan üç farklı sınıfa uygulanabilecek üç CSS kuralı tanımladık. CSS çalışırken öğreneceğiniz için bu kuralların nasıl tanımlandığı konusunda endişelenmemenizi öneririm. Şimdi aşağıdaki HTML belgemizde yukarıdaki harici CSS dosyasını kullanalım -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Dahili Stil Sayfası

Stil Sayfası kurallarını yalnızca tek bir belgeye uygulamak istiyorsanız, bu kuralları <style> etiketini kullanarak HTML belgesinin başlık bölümüne dahil edebilirsiniz.

Dahili stil sayfasında tanımlanan kurallar, harici bir CSS dosyasında tanımlanan kuralları geçersiz kılar.

Misal

Yukarıdaki örneği bir kez daha yazalım, ama burada stil sayfası kurallarını aynı HTML belgesine <style> etiketini kullanarak yazacağız -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Satır İçi Stil Sayfası

Stil sayfası kurallarını doğrudan herhangi bir HTML öğesine uygulayabilirsiniz. styleilgili etiketin özelliği. Bu, yalnızca herhangi bir HTML öğesinde belirli bir değişiklik yapmak istediğinizde yapılmalıdır.

Öğe ile satır içinde tanımlanan kurallar, harici bir CSS dosyasında tanımlanan kuralları ve <style> öğesinde tanımlanan kuralları geçersiz kılar.

Misal

Yukarıdaki örneği bir kez daha yazalım, ancak burada stil sayfası kurallarını HTML öğeleriyle birlikte yazacağız. style bu unsurların niteliği.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Bu, aşağıdaki sonucu verecektir -

Bir scriptweb sitenize etkileşim katabilecek küçük bir program parçasıdır. Örneğin, bir komut dosyası bir açılır uyarı kutusu mesajı oluşturabilir veya bir açılır menü sağlayabilir. Bu komut dosyası JavaScript veya VBScript kullanılarak yazılabilir.

Komut dosyası dillerinden herhangi birini kullanarak olay işleyicileri adı verilen çeşitli küçük işlevler yazabilir ve sonra bu işlevleri HTML niteliklerini kullanarak tetikleyebilirsiniz.

Sadece bugünlerde JavaScript ve ilgili çerçeveler web geliştiricilerinin çoğu tarafından kullanılmaktadır, VBScript çeşitli büyük tarayıcılar tarafından desteklenmemektedir.

JavaScript kodunu ayrı bir dosyada tutabilir ve ardından gerektiği yere ekleyebilir veya HTML belgesinin içinde işlevselliği tanımlayabilirsiniz. Her iki durumu da birer birer uygun örneklerle görelim.

Harici JavaScript

Çeşitli HTML belgelerinde kullanılacak bir işlev tanımlayacaksanız, bu işlevi ayrı bir JavaScript dosyasında tutmak ve ardından bu dosyayı HTML belgelerinize dahil etmek daha iyidir. Bir JavaScript dosyasının uzantısı şu şekilde olacaktır:.js ve <script> etiketi kullanılarak HTML dosyalarına dahil edilecektir.

Misal

JavaScript kullanarak küçük bir işlev tanımladığımızı düşünün. script.js aşağıdaki kodu olan -

function Hello() {
   alert("Hello, World");
}

Şimdi aşağıdaki HTML belgemizde yukarıdaki harici JavaScript dosyasını kullanalım -

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Bu, verilen düğmeye tıklamayı deneyebileceğiniz aşağıdaki sonucu üretecektir -

Dahili Komut Dosyası

Komut kodunuzu doğrudan HTML belgenize yazabilirsiniz. Genellikle <script> etiketini kullanarak komut dosyası kodunu belgenin başlığında tutarız, aksi takdirde herhangi bir kısıtlama yoktur ve kaynak kodunuzu belgenin herhangi bir yerine, ancak <script> etiketinin içine koyabilirsiniz.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Bu, verilen düğmeye tıklamayı deneyebileceğiniz aşağıdaki sonucu üretecektir -

Etkinlik sahipleri

Olay işleyicileri, herhangi bir fare veya klavye olayına karşı çağrılabilen basit tanımlanmış işlevlerden başka bir şey değildir. İş mantığınızı, tek bir satır kodundan 1000'lere kadar değişebilen olay işleyicinizin içinde tanımlayabilirsiniz.

Aşağıdaki örnek, bir olay işleyicisinin nasıl yazılacağını açıklamaktadır. Dokümanın başlığına basit bir EventHandler () işlevi yazalım . Herhangi bir kullanıcı fareyi bir paragrafın üzerine getirdiğinde bu işlevi çağıracağız.

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

Şimdi Bu, aşağıdaki sonucu verecektir. Farenizi bu çizginin üzerine getirin ve sonucu görün -

Komut Dosyalarını Eski Tarayıcılardan Gizle

Günümüzde tarayıcıların çoğu (hepsi değilse de) JavaScript'i desteklese de, bazı eski tarayıcılar hala desteklemiyor. Bir tarayıcı JavaScript'i desteklemiyorsa, komut dosyanızı çalıştırmak yerine, kodu kullanıcıya görüntüler. Bunu önlemek için, aşağıda gösterildiği gibi komut dosyasının etrafına HTML yorumları yerleştirebilirsiniz.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript> Öğesi

Tarayıcıları komut dosyalarını desteklemeyen kullanıcılara ve tarayıcılarında komut dosyası seçeneğini devre dışı bırakan kullanıcılara da alternatif bilgiler sağlayabilirsiniz. Bunu kullanarak yapabilirsiniz<noscript> etiket.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

Varsayılan Komut Dosyası Dili

Birden çok komut dosyası ekleyeceğiniz ve nihayetinde birden çok <script> etiketi kullanacağınız bir durum olabilir. Tüm komut dosyası etiketleriniz için varsayılan bir komut dosyası dili belirtebilirsiniz . Bu sizi, sayfada bir komut dosyası etiketi her kullandığınızda dili belirlemekten kurtarır. Örnek aşağıdadır -

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

Komut dosyası etiketinde bir dil belirterek varsayılanı yine de geçersiz kılabileceğinizi unutmayın.

Web sitenize daha iyi bakmak için bir web sayfası düzeni çok önemlidir. Bir web sitesinin düzenini harika bir görünüm ve his ile tasarlamak oldukça zaman alır.

Günümüzde tüm modern web siteleri, duyarlı ve dinamik web siteleri oluşturmak için CSS ve JavaScript tabanlı çerçeve kullanıyor, ancak basit HTML tablolarını veya diğer biçimlendirme etiketleriyle birlikte bölme etiketlerini kullanarak iyi bir düzen oluşturabilirsiniz. Bu bölüm, saf HTML ve özniteliklerini kullanarak web sayfanız için basit ama çalışan bir mizanpajın nasıl oluşturulacağına dair size birkaç örnek verecektir.

HTML Düzeni - Tabloları Kullanma

Düzen oluşturmanın en basit ve en popüler yolu HTML <table> etiketini kullanmaktır. Bu tablolar sütunlar ve sıralar halinde düzenlenmiştir, böylece bu satırları ve sütunları istediğiniz şekilde kullanabilirsiniz.

Misal

Örneğin, aşağıdaki HTML düzeni örneği 3 satırlı ve 2 sütunlu bir tablo kullanılarak elde edilir, ancak üstbilgi ve altbilgi sütunu her iki sütunu da colspan özelliğini kullanarak kapsar -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Birden Çok Sütun Düzeni - Tabloları Kullanma

Web sayfanızı, web içeriğinizi birden çok sayfaya yerleştirecek şekilde tasarlayabilirsiniz. İçeriğinizi orta sütunda tutabilir ve menüyü kullanmak için sol sütunu, reklam veya diğer bazı şeyleri koymak için sağ sütunu kullanabilirsiniz. Bu düzen, tutorialspoint.com web sitemizdekine çok benzer olacaktır.

Misal

İşte üç sütun düzeni oluşturmak için bir örnek -

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

HTML Düzenleri - DIV, SPAN kullanma

<div> öğesi, HTML öğelerini gruplamak için kullanılan blok düzeyinde bir öğedir. <div> etiketi blok düzeyinde bir öğe iken, HTML <span> öğesi, öğeleri satır içi düzeyde gruplamak için kullanılır.

HTML tabloları ile oldukça güzel düzenler elde edebilmemize rağmen, tablolar gerçekten bir düzen aracı olarak tasarlanmamıştır. Tablolar, tablo şeklindeki verileri sunmak için daha uygundur.

Note - Bu örnek Basamaklı Stil Sayfasını (CSS) kullanır, bu nedenle bu örneği anlamadan önce CSS'nin nasıl çalıştığını daha iyi anlamanız gerekir.

Misal

Burada, önceki örnekte <table> etiketini kullanarak ne elde ettiyseniz, CSS ile birlikte <div> etiketini kullanarak aynı sonucu elde etmeye çalışacağız.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 Tutorialspoint.com
            </center>
         </div>
			
      </div>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

CSS ile birlikte DIV, SPAN kullanarak daha iyi düzen oluşturabilirsiniz. CSS hakkında daha fazla bilgi için lütfen CSS Eğitimine bakın.