Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır Eğitim Seti

Html Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır Eğitim Seti

Değerli Blog Takipçilerimiz. ile Ücretsiz Bir Tema ile Eğitim Seti ” yazımıza hoşgeldiniz. Hatırlayacağınız gibi ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimizi 5 bölüm olarak sizlerle paylaşmıştık.

Bu yazı dizimizi bir rehber niteliği taşıyacak şekilde birleştirerek ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır Eğitim Seti ” adı altında birleştirmeye karar verdik. Sizden gelen talepler ve yorumlar doğrultusunda bu eğitim setimizi ileri seviyelere taşıyacağız.

Yukarıda da belirttiğimiz gibi 5 bölüm halinde yayınladığımız ve aşağıda ilgili kategorilere ait tüm yazılara ulaşabileceğiniz linkleri mevcut olan ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimizin birleştirilmiş hali olan bu eğitim seti umarım ilginizi çekecektir.

Sözü ve seo çalışmalarımızı çok fazla uzatmadan hemen ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır Eğitim Seti ” başlıklı yazımıza geçelim. Elbette diğer yazılarımızda da belirttiğimiz gibi bu konu çok fazla detay içermektedir. Bizler burada sadece siz değerli blog takipçilerimizin anlayabileceği ve rahatlıkla uygulama yapabileceği dilde hazırlanmıştır. Bu sebeple çok fazla teknik detaya yer verilmemiş olup, kısa kısa açıklamalar şeklinde planlanmıştır. Hemen ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır Eğitim Seti ” başlıklı yazımıza ilk baştan başlayalım.





Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ?

İlk olarak ihtiyacımız olan ilk program her hangi bir metin editörü programı. Biz Unsalanweb Tasarım Bilişim Hizmetleri olarak Notepad Plus yazılımını kullanıyoruz. Bu linkten programın ücretsiz versiyonuna ulaşarak indirebilirsiniz. İkinci olarak ihtiyacımız olan şey, kendi tarzımıza, firma kimliğine uygun olarak seçeceğimiz html web teması. Bunun için burada ki linkten kendinize göre seçeceğiniz ücretsiz bir html web templates ( html web teması ) indirebilirsiniz. ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” başlıklı yazımız için biz RD Business Free templates üzerinden sizlere html bir web tasarımının nasıl yapılacağını görseller eşliğinde sizlere anlatmaya çalışacağız.

Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası İçeriği

İhtiyacımız olan html web temasını ve notepad plus uygulamasını indirdikten sonra, rd business free temamızı masaüstünde bir klasöre zip‘ten çıkaralım ve doya içeriklerine göz atalım. Karşımıza aşağıda yer alan dosya içerikleri gelecektir. Bu içeriklerden ilk olarak sizlere index.html dosyasından bahsedeceğiz ve ilgili konu geldiği zaman, ilgili klasörlerden de bahsediyor olacağız.

index.html dosyasını sağ tıklayarak Notepad Plus programı ile bu dosyayı açmamız gerekiyor. Dosyayı açtığımızda karşımıza çıkacak olan ekran görüntüsü aşağıda yer almaktadır.

Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Notepad ile Açılımı
Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Notepad ile Açılımı, html, , , web tasarımı, web tasarımı nasıl yapılır

index.html dosyamızı notepad plus ile açtıktan sonra, yine klasörde ki index.html dosyasını internet tarayıcımız eşliğinde açıyoruz. Bunu yapmamızda ki amaç, İndirmiş olduğumuz temanın internet tarayıcısında nasıl göründüğünü anlamak ve vereceğimiz, yapacağımız komut değişikliklerinin karşımıza nasıl çıktı vereceğini anlamak. Aşağıda temanın indirmiş olduğumuz orjinal görseli yer almaktadır.

Html Web Tasarımı Nasıl Yapılır Rd Business Free DosyasıOrjinal Görünümü
Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Orjinal Görünümü, html, html web tasarım, html ücretsiz tema, , web tasarımı nasıl yapılır

Bu pencerelerimiz açık kalsın ve ilk olarak html ile ilgili bilmemiz gereken bazı kodlardan basitçe değinmeye çalışalım. Standart bir web sayfası genel mantık ile 3 ana bölümden oluşmaktadır. Header ( Başlık Bölümleri ), Body ( İçerik Bölümleri ), Footer ( Alt Bölümler ). Dikkat ettiğiniz gibi zaten açmış olduğumuz notepad plus üzerinde en üstten başlayarak aşağı doğru indiğinizde bu etiketleri sizde göreceksiniz. Yeri geldiğinde kullanacağımız diğer kodlardan da ( etiketlerden de ) bahsedeceğiz bu arada.

Tekrar bahsetmekte yarar görüyorum. Tabi ki bu çalışma sizlerin anlayacağı bir dilde hazırlandığı için elbette en basit ve sonuç odaklı olması için yüzeysel anlatım planlanmıştır.






Şimdi en üst sıradan yani 1. satırdan başlayarak html kodlama kullanarak web tasarımımızı yapmaya başlayalım ve kodlar yani etiketler hakkında bilgiler vermeye başlayalım. Aşağıda görmüş olduğunuz kod ilk satırlarımız da yer alıyor ve anlamı, google botları geldiğinde yani robotlar, site kodlarını tarar ve siteniz hakkında bilgiler toplar. Bu kodlar’da sitenizin dilinin ingilizce olduğunu google’a anlatır. Burada ki ” en ” bölümünü biz ilk olarak türkçe yani ” tr ” olarak değiştireceğiz. Bu işlemi notepad üzerinden yapıp kaydedeceğiz.

<!DOCTYPE html>
<html lang=”en“> DÜZENLENMİŞ HALİ ise ” <html lang=”tr”> ” olacak

Şimdi gelelim 5. satırda yer alan <head> etiket bölümüne. head etiket bölümü web sayfamızın en üst bölümünü anlatır, internet tarayıcımızın site ismini ve ikonun gösterdiği bölümdür ve bu bölüm google tarafından ilk okunan bölümdür. Doğal olarak buraya sitemizin başlığını <title></title> bu etiketler arasına yazarız. Hemen alt satırlarda göreceğiniz web sayfamızın tanımını, yazar bilgilerini, anahtar kelimeleri ve burada görünmeyen bir çok meta etiketlerini yerleştiririz. Meta etiketler ile ilgili detaylı yazılar web sayfamızdan paylaşılacaktır. Aşağıda ilgili kodların düzenlenmiş halini görebilirsiniz. Site Title, Site Description, Keyword vb… meta etiketler ile ilgili google tarafından belirlenen bazı kriterler ve karakter sayıları kriteleri mevcuttur. ” SEO AÇISINDAN SİTE TİTLE, DESCRİPTİON ve URL OPTİMİZASYONU ” başlıklı yazımızı okumanızı tavsiye ederiz.

<!– Site Metas –>
<title>Unsalanweb Tasarım Bilişim Hizmetleri</title>
<meta name=”keywords” content=”web tasarım, bilişim, unsalanweb, beylikdüzü web tasarım“>
<meta name=”description” content=”10 Yılı aşkın bir süredir bilişim hizmetleri ve web tasarım konusunda hizmet veriyoruz.“>
<meta name=”author” content=”Unsalanbweb Tasarım Bilişim Hizmetleri“>

Aşağıda ki görseli inceleyebilirsiniz. Görselde <head></head> etiketleri arasında ki düzenlemeler gösterilmiştir. Diğer satırlarda yer alan link rel bağlantıları, site ikon görünümlerini düzenleyen ikon kodlarını ve css, yani sayfa görünüm ayarlarını yöneten dosyaları incelemenizi tavsiye ederim. Bu arada yeri gelmişken bir etiketin açılış ve kapanış etiketleri, html kod dilinde aynıdır. <….> ile açılır, </….> ile kapanır.

Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Head Etiketleri Görseli
Html Web Tasarımı Nasıl Yapılır Rd Business Free Dosyası Head Etiketleri Görseli, 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 ” başlıklı yazımızın bugünlük sonuna geldik. Yarın <body> etiketlerine geçeceğiz ve web sayfamızın temelini kurmaya devam edeceğiz.

” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazımıza aşağıda yer alan yorum bölümünden yorumlarınızı bizimle paylaşabilir, merak ettiğiniz soruları yazabilirsiniz. Tabi ki sosyal medya hesaplarınızda da paylaşmayı unutmayın lütfen.

” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazımızın 2. bölümünde 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
Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır, 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 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, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, 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.


Tekrar Merhaba 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ı 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, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, 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




Değerli Blog Takipçilerimiz Hoşgeldiniz. ” Html 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 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

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

Değerli Blog Takipçilerimiz.” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm ” isimli yazımız ile karşınızdayız.

Geçtiğimiz haftalarda 4 bölüm olarak yayımladığımız ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” başlıklı eğitim serimizin 5. bölümünde artık anasayfamızın tasarımını bitirmiş olacağız.

Sizlerden gelen ve yorumlarınızı bizimle paylaştığınız ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimizi ilerleyen günlerde toparlayarak ” html ile web tasarımı ” ve ” html eğitim seti rehberi ” yapmayı planlıyoruz. Hemen çok fazla uzatmayalım ve anasayfanın son bölümlerini tamamlamaya başlayalım.


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

Değerli blog takipçilerimiz. Aşağıda en son kaldığımız yer olan ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4 bölüm ” yazımıza ait görselleri hatırlayacaksınız. En son olarak öne çıkarılan hizmetimizi, hemen altına diğer alt hizmet kategorilerimizi, referanslarımızı tamamlamıştık. Bugün ise hemen alt sectionlarda , bölümlerde yer alan mutlu müşteri memnuniyeti adını verdiğimiz bölümler geliyor. Bu bölümlerde yapmış olduğumuz öne çıkarılan müşteri yorumlarını, ekip arkadaşlarımızı, proje sayılarını vb.. içerikleri düzenleyeceğiz. Son olarak footer diye adlandırdığımız ve site alt kısmı diyebileceğimiz kısmı bitireceğiz. Footer bölümü her sayfanın en alt kısmında sabit olarak yer alacaktır bilginiz olsun. Son kaldığımız yer aşağıda görselde mevcuttur.

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





Artık nasıl başlayacağımızı biliyoruz değil mi ? Notepad plus programı ile index.html dosyasını açıyoruz. Aynı index.html dosyasını yine internet tarayıcımızı kullanarak açıyoruz ki yaptığımız değişikliklerin çıktısını görebilelim. Hemene alt tarafta yer alan notepad plus görselinden hangi section bölümünü veya bölümlerini değiştirmemiz gerektiğini anladınız umarım. Görselleri çok iyi incelemenizi tavsiye ediyorum. İlk olarak 373. satırdan başlayan ve bizim projelerimiz ile mutlu müşteri memnuniyetini öne çıkaracağımız bölüm gözümüze çarpıyor. Bu bölümde yer alan <p>, <h2>, <div_class>, margin, left, right, column, row, <a_href> vb… benzer kodları geçtiğimiz derslerimizde anlatmıştık. Artık sizler nerelerin değiştirilmesi gerektiğini biliyorsunuz. Bu bölümde karşımıza ilk defa çıkan bir kod var.

<h2 class=”timer count-title count-number” data-to=”23″ data-speed=”1500″></h2>

Bu kod, müşteri memnuniyeti, proje vs. gibi rakamsal değerlerin yer aldığı bölümdeki açılış animasyonlarını düzenleyen koddur. data-to kısmında ki 23 sayısını değiştirebilir, data-speed bölümünden de animasyon sayma hızını dilediğiniz gibi değiştirebilirsiniz. Aşağıda yer alan görseli iyi incelemenizi tavsiye ederim. Bilgisayarınıza kayıt edebilir ve yakından detaylı olarak izleyebilirsiniz.

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, 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örselde kandi web sayfa içeriklerinize göre gerekli değişiklikleri yaptıktan sonra aşağıda yer alan görseli elde etmeniz gerekiyor.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 1
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 1, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Umarım sizde benzer görüntüyü elde etmişsinizdir. Kod yapılarında şayet her hangi bir yalnışlık yaparsanız, site görünümünüz tamamen değişebilir. Bu yüzden yaptığınız işlemleri kayır etmeden önce mutlaka kodların yedeğini almanızı şiddetler öneririm. Çünkü sizler bu işe henüz başladınız. ” Yedek Hayat Kurtarır. ”. Şimdi gelelim ekip üyelerimizi düzenlemeye. Biz burada yer alan görsellerin hepsini aynı hazırlıyoruz ki sizler hangi kodların nerede, nasıl değiştirileceğini daha iyi anlayın. Tabi bu görsel düzenlemeleri için biraz grafik bilgisine ve görsellere ait format bilgisine sahip olmanız gerekiyor.

Ekip üyeleri bölümü 428. satırdan başlıyor ve <section> olarak belirtilmiş. Aşağıda yer alan görseli inceleyerek kontrol edebilirsiniz. Burada karşımıza yine bildiğimiz kodlar geliyor. Farklı olan kodlar var elbette. Aşağıda yer alan ve global bir site olan fontawesome tarafından ücretsiz olarak sunulan ikon paketleri yer almaktadır. fa fa-facebook, fa fa-instagram, fa fa,whatsapp vb…. benzer kodlar sitemizin görselleşmesi için kullanılabilir. Aşağıda er alan kod yapısını incelemenizi ve fontawesome resmi web sitesini mutlaka ziyaret etmenizi öneririm.

<li><a href=”#”><i class=”fa fa-facebook-f”></i></a></li>
<li><a href=”#”><i class=”fa fa-twitter”></i></a></li>
<li><a href=”#”><i class=”fa fa-linkedin”></i></a></li>
<li><a href=”#”><i class=”fa fa-google-plus”></i></a></li>

Bu bölümde yer alan hashtag ( # ) yazan yerlere, kendinize ait sosyal medya hesaplarınızın tarayıcınızda gördüğünüz linklerini kopyala yapıştır yaparak yapıştırabilirsiniz. Örnek vermek gerekirse ( <li><a href=”https://www.facebook.com/unsalanweb”><i class=”fa fa-google-plus”></i></a></li> )

Aşağıda ekip üyeleri bölümüne ait kodların düzenlenmiş haline ait görseli bulabilirsiniz. Burada dikkat etmeniz gereken husus, daha önce ki derslerimizde belirttiğimiz görsellerin alt= etiketleri ve doya isimlerinin kök klasörde, yani /img/dosyaismi.jpg veya png veya diğer görsel formatları olması. Her bir ekip üyesinin sosyal medya hesap linklerini de doldurmanız gerekecek elbette. Google botları, linki olmayan ve link yapısını ( # ) gördüğünde site sıralamasında olumsuz not vermektedir bilginiz olsun.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 2
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 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örseli inceleyerek, yapmanız gereken değişiklikleri gerçekleştirdiğinizde aşağıda yer alan çıktıyı elde etmeniz gerekecektir.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 3
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 3, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır





Ve son olarak footer diye adlandırdığımız ve web sitemizin her sayfasının en alt kısmında yer alacak olan bölüme. Bu bölümde genellikle galeriler, iletişim bilgileri, blog yazıları, bülten abonelikleri ve benzeri içerikler paylaşılmaktadır.  Notepad plus programında 613. satırda footer denilen bölümün başladığı yer zaten html tema içerisinde belirtilmiş. Kurumsal logomuzun altında iletişim bilgilerimiz ve sosyal medya hesaplarımız ikonlar eşliğinde yer almış. İlk olarak ilgili kodları değiştirelim. Comtact Us > İletişim Bilgilerimiz, Adresimiz, Telefon, Mail Bilgilerimiz ve benzeri iletişim detayları ve sosyal medya hesap linklerimiz.

İletişim bilgileri bölümünü düzenledikten sonra, hemen yan tarafında menü bölümüne geçiyoruz. Bu bölüme hızlı menü diyebiliriz. Bu alanı düzenledikten sonra da sağ tarafında yer alan ve son eklenen yazılar bölümünü düzeltebiliriz. Footer‘ın en sağında yer alan bölümde de ziyaretçilerimizin web sayfamıza ve haberlerimize abone olmalarını sağlayabiliriz. Tabi ki bülten abonelikleri kod yapısı olarak farklı altyapı kullanmaktadır ve karışık düzenlemeler gerektirmektedir. Bu konu ile ilgili ve form oluşturma konusu ile ilgili yazılar web sayfamızdan yayımlanacak olup, siz değerli blog takipçilerimize duyurulacaktır. Footer bölümü kodlarının düzenlenmiş haline ait görselimiz aşağıda yer almaktadır. Çok iyi incelemenizi tavsiye ederim.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Footer 1
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Footer 1, 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 5. Footer 2
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Footer 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 gördüğünüz ve kendi sitenize ait bilgileri düzenlediğinizde aşağıda yer alan final footer bölümü çıktısını elde etmeniz gerekiyor. Böylece anasayfa tasarımımızı bitirmiş bulunuyoruz.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 4
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 4, 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 5. Bölüm ” başlıklı yazımıza bugün için son veriyoruz. Yarın 6. bölüm ile karşınızda olacağız web sitemizi yapmaya devam edeceğiz ve çalışmamızı bitireceğiz.

Umarım 5 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 6. 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 5
Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır



Html Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır Eğitim Seti
Değerli Blog Takipçilerimiz. ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır Eğitim Seti ” yazımıza hoşgeldiniz. Hatırlayacağınız gibi ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimizi 5 bölüm olarak sizlerle paylaşmıştık, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır, html web tasarım eğitim seti

Bir cevap yazın

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