HTML’nin Temel Özellikleri ve Kullanımı
İnternet üzerinden web sayfası oluşturmak için kullanılan betik dilinin temel bilgileri ve konuları bu makalede tartışılacaktır. Web sayfalarının yapısal ve içeriksel olarak nasıl oluşturulduğunu sağlayan bir betik dil olan HTML, bu süreçte temel bir rol oynamaktadır. HTML’nin temel özellikleri ve kullanımı, web sayfalarının nasıl oluşturulduğunu anlamak için önemlidir.
CSS ise web sayfalarının görünümünü düzenleyen bir betik dilidir. CSS‘nin temel özellikleri, seçiciler ve stil kuralları hakkında bilgi sahibi olmak, web sayfalarının görsel olarak çekici ve düzenli görünmesini sağlar. Bu makalede CSS’nin nasıl kullanıldığı ve farklı seçici türleri hakkında ayrıntılı bilgiler bulunmaktadır.
JavaScript ise web sayfalarına etkileşimli özellikler eklemek için kullanılan bir betik dilidir. JavaScript’in temel özellikleri ve kullanımı, web sayfalarının daha dinamik ve kullanıcı dostu olmasını sağlar. Bu makalede JavaScript’in nasıl kullanıldığı, olaylar ve fonksiyonlar gibi temel konular ele alınmaktadır.
HTML
HTML, web sayfalarının yapısal ve içeriksel olarak nasıl oluşturulduğunu sağlayan bir betik dilidir. HTML, “HyperText Markup Language” kelimelerinin kısaltmasıdır ve web sayfalarını oluşturmak için kullanılan temel bir yapıdır.
HTML, web tarayıcıları tarafından anlaşılabilen bir dil olduğu için web sayfalarının doğru şekilde görüntülenmesini sağlar. HTML, birçok farklı etiket ve özellik içerir ve bu etiketler sayesinde bir web sayfasının yapısı ve içeriği belirlenir.
HTML etiketleri, açılış ve kapanış etiketi olarak iki parçadan oluşur. Açılış etiketi, etiketin ne olduğunu belirtirken, kapanış etiketi ise etiketin sonlandığını gösterir. Örneğin, etiket bir açılış etiketi iken, etiket bir kapanış etiketidir.
HTML’nin temel özellikleri arasında başlıklar, paragraflar, resimler, bağlantılar, listeler ve tablolar bulunur. Bu özellikler sayesinde web sayfaları düzenli bir şekilde oluşturulabilir ve kullanıcılar tarafından kolayca okunabilir hale getirilebilir.
HTML etiketleri, farklı özellikler eklemek için de kullanılabilir. Örneğin, bir metni kalın veya italik olarak vurgulamak için etiket veya etiket kullanılabilir.
HTML’nin kullanımı oldukça kolaydır ve herkesin öğrenebileceği bir dil olarak kabul edilir. İnternet üzerinde birçok kaynak ve öğretici bulunmaktadır, bu sayede HTML öğrenmek ve web sayfaları oluşturmak oldukça kolaydır.
Bu bölümde HTML’nin temel özellikleri ve kullanımı hakkında daha detaylı bilgiler verilecektir. HTML etiketlerinin nasıl kullanılacağı, başlıkların nasıl oluşturulacağı, paragrafların nasıl yazılacağı ve diğer özellikler hakkında bilgi sahibi olacaksınız.
CSS
CSS, web sayfalarının görünümünü düzenleyen bir betik dilidir. Web sayfalarını renklendirmek, düzenlemek ve stil vermek için kullanılır. CSS, HTML’in yapısını değiştirmeden sayfaların görünümünü değiştirmek için kullanılır. Bu sayede web tasarımcıları, web sayfalarını daha çekici ve kullanıcı dostu hale getirebilir.
CSS’nin temel özellikleri arasında seçiciler ve stil kuralları bulunur. Seçiciler, belirli HTML öğelerini hedeflemek ve stil uygulamak için kullanılır. Örneğin, bir başlık etiketine stil uygulamak için başlık seçicisini kullanabilirsiniz. Bu sayede başlıkların boyutunu, rengini ve stili belirleyebilirsiniz.
Stil kuralları ise belirli bir HTML öğesine uygulanacak olan stil özelliklerini belirler. Örneğin, bir paragrafın metin rengini veya arka plan rengini belirlemek için stil kurallarını kullanabilirsiniz. CSS ile birlikte birçok stil özelliği kullanılabilir, bu da web tasarımcılarına daha fazla yaratıcılık ve özgürlük sağlar.
CSS ayrıca web sayfalarında düzenlemeler yapmak için de kullanılır. Örneğin, bir sayfanın genişliğini veya yüksekliğini belirlemek veya öğeleri yan yana veya alt alta yerleştirmek için CSS kullanabilirsiniz. Bu sayede web sayfalarını daha düzenli ve estetik hale getirebilirsiniz.
Genel olarak, CSS web tasarımının temel bir parçasıdır ve web sayfalarının görünümünü geliştirmek için kullanılır. CSS’nin temel özelliklerini ve kullanımını öğrenmek, web tasarım becerilerinizi geliştirmenize yardımcı olacaktır.
Seçiciler
CSS’de kullanılan seçiciler, belirli HTML öğelerini hedeflemek ve stil uygulamak için kullanılır. Seçiciler, web sayfalarında belirli öğeleri seçmek ve onlara özel stiller uygulamak için kullanılan önemli bir araçtır. CSS’de farklı seçici türleri bulunur ve her biri farklı bir amaç için kullanılır.
Bir seçici, stilin uygulanacağı HTML öğelerini belirlemek için kullanılır. En yaygın kullanılan seçici türleri ID seçicileri ve sınıf seçicileridir.
ID Seçicileri: Bir HTML öğesini benzersiz bir şekilde belirlemek için kullanılır. ID seçicileri, HTML öğelerine verilen “id” özelliğiyle ilişkilendirilir. Örneğin, bir sayfada yalnızca bir kez kullanılan bir öğeyi hedeflemek için ID seçicileri kullanılabilir. ID seçicileri “#” sembolüyle başlar ve öğenin ID’siyle birlikte kullanılır.
Sınıf Seçicileri: Belirli bir HTML öğesine stil uygulamak için kullanılır. Sınıf seçicileri, HTML öğelerine verilen “class” özelliğiyle ilişkilendirilir. Örneğin, bir sayfada birden fazla kez kullanılan benzer öğeleri hedeflemek için sınıf seçicileri kullanılabilir. Sınıf seçicileri “.” sembolüyle başlar ve öğenin sınıf adıyla birlikte kullanılır.
Seçiciler, CSS’de stil kurallarıyla birlikte kullanılır. Stil kuralları, belirli bir HTML öğesine uygulanacak olan stil özelliklerini belirler. Seçicileri doğru bir şekilde kullanarak, web sayfalarınızı istediğiniz gibi özelleştirebilir ve görsel olarak çekici hale getirebilirsiniz.
ID Seçicileri
ID seçicileri, belirli bir HTML öğesini benzersiz bir şekilde belirlemek için kullanılır. Her HTML öğesine bir ID atayarak, bu öğeye CSS veya JavaScript ile stil veya işlevsellik eklemek mümkündür. Bir ID seçici, “#” işaretiyle başlar ve ardından öğenin ID’si yazılır. Örneğin, bir metin kutusuna stil uygulamak için “input” etiketine “id” özelliği ekleyebilir ve CSS’de “#input” seçicisini kullanabilirsiniz.
ID seçicileri, HTML sayfanızda yalnızca bir kez kullanılabilir. Bu nedenle, her öğeye benzersiz bir ID atamak önemlidir. ID seçicileri ayrıca JavaScript’te de kullanılabilir. Bir öğeye ID atadıktan sonra, JavaScript kodunda bu ID’yi kullanarak öğeye erişebilir ve işlevler ekleyebilirsiniz. Örneğin, bir butona tıklandığında bir işlevi tetiklemek için bu butona bir ID atayabilir ve JavaScript’te bu ID’yi kullanarak işlevi çağırabilirsiniz.
ID seçicileri, web sayfalarında belirli öğeleri hedeflemek ve bunlara stil veya işlevsellik eklemek için önemli bir araçtır. Doğru bir şekilde kullanıldığında, web sayfanızı daha etkileyici ve kullanıcı dostu hale getirebilirsiniz. Örneğin, bir başlık etiketine ID atayarak, bu başlığın stilini değiştirebilir veya bir tıklama olayını tetikleyebilirsiniz. ID seçicilerinin kullanımıyla ilgili daha fazla bilgi için aşağıdaki örnekleri inceleyebilirsiniz.
Sınıf Seçicileri
Sınıf seçicileri, belirli bir HTML öğesine stil uygulamak için kullanılır. Sınıf seçicileri, HTML etiketlerine eklenen “class” özelliği ile tanımlanır. Bu sayede, aynı sınıfa sahip birden fazla HTML öğesine aynı stil uygulanabilir.
Sınıf seçicileri kullanırken, CSS dosyasında “.” (nokta) işareti ile sınıf adı belirtilir. Örneğin, .yazi sınıfını kullanarak belirli bir HTML öğesine stil uygulamak isterseniz, CSS dosyasında şu şekilde bir stil kuralları bloğu oluşturabilirsiniz:
.yazi { color: red; font-size: 16px; font-weight: bold;}
Yukarıdaki örnekte, “.yazi” sınıfına sahip olan tüm HTML öğelerine, kırmızı renkte, 16 piksel font boyutunda ve kalın yazı tipinde stil uygulanacaktır.
Bir HTML öğesine birden fazla sınıf tanımlayabilirsiniz. Örneğin, class"yazi baslik" şeklinde bir sınıf tanımlaması yaparsanız, hem “yazi” sınıfının hem de “baslik” sınıfının stil kuralları bu HTML öğesine uygulanır.
Sınıf seçicileri, web sayfalarında farklı öğeleri farklı şekillerde stilize etmek için kullanışlıdır. Örneğin, bir sayfada başlıkları farklı renklerde ve boyutlarda göstermek isterseniz, her başlık etiketine farklı bir sınıf adı atayabilir ve bu sınıfları CSS dosyasında farklı stil kurallarıyla tanımlayabilirsiniz.
Genel olarak, sınıf seçicileri, web sayfalarının görünümünü daha esnek ve özelleştirilebilir hale getiren güçlü bir araçtır. Sayfalarınızda farklı öğeleri farklı şekillerde vurgulamak veya stilize etmek için sınıf seçicilerini aktif bir şekilde kullanabilirsiniz.
Stil Kuralları
CSS’de stil kuralları, belirli bir HTML öğesine uygulanacak olan stil özelliklerini belirler. Bu bölümde stil kurallarının nasıl yazılacağı ve örnekler verilecektir.
Stil kuralları, CSS’de belirli bir HTML öğesine uygulanacak olan stil özelliklerini belirlemek için kullanılır. Bir stil kuralı, bir seçici ve stil özelliklerinden oluşur. Seçici, hangi HTML öğesine stil uygulanacağını belirtirken, stil özellikleri ise uygulanacak olan stilin nasıl olacağını belirler.
Stil kuralları, CSS dosyasında veya HTML sayfasının içinde