HTML web sitesi kodları, web sayfalarının yapılarını ve içeriklerini düzenlemek için kullanılan kodlardır. Bu makalede, HTML’nin temel işlevlerini ve en yaygın kullanılan kodları ele alacağız.
HTML (HyperText Markup Language), web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan bir işaretleme dilidir. HTML kodları, bir web sayfasının başlık, metin, resim, bağlantı vb. gibi farklı bileşenlerini düzenlemek için kullanılır.
Bunun yanı sıra, HTML ile metinleri kalın (), italik (), altı çizgili () veya üstü çizgili () gibi farklı şekillerde biçimlendirebilirsiniz. Resim eklemek için etiketini kullanabilir, hyperlinkler oluşturmak için ise etiketini kullanabilirsiniz.
HTML web sitesi kodlarının yanı sıra, CSS (Cascading Style Sheets) kullanarak HTML sayfalarına stil ve biçim verebilirsiniz. CSS, HTML sayfalarına renkler, fontlar ve diğer stil özellikleri eklemenizi sağlayan bir stil yapısıdır.
Bu makalede, HTML web sitesi kodlarının temelini oluşturan etiketleri ve işlevlerini öğreneceksiniz. HTML ve CSS’yi kullanarak profesyonel ve estetik web sayfaları oluşturmanın temellerini kavrayacaksınız.
HTML Nedir?
HTML Nedir?
=HTML (HyperText Markup Language), web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan bir işaretleme dilidir.
HTML, World Wide Web’in temel yapı taşlarından biridir ve web tarayıcıları tarafından anlaşılabilen bir format kullanır. HTML, bir metin belgesinde başlık, paragraf, linkler, resimler, tablolar ve diğer öğeler gibi çeşitli elementleri kullanarak web sayfalarının görüntülenmesini ve düzenlenmesini sağlar.
Her HTML belgesi, etiketleri arasında yer alır ve
ve bloklarından oluşur. bölümü, web tarayıcısının belgeyle ilgili meta bilgileri ve stilleri işlemesine yardımcı olurken, bölümü, sayfanın gerçek içeriğini içerir.Ayrıca, HTML belgeleri CSS (Cascading Style Sheets) ile birlikte kullanılarak biçimlendirilebilir. CSS, HTML sayfalarına stil ve biçim vermek için kullanılan bir stil yapısıdır. Bu, web sayfalarının daha profesyonel ve görsel olarak çekici olmasını sağlar.
HTML, web geliştirme sürecinin temel bir parçasıdır ve web tasarımcıları, geliştiriciler ve içerik oluşturucular için önemli bir araçtır. HTML’nin temel prensiplerini öğrenerek, kullanıcı dostu, etkili ve ilgi çekici web siteleri oluşturabilirsiniz.
Temel HTML Etiketleri
Temel HTML Etiketleri
Web sayfalarının oluşturulmasında kullanılan en önemli ve temel HTML etiketleri vardır. Bu etiketler sayesinde web sayfaları yapılandırılır ve içerikler tanımlanır. İşte temel HTML etiketlerinden bazıları:
| Etiket | Açıklama |
|---|---|
| <html> | Web sayfasının başlangıcını ve sonunu belirtir. |
| <head> | Web sayfasının başlık, stil ve diğer meta bilgilerini içerir. |
| <title> | Web sayfasının başlık metnini belirtir. |
| <body> | Web sayfasının görünen içeriğini içerir. |
| <h1> – <h6> | Başlık olarak kullanılan etiketlerdir. <h1> en büyük başlığı, <h6> ise en küçük başlığı temsil eder. |
| <p> | Paragraf oluşturmak için kullanılır. |
| <a> | Hyperlinklerin oluşturulmasını sağlar. |
| <img> | Web sayfasına resim eklemek için kullanılır. |
| <ul> – <li> | Listelerin oluşturulmasını sağlar. |
Yukarıda bahsedilen etiketler, web sayfalarının oluşturulması ve düzenlenmesi için temel taşlardır. Bu etiketleri kullanarak, web sayfalarınızı istediğiniz şekilde yapılandırabilir ve içerikleri düzenleyebilirsiniz.
HTML Elementleri
HTML elementleri, etiketler aracılığıyla tanımlanır. Her element, bir açılış etiketi ve bir kapanış etiketiyle çevrilir. Açılış etiketi elementin başlangıcını belirtirken, kapanış etiketi elementin sonunu belirtir. Örneğin, bir başlık elementi kullanmak istediğinizde, metnin başlangıcını etiketiyle belirtirsiniz.
HTML elementlerinin amacı, web sayfalarına yapı ve anlam kazandırmaktır. Elementler, metinleri biçimlendirmek, bağlantılar oluşturmak, görseller eklemek, tabloları ve listeleri oluşturmak gibi çeşitli işlevlere sahiptir. Her elementin kendine özgü bir kullanım amacı ve özellikleri vardır ve doğru şekilde kullanıldığında web sayfaları daha anlaşılır ve düzenli hale gelir.
Metin Biçimlendirme
=HTML ile metinleri kalın () veya italik () gibi farklı şekillerde biçimlendirebilirsiniz. Ayrıca, metinleri altı çizgili () veya üstü çizgili () olarak da biçimlendirebilirsiniz. Bu şekilde, metinlerinizi vurgulamak veya farklı bir görsel efekt eklemek için çeşitli seçenekleriniz vardır.
Resim Ekleme
src özelliği resmin yolunu belirtir. HTML sayfalarında görsel öğeler kullanarak daha etkili ve çekici bir deneyim sağlayabilirsiniz. etiketi, web sayfanızda resim eklemek için kullanılır. Bu etiketin src özelliği, resmin URL’sini belirtir. Yani resmi hangi web adresinde bulabileceğinizi ifade eder. Bu sayede internet üzerinden erişilebilen herhangi bir resmi web sayfanıza ekleyebilirsiniz. Örneğin, bir şirket logosunu veya bir ürün resmini web sayfanıza yerleştirmek için
etiketini kullanabilirsiniz. Aynı zamanda,
etiketi içerisinde alt özelliği de kullanarak, resmin alternatif metnini belirtebilirsiniz. Bu metin, resmin yüklenmediği durumlarda görüntülenir ve işitme engelli kullanıcılar için önemli bir bilgidir. Resim ekleme işlemi sırasında dikkat edilmesi gereken bir nokta, resimlerin uygun boyutlarda ve optimize edilmiş olmasıdır. Bu, web sayfanızın yüklenme hızını etkiler ve kullanıcı deneyimini olumsuz yönde etkilemez.
src
src, HTML img etiketinde kullanılan bir özelliktir. Bu özellik, resmin yerel konumunu veya internet üzerindeki URL’sini belirtir. Resim eklemek için img etiketini kullanırken, src özelliğini kullanarak resmin kaynağını tanımlamalısınız.
özelliği resmin yolunu belirtir.
Özelliği resmin yolunu belirtir.
Bir resmi HTML sayfasına eklemek için etiketi kullanılır. Bu etiketin src özelliği resmin yolunu belirtir. Bir resmin yolunu belirtirken dikkat etmeniz gereken bazı şeyler vardır. Öncelikle, resmin URL’sine doğru şekilde ulaşmanız gerekir. Yani, resmin çevrimiçi bir sunucuda veya dosya sisteminizde bulunması gerekir. Ardından, resmin yolunu veya adresini tam olarak belirtmelisiniz, böylece tarayıcı resmi doğru şekilde yükleyebilir.
Resmi eklemek için aşağıdaki örneği kullanabilirsiniz:
Bu örnekte, src özelliği resmin yolunu belirtir. Eğer resminizin uzantısı farklı ise, resmin uzantısını doğru şekilde belirtmelisiniz. Ayrıca, resme bir alt özelliği ekleyebilirsiniz, böylece resim yüklenmediğinde veya kötü bir bağlantı olduğunda kullanıcılar uygun bir alternatif metin görüntüleyebilir.
Bu sayede, HTML sayfalarınıza resim ekleyerek görsel açıdan zengin ve etkileyici bir deneyim yaratabilirsiniz.
Hyperlinkler
= etiketi ile HTML sayfalarda hyperlinkler oluşturabilirsiniz.
HTML sayfalarında, diğer sayfalara veya belgelere bağlantılar eklemek için etiketini kullanabilirsiniz. etiketinin
Bağlantılara metin veya resimler ekleyebilirsiniz. Metin için etiketini kullanırken içeriğini belirtmelisiniz, örneğin Ana Sayfa. Bu örnekte, “Ana Sayfa” metni bağlantıya tıklanabilir bir metin olarak görünecektir. Resimler için ise etiketini kullanabilirsiniz ve etiketi ile birleştirerek bağlantılı bir resim oluşturabilirsiniz.
Ayrıca, bağlantılara hedefi belirtmek için
Bağlantılar sayfanızın kullanıcılar tarafından keşfedilmesi ve gezilmesi için önemlidir. Doğru ve tutarlı bağlantılar oluşturarak, ziyaretçilerinizi farklı sayfalara yönlendirebilir ve daha fazla ilgi çekebilirsiniz.
href
href
Hyperlinkler,
Bu bağlantı bir örnektir.
HTML’de href özelliği, hyperlinkleri oluşturmak için etiketiyle birlikte kullanılır. href özelliği, kullanıcının tıkladığında yönlendirileceği hedef sayfanın URL’sini belirtir. Bu URL, diğer bir web sitesine veya aynı web sitesindeki başka bir sayfaya yönlendirebilir.
Bir hyperlink oluşturmak için href özelliğine, bağlantının hedef konumunun URL’sini (href="URL") yazmanız gerekir. Link, metin veya resim gibi herhangi bir HTML öğesine uygulanabilir.
Örnek bir hyperlink
Buraya tıklayarak örnek bir websiteye gidebilirsiniz.
Bu örnekte, <a href="https://www.example.com">Buraya tıklayarak örnek bir websiteye gidebilirsiniz.</a> kullanarak bir hyperlink oluşturulmuştur. Kullanıcı bu bağlantıya tıkladığında, “https://www.example.com” adresine yönlendirilir.
Bir hyperlink oluştururken, hedef URL’yi doğru şekilde yazmak önemlidir. Yanlış bir URL kullanırsanız, bağlantı düzgün çalışmayacaktır. Ayrıca, hyperlinklerin kullanıcı dostu ve anlaşılabilir metinler içermesi tavsiye edilir.
özelliği ile hedef sayfanın URL’sini belirtirsiniz.
‘‘ etiketi sayesinde HTML sayfalarında hyperlinkler oluşturabiliriz. Bu etiketin ‘href’ özelliği, hyperlinkin nerede yönlendirileceğini belirtir. Bu özelliği kullanarak hedef sayfanın URL’sini belirleyebiliriz. Örneğin, bu link şeklinde bir hyperlink oluşturursak, kullanıcı bu linke tıkladığında ‘https://www.example.com’ adresine yönlendirilir.Ayrıca, ‘href’ özelliği sadece URL değil, aynı zamanda belirli bir konuma veya sayfaya da yönlendirebilir. Bir sayfanın içindeki belirli bir bölüme doğrudan bağlantı oluşturmak için ‘#’ karakterini kullanabiliriz. Örneğin, Bölüm 1 şeklinde bir hyperlink oluşturursak, kullanıcı bu linke tıkladığında sayfanın “section1” id’sine sahip olan belirli bölüme atlar.Ayrıca, ‘target’ özelliğini kullanarak hyperlinkin nasıl açılacağını da belirleyebiliriz. Örneğin, bu link şeklinde bir hyperlink oluşturursak, kullanıcı bu linke tıkladığında yeni bir tarayıcı sekmesinde ‘https://www.example.com’ adresi açılır.Kısacası, ‘‘ etiketi ve ‘href’ özelliği sayesinde HTML sayfalarında hyperlinkler oluşturabilir ve kullanıcıları belirli bir URL veya konuma yönlendirebiliriz.’
CSS ile HTML Biçimlendirme
CSS (Cascading Style Sheets), HTML sayfalarına stil ve biçim vermek için kullanılan bir stil yapısıdır. CSS, HTML elementlerini seçerek onlara belirli stil ve görünüm özellikleri uygulamak için kullanılır. Bu sayede web sayfaları daha estetik ve profesyonel bir görünüm kazanır.
CSS ile HTML sayfalarında birçok farklı biçimlendirme yapmak mümkündür. Örneğin, metinleri farklı fontlarla ve boyutlarla yazabilir, başlıkları belirli bir renkle ve büyüklükle vurgulayabilirsiniz. Ayrıca, arka plan resimleri veya renkleri ekleyerek sayfanın genel görünümünü değiştirebilirsiniz.
CSS kullanmanın bir avantajı, stil özelliklerini tekrar tekrar belirtmek yerine, tek bir stil dosyasında toplamaktır. Böylece, bir stil özelliğini değiştirmek istediğinizde tüm sayfalardaki etkisini kolayca değiştirebilirsiniz. Bu da sayfalar arasında tutarlı bir görünüm sağlar ve bakımı kolaylaştırır.
CSS, web sitenizin tasarımını daha esnek hale getirir. Aynı stil özelliklerini birden fazla HTML elementine uygulamak için kullanacağınız CSS sınıflarını oluşturabilirsiniz. Bu sayede, web sitesinin farklı bölümlerinde aynı stili kullanabilir ve tutarlı bir görünüm elde edebilirsiniz.
CSS Seçiciler ve Kurallar
CSS’de seçiciler, belirli HTML elementlerini seçmek için kullanılır ve bu elementlere uygulanacak stil kurallarını belirtir. Seçiciler, HTML elementlerini tanımlayan ve stil uygulanacak olan öğeleri belirleyen bir yapıya sahiptir.
Bir seçici örneği olarak, etiket seçici, belirli bir HTML etiketini seçmek için kullanılır. Örneğin, p etiketini seçmek için p yazılır. Bu seçici, tüm paragraf elementlerini seçmek için kullanılabilir ve bu elementlere özel stil kuralları uygulanabilir.
Bir diğer seçici türü ise class seçicidir. Class seçicisi, belirtilen class adına sahip HTML elementlerini seçmek için kullanılır. Örneğin, .div-class şeklinde bir class seçici tanımlandığında, div elementi içerisinde class adı “div-class” olan elementler seçilir.
Bunun yanında id seçici de kullanılabilir. Id seçicisi, belirtilen id değerine sahip HTML elementlerini seçmek için kullanılır. Örneğin, #div-id şeklinde bir id seçici tanımlandığında, belirtilen “div-id” id’sine sahip olan elementler seçilir.
Seçicilerin yanı sıra, CSS’de iç içe seçiciler ve seçicilerin kombinasyonları da kullanılabilir. Bu sayede daha spesifik seçiciler oluşturmak mümkündür.
Bu şekilde seçiciler kullanarak, HTML elementlerine belirli stiller uygulamak ve web sitelerini istenilen şekilde biçimlendirmek mümkündür.
Renkler ve Fontlar
Renkler ve fontlar, HTML sayfalarına stil ve görsellik kazandırmak için kullanılan önemli öğelerdir. CSS kullanarak bu stil özelliklerini HTML sayfalarında kolayca ayarlayabilirsiniz. CSS, Cascading Style Sheets’in kısaltmasıdır ve HTML ile birlikte kullanılarak web sayfalarının görünümünü belirlemek için kullanılır.
Etkileyici ve çekici bir web tasarımı için renklerin doğru şekilde kullanılması oldukça önemlidir. CSS ile farklı renklerin seçimini yapabilir, arka plan renklerini ve metin renklerini belirleyebilirsiniz. Örneğin, kırmızı renk ile dikkat çekici başlıklar oluşturabilir veya mavi renk ile sakin bir atmosfer sağlayabilirsiniz.
Ayrıca CSS ile fontları da belirleyebilirsiniz. Web sayfalarında farklı font stilleri kullanarak tasarıma çeşitlilik katabilirsiniz. Örneğin, Arial gibi popüler bir font kullanabilir veya Verdana gibi daha modern bir font tercih edebilirsiniz.
Bunun yanı sıra CSS’in sunduğu diğer stil özelliklerini de kullanarak web sayfalarınızı daha ilgi çekici hale getirebilirsiniz. Özelleştirilmiş tablolar, düzenli listeler ve vurgulamalar gibi CSS özelliklerini kullanarak içeriklerinizi görsel olarak zenginleştirebilirsiniz. Sonuç olarak, renkler ve fontlar gibi stil özelliklerini kullanmak, HTML sayfalarınızı daha profesyonel ve kullanıcı dostu hale getirmenin önemli bir yoludur.
HTML Nedir?
HTML (HyperText Markup Language), web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan bir işaretleme dilidir. Basit bir deyişle, HTML web sayfalarını oluşturmak için kullanılan bir dildir. HTML sayesinde metinler, resimler, videolar ve diğer medya öğeleri web arayüzünde görüntülenebilir hale gelir. HTML kodları web tarayıcıları tarafından yorumlanır ve kullanıcılara web sayfalarını gösterir.
HTML sayesinde farklı özellikler ekleyebilirsiniz. Metin biçimlendirme için kalın, italik, altı çizili veya üstü çizili gibi stiller kullanabilirsiniz. Resimler ve hyperlinkler eklemek için ilgili etiketleri kullanabilirsiniz. Ayrıca, CSS ile birlikte kullanılarak HTML sayfalarına stil ve biçim vermek mümkündür. HTML’nin yapısı basit ve kolay öğrenilebilir olduğu için web geliştirme sürecinde önemli bir role sahiptir.
