Temel HTML

Kilitli
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

Temel HTML

Mesaj gönderen admin »

Ders 1 - HTML'e Giriş

Web sayfalarını oluşturma aşamasında kullanılan standart bir metin işaret dili olan HTML açılımı “Hyper Text Markup Language” dir. HTML bir programlama dili değildir. Chrome, Firefox, Yandex gibi tarayıcıların okuyup anlamlandırdığı bir dildir.
HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir.
HTML Nedir?
HTML, web sayfalarını tanımlamak için kullanılan bir dildir.
HTML bir programlama dili değil, biçimlendirme dilidir
Bir biçimlendirme dili biçimlendirme etiketlerinden oluşur
HTML, web sayfalarını düzenlemek için biçimlendirme etiketlerini kullanır

HTML Etiketleri
HTML biçimlendirme etiketleri genellikle HTML etiketleri olarak adlandırılır.
HTML etiketleri, anahtar kelimelerin dirsekler(küçüktür büyüktür işaretleri) tarafından çevrelenmiş halidir <html> gibi
HTML etiketleri normalde çift halde kullanılır <b> ve </b> gibi
Çiftteki ilk etiket başlangıç etiketidir, ikinci etiket ise bitiş etiketidir
Başlangıç ve bitiş etiketleri, açılış ve kapanış etiketleri olarak da adlandırılır

HTML Belgeleri = Web Sayfaları

HTML belgeleri web sayfalarını tanımlar
HTML belgeleri, HTML etiketleri ve düz metin içerir
HTML belgeleri web sayfaları olarak da adlandırılır.

Bir web tarayıcısının amacı HTML belgelerini okumak ve onları web sayfaları şeklinde göstermektir. Tarayıcı HTML etiketlerini göstermek, fakat etiketleri sayfanın içeriğini yorumlamak için kullanırlar.


İlk Örnek ile başlayalım;

Kod: Tümünü seç

<html>
<body>
<title>Sayfa Basligim</title>
<h1>Bu benim ilk basligim</h1>

<p>Bu benim ilk paragrafim</p>

</body>
</html> 
Örneği çalıştırdığımızda aşağıda ki şekilde bir sonuç alacağız. Html'e giriş yapmış bulunmaktayız.

Resim

Örneğin Açıklaması;
<html> ve </html> arasındaki metin web sayfalarını yorumlar.
<body> ve </body> arasındaki metin görünür sayfa içeriğidir.
<title> ve </title>arasında metin Sayfamızın başlığını içerir.
<h1> ve </h1> arasındaki metin başlık olarak görüntülenir.
<p> ve </p> arasındaki metin paragraf olarak görüntülenir.

Bu linkten canlı denemeler yapabilirsiniz :

Kod: Tümünü seç

https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_default
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.

Etiketler:
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

HTML'i Düzenlemek

Mesaj gönderen admin »

Bu eğitimde HTML'i düzenlemek için bir düz yazı düzenleyicisi(Not Defteri)) kullanacağız. Biz bunun HTML öğrenmek için en iyi yol olduğuna inanıyoruz.

Ancak, uzman web geliştiricileri düz metin yazma yerine genellikle FrontPage ya da Dreamweaver gibi HTML düzenleyicileri kullanırlar.

.HTM veya .HTML Dosya Uzantısı?
Bir HTML dosyasını kaydettiğiniz zaman .htm veya .html uzantısını kullanabilirsiniz. Biz örneklerimizde .htm uzantısını kullandık. Bu yazılımların dosya uzantılarında sadece 3 harf destekledikleri zamandan kalmış bir alışkanlıktır.
Yeni yazılımlarda .html dosya uzantısını kullanmak mükemmel bir kararlılık sağlamaktadır.

HTML Başlıkları
HTML başlıkları <h1>'den <h6>'ya kadar olan etiketler ile tanımlanmıştır. Sırayla karakter büyüklükleri değişir.

Örnek;
HTML-Kodu:

Kod: Tümünü seç

<h1>Bu bir basliktir</h1>
<h2>Bu bir basliktir</h2>
<h3>Bu bir basliktir</h3> 
HTML Paragrafları
HTML paragrafları <p> etiketi ile tanımlanmıştır.

Örnek
HTML-Kodu:

Kod: Tümünü seç

<p>Bu bir paragrafdir</p>
<p>Bu bir paragrafdir</p>

HTML Bağlantıları
HTML bağlantıları <a> etiketi ile tanımlanmıştır.

Örnek
HTML-Kodu:

Kod: Tümünü seç

<a href="http://www.yazilimadasi.com">YazılımAdası</a>
Not: Bağlantı adresi href özniteliği içerisinde belirtilmiştir.

(Öznitelikler ile ilgili bilgiyi ileriki bölümlerde öğreneceksiniz.
HTML Resimleri
HTML resimleri <img> etiketi ile tanımlanmıştır.

Örnek
HTML-Kodu:

Kod: Tümünü seç

<img src="yazilimadasilogo.jpg" width="140" height="142" /> 
Not: Resmin ismi ve boyutu öznitelikler tarafından oluşturulmuştur.
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

HTML Elemanları

Mesaj gönderen admin »

HTML belgeleri, HTML elemanları tarafından tanımlanmıştır.

HTML Elemanları

Bir HTML elemanı başlangıç etiketinden bitiş etiketine kadar olan her şeydir.
* Başlangıç etiketi genellikle açılış etiketi, bitiş etiketi ise kapanış etiketi olarak adlandırılır.

HTML Eleman Sözdizimi

Bir HTML elemanı başlangıç etiketi ile başlar
Bir HTML elemanı bitiş etiketi ile biter
Eleman içeriğinin tamamı başlangıç ve bitiş etiketleri arasındadır
Bazı HTML elemanlarının içeriği boştur
Boş elemanlar başlangıç etiketi içinde kapatılmıştır
Çoğu HTML elemanının özniteliği vardır
İpucu: Öznitelikler ile ilgili bilgiyi bir sonraki bölümde öğreneceksiniz.
İç İçe Olan HTML Elemanları
Çoğu HTML elemanı iç içe olabilir (diğer HTML elemanlarını içerebilir).

HTML belgeleri iç içe olan HTML elemanlarından oluşur.

Örnek HTML Belgesi:

Kod: Tümünü seç

<html>

<body>
<p>Bu bir paragraftir.</p>
</body>

</html> 
Yukarıdaki örnek 3 HTML elemanı içerir.
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

Re: Temel HTML

Mesaj gönderen admin »

HTML Örneğinin Açıklaması

<p> elemanı:
HTML-Kodu:

Kod: Tümünü seç

<p>Bu bir paragraftir.</p>
<p> elemanı, HTML belgesinde paragrafı tanımlar.
Elemanın başlangıç etiketi <p> ve bitiş etiketi </p>'dir.
Elemanın içeriği: Bu bir paragraftir.

<body> elemanı:
HTML-Kodu:

Kod: Tümünü seç

<body>
<p>Bu bir paragraftir.</p>
</body>
<body> elemanı, HTML belgesinin vücudunu tanımlar.
Elemanın başlangıç etiketi <body>, bitiş etiketi </body>'dir.
Elemanın içeriği bir başka HTML elemanıdır (<p> elemanı).

<html> elemanı:
HTML-Kodu:

Kod: Tümünü seç

<html>

<body>
<p>Bu bir paragraftir.</p>
</body>

</html>
<html> elemanı, HTML belgesinin tümünü tanımlar.
Elemanın başlangıç etiketi <html>, bitiş etiketi </html>'dir.
Elemanın içeriği bir başka HTML elemanıdır (<body> elemanı)

Boş HTML Elemanları
İçeriksiz HTML elemanları boş elemanlar olarak adlandırılır. Boş elemanlar başlangıç etiketi içinde kapatılabilir.

<br> bitiş etiketi olmayan bir boş elemandır (<br> etiketi satır sonunu tanımlar).

XHTML'de, XML'de ve HTML'in gelecek versiyonlarında, bütün elemanlar kapalı olmak zorundadır.

Başlangıç etiketine bölü işareti eklemek, <br /> gibi, boş elemanları kapatmanın uygun yoludur. HTML, XHTML ve XML tarafından kabul edilmektedir.

<br> tüm tarayıcılarda çalışsa bile, yerine <br /> yazmak geleceğe daha uyumludur.


HTML İpucu: Küçük Harfli Etiketler Kullanın
HTML etiketleri büyük-küçük harf duyarlı değildir: <P>, <p> ile aynı anlamdadır. Birçok websitesi büyük harfli etiketler kullanır.
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

HTML Öznitelikleri

Mesaj gönderen admin »

Öznitelikler, HTML elemanları hakkında ek bilgi sağlar.

HTML elemanları öznitelikler bulundurabilirler
Öznitelikler, HTML elemanları hakkında ek bilgi sağlar
Öznitelikler daima başlangıç etiketinde belirtilirler
Öznitelikler isim(name)/değer(value) ikilisi olarak kullanılır name=”value” gibi

Öznitelik Örneği
HTML bağlantıları <a> etiketi ile tanımlanır. Bağlantı adresi href özniteliğinin içinde tanımlanır:

Örnek
HTML-Kodu:

Kod: Tümünü seç

<a href="http://www.yazilimadasi.com">YazılımAdası</a> 
Öznitelik Değerlerini Daima Tırnak İşaretleri Arasına Alın
Öznitelik değerleri daima tırnak işaretleri içerisine yerleştirlir.
Çift tırnak işaretleri en yaygın olandır fakat tek tırnak işaretlerine de izin verilir.
İpucu: Bazı nadir durumlarda, öznitelik değeri kendi içerisinde tırnak içerdiğinde, tek tırnak işaretini kullanmak gereklidir: isim='Mustafa “Kemal” Atatürk'

HTML Tavsiyesi: Küçük Harfli Öznitelikler Kullanın

Öznitelik isimler ve öznitelik değerleri büyük/küçük harf duyarlıdır.

Ancak W3C ,HTML 4'te küçük harfli öznitelik isimlerini ve değerlerini önerir.

(X)HTML'in daha yeni sürümlerinde, küçük harfli öznitelikler istenecektir.

HTML Öznitelikleri Kaynağı

Her bir HTML elemanı için olan özniteliklerin tam listesi:

Kod: Tümünü seç

https://www.w3schools.com/tags/default.asp
Standart öznitelikler hakkında daha fazla bilgi için:

Kod: Tümünü seç

https://www.w3schools.com/tags/ref_standardattributes.asp
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

HTML Başlıkları

Mesaj gönderen admin »

Başlıklar, HTML belgelerinde önemlidir.

Başlıkları <h1>'den <h6>'ya kadar olan etiketlerle tanımlanır.

<h1> en büyük başlığı tanımlar, <h6> ise en küçük başlığı tanımlar.

Örnek
HTML-Kodu:

Kod: Tümünü seç

<h1>Bu bir basliktir</h1>
<h2>Bu bir basliktir</h2>
<h3>Bu bir basliktir</h3> 
Not: Tarayıcılar bir başlıktan önce ve sonra otomatik olarak bir satır boş bırakırlar.

Başlıklar Önemlidir
HTML başlıklarını yalnızca başlık için kullanın. Yazıyı büyük ve kalın yapmak için kullanmayın.
Arama motorları, başlıklarınızı sizin web sayfanızın yapısını ve içeriğini indexlemek için kullanır.

Kullanıcılar sizin sayfanızı başlıklarla taradığından beri, belgenin yapısını göstermek için başlıkları kullanmak önemlidir.
H1 başlıkları ana başlıkları içermelidir, onu H2 başlıkları takip eder, sonra en az önemli olan H3 başlıkları v.b.
HTML Çizgileri
<hr /> etiketi bir HTML sayfasında yatay bir çizgi oluşturur.

hr elemanı ayrı içerikleri kullanabilir:
Örnek

Kod: Tümünü seç

HTML-Kodu:
<p>Bu bir paragraftir</p>
<hr />
<p>Bu bir paragraftir</p>
<hr />
<p>Bu bir paragraftir</p>

HTML Yorumları
Yorumlar, HTML kodunu daha okunabilir ve anlaşılabilir yapmak için HTML koduna eklenebilir. Yorumlar tarayıcı tarafından yok sayılır ve gösterilmezler.

Yorumlar şu şekilde yazılır:

Örnek
HTML-Kodu:

Kod: Tümünü seç

<!-- This is a comment --> 
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

HTML Paragrafları

Mesaj gönderen admin »

HTML Paragrafları

HTML belgeleri paragraflara bölünmüştür.
Pargraflar <p> etiketiyle tanımlanır.
Örnek
HTML-Kodu:

Kod: Tümünü seç

<p>Bu bir paragraftir</p>
<p>Bu da bir diger paragraftir</p> 
Not: Tarayıcılar otomatik olarak paragraftan önce ve sonra boş satır ekler.

HTML Satır Sonları
Yeni bir paragrafa başlamayıp bir satır sonu veya yeni bir satır oluşturmak istiyorsanız <br /> etiketini kullanın:

Örnek
HTML-Kodu:

Kod: Tümünü seç

<p>Bu<br>bir<br/>parag raf tir</p> 
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.
Kullanıcı avatarı
admin
Sistem Geliştiricisi
Sistem Geliştiricisi
Mesajlar: 832
Kayıt: 28 Ağu 2022 04:38
Konum: Database
Meslek: Teknisyen
Teşekkür etti: 456 kez
Teşekkür edildi: 308 kez
İletişim:

HTML Biçimlendirmesi

Mesaj gönderen admin »

HTML Biçimlendirmesi

HTML Yazı Biçimlendirmesi
HTML-Kodu:

Kod: Tümünü seç

<html>
<body>

<p><b>Bu cumle kalin yazilmistir</b></p>
<p><big>Bu cumle buyuk yazilmistir</big></p>
<p><i>Bu cumle yatik yazilmistir</i></p>
<p><code>Bu bilgisayar ciktisidir</code></p>
<p>Bu<sub> altsimge etiketi</sub> ve<sup>ustsımge etiketi</sup></p>

</body>
</html>
<sub> etiketi altsimge metni tanımlar. Altsimge metinleri taban çizgisine ortalanır ve yarım karakter boyutundadır.Kimyasal formüller için kullanılabilir. H2O gibi.

<sup> etiketi üstsimge metni tanımlar. Üstsimge metinleri üst çizgisine ortalanarı ve yarım karakter boyutundadır. Dipnotlar için kullanılabilir. WWW[1] gibi.

HTML Etiketlerini Biçimlendirmek
HTML, çıktıları kalın veya yatık yazı gibi biçimlendirmek için <b> ve <i> gibi etiketler kullanır.
Bu HTML etiketleri biçimlendirme etiketleri olarak isimlendirilir.
Daha zeki olmanın tek yolu, daha zeki bir rakiple oynamaktır.
Kilitli

“HTML” sayfasına dön