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

Merhaba Değerli Blog Takipçilerimiz. ” ile Ücretsiz Bir Tema ile ” başlıklı yazımıza hoşgeldiniz.

Bu yazımızda ücretsiz olarak hazır template html şablonlarını indirerek nasıl html tabanlı bir web tasarımı yapacağımızı anlatmaya çalışacağız. ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” başlıklı yazımızı beğeneceğinizi umuyoruz.

İlk olarak yazımız hakkında kısa bilgilendirmeler yapmamız gerekiyor ve bilmemiz gereken çeşitli html kodları bulunmakta. Bu html kodlarına aşağıda yer vereceğiz ve ne anlama geldiklerini basit bir şekilde anlatmaya çalışacağız. Sizleri çok bekletmeden ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” isimli yazımıza 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ı 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, html ücretsiz tema web tasarımı, 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

2 yorum

  1. Başarılı ve gayet açıklayıcı anlatım. Tebrikler. Bu işi hiç bilmeyenler için rehber niteliği taşıyabilir.

    1. Author

      Teşekkürler Seo Uzmanı. Yazı dizimiz bugün de devam edecek. İlerleyen zamanlarda seo çalışmaları ile ilgili de makaleler yazacağız.

Bir cevap yazın

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