HTML kodları kullanarak web sitesi yapmak oldukça kolay ve eğlenceli bir süreçtir. Bu makalede, adım adım nasıl bir web sitesi yapabileceğinizi öğreneceksiniz. HTML (Hyper Text Markup Language), web sayfalarının yapısını oluşturmak için kullanılan bir işaretleme dilidir. HTML kodları sayesinde başlık, paragraf, resim, bağlantı gibi temel öğeleri web sayfanıza ekleyebilirsiniz.

Web sayfanıza daha fazla görsel çekicilik katmak için resim etiketlerini kullanabilirsiniz. Bir resim eklemek için etiketini kullanmanız gerekmektedir. src özelliği, resmin kaynak dosyasının yolunu belirtirken alt özelliği, resimin açıklamasını belirtir.

Web sayfanızda diğer sayfalara veya başka bir web sitesine bağlantı eklemek isterseniz, bağlantı etiketlerini kullanabilirsiniz. etiketi, bağlantı metnini belirtirken href özelliği, bağlantının hedef sayfasının yolunu belirtir.

HTML Nedir?

HTML (Hyper Text Markup Language), web sayfalarının yapısını oluşturan bir işaretleme dilidir. İnternet üzerindeki herhangi bir web sitesini görüntülerken karşımıza çıkan sayfaların, içeriğini ve düzenini HTML kodları belirler. Bu kodlar sayesinde metinler, resimler, bağlantılar gibi temel öğelerin nasıl düzenleneceği belirlenir. HTML, web tarayıcıları tarafından anlaşılır ve yorumlanabilir bir dil olduğu için web sitesinin doğru şekilde görüntülenmesini sağlar.

Temel HTML Etiketleri

HTML kodları kullanarak web sayfalarında başlık, paragraf, resim ve bağlantı gibi temel öğeleri kolayca ekleyebilirsiniz. HTML (Hyper Text Markup Language), web sayfalarının yapısını oluşturan bir işaretleme dilidir. Bu dil, web tarayıcıları tarafından okunabilen metinsel bir formattadır.

Paragraf etiketleri, metinleri paragraf şeklinde düzenlemek için kullanılır. Bir metni yeni bir paragraf olarak başlatmak için

etiketini kullanabilirsiniz ve

etiketi ile paragrafı sonlandırabilirsiniz. Ayrıca, içerikte satır atlaması yapmak için
etiketini kullanabilirsiniz.

Resim etiketi, web sayfalarına görüntü eklemek için kullanılır. Bir resmi eklerken şeklinde kullanabilirsiniz. src özelliği, resmin kaynak dosyasının yolunu belirtirken alt özelliği, resmin açıklamasını belirtir.

Bağlantı etiketleri, web sayfaları arasında veya başka bir web sitesine bağlantı sağlamak için kullanılır. Bir bağlantı oluşturmak için Bağlantı metni şeklinde kullanabilirsiniz. href özelliği, bağlantının hedef sayfasının yolunu belirtirken, bağlantı metni ise kullanıcıya görünen metni belirtir.

HTML Başlık Etiketleri

Başlık etiketleri, web sayfalarında başlıkların belirtilmesini sağlar. Başlık etiketleri, sayfanın yapısını organize etmek ve kullanıcılara sayfa içeriği hakkında bilgi vermek için çok önemlidir. Başlık etiketlerini doğru bir şekilde kullanmak, arama motorları tarafından da takdir edilir ve SEO sıralamanızı artırabilir.

Başlık etiketlerini doğru bir şekilde kullanmak, sayfanızı daha iyi yapılandırmanıza ve okunaklı bir içerik sunmanıza yardımcı olur. Unutmayın, başlıklar kullanıcı deneyimini iyileştirirken, aynı zamanda SEO açısından da önemlidir. Doğru başlık etiketlerini kullanarak web sitenizin görünürlüğünü ve sıralamasını artırabilirsiniz.

H1 etiketi en önemli başlığı belirtirken, H6 etiketi en az önemli başlığı belirtir. HTML kodları kullanılarak yapılan web sitelerinde başlıklar, sayfanın yapısını oluşturan önemli öğelerdir. H1 etiketi, sayfanın en önemli başlığını belirlemek için kullanılır. Örneğin, “HTML Kodları ile Site Yapımı” gibi genel bir başlık bu etiket ile belirlenebilir. H6 etiketi ise en az önemli başlığı belirlemek için kullanılır. Bu etiket, daha az önemli alt başlıkları veya alt konuları belirtmek için idealdir.

etiketi ile birinci dereceden alt başlık belirtilirken,

etiketi ile ikinci dereceden alt başlık belirtilir.

HTML’de başlıklar, metnin yapısını düzenlemek için kullanılan önemli bir öğedir. Birinci dereceden alt başlıklar için

etiketi, ikinci dereceden alt başlıklar için ise

etiketi kullanılır.

Birinci dereceden alt başlıklar, metnin ana konularını ve bölümlerini belirtmek için kullanılır. Bu başlıklar, metnin yapısını daha ayrıntılı bir şekilde düzenlemeye yardımcı olur ve okuyucunun yazı içindeki önemli noktaları daha kolay bulmasına yardımcı olur.

Öte yandan, ikinci dereceden alt başlıklar, birinci dereceden başlıkların altında kullanılır ve daha belirli konuları veya alt bölümleri belirtmek için kullanılır. Bu başlıklar, yazı içindeki ayrıntılı bilgilerin düzenli bir şekilde sunulmasını sağlar ve okuyucunun metni daha iyi anlamasına yardımcı olur.

etiketi ile yeni bir paragraf başlatılırken,

etiketi ile paragraf sonlandırılır.

HTML Paragraf Etiketleri

Web sayfalarında metinleri paragraf şeklinde düzenlemek isterseniz, HTML kodlarından paragraf etiketlerini kullanabilirsiniz. Bu etiketler, sayfanızı daha düzenli ve anlaşılır hale getirmenize olanak sağlar. Paragraf etiketleri, bir metin bölümünü paragraf olarak belirtirken kullanılır.

Yeni bir paragraf başlatmak için <p> etiketini, paragrafı sonlandırmak için ise </p> etiketini kullanmalısınız. Aralarına yazdığınız metin, bu etiketler arasında otomatik olarak bir paragraf oluşturur.

Bir paragrafın içinde satır atlaması yapmak isterseniz, <br> etiketini kullanabilirsiniz. Bu etiketi paragraf içinde istediğiniz yere ekleyerek bir alt satıra geçiş yapabilirsiniz.

Örnek:

<p>Web tasarımı konusunda uzman olan bir kişi, etkileyici ve kullanıcı dostu bir web sitesi tasarlamak için HTML kodlarını doğru bir şekilde kullanmalıdır.</p>

Yukarıdaki örnekte görüldüğü gibi, <p> etiketi ile bir paragraf başlatılmış ve </p> etiketi ile paragraf sonlandırılmıştır. Bu sayede metin, paragraf olarak belirtilmiş ve web sayfasında düzgün bir şekilde görüntülenmiştir.

Paragraf etiketlerini doğru bir şekilde kullanarak web sayfanızda metinleri düzenleyebilir, okuyucuların metni daha anlaşılır bir şekilde takip etmesine yardımcı olabilirsiniz.

etiketi ile paragraf içinde satır atlaması yapabilirsiniz.

Kodlamada CSS ve HTML gibi önemli etiketler bulunmaktadır. Bu etiketler aracılığıyla web sitesi yapısı oluşturulabilir ve istenilen görüntüye kavuşulabilir. HTML resim etiketi de bu önemli etiketlerden biridir.
etiketi, paragraf içinde satır atlaması yapabilmek için kullanılır. Bu etiket, normalde yazılan metne göre bir alt satıra geçiş yapılabilmesini sağlar. Örneğin bir paragrafın ortasında ana başlığın altındaki bir alt başlığa geçiş yapılması gerekiyorsa
etiketi kullanılır.HTML Resim Etiketi ise web sayfalarına görüntü veya resim eklemek için kullanılır. Resim etiketi, etiketi ile belirtilir. Bu etiket içerisinde “src” özelliği resmin kaynak dosyasının yolunu belirtirken, “alt” özelliği ise resmin açıklamasını belirtir. Özellikle görme engelli kullanıcılar için resmin açıklaması büyük önem taşır ve tarayıcılar tarafından okunması sağlanır.HTML resim etiketini kullanarak web sayfalarınızı görselleştirebilir ve ziyaretçilerinizin daha ilgi çekici bir deneyim yaşamasını sağlayabilirsiniz. Resimler, görsel gücünüzü artırmanın yanı sıra içeriğinizi daha iyi anlatmanıza da yardımcı olur.

Bir web sitesi oluştururken, görseller yönlendirici ve etkileyici olabilir. Görseller, web sayfalarınızı daha çekici hale getirebilir ve ziyaretçilerinizin dikkatini çekebilir. Bu nedenle, HTML kodlarını kullanarak sayfalarınıza resim eklemek önemlidir.

Resim etiketini kullanarak, web sayfanıza resim eklemek oldukça kolaydır. İşte basit bir örnek: . Bu kodda, “src” özelliği resmin yolunu belirtirken, “alt” özelliği ise resmin açıklamasını belirtir. Bu iki özellik, resmin doğru şekilde görüntülenmesini ve kullanıcılar için anlamlı bir şekilde ifade edilmesini sağlar.

resim.jpg

=resim.jpg

= şeklinde kullanılır. src özelliği, resmin kaynak dosyasının yolunu belirtirken alt özelliği, resimin açıklamasını belirtir.

alt

Resim etiketi olan ‘alt’ özelliği, bir web sayfasındaki görüntünün açıklamasını belirtmek için kullanılır. Bu önemlidir çünkü görüntü yüklenemediğinde veya görüntüye erişilemediğinde, ‘alt’ açıklaması, kullanıcılara görüntünün içeriğini anlamalarına yardımcı olur. Ayrıca, arama motorlarına da bir ipucu sağlar ve SEO (Arama Motoru Optimizasyonu) açısından önemlidir.

Resim açıklaması

Resim açıklaması, bir web sayfasında gösterilen bir resmin anlamını veya içeriğini açıklayan metindir. Bu açıklama, kullanıcılara resmin ne hakkında olduğunu anlatmaya yardımcı olur. Ayrıca, görsel içeriği anlamak veya ek bilgi edinmek isteyen kullanıcılar için önemli bir referans kaynağıdır.

Resim açıklaması, SEO açısından da önemlidir çünkü arama motorları, resimlere ilişkin açıklamaları dikkate alır ve bu açıklamaları kullanarak resimlerin arama sonuçlarında görüntülenmesini sağlar. Dolayısıyla, resim açıklamasını uygun bir şekilde optimize etmek ve anahtar kelimelerle ilgili bilgileri içermesini sağlamak önemlidir.

Resim açıklaması

Aşağıdaki örnekte, resim açıklamasını içeren bir tablo bulunmaktadır. Bu tablo, resmi tanımlamak ve açıklamak için kullanıcıya gerekli bilgileri sunar:

Resmin kaynağı: resim.jpg Açıklama: Bu resim, doğa manzarasını göstermektedir. Kredi: Fotoğrafçı Adı

Bu şekilde, resim açıklaması hem kullanıcılar hem de arama motorları için bilgilendirici ve optimize edilmiş bir şekilde sunulabilir.

> şeklinde kullanılır. src özelliği, resmin kaynak dosyasının yolunu belirtirken alt özelliği, resimin açıklamasını belirtir.

> şeklinde kullanılır. src özelliği, resmin kaynak dosyasının yolunu belirtirken alt özelliği, resimin açıklamasını belirtir.

Resim etiketi, web sayfalarına görüntü eklemek için kullanılır. src özelliği, resmin kaynak dosyasının yolunu belirtirken alt özelliği, resimin açıklamasını belirtir. Örneğin:

<img src="resim.jpg" alt="Resim açıklaması">

Bu kodu kullanarak resim.jpg dosyasını sayfamıza ekleyebiliriz. Ardından alt özelliği ile de resim için bir açıklama sağlayabiliriz. Bu, kullanıcılar için özellikle görüntüleri yükleyemeyen veya engellenen kişiler için bir alternatif sunar.

Bağlantı etiketleri, web sayfaları arasında veya başka bir web sitesine bağlantı sağlamak için kullanılır. En yaygın bağlantı etiketi, <a> etiketidir. Bu etiket, aşağıdaki gibi kullanılır:

<a href="sayfa.html">Bağlantı metni</a>

href özelliği, bağlantının hedef sayfasının yolunu belirtirken, bağlantı metni ise kullanıcıya görünen metni belirtir. Örneğin, <a href=”sayfa.html”> kodu “sayfa.html” adlı bir sayfaya bağlantı oluşturacaktır. Bağlantı metni olarak kullanılan </a> etiketi içindeki metin de kullanıcının görünen metnidir.

Bağlantı etiketleri, web sayfaları arasında veya başka bir web sitesine bağlantı sağlamak için kullanılır. Bu etiketler, kullanıcıya diğer web sayfalarına bağlantılar sağlamak ve gezinme deneyimini geliştirmek için önemlidir. HTML bağlantı etiketleri, metin şeklinde kullanılır. href özelliği, bağlantının hedef sayfasının yolunu belirtirken, bağlantı metni ise kullanıcıya görünen metni belirtir. Örneğin, Örnek Web Sitesi şeklinde bir bağlantı oluşturabilirsiniz. Kullanıcı bu linke tıkladığında, “Örnek Web Sitesi” yazısına tıklanarak hedef sayfaya yönlendirilir.Bağlantı etiketlerini kullanırken doğru adresleri belirtmek önemlidir. Eğer yanlış bir adres verirseniz, kullanıcılar beklenmedik bir sayfaya yönlendirilebilir veya hedef sayfa mevcut olmayabilir. Bu nedenle, bağlantının doğru çalışmasını sağlamak için her zaman dikkatli olmalısınız. Ayrıca, bağlantı metinlerinin açıklayıcı ve anlaşılır olmasına özen göstermelisiniz, böylece kullanıcılar nereye tıkladıklarını hemen anlayabilirler.

sayfa.html

=Sayfa.html, bir web sitesinde kullanılan HTML kodu tarafından oluşturulan bir sayfa adıdır. Bu sayfa üzerinde web sitesinin içeriği ve düzeni belirlenir.

Bir sayfa.html dosyası oluşturmak için HTML etiketlerini kullanarak içeriği düzenlemeniz gerekir. Bu etiketleri kullanarak başlık etiketleri, paragraf etiketleri, resim etiketleri ve bağlantı etiketleri gibi farklı öğeleri ekleyebilirsiniz. Örneğin, başlık etiketleri ile sayfanın başlığını belirleyebilir, paragraf etiketleri ile metinleri düzenleyebilir ve resim etiketleri ile görüntüler ekleyebilirsiniz.

Tabii ki, sayfa.html dosyası sadece HTML kodlarından oluşmaz. Sayfanın düzenini ve stilini belirlemek için CSS kullanmanız gerekebilir. CSS, sayfanın renklerini, yazı tiplerini, düzenini ve daha fazlasını kontrol etmenize olanak sağlar. Ayrıca, dinamik özellikler eklemek için JavaScript kullanabilirsiniz.

Sayfa.html dosyasının yapılandırılması ve içeriği tamamen sizin tercihlerinize bağlıdır. Yaratıcılığınıza ve tasarım yeteneklerinize dayalı olarak sayfaya farklı öğeler ekleyebilirsiniz. Ancak, kullanıcı deneyimini iyileştirmek ve sade bir tasarım sağlamak için gereksiz karmaşıklıklardan kaçınmanız önemlidir.

Özetlemek gerekirse, sayfa.html dosyası web sitesinin yapısal bileşenlerini oluşturmak için kullanılan bir HTML dosyasıdır. Bu dosya, başlık, paragraf, resim ve bağlantı gibi farklı öğeleri içerebilir. Sayfa.html dosyası, web sitesinin görüntüsünü ve işlevselliğini belirler ve kullanıcıların site üzerinde gezinmelerini sağlar.>Bağlantı metni şeklinde kullanılır. href özelliği, bağlantının hedef sayfasının yolunu belirtirken, bağlantı metni ise kullanıcıya görünen metni belirtir.

Bağlantı metni, web sayfalarında tıklanabilir bir bağlantı oluşturmak için kullanılır. Bağlantı metni, kullanıcının tıklayabileceği ve farklı bir sayfaya yönlendiren metni içerir. Örneğin, bir kelimenin veya cümlenin üzerine tıklanarak başka bir web sayfasına geçebiliriz.

Bağlantı oluşturmak için Bağlantı metni şeklinde HTML kodunu kullanırız. href özelliği, bağlantının yönlendirileceği sayfanın yolunu belirtir. Örneğin, “sayfa.html” şeklinde bir yol belirtirken, bu bağlantının “sayfa.html” adlı bir dosyaya yönlendireceğini belirtiriz. Bağlantı metni ise kullanıcının tıklayarak ulaşacağı metni belirtir. Bu metin, kullanıcının bağlantıyı tıkladığında görünecektir.

Bağlantı metni, kullanıcılara web sayfalarında gezinme ve bilgi erişimi sağlar. Örneğin, bir online mağaza web sitesinde “Sepete Ekle” şeklinde bir bağlantı metni kullanabiliriz. Kullanıcılar bu bağlantıyı tıklayarak sepete ürün ekleyebilirler. Bağlantı metni, kullanıcıları yönlendirerek istedikleri sayfaya doğrudan ulaşmalarını sağlar.