Web tasarım, bir web sitesinin görünümünün ve işlevselliğinin tasarımıdır. Bu, bir web sitesinin nasıl görüneceğini ve içeriğinin nasıl sunulacağını, ayrıca kullanıcıların nasıl etkileşimde bulunabileceğini içerir. Web tasarımı, bir web sitesinin tasarımını ve yapısını etkileyen birçok faktörü dikkate alır, bunlar arasında kullanıcı deneyimi, görsel tasarım, içerik yönetimi, arama motoru optimizasyonu, web sitesinin yapısı ve navigasyonu ve web sitenin hedef kitle ve amacı yer alır.
Web tasarımcıları, bu faktörleri göz önünde bulundurarak bir web sitesinin tasarımını yapar ve kodlar ve programlar kullanarak bir web sitesini oluşturur. Günümüzde, birçok insan internet üzerinden alışveriş yaparken, haberleri takip ederken veya bilgi edinirken web sitelerini kullanır, bu nedenle web tasarımı kullanıcıların deneyimini etkileyen önemli bir alandır.
HTML Web Sayfası Oluşturma
HTML, bir web sayfası oluşturmak için kullanılan bir dil. Bu dil, Hiper Metin İşaretleme Dili’nin İngilizce adı olan Hypertext Markup Language’ın kısaltılmış hali. HTML kullanarak, kendi web sayfanızı oluşturabilirsiniz. Web sayfalarının kullanıcı tarafından görüntülenen bölümlerini oluşturan HTML, öğrenmesi kolay ve eğlenceli bir metin işaretleme dilidir. Bu eğitim serisiyle, HTML hakkında temel bilgilere sahip olacaksınız.
HTML Etiketleri
HTML’de, tüm elemanlar etiketler içinde yer alır ve bu etiketler farklı görevler üstlenir. Her etiket, < ve > işaretleri arasında başlar ve </ ile > işaretleri arasında biter. Örneğin, aşağıdaki örnekte, 5. satırdaki <title> ve </title> etiketleri arasında yer alan bölüm tarayıcı sekmenizde görünen yazıyı belirler.
Basit Bir HTML Sayfa Örneği
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
- <title>Sekme Başlığı</title>
- </head>
- <body>
- <h1>Sayfa İçindeki Başlık</h1>
- <p>Bu bir paragraf alanıdır. Buraya genellikle sayfadaki uzun yazılar gelir.</p>
- </body>
- </html>
HTML Sayfa Örneğimizi İnceleyelim
HTML dokümanımızın ilk satırında, <!DOCTYPE html> etiketi yer alır ve tarayıcıya bu dokümanın bir HTML dokümanı olduğunu bildirir. 2. satırda, <html></html> etiketi bulunur ve içerisindeki metinlerin HTML olduğunu belirtir.
- satırda, sayfamızın üst kısmını oluşturan ve “head” anlamına gelen <head></head> etiketi yer alır. Bu etiket, sayfanın baş kısmında yer alması gereken diğer etiketleri içerir, örneğin 5. satırdaki <title><title> etiketleri.
- satırda, “body” anlamına gelen <body></body> etiketi başlar ve HTML sayfanızdaki ana elemanları içerecek kısımdır. Body kısmı, 8. satırdaki sayfalarda başlık oluşturmaya yarayan <h1></h1> etiketi ve 9. satırdaki <p></p> paragraf etiketini içerir.
HTML Dosyası Oluşturma
HTML dosyasını denemek, bilgisayarınızda çok kolaydır. Bu, her türlü tarayıcıda çalışır ve program yükleme gerektirmez. Windows işletim sisteminde, Not Defteri gibi bir metin editörü kullanarak HTML dosyası oluşturun. Örnek kodları kopyalayın ve “metinadi.txt” yerine “metinadi.html” olarak kaydedin. Bu dokümanı çalıştırdığınızda, aşağıdaki gibi bir görüntüyle karşılaşacaksınız.
Sık Kullanılan Bazı HTML Etiketleri
İşte en yaygın kullanılan ve sık sık kullanacağınız bazı HTML etiketleri:
- <h1>Başlık</h1>
- <p>Paragraf</p>
- <a href=”https://www.orneklink.com”>Bağlantı</a>
- <img src=”resim.jpg” alt=”Resim Açıklaması”>
- <ul><li>Liste Öğesi</li></ul>
- <div></div>
Bu etiketler, HTML’deki tüm etiketlerin bir listesi değildir ve tüm HTML etiketlerini görmek için, W3.org’un tüm HTML elementleri sayfasını ziyaret edebilirsiniz. Örneklerimiz, <body></body> etiketi içinde olacaktır, bu nedenle kodları daha sade bir şekilde sunuyorum. Örnekleri denemek isterseniz, gövde içinde kullandığınızdan emin olun.
HTML’de Yorum Satırı Yapma
Yorum satırları, HTML dosyalarında görünen ve tarayıcı tarafından kullanıcılara gösterilmeyen bölümlerdir. HTML’de kodlarımıza yorum eklemek için, <!– ve –> etiketleri arasına yorumlarımızı yazıyoruz.
HTML Yorum Satırı Örneği
- <!–Bu bir yorumdur ve yalnızca kod tarafında görünür yani tarayıcı bu kısmı derlemez.–>
HTML’de Bağlantı Oluşturma
Bağlantı etiketi, HTML’de en sık kullanılan etiketlerden biridir. HTML’de bağlantı vermek için, href=”” içinde çift tırnaklar arasına bağlantıyı yazın ve <a href=””> ve </a> etiketleri arasına görünecek metni yazın. Aşağıdaki örnekte, HTML bağlantı etiketinin tamamı birlikte görülebilir ve daha anlaşılır hale gelecektir.
HTML Bağlantı Verme Örneği:
- <a href=“https://www.ozgurceyaz.com”>Özgürce Yaz Sitesine Git</a>
HTML’de Kalın Yazı ve İtalik Yazı Etiketleri
HTML’de, <b></b> etiketi arasında yer alan metin, kalın yazı şeklinde görünür. Italik yazı görünümü için ise, <i></i> etiketini kullanın.
HTML Kalın Yazı ve İtalik Yazı Örneği:
- <p>Normal yazı kısmı ve <b>kalın yazı kısmı</b>.</p>
- <p>Adam öyle iriydi ki herkes ona <i>Koca Hasan</i> diye hitap ediyordu.</p>
Span Etiketi ve Satır İçi Stil Verme
<span></span> etiketi, genellikle paragraf içindeki metinlerin belirli bölümlerine çeşitli özellikler vermek için kullanılır. Aşağıdaki örnekte, span etiketi içindeki metni “style=’color:blue'” koduyla maviye çevirdik. Bu kodun “color” bölümü, yazı rengini iki nokta üst üste gelen rengine çevirir. Örnekte “blue” yazdığımız için, metin mavi görünecektir.
Span Etiketi ve Style Örneği:
- <p>Onun çok güzel <span style=“color:blue”>mavi</span> gözleri vardı.</p>
Div Etiketi ve Renk Kodları
<div></div> etiketi, çok yaygın olarak kullanılan bir kapsayıcıdır. HTML’de herhangi bir bölümü ifade eder ve içerisinde birçok farklı etiket yer alabilir. Bu örnekte, <div></div> etiketi içine metin etiketleri yerleştiriyoruz ve yazı rengini “style=’color:#0000FF'” koduyla değiştiriyoruz. Bu kod, HEX renk kodu olarak adlandırılır ve ekranda görünebilecek tüm renkleri elde etmemizi sağlar. HEX renk kodlarını kolayca belirleyebilmek için, W3 Schools’un HTML renk paletini kullanabilirsiniz.
Div Etiketi ve HTML Renk Kodu Örneği:
- <div style=“color:#0000FF”>
- <h3>Bu Bir Başlıktır</h3>
- <p>Bu bir paragraftır.</p>
- </div>
HTML’de Resim Ekleme
<img src=””> etiketiyle, HTML’de resimleri görüntülemek mümkündür. src=”” içinde çift tırnaklar arasına resmin adresini yazın ve tarayıcılarda resim tam ekran olarak görüntülenecektir. Eğer resmin belirli bir boyutta görünmesini istiyorsanız, height=”” veya width=”” parametrelerini kullanarak piksel cinsinden resmin boyunu ve enini belirtebilirsiniz. Örnekte, resmin 48 piksel eni ve boyu vardır ve ayrıca alt=”” parametresiyle resmin neyi içerdiğiyle ilgili bir açıklama da eklenmiştir.
HTML Resim Ekleme Örneği
- <img src=“https://ozgurceyaz.com/wp-content/themes/ozgurceyaz/assets/img/ozgurceyaz.png” alt=“Özgürce Yaz” height=“48” width=“48”>
HTML’de Liste Oluşturma
HTML’de liste oluşturmak için, önce listeyi oluşturan dış elemanı <ul></ul> etiketiyle tanımlayın. Daha sonra bu etiketin içine istediğiniz kadar <li></li> etiketiyle liste elemanı ekleyebilirsiniz.
HTML Liste Örneği
- <ul>
- <li>Kahve</li>
- <li>Limonata</li>
- <li>Su</li>
- </ul>
Mobil Uyumlu Sayfa CSS Örneği:
* { font-family: Arial; margin: 0; padding: 0; box-sizing: border-box; /* Bu satır sayesinde padding ve border gibi özelliklerin elementlerin genişliğine dahil olmasını sağlar */ } html { background-color: #1d4657; } a { text-decoration: none; color: black; } header { background-color: #4384b1; width: 100%; display: flex; /* Bu satır sayesinde header içindeki elementler düzenli bir şekilde yatay olarak dizilebilir */ } .menu { display: none; /* Bu satır sayesinde .menu elementi mobil cihazlarda görünmez */ } .menu li { display: inline-block; } .menu li a { color: white; font-size: 16px; font-weight: 300; padding: 12px 18px; display: inline-block; } .menu li a:hover { background-color: #5fabe0; } .kutu { width: 100%; max-width: 1200px; margin: auto; } .logo { font-size: 24px; font-weight: 600; color: white; padding: 7px 20px; display: inline-block; } .logo:hover { background-color: #5fabe0; } main { padding: 30px 15px; min-height: 770px; background-color: white; } h1 { text-align: center; font-size: 36px; margin-top: 15px; margin-bottom: 30px; } h2 { margin-top: 15px; } p { margin-top: 15px; } .foto { float: left; margin: 0px 15px 15px 0; padding: 5px; background: #f7f5ed; border: 1px solid #cccabc; border-radius: 2px; width: calc(100% – 15px); max-width: 400px; } footer { width: 100%; display: inline-block; } footer .menu { float: none; text-align: center; margin-top: 10px; } footer .menu li a { padding: 6px; margin: 6px; } footer .menu li a:hover {
İyi Bir E-Ticaret Sitesinin Sahip Olması Gereken Nitelikler Nelerdir?
Bir e-ticaret sitesinin iyi olması için bazı önemli özellikleri olması gerekir:
- Kullanıcı dostu arayüz: Kullanıcıların rahatça gezinmesine ve ürünleri bulmasına olanak sağlayacak şekilde tasarlanmış bir arayüz.
- Güncel ve anlaşılır ürün bilgileri: Ürünler hakkında açık ve detaylı bilgilerin bulunması, özelliklerin, fiyatların ve stok durumlarının doğru bir şekilde gösterilmesi.
- Güvenilir ödeme seçenekleri: Ödeme yöntemlerinin güvenliğinin sağlanması ve farklı ödeme seçeneklerinin sunulması (kredi kartı, havale vb.).
- Hızlı ve güvenilir teslimat: Müşterilerin siparişlerini hızlı bir şekilde teslim etme ve teslimat süreci hakkında bilgi verme.
- Müşteri desteği: Müşterilerin sorunlarını çözmek için ulaşabilecekleri ve sorularına cevap alabilecekleri bir müşteri destek hattı.
- Güvenilir güvenlik önlemleri: Müşteri bilgilerinin güvenliğini sağlamak için güvenlik önlemlerinin alınması (örneğin SSL sertifikası kullanımı).
- Mobil uyumluluk: Artık çok sayıda insan cep telefonlarını kullanarak alışveriş yapıyor, bu nedenle e-ticaret sitesinin mobil cihazlarda da rahat bir şekilde kullanılabilir olması önemlidir.
Yasal bir firma kurduktan sonra açmak istediğiniz e-ticaret sitesi nasıl olmalıdır?
Başarılı bir internet sitesi, tasarımıyla tüketicinin dikkatini çekerek, kullanım kolaylığı sağlayacak şekilde düzenlenmelidir. Adının akılda kalıcı ve ürünleri kategorilere ayırarak tüketicinin kolay ulaşımını sağlayan bir yapıya sahip olması önemlidir. Ayrıca, metin dilinin yalın ve bilgilendirici olması, müşteri ilişkilerine özen gösterilmesi ve ürün çeşitliliğinin sağlanması hizmet kalitesinin yüksek olmasını sağlar.
Tüketicilere farklı ödeme seçenekleri sunulması, kredi kartına taksitlendirme, kapıda ödeme gibi opsiyonların yer alması hızlı ve pratik bir alışveriş deneyimi sağlar. SSL sertifikası sayesinde, tüketiciye sunucu ile kullanıcı arasında yapılan tüm bağlantıların şifrelendiği güveni verir, hassas bilgilerin güvende olduğunu gösterir.
Canlı destek hizmeti tüketiciyi daha fazla sitede tutar ve ürünler hakkında merak ettikleri bilgileri sormak için sizden tavsiye isteyebilirler. Sürekli olarak düzenlenen indirim kampanyaları sayesinde müşteri sayısı artırılıp ağın genişletilebilir. Cazibe çeken promosyonlarla indirimli ürünleri duyan müşteriler, başka çeşitteki ürünlerinizi de görüp satın alabilirler.
SEO Uyumlu Web Tasarım Nedir?
SEO, bir web sitesinin arama motorları tarafından daha iyi anlaşılıp, daha üst sıralarda görüntülenmesini sağlamak amacıyla yapılan çalışmaları ifade eder. SEO uyumlu web tasarım ise, arama motorlarının beklentilerine uygun olarak geliştirilmiş web siteleridir. Bu tasarım sayesinde, Google, Yandex ve Bing gibi arama motorları tüm sayfaları daha kolay bulup, anlayıp, indekse eder.
Özellikle rekabet ortamında bulunan her sektörde, SEO uyumlu web tasarımına sahip olmak önemlidir, çünkü bu sayede arama motorları web sitenizi daha iyi anlar ve sonuçlarda gösterir. Şimdi size seo uyumlu web tasarım için gerekli olan 10 tane tavsiye vereceğiz.
1 Her Sayfanız İçin Etkili Meta Etiketleri Oluşturun
Web sitenizin meta etiketlerinin düzenlenmesi, en etkili ve hızlı sonuçları almanıza yardımcı olacaktır. Arama motorları, web sitenizin title (başlık) ve description (açıklama) etiketlerini sonuçlarında gösterir. Bu nedenle, bu etiketlerde anahtar kelimeyi geçirmeye dikkat etmeli ve rakiplerinizden daha etkili, cezbedici ve anlaşılır bir başlık ve açıklama yazmalısınız.
Uygun başlık uzunluğu 50-60 karakterdir. Uygun açıklama uzunluğuysa 120-160 karakterdir.
2 Sayfanızda Uzun, Kaliteli ve Özgün Yazı Bulundurun
SEO’da en önemli faktör, hedef kitlenizin aradığı bilgiyi en iyi şekilde sunan içerik kalitesidir. Ele aldığınız konuyu her yönüyle açıklamalı ve içeriğinizi başka bir siteden kesinlikle kopyalamamalısınız. Google’da yer alan rakip sayfaların içeriklerini inceleyerek, daha iyisini oluşturmaya çalışın.
Yapılan araştırmalara göre, Google’da ilk sayfada yer alan sitelerin içeriklerinin ortalama uzunluğu 1500-2000 kelime arasındadır. Ancak, içeriğin uzunluğu, aramanızı yapmak istediğiniz anahtar kelimenin rekabet durumuna göre değişebilir. Örneğin, 500 kelime civarında özgün ve kaliteli içerikle, ilk sıraya çıkmak mümkün olabilir.
3 Site ve Sayfa Açılış Hızlarını İyileştirin
Google’da aranılan bilgi çok sayıda web sitesinde bulunabilir. Bu nedenle, web sitenizin içeriğini en iyi şekilde sunmasını sağladıktan sonra, ilk yapılması gereken şey, sayfa hızını mümkün olan en yüksek seviyeye çıkarmaktır. Bu açıdan, web tasarımının kalitesi ve profesyonelliği önem kazanır. Google ve GTmetrix gibi ücretsiz araçları kullanarak, web sitenizin ne kadar hızlı olduğunu öğrenebilirsiniz. İdeal bir web sayfasının yüklenme süresi 2-3 saniye olmalıdır.
Ancak, eğer web sayfanız çok geç açılıyorsa, ziyaretçiler sıkça web sitenizden çıkış yapacaklardır. Örneğin, Google’ın yaptığı bir araştırmaya göre, mobil kullanıcıların %53’ü, yüklenme süresi 3 saniyeyi geçen sitelerden çıkış yapmaktadır. İçeriğiniz ne kadar iyi hazırlanmış olursa olsun, kullanıcıların bir kısmı, sayfanızın açılmasını beklemeden Google sonuçlarına dönüp diğer sitelere yönelebilirler.
4 Sayfanızı Tüm Mobil Cihazlarda Test Edin
Günümüzde, mobile uyumlu olmayan web siteleri neredeyse kalmadı. 2010 yılında responsive web tasarımın ortaya çıkmasıyla birlikte, web tasarımı da bu yönde gelişmeye başladı. Özellikle internet kullanıcılarının %70’i mobil cihazları kullandığı günümüzde, web tasarımınızın masaüstü görünümünden çok, mobil cihazlardaki durumuna önem vermeniz gerekir.
Bu nedenle, oluşturduğunuz sayfaları farklı cihazlar üzerinden de test etmeniz yararlı olacaktır. Örneğin, Android Chrome’da düzgün çalışan bir web sayfası, IOS (iPhone) Safari telefonlarda problem yaratabilir. Ayrıca, tablet kullanıcılarının da sayısı her geçen gün artıyor. Bu nedenle, web sayfalarınızı tablet cihazlarında da test etmeniz gerekmektedir.
5 Sayfanızda H1, H2 Başlıklarını Kullanın
İçerik oluştururken, heading etiketlerini dikkatli bir şekilde kullanmaya özen gösterin. Heading etiketleri, ana başlık anlamına gelir ve meta etiketi olan ‘title’ kısmına yazılan başlık ya da bu başlığa küçük eklemeler yaparak kullanılabilir. Arama motorları, sayfada kullanılan heading etiketlerini okuyarak, içeriğinizin konusunu anlamaya çalışır. Bu nedenle, heading etiketlerini doğru bir şekilde kullanarak, içeriğinizin anlaşılır ve açık bir şekilde sunulmasını sağlayın.
6 Sayfanızı Resim, Video ve Infografiklerle Zenginleştirin
Yalnızca yazılarla oluşturulan web sayfaları ziyaretçilerin dikkatini çekmek için oldukça zordur. Bu nedenle, sayfanızda özgün resimler, videolar veya infografikler gibi görseller hazırlayarak, ziyaretçilerinizin sayfanızda daha uzun süre kalmasını ve daha keyifli zaman geçirmesini sağlayabilirsiniz.
Ancak, oluşturacağınız multimedyaları sitenize yük getirmeye izin vermemek de önemlidir. Bu nedenle, resimlerinizi tinypng gibi bir araç kullanarak sıkıştırmadan önce yükleyin. Ayrıca, Youtube videolarını iframe içerisinde göstermek yerine, video resmini yerleştirip popup olarak açmayı deneyebilirsiniz.
7 Sayfa Linki Kısa, Basit ve Anahtar Kelimeyi İçermeli
Web sitenizin linkleri, SEO açısından oldukça önemlidir. Bu nedenle, mümkün olduğunca kısa ve anlamlı kelimeler içeren linkler oluşturmaya özen gösterin. Ayrıca, anahtar kelimenizi alan adınızın yakınına tutmayı da unutmayın. Linklerde kelime aralarına alt çizgi “_” yerine tire “-” kullanmayı tercih edebilirsiniz.
Örneğin:
Yanlış Url:
https://www.example.com/p=123
https://www.example.com/8/6/16/cat=SEO/pageid=890.html
Doğru Url:
https://www.example.com/seo-uyumlu-web-tasarim-nedir
8 Sosyal Medyada Paylaşım Butonları Kullanın
Günümüzde, internet dünyasına daha sonradan katılan sosyal medya platformlarının SEO üzerindeki etkisi oldukça büyüktür. İçerikleriniz ne kadar çok insan tarafından beğenilir ve paylaşılırsa, sayfalarınız o kadar çok ziyaretçi çekecektir.
Bu nedenle, sosyal medya paylaşım butonlarını içeriklerinizin giriş veya sonuç kısımlarına yerleştirmeyi unutmayın. Özellikle Facebook, Whatsapp, Instagram ve Twitter gibi platformlar ülkemizde oldukça popülerdir ve bu butonları web sitenizden eksik etmemeye özen gösterin.
9 Site İçi Link Yapısına Önem Verin
Bir web sitesinin SEO performansını arttırmak için sayfaları arasında linkler oluşturmak önemlidir. Özellikle anasayfa ve kategori/hizmet sayfaları ziyaretçiler tarafından sık kullanılan sayfalardır. Bu nedenle, anahtar kelimenizi kullanarak eski sayfalarınıza yeni oluşturduğunuz sayfadan linkler vererek bu sayfaları güçlendirmeyi düşünebilirsiniz.
Ayrıca, eski blog yazılarınızdan yeni oluşturduğunuz sayfalara da linkler vererek eski sayfalarınızı da canlı tutabilirsiniz. Farklı sitelerle link değişimi yaparken, arama motoru botlarının sitenizden çıkmasını önlemek için linklerinizde “rel = ‘nofollow'” özelliği kullanılmasına dikkat etmelisiniz.
10 Sayfanızda SSL Sertifikası (Güvenli Url) Bulunsun
Günümüzde, özellikle e-ticaret siteleri gibi hassas bilgileri işlemekte olan web sayfalarında güvenlik çok önemlidir. Bu nedenle, Google ve diğer arama motorları, SSL sertifikasına sahip olan siteleri daha üst sıralarda gösterir. SSL (Secure Sockets Layer), web sayfaları arasında güvenli bir bağlantı kurulmasını sağlayan bir güvenlik protokolüdür. Bu sertifika, ziyaretçi ile site arasında yapılan tüm bağlantıların şifrelendiğini gösterir ve hassas bilgilerin güvenliğini sağlar. Özellikle, kredi kartı bilgileri gibi hassas bilgilerin güvenliği açısından SSL sertifikasına sahip olan siteler tercih edilmelidir.
