HTML ve CSS: Tüm İnternetin Yapı Taşları

Coddy'de yaptığımız her şey tek bir basit fikre dayanıyor: yaparak öğrenirsin.

Bu cümleye bir bakın. Hem kalın yazılmış, hem italik yapılmış, hem de tıklanabilir bir bağlantı. Oldukça havalı, değil mi? Peki ekranınızda nasıl bu hale geldi?

Bunu bir Markdown Editor (Markdown Editörü) içinde yazdığımız için, kalın yazı için iki yıldız, italik için tek yıldız koyduk ve bağlantıyı oluşturmak için [text] (url) formatını kullandık.

Ancak web tarayıcılarının markdown'ın ne olduğu hakkında hiçbir fikri yoktur. Chrome, Safari ve Firefox bu yıldız işaretlerini veya köşeli parantezleri kesinlikle anlamaz. Ekranda gördüğünüz her şeyin arka planında, her zaman sadece iki şeye dönüşmesi gerekir:

HTML (HyperText Markup Language) ve CSS (Cascading Style Sheets).

Aynı cümlenin hem kalın, hem italik, hem de tıklanabilir görünmesini sağlamak için HTML kodu şu şekilde görünür:

<a href="https://coddy.tech/landing"><strong><em>learn by doing</em></strong></a>

Sıkça kullandığınız bir web sitesini düşünün. Ona baktığınızda düzgün metinler, renkli butonlar ve akıcı menüler görürsünüz. Tüm bu görsel öğeler HTML ve CSS kullanılarak inşa edilir. Bir web sitesi ne kadar pahalı veya modern olursa olsun, bu ikisi onun temel taşını oluşturur.

Gelin, bu araçların dijital dünyayı nasıl yönettiğine ve ilk günden itibaren kod yazıp kurcalayarak onlarda nasıl ustalaşabileceğinize birlikte bakalım!

Her Web Sitesi Neden Buradan Başlar?

Bir ev inşa ettiğinizi hayal edin. Henüz bir çatınız bile yokken lüks bir koltuk satın almazdınız, değil mi? Harika boya renkleri ve dekorasyonlar seçmeden önce temel ihtiyaçlara ihtiyacınız vardır: temel, ahşap kirişler ve beton tuğlalar. Duvar yoksa ev de yoktur.

HTML (HyperText Markup Language)'i ham maddeniz, bilgisayara ekranda tam olarak neyin görüneceğini söyleyen patron olarak düşünün. Şöyle der: 'Buraya büyük bir başlık koy. Şuraya bir paragraf yerleştir. Tam buraya bir görsel ekle, şuraya da bir buton koy.' HTML olmasaydı, en sevdiğiniz web sitesi sadece boş, beyaz bir ekrandan ibaret olurdu. Bırakın bir şeyler yapmayı, görecek hiçbir şey bulamazdınız.

Doğruya doğru, sadece çıplak tuğlalardan ve ahşap kirişlerden oluşan bir ev oldukça çirkindir. Gri, soğuktur ve kimse oraya taşınmak istemez. Tamamen yarım kalmıştır. İşte bu yüzden durumu düzeltmek için CSS (Cascading Style Sheets)'e ihtiyacımız var.

CSS, o HTML yapısını alır ve havalı görünmesini sağlar. CSS şöyle der: 'Şu büyük başlığı parlak mavi yapalım. Şu görseli ekranın tam ortasına yerleştirelim. Ve şu butona güzel, yuvarlak bir şekil verip birisi üzerine geldiğinde parlamasını sağlayalım!' İşte web sitesi inşa etmek tam olarak budur.

Basitçe söylemek gerekirse, onlar mükemmel bir takımdır. Biri kemikleri oluşturur, diğeri ise cildi giydirir. İşte bu kadar. Telefonunuzda veya dizüstü bilgisayarınızda her tarayıcı açtığınızda, başrollerinde HTML ve CSS'in olduğu canlı bir şov izlersiniz. Biri olmadan diğeri olamaz.

Tuzak: Etiketleri ve Seçicileri Ezberlemek

İlk web sitenizi kuracağınız için çok heyecanlısınız. Sonra ne mi oluyor? Muhtemelen 500 sayfalık bir ders kitabı arıyor ya da internette on saatlik bir video oynatma listesi buluyorsunuz. Tahminimizce bilgisayar başına geçiyor, içeceğinizi alıyor ve bu işin ustası olmaya hazırlanıyorsunuz.

İlk birkaç saat, yeni bir başlangıç olduğu için muhtemelen harika hissettirir. Eğitmen size <h1> etiketinin ne olduğunu veya arka plan renginin nasıl değiştirileceğini anlatır; siz de muhtemelen notlar alır veya birkaç tanımın altını çizersiniz. Hatta orada oturup, 'Hey, bu işte bayağı iyiyim!' diye düşünüyor bile olabilirsiniz.

Sonra, bir gün kadar sonra, dizüstü bilgisayarınızda boş bir dosya açmaya karar verirsiniz. Ekran tamamen beyazdır ve o küçük imleç yanıp sönerek sizi bekler. İşte o an zihniniz durur: 'Eee... şimdi ne yapacağım?' Kendinizi şunları sorarken bulursunuz: Bağlantı oluşturma etiketi neydi? CSS dosyasını nasıl bağlıyordum? Metnim neden kayboldu?!

Bu, insanların genellikle pasif öğrenmenin klasik tuzağı olarak adlandırdığı şeydir. HTML ve CSS hakkında okumak, ilerleme kaydediyormuşsunuz gibi hissettirebilir ancak beyniniz sadece tanımları depoluyor olabilir.

Ve bu, beceri kazanmaya yakın bile değildir. Her bir HTML etiketini ezberlemeye çalışmak, yeni bir yabancı dili devasa bir sözlüğü baştan sona okuyarak öğrenmeye çalışmaya benzer. Yorucu olabilir ve çoğumuz için işe... yaramaz.

Kopyala-Yapıştır Alışkanlığı: Sizi Neden Geri Tutabilir?

Karşılaşılan bir diğer yaygın durum da kopyala-yapıştır alışkanlığına kapılmaktır. Bir video eğitimini takip ederken, ekrandaki kişinin yazdıklarını aynen yazmak çok kolaydır. Kodunuz onunkinin aynısı olur, kaydet tuşuna basarsınız ve – hey, çalışıyor!

Ama bunun neden çalıştığını gerçekten anlıyor musunuz?

Kod satırlarını sadece kopyalayıp yapıştırdığımızda, kod yazmanın en önemli kısmını kaçırabiliriz: hata yapmak ve bunları düzeltmek. Çünkü asıl web geliştirme süreci, bir şeyler tamamen ters gittiğinde gerçekleşir.

Diyelim ki yan yana üç sütun metinden oluşan basit bir düzen oluşturmaya çalışıyorsunuz. HTML'i yazıyor, biraz CSS uyguluyorsunuz ve aniden üçüncü sütun sayfanın en altına kayıyor. Bozuk görünüyor.

Eğer bu düzeni bir eğitimden aynen kopyaladıysanız, arkasındaki mantığı kendiniz kurmadığınız için nasıl düzelteceğiniz konusunda hiçbir fikriniz olmayabilir. İşte bu yüzden denemeler yapabileceğiniz, bir sayıyı değiştirip düzenin nasıl bozulduğunu görebileceğiniz ve web kurallarının nasıl çalıştığına ilk elden tanık olabileceğiniz güvenli bir alana ihtiyacınız vardır.

Kodunuzun Anında Hayat Bulduğunu Görün

HTML ve CSS öğrenmenin en kesin yolu anlık geri bildirim almaktır. Bir satır HTML yazdığınızda, sonucu ekranınızda anında görebilmek çok yardımcı olur.

<h1>Harika Web Sitem</h1> yazdığınızı ve yazmayı bitirdiğiniz saniyede ekranınızın sağ tarafında kalın bir başlığın belirdiğini hayal edin. Ardından, h1 { color: orange; } yazıp o metnin gözlerinizin önünde parlak bir turuncuya dönüşmesini izleyin.

Bu, öğrenmeyi bir oyuna dönüştürür. Bir sonuç görmeden önce haftalarca teori çalışmak yerine, en başından itibaren bir şeyler yaratırsınız. Yazı tipi boyutunu değiştirmekten, kenarlık eklemekten veya ne olacağını görmek için bir resmi hareket ettirmekten çekinmeyin! Harika görünüyorsa ne ala. Eğer bozulursa, CSS düzen kurallarının nasıl çalıştığı hakkında yeni bir şey öğrenmiş olursunuz.

Düzeniniz Bozulduğunda Ne Olur?

HTML ve CSS yazmak bazen oldukça sinir bozucu olabilir. Bir butonun neden kutunun tam ortasına yerleşmeyi reddettiğini anlamaya çalışarak CSS kodunuza otuz dakika boyunca bakabilirsiniz. Yazımınızı kontrol eder, sayfayı yenilersiniz ama kesinlikle hiçbir şey değişmez. Hatta dizüstü bilgisayarınızı pencereden fırlatmak bile isteyebilirsiniz!

Genellikle sorun çok ufak bir şeydir; CSS'inizde eksik bir noktalı virgül ; veya yanlış yazılmış bir HTML tag (etiketi) gibi. Statik bir ders kitabı veya videoyla tek başınıza öğrenmeye çalıştığınızda, bu küçük hatalar ilerlemenizi günlerce durdurabilir. Kolayca cesaretiniz kırılabilir ve kod yazmanın sizin için çok zor olduğunu düşünebilirsiniz.

Ancak pratik yaparken hemen yanınızda oturan arkadaş canlısı küçük bir yardımcınız olduğunu hayal edin. HTML düzeniniz her bozulduğunda veya bir yazı tipi rengini değiştirmeyi reddettiğinde, doğrudan derslerin içine entegre edilmiş yapay zeka asistanı Bugsy'ye sorabilirsiniz. Bugsy size sadece kopyalayıp yapıştıracağınız cevabı vermez. Kodunuzu işaret ederek şöyle der: "Hey, 14. satıra bak! Oradaki HTML etiketini kapatmayı unutmuşsun," veya "Kutu öğesindeki CSS margin ayarlarını kontrol etmeyi dene."

Bu, hiç uyumayan, sorularınızdan asla bıkmayan ve yüzünüzde bir gülümsemeyle ilerlemeye devam edebilmeniz için kodunuzu gerçek zamanlı olarak düzeltmenize yardımcı olan sabırlı bir arkadaşa sahip olmak gibidir.

HTML ve CSS'te Ustalaşmanın 2 Pratik Yolu

1. Küçük HTML Bileşenleri İnşa Edin

İlk günden bütün bir web sitesini kurmak için neden acele edesiniz ki? Spoiler: Bu, büyük bir baş ağrısına giden en hızlı yoldur. Birkaç gün içinde devasa, karmaşık bir düzen oluşturmaya çalışmak yerine, neden sadece küçük ve spesifik parçalara odaklanmıyorsunuz?

Sadece tek bir buton, temel bir giriş formu veya basit bir navigasyon barı için HTML etiketlerini yazmayı öğrenmek için sadece on dakika harcadığınızı hayal edin. Kulağa çok daha iyi geliyor, değil mi? Bu küçük parçaları yazmak beyninize hızlı ve mutlu bir başarı hissi verir. Ve farkına bile varmadan, stres yaşamadan eksiksiz ve güzel bir web sayfası oluşturmak için tüm bu küçük parçaları birleştirmeye başlayabilirsiniz.

2. CSS'inizi Bilerek Bozun

İşte size bir sır: Kodunuza karşı çok nazik davranmak sizi yavaşlatır. Her şey her zaman... mükemmel görünüyorsa; padding, margin veya hizalama gibi zorlu CSS özelliklerinin nasıl çalıştığını nasıl öğreneceksiniz?

Kusursuz çalışan bir kutu düzenini alıp boyutunu 20 pikselden 200 piksele çıkarırsanız ne olur? Hadi, deneyin! Metniniz nereye uçtu? Ekrandan tamamen kayıp mı oldu?

Tasarımınızı bilerek bozmak kulağa biraz çılgınca gelebilir, ancak beyninizin CSS kurallarının gerçek dünyada nasıl davrandığını öğrenmesinin en hızlı yolu kesinlikle budur. Bu yüzden çekinmeyin – bugün düzeninizi bozun ve neler olacağını görün!

Dokümantasyona Hazırlanmak

Temel HTML sayfaları yazma ve bunları CSS ile şekillendirme konusunda kendinizi rahat hissettiğinizde, yepyeni bir kapı açılır. Daha büyük projelere bakmaya başlarsınız ve işte o zaman bir yazılımcının gerçek en iyi arkadaşıyla tanışırsınız: programlama dokümantasyonu.

Dokümantasyonu yazılımlar, araçlar ve gelişmiş kodlar için nihai bir kılavuz olarak düşünün. Bir sistemin tüm kurallarını ve özelliklerini, bunların nasıl kullanılacağına dair net örneklerle birlikte listeler.

Programlama dokümantasyonunu nasıl kullanacağınızı öğrenmek, yasal bir hile kodu keşfetmek gibidir. Tek bir şeyi bile ezberlemek zorunda değilsiniz! HTML ve CSS'in temellerinde ustalaştıktan sonra, herhangi bir dokümantasyonu açıp bir örneği inceleme ve bunu büyük projeler inşa etmek için kullanma özgüvenine sahip olacaksınız. Pratik yaptığınız çalışma alanının hemen yanında bu kılavuzların nasıl çalıştığını anlamak, farkına bile varmadan sizi tamamen bağımsız bir geliştiriciye dönüştürür.

HTML and CSS 20'den Fazla Dilin Kapısını Aralar

HTML ve CSS'in birlikte nasıl çalıştığını anladığınızda, beyninizin yazılıma bakış açısı değişir. Uygulamaların, oyunların ve en sevdiğiniz platformların arkasındaki gizli iskeleti görmeye başlarsınız.

HTML ve CSS mükemmel birer giriş aracıdır. Karmaşık bir mantık veya ağır matematik gerektirmezler, bu da başlangıçta onları inanılmaz derecede kullanıcı dostu yapar. Renkler, yazı tipleri ve düzenler gibi görsel şeylerle oynayabilir, böylece ilerlemenizi anında görebilirsiniz.

But once you master the art of building and styling a page, you will naturally start asking more exciting questions:

• Bu butonun kullanıcı verilerini kaydetmesini nasıl sağlarım?
• Kullanıcının ne seçtiğini hatırlayan bir karanlık mod anahtarını nasıl oluşturabilirim?
• Tüm sayfayı yenilemeden yeni içeriği nasıl yüklerim?

Bu noktaya ulaştığınızda, tebrikler – JavaScript, Python veya PHP gibi diller için hazırsınız demektir! Temeli zaten bildiğiniz için, "gerçek" bir programlama dilini öğrenmek çok daha kolay hale gelir. Artık nasıl inşa edeceğinizi zaten bildiğiniz o güzel web sayfalarını kontrol etmek için script'ler (kodlar) yazabilirsiniz.

İster mobil uygulamalar geliştirmek, ister veri bilimine adım atmak, ister harika bağımsız (indie) video oyunları oluşturmak isteyin; yolculuk neredeyse her zaman bu iki basit düzen aracıyla başlar.

Web'deki Kendi Köşenizi İnşa Etmeye Bugün Başlayın

İnternet devasa, güzel ve kaotik bir alandır ancak tamamen basit araçlar kullanan insanlar tarafından inşa edilmiştir. Ve HTML ile CSS, teknoloji sihirbazlarına veya matematik dehalarına özel değildir. Yoktan havalı bir şeyler yaratmak isteyen herkese aittir.

Başlamak için çok lüks bir bilgisayara, üniversite diplomasına veya aylarca süren derslere ihtiyacınız yok. İhtiyacınız olan tek şey biraz merak, komik hatalar yapmaya açık olmak ve kod yazıp sonuçları anında görebileceğiniz canlı bir platformdur.

Öyleyse, neden hala tüm bu harika web sitelerini sadece kaydırıp geçiyor ve nasıl yapıldıklarını merak ediyorsunuz? Hemen kısa bir mini ders alın, ilk HTML satırınızı yazın ve bugün internetteki kendi köşenizi inşa etmeye başlayın!

İlk Web Sayfanızı Bugün İnşa Edin