İstanbul'dan atan kalp ile dünyanın dört bir yanında
Blog paylaşımlarımız için buraya tıklayın
admin@byteknolog.net

HTML5 ile ComingSoon Yapımı

Reklam ve Danışmanlık

HTML5 ile ComingSoon Yapımı

Html5

Günümüz çağında artık dinamik websiteler için en son sürümler ve en iyi frameworkler tercih ediliyor. HTML5’in tercih edilmesi hızlı ve çok daha kolay olmasından kaynaklanıyor.

Ayrıca HTML5’in önceki versiyonlarında web sayfasının yapısını kodlamaktan çok, web sayfasının her tarayıcıda sorunsuz bir şekilde çalışabilmesi için ekstra kodlamalar yapılması gerekiyordu.

Bunu yapmak, bu işe yeni başlayanlar için inanılmaz bir zor süreç oldu ve bitkinlik belirtileri ile soğunmaya başlandı. Bu yüzden HTML5, hızlı ve dinamik yapılar oluşturması sebebiyle günümüz çağında daha çok tercih ediliyor.

Ayrıca HTML5, JS ve CSS3 ile daha da modernleşen bir yapıya sahip. Bir diğer özelliği ise Mobil Cihaz Desteği’ne sahip olması ve HTML’e göre daha az kod kullanması ilgi çekici özelliklerinden bir tanesi.

Şimdi asıl mevzu HTML5 ile nasıl bir ComingSoon sayfası yapabiliriz? Bu konuda size Hem animasyonları kullanarak hem de güncel HTML5 kodlarını kullanarak bir ComingSoon sayfası oluşturulmasın da yardımcı olacağım.

Öncelikle Google’a bunun hangi dil ile yazıldığını belirtmek için “” ile ComingSoon sayfamızın HTML5 olacağını belirterek kodlarımızı yazmaya başlıyoruz.

Ama öncelikle bir IDE’ye ihtiyacımız var. Ben VS Code(Visual Studio Code) kullanarak yazacağım. VS Code indirmek için Tıklayın. Tercih meselesi olarak size bırakıyorum hangi IDE’yi kullanacağınız yönünde. İsteyen Notepad++, Codepen, Sublime Text, Atom kullanabilir.

Sosyal Medyadan Bizi Takip Edin

BYTEKNOLOG - Reklam Ve Danışmanlık
Html5

HTML5 - Coming SOON

Visual studio programını açıp, yeni bir dosya oluşturduktan sonra;

Html5

Bu işlemi yaptıktan sonra Program üzerinde CTRL+S(Kaydet) işlemini yaparak “index.html” olarak kaydediyoruz. Daha sonrasında Masaüstünde gelip “ComingSoon” adı altında bir Klasör açıyoruz ve bu “index.html” dosyamızı içerisine atıyoruz. Daha sonrasında;

Yaparak html tagımızı açıyoruz. “<head>” kısmı İngilizce’de Header yani Üst Kısım anlamına gelir. Bu kısımda sayfamızın Başlığını ve sayfamızın arkaplanında yer alıcak(animasyon linkleri, türkçe karakter düzeltmesi) gibi işlemleri yapacağız.

Body kısmında ise sitemizin Gövdesi yani Orta kısmını yapıcağız. Bütün işlemlerimizi burada yapabileceğimizi söyleyebilirim. Kod yazmaya devam edelim;

Bu kısımda “head” kısmına yazmış olduğumuz title tagı ve link tagı var. Title tagı İngilizce’de başlık olarak geçer; buna istinaden bu tag ile sayfamızın başlığını seçiyoruz, arasına yazılan yazıyı isteğinize göre değiştirebilirsiniz.

Ardından link tagı ile Google’nin Noto Serif adlı font’unu kullanmak için bu kodukısmının arasına yazıyorum. Font ve kodlarına ulaşmak istiyorsanız; Google Fonts adresine giderek ulaşabilirsiniz. Daha sonrasında bir tane daha link tagı görüyoruz.

Bu tag ile index.html’in olduğu klasör’de bir css klasörü olduğundan bahsetmiş ve bu klasörün içerisinde animasyon.css adında bir tane css dosyasından veri çekeceğimizi belirtmişiz.

Şimdi ComingSoon klasörümüzün içerisine gelip css adında bir yeni klasör daha açıyoruz ve kullandığımız editörü açarak yeni bir bölüm açarak CTRL+S işlemini tekrardan yapıp dosya adını bu sefer animasyon.css olarak yazıkdantan sonra css klasörünün içerisine atıyoruz; Daha sonrasında animasyon.css’e verdiğim kodu direk yapıştırıyorsunuz.


.floating{
animation-name: floating;
-webkit-animation-name: floating;

animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;

animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}

@-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}

Yukarıda ki kodlar hazır olarak alınmış bir animasyon kodudur. Google’de bir çok CSS3 animasyonları mevcuttur. Bu bir CSS3 animasyonudur. Bu işlemi yaptıktan sonra aynı css klasörünün içerisinde, editörümüz ile tekrardan bölüm açarak bu sefer style.css adında yeni bir bölüm açıyoruz ve kodlarımızı yazmaya devam ediyoruz.

Fakat buradan sonra ki kod yazma işlemlerini kendime bırakıyor; anlamadığınız kodları araştırarak öğrenmenizi istiyorum. Araştırarak öğrenmekten kastım; bu yazdığım kodları bana da sorabilirsiniz.

Şu şu kod ne işe yarıyor diye yorumda belirtirseniz yardımcı olurum. Aşağıda HTML5 İle ComingSoon Yapımı sayfası hakkında son görsellere ulaşabilirsiniz.

Bundan sonra ki kodları size kaynak olarak vericem ekstra olarak da görselleri ekliyeceğim. Amacım bu kısımda HTML’e göre HTML5 nasıl dinamik hale getirilmiş onu göstermeye çalıştım. Kodların HTML’e göre ne kadar az ve daha kısa olduğunu görebiliriz. 🙂 İyi çalışmalar dilerim.

Html5

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir