Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. 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 4

Değerli Blog Takipçilerimiz Hoşgeldiniz. ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır başlıklı yazı dizimizin 4. bölümü ile karşınızdayız.

3 gündür yayınlamaya başladığımız ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimiz sizlerden gelen olumlu yorumlar ve ziyaretçi istatistikleri doğrultusunda tüm içerikleri bitirdiğimizde rehber niteliği taşıyacağını ve revize edilerek rehbere dönüştürüleceğini sizlerle paylaşmak istiyorum.

Sözü çok fazla uzatmadan ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm ” yazımıza başlayalım. Hatırlayacağınız gibi dün yani 3. bölümde servis yani hizmetler  sectionlarını ( bölümlerini ) hazırlamaya başlamıştık. Aşağıda dün en son kaldığımız yere ait görseli inceleyebilirsiniz.

Bugün ise hemen altında yer alan ve tüm hizmet başlıklarımızı düzenleyeceğimiz bölüme geçeceğiz. Aşağıda yer alan görselde dün belirttiğimiz gibi bizi en önemli ve öne çıkardığımız hizmet başlığımız, kurumsal tanıtımımız vb…. içerikleri düzenledik. Altında yer alan kısımda ise ikinci plan olarak öne çıkarmak istediğimiz hizmetlerimizi ekleyeceğiz.

Html Web Tasarımı Nasıl Yapılır Anasayfa Hizmetler Düzenlemeleri Başlıklar İçerikler 2
Html Anasayfa Hizmetler Düzenlemeleri Başlıklar İçerikler 2, html, , , , web tasarımı nasıl yapılır

Artık neler yapacağımızı biliyoruz değil mi ? İlk olarak index.html dosyamızı notepad plus programı yardımıyla açıyoruz. Daha sonra yine index.html dosyamızı internet tarayıcımızı kullanarak açıyoruz. Notepad plus programında yer alan ve aşağıda ki görselden de görebileceğiniz gibi 2. bölüm olan hizmet kategorilerimiz 179. satırda yer almaktadır. Genel itibariyle dün bahsettiğimiz ve revize ettiğimiz kodlar bulunmaktadır. <h>, <p>, <div><img> alt= vb… Burada farklı olarak görebileceğiniz bir kaç koddan bahsetmek istiyorum. <div class=”….”> gibi kodlar dikkatinizi çekmiştir. Bu etiketin ne anlama geldiğini dünkü yazımızda anlatmıştık. Bu sınıflandırmanın içerisinde bazı kodlara yer verilmiş. Nedir bu kodlar ? align_left, align_right, row margin-top_30, width=”75”, height=”75” vb.. Eminim birazcık ingilizce bilgisine sahipseniz, bu kodların ne anlama geldiğini tahmin etmişsinizdir. Align Kodu ; girdiği sınıfın elemanını sağa yada sola yaslamak için kullanılıyor. Left ( Sol ), Right ( Sağ ) anlamında. Margin Kodu ; ilgili olduğu bölümün ( row ), kenar paylarından mesafesini ayarlıyor. Top, Bottom vb. alternatif kodlar ile değişebiliyor. Width ve Heigth Kodları ise ; genel itibariyle görseller için kullandığımız ve görsel ebatlarını ayarlamamıza yarayan kodlardır. Buraya bir şey daha eklememiz gerekiyor. Tüm cihazlara uygunluk yani responsive dediğimiz görsel kodu ise style=”width:100%;” olarak kullanılır. Aşağıda yer alan notepad görselinde web sitemize göre uyarlanmış halini göreceksiniz. Çok iyi incelemenizi ve uygulamanızı, bolca pratik yaparak hangi değişikliklerin hangi çıktılara sebep olduğunu öğrenmek önemlidir.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri 2
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri 2, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Yukarıda ki görselleri iyi inceledikten ve gerekli kontrolleri sağladıktan sonra aşağıda yer alan çıktıyı elde etmemiz gerekiyor. Tabi ki biz kendi sektörümüze göre düzenleme yaptık.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Web Çıktısı
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Web Çıktısı, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Şimdi ise alt tarafta yer alan ve 3. bölüm ( section ) olarak adlandırılan portfolio bölümünü düzenlemeye geldi. Burada referanslarımızı sergileyebiliriz. Carousel diye adlandırdığımız ve genel anlamda slide geçişlerini yöneten bir kodlama bulunur. Yukarıda row kodundandan bahsetmiştik. Burada da karşımıza col kodu çıkıyor. ( column ). Tabi ki bu bilgiler ileri seviye bilgilere giriyor ancak bilmenizde yarar var. İlerleyen zamanlarda mutlaka karşınıza çıkacaktır. Ama genel itibariyle aklınızda kalması için row : sıra, column : kolon anlamındadır. İlk olarak slide içerisinde yer alan ve gezmezini istediğimiz görsellerimizi ekleyeceğiz. Daha önce ki yazılarımızda bahsettiğimiz gibi görsellerin alt etiketlerini mutlaka ekliyoruz. Google görsel indexlemesi ve tanımlaması için alt etiketine oldukça önem vermektedir. Daha sonra slide altında yer alan açıklama bölümünü ekliyoruz. Aşağıda yer alan kod dizilimlerini ve düzenlemelerini iyi bir şekilde incelemenizi tavsiye ederiz.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor 2
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor 2, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Yukarıda yer alan düzenlemeleri uygun bir şekilde yaptığınızda aşağıda yer alan çıktıyı elde etmeniz gerekiyor.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor 3
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor 3, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Şimdi ise bugüne kadar yaptığımız çalışmaları baştan bir kontrol edelim. Görsel olarak gerçekten güzel görünüyor. Umarım sizlerin tasarımları da başarılı oluyordur ve keyif almaya çoktan başlamış, bir an evvel bu projenin bitmesini ve yeni bir projeye başlamayı düşünüyorsunuzdur 🙂


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

Umarım 4 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 5. Bölüm ” ile görüşmek dileğiyle.

Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4
Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

4 yorum

  1. Devamı ne zaman gelecek acaba. Sitemin alt tarafı öylece kaldı ?

    1. Author

      Merhabalar Özcan Bey. Bu akşam inşallah tüm anasayfa tasarımını bitirmiş olacağız.

      1. Ok. Sabırsızlıkla bekliyorum.

        1. Author

          Özcan bey az önce 5. bölüm yazımızı yayınladık. <a href="https://www.unsalanweb.net/html-ile-ucretsiz-bir-tema-ile-web-tasarimi-nasil-yapilir-5-bolum/" title="Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm">Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm</a><a href="https://www.unsalanweb.net/html-ile-ucretsiz-bir-tema-ile-web-tasarimi-nasil-yapilir-5-bolum/" title="Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm">Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm</a>

Bir cevap yazın

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