Yeni Başlayanlar İçin Kendi Web Sitenizi Oluşturma: 5 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:18

İster bilgisayar programcısı olmayı hayal etmiş olun, ister bir web sitesi kullanmış olun, kabul edelim ki neredeyse hepimiziz, bilgi teknolojisi iş dünyasının bel kemiği haline geldi. Programlama ilk başta biraz korkutucu görünse de amacım size web tasarımının temellerini öğretmek, böylece bu eğitimden sonra kendi web sayfanızı oluşturabileceksiniz. Bunun dışında, hadi başlayalım!

Gereçler

• Bir Macintosh veya Windows PC (Linux dağıtımları da kullanılabilir olsa da, yeni başlayanlar için bir giriş olduğu için şimdilik bunları atlıyorum).
• Seçtiğiniz metin düzenleyici (Windows'ta Not Defteri, Mac'te TextEdit) veya seçtiğiniz IDE. Tecrübelerime göre, Visual Studio Code'un kendim için en iyi şekilde çalıştığını buldum, bu yüzden buradan kontrol etmenizi de tavsiye ederim: https://code.visualstudio.com/ tüm işletim sistemi platformlarında çalıştığından bahsetmiyorum bile.

1. Adım: Etiketler ve Biraz Geçmiş

Metin düzenleyici veya IDE seçiminize karar verdikten sonra, temel bilgilerle başlayalım.

İster inanın ister inanmayın, HTML veya HyperText Markup Language yaklaşık 30 yıldır var ve her yıl dilde daha fazla iyileştirme geldi. Şimdi, bir tarayıcı ekrana ne yazacağını nasıl yorumluyor diye soruyor olabilirsiniz. Bu birkaç bölümde yapılır:

HTML belge biçimlendirmesi kolaydır. Baş ve gövde olarak bilinen iki bölümünüz var. Bir web sitesinin başı, kullanıcının göremediği bir kod içerir. Bu, stil sayfalarını birbirine bağlamak ve sitenin düzgün görüntülenmesi için gereken diğer gerekli bitleri bildirmek için kullanılır. Kafayı takip eden gövde, göründüğü gibi, web sitesinin gövdesidir. Burası, sesinizi konuşabileceğiniz ve izleyicilere harika HTML becerilerinizi gösterebileceğiniz yerdir! Artık sadece gövdeye metin yazmak ve tam istediğiniz gibi görünmesini sağlamak kadar kolay değil, ancak etiket dediğimiz şeylerin kullanımıyla bir anlamda neredeyse bu kadar kolay.

Temel HTML etiketlerinden bazıları şunlardır:

• başlık – tarayıcıya sayfanın başlığının ne olduğunu söylemek için kullanılır. Bu aynı zamanda bir web sayfasının sekmesine baktığınızda gördüğünüz şeydir.
• h1, h2, h3, h4 – h1 en büyük ve h4 en küçük olmak üzere farklı başlık boyutları için kullanılır. Bir sonraki bölümde buna daha fazla değineceğim.
• p - paragraf, metnin paragraflarını yazmak için kullanılır. Kağıttaki paragraflar gibi.
• br - metinle aynı hizada bir son ekleyen break.
• a – tıklanabilir bir bağlantı gibi diğer sayfalara bağlantılar oluşturmak için kullanılır.
• img - bir resmi web sayfasına bağlamak için kullanılır.
• ul, ol, li – sırasız listeler, sıralı listeler ve liste öğeleri.
• – kodda son kullanıcı tarafından görülmeyecek satır içi yorumlar yapmak için kullanılır.

Ve işte bazı CSS etiketleri (görsel):

• color – web sayfasındaki belirli bir öğeye veya kümeye belirli bir renk atamak için kullanılır.
• yazı tipi boyutu - sayfadaki yazı tipi boyutunu değiştirmek için kullanılır.
• arka plan rengi – belirli bir öğenin veya tüm sayfanın arka plan rengini değiştirmek için kullanılır.

Biraz kaybolmuş hissediyorsanız size yardımcı olması için küçük bir hile sayfası da ekledim, ama endişelenmeyin, kısa sürede asılacaksınız! Ayrıca www.w3schools.com programlama sorularınız için harika bir kaynaktır. Kesinlikle beni bir zaman ya da çok kurtardılar.

Esasen tarayıcının dosyayı nasıl okuduğu kolaydır. Satır satır gider ve işlevi işleve göre işler. Karakterler, aşağıdaki gibi bir etiketi bildirmek için kullanılır:

ve gibi etiketi kapatmak için kullanılır

. Bu önemlidir, aksi takdirde tarayıcı nerede duracağını bilmez. arasında

ve

etiketleri, istediğinizi girdiğiniz yerdir!

2. Adım: Düzenleyici Kurulumu

Artık bir HTML web sitesinin temel öğeleri hakkında biraz bilgi sahibi olduğumuza göre, hadi başlayalım ve kendimiz deneyelim. Bu sonraki adımda, web sitesini programlamak için Visual Studio Code kullanacağım, ancak yalnızca Notepad veya TextEdit'i kullanmaktan daha rahatsanız, kodun düzeni aynı olacaktır.

Not Defteri içinde:

• Not Defteri ile program, başlamayı çok kolaylaştıran boş bir dosyayla başlar. Bu aynı zamanda VS Code kullanmaya kıyasla birkaç adım atlamamıza da izin verecektir. Dosyayı doğru biçimde kaydederek başlayalım.
• Dosya > Kaydet'e tıklayın
• Dosyanız için bir ad ve ardından.html girin ve Farklı kaydet türü altında tüm dosyaları seçin. Kaydet'i tıklayın.

VS Kodu içinde:

• IDE'nin tüm özelliklerinden yararlanmanın en iyi yolu, dosyayı oluşturup IDE'ye ne tür bir dosya olduğunu söyleyerek başlamaktır. Bu şöyle yapılabilir:
• Dosya > Yeni Dosya'yı tıklayın
• Boş bir dosya açılır
• Daha sonra, boş olsa da dosyayı kaydederek başlamak isteyeceksiniz, çünkü bu, IDE'nin son ürünün ne tür bir dosya olacağını anlamasına izin verecektir. Kaydederken, dosya adının sonuna.html uzantısını eklediğinizden emin olun. Kaydet'i tıklayın.

3. Adım: Planlar

filename.html dosyanızı başarıyla kaydettikten sonra, web sayfamız için çerçeve oluşturmaya başlayalım. HTML sayfasının geri kalanını oluşturmaya başlamadan önce, dosyanın hangi önemli kısımlarını bildirmemiz gerektiğini yukarıdan hatırlayın. Uzman ipucu: site çerçevesini başlatırken, !DOCTYPE HTML etiketi tarayıcıya okuduğu dosyanın bir html dosyası olduğunu söyler. Aynı dosyada farklı kod türlerine sahipseniz ve yorumlayıcılar arasında geçiş yapmak istiyorsanız bu kullanışlı olabilir. Bu talimatın kapsamı için, buna çok fazla dokunmayacağız, ancak bu Eğitilebilir Tablodan sonra HTML geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, bir şans vermekten çekinmeyin. En iyi uygulama için dosyanın en üstüne !DOCTYPE HTML etiketini ekleyeceğim. ile açıp kapatmayı unutmayınız.

Programlamaya başlamadan önce dosyayı kaydetmenin kullanışlı olduğu yer burasıdır, artık IDE bir HTML dosyasıyla çalıştığını bildiğine göre, ifadeyi bitirmek için intellisense kullanacak ve yanlışlıkla bir etiketi kapatmayı unutmamanız için öneriler sunacaktır.. Not Defteri kullananlarınız için intellisense'in IDE'deki gibi mevcut olmadığını unutmayın. Head ve body etiketlerini aşağıdaki gibi girerek başlıyoruz: (ikinci resme bakın).

Belge kurulumu tamamlandığına göre artık yarışlara çıkıp biraz eğlenebiliriz!

Adım 4: Kod; Kod; Kod;

Yeni oluşturduğumuz dosyamıza bir başlık ekleyerek başlayabiliriz. Ne istersen gir. Bunun tarayıcı sekmesinde görünen ad olduğunu unutmayın. Ayrıca sitemiz için bir başlık girerek başlayalım. Bunu nasıl yaptığımızı önceden hatırlayın. h1/2/3/4'ü duydum mu? Bu doğru!

Devam etmeden önce, değişikliklerimizin tarayıcıya nasıl yansıdığını gerçek zamanlı olarak görebilmemiz için dosyamızı bir tarayıcı penceresinde açmayı faydalı buluyorum. Bunu, dosyayı kaydetmek için Dosya > Kaydet'i tıklatarak, HTML dosyasının kaydedildiği klasöre giderek yapabilirsiniz, benim için bu masaüstüdür ve dosyayı açmak için istediğiniz tarayıcıyı kullanın ve buna bakar mısınız?, işte web sayfanız! Not: Kişisel olarak bilgisayarımda tarayıcı tercihim olarak Safari kullanıyorum, ancak web geliştirmede Firefox, neredeyse her web komut dosyası diliyle çalıştığı için test için altın standart tarayıcıdır.

Gördüğünüz gibi başlık, h1 başlığımızı görmenin yanı sıra sekmede gösteriliyor. IDE'de bir değişiklik yaptığınızda ve kaydettiğinizde olduğu gibi, dosyanın tarayıcı penceresinin IDE ile birlikte açılmasını tercih ederim, değişiklikler tarayıcıda anında gerçekleşir.

Etiketler eklemeyi ve HTML ile yapabileceğiniz farklı şeylerle oynamayı denemekten çekinmeyin. Aşağıda görebileceğiniz gibi, Instructables.com'a birkaç paragraf, ara, harici köprü, bir resim ekledim (bu, harici bir kaynaktan veya. HTML dosyasının depolandığı dizin içinde bağlanabilir), sırasız liste, sıralı liste ve son olarak bir yorum örneği.

Biraz renk ve düzenleme seçenekleri eklemeyi denemek isterseniz, dosyanın başına bir stil etiketi girebilirsiniz. Bu, HTML'den CSS'ye geçtiği noktadır, ancak görsel uğruna, bunun nasıl çalıştığını görebilmeniz için birkaç satır gireceğim. Temelde CSS nasıl çalışır, belirli bir HTML öğesi için kodunuzu girmek için { } köşeli parantezlerini kullanarak işlevler içindeki HTML öğelerini kontrol etmenize olanak tanır.

Adım 5: Son Düşünceler

İşte buyur; ilk web sayfanızı başarıyla oluşturdunuz! Bu bir başlangıç kılavuzu olduğu için, HTML ile ilk deneyiminizi eğlenceli hale getirmek istiyorum. Deneyimlerime göre öğrenmenin en iyi yolu, dalıp bir şeyler denemek, kodunuzla neler yapabileceğinizi görmek ve kodunuzu nasıl kırabileceğinizi görmek. Bu bütünlük oluşturur ve kodun nasıl ve neden bu şekilde çalıştığını daha iyi anlamanıza yardımcı olur. www. W3Schools.com'un sorular için harika bir kaynak olduğunu ve hatta kodunuzu denemek için tarayıcı içinde sanal bir sanal alan sunduğunu unutmayın. Umarım bir şeyler öğrenmişsinizdir ve mutlu kodlamalar!