• Web sitemizin içeriğine ve tüm hizmetlerimize erişim sağlamak için Web sitemize kayıt olmalı ya da giriş yapmalısınız. Web sitemize üye olmak tamamen ücretsizdir.
  • Sohbetokey.com ile canlı okey oynamaya ne dersin? Hem sohbet et, hem mobil okey oyna!
  • Soru mu? Sorun mu? ''Bir Sorum Var?'' sistemimiz aktiftir. Paylaşın beraber çözüm üretelim.

HTML'e Giriş

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
HTML'e Giriş



HTML dosyası nedir?


  • HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.
  • Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir
  • Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
  • Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
  • Bir HTML dosyası basit bir text editör ile oluşturulabilir.
Denemek İster misiniz?

Eğer Windows kullanıyorsanız not defterini açın.
Eğer MAC kullanıyorsanız SimpleText programını açın.
Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır!
Aşağıdaki metini açtığınız editör içerisine yazın:
<html> <head> <title>Sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>Bu metin koyu</b> </body> </html> Dosyayı "sayfam.htm" olarak kaydedin.
Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır.
Örneğin Açıklaması

HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler.
<head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez.
<title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.
<body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.
<b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir.
HTML Editörleri Hakkında Not:

HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is what you get), FrontPage veya Dreamweaver ile de hazırlayabilirsiniz.
Bununla beraber, eğer profesyonel anlamda HTML çalışmak istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye ederiz.
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
HTML'e Giriş

HTML, Hyper Text Markup Language ifadesinden oluşturulmuş bir İngilizce kısaltmadır ve Türkçe'ye "Hiper Metin İşaretleme Dili" şeklinde çevrilebilir. Bir işaretleme dilinin temel işlevi, bir belge içindeki metnin (text) yapısını, biçimini ve genel görünümünü tanımlayacak kuralları içermesi ve bunun uygulanmasına olanak vermesidir.
İşaretleme dilinin kuralları belgeye yüklendikten sonra doğal olarak belge, bu kuralları okuyup nasıl uygulayacağını bilen bir bilgisayar programı tarafından işlenmelidir. Burada oluşturulan HTML içerikleri tarayıcılar tarafından anlamlaştırılarak, gördüğümüz web sitelerinin temelini oluştururlar.
HTML öğrenebilmeniz için herhangi bir metin editörünü kullanmanız yeterlidir. Bu noktada size Sublime Text, Brackets ve Notepad++ gibi bazı başarılı metin editörlerini önerebiliriz. Bu editörler, HTML kodlarını yazarak bir web sitesi inşa etmek için kullanılmaktadır. Bunun dışında, görsel olarak da bir web sitesi oluşturmak mümkündür. Bunun için Microsoft Expression Web, Adobe Dreamweaver ve BlueGriffon gibi farklı araçlar kullanılabilir.
Bu tür uygulamalar, görsel olarak yapmış olduğunuz işlemleri, arkaplanda HTML koduna dönüştürmektedir. Dilerseniz, Web Programlama kursunu tamamladıktan sonra, WYSIWYG uygulamaları kullanarak web sitenizi geliştirebilirsiniz. Ancak; HTML kodlamayı iyi bir şekilde öğrenmek için ilk etapta bu uygulamaları kullanmamanızı, HTML kod vurgulama özelliğine sahip metin editörleri kullanmanızı tavsiye ederiz.
HTML dosyalarının çalıştırılması için oluşturduğunuz dosyaların sonuna .html uzantısı eklemeniz ve bir internet tarayıcısı üzerinde açmanız yeterli olacaktır. Böylelikle yazmış olduğunuz HTML kodları ile oluşturduğunuz web sitesini görüntüleyebilirsiniz.
HTML derslerine başlamadan önce, az önce anlattığımız olayı basit bir örnekle gösterelim:
Öncelikle istediğiniz bir metin editörünü açın ve aşağıdaki kodları yazın.




<html>
<head>
<meta charset="utf-8">
</head>
<body>
Merhaba Megaforum Ailesi!
</body>
</html>




Daha sonra oluşturduğunuz bu dosyayı kaydedin. Açılan diyalog penceresinde, dosya isminin sonuna .html uzantısını ekleyin. Böylelikle dosyanın bir metin dosyası değil, html dosyası olduğunu belirtmiş olduk.


Oluşturduğunuz html dosyasına çift tıklayın ve favori web tarayıcınızda çalıştırın.


Sürüm
Yıl HTML
1991
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML5
2014
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
Bir HTML belgesi etiket dediğimiz bileşenlerden oluşur. HTML yapısındaki temel bileşen bir elemandır. Elemanları anlatmak için her gün gördüğünüz başlıklar, paragraflar, listeler birer elemandır. Etiketler kullanılarak bu elemanlar birbirinden ayrılarak mantıklı hale gelirler. HTML etiketleri yapısı ise çok basittir. < (küçüktür işareti) etiket ve > (büyüktür işareti) işaretiyle belirtilir. Örneğin, paragraf belirtmek için <p> etiketini kullanırız. Paragraf etiketini kapatmak istediğimizdeyse < işareti sonrasında / işareti koymak yeterlidir.
Örneklemek gerekirse,


<p> paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf </p>


HTML dili büyük küçük ayrımı yapan bir dil değildir. Bir etiketi girerken büyük, küçük ya da bir kısmı büyük bir kısmı küçük girebilirsiniz (XHTML için durum farklıdır. Tüm etiketlerin küçük harflerle yazılması gerekir) ve bu herhangi bir değişime sebep olmaz. Ancak; HTML sayfası içindeki tüm kodların küçük harfle yazılması, geliştiriciler arasında kabul görmüş bir kuraldır. Dolayısıyla etiketleri küçük harfle yazmanız tavsiye edilir.
Bir HTML belgesi başlıca iki kısımdan oluşur:

  1. Baş (HEAD) metni
  2. Gövde (BODY) metni
Baş metni, sayfaya ait başlıkla ilişkili ifadeleri içerir.
Gövde metni ise, HTML koduna ait asıl metni içerir. Bu metin,

  • Paragraflar,
  • Listeler ve
  • Diğer elemanlardan oluşur.
Genel olarak buraya kadar anlatılanları bir çatı altında toplayacak olursak:

  • Tüm HTML belgeleri tip deklerasyonu ile başlamak zorundadır: <! DOCTYPE html>
  • HTML belgeleri, <html> etiketi ile başlar ve </html> etiketi ile biter.
  • HTML belgesi içindeki görüntülenen kısım ise <body> ve </body> etiketleri arasında yer alır.
Aşağıda basit bir HTML dosyası örneğini bulabilirsiniz.


<!DOCTYPE html>
<html>
<head>
<title>Basit bir HTML metni başlığı</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML, Web'in dilidir.</h1>
<P>Bu metnin ilk paragrafıdır.</p>
<p>Bu da ikinci paragraftır.</p>
</body>
</html>




Bir önceki dersimizde temel bir HTML dosyasını görmüştük. Şimdiyse daha kapsamlı bir kod bloğu karşımızda. Şimdilik ilk olarak DOCTYPE'ın ne olduğunu inceleyelim:


<!DOCTYPE> deklerasyonu

DOCTYPE deklerasyonu, web tarayıcıların bir web sitesini doğru bir şekilde göstermesini sağlamaktadır. Web üzerinde farklı belge tipleri bulunmaktadır:
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
HTML etiketi

HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir. Dosya adındaki .html uzantısı ise bu dosyanın bir HTML belgesi olduğunu belirtir.


HEAD etiketi

Bir HTML belgesinin ilk kısmını belirler. İçinde TITLE elemanının bulunması zorunludur. Belgenin başlığını TITLE elemanı belirler.
Aşağıdaki örnekteki HTML kodunun HEAD kısmına bakalım:


<html>
<head>
<title>BASİT BİR HTML METNİ</title>
</head>
</html>


Buradaki <TITLE> ve </TITLE> ifadeleri arasındaki BASİT BİR HTML METNİ ifadesi aşağıda gördüğünüz gibi sayfanın başlığı olarak görüntülenmektedir:


TITLE etiketi

TITLE etiketi yardımıyla oluşturduğunuz web sayfasının başlığını belirleyebilirsiniz. Bu başlık, yukarıda görüldüğü gibi, başlık çubuğu üzerinde görüntülenecektir.
Başlık içeriği, sayfanın içeriği ve işlevi ile uyumlu olmalıdır. Sayfayı tanımlayıcı nitelikte ve kısa olmalıdır.

META etiketi

Meta etiketiyle sayfanızın bir tanımını yapabilir ve sayfa içeriğini uygun anahtar sözcüklerle tanımlayabilirsiniz.
Bazı önemli meta etiketleri ve açıklamaları şu şekildedir:
Keywords: Sitenizin içeriğini oluşturan kelimelerin bulunduğu etikettir.




<html>
<head>
<title>BİLGİSAYAR DİLLERİ</title>
<meta name="keywords" CONTENT="bilgisayar dilleri, programlama dilleri, yazılım">
</head>
</html>


Description: Bu etiket site hakkında bilgi veren temel etiketlerden biridir.


<html>
<head>
<title>BİLGİSAYAR DİLLERİ</title>
<meta name="description" content="Sitenizin içeriği hakkında geniş bilgi">
</head>
</html>


Author: Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.


<html>
<head>
<title>BİLGİSAYAR DİLLERİ</title>
<meta name="Author" content="Adınız, E-Posta Adresiniz">
</head>
</html>


META deyimi yardımıyla sayfanın karakter kümesini de tanımlayabilirsiniz.
Örneğimizi birlikte inceleyelim:


<html>
<head>
<title>BİLGİSAYAR DİLLERİ</title>
<meta http-equiv="Content-type" Content="Text/html";charset="UTF8">
</head>
</html>


Tüm meta etiketleri <head> .. </head> kodları arasına yazılır.


BODY etiketi
HTML belgenizin ikinci ve en uzun parçası BODY kısmıdır. Belgenizin tüm içeriği burada yer alacaktır. Bir sonraki belgede açıklanan etiketlerin tümü BODY içinde yer alacaktır.
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
Başlıklar (Headings)

HTML metni içinde H1 ile H6 aralığında ölçeklendirilmiş 6 farklı düzeyde başlık kullanılabilir. Burada H1 en büyük başlığı, H6 ise en küçük başlığı simgelemektedir.
Bir başlık elemanının genel yazılış biçimi,
<Hx>Başlık Metni</Hx>
şeklindedir. Burada x, 1 ile 6 arasında bir tamsayıdır ve başlığın düzeyini belirlemektedir.
HTML kodunuz içinde başlık düzeylerini atlatmamaya dikkat ediniz. Örneğin H1 ile başlayıp daha sonra H4'ü kullanmayın. Düzeyler birbirini sırasıyla izlemesi, arama motorları tarafından daha iyi bir konumda endekslenmeniz için de önemlidir.


Paragraflar (Paragraphs)

Oluşturacağınız Web sayfası üzerine yerleştireceğiniz metni ayrı paragraflar şeklinde ifade etmek için <p> ve </p> etiketlerini kullanmalısınız.

Listeler (Lists)


HTML, çeşitli türlerde listelerin oluşturulabilmesine olanak sağlar. Bu liste türleri,

  1. Numaralanmamış liste
  2. Numaralanmış liste
  3. Tanım listesi
şeklindedir.

Numaralanmamış liste

Numaralanmamış listeyi oluşturmak için <ul> ve </ul> etiketleri kullanılır. Bu etiketler arasına liste elemanlarını yerleştirmek için <li> etiketi kullanılır. Bu etiketi izleyen yere liste elemanı yerleştirilmelidir. <li> etiketinin </li> etiketiyle kapatılması zorunlu değildir.
Örneğin, aşağıdaki HTML kodunu birlikte oluşturalım:




<html>
<head>
<title>BASİT BİR HTML METNİ</title>
</head>
<body>
<h3>Programlama Dilleri</h3>
<ul>
<li>Fortran</li>
<li>Cobol</li>
<li>Basic</li>
<li>Pascal</li>
<li>C/C++</li>
</ul>
</body>
</html>




Numaralanmış Listeler

Numaralanmış liste (numbered list ya da diğer adı ile ordered list (sıralanmış liste)) gerçekte numaralanmamış liste ile benzer yapıdadır. Tek fark, bu tip bir listede <ol> etiket 'ının kullanılmasıdır. Diğer bir fark ise çıktıda görülür. Liste elemanlarına otomatik olarak bir numara verilmektedir.
Aşağıdaki HTML kodunu oluşturunuz:


<html>
<head>
<title>BASİT BİR HTML METNİ</title>
</head>
<body>
<h3>Programlama Dilleri</h3>
<ol>
<li>Fortran</li>
<li>Cobol</li>
<li>Basic</li>
<li>Pascal</li>
<li>C/C++</li>
</ol>
</body>
</html>


İç İçe Listeler

Listeleri iç içe de kullanabilirsiniz. Hatta, tek bir liste kalemi içinde iç içe listeler içeren paragraflar da düzenleyebilirsiniz.
Örneğin, aşağıdaki HTML kodunda dıştaki liste elemanları şehirlerdir. Her şehre ait ilçeler ise liste elemanı içinde yeni bir liste düzenlenerek belirtilmiştir




<html>
<head>
<title>TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER</title>
</head>
<body>
<h3>TÜRKİYE-ŞEHİRLER</h3>
<ul>
<li>ISTANBUL'UN ÖNEMLİ İLÇELERİ</li>
<ul>
<li>Fatih</li>
<li>Bakırköy</li>
<li>Kadıköy</li>
</ul>
<li>ANKARA'NIN ÖNEMLİ İLÇELERİ</li>
<ul>
<li>Çankaya</li>
<li>Yenimahalle</li>
</ul>
</ul>
</body>
</html>




İç İçe Listeler

Listeleri iç içe de kullanabilirsiniz. Hatta, tek bir liste kalemi içinde iç içe listeler içeren paragraflar da düzenleyebilirsiniz.
Örneğin, aşağıdaki HTML kodunda dıştaki liste elemanları şehirlerdir. Her şehre ait ilçeler ise liste elemanı içinde yeni bir liste düzenlenerek belirtilmiştir.


<html>
<head>
<title>TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER</title>
</head>
<body>
<h3>TÜRKİYE-ŞEHİRLER</h3>
<ul>
<li>ISTANBUL'UN ÖNEMLİ İLÇELERİ</li>
<ul>
<li>Fatih</li>
<li>Bakırköy</li>
<li>Kadıköy</li>
</ul>
<li>ANKARA'NIN ÖNEMLİ İLÇELERİ</li>
<ul>
<li>Çankaya</li>
<li>Yenimahalle</li>
</ul>
</ul>
</body>
</html>
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
<pre> etiketi

Sabit genişlikli bir yazıtipi içinde bir metin oluşturmak istediğiniz takdirde, HTML'in <pre> </pre> etiketini kullanabilirsiniz. pre terimi, İngilizce preformatted (önceden biçimlendirilmiş) sözcüğünden alınmıştır. Bu etiket ayrıca metin içindeki boşlukları, satır başlarını ve tab'ları da anlamlı hale getirir.
<pre> etiketi, width özelliğiyle birlikte kullanılarak bir satır içinde yer alabilecek en fazla karakter sayısı da belirlenebilir. <pre> </pre> etiketleri arasında hiperlinkler (hyperlink) kullanılabilir. Bununla birlikte, <pre></pre> etiketleri arasında, diğer etiketlerin kullanılmasından kaçınmak gerekir.
Aşağıdaki örnekte ülkeler ve nüfusları önceden belirlenmiş bir biçimde web sayfası üzerine yerleştirilmek isteniyor. HTML kodunda ilerde daha ayrıntılı olarak ele alacağımız hiperlink oluşturma ve bu bağlantı tıklandığı takdirde buna bağlı dosyayı ekranda görüntülemeyle ilişkili küçük bir örnek de yer almaktadır.
Aşağıdaki HTML kodu çağrılınca ekranda alt çizgili ve mavi renkte bir "DAHA FAZLA BİLGİ İÇİN" ifadesi belirecektir. Bu bir hiperlink'tir ve tıklandığında X.htm dosyası çağrılmaktadır.
<pre> etiketinin kullanımını hiperlink ile birlikte anlatan örneğimiz aşağıdadır:




<html>
<head>
<meta charset="UTF-8">
<title>ÜLKELER VE NÜFUSLARI</title>
</head>

<body>
<h3>TÜRKİYE-ŞEHİRLER</h3>
<h3>ÜLKELER VE NÜFUSLARI</h3>
<pre>
ÜLKE ADI NÜFUSU (MİLYON KİŞİ)
TÜRKİYE 65
AVUSTURYA 8
ABD 230
ALMANYA 80
<a href="X.htm">DAHA FAZLA BİLGİ İÇİN</a>
</pre>
</body>

</html>




Yukardaki sayfa ekrana geldiği zaman, fareyle DAHA FAZLA BİLGİ İÇİN hiperlinkini tıkladığınızda, X.htm adlı HTML dosyası çağırılacaktır.
Aşağıda ise, X.htm adlı HTML dosyasının içeriği görülmektedir:


<html>
<head>
<meta charset="UTF-8">
<title>ÜLKELER VE NÜFUSLARI</title>
</head>
<body>
<h3>TÜRKİYE-ŞEHİRLER</h3>
<h3>ÜLKELER VE NÜFUSLARI</h3>
<pre>
ÜLKE ADI NÜFUSU (MİLYON KİŞİ) KBMG($) KITA
TÜRKİYE 65 3100 AVRUPA-ASYA
AVUSTURYA 8 25000 AVRUPA
ABD 230 32000 KUZEY AMERİKA
ALMANYA 80 29000 AVRUPA
</body>
</html>


<br> etiketI

<br> etiketi, bulunduğu konumdan itibaren bir satırı sona erdirerek yeni bir satırın başına geçilmesini sağlar.
Aşağıdaki örnek kod incelenerek <br> etiketinin kullanımı görülebilir:


<html>
<head>
<meta charset="UTF-8">
<title>ÜLKELER VE NÜFUSLARI</title>
</head>
<body>
<h3>ÜLKELER VE NÜFUSLARI</h3>
<p>Avusturya 8 milyon nüfuslu bir Orta Avrupa <br>ülkesidir.
Almanca resmi dilidir. Doğası itibariyle <br>dünyanın en güzel
ülkelerinden biridir.</p>
<p>Macaristan bir diğer Orta Avrupa <br>ülkesidir.
Nüfusu 10 milyondur. Komşuları genelde dağlık <br>birer ülke
olmalarına karşın Macaristan düz ovaları ve atlarıyla ünlüdür.</p>
</body>
</html>



<hr> etiketi

<hr> etiketi, tarayıcı penceresinde yatay bir çizgi üretir. Bu çizginin uzunluğu kod içinde belirtilebilir.
<hr> etiketini nasıl kullanacağınızı aşağıdaki örneğimizle görelim:


<html>
<head>
<meta charset="UTF-8">
<title>ÜLKELER VE NÜFUSLARI</title>
</head>
<body>
<h3>ÜLKELER VE NÜFUSLARI</h3>
<p><hr>
Avusturya 8 milyon nüfuslu bir Orta Avrupa <br>ülkesidir.
Almanca resmi dilidir. Doğası itibariyle <br>dünyanın en güzel
ülkelerinden biridir.</p>
<p><hr>
Macaristan bir diğer Orta Avrupa <br>ülkesidir.
Nüfusu 10 milyondur. Komşuları genelde dağlık <br>birer ülke
olmalarına karşın Macaristan düz ovaları ve atlarıyla ünlüdür.</p>
</body>
</html>



<em> etiketi

Bir metnin istenilen kısmını belirgin hale getirmek için kullanılır.<em> ve </em> etiketleri arasındaki kısım tipik olarak italik biçimde görüntülenir.
<em> etiketinin nasıl kullanıldığını görmek için aşağıdaki örneği inceleyelim:


<html>
<head>
<meta charset="UTF-8">
<title>ALGORİTMA TANIMI</title>
</head>
<body>
<dfn>ALGORİTMA </dfn>
<p>Algoritma bir problemi çözmek için izlenmesi gereken<em> işlem adımları kümesidir.</em></p>
</body>
</html>


<s> ve <strike> etiketleri

Uygulandıkları metnin üzerine bir çizgi çizilmesini sağlarlar.
<s> ve <strike> kullanımı için aşağıdaki örneği inceleyebilirsiniz:


<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3> TEKNOKRATLAR </h3>
<s>Bütün mimarlar</s> yüksek, mühendisler de <br>
Bir sen kaldın<strike> alçak mimar</strike> ey Sinan Usta!<br>
Cemal Süreya
</body>
</html>


<strong> etiketi

İşaret edilen metni özellikle vurgulamak için kullanılır. Bu vurgulama bold (koyu) yazı karakteriyle gerçekleştirilir.
<strong> etiketinin kullanımını aşağıdaki örnekten görebilirsiniz.


<html>
<head>
<meta charset="UTF-8">
<title>ÖRNEKLER</title>
</head>
<body>
<h3> DİVAN EDEBİYATI </h3>
<dfn>FUZULİ</dfn><br><br>
<strong>Öyle sermestemki idrak etmezem dünya nedür<br>
Men kimem saki olan kimdür mey-i sahbah nedür</strong>
</body>
</html>




<u> etiketi

İşaretlediği metnin altına bir alt çizgi çekilmesini sağlar.
<u> etiketinin nasıl kullanıldığını aşağıdaki örnekten görebilirsiniz:


<html>
<head>
<meta charset="UTF-8">
<title>ÖRNEKLER</title>
</head>
<body>
<h3> ÖNCE <u>DÜRÜST</u> OLUNUZ </h3>
<h3>BUNUN DIŞINDAKİ <u>HER ŞEY İKİNCİ PLANDADIR</u> </h3>
</body>
</html>
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
<b> etiketi

<b> ve </b> etiketleri arasına alınan metin, koyu (bold) hale getirilir.
<b> etiketinin nasıl kullanılacağını aşağıdaki örnekten görebilirsiniz.


<html>
<head>
<title>Modern Türk Edebiyatı</title>
</head>
<body>
<h3>Attila İlhan</h3>
Ne <b>kadınlar sevdim</b>,zaten <b>yoktular</b><br>
Böyle bir sevmek <b>görülmemiştir</b>
</body>
</html>




<i> etiketi

<i> ve </i> etiketleri arasına alınan metin, italik (eğik yazı biçimi) hale getirilir.
<i> etiketinin nasıl kullanılacağını aşağıdaki örnekten görebilirsiniz:


<html>
<head>
<title>Modern Türk Edebiyatı</title>
</head>
<body>
<h3>Behçet Necatıgil</h3>
Her çocuk bir <b><i>nur topudur</i></b><br>
Paçavralar içine bile düşse<br>
Bir nur topudur<br>
<b><i>Dar çağlara</i></b> gelmese<br>
Değmese hoyrat ayaklar<br>
Çamurlara belenmese<br>
Her çocuk bir nur topudur
</body>
</html>


<u> etiketi

İşaretlediği metnin altına alt çizgi çekilmesini sağlar.
<u> etiketiyle ilgili örneğimiz aşağıdadır:


<html>
<head>
<title></title>
</head>
<body>
<h3>Önce <u>Dürüst</u> olunuz</h3>
<h3>Bunun dışındaki <u>Her şey ikinci plandadır</u></h3>
</body>
</html>
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
HTML'in önemli özelliklerinden biri, bir metin parçası ya da bir resim üzerinden başka bir belgeye bağlantı kurabilmesidir. Bu bağlantı, link adı verilen yapılar sayesinde gerçekleştirilmektedir. Bir resim ya da metnin rengi değiştirilerek ya da metin alt çizgili hale getirilerek bu resim ya da metnin bir hipermetin linki (hypertext link) ya da sadece link olduğu belirtilir.
Bir link oluşturmak için aşağıdaki adımlar izlenmelidir:

  • <a sembolü ile başlanır.
  • href="DosyaAdı" ifadesi yerleştirilir. Burada DosyaAdı parametresi, oluşturulan link yardımıyla çağrılacak olan dosyanın adıdır.
  • > sembolünü yerleştiriniz.
  • Linki oluşturacak metni giriniz.
  • </A> etiketiyle ifadeyi tamamlayınız.
<a href="http://megaforum.com">Anasayfa</a>




URL yapısı

URL, bir adres bilgisidir. Web tarayıcıya işaret edilen dosyanın nerede bulunduğunu gösterir. URL'ler, dosyaların Web ya da yerel sabit diskiniz üzerindeki yerini işaret eder.
Bir URL'in genel yapısı aşağıdaki gibi üç kısımdan oluşur:

  1. Erişilecek olan kaynağın tipi (Web, FTP vb.)
  2. Sunucunun adresi
  3. Dosyanın yeri
Bir URL'in yazılış biçimi aşağıdaki gibidir:


KaynakTipi://host.saha [:port]/yol/DosyaAdı


KaynakTipi parametresi aşağıdakilerden biri olabilir:

  1. file: Yerel sisteminizdeki bir dosya adıdır. Yerel erişim söz konusudur.
  2. ftp: Erişilecek kaynak bir FTP sunucusundaki dosyadır.
  3. http: Erişilecek kaynak World Wide Web üzerindeki bir sunucuda bulunan dosyadır.

Target özelliği

Target özelliği sayesinde, bağlanan web sitesinin nerede açılacağını belirleyebilirsiniz. Örneğin adresin yeni bir sayfada açılmasını sağlamak için aşağıdaki HTML kodunu girmek gerekir.


<a href="http://www.megaforum.com" target="_blank">MegaForum</a>


Aşağıdaki tabloda, target özelliği ile kullanabileceğiniz parametrelerin listesi yer almaktadır:
Özellik Tanım _blank sayfayı yeni bir pencere ya da sekmede açar. _self sayfayı aynı çerçevede açar. (öntanımlı olan özelliktir) _parent sayfayı bir üst çerçevede açar. _top sayfayı en üst çerçevede açar.
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
HTML'de Görseller



arayıcılar resim ve görüntü dosyalarını gösterebilir. İnternet'te yaygın olarak kullanılan dosya tipleri bitmap (.bmp), GIF, JPEG ve PNG şeklinde sıralanabilir. Bu eğitim içeriğinde web sayfanıza bir görseli nasıl ekleyeceğinizi göreceksiniz. Kod şablonumuz şu şekilde olacak:




<img src="resimkonumu/resimadi">


Görsel dosyalar boyut anlamında büyük oldukları için yüklenmeleri metinlere göre daha fazla süre alır.

GorselAdı parametresi, yüklenecek görselin URL bilgisini içermektedir. Örneğin;


<img src="https:// />pisadam-premium/images/logo.png/>




Görsellerin boyutunu ayarlamak

Görüntülenecek olan görselin boyutları HTML kodu içinde belirtilebilir. height parametresiyle görselin piksel cinsinden yüksekliğini ve width parametresiyle de piksel cinsinden genişliğini belirtebilirsiniz.


Görselin sayfa üzerindeki konumunun belirlenmesi

Görselin sayfa üzerindeki konumunun belirlenmesi için align parametresini kullanabilirsiniz. Sola yaslamak için left, sağa yaslamak için right, ortalamak için center, üst için top, alt için ise bottom şeklinde konum tanımlanız yeterli olacaktır.
Örneğin sırasıyla,
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
Bu eğitimde sizlere web sayfasında kullanacağınız görsellerin çerçeve ayarlarını nasıl tanımlayacağınızı, alternatif metin tanımlamayı ve görseli bir bağlantıya yönlendirmeyi anlatacağız.

Görselin çerçeve kalınlığının belirlenmesi

Web sayfası üzerinde görüntülenecek olan görselin çerçeve kalınlığı border= parametresiyle belirlenebilir. Oluşturulacak çerçevenin kalınlığını piksel cinsinden belirtebilirsiniz.
Örnek bir kullanımı aşağıdaki örnekte görebilirsiniz:


Alternatif metin belirlenmesi

Arama motorları sitenizdeki içerikleri ve görselleri de listeleyebilmektedir. Alternatif metin kullanımı arama motorlarından daha fazla ziyaretçinin gelmesini sağladığı gibi, sitenizi görme engellilerin de kullanabilmesi için de önemli bir avantaj sunar. Bu amaçla alt= parametresini kullanabilirsiniz. Alt parametresiyle belirtilen metin, görsel herhangi bir nedenle görüntülenemediği takdirde sayfaya aktarılır.
Standart web tarayıcılarda bu metin, fare imleçi resmin üzerine götürülünce ekranda görüntülenir.
Aşağıda örnek bir kullanımı görebilirsiniz:


<html>
<head>
<title>HTML resim uygulaması.</title>
</head>
<body>
<h3>HTML'de resim ve alternatif metin görüntüleme</h3>

<img src="https://megaforum.com" alt="Resim için alternatif metin" height="100" width="65">
</body>
</html>


Bir görseli hiperlink olarak kullanma

Bir görseli bir hipermetin link (bağlantı) oluşturmak için kullanılabilir. Bu sayede kullanıcılar bir görsele tıkladıklarında farklı bir adrese ya da o görselin daha büyük haline yönlendirilebilirler.
Bir bağlantıya dönüştürülmüş olan görsellerin etrafı öntanımlı olarak mavi renge boyanır.
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
Her HTML etiketi önceden tanımlanmış stil renklerini barındırır. Bu yazılar için siyah, arka plan için beyaz şeklindedir. Style özelliğini kullanarak dilediğiniz gibi renklendirme yapabilirsiniz.

Arka plan renginin değiştirilmesi

Arka plan rengini değiştirmek için bgcolor özelliğini kullanmalısınız. Aşağıdaki örnekte ayrıntılı şekilde görebilirsiniz:


<html>
<head>
<title></title>
</head>
<body bgcolor="red" >
<h3 align="center">Megaforum Ailesiİ</h3>
<h3 align="center">Sizleri Aramızda görmekten</h3>
<h3 align="center">Mutluluk Duyuyor</h3>
</body>
</html>




Kullanılan metin renklerinin değiştirilmesi

Kullanılan metin renklerinin değiştirilmesi için text sıfatını kullanmanız yeterlidir. Aşağıdaki örnekte kullanımını ayrıntılı şekilde görebilirsiniz:


<html>
<head>
<title></title>
</head>
<body text="red">
<h3 align="center">Megaforum Ailesi</h3>
<h3 align="center">Sizleri Aramızda görmekten</h3>
<h3 align="center">Mutluluk Duyuyor</h3>
</body>
</html>


<html>
<head>
<title></title>
</head>
<body bgcolor="red" text="#000051">
<h3 align="center">Megaforum Ailesi</h3>
<h3 align="center">Sizleri Aramızda görmekten</h3>
<h3 align="center">Mutluluk Duyuyor</h3>
</body>
</html>
 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.
Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği için öncelikle etiketlerin anlamlarını öğrenecek, sonrasında çeşitli parametleri kullanarak nasıl daha düzenli hale getirebileceğinizi göreceksiniz.


Tablo etiketleri

table etiketi:



<table> </table>


HTML kodu içinde bir tablo tanımlar. Şayet border parametresi tanımlanmışsa tarayıcı tabloyu çevre sınırları ile görüntüler.caption etiketi:

<caption> </caption>


tablonun başlığı için bir ifade tanımlar. Tablo başlığının öntanımlı konumu, tablonun üstünde ve ortalanmış durumdadır.tr etiketi:


<tr> </tr>


Tablo içinde bir tablo satırını tanımlar.th etiketi:


<th> </th>


bir tablo başlık hücresi tanımlar. Öntanımlı olarak bu hücredeki metin ortalanmış ve koyu (bold) renklidir.td etiketi:

<td></td>


Bir tablo hücresi tanımlar. Öntanımlı olarak bu hücre içindeki metin sola yanaşık ve düşeyde ortalanmış vaziyettedir.


Tablo özellikleri


  • Align parametresi: Bir hücre verisinin yatay konumunu belirler. Left, Right, Center parametrelerini kullanarak belirtirsiniz.
  • Valign parametresi: Bir hücre verisinin düşey konumunu belirler. Top, Middle, Bottom parametrelerini kullanarak belirtirsiniz.
  • Colspan parametresi: Bir hücrenin kapsadığı sütun sayısıdır. Belirttiğiniz kadar sütun oluşmasını sağlar.
  • Rowspan parametresi: Hücrenin kapsadığı satır sayısıdır. Belirttiğiniz kadar satır oluşmasını sağlar.
  • Nowrap parametresi: Otomatik metin akışını iptal eder.
Şimdi ülkelerin nüfuslarını bir tabloda nasıl verdiğimize bakalım:


<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2">

<!-- tablo tanımı başlangıcı -->
<caption> ÜLKELER VE NÜFUSLARI </caption>

<!-- başlık tanımı -->
<tr>

<!-- başlık satırı tanımı -->
<th>ÜLKE ADI</th>
<th>NÜFUSU</th>
</tr>

<!-- başlık satırı tanımının sonu -->
<tr>

<!-- ilk satır tanımı -->
<td>AVUSTURYA </td>
<td>8,000,000</td>
</tr>

<!-- ilk satır tanımının sonu -->
<tr>
<td>ALMANYA</td>
<td>80,000,000</td>
</tr>
<tr>

<!-- son satır tanımının başlangıcı -->
<td>TÜRKİYE</td>
<td>73,000,000</td>
</tr>

<!-- son satır tanımının sonu -->
</table>

<!-- tablo tanımının sonu -->
</body>
</html>








<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="5">
<tr>
<td>TEK HÜCRELİ BİR TABLO</td>
</tr>
</body>
</table>
</html>








Son olarak zemin rengi değiştirilmiş bir tablo örneğiyle eğitimi sonlandıralım:


<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="5" align="left" bgcolor="ffcbf0">
<tr>
<td>PADOVA</td>
</tr>
</table>
Venedik'in bu kadar yakınında olması belki şanssızlığıdır.<br>
Gizemli bir Kuzey İtalya şehridir.<br>
Avrupa'nın en eski tıp fakültesi buradadır.
</body>
</html>

 

LeGoLaS

Onursal Üye
Üyelik Tarihi
1 Ağu 2008
Konular
4,885
Mesajlar
16,461
MFC Puanı
15,790
HTML formları kullanıcıdan veri almak için kullanılır.
<form> etiketi bir form tanımlar ve burada kullanılacak diğer etiketlerle birlikte kullanıcıdan veri alınmasına yardımcı olur. Bu eğitimde bu elemanların bazılarını nasıl kullanacağınızı öğreneceğiz. İlerleyen 201 HTML5 & CSS derslerinde ise HTML5 ile gelen yeni form elemanlarını göreceğiz.
En basit haliyle bir form oluşturalım:


<form>
<!-- Form elemanları -->
</form>


Input etiketi

Input etiketi en önemli form elemanıdır. Tip belirteçlerini kullanarak aşağıda ayrıntısıyla anlattığımız elemanları kullanabilirsiniz:
Metin Alanı (Text Field): Kısa metin girişlerini yüklemek için kullanılabilecek olan alanlardır. İsimler, arama anahtarları adresleri girmek için kullanılır.
Seçme Listeleri (Select List): Seçme listesi, kullanıcının içinden bir ya da daha fazla elemanı seçebileceği veri listeleridir. Uzun fakat sonlu bir seçenekler listesi sunmak amacıyla kullanılabilir. Örneğin bir ülkeler listesinden ülke seçmek ya da bir yazıcılar listesinden yazıcı seçmek gibi eylemler bu elemanın kullanılmasını gerektirir.
Denetim Kutusu (Checkbox): Denetim kutusu, web sayfasını ziyaret eden İnternet kullanıcılarının bir veriler listesinden,

  • bir tek veri
  • birden çok veri seçmek ya da
  • hiçbir veri seçmemek olanağı sağlayan kontrol nesnesidir.
Genellikle birden çok veriyi seçmek için kullanılır.
Radyo düğmesi (Radio button): Kullanıcılara tek bir seçim yapma olanağı veren kontrol nesnesidir.
Metin bölgesi (TextArea): Normalden uzun olan metinler için kullanılabilecek olan kontrol nesnesidir. Serbest biçimli cevaplar için kullanılabilir.
Submit ve Reset düğmeleri: Submit (Gönder) düğmesiyle form üzerine girilen bilgi işlenmesi için URL'i verilen sunucu sayfasına gönderilir. Reset (Sıfırla ya da Temizle) düğmesiyle form içindeki bilgi silinerek başlangıç konumuna getirilir.

Bir formun genel yapısı

Şimdi gelin, bir formun genel yapısını detaylı inceleyelim.
Bir form oluşturmak için ilk adım, HTML kodu içine <form> etiketini eklemek ve Submit (gönder) ve Reset (Sil) düğmelerini yerleştirmektir.
Submit ve Reset düğmeleri gerçekten de bir form üzerindeki temel elemanlardır. Web sayfasına gelen kullanıcıların çoğu bu sayfadaki bir formu doldurarak Submit düğmesiyle bu formdaki bilgileri, sunucudaki bir dosyaya göndermek isteyecek. Bazı durumlarda o ana kadar form üzerindeki alanlara yerleştirilmiş bilgilerin silinmesi istenebilir. Bu durumda da Reset düğmesine ihtiyacımız olacak.
Şimdi basit bir form örneğiyle kullanımlarına bakalım:


<!DOCTYPE html>
<html>
<head>
<title>SALZBURG</title>
</head>
<body>

<div align="center">
<font face="courier" size="6" color="red">
BENZERSİZ ŞEHİR SALZBURG TURLARI İÇİN<br>
BİZİ ARAYINIZ
</font>
</div>
<hr width="90%" size="5" noshade>
<form method="post" action="form_gonder.php">
<input type="text" name="adiniz">ADINIZ<br>
<input type="text" name="soyadiniz">SOYADINIZ<br>
<input type="text" name="adresiniz">ADRESİNİZ<br>
<input type="text" name="tel-no">TEL.NO<br>
<input type="submit" value="GÖNDER" align="center">
<input type="reset" value="SİL" align="center">
</form>
<hr width="90%" size="5" noshade>
<div align="center">
<address align="left">
<font face="Arial">
<br>ÖRNEK TOUR<br>
<a href="mailto:eek:rnek@ornektour.com.tr">ornek@ornektour.com.tr</a>
<br>
Mevcudiyet Cad.84-80767-Şişli<br>
İSTANBUL<br>
</font>
</address>
</div>
</body>
</html>
 
Üst