
Yazar:
admin
Kodlamaya Yeni Başlayanlar Buraya!
Kodlamaya yeni başlayanlar için bazı temel ve pratik tavsiyelerim var:
Temel Kavramları Sağlamlaştırın:
Kodlamaya yeni başlayanlar için bazı temel ve pratik tavsiyelerim var:
Temel Kavramları Sağlamlaştırın:
- Temel Mantığı Anlayın: Kodlamanın sadece sözdiziminden ibaret olmadığını unutmayın. Öncelikle problem çözme mantığını, algoritmaları ve veri yapılarını anlamaya çalışın. Bu, hangi dili öğrenirseniz öğrenin size yardımcı olacaktır.
- Bir Dil Seçin ve Ona Odaklanın: Başlangıçta birçok farklı dil öğrenmeye çalışmak kafa karıştırıcı olabilir. İlgi alanlarınıza ve hedeflerinize uygun bir dil seçin (örneğin, web geliştirme için JavaScript veya Python, veri bilimi için Python) ve ona odaklanın. Temelleri iyice öğrenmeden başka bir dile geçmeyin.
- Sözdizimini Öğrenin Ama Ezberlemeyin: Her dilin kendine özgü bir sözdizimi vardır. Bunu öğrenmek önemlidir ancak her şeyi ezberlemeye çalışmayın. Temel yapıları ve anahtar kelimeleri anladıktan sonra, gerektiğinde kaynaklara başvurmaktan çekinmeyin.
- Bol Bol Kod Yazın: Teorik bilgi tek başına yeterli değildir. Öğrendiklerinizi pekiştirmek için düzenli olarak kod yazın. Basit projelerle başlayın ve zamanla zorluk seviyesini artırın.
- Küçük Projelerle Başlayın: "Merhaba Dünya" uygulaması gibi basit projelerle başlayın ve yavaş yavaş daha karmaşık görevlere geçin. Örneğin, basit bir hesap makinesi, bir yapılacaklar listesi uygulaması veya bir blog sayfası oluşturabilirsiniz.
- Mevcut Kodları İnceleyin: Başkalarının yazdığı kodları okumak ve anlamaya çalışmak da çok öğreticidir. Açık kaynaklı projelere göz atabilir veya örnek kodları inceleyebilirsiniz.
- Sabırlı Olun ve Pes Etmeyin: Kod öğrenmek zaman ve sabır gerektirir. Başlangıçta hatalarla karşılaşmak ve zorlanmak normaldir. Önemli olan pes etmemek ve hatalarınızdan ders çıkarmaktır.
- Hata Ayıklamayı Öğrenin (Debugging): Kodunuzda hatalar (bug) olması kaçınılmazdır. Hata mesajlarını okumayı, anlamayı ve hataları ayıklama tekniklerini öğrenmek çok önemlidir. Tarayıcı geliştirici araçları veya IDE'lerin hata ayıklama özelliklerini kullanmayı öğrenin.
- Kaynaklardan Yararlanın: İnternet, kod öğrenmek için muazzam bir kaynak deposudur. Online kurslar, öğreticiler, belgeleme siteleri, forumlar ve topluluklar size yardımcı olabilir. Güvenilir ve güncel kaynakları takip edin.
- Düzenli Çalışın: Her gün kısa bir süre bile olsa düzenli olarak kod çalışmak, bilgilerinizi taze tutmanıza ve ilerleme kaydetmenize yardımcı olur.
- Bir Topluluğa Katılın: Diğer öğrenenlerle veya deneyimli geliştiricilerle iletişim kurmak motivasyonunuzu artırabilir ve sorunlarınıza çözüm bulmanıza yardımcı olabilir. Online forumlara, sosyal medya gruplarına veya yerel buluşmalara katılabilirsiniz.
- Soru Sormaktan Çekinmeyin: Takıldığınız noktalarda soru sormaktan çekinmeyin. Öğrenmenin en iyi yollarından biri soru sormaktır. Ancak sorunuzu sormadan önce araştırma yaptığınızdan ve sorunuzu açık ve anlaşılır bir şekilde ifade ettiğinizden emin olun.
- Kodunuzu Düzenli Tutun: Anlaşılır ve düzenli kod yazmaya özen gösterin. İsimlendirme kurallarına uyun, yorumlar ekleyin ve kodu mantıksal bloklara ayırın. Bu, hem sizin hem de başkalarının kodunuzu anlamasını kolaylaştırır.
- Versiyon Kontrolünü Öğrenin (Git): Git gibi bir versiyon kontrol sistemi kullanmayı öğrenmek, projelerinizi yönetmek, değişiklikleri takip etmek ve başkalarıyla işbirliği yapmak için çok önemlidir.
- Öğrenmeyi Bırakmayın: Teknoloji sürekli gelişiyor. Bir dili veya alanı öğrendikten sonra bile yeni şeyler öğrenmeye ve kendinizi geliştirmeye devam edin.
Yorum
Yorum Yok

Yazar:
admin
Semantik HTML Nedir
Semantik HTML, web sayfalarının içeriğini hem tarayıcılara hem de geliştiricilere anlamlı bir şekilde açıklayan HTML etiketlerini kullanma pratiğidir. Temel amaç, içeriğin yalnızca nasıl göründüğünü değil, ne anlama geldiğini de vurgulamaktır.
Geleneksel HTML'de, içeriği biçimlendirmek için sıklıkla
ve
gibi genel amaçlı etiketler kullanılırdı. Bu etiketler, içeriğin yapısı hakkında çok az bilgi verir veya hiç bilgi vermezdi. Semantik HTML ise
,
,
,
,
gibi içeriğin rolünü ve anlamını açıkça belirten etiketler sunar.
Semantik HTML'in Faydaları Nelerdir?
Semantik olmayan HTML:
HTML
Semantik HTML:
HTML
Bu örnekte görüldüğü gibi, semantik etiketler kullanılarak içeriğin farklı bölümleri (başlık, gezinme, ana içerik, kenar çubuğu, alt bilgi) daha anlamlı bir şekilde işaretlenmiştir. Bu, hem geliştiricilerin hem de tarayıcıların içeriği daha iyi anlamasına yardımcı olur.
Semantik HTML, modern web geliştirmenin önemli bir parçasıdır ve daha erişilebilir, SEO dostu ve bakımı kolay web siteleri oluşturmak için temel bir prensiptir.
Semantik HTML, web sayfalarının içeriğini hem tarayıcılara hem de geliştiricilere anlamlı bir şekilde açıklayan HTML etiketlerini kullanma pratiğidir. Temel amaç, içeriğin yalnızca nasıl göründüğünü değil, ne anlama geldiğini de vurgulamaktır.
Geleneksel HTML'de, içeriği biçimlendirmek için sıklıkla
Kod:
<div>
Kod:
<span>
Kod:
<article>
Kod:
<nav>
Kod:
<aside>
Kod:
<header>
Kod:
<footer>
Semantik HTML'in Faydaları Nelerdir?
- Daha İyi SEO (Arama Motoru Optimizasyonu): Arama motorları, semantik etiketleri kullanarak içeriğin bağlamını ve önemini daha iyi anlayabilir. Bu da arama sonuçlarında daha iyi sıralamalar elde etmeye yardımcı olabilir. Örneğin, bir
etiketi içindeki içeriğin bir makale olduğunu anlarlar ve buna göre değerlendirirler.Kod:<article>
- Daha Erişilebilir Web Siteleri: Ekran okuyucular gibi yardımcı teknolojiler, semantik etiketleri kullanarak içeriği daha doğru bir şekilde yorumlayabilir ve kullanıcılara aktarabilir. Bu, web sitenizin daha geniş bir kitleye ulaşmasını sağlar. Örneğin,
etiketi bir gezinme bölümünü işaret eder ve ekran okuyucular bu bilgiyi kullanıcılara iletebilir.Kod:<nav>
- Daha Anlaşılır ve Bakımı Kolay Kod: Semantik etiketler, HTML kodunun okunabilirliğini ve anlaşılırlığını artırır. Geliştiriciler, etiketlerin anlamını bildikleri için kodun ne yaptığını daha kolay anlayabilir ve üzerinde değişiklik yapabilirler. Bu da uzun vadede web sitesinin bakımını kolaylaştırır.
- Daha İyi Yapılandırılmış İçerik: Semantik etiketler, içeriğin mantıksal yapısını vurgular. Bu, içeriğin düzenlenmesini ve stilendirilmesini kolaylaştırır. Örneğin, bir
etiketi genellikle ana içerikle ilgili ancak ayrı bir bilgi bölümünü işaret eder.Kod:<aside>
- Daha İyi Tarayıcı Anlaması: Tarayıcılar, semantik etiketleri kullanarak içeriği daha iyi işleyebilir ve sunabilir. Bu, performansı artırabilir ve gelecekteki web teknolojileri için daha iyi bir temel oluşturabilir.
- : Bağımsız ve kendi içinde anlamlı bir içeriği temsil eder (örneğin, bir blog gönderisi, bir haber makalesi).Kod:
<article>
- : Ana içerikle dolaylı olarak ilişkili ancak ayrı bir içeriği temsil eder (örneğin, kenar çubuğu, alıntılar).Kod:
<aside>
- : Gezinme bağlantılarını içeren bir bölümü temsil eder (örneğin, menüler).Kod:
<nav>
- : Bir bölümün veya tüm sayfanın tanıtım içeriğini temsil eder (örneğin, başlık, logo).Kod:
<header>
- : Bir bölümün veya tüm sayfanın alt bilgisini temsil eder (örneğin, telif hakkı bilgileri, iletişim bilgileri).Kod:
<footer>
- : Belgenin ana içeriğini temsil eder.Kod:
<main>
- : Tematik olarak gruplandırılmış içeriğin bir bölümünü temsil eder.Kod:
<section>
- veKod:
<figure>
: Resimler, grafikler vb. gibi bağımsız medyaları ve bunların başlıklarını temsil eder.Kod:<figcaption>
- : Metin içinde vurgulanması gereken bir bölümü işaretler.Kod:
<mark>
- : Tarih ve/veya saat bilgisini temsil eder.Kod:
<time>
Semantik olmayan HTML:
HTML
Kod:
<div id="header">
<div class="logo">Web Sitem</div>
<div class="navigation">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="article">
<h1>Makale Başlığı</h1>
<p>Makale içeriği...</p>
</div>
<div class="sidebar">
<h3>İlgili Bağlantılar</h3>
<ul>
<li><a href="#">Bağlantı 1</a></li>
<li><a href="#">Bağlantı 2</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>© 2023 Tüm Hakları Saklıdır.</p>
</div>
HTML
Kod:
<header>
<div class="logo">Web Sitem</div>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Makale Başlığı</h1>
<p>Makale içeriği...</p>
</article>
<aside>
<h3>İlgili Bağlantılar</h3>
<ul>
<li><a href="#">Bağlantı 1</a></li>
<li><a href="#">Bağlantı 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Tüm Hakları Saklıdır.</p>
</footer>
Semantik HTML, modern web geliştirmenin önemli bir parçasıdır ve daha erişilebilir, SEO dostu ve bakımı kolay web siteleri oluşturmak için temel bir prensiptir.
Forum:
HTML/CSS İpuçları
Yorum
Yorum Yok

Yazar:
admin
Semantik HTML Kullanmaktan Çekinme
Semantik HTML Nedir diyenler için Alt Konularda Açıklayıcı bir Yazımız var. Lütfen Takip Edin.
- her derde deva ama her iş için değil.Kod:
<div>
- ,Kod:
<header>
,Kod:<nav>
,Kod:<section>
,Kod:<article>
gibi etiketlerle sayfanın anlamını artır.Kod:<footer>
Semantik HTML Nedir diyenler için Alt Konularda Açıklayıcı bir Yazımız var. Lütfen Takip Edin.
Forum:
HTML/CSS İpuçları
Yorum
Yorum Yok

Yazar:
admin
Doğru Etiket, Doğru İş!
HTML’de hangi etiketi ne için kullanman gerektiğini iyi bilmek, yapıyı güçlü ve anlamlı yapar.
Örneğin:
HTML’de hangi etiketi ne için kullanman gerektiğini iyi bilmek, yapıyı güçlü ve anlamlı yapar.
Örneğin:
- kalın yazı ve arama motorları için “önemli” anlamına gelir.Kod:
<strong>
- sadece görsel olarak kalın yapar.Kod:
<b>
- vurgulu yazı için idealdir; screen reader’lar da bunu anlar.Kod:
<em>
Forum:
HTML/CSS İpuçları
Yorum
Yorum Yok

Yazar:
Gets
Soru:
Bir dizide (liste) sadece bir eleman farklı sayıda tekrar ediyordur, diğer tüm elemanlar ikişer kez tekrar ediyordur. Bu tek kalan elemanı bulan bir fonksiyon yaz.
Örnek:
python
Kurallar:
Bu soruyu ekstra bellek kullanmadan ve O(n) zamanda çözmenin en güzel yolu XOR operatörünü kullanmaktır.
Neden XOR?
a ^ a = 0 (aynı sayılar birbirini götürür)
a ^ 0 = a
XOR işlemi değişmeli ve birleşmelidir.
Yani bir dizideki tüm sayıları sırayla XOR'ladığımızda, çift olanlar birbirini sıfırlar ve sadece tek kalan sayı sonuç olarak elde kalır.
Python çözümü:
def single_number(nums):
result = 0
for num in nums:
result ^= num
return result
# Örnek
print(single_number([4, 1, 2, 1, 2]))
Bir dizide (liste) sadece bir eleman farklı sayıda tekrar ediyordur, diğer tüm elemanlar ikişer kez tekrar ediyordur. Bu tek kalan elemanı bulan bir fonksiyon yaz.
Örnek:
python
Kod:
input: [4, 1, 2, 1, 2]
output: 4
- Zaman karmaşıklığı O(n) olmalı.
- Ekstra bir liste veya sözlük kullanmadan çözmeye çalış.
Bu soruyu ekstra bellek kullanmadan ve O(n) zamanda çözmenin en güzel yolu XOR operatörünü kullanmaktır.
Neden XOR?
a ^ a = 0 (aynı sayılar birbirini götürür)
a ^ 0 = a
XOR işlemi değişmeli ve birleşmelidir.
Yani bir dizideki tüm sayıları sırayla XOR'ladığımızda, çift olanlar birbirini sıfırlar ve sadece tek kalan sayı sonuç olarak elde kalır.
Python çözümü:
def single_number(nums):
result = 0
for num in nums:
result ^= num
return result
# Örnek
print(single_number([4, 1, 2, 1, 2]))
Forum:
Günün Kod Sorusu
Yorum
Yorum Yok

Yazar:
admin
Kodlar.tr Forum Kuralları
1. Genel Kurallar
1. Genel Kurallar
- Saygılı olun: Her kullanıcıya karşı nazik ve saygılı davranın. Hakaret, tehdit, aşağılama ve kişisel saldırılara izin verilmez.
- Yasalara uyun: Forumda yapılan tüm paylaşımlar, Türkiye Cumhuriyeti yasalarına uygun olmalıdır.
- Uygunsuz içerik yasaktır: Pornografik, şiddet içerikli, ayrımcılık içeren veya nefret söylemi barındıran içerikler kesinlikle yasaktır.
- Ticari reklam yasaktır: İzin alınmadan yapılan reklam, spam veya link paylaşımı yasaktır. Sponsorluklar ve tanıtımlar yalnızca yetkili onayı ile yapılabilir.
- Açıklayıcı başlıklar kullanın: “Yardım lütfen” yerine, “Python’da listeyi sıralama sorunu” gibi açıklayıcı başlıklar tercih edin.
- Kodları düzgün biçimlendirin: Paylaştığınız kodları uygun şekilde etiketleyin veya kod blokları (kod) kullanın.
- Kaynak belirtin: Alıntı yaptığınız kodlara ya da yazılara kaynak ekleyin.
- Lisanslara saygı gösterin: Paylaştığınız kodlar başkasına aitse, telif hakkına uygun şekilde paylaşım yapın.
- Araştırmadan sormayın: Sormadan önce forumda veya arama motorlarında araştırma yapın.
- Tekrar eden konular açmayın: Aynı konuda birden fazla başlık açmak yerine var olan başlığa katkı sağlayın.
- Cevaplara teşekkür edin: Size yardımcı olan kullanıcılara teşekkür etmek nezakettir, +1 vermeyi unutmayın.
- Uyarı sistemi aktiftir: Kurallara uymayan kullanıcılar ilk olarak uyarılır, tekrarında geçici veya kalıcı ban uygulanabilir.
- Moderatör kararları kesindir: Moderatörler forumun düzeni için karar alma hakkına sahiptir. Tartışmaya açık değildir.
- Raporlama özelliğini kullanın: Uygunsuz içerikleri “Rapor Et” seçeneği ile bildirin.
- Yardım etmeye istekli olun: Bilginizi başkalarıyla paylaşın. Forumun gelişmesine katkıda bulunun.
- Katkılarınızı açık kaynakla destekleyin: Kendi projelerinizi GitHub vb. platformlarda paylaşın ve başkalarının da faydalanmasını sağlayın.
- Yeni başlayanlara destek olun: Forumun büyümesi için yeni kullanıcıları teşvik edin, küçümsemeyin.
Yorum
Yorum Yok

Yazar:
Gets
Kodlamaya yeni başlayanlar için birkaç naçizane sıcak tavsiyem var:
* Merakını Besle ve Sabırlı Ol:
Kodlama öğrenmek zaman ve çaba gerektirir. Başlangıçta her şey karmaşık gelebilir, bu yüzden sabırlı olman ve merakını canlı tutman çok önemli. Başarı hikayelerini ve ilham verici projeleri araştırarak motivasyonunu yüksek tutabilirsin.
* Doğru Kaynakları Seç:
İnternet üzerinde sayısız kaynak var, ancak başlangıç için yapılandırılmış ve anlaşılır kaynaklar seçmek önemlidir. Ücretsiz platformlar (örneğin, Codecademy, freeCodeCamp), interaktif eğitimler ve başlangıç seviyesine uygun kitaplar iyi bir başlangıç noktası olabilir. Kendi öğrenme stiline en uygun olanı bulmak için farklı kaynakları deneyebilirsin.
* Temel Kavramları Anla:
Programlamanın temel taşlarını (değişkenler, döngüler, koşullu ifadeler, fonksiyonlar vb.) sağlam bir şekilde öğrenmek uzun vadede sana çok yardımcı olacaktır. Bu kavramları farklı örneklerle pekiştirmeye çalış.
* Küçük Adımlarla İlerle:
Hemen büyük projelerle başlamak yerine, küçük ve yönetilebilir görevlerle başla. Örneğin, basit bir hesap makinesi veya bir "yapılacaklar" listesi uygulaması yazmayı deneyebilirsin. Başarıya ulaştıkça motivasyonun artacak ve daha karmaşık projeler için kendine güvenin gelecektir.
* Bol Bol Pratik Yap:
Kodlama teorik bilgiden çok pratik beceri gerektirir. Öğrendiğin her yeni kavramı mutlaka kodlayarak uygula. Kendi projelerini geliştirmeye çalış ve karşılaştığın hatalardan ders çıkar.
* Hata Ayıklamayı Öğren:
Hata ayıklama (debugging), bir programcının en önemli becerilerinden biridir. Kodun çalışmadığında paniklemek yerine, hatanın nerede olduğunu anlamaya çalış. Hata mesajlarını dikkatlice oku ve internette benzer sorunlara yapılan çözümleri araştır.
* Bir Topluluğa Katıl:
Diğer öğrenenlerle veya deneyimli programcılarla iletişim kurmak çok faydalıdır. Online forumlara, sosyal medya gruplarına veya yerel kodlama etkinliklerine katılarak soru sorabilir, fikir alışverişinde bulunabilir ve yeni şeyler öğrenebilirsin.
* Kendi Projelerini Geliştir:
Öğrendiklerini pekiştirmenin ve portfolyonu oluşturmanın en iyi yolu kendi projelerini geliştirmektir. İlgi alanlarına yönelik veya çözmek istediğin bir probleme odaklanan projeler seçebilirsin.
* Pes Etme:
Kodlama öğrenme süreci inişli çıkışlı olabilir. Zorlandığın veya takıldığın zamanlar olacaktır. Önemli olan pes etmemek ve öğrenmeye devam etmektir. Mola vermek ve farklı bir yaklaşımla tekrar denemek çoğu zaman işe yarar.
* Sürekli Öğren:
Teknoloji sürekli gelişiyor, bu yüzden öğrenme süreci hiçbir zaman bitmez. Yeni programlama dillerini, kütüphaneleri ve araçları takip etmek önemlidir.
Umarım bu tavsiyeleri kulak ardı etmez kodlama yolculuğunda sana yardımcı olmasını umut eder! Bu yolculukta Başarılar dilerim! ?
* Merakını Besle ve Sabırlı Ol:
Kodlama öğrenmek zaman ve çaba gerektirir. Başlangıçta her şey karmaşık gelebilir, bu yüzden sabırlı olman ve merakını canlı tutman çok önemli. Başarı hikayelerini ve ilham verici projeleri araştırarak motivasyonunu yüksek tutabilirsin.
* Doğru Kaynakları Seç:
İnternet üzerinde sayısız kaynak var, ancak başlangıç için yapılandırılmış ve anlaşılır kaynaklar seçmek önemlidir. Ücretsiz platformlar (örneğin, Codecademy, freeCodeCamp), interaktif eğitimler ve başlangıç seviyesine uygun kitaplar iyi bir başlangıç noktası olabilir. Kendi öğrenme stiline en uygun olanı bulmak için farklı kaynakları deneyebilirsin.
* Temel Kavramları Anla:
Programlamanın temel taşlarını (değişkenler, döngüler, koşullu ifadeler, fonksiyonlar vb.) sağlam bir şekilde öğrenmek uzun vadede sana çok yardımcı olacaktır. Bu kavramları farklı örneklerle pekiştirmeye çalış.
* Küçük Adımlarla İlerle:
Hemen büyük projelerle başlamak yerine, küçük ve yönetilebilir görevlerle başla. Örneğin, basit bir hesap makinesi veya bir "yapılacaklar" listesi uygulaması yazmayı deneyebilirsin. Başarıya ulaştıkça motivasyonun artacak ve daha karmaşık projeler için kendine güvenin gelecektir.
* Bol Bol Pratik Yap:
Kodlama teorik bilgiden çok pratik beceri gerektirir. Öğrendiğin her yeni kavramı mutlaka kodlayarak uygula. Kendi projelerini geliştirmeye çalış ve karşılaştığın hatalardan ders çıkar.
* Hata Ayıklamayı Öğren:
Hata ayıklama (debugging), bir programcının en önemli becerilerinden biridir. Kodun çalışmadığında paniklemek yerine, hatanın nerede olduğunu anlamaya çalış. Hata mesajlarını dikkatlice oku ve internette benzer sorunlara yapılan çözümleri araştır.
* Bir Topluluğa Katıl:
Diğer öğrenenlerle veya deneyimli programcılarla iletişim kurmak çok faydalıdır. Online forumlara, sosyal medya gruplarına veya yerel kodlama etkinliklerine katılarak soru sorabilir, fikir alışverişinde bulunabilir ve yeni şeyler öğrenebilirsin.
* Kendi Projelerini Geliştir:
Öğrendiklerini pekiştirmenin ve portfolyonu oluşturmanın en iyi yolu kendi projelerini geliştirmektir. İlgi alanlarına yönelik veya çözmek istediğin bir probleme odaklanan projeler seçebilirsin.
* Pes Etme:
Kodlama öğrenme süreci inişli çıkışlı olabilir. Zorlandığın veya takıldığın zamanlar olacaktır. Önemli olan pes etmemek ve öğrenmeye devam etmektir. Mola vermek ve farklı bir yaklaşımla tekrar denemek çoğu zaman işe yarar.
* Sürekli Öğren:
Teknoloji sürekli gelişiyor, bu yüzden öğrenme süreci hiçbir zaman bitmez. Yeni programlama dillerini, kütüphaneleri ve araçları takip etmek önemlidir.
Umarım bu tavsiyeleri kulak ardı etmez kodlama yolculuğunda sana yardımcı olmasını umut eder! Bu yolculukta Başarılar dilerim! ?
Yorum
Yorum Yok

Yazar:
KodlarTR
HTML 'nin Webdeki Rölü
HTML (Köprü Metni İşaretleme Dili), webin temel yapı taşıdır. Web sayfalarının iskeletini oluşturan dil olarak, çok önemli bir rol oynar. İşlevini şöyle özetleyebiliriz:
HTML’in Web’deki Rolü
HTML, bir web sayfasının iskeletini oluşturur. Web tasarım ve geliştirme işlerinde her şey onunla başlar. örnek bir HTML sayfası göstererek açıklayalım.
Aşağıda, temel bir HTML sayfa örneği paylaşıyorum. Bu örnek, başlık, paragraf, resim, bağlantı ve liste gibi temel HTML öğelerini içeriyor:
html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Benim İlk Web Sayfam</title>
</head>
<body>
<h1>Hoş Geldiniz!</h1>
<p>Bu, HTML ile oluşturulmuş ilk web sayfam. Web geliştirme dünyasına adım attım </p>
<h2>Hakkımda</h2>
<p>Ben bir web geliştirici adayıyım. HTML, CSS ve JavaScript öğreniyorum.</p>
<h2>İlgi Alanlarım</h2>
<ul>
<li>Web Tasarımı</li>
<li>Oyun Geliştirme</li>
<li>Yapay Zeka</li>
</ul>
<h2>Favori Sitem</h2>
<p>Daha fazla bilgi için <a href="https://www. domain.com" target="_blank">HTML Öğreniyorum</a> sitesine göz atabilirsiniz.</p>
<h2>Bir Görsel</h2>
<img src="https://www. domain.com/html/img1.jpg" alt="HTML Örneği Görseli" width="300">
<footer>
<p>© 2025 - Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
Bu Sayfada Neler Var?
<!DOCTYPE html> → HTML5 olduğunu belirtir.
<html lang="tr"> → Sayfanın dilini Türkçe olarak ayarlar.
<head> → Sayfa başlığı ve karakter kodlaması gibi bilgiler içerir.
<body> → Görünen tüm içerik burada yer alır (başlık, paragraf, liste, resim, link, vs.).
<footer> → Sayfanın alt kısmında telif bilgisi gibi öğeler olur.
Dilersen bu sayfaya CSS veya JavaScript de ekleyebiliriz.
HTML (Köprü Metni İşaretleme Dili), webin temel yapı taşıdır. Web sayfalarının iskeletini oluşturan dil olarak, çok önemli bir rol oynar. İşlevini şöyle özetleyebiliriz:
HTML’in Web’deki Rolü
- İçeriğin Yapılandırılması:
- HTML, bir web sayfasında metinleri, başlıkları, paragrafları, listeleri, görselleri, videoları ve bağlantıları tanımlar.
- Örneğin bir haber sitesindeki başlık
, paragraflarKod:<h1>
, resimlerKod:<p>
gibi etiketlerle belirtilir.Kod:<img>
- HTML, bir web sayfasında metinleri, başlıkları, paragrafları, listeleri, görselleri, videoları ve bağlantıları tanımlar.
- Tarayıcıya Ne Gösterileceğini Söyler:
- HTML dosyaları, tarayıcılar tarafından okunur ve kullanıcıya görsel olarak sunulur.
- Yani tarayıcılar (Chrome, Firefox, Safari vb.), HTML kodunu anlayarak sayfayı oluşturur.
- HTML dosyaları, tarayıcılar tarafından okunur ve kullanıcıya görsel olarak sunulur.
- Diğer Web Teknolojileriyle İş Birliği Yapar:
- CSS (Cascading Style Sheets): HTML’in görünümünü (renkler, boyutlar, konumlar) düzenler.
- JavaScript: Sayfaya etkileşim kazandırır (butona tıklanınca bir şey olması gibi).
- Bu üçlü (HTML + CSS + JS) modern web’in temelidir.
- CSS (Cascading Style Sheets): HTML’in görünümünü (renkler, boyutlar, konumlar) düzenler.
- Arama Motorları ve Erişilebilirlik Açısından Önemlidir:
- Arama motorları HTML içeriğini okuyarak sayfanın ne hakkında olduğunu anlar.
- Ekran okuyucular gibi erişilebilirlik araçları, HTML etiketlerini kullanarak görme engelli kullanıcılar için sayfayı sesli hale getirir.
- Arama motorları HTML içeriğini okuyarak sayfanın ne hakkında olduğunu anlar.
HTML, bir web sayfasının iskeletini oluşturur. Web tasarım ve geliştirme işlerinde her şey onunla başlar. örnek bir HTML sayfası göstererek açıklayalım.
Aşağıda, temel bir HTML sayfa örneği paylaşıyorum. Bu örnek, başlık, paragraf, resim, bağlantı ve liste gibi temel HTML öğelerini içeriyor:
html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Benim İlk Web Sayfam</title>
</head>
<body>
<h1>Hoş Geldiniz!</h1>
<p>Bu, HTML ile oluşturulmuş ilk web sayfam. Web geliştirme dünyasına adım attım </p>
<h2>Hakkımda</h2>
<p>Ben bir web geliştirici adayıyım. HTML, CSS ve JavaScript öğreniyorum.</p>
<h2>İlgi Alanlarım</h2>
<ul>
<li>Web Tasarımı</li>
<li>Oyun Geliştirme</li>
<li>Yapay Zeka</li>
</ul>
<h2>Favori Sitem</h2>
<p>Daha fazla bilgi için <a href="https://www. domain.com" target="_blank">HTML Öğreniyorum</a> sitesine göz atabilirsiniz.</p>
<h2>Bir Görsel</h2>
<img src="https://www. domain.com/html/img1.jpg" alt="HTML Örneği Görseli" width="300">
<footer>
<p>© 2025 - Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
Bu Sayfada Neler Var?
<!DOCTYPE html> → HTML5 olduğunu belirtir.
<html lang="tr"> → Sayfanın dilini Türkçe olarak ayarlar.
<head> → Sayfa başlığı ve karakter kodlaması gibi bilgiler içerir.
<body> → Görünen tüm içerik burada yer alır (başlık, paragraf, liste, resim, link, vs.).
<footer> → Sayfanın alt kısmında telif bilgisi gibi öğeler olur.
Dilersen bu sayfaya CSS veya JavaScript de ekleyebiliriz.
Forum:
HTML
Yorum
Yorum Yok

Yazar:
admin
-
Söz Sizde Hadi Paylaşalım .
- HTML öğrenirken sizi en çok zorlayan ne oldu?
- Semantik etiketleri kullanıyor musunuz? (Kabul edelim çoğumuz önce div'le çözüyoruz ?)
- En sevdiğiniz HTML "trick" nedir?
Kodu paylaş, öğreneni destekle
Forum:
HTML
Yorum
Yorum Yok

Yazar:
admin
Yeni Başlayanlar İçin Mini Tavsiyeler
[*]Kodlarınızı
gibi araçlarla anlık gözlemleyin.
[*]Her etiketin ne işe yaradığını bilin, ezbere değil mantıkla öğrenin.
[*]HTML5 semantik etiketlerini (header, nav, article, section vs.) zamanla öğrenmeye başlayın.
[*]Mobil uyumluluğu (responsive yapı) CSS tarafında olsa da, HTML’in yapısı da önemlidir. Doğru yerleştirme = doğru sonuç.
[*]Kodlarınızı
Kod:
Live Server
[*]Her etiketin ne işe yaradığını bilin, ezbere değil mantıkla öğrenin.
[*]HTML5 semantik etiketlerini (header, nav, article, section vs.) zamanla öğrenmeye başlayın.
[*]Mobil uyumluluğu (responsive yapı) CSS tarafında olsa da, HTML’in yapısı da önemlidir. Doğru yerleştirme = doğru sonuç.
Forum:
HTML
Yorum
Yorum Yok
Hoşgeldin, Ziyaretçi
Forumda Ara
Forum İstatistikleri
Kimler Çevrimiçi
Şu anda 1 aktif kullanıcı var.
(0 Üye - 1 Ziyaretçi)
Son Yazılanlar
Yeni Başlayanlar için Pro...
Son Yorum:
admin
•
Dün, 08:12 AM
Kodlamaya Başlayanlar içi...
Son Yorum:
admin
•
Dün, 08:09 AM
Kodlamaya Yeni Başlayanla...
Son Yorum:
admin
•
Dün, 08:08 AM
Bol Bol Pratik Yapın Kodl...
Son Yorum:
admin
•
Dün, 08:07 AM
Küçük Başlayın ve Adım Ad...
Son Yorum:
admin
•
Dün, 07:45 AM
Doğru Programlama Dilini ...
Son Yorum:
admin
•
Dün, 07:44 AM
Dizilerle Çalışma ve Arra...
Son Yorum:
admin
•
06-11-2025, 06:43 PM
DOCTYPE html Nasıl Kullan...
Son Yorum:
admin
•
05-23-2025, 08:06 PM
Yapay Zeka Kodlama Önizle...
Son Yorum:
KodlarTR
•
05-16-2025, 08:22 PM
TensorFlow ile Nesne Tanı...
Son Yorum:
KodlarTR
•
05-16-2025, 08:17 PM