Ücretsiz HTML Yapım – Bakım Aşaması Sayfası yazımızda özellikle web master arkadaşların ihtiyaç duyabileceği bir konuya değinmek istiyorum. Sadece web master’lar için değil, fazla kod bilmeyen arkadaşlar içinde düzenlemeyi, düzenlemek için gereken programlarda bahsedeceğiz. Tüm template ve program bilgilerini bu yazımızdan alıp, değiştirip kullanabilirsiniz. Ücretsizdir, template kullanarak yasal problem yaşamazsınız. Zaten HTML kullanılarak yazıldığı için kolayca düzenleyebilirsiniz. Adımlarımız da göreceğiz.

Yapım – Bakım Aşaması Sayfası Nedir ?

Web siteniz henüz açılmadıysa veya açılmasına henüz varsa kullanıcıların girdiklerinde boş bir sayfayla karşılaşmaması için kullanabileceğiniz sayfadır. Bakım aşaması sayfası da sitenizde geçici bakımlar yaparken sayfanızı dışarıdan gelecek kullanıcılara kapatabileceğiniz ek bir sayfadır. Çoğu yerde işin profesyonelleri için hayat kurtarıcıdır. Hatta bazı düzeyde yapım aşaması sayfası ufak oynamalarla kalıcı bir hale bile gelebilir.

Yapım – Bakım Aşaması İndirme ve Düzenleme

Öncelikle sizler için düzenlediğim ve düzenlemeyi kolay hale getirdiğim dosyayı şuradan indirebilirsiniz :

 HTML Yapım – Bakım Aşaması Sayfası İndirme Linki  – ucsifir.com

Açılan sayfadan ‘İndir’ bağlantısına tıklayarak dosyayı bilgisayarınıza indirebilirsiniz. .zip formatın da yükledim çünkü çoğu hosting .zip formatını yükledikten sonra arşivi açmaya izin verir.

Verdiğim dosyayı lokalde veya hostinginiz de kök dizin kısmına yükleyin. Burada dikkat etmeniz gerek şey dosyaların direkt kök dizinde olması. Yani klasör halinde değil, açılmış hali ile kök dizinde görünmelidir. Server yapılandırılmasından dolayı ‘index.php’ dosyasını doğrudan sayfa adresinde gösterecektir. Yani :

 

Ücretsiz HTML Yapım - Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

HTML Yapım – Bakım Aşamasında Sayfası Görünümü :

Ücretsiz HTML Yapım - Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Yapım – Bakım Aşaması Düzenleme

Bu sayfa kullanacağınız yere göre düzenlenebilir bir HTML yapıda. Bunun dışında kullandığımız JS ve Bootstrap mevcut fakat bunlarla şu aşamada oynamamız gerekli değil. HTML düzenlemeleri standart not defteri veya hostinge yüklediyseniz klasik ‘Code Editor’ ile yapabilirsiniz. Fakat Windows ortamında benimde kullandığım ve şiddetle tavsiye ettiğim bir program var. Hem ücretsiz hem aşırı kullanışlı Notepad ++.

Notepad ++ Anasayfası

Anasayfaya girdikten sonra bilgisayarınızın bit dizilimine göre en uygun olanı seçin ve indirin. Genel olarak 32 Bit olanıdır. İlk indirme linkidir. Programı indirdikten sonra standart bir kurulum aşaması mevcut. Onu tamamlayın. Ardından indirdiğiniz klasörde ki ‘index.php’ dosyasına sağ tıklayın. ‘Edit with Notepad++‘ seçeneğini göreceksiniz.

Ücretsiz HTML Yapım - Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Bu seçeneğe tıkladığınız da açılan sayfa HTML düzenleme sayfasıdır. Tebrikler. Bu template’yi kafamıza göre düzenleyebileceğiz.

Notepad++ İle HTML Düzenlemek

Düzenlenecek yerler kararını size bırakıyorum. Ben temel olarak bir kaç şey göstereceğim, geri kalan sizin hayal gücünüze kalmış 🙂

İletişim Numarası Ve Mail Düzenleme :

Düzenleme aşırı basittir özellikle HTML yazı dilinde. Bölge zaten vardır, bölgeyi bulur ve düzenlemek istediğiniz metni düzenlerseniz kodla oynamazsanız herhangi bir sorun yaşamazsınız. Özellikle <div> kodlarına dokunmamaya özen gösterin, onlar sayfanın bütünlüğü adına önemlidir.

Adımlar :

  1. Notepad ++ programı ile dosyayı açın.
  2. CTRL + F kombinasyonu ile arama ekranına ulaşın.
  3. Arama Bölgesine ‘İletişim’ yazın ve Enter tuşuna basın.

Muhtemelen karşınızda ki ekran şu olacaktır :

Ücretsiz HTML Yapım - Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

 

Kelimeyi değiştirmek istiyorsanız silin ve değiştirin. Yanlız ‘<‘ ve ‘>’ kodlarının bozulmamasına önem gösterin. Bozulursa da yeniden yazın. Sorun kalmayacaktır.

Numara ve mail değiştirelim :

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Kodlara dokunmadan sadece ihtiyacım olan kısmı değiştirdim. Bu bana yeterli. Değişimlerimizi kaydetmemiz lazım. File > Save yoluyla veya klavyede CTRL + S tuşuna basarak dosyanızı kaydedin. Kaydedip kaydedilmediğini anlamak içinde ‘index.html’ yazan yerde ki ikona bakın. Eğer ikon kırmızı ise kaydedilmemiş, mavi ise kaydedilmiş demektir.

Şimdi kaydettiğimiz düzende web sayfamıza bakalım :

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Yazdığım şeyler düzgün ve güzel bir şekilde oturmuş, sayfanın tamamında kayma yok demek ki doğru yapmışım 🙂

İşlem bu kadar. Biraz daha bilgi olan arkadaşlar yazı fontlarınıda değiştirebilir. Template Google Font desteklidir.

Logo Kısmında ki Görseli Düzenleme veya Kaldırma :

Template üzerinde bir logo kısmı var. Bazı arkadaşlar kullanmak ister bazıları istemez. Değiştirmesini ve kaldırmasını gösterelim.

İlk önce kaldıralım :

Adımlar :

  1. Notepad ++ programı ile dosyayı açın.
  2. CTRL + F kombinasyonu ile arama ekranına ulaşın.
  3. Arama Bölgesine ‘Logo’ yazın ve Enter tuşuna basın.

Ulaştığımız bölge muhtemelen şudur :

 

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

İstemiyorsak bu bölgeyi komple kaldırmalıyız. Çünkü sadece görsel yolunu silersek görsel var gibi görünecek, bir kutucuğun içinde çarpı işareti olacaktır. Seçmemiz gereken alan :

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Ücretsiz HTML Yapım – Bakım Aşaması Sayfası

Bölgeyi silin ve sayfayı yeniden kontrol edin. Logo silinmiş olacaktır.

Düzenleme :

Düzenleme kısmını da ikiye ayırmamız lazım. Dosyalardan düzenlemek ve dış linkten getirmek adına konuşalım.

Dosyalardan düzenleme kısmı şu şekilde :

  1. images/icons/logo.png dosyasını bulun klasörde.
  2. Bu görseli editlerseniz veya silip aynı isimle (Özellikle .png uzantısına dikkat edin.) dosya eklerseniz logo direkt olarak değişecektir. İkinci birşeyle uğraşmazsanız.

Dış Link üzerinden düzenleme kısmı ise :

  1. src="images/icons/logo.png" Linki görselin yoludur. Tırnak içinde ki alanı değiştirirseniz (tırnaklara dikkat) verdiğiniz linkteki görseli göstermeye başlayacaktır.

Logo düzenleme kısmı da bu kadar. Bu editleme kısmını tüm HTML templatele de kullanabilirsiniz. Yazar hakları adına yapacağınız düzenlemeleri sizin vicdanınıza bırakıyorum.

Son Sözler  

Öncelikle faydalı olması dileğiyle. Templatenin içine blogun linkini sıkıştırdım, silmezseniz gören okuyan buraya gelir oda daha çok bilgiye vakıf olur 🙂 Yapamadığınız yerleri yine yorumlarda belirtirseniz yardımcı olmaya çalışacağım.

Template Colorlib.com adresinden ücretsiz indirilerek düzenlenmiştir.