Neden Kodlamayı Öğrenmelisiniz (Biraz): HTML ve CSS'ye Giriş
Yayınlanan: 2021-08-15Online mağaza açmak hiç bu kadar kolay olmamıştı . Shopify gibi platformlar sayesinde birkaç saat içinde bir tema satın alabilir, ürünlerinizi yükleyebilir ve müşterilerinize satış yapabilirsiniz! Giriş engeli o kadar düşüktür ki neredeyse herkes yapabilir.
Başlamak bu kadar kolay olsa da, bu basitliği olduğu gibi kabul etmek de bir o kadar kolay. Sonunda mağazanıza bir şeyler eklemek veya değiştirmek isteyeceksiniz ve temanızın bunu desteklemediğini fark edeceksiniz. Geliştiriciler ucuz değildir ve yapmak isteyeceğiniz son şey, kendiniz yapabileceğiniz bir şey için başka birine ödeme yapmaktır.
Web sitelerinin nasıl çalıştığının temellerini öğrenmek için önceden biraz zaman harcayabileceğinizi ve yolda biraz zaman ve paradan tasarruf edebileceğinizi söyleseydim ne olurdu?
Bu makalenin sonunda, HTML ve CSS'nin temellerini ve kendi mağazanızda tamirat yapmaya başlamak için yeterince bilgi sahibi olmalısınız.
Hazırlanmak için birkaç dakikanızı ayırın ve başlayalım!
HTML ve CSS nedir?
HTML, Köprü Metni İşaretleme Dili anlamına gelir. Web'in en eski ve en önemli temel dillerinden biridir. Bu sayfadaki içeriğin yapılandırılmasından ve sunulmasından sorumludur!
CSS, Basamaklı Stil Sayfaları anlamına gelir. HTML'nin stilini ve biçimlendirmesini sağlamaktan sorumludur.
Birlikte, bunlar herhangi bir web sitesinin gerekli yapı taşlarıdır. Bu makalede, temel bilgilerde size yol göstereceğim ve ilk web sayfanızı nasıl kodlayacağınızı ve şekillendireceğinizi göstereceğim.
Bill Murray'in (ki değil) büyük bir hayranı olduğum için, internette Bill için kendi tapınağımızı yaratacağız.
İlk olarak, güçlerini ve yeteneklerini gerçekten çok yönlü anlamak için HTML ve CSS'ye daha derinden dalalım.
Bir Web Sitesinin Anatomisi
HTML ve CSS'yi bir evin yapısal bölümleriyle karşılaştırarak birlikte nasıl çalıştığını kolayca anlayabiliriz.
Her evin duvarlarının arkasında, yapısından sorumlu bir çerçeve bulunur. HTML'yi bir ev çerçevesi gibi düşünün. Bir web sitesinin yapısından sorumludur.
Ev benzetmemize bağlı kalarak, CSS boya renkleri, yemek odasının boyutları, ahşap zeminlerin rengi ve yemek odası masasının şekli ve stili gibi şeylerden sorumludur.
Bazı temel HTML işaretlemelerine bakalım ve satır satır inceleyelim.
doktip
<!DOCTYPE html> etiketi, tarayıcının çalışmak istediğimiz belge türünün HTML olduğunu bilmesine yardımcı olur.
Kafa
<head> etiketinin içinde, belgemizin tüm meta verilerini sakladığımız yer bulunur. Bu veriler başlık, stiller (CSS), açıklama ve daha fazlasını içerir. Bu veriler son kullanıcıya gösterilmez, ancak tarayıcılar bunu, belgenin başlığının ne olması gerektiğini veya son kullanıcıya gösterdiğinde hangi stilleri kullanması gerektiğini belirlemek için kullanır.
İlan
Bir HTML sayfasının <head> bölümünde bulunan diğer bazı öğeler , yazar bilgilerini, sayfa açıklamasını veya favicon için kullanılan bir görüntünün bağlantısını (tarayıcı sekmesindeki küçük simge) içerebilir.
Vücut
<body> etiketi, web sitesi için tüm işaretlemeyi (kodu) içerir. Bu, son kullanıcının sitemizi görüntülediğinde göreceği tek koddur.
Bir Web Sitesi Oluşturmak için İhtiyacınız Olan Araçlar
HTML yazmaya başlamak için süslü, pahalı bir yazılıma ihtiyacınız olduğunu düşünebilirsiniz, ancak buna ihtiyacınız yok. Aslında, ihtiyacınız olan şeye zaten sahipsiniz.
PC kullanıyorsanız, NotePad programını açın. Apple Mac kullanıyorsanız, TextEdit'i açın.
Artık metin düzenleme programınızı açtığınıza göre, yukarıdaki temel HTML işaretlemesini genişletirken beni takip edin. Aşağıdaki kodu kopyalayın (Windows'ta Ctrl + C / Mac'te Cmd + C) ve aşağıdaki kodu metin düzenleyicinize yapıştırın (Windows'ta Ctrl + p / Mac'te Cmd + P).
<!DOCTYPE html>
<html>
<kafa>
<title>Sayfanızın başlığı</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu bizim ilk paragrafımız.</p>
</body>
</html>
Bu dosyayı masaüstünüze kaydedin ve web tarayıcınızda açın. Şimdi kodunuzun tarayıcı tarafından çevrildiğini veya oluşturulduğunu görmelisiniz ve şöyle görünmelidir:
Başlık öğesi (<h1>)
<h1> etiketi, belirli bir metne dikkat ve tanım getirmek istediğinizde kullanılır. Bu durumda, “Merhaba Dünya!” metnini istiyoruz. sonraki metinden daha büyük ve daha belirgin olması için.
Kutunun dışında, HTML'de kullanabileceğiniz altı farklı başlık etiketi vardır: h1, h2, h3, h4, h5 ve h6.
Yazı tipi boyutu, attığınız her "adımda" küçülür; H1 en büyük olacak ve H6 en küçük olacak. Varsayılan olarak, onları sayfadaki diğer öğelerden ayırmak ve kullanıcıya görsel hiyerarşi sağlamak için bir miktar kenar boşluğuna (veya etraflarında boşluk) sahip olacaklardır.
Başlık, başlık ve/veya paragraf etiketlerini değiştirmeyi denemek için bir dakikanızı ayırın. Bir değişiklik yaptıktan sonra kaydedin ve ardından tarayıcınızı yenileyin. Tebrikler, HTML'yi ilk kez düzenlediniz!
Yine de sıkıcı görünüyor, değil mi?
Haydi sayfamıza biraz stil ekleyelim ve CSS'nin gerçek gücü hakkında daha fazlasını öğrenelim.
Bu HTML öğelerine kendi stillerimizi eklemek için belgemizin <head> içine bir <style> etiketi eklememiz gerekiyor .
Bu etiket tüm CSS'lerimizi sarar. Tarayıcının stil kılavuzu olarak <style> etiketinin içinde ne olduğunu düşünün .
Yeni bir satıra <title> etiketi altında, böyle bir stil etiketi ekler:
<title>Sayfanızın başlığı</title>
İlan
<stil>
</style>
Stil etiketinin içinde tüm bildirimlerimizi girebileceğimiz yer var. Bir CSS bildirimi, bir özelliğin ardından bir değerden oluşur .
<h1> 'imizin rengini metnimizin geri kalanından farklı yapalım çünkü bu en önemli ve öne çıkmasını istiyoruz. Aşağıdakileri <style> etiketleriniz arasına ekleyin , dosyanızı kaydedin ve tarayıcınızı yeniden yenileyin.
<stil>
h1 { renk: mavi; }
</style>
Şimdi umarım buna benzeyen bir şey görmelisiniz! Bizim “Merhaba Dünya!” metin şimdi mavi. Basit, değil mi?
İşte, başardın! CSS kullanarak bir HTML öğesinin stilini başarıyla değiştirdiniz. Hâlâ eğleniyor muyuz?
Sayfamıza resim ekleme
Sayfanıza ekleyebileceğiniz başka birçok unsur var, ancak herhangi bir web sitesinde en belirgin olanlardan biri, her şeye kadir görüntüdür. Dahil ederek kolayca bir resim ekleyebiliriz. şöyle etiketleyin:
<img src= “https://www.fillmurray.com/400/500” >
Not: Gösteri amacıyla, www.fillmurray.com adlı bir görüntü yer tutucu hizmeti kullanıyorum. İsterseniz yerel bilgisayarınızda bir görüntü kullanabilirsiniz.
Bir web sitesinden görüntü almanın alternatif (Uzman İpucu) yolu: Kullanmak istediğiniz bir web sitesinde bir görüntü bulun ve üzerine sağ tıklayın. Resim Adresini Kopyala'yı tıklayın ve o resmin URL'si panonuzda olacaktır. Tarayıcınıza bağlı olarak, ifadeler biraz farklı olabilir. Google Chrome'u kullanıyorum. Hotlink'in aşırı kullanılmasını önermiyorum ama bu demo için bu çok da önemli değil.
Bu görüntü öğesini kopyalayıp yapıştırın ve tam kod bloğunuzun benimki gibi görünmesi için paragraf etiketinizin altına yerleştirin:
<!DOCTYPE html>
<html>
<kafa>
<title> Sayfanızın başlığı </title>
<stil>
h1 { renk : mavi;}
</style>
</head>
<body>
<h1> Merhaba Dünya! </h1>
<p> Bu bizim ilk paragrafımız. </p>
<img src= “ https://www.fillmurray.com/400/500 ” alt=”Bill Murray'in resmi” >
</body>
</html>
Dosyanızı kaydedin ve tarayıcınızı yeniden yükleyin; şimdi şöyle bir şey görmelisiniz:
Dikkat ettiyseniz, <img> etiketinde alt=”image of Bill Murray” olan başka bir özellik fark ettiniz . Tarayıcı kodu deşifre ettiğinden ve sizin ve benim gibi işlenmiş çıktıyı göremediği için, gösterdiği şeyin bağlamını bilmesi için bir yol gerekir.
İlan
Resmimize bir ALT etiketi (alternatif metin) ekleyerek tarayıcıya resmimizin konusunun ne olduğunu söyleyebiliriz.
Bu aynı zamanda SEO (arama motoru optimizasyonu) için de çok önemlidir ve daha da önemlisi, bu metin bir ekran okuyucu kullanarak görme engelli kullanıcılar için sesli olarak okunur.
Peki ya Bağlantılar?
Bağlantıları örtmeden HTML/CSS'ye giriş tamamlanmış sayılmaz! Bir web sitesi oluştururken, ister harici kaynaklara ister kendi web sitenizdeki diğer dahili sayfalara bağlantı verme becerisine sahip olmak isteyeceksiniz.
Çapa elemanı hakkında konuşalım. Bir çapa öğesinin gerçek büyüsü, aslında onun href niteliğidir. Bill'in Wikipedia sayfasına bir bağlantı ekleyerek bir bağlantı etiketinin yapısını gösterelim.
<a href= “www.google.com” > Wikipedia girişini okuyun </a>
Bu kod, tarayıcıya, bir kullanıcı "Wikipedia girişini oku" metnine tıkladığında, onları www.google.com'a götürmesini söyler.
Bu kodu başlık elemanımızın hemen altına ekleyelim, böylece kod bloğumuz şimdi şöyle görünecek:
<!DOCTYPE html>
<html>
<kafa>
<title> Sayfanızın başlığı </title>
<stil>
h1 { renk : mavi;}
</style>
</head>
<body>
<h1> Merhaba Dünya! </h1>
<a href= “https://en.wikipedia.org/wiki/Bill_Murray” > Wikipedia girişini okuyun </a>
<p> Bu bizim ilk paragrafımız. </p>
<img src= “https://www.fillmurray.com/400/500” alt= “Bill Murray'in görüntüsü” >
</body>
</html>
Kaydet'e basın ve tarayıcıyı yenileyin ve umarım sizinki benimki gibi görünür.
Bitiş Çizgisinden Geçmek
Devam ettim ve küçük saygımı Bill Murray'e verdim ve işte nihai sonucum. Aşağıda eklenen stillerden bazılarını inceleyeceğim.
Davul lütfen…
Şimdi, bunun hakkında yazılacak bir şey olmadığını görebilirsiniz, ancak bu tasarım gereğidir. Bu, bu sayfanın nasıl görünebileceği veya şekillendirilebileceği konusunda buzdağının sadece görünen kısmı. Aşağıdaki stil yöntemlerinin her birinin ne yaptığını anlamanız için her şeyi basit tutmak istedim.
İlan
Bizi bu kadar ileri götürmek için eklemem gereken küçük CSS'ye geçelim.
Vücudun Şekillendirilmesi:
İlk olarak, sayfanın gövdesine şunu ekledim:
vücut {
arka plan rengi: #eee;
yazı tipi ailesi: Helvetica, Arial, sans-serif;
metin hizalama: merkez;
kenar boşluğu: 25 piksel;
}
arka plan rengi
Onaltılık renk değeri #eee kullanarak sayfanın arka plan rengini çok açık griye ayarladım. Bunlar hakkında daha fazla bilgi edinebilir ve burada MOZ'da bazı örnekler görebilirsiniz.
font ailesi
Yazı tipini varsayılan Times New Roman tarayıcılarının kullandığından değiştirmek istedim. Bunun için ilk tercihim olarak Helvetica'yı (kullanıcının bilgisayarında o yazı tipi yüklüyse), ikinci tercihim olarak Arial'i (kullanıcının Helvetica'sı yoksa varsayılan olarak Arial olur) ve son yedek olarak seçtim. , temel bir sans serif yazı tipi.
Metin hizalama
Sayfamdaki tüm metnin ortaya hizalanmasını seçtim. Sol ve sağ gibi değerler için birkaç seçenek daha var, ancak bunun için en iyi ortalanmış göründüğünü düşündüm.
kenar boşluğu
Biraz nefes alabilmek için belgenin gövdesine küçük bir kenar boşluğu ekledim.
Resmimizi şekillendirmek:
Son olarak, Bill'in güzel yüzünü şekillendirdim, yani görüntü öğesini kastediyorum.
resim {
kenarlık: 10 piksel katı #41bcd6;
kutu gölgesi: 2px 5px 5px #999;
dolgu: 10 piksel;
sınır yarıçapı: 5 piksel;
}
Pek bir şey yapmadım ama Bill'in fotoğrafına sayfada biraz yer vermek istedim.
sınır
Resmin etrafına 10px kenarlık ekledim. #41bcd6, açık mavi bir renk oluşturan başka bir onaltılık renk değeridir (gizli bilinçaltım Steve Zissou renk temamın bir parçası).
kutu-gölge
Görüntüye üç boyutlu bir his vermek istedim, bu yüzden ona hafif bir gölge ekledim. box-shadow özelliği, gölgenin uzunluğunu, bulanıklığını ve rengini belirleyen piksel ve renk değerlerini kabul eder. Kutu gölgesi bildirimi hakkında daha fazla bilgi edinmek için Moz, burada sizin için iyi bir şekilde parçalıyor.
dolgu malzemesi
Resmin daha çok resim çerçevesi gibi görünmesi için çerçeve ile arasına 10px dolgu ekledim.
sınır yarıçapı
Sadece CSS'nin daha havalı özelliklerinden birini göstermek için, border-radius kullanarak görüntünün köşelerini yuvarlattım. Web siteleri oluşturmaya başladığımda, böyle bir şey yoktu ve web'de yuvarlak köşeler oluşturmak aslında oldukça zordu. O zamandan beri uzun bir yol kat ettik ve şimdi oldukça basit. px veya ems gibi bir değeri kabul eder ve burada değeri 5px olarak ayarlayarak farkedecek kadar yuvarlamayı seçtim.
Çözüm
Bu makale boyunca bir web sitesinin temel anatomisini öğrenmek için birlikte çalıştık. Ayrıca, bir neslin tüm zamanların en büyük aktörlerinden birine, nihayetinde oldukça şaşırtıcı, küçük, tek sayfalık bir övgüye dönüşen bazı basit HTML ve CSS öğrendik.
Yine de, tüm ciddiyetle, umarım benimle birlikte takip edebilmiş ve ilk temel web sitenizi oluşturabilmişsinizdir. Şimdi, Bill Murray favori aktörünüz değilse, favori aktörünüzü, grubunuzu veya ne isterseniz onu sergilemek için bu kodu düzenlemeniz için size meydan okuyorum.
Herhangi bir zamanda bu koda başvurmanız gerekirse, geri dönün ve bu makaleyi okuyun veya kolaylık olması için CodePen'e buraya koydum.
Sadece HTML + CSS ile yapabileceğiniz çok eğlenceli şeyler var. İşte öğrenmenizi genişletmeniz için birkaç harika kaynak:
İlan
- Code Academy: HTML/CSS Kursuna %100 ÜCRETSİZ giriş
- CSS Zen Garden: Hepsi aynı HTML işaretlemesini kullanan 100 farklı görünümlü web sitesine sahip olabileceğinizi anlamama yardımcı olmak için benim için gerçekten "tıklanan" web'deki ilk örnek
- CSS Animasyonları
- Mona Lisa sadece CSS kullanıyor
- Yalnızca CSS kullanarak animasyonlu husky köpek
- CodePen: CodePen, HTML, CSS ve JavaScript kodunuzu CANLI test etmek ve sergilemek için çevrimiçi bir araçtır
Bu makalede ciddi olarak sadece yüzeyi çizdik, bu yüzden daha fazlasını okumanızı, bazı çevrimiçi kurslar almanızı ve bilginizi zorlamaya devam etmenizi öneririm!
