HTML Öğrenmeye Nereden Başlanmalı?

HTML Öğrenmeye Nereden Başlanmalı?​

Web geliştirmeye başlamak isteyenlerin öğrenmesi gereken ilk teknolojilerden biri HTML'dir.

HTML, bir web sayfasının temel yapısını oluşturur.

Bir siteye baktığınızda gördüğünüz:

• Başlıklar
• Paragraflar
• Görseller
• Butonlar
• Linkler
• Listeler
• Form alanları
• Tablolar

gibi birçok öğenin temelinde HTML bulunur.

HTML öğrenmek zor değildir. Önemli olan konuları doğru sırayla öğrenmek ve bol bol pratik yapmaktır.

HTML Nedir?​

HTML:

HyperText Markup Language

anlamına gelir.

Türkçede kabaca:

Hiper Metin İşaretleme Dili

olarak çevrilebilir.

HTML bir programlama dili değildir.

Daha doğru ifadeyle bir:

İşaretleme dilidir.

Görevi web sayfasındaki içeriğin yapısını tanımlamaktır.

HTML Ne İşe Yarar?​

HTML sayesinde tarayıcıya bir içeriğin ne olduğunu anlatırız.

Örneğin:

• Bu bir başlıktır
• Bu bir paragraftır
• Bu bir görseldir
• Bu bir bağlantıdır
• Bu bir listedir

gibi bilgiler HTML tarafından belirlenir.

HTML Tek Başına Yeterli mi?​

Temel bir web sayfası oluşturmak için yeterli olabilir.

Ancak modern web sitelerinde genellikle üç temel teknoloji birlikte kullanılır:

• HTML
• CSS
• JavaScript

HTML, CSS ve JavaScript Arasındaki Fark​

Basit bir örnekle düşünelim.

HTML​

Evin iskeletidir.

CSS​

Evin:

• Boyası
• Tasarımı
• Mobilyası
• Görünümüdür.

JavaScript​

Evin içerisindeki çalışan sistemlerdir.

Örneğin:

• Kapının otomatik açılması
• Lambanın yanması
• Alarm sistemi

gibi düşünülebilir.

Önce Hangisi Öğrenilmeli?​

Yeni başlayan biri için en mantıklı sıra:

1. HTML
2. CSS
3. JavaScript

şeklindedir.

HTML öğrenmeden CSS ve JavaScript'e geçmek öğrenme sürecini gereksiz şekilde zorlaştırabilir.

HTML Öğrenmek İçin Programlama Bilmek Gerekir mi?​

Hayır.

Daha önce hiç yazılım geliştirmemiş biri HTML öğrenmeye başlayabilir.

HTML başlangıç seviyesi için oldukça uygundur.

HTML Öğrenmek Ne Kadar Sürer?​

Temel HTML kısa sürede öğrenilebilir.

Düzenli çalışan biri birkaç gün içerisinde:

• Başlık
• Paragraf
• Link
• Görsel
• Liste
• Form

gibi temel yapıları anlayabilir.

Ancak HTML'i doğru ve profesyonel kullanmak için pratik yapmak gerekir.

İlk Olarak Neyi Öğrenmeliyim?​

Öncelikle HTML belgesinin mantığını öğrenin.

Bir web sayfasının genel olarak:

• Belge
• Başlık bilgileri
• Sayfa gövdesi

gibi bölümlerden oluştuğunu anlamak yeterlidir.

Başlangıçta bütün etiketleri ezberlemeye çalışmayın.

HTML Etiketi Nedir?​

HTML sayfaları etiketlerden oluşur.

Etiketler tarayıcıya içeriğin türünü anlatır.

Örneğin:

• Başlık etiketi
• Paragraf etiketi
• Link etiketi
• Görsel etiketi

gibi farklı etiketler bulunur.

Etiketleri Ezberlemek Gerekir mi?​

Hayır.

En sık kullandığınız etiketleri zaten zaman içerisinde ezberlersiniz.

Önemli olan:

Hangi etiketi hangi durumda kullanmanız gerektiğini

öğrenmektir.

HTML Dosyası Nedir?​

HTML dosyalarının uzantısı genellikle:

.html

şeklindedir.

Örneğin bir web sitesinin ana sayfası çoğu zaman:

index.html

adıyla oluşturulabilir.

index.html Nedir?​

Web sunucularında bir klasör açıldığında varsayılan olarak gösterilebilen dosyalardan biridir.

Bu nedenle birçok projenin başlangıç sayfası index.html olarak adlandırılır.

HTML Yazmak İçin Hangi Program Kullanılır?​

Basit bir metin editörü bile yeterlidir.

Ancak öğrenme sürecinde kod editörü kullanmak daha rahat olur.

Yaygın seçenekler:

• Visual Studio Code
• Notepad++
• Sublime Text

gibi editörlerdir.

Visual Studio Code Kullanmak Mantıklı mı?​

Evet.

Yeni başlayanlar için oldukça kullanışlıdır.

Avantajları:

• Ücretsiz
• HTML desteği güçlü
• Otomatik tamamlama
• Dosya yönetimi
• Eklenti desteği

sunmasıdır.

İlk Proje Nasıl Oluşturulmalı?​

Bilgisayarınızda örneğin:

html-calismalarim

isimli bir klasör oluşturabilirsiniz.

İçerisinde ilk HTML dosyanızı oluşturup tarayıcıda açabilirsiniz.

Başlangıçta sunucu kurmanız gerekmez.

HTML Dosyası Tarayıcıda Nasıl Açılır?​

HTML dosyasına çift tıklayarak:

• Chrome
• Edge
• Firefox
• Safari

gibi bir tarayıcıda açabilirsiniz.

Dosyada değişiklik yaptıktan sonra sayfayı yenileyerek sonucu görebilirsiniz.

İlk Öğrenilecek Konu: Başlıklar​

Web sayfalarında farklı seviyelerde başlıklar bulunur.

Başlık yapısını öğrenmek önemlidir.

Genel olarak:

• Ana başlık
• Bölüm başlığı
• Alt başlık

şeklinde bir hiyerarşi kullanılabilir.

H1 Nedir?​

H1 sayfanın ana başlığını temsil eder.

Örneğin:

En İyi Oyuncu Mouse Modelleri

bir H1 başlığı olabilir.

Bir sayfada başlık hiyerarşisinin düzenli olması hem kullanıcı hem SEO açısından faydalıdır.

H2 ve H3​

Ana başlığın altındaki bölümler için kullanılır.

Örneğin:

H1:

Linux Nedir?

H2:

Linux'un Avantajları

H3:

Güvenlik

şeklinde düşünülebilir.

Başlık Sırasına Dikkat​

Başlıklar yalnızca yazıyı büyük göstermek için kullanılmamalıdır.

Sayfanın mantıksal yapısını oluşturmalıdır.

Bu alışkanlığı başlangıçta edinmek önemlidir.

Paragraflar​

Web sayfalarındaki normal metinler paragraf olarak oluşturulur.

Bir makale hazırlarken uzun yazıları tek parça yerine farklı paragraflara ayırmak okunabilirliği artırır.

Kalın ve Vurgulu Metinler​

HTML içerisinde belirli kelimeler:

• Önemli
• Vurgulu

olarak işaretlenebilir.

Ancak her cümleyi kalın yapmak doğru değildir.

Link Nedir?​

Bir sayfadan:

• Başka sayfaya
• Başka siteye
• Dosyaya
• Bölüme

geçiş yapılmasını sağlar.

HTML öğrenirken bağlantı oluşturma mantığını erken öğrenmek faydalıdır.

Internal Link Nedir?​

Aynı web sitesi içerisindeki başka sayfaya verilen bağlantıdır.

Örneğin:

Ana Sayfa → Hakkımızda

bir internal link olabilir.

External Link Nedir?​

Başka bir web sitesine verilen bağlantıdır.

Örneğin kendi sitenizden başka bir kaynağa bağlantı vermek external link olarak adlandırılır.

Görsel Ekleme​

HTML ile sayfaya görseller eklenebilir.

Örneğin:

• Logo
• Ürün fotoğrafı
• Banner
• Blog görseli

kullanılabilir.

Görsellerde Alt Metin​

Görsellere açıklayıcı alt metin eklemek önemlidir.

Alt metin:

• Erişilebilirlik
• Arama motorları
• Görsel yüklenmediğinde açıklama

açısından faydalıdır.

Dosya Yollarını Öğrenmek​

HTML öğrenirken en önemli konulardan biri:

Dosya yolu

mantığıdır.

Örneğin HTML dosyası ile görsel farklı klasörlerdeyse doğru yol belirtilmelidir.

Relative Path Nedir?​

Mevcut HTML dosyasına göre dosyanın konumunu belirtir.

Küçük ve orta web projelerinde sık kullanılır.

Absolute Path Nedir?​

Kaynağın tam adresini belirtir.

Genellikle internet üzerindeki tam URL'lerde görülür.

Liste Kullanımı​

HTML içerisinde iki temel liste mantığı vardır:

• Sıralı liste
• Sırasız liste

Sırasız Liste​

Maddelerin belirli bir sıralaması önemli değilse kullanılabilir.

Örneğin:

• HTML
• CSS
• JavaScript

Sıralı Liste​

Adımların sırası önemliyse tercih edilir.

Örneğin:

1. HTML öğren
2. CSS öğren
3. JavaScript öğren

Listeler Neden Önemlidir?​

İçeriği daha okunabilir hale getirir.

Özellikle:

• Rehber
• Özellik listesi
• Adım adım anlatım

sayfalarında sık kullanılır.

Tablolar​

HTML tabloları düzenli veri göstermek için kullanılabilir.

Örneğin:

• Ürün özellikleri
• Fiyat karşılaştırması
• Teknik özellikler

tablo ile gösterilebilir.

Tabloyu Sayfa Tasarımı İçin Kullanmak​

Eskiden web sitesi tasarımları tablolarla yapılabiliyordu.

Modern web geliştirmede bu doğru yaklaşım değildir.

Tablo yalnızca gerçekten tablo şeklindeki veriler için kullanılmalıdır.

Form Nedir?​

Kullanıcıdan bilgi almak için kullanılan yapıdır.

Örneğin:

• İletişim formu
• Üyelik formu
• Giriş ekranı
• Arama kutusu

form olabilir.

Formlarda Hangi Alanlar Bulunabilir?​

Örneğin:

• Metin kutusu
• E-posta
• Parola
• Sayı
• Tarih
• Seçim kutusu
• Gönder butonu

kullanılabilir.

HTML Formu Tek Başına Çalışır mı?​

Kullanıcıya form gösterebilir.

Ancak gönderilen bilgilerin:

• Kaydedilmesi
• E-posta gönderilmesi
• Veritabanına yazılması

için genellikle backend tarafına ihtiyaç vardır.

Label Nedir?​

Form alanının ne işe yaradığını açıklayan etikettir.

Örneğin bir kutunun yanında:

E-posta adresiniz

yazması kullanıcı deneyimini ve erişilebilirliği artırır.

Button Nedir?​

Kullanıcının işlem başlatmasını sağlayan butondur.

Örneğin:

• Gönder
• Satın Al
• Giriş Yap
• Kayıt Ol

gibi.

HTML Attribute Nedir?​

Bir HTML öğesine ek bilgi veren özelliklerdir.

Örneğin bir bağlantının nereye gideceği veya bir görselin hangi dosyayı göstereceği attribute ile belirtilebilir.

id Nedir?​

Sayfadaki belirli bir öğeyi benzersiz şekilde tanımlamak için kullanılabilir.

Daha sonra:

• CSS
• JavaScript
• Sayfa içi bağlantılar

tarafından kullanılabilir.

class Nedir?​

Birden fazla HTML öğesini aynı grup içerisinde tanımlamak için kullanılabilir.

Özellikle CSS öğrenmeye başladığınızda class kavramı çok önemli hale gelir.

id ile class Arasındaki Fark​

Basit şekilde:

id​

Genellikle belirli ve benzersiz bir öğeyi tanımlar.

class​

Birden fazla öğede tekrar kullanılabilir.

div Nedir?​

HTML'de öğeleri gruplandırmak için çok yaygın kullanılan genel amaçlı container yapısıdır.

Ancak her şeyi div kullanarak oluşturmak doğru değildir.

Semantic HTML Nedir?​

Sayfanın yapısını anlamlı etiketlerle oluşturma yöntemidir.

Örneğin sayfanın:

• Header
• Navigation
• Main content
• Article
• Section
• Footer

gibi bölümleri anlamlı şekilde tanımlanabilir.

Semantic HTML Neden Önemlidir?​

Şunlara yardımcı olur:

• Kod okunabilirliği
• Erişilebilirlik
• SEO
• Proje düzeni

Bu nedenle HTML öğrenirken semantic yapı erken öğrenilmelidir.

Header Nedir?​

Sayfanın veya içeriğin üst bölümünü temsil eder.

Genellikle:

• Logo
• Başlık
• Menü

bulunabilir.

Nav Nedir?​

Navigasyon yani menü bağlantılarının bulunduğu alanı ifade eder.

Main Nedir?​

Sayfanın temel ana içeriğini temsil eder.

Section Nedir?​

Sayfanın mantıksal bölümlerini ayırmak için kullanılabilir.

Örneğin:

• Hizmetler
• Referanslar
• Hakkımızda

ayrı section olabilir.

Article Nedir?​

Tek başına anlamlı olabilecek içerikler için kullanılabilir.

Örneğin:

• Blog yazısı
• Haber
• Forum gönderisi

article olarak değerlendirilebilir.

Footer Nedir?​

Sayfanın alt bölümünü temsil eder.

Genellikle:

• Telif
• İletişim
• Sosyal medya
• Hızlı bağlantılar

bulunur.

HTML Sayfa Yapısını Öğrenmek​

Başlangıçta basit bir kurumsal sayfayı zihninizde bölümlere ayırmayı öğrenin.

Örneğin:

1. Header
2. Menü
3. Ana içerik
4. Hizmetler
5. İletişim
6. Footer

Bu yaklaşım ileride CSS öğrenirken çok işinize yarar.

Meta Etiketleri Nedir?​

Sayfa hakkında tarayıcıya ve bazı sistemlere bilgi sağlar.

Örneğin:

• Karakter kodlaması
• Mobil ekran davranışı
• Sayfa açıklaması

gibi bilgiler bulunabilir.

UTF-8 Nedir?​

Karakter kodlama standardıdır.

Türkçe:

• ğ
• ş
• ı
• İ
• ö
• ü
• ç

gibi karakterlerin doğru görüntülenmesi açısından önemlidir.

Responsive Tasarım ve HTML​

Responsive tasarımın büyük bölümü CSS ile yapılır.

Ancak HTML sayfasında mobil cihazların doğru görüntüleme davranışı için uygun yapılandırma bulunması gerekir.

HTML'de SEO​

HTML yapısı SEO açısından önemlidir.

Özellikle:

• Sayfa başlığı
• Başlık hiyerarşisi
• Meta açıklaması
• Alt metin
• Semantic HTML
• Link yapısı

dikkate alınmalıdır.

Title Nedir?​

Tarayıcı sekmesinde görünen sayfa başlığıdır.

Arama sonuçlarındaki başlıkla da ilişkili olabilir.

Her sayfada açıklayıcı ve özgün bir title kullanılması faydalıdır.

Meta Description​

Sayfanın ne hakkında olduğunu özetleyen açıklamadır.

Arama motorları bunu arama sonucunda gösterebilir, ancak her zaman aynı açıklamayı kullanmak zorunda değildir.

HTML ve Erişilebilirlik​

Web sitesi yalnızca görsel olarak tasarlanmamalıdır.

Örneğin:

• Görsellere açıklama
• Formlara label
• Düzenli başlık yapısı

ekran okuyucu kullanan kişilerin siteyi kullanmasını kolaylaştırır.

HTML Validation Nedir?​

HTML yapısında yanlış veya standart dışı kullanım olup olmadığını kontrol etmektir.

Öğrenme aşamasında validation araçlarından faydalanmak iyi bir alışkanlıktır.

Tarayıcı Geliştirici Araçları​

Chrome, Edge ve Firefox gibi tarayıcılarda geliştirici araçları bulunur.

Bunlarla:

• HTML yapısı
• CSS
• Network
• Hatalar

incelenebilir.

Inspect Element Nedir?​

Web sayfasındaki bir öğenin HTML yapısını tarayıcı üzerinden incelemenizi sağlar.

HTML öğrenirken gerçek web sitelerini incelemek oldukça faydalıdır.

Başkasının Sitesini İncelemek Faydalı mı?​

Evet.

Ancak amaç tasarımı kopyalamak değil, sayfa yapısının nasıl oluşturulduğunu anlamaktır.

Örneğin:

• Header nasıl yapılmış?
• Menü nasıl gruplandırılmış?
• Başlık yapısı nasıl?

incelenebilir.

HTML Öğrenirken CSS'ye Ne Zaman Geçilmeli?​

Şu konular rahat anlaşılmaya başladığında CSS'ye geçebilirsiniz:

• Sayfa yapısı
• Başlıklar
• Paragraflar
• Linkler
• Görseller
• Listeler
• Formlar
• class ve id
• Semantic HTML

HTML'in tüm ayrıntılarını öğrenmeyi beklemeye gerek yoktur.

CSS'ye Geçince HTML Bırakılır mı?​

Hayır.

HTML ve CSS birlikte kullanılır.

HTML:

İçeriği oluşturur.

CSS:

İçeriği tasarlar.

JavaScript'e Ne Zaman Geçilmeli?​

HTML ve temel CSS konusunda rahat olduktan sonra JavaScript öğrenmek daha kolaydır.

Özellikle şu konuların anlaşılması faydalıdır:

• HTML elementleri
• id
• class
• Formlar
• Sayfa yapısı

Backend Ne Zaman Öğrenilmeli?​

Frontend temellerinden sonra değerlendirilebilir.

Örneğin:

• PHP
• Node.js
• Python

gibi backend teknolojileri öğrenilebilir.

HTML Öğrendikten Sonra PHP Öğrenilir mi?​

Evet.

Özellikle:

• WordPress
• Dinamik web sitesi
• Hosting
• Web geliştirme

ile ilgileniyorsanız PHP mantıklı bir sonraki adımlardan biri olabilir.

Ancak önce temel:

HTML + CSS

bilgisi edinmek faydalıdır.

HTML Öğrenirken WordPress Kullanmak​

WordPress kullanıyor olsanız bile HTML öğrenmek faydalıdır.

Çünkü:

• Elementor
• Gutenberg
• Tema düzenleme
• İçerik yapısı

daha anlaşılır hale gelir.

Elementor Kullanıyorum, HTML Öğrenmeli miyim?​

Evet.

Elementor kod yazmadan site hazırlamayı kolaylaştırır ancak HTML mantığını bilen biri:

• Container
• Başlık hiyerarşisi
• Class
• id
• Semantic yapı

gibi konuları çok daha iyi anlayabilir.

HTML Öğrenirken Ezber Yapmayın​

En büyük yanlışlardan biri bütün HTML etiketlerini bir liste üzerinden ezberlemeye çalışmaktır.

Bunun yerine küçük projeler hazırlayın.

İlk HTML Projesi: Kişisel Tanıtım Sayfası​

İçerisinde:

• Ad
• Başlık
• Kısa açıklama
• Görsel
• İlgi alanları
• Sosyal medya bağlantıları

bulunan basit bir sayfa oluşturabilirsiniz.

Bu proje temel HTML pratiği için yeterlidir.

İkinci Proje: Blog Yazısı​

Bir makale sayfası oluşturun.

İçerisinde:

• Ana başlık
• Alt başlıklar
• Paragraflar
• Görseller
• Listeler
• Linkler

kullanın.

Üçüncü Proje: İletişim Formu​

Basit bir:

• Ad
• E-posta
• Konu
• Mesaj
• Gönder

formu hazırlayın.

Formun gerçekten mesaj göndermesine başlangıçta gerek yoktur.

Önce HTML yapısını öğrenin.

Dördüncü Proje: Ürün Sayfası​

Basit bir e-ticaret ürün sayfası tasarlayın.

İçerisinde:

• Ürün adı
• Görsel
• Fiyat
• Açıklama
• Özellik listesi
• Buton

bulunsun.

Beşinci Proje: Basit Kurumsal Site​

Birkaç sayfalık küçük proje hazırlayın:

• Ana Sayfa
• Hakkımızda
• Hizmetler
• İletişim

Bu aşamada sayfalar arasında bağlantı oluşturmayı öğrenirsiniz.

Öğrenirken Projeler Nasıl İlerlemeli?​

Mantıklı sıra:

1. Proje​

Tek sayfa kişisel profil.

2. Proje​

Blog yazısı.

3. Proje​

Form.

4. Proje​

Ürün sayfası.

5. Proje​

Çok sayfalı kurumsal site.

Bu aşamalardan sonra CSS öğrenmeye ciddi şekilde başlanabilir.

HTML Öğrenirken Ne Kadar Pratik Yapılmalı?​

Her konu sonrasında küçük uygulama yapmak en iyi yöntemlerden biridir.

Örneğin bugün listeleri öğrendiyseniz sadece video izlemek yerine kendi:

• Alışveriş listesi
• Ders listesi
• Bilgisayar parçaları listesi

sayfanızı hazırlayın.

Sadece Video İzlemek Yeterli mi?​

Hayır.

HTML özellikle yaparak öğrenilir.

Video izlerken:

İzle → Kendin yap → Hata yap → Düzelt

şeklinde ilerlemek daha verimlidir.

Kopyala Yapıştır Kullanmak​

Öğrenme aşamasında sürekli hazır içerikleri kopyalamak gelişimi yavaşlatabilir.

Örneği gördükten sonra kapatıp kendiniz tekrar oluşturmaya çalışın.

Hata Yapmak Normal mi?​

Evet.

Özellikle başlangıçta:

• Görsel açılmaması
• Link çalışmaması
• Yanlış dosya yolu
• Etiket hatası

çok normaldir.

Bu hataları çözmek öğrenmenin önemli bir parçasıdır.

Dosya ve Klasör Düzeni​

Web geliştirmeye başlarken düzenli klasör kullanmayı öğrenin.

Örneğin projede:

• HTML sayfaları
• Görseller
• CSS dosyaları
• JavaScript dosyaları

ayrı ve anlaşılır şekilde tutulabilir.

Dosya İsimleri Nasıl Olmalı?​

Basit ve anlaşılır isimler kullanılmalıdır.

Örneğin:

• hakkimizda.html
• iletisim.html
• hizmetler.html

gibi.

Dosya isimlerinde gereksiz boşluk ve karmaşık karakterlerden kaçınmak iyi alışkanlıktır.

HTML Yorumları​

HTML içerisinde geliştiricinin kendisi için açıklamalar bırakılabilir.

Bu yorumlar büyük projelerde bölümlerin ne işe yaradığını anlamayı kolaylaştırabilir.

Ancak gereksiz yüzlerce yorum da kodu karmaşıklaştırabilir.

HTML Öğrenirken Framework Gerekli mi?​

Hayır.

Başlangıçta:

• Bootstrap
• Tailwind
• React

gibi araçlara hemen geçmek önerilmez.

Önce saf HTML ve temel CSS öğrenilmelidir.

Bootstrap'a Ne Zaman Geçilmeli?​

HTML ve CSS'nin temel mantığını öğrendikten sonra kullanılabilir.

Framework kullanmadan temel bir sayfa hazırlayabiliyor olmanız faydalıdır.

React Öğrenmeden Önce HTML Gerekir mi?​

Kesinlikle.

React kullansanız bile HTML mantığına çok benzer yapılarla çalışırsınız.

HTML bilgisi zayıfsa React öğrenmek gereksiz yere zorlaşır.

Semantic HTML'i Atlama Hatası​

Yeni başlayanlar çoğu zaman her şeyi genel container yapılarıyla oluşturur.

Bunun yerine sayfanın anlamına uygun öğeler kullanılmalıdır.

Bu alışkanlık daha profesyonel kod yazmanızı sağlar.

HTML Öğrenirken Yapılan Yaygın Hatalar​

Bütün Etiketleri Ezberlemeye Çalışmak​

Gerekli değildir.

CSS'ye Çok Erken Geçmek​

HTML yapısını anlamadan tasarıma odaklanmak kafa karışıklığı yaratabilir.

Sadece Video İzlemek​

Pratik yapılmadığında bilgiler çabuk unutulur.

Büyük Projeyle Başlamak​

İlk proje olarak büyük e-ticaret sitesi yapmak motivasyonu düşürebilir.

Dosya Yollarını Öğrenmemek​

Görsellerin ve bağlantıların çalışmamasına neden olur.

Semantic HTML'i Önemsememek​

Kötü sayfa yapısına alışmanıza neden olabilir.

Hatalardan Korkmak​

Web geliştirme büyük ölçüde hata bulma ve çözme sürecidir.

HTML Öğrenme Kontrol Listesi​

• HTML'in ne olduğunu biliyor muyum?
• HTML belgesinin yapısını anlıyor muyum?
• Başlıkları kullanabiliyor muyum?
• Paragraf oluşturabiliyor muyum?
• Link ekleyebiliyor muyum?
• Görsel ekleyebiliyor muyum?
• Dosya yollarını anlıyor muyum?
• Liste oluşturabiliyor muyum?
• Tablo mantığını biliyor muyum?
• Form oluşturabiliyor muyum?
• class ve id farkını biliyor muyum?
• Semantic HTML'i biliyor muyum?
• Meta bilgilerin ne olduğunu biliyor muyum?
• Developer Tools kullanabiliyor muyum?

1. Aşama: HTML Temelleri​

İlk olarak:

• HTML nedir?
• Etiket nedir?
• Attribute nedir?
• Sayfa yapısı nasıldır?

öğrenin.

2. Aşama: Metin Yapıları​

Daha sonra:

• Başlık
• Paragraf
• Vurgu
• Liste

konularına geçin.

3. Aşama: Link ve Görseller​

Şunları öğrenin:

• Site içi bağlantı
• Dış bağlantı
• Görsel
• Dosya yolları

4. Aşama: Tablo ve Form​

Temel:

• Tablo
• Form
• Input
• Label
• Button

mantığını öğrenin.

5. Aşama: Semantic HTML​

Ardından:

• Header
• Nav
• Main
• Section
• Article
• Footer

yapısına geçin.

6. Aşama: Küçük Proje​

Öğrendiğiniz her şeyi tek sayfada kullanın.

Örneğin basit bir:

Hosting firması tanıtım sayfası

hazırlayabilirsiniz.

Sayfada:

• Firma başlığı
• Hizmetler
• Paket bilgileri
• Hakkımızda
• İletişim

bölümleri bulunabilir.

7. Aşama: CSS Öğrenmeye Başlayın​

HTML temelleri tamamlandıktan sonra CSS'ye geçin.

CSS ile:

• Renk
• Font
• Arka plan
• Boyut
• Boşluk
• Hizalama
• Responsive tasarım

öğrenilebilir.

8. Aşama: JavaScript​

HTML ve CSS'de temel seviyeye ulaştıktan sonra JavaScript öğrenilebilir.

JavaScript sayesinde:

• Menü
• Form kontrolü
• Etkileşim
• Dinamik içerik

gibi özellikler geliştirilebilir.

Sıfırdan Web Geliştirme Öğrenme Sırası​

Genel olarak şu yol takip edilebilir:

1. HTML
2. CSS
3. Responsive tasarım
4. JavaScript
5. Git ve GitHub
6. Backend veya frontend framework
7. Veritabanı
8. Sunucu ve deployment

Bu sıra kişiye göre değişebilir ancak sağlam bir başlangıç oluşturur.

HTML Öğrenmek İçin Her Gün Ne Kadar Çalışılmalı?​

Düzenli çalışma uzun saatlerden daha önemlidir.

Örneğin her gün:

30 dakika – 1 saat

çalışmak bile başlangıç için yeterli olabilir.

Ancak bu sürenin tamamını video izleyerek geçirmek yerine bir bölümünde mutlaka pratik yapılmalıdır.

Bir Konuyu Ne Zaman Öğrenmiş Sayılırım?​

Bir videoyu anlayınca değil, videoya bakmadan kendi başınıza uygulayabildiğinizde öğrenmiş sayılabilirsiniz.

Örneğin:

Basit bir ürün sayfasını sıfırdan oluşturabiliyor musunuz?

Evet ise temel HTML konusunda ilerliyorsunuz demektir.

HTML'de Uzmanlaşmak Gerekir mi?​

Frontend geliştirme yapmak istiyorsanız sağlam HTML bilgisi önemlidir.

Ancak yüzlerce etiketi ezberlemeye gerek yoktur.

Daha önemli olan:

• Doğru sayfa yapısı
• Semantic HTML
• Erişilebilirlik
• Temiz kullanım

konularıdır.

Başlangıç İçin En Önemli Tavsiye​

HTML öğrenirken kendinize:

Önce bütün HTML'i bitireceğim

gibi bir hedef koymayın.

Bunun yerine:

Bugün bir başlık, görsel ve bağlantı içeren sayfa hazırlayacağım

gibi küçük hedefler belirleyin.

Bu yöntem öğrenmeyi çok daha kolay hale getirir.

Sonuç​

HTML öğrenmeye başlamak için daha önce programlama bilmek gerekmez.

Başlangıçta:

• HTML belge yapısı
• Başlıklar
• Paragraflar
• Linkler
• Görseller
• Listeler
• Formlar
• class ve id
• Semantic HTML

konularına odaklanmak yeterlidir.

Bütün HTML etiketlerini ezberlemek yerine küçük projeler hazırlamak çok daha etkili bir öğrenme yöntemidir.

İlk olarak kişisel tanıtım sayfası, ardından blog yazısı, iletişim formu ve basit kurumsal site gibi projeler hazırlanabilir.

Temel HTML mantığı oturduktan sonra:

CSS → JavaScript

sırasıyla ilerlemek daha doğru olur.

Kısacası HTML öğrenmenin en iyi yolu konuları sırayla öğrenmek, her öğrendiğiniz konuyu hemen küçük bir projede uygulamak ve hazır kodları yalnızca kopyalamak yerine kendi başınıza yeniden oluşturmaya çalışmaktır.