Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm

Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm

Merhabalar Değerli Blog Takipçilerimiz. ile Ücretsiz Bir Tema ile ”  isimli yazımızın 2. bölümü ile karşınızdayız.

Dün sizlerle paylaşmış olduğumuz ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ”isimli yazımızın 2. bölümüde artık içeriklerimizi ekleyecek, web sayfa ziyaretçilerimize göstereceğimiz bilgileri ekleyeceğiz.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm başlıklı yazımıza başlamadan önce dün belirttiğimiz gibi paylaştığımız bilgiler tamamen yüzeyseldir ve siz değerli kullanıcılarımızın anlayarak uygulayabileceği dildendir. İlk bölümde paylaştığımız yazımıza Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır tıklayarak ulaşabilir, bilgilerinizi tazeleyebilirsiniz.

Sözü çok fazla uzatmadan hemen dün aldığımız yerden ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm ” başlıkta ki yazımıza geçmek istiyorum.


Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır yazımızda kaldığımız yeri hatırlatmamız gerekirse head etiketleri arasında sıklıkla kullandığımız title, description, author, keyword, meta etiketler ve bir çok detayı paylaşmıştık. Bu yazımızda ise <body> tagları arasında kullanacağımız etiketlerden, html kodlama dillerinde en çok kullanılan tag‘lardan ve bir çok bilgiden bahsedeceğiz. Aşağıda yer alan görseli incelediğinizde <body> etiketinin sayfa yükleme animasyonu, logo dosyanın detayları, ikon detayları vb…  ve menü başlıklarını, sayfa açılış animasyonlarını içeren kodları ve sayfa menü renklerini içerdiğini göreceksiniz. Merak etmeyin ilk etapta bu kodlar size çok ama çok yabancı gelecektir. Fakat ne kadar çok inceler ve pratik yaparsanız o kadar kolaylaştığını sizde fark edeceksiniz. Aşağıda zeten kodların ne anlama geldiğini sizlerle paylaşıyor olacağız.

Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Body Etiketleri Arası Düzenlemeler
Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Body Etiketleri Arası Düzenlemeler, html, , , , web tasarımı nasıl yapılır

45. Satırda yer alan <img src=”images/loader.gif” alt=”#” /> kodu sayfanın açılış animasyonunda yer alan görsele ait koddur. Google görsleerin tanımı için alt etiketini oldukça önemsemektedir. Buraya açılış animasyonumuzda tercih edeceğimiz dosyayı yükleyebilir, istersek aynı isim ile kayıt edebilir, istersek farklı bir gif dosyası yükleyerek, kod bölümünü değiştirebilir ve dosyamızı çağırabiliriz. Biz bu dosyayı mesela kendi kurumsal logomuz ile açabiliriz. o zaman değiştirmemiz gereken bölüm <img src=”images/unsalanweb.png” alt=”Unsalanweb Tasarım Bilişim Hizmetleri Kurumsal Logo” /> olacaktır.

html kodlama dilinde görselleri, resimleri eklemek için kullanılacak olan kod <img src=”images/dosyaismi.jpg” alt=”Görsele ait açıklama” /> olacaktır. Şayet görselinizin tüm cihazlara uygun, yani responsive dediğimiz şekilde gösterilmesini istiyorsanız belirtilen koda bazı eklemeler yapmamız gerekir. Genişlik ve yükseklik değerlerini belirtmek istersek <img src=”images/dosyaismi.jpg”  “width=”80″ height=”160″ alt=”Görsele ait açıklama” /> kodunu, tüm cihazlara uygun görselleri responsive hale getirmek istersek te <img src=”images/dosyaismi.jpg”  style=”width:100%;” alt=”Görsele ait açıklama” /> kodu kullanabiliriz.

63. Satırda yer alan Menü Navigasyon bölümüne geçelim. Bu bölümde web sayfamızın ana menülerini yerleştireceğiz ve linklerini ( url ) vereceğiz. Aşağıda yer alan kodları kendi web sayfanızda oluşturacağınız menü başlıklarına göre değiştirin ve notepad plus ile düzenleyerek kaydedin. Biz kendi çalışmamıza göre düzenledik ve aşağıda sizlerle paylaştık. Daha sonra kayıt ederek internet tarayıcınızı yenileyin. Menü başlıklarınızın ve bir önceki görselde bahsettiğimizin logo dosyanızın değiştiğini fark edeceksiniz. Aşağıda yer alan görselde düzenlenmiş halini ve çıktı olarak web internet tarayıcınızda nasıl göründüğünü inceleyebilirsiniz.

Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Body Etiketleri Arası Menü Düzenlemeleri
Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Body Etiketleri Arası Menü Düzenlemeleri, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

<li><a class=”nav-link active” href=”index.html”>Anasayfa</a></li>
<li><a class=”nav-link” href=”about.html”>Hakkımızda</a></li>
<li><a class=”nav-link” href=”services.html”>Hizmetlerimiz</a></li>
<li><a class=”nav-link” href=”#”>Blog</a></li>
<li><a class=”nav-link” href=”contact.html”>İletişim</a></li>
<li><a class=”nav-link active” style=”background:#f2184f;color:#fff;” href=”#”>Giriş Yap</a></li>

Yukarıda ki düzenlemeleri notepad plus programı ile yaptıktan sonra kayıt ederek aşağıda ki çıktıyı elde edebilirsiniz.

Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Body Etiketleri Arası Menü Düzenlemeleri ve Çıktı
Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Body Etiketleri Arası Menü Düzenlemeleri ve Çıktı, Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Body Etiketleri Arası Menü Düzenlemeleri ve Çıktı

Yukarıda belirttiğimiz kodlarda fark etmişsinizdir, style=”background:#f2184f;color:#fff;” Giriş Yap bölümü mevcut. Şayet grafik tasarım bilgisine birazcık hakimiyetiniz varsa Giriş Yap butonuna ait arka plan rengi olduğunu anlamışsınızdır. Burada yer alan #f2184f;color:#fff; kodları üzerinde değişiklik yaparak kurumsal web sayfanızın kimliğine ait ve logonuzun renklerini yansıtan renk kodlarını kullanabilir değişiklik yapabilirsiniz. Daha önce belirttiğimiz gibi index.html dosyanızıa benzer bir şekilde menü navigasyonlarınızın linklerini ( url ) kendinize göre revize edebilirsiniz. Örnek olarak aşağıda ki link yapısını incelemenizi öneririz. Bu arada navigasyon menü başlıklarınızı arttırmak için <li> ile </li> kodlarını koplayarak arttırabilirsiniz.

<li><a class=”nav-link active” href=”index.html“>Anasayfa</a></li>
<li><a class=”nav-link” href=”hakkimizda.html“>Hakkımızda</a></li>
<li><a class=”nav-link” href=”hizmetlerimiz.html“>Hizmetlerimiz</a></li>
<li><a class=”nav-link” href=”referanslarimiz.html“>Referanslarımız</a></li>
<li><a class=”nav-link” href=”Sponsorlar.html“>Sponsorlar</a></li>
<li><a class=”nav-link” href=”Online Alışveriş.html“>Online Alışveriş</a></li>
<li><a class=”nav-link” href=”blog.html“>Blog</a></li>
<li><a class=”nav-link” href=”iletisim.html“>İletişim</a></li>
<li><a class=”nav-link active” style=”background:#000000;color:#fff;” href=”#”>Giriş Yap</a></li>

Bu değişiklikleri yaptıktan sonra aşağıda yer alan görseli elde etmeniz gerekiyor. Tabi ki bu arada dikkat etmemiz gereken hususlardan bir tanesi <> aralarını kopyalama yapıştırma yaparken doğru yerlere müdahale etmeniz. Sizler ilk etapta bu işe yeni başladığınız için mutlaka değişiklikleri uygulayıp kayıt etmeden önce yedekli çalışmanız. Yanlış bir ekleme, çıkarma, kopyalama, yapıştırma eylemi sitenizin kod yapısını bozacak ve size bambaşka çıktılar ile cevap verecektir.

Html Web Tasarımı Nasıl Yapılır Body Etiketleri Arası Menü Düzenlemeleri ve Eklemeleri Çıktı
Html Web Tasarımı Nasıl Yapılır Body Etiketleri Arası Menü Düzenlemeleri ve Eklemeleri Çıktı, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Bu arada yukarıda belirttiğimiz navigasyon menülerimiz için link yapılarını vermekte kullandığımız kod <a href=”hakkimizda.html”>Hakkımızda</a> şeklinde olmalı ve bu linke ait bir sayfanın bulunması gerekmektedir. İlerleyen aşamalarda bu yapının nasıl hazırlanacağına ait bilgilerinde bu yazı dizimizde bulacaksınız merak etmeyin. Şimdi gelelim temamızın slider bölümüne ve bu bölümde ziyaretçilerimize sunacağımız görseller ile gerekli link yapılarının kurulmasına. Temamızın ana şablonunda bize hazır bir slide sunumu yapılmış. Bizim yapmamız gereken ise sadece görsel düzenlemesi ve buton içeriğini revize edip link yapısını belirlemek. Aşağıda yer alan kod yapısını inceleyerek tüm slide‘lar için gerekli görsel düzenlemesini ve link düzenlemesini yapabilirsiniz. Aşağıda revize edilmiş hallerine ait ve çıktısına ait görselleri inceleyebilirsiniz.

Orjiinal tema slide şablonu transparan özelliklerde ve arka fon olarak açık tonlarda. Doğal olarak bizde görsellerimizi tasarlarken bu doğrultuda hareket etmeliyiz. Bu doğrultuda biz bir görsel oluşturduk ve ismine unsalanweb-tasarim-slide-1.jpg ismini verdik. Bu slide’ımızın bizim web tasarım hizmetleri ile ilgili bir görsel olmasına ve aynı zamanda bizim web tasarım hizmetleri sayfamıza yönlenmesine karar verdik. Ve aşağıda yer alan kod yapısını notepad plus programı ile düzenledik, kaydettik ve çıktısına bakacağız. Aşağıda düzenlenen kod yapısını ve çıktısına ait görseli inceleyebilirsiniz. Umarız beğenmişsinizdir 🙂 Sizde aşağıda yer alan kod yapılarını kendi sitenize göre revize ederek tüm slide‘lar için düzenlemelerinizi yapabilirsiniz.

Html Web Tasarımı Nasıl Yapılır Slider Düzenlemeleri ve Çıktı
Html Web Tasarımı Nasıl Yapılır Slider Düzenlemeleri ve Çıktı, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Evet değerli blog takipçilerimiz. ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm ” başlıklı yazımıza bugün için son veriyoruz. Yarın 3. bölüm ile karşınızda olacağız web sitemizi yapmaya devam edeceğiz.

Umarım 2 bölümden oluşan ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimiz beğenmişsinizdir. Aşağıda yer alan yorum bölümüne yorumlarınızı ve her türlü sorularınızı bekliyoruz. Tabi sosyal medya hesaplarınızda paylaşmayı da unutmayın lütfen. Yarın ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 3. Bölüm ” ile görüşmek dileğiyle.

2 yorum

  1. Tebrikler onur bey. Güzel konu. Bence en sonunda rehber niteliği taşıyabilecek bir eğitim seti olabilir.

    1. Author

      Teşekkür ederiz İlmiye Hanım güzel yorumlarınız için

Bir cevap yazın

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