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

Tekrar Merhaba Değerli Blog Takipçilerimiz. ile Ücretsiz Bir Tema ile 3. Bölüm ” başlıklı yazı dizimizin 3. bölümü ile karşınızdayız.

Dün paylaşımını yaptığımız ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ? ” isimli yazı dizimizde Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm paylaşmıştık ve sizlerden yoğun ilgi gördü.

Burada ki linklere tıklayarak veya sayfa sonunda yer alan ilgili yazılar linklerine tıklayarak Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 2. Bölüm ve Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 1. Bölüm yazılarımıza ulaşabilirsiniz.

Sizleri çok fazla bekletmeden hemen ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 3. Bölüm ” yazımıza başlayalım.


Dün hatırlayacağınız gibi ana sayfamızda yer alan menülerimizi yerleştirmiştik ve ana slide üzerinde çeşitli değişiklikleri düzenlemiştik. Aşağıda dün paylaştığımız ve son kaldığımız yere ait görseli tekrar sizlerle paylaşmak istiyorum.

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, , , , web tasarımı nasıl yapılır

Ana sayfamızı düzenlemeye devam edelim. Bugün hizmet başlıklarımıza ait anasayfada yer alan bölümleri ve görselleri nasıl düzenleyeceğimizi anlatmaya çalışacağız. Notepad ile index.html dosyamızı her zamanki gibi açıyoruz ve index.html dosyasını aynı zamanda internet tarayıcımızda açıyoruz. Slide altında bulunan ve ziyaretçilerimize sunacağımız bilgileri bu alanlara yerleştirmemiz gerekiyor. Biz kendi hizmet kategorimize göre revize edeceğiz. Sizde elbette hizmet verdiğiniz sektöre göre kendinize uyacak şekilde düzenleyebilirsiniz. Temanın orjinal halini ve düzenlenmiş halini aşağıda yer alan görsellerden inceleyebilirsiniz.

Html Web Tasarımı Nasıl Yapılır Anasayfa Hizmetler Düzenlemeleri
Html Web Tasarımı Nasıl Yapılır Anasayfa 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

Notepad plus ile açtığımız index.html dosyasının 129. sırasından başlayan ve <section> olarak adlandırılan bölüm içerisinde kendimize ait düzenlemeleri yapmalıyız. Bu arada yine bazı etiketlerden sizlere bahsetmemiz gerekiyor. <h2>, <h3> vb… h ile başlayan etiketler, başlıklar anlamına gelmektedir. h ile başlayan etiketin yanında yer alan sayı ne kadar küçükse başlık puntosu o kadar büyük olacaktır. Seo açısından <h> etiketi önemli bir yer alır ve anahtar kelimelerinizin, başlıklarınızın birbiri ile uyum içerisinde ve anahtar kelime içerecek şekilde olması tavsiye edilir. <section> etiketinin anlamı, bölüm olarak nitelenir ve web sayfası içeriklerini bölümlendirmek için kullanılır. <p> etiketi ; metinler, görseller vb… içerikler için açılış ve kapanış anlamı taşır ve bir sonraki alt satıra geçmek için kullanılır. <p> etiketi için alternatif bir etiket olan </br> etiketide kullanılabilir. <div>, <div class> gibi gördüğünüz etiketler ise web sayfalarını bölümlere ayırmak, özel olarak sınıflandırmak, css ile stil dosyalarını çağırmak vb. düzenlemeler için kullanılır. Aşağıda yer alan görseli incelediğinizde hangi komutların çıktısının nasıl olduğunu daha detaylı görebilirsiniz.

Html Web Tasarımı Nasıl Yapılır Anasayfa Hizmetler Düzenlemeleri Başlıklar İçerikler
Html Web Tasarımı Nasıl Yapılır Anasayfa Hizmetler Düzenlemeleri Başlıklar İçerikler, 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 yaptığınızda ve internet tarayıcınızı yenilediğinizde karşımıza çıkacak olan çıktı aşağıda yer almaktadır. Gördüğünüz gibi en üstte menülerimiz, slidelarımız ve yaptığımız tüm değişiklikler görünmektedir. Hizmet kategorisinde ki son değişikliğimizde aşağıda ki görselde yer almaktadır. Şimdi ise en altta yer alan öne çıkarılan görsel diye tabir ettiğimiz ana hizmetimize ait görsel bölümü ve açıklaması bölümünü düzenleyelim.

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

Aşağıda yer alan notepad plus ekran görüntüsünden de göreceğiniz gibi şimdi sıra 2. bölüme geldi. Yine <section> etiketi ile başladığını göreceksiniz. Bu etiket içerisinde sizde fark etmişsinizdir. Sağ tarafta bulunan 2. sütün için arkaplan rengi ayarlanmış. <background> etiketi siyah olarak belirtilmiş. Bu bölümü kendi tercihinize göre değiştirebilirsiniz. <img> etiketi ile sol sütunda yer alan görseli değiştirebilirsiniz. Sağ sütünde yer alan ve yukarıda belirtiğimiz gibi <h> ile başlıklar girilmiş ve yine yukarıda belirttiğimiz <p> ve <br> etiketlerini görebilirsiniz. Aşağıda ki görseli incelemenizi tavsiye ederiz.

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

Yukarıda görmüş olduğunuz kodları revize ettikten sonra notepad plus ile index.html dosyamızı kayıt ediyoruz. Daha sonra inetrnet tarayıcımızda index.html dosya sayfasını yenilememiz gerekiyor. Gerekli düzenlemeleri doğru şekilde yaptığınızda aşağıda yer alan çıktıyı elde etmeniz gerekiyor.

Html Web Tasarımı Nasıl Yapılır Anasayfa Hizmetler Düzenlemeleri Başlıklar İçerikler 2
Html Web Tasarımı Nasıl Yapılır Anasayfa Hizmetler Düzenlemeleri Başlıklar İçerikler 2, 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 3. Bölüm ” başlıklı yazımıza bugün için son veriyoruz. Yarın 4. bölüm ile karşınızda olacağız web sitemizi yapmaya devam edeceğiz.

Umarım 3 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 4. 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 3
Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 3, 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. Bu beyaz arkaplanı nasıl değiştirebiliriz unsalanweb

    1. Author

      Oktay Bey. Arkaplan olarak renk kodlarını kullanacaksıanız
      body bgcolor=”black”
      body bgcolor=”#000000″
      body bgcolor=”rgb(0,0,0)”
      bunu kullanabilirsiniz. RGB değerlerini renk paletinden bulabilirsiniz. Şayet arkaplan için resim tercih edecekseniz body background=”arkaplan.jpg” bu kodu kullanabilirsiniz.

  2. Harika paylaşım. Bende başladım bu işe ve hastalık yaratıyor dostlar bilginiz olsun

    1. Author

      Doğrudur Oktay Bey. Bu işe bir kez girdiğiniz zaman bağımlılık yapabiliyor. İlginize teşekkürler.

Bir cevap yazın

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