Bir statik web sitesinin temel bileşenlerinin nasıl yazılacağı hakkında adım adım rehber. Statik bir web sitesi oluşturmak için öncelikle HTML temellerini öğrenmek gerekmektedir. HTML etiketlerini ve yapılarını kullanarak web sayfalarımızı oluşturabilir ve düzenleyebiliriz. CSS kullanarak ise web sitesine stil ve görünüm verebiliriz. Dosya yapısı da önemlidir, bu nedenle bir statik web sitesi için ideal dosya yapısını ve dosyaların nasıl organize edileceğini öğrenmeliyiz. Ana sayfa dosyası ve stil dosyasını içeren index.html ve stil.css dosyalarına dikkat etmeliyiz. Ayrıca, web sitesine resim ve diğer medya dosyalarını nasıl ekleyeceğimizi de bilmeliyiz. Web sitesini yayınlamak için uygun bir hosting hizmeti seçmek ve yayınlama adımlarını takip etmek gerekmektedir. FTP kullanarak web sitesini sunucuya yükleyebiliriz. Alternatif yöntemlerle de web sitesini yayınlayabiliriz. Tüm bu adımları takip ederek, kendi statik web sitemizi oluşturabiliriz.
HTML Temelleri
HTML temelleri, statik bir web sayfasında etiketlerin ve yapıların nasıl kullanılacağını açıklar. HTML, Hypertext Markup Language’ın kısaltmasıdır ve bir web sayfasının yapısını belirlemek için kullanılır. Web sayfası içeriği, etiketler ve içerikleri arasına yerleştirilen HTML elemanlarıyla oluşturulur.
HTML etiketleri, br gibi tek etiketli ve p gibi çift etiketli olmak üzere ikiye ayrılır. Tek etiketli etiketler içerik olmadığından hemen kapanırken, çift etiketli etiketler içerikle birlikte kullanılır ve başlangıç etiketi ile kapatma etiketi arasına içeriği yerleştirirsiniz. Örneğin, bir paragraf oluşturmak için aşağıdaki şekilde bir etiket yapısı kullanabilirsiniz:
Örnek bir paragraf.
HTML ayrıca başlıklar, bağlantılar, resimler, listeler, tablolar ve daha fazlasını içeren çeşitli etiketlere sahiptir. Bu etiketler sayesinde web sayfasını diğer bileşenlerle ilişkilendirebilir ve düzenleyebilirsiniz. Örneğin, bir resim eklemek için img etiketini kullanabilirsiniz:
HTML kullanarak, statik bir web sayfasını dilediğiniz gibi yapılandırabilir ve tasarlayabilirsiniz. Etiketlerin ve yapıların nasıl kullanılacağını öğrendikten sonra, web sayfasını içerik ve stil için CSS ile birleştirebilirsiniz. Bu şekilde, kullanıcılar etkileyici ve işlevsel bir web deneyimi yaşarlar.
CSS Stilleri
CSS, yani Kaskad Stil Sayfaları, web sitelerine stil vermek ve görünümü düzenlemek için kullanılan bir yöntemdir. CSS kullanarak web sitenizin metinleri, renkleri, boyutları, arka planları ve diğer birçok özelliği kolayca kontrol edebilirsiniz.
Bir web sayfasına stil eklemek için öncelikle bir CSS dosyası oluşturmanız gerekmektedir. Bu dosyada stil kurallarını ve özellikleri tanımlayabilirsiniz. Örneğin, belirli bir yazı tipi ve boyut, arka plan rengi veya çerçeve gibi özellikleri belirleyebilirsiniz.
Web sayfanızın HTML yapısında, CSS dosyanızı kullanmak için bir yol belirtmelisiniz. Bunun için HTML sayfasının içerisine bir etiketi ekleyebilirsiniz. Bu etiketin içine CSS dosyasının yolu ve adı yazılır.
Örneğin, şeklinde bir etiketi kullanarak stil dosyanızı kaynak olarak belirtebilirsiniz.
CSS’in en büyük avantajlarından biri, birkaç sayfaya aynı stil dosyasını kullanarak tutarlı bir görünüm elde edebilmenizdir. Bu şekilde, sitenizin tüm sayfalarının aynı stile sahip olmasını sağlayabilirsiniz.
Ayrıca, CSS kullanarak responsive tasarımlar oluşturabilirsiniz. Bu, web sitenizin farklı cihazlarda (mobil, tablet, masaüstü) uyumlu ve kullanıcı dostu olmasını sağlar.
Özetlemek gerekirse, CSS kullanarak web sitenize özgün stil ve görünüm kazandırabilirsiniz. CSS dosyanızı oluşturarak sitenizin her bir elemanını istediğiniz gibi düzenleyebilir ve web sayfalarınızın profesyonel ve etkileyici bir görünüme sahip olmasını sağlayabilirsiniz.
Dosya Yapısı
Bir statik web sitesi oluştururken, dosya yapısının düzenli ve organize olması çok önemlidir. Bu, web sitenizin geliştirme ve bakım sürecini kolaylaştırır ve gezinme ve yönetim açısından daha iyi bir deneyim sağlar. İdeal dosya yapısı aşağıdaki gibi olabilir:
- index.html: Ana sayfa dosyası olarak kullanılır. Web sitenizin ana içeriğini buraya yerleştirebilirsiniz.
- css: Stil dosyalarınızı içeren bir klasör. Bu klasörün içinde stil.css dosyasını oluşturabilir ve web sitenizin görünümünü düzenleyebilirsiniz.
- js: Javascript dosyalarınızı içeren bir klasör. Gelişmiş işlevselliğe sahip olan web sitelerinde, interaktif öğeler ve ekstra özellikler için bu klasörü kullanabilirsiniz.
- img: Web sitenizde kullanmak istediğiniz resimleri içeren bir klasör. Bu klasördeki resimleri web sayfalarınıza ekleyebilir ve görsel öğeleri zenginleştirebilirsiniz.
- html: Diğer HTML dosyalarını içeren bir klasör. Web sitenizin farklı sayfalarını bu klasöre ekleyebilir ve yönetim açısından daha kolay bir yapı oluşturabilirsiniz.
Yukarıdaki dosya yapısını kullanarak web sitenizi düzenli ve kolay yönetilebilir hale getirebilirsiniz. Daha fazla dosya veya klasör ekleyerek ihtiyaçlarınıza göre yapıyı genişletebilirsiniz. Bu şekilde web sitenizin dosyalarını daha iyi organize edebilir ve geliştirme sürecini daha verimli hale getirebilirsiniz.
index.html
index.html dosyası, bir web sitesinin ana sayfasının içeriğini ve yapısını tanımlayan bir HTML dosyasıdır. Bu dosya, web sitesinin kullanıcıların ilk karşılaştığı sayfasıdır ve genellikle “ana sayfa” olarak adlandırılır.
index.html dosyası, HTML etiketleri ve yapıları kullanılarak oluşturulur. Bir web tarayıcısı tarafından bu dosya açıldığında, tarayıcı içinde belirtilen etiketlerin ve içeriklerinin görüntülenmesini sağlar.
index.html dosyasının yapısı genellikle şu şekilde olur:
<!DOCTYPE html><html> <head> <title>Web Sitemizin Başlığı</title> </head> <body> <h1>Hoş Geldiniz!</h1> <p>Web sitemizin içeriği burada yer alacaktır.</p> </body></html>index.html dosyasında, <title> etiketi arasına web sitesinin başlığı yazılır. Ana sayfanın içeriğine ise <body> etiketleri arasında yer verilir. Örnekte, <h1> etiketi ile “Hoş Geldiniz!” başlığı belirtilmiş ve <p> etiketi ile de içerik yazılmıştır.
index.html dosyasının yapısı, web tarayıcısına web sitesini nasıl render edeceği konusunda bilgi verir. Bu yüzden, her web sitesi için bu dosyanın düzgün bir şekilde oluşturulması önemlidir.
stil.css
stil.css, bir web sitesinin görünümünü kontrol eden stil dosyasıdır. Bu dosya, HTML koduna eklenerek web sitenin tasarımı ve düzenlemesi ayarlanır. Stil.css dosyasını oluşturmak ve kullanmak için aşağıdaki adımları takip etmelisiniz:
-
İlk adım olarak, stil.css dosyasının oluşturulacağı bir metin düzenleyici açın.
-
Dosyanın başında style etiketi ile bir CSS bloğu oluşturun. Bu blok, web sitenizin stilini içerecektir.
-
İçeride, HTML etiketlerine ve nesnelere stil uygulamak için CSS seçicilerini kullanın. Örneğin, bir başlık stilini değiştirmek için h1 veya h2 gibi seçicileri kullanabilirsiniz.
-
Her seçicide, istediğiniz stil özelliklerini belirtin. Örneğin, metin rengini veya arka plan rengini değiştirebilirsiniz.
-
Stil dosyanızı kaydedin ve HTML kodunuzda kullanmak üzere kaynak olarak ekleyin. Bunun için HTML dosyanızın <head> bölümüne aşağıdaki kodu ekleyebilirsiniz:
<link rel="stylesheet" type="text/css" href="stil.css">Bu adımları takip ederek stil.css dosyanızı başarıyla oluşturabilir ve kullanabilirsiniz. Bu sayede web sitenizin görünümünü kolayca özelleştirebilirsiniz.
Resimler ve Medya
Resimler ve Medya
Web sitesine resim eklemek ve diğer medya dosyalarını yerleştirmek, web sayfanızı daha görsel ve ilgi çekici hale getirmenin bir yoludur. Resim eklemek için img etiketini kullanabilirsiniz. Bu etiketi kullanmak için ilk olarak resmin yer aldığı dosyanın dizinine gidin ve dosyanızın adını belirleyin. Ardından img etiketini kullanarak resmi sayfanıza ekleyin. Medya dosyalarını yerleştirmek için video veya audio etiketlerini kullanabilirsiniz. Bu etiketler aracılığıyla videoları veya ses dosyalarını doğrudan sayfanıza yerleştirebilirsiniz.
- Resim eklemek için:
- img etiketi kullanın
- Resim dosyanızın adını belirleyin
- Belirlediğiniz adı img etiketi içinde src özelliği olarak kullanın
- Medya dosyaları yerleştirmek için:
- video etiketi kullanın (video dosyaları için)
- audio etiketi kullanın (ses dosyaları için)
- Dosya yollarını src özelliği içine ekleyin
Bu yöntemlerle web sitenize resim ve medya dosyaları ekleyebilir, kullanıcıların daha etkileşimli bir deneyim yaşamasını sağlayabilirsiniz.
Hosting ve Yayınlama
Bir statik web sitesini yayınlamak için öncelikle uygun bir hosting hizmeti seçmek önemlidir. Hosting hizmeti, web sitenizin internet üzerinde erişilebilir olmasını sağlayan bir sunucu sağlayıcısıdır. İşte statik bir web sitesini yayınlamak için izlenmesi gereken adımlar:
- 1. Hosting Sağlayıcısı Seçme: İyi bir hosting sağlayıcısı seçmek web sitesinizin performansı ve güvenliği için kritik öneme sahiptir. Güvenilir bir sağlayıcı, hızlı sunucular ve yüksek erişilebilirlik sağlayabilir.
- 2. Plan Seçme: Hosting sağlayıcıları genellikle farklı hosting planları sunar. Web sitenizin ihtiyaçlarına uygun bir plan seçmek önemlidir. Bütçenizi ve sitenizin trafik ve depolama gereksinimlerini dikkate alarak doğru planı seçin.
- 3. Domain Adı Kaydetme: Web siteniz için bir alan adı kaydetmeniz gerekmektedir. Hosting sağlayıcınızla birlikte bir domain adı kaydedebilirsiniz veya farklı bir domain kaydedip daha sonra yönlendirebilirsiniz.
- 4. Dosyaları Yayınlama: Web sitesi dosyalarınızı hosting sağlayıcınızın sunucusuna yüklemek için FTP (dosya transfer protokolü) kullanabilirsiniz. FTP istemcisi ile hosting hesabınıza bağlanıp dosyalarınızı sunucuya yükleyebilirsiniz.
Yukarıdaki adımları takip ederek, statik web sitenizi uygun bir hosting hizmeti seçerek ve gerekli adımları tamamlayarak yayınlamaya hazır hale getirebilirsiniz.
FTP ile Yayınlama
FTP ile Yayınlama
Web sitesinizi yayınlamak için FTP (File Transfer Protocol) kullanabilirsiniz. FTP, sunucuya dosya aktarmanıza ve web sitenizi canlıya taşımanıza olanak tanır. İşte adımları:
- FTP İstemcisi Yükleyin: İlk adım, bir FTP istemcisi indirmek ve yüklemektir. FileZilla, Cyberduck veya CuteFTP gibi popüler FTP istemcilerini kullanabilirsiniz.
- FTP Bağlantısı Kurun: FTP istemcinizi açın ve web sitenizin yayınlanacağı sunucunun FTP bilgilerini girin. Sunucu adresi, kullanıcı adı ve parola genellikle hosting sağlayıcınızdan alabilirsiniz.
- Dosyaları Yükleyin: FTP istemcinizin dosya transfer özelliğini kullanarak web sitesinin dosyalarını sunucuya yükleyin. İlgili dosyaları seçip yerel bilgisayarınızdan sunucuya sürükleyip bırakabilirsiniz.
- Kontrol Edin: Dosyaları yükledikten sonra, web tarayıcınızı kullanarak web sitenizi kontrol edin. Tüm dosyaların doğru şekilde yüklendiğinden emin olun.
Bu adımları takip ederek, FTP kullanarak web sitenizi sunucuya yükleyebilir ve canlıya taşıyabilirsiniz.
Başka Yöntemler
Başka yöntemlerle web sitenizi yayınlamanın birden fazla yolu vardır. Bu alternatif yöntemler, web sitenizi farklı platformlar ve araçlar üzerinde yayınlamanıza olanak sağlar. İşte web sitenizi farklı yöntemlerle yayınlamanın bazı yolları:
- 1. Ücretsiz Web Barındırma Platformları: Bazı web barındırma platformları, kullanıcıların web sitelerini ücretsiz olarak yayınlamalarına izin verir. Bu platformlar genellikle reklam içerir ve genelde sınırlı özelliklere sahiptir, ancak basit bir web sitesi yayınlamak için kolay bir seçenek olabilir.
- 2. Blog Platformları: Birçok blog platformu, kullanıcıların web sitelerini kolayca oluşturup yayınlamalarına izin verir. Bu platformlar genellikle kullanıcı dostu arayüzlere sahiptir ve kullanıcıların içeriklerini paylaşmaları için birçok seçenek sunar.
- 3. Sosyal Medya: Web sitenizi yayınlamanın bir başka yolu da sosyal medya kullanmaktır. Sosyal medya platformlarında profilinizin bir bölümünde web sitenizin adresini paylaşabilir ve takipçilerinizin web sitenizi keşfetmelerini sağlayabilirsiniz.
Bu alternatif yöntemler, web sitenizi daha fazla kişiye ulaştırmak için kullanışlı olabilir. Ancak, dikkate almanız gereken faktörler (örneğin, reklamlar, sınırlı özellikler ve kontrol eksikliği) olduğundan, amacınıza ve tercihlerinize bağlı olarak doğru seçeneği seçtiğinizden emin olun.