Bilgi/Açıklama

HTML & CSS Kursu

HTML ve CSS Üzerine

HTML

HTML dili, örün üzerinden içerik tanımlamak için kullanılır. Buna göre bir istemci (client) uygulaması HTTP adı verilen iletişim kuralı (protocol) ile sunucu (server) bilgisayarına bağlanır; oradaki içeriği alır ve kullanıcının anlayabileceği biçimde gösterir. İnsanlara hizmet veren istemci uygulamasına gözatıcı (browser) adı verilir. HTML belgeleriyle HTTP iletişim kuralı ile oluşturulan birimlere yerlik (site) adı verilir.
Buna göre bir yerlik bir çok HTML belgesinden oluşur. HTTP her ne denli başlangıçta yalnızca HTML ve ona yardımcı bileşenleri sunmak için yapıldıysa da örün sunumu (web service) adı verilen yöntemle gözatıcı dışında kullanımı da bulunmaktadır. Bu nedenle HTML, HTTP iletişim kuralı ile iletilen içerik türü (content type) seçeneklerinden birisidir.

CSS Üzerine

CSS dili, HTML belgelerinin biçem (style) özelliklerini tanımlamak için kullanılır. Buna göre renk, biçim ve uzunluk gibi değerler bir kez tanımlanır ve HTML belgesinin bir çok yerinde birden çok kez kullanılır. Aynı CSS tanımlamalarını birden çok HTML belgesi için, dahası tüm bir yerlik (site) için tanımlamak da olanaklıdır.

HTML5 ve CSS3

HTML ve CSS dilleri zaman içinde oldukça gelişmiş özellikler edinmişlerdir. Bunların en son sürümlerindeki değişiklikler o denli kökten olmuştur ki ayrı bir adla anılmaya başlanmıştır. Buna göre HTML5, HTML dilinin ötesinde; CSS3 de CSS dilinin bir dil olarak adlandırılmaktadır. Öte yandan HTML5 ve CSS3 dilleri, HTML ve CSS dillerindeki neredeyse tüm özelliklerini, kimi durumlarda bir kaç küçük düzeltme ile kapsarlar. Bu nedenle HTML5 ve CSS3 anlatan belgeler HTML ve CSS dillerinin bilindiğini varsayarak üzerine eklenen gelişmeleri anlatırlar.

HTML5

HTML5 ile gelen özelliklerden en önemlileri aşağıda yer almaktadır
- Anlambilim (Semantics) : Daha önce HTML dili, içinde bulundurduğu içeriğin anlamına ilişkin bir öğe içermezdi. HTML5 ile içerikte başlık (header), ayaklık (footer), gezinme (navigation) ve tanımlık (article) adında, içeriği tanımlayan öğeler bulunmaktadır. Bu biçimde arama motoru gibi, belgeleri işleyen uygulamaların içeriğin hangi kesiminde ne tür bir bilgi bulunduğunu anlaması olanaklı duruma gelmiştir.
- Biçim Öğeleri (Form Elements) : HTML5 dilinde biçim (form) içinde kullanılan öğelerde gelişmiş özellikler bulunmaktadır. Örneğin veri türü (data type) için destek gelmiştir. Buna göre girdileri sayı, günay / tarih (date), eposta gibi türlerini belirlenebilmekte, bunların geçerleme (validation) işlemleri gözatıcı yakasında yapılabilmektedir. Bunun dışında kendinden tümleme (autocompletion) özelliklere destek gelmiştir. Buna göre kullanıcı bir kaç özyapı (character) girince buna uygun seçilebilecek bir veri dizelgesi (data list) görünür.
- Çizgeleme (Graphics) : HTML5 üzerinde diri (live) olarak çizim yapmak olanaklı duruma gelmiştir. Bunun için tuval (canvas) desteği eklenmiştir. Buna göre geliştirici JavaScript kullanarak belgede çizim yapabilir. Buna bir almaşık olarak da SVG adı verilen, XML ile yöneyli (vectoral) çizgeleme üretilmesini sağlayan bir destek de var olan özelliklere eklenmiştir.
- Görüntü (Video) ve İşiti (Audio) : Daha önce JavaScript diliyle bir çok ek betiklik kullanılarak yapılan görüntü ve işiti oynatma işlemleri HTML5 ile tek bir öğe ile ölçün bir biçimde yapılabilmektedir.
- Aygıtla Etkileşim : HTML5 ile yerel saklatım (local storage) gözacıda veri saklamak olanaklıdır. Bunun dışında HTML belgesinin çalıştığı aygıtını konum (location) durumu edinilebilmektedir.

CSS3

CSS3 ile gelen en önemli özellikler aşağıdaki gibidir:
- Gölge (Shadows), Yuvarlak Bucak (Rounded Corner), Artalan İmgesi (Backround Image): Daha önce CSS ile yapılması olanaklı olmayan ya da çok güç olan işlemler için destek gelmiştir. Öğeler gölge (shadow) vermek köşeleri yumuşak yapmak için yuvarlak bucak (rounded corner), herhangi bir öğeye artalan imgesi (background image) atamak bunlar arasında sayılabilir.
- İlerlemiş Seçiciler (Improved Selectors) : CSS biçemlerinin hangi HTML öğelerine uygulanacağını belirleyen seçici (selector) yapısı kökten bir biçimde değişmiştir. Artık bir öğe (atrribute), nitelik (attribute) özelliklerine göre seçilebilmektedir.
- Dönüşüm (Transform), Geçişim (Transition) ve Diriltme (Animation): Bir öğenin konumunu değiştirmek için dönüşüm (transformation), bir renkten ötekine geçildiği bir görünüm sağlamak için geçişişm (transition) ve öğeleri oynatmak için diriltme (animation) özellikleri gelmiştir.
- Ortam Sorgusu (Media Query) : Belgenin küçük-büyük, dar-geniş bir çok ekranda düzgün görünmesini sağlayan, yanıtlı tasarım (responsive design) özelliğini sağlayan ortam sorgusu (media query) adında bir destek CSS3 diline gelmiştir.

CSS Çatıları ve Dilleri

CSS3 diliyle bir çok gelişmiş özellik gelse de bir çok geliştirici için yeterli bulunmamaktadır. Çoğu kez, gelişmiş özellikleri kullanmak çok karmaşık olabilmektedir. Bir başka sorun da CSS dilinde izlendirme dillerinde olan değişken (variable), işlev (function), koşul (condition) ya da döngü (loop) türü yapıların olmamasıdır. Bu gibi nedenlerde bir çok dil (language) ve çatı (framework) geliştirilmiştir.

Bootstrap ve Yanıtlı Tasarım (Responsive Design)

CSS3 ile gelen gelişmiş özelliklerden birisi de yanıtlı tasarım (responsive design) konusudur. Buna göre aynı HTML içeriği hem büyük ekranlı bilgisayarlar hem de küçük ekranlı telefonlar için çalışabilmektedir. Tek bir tasarım değişik boyutlarda aynı olmasa da düzgün gözükmektedir. Ancak CSS3 ölçünündeki özelliklerin kullanımı çok çetin olabilmektedir. Bunu kolaylaştırmak, yanıtlı tasarımı kolay kılabilmek için Bootstrap gibi çatılar ortaya çıkmıştır. Bunlar CSS3 yanında JavaScript de kullanarak geliştiricinin bir kaç bilgi vererek yanıtlı tasarımı gerçekleştirmelerini sağlar.

SASS & LESS

CSS, bildirimli (declarative) bir dildir. Yazılım geliştirme dillerinde olan değişken (variable), işlev (function), koşul (condition) ya da döngü (loop) türü yapılarını içermez. Bu nedenle, elle geliştirme yapmak oldukça güç olabilmektedir. SASS ve LESS gibi diller ise, geliştiricinin gelişmiş yapıları kullanarak biçemleri belirlemesini sağlar. Ancak SASS ve LESS dillerinde yazılmış düzgü (code) parçaların istemci (client) yakasındaki gözatıcı (browser) uygulaması tanımaz. Bu nedenle sunucuda CSS diline (örneği CSS3 sürümüne) çevrilmesi gerekir. Buna derleme (compiler) adı verilse daha çok öteleme (translator) adı da verilir.
Detaylı bilgi için: Tıklayınız
tekzaf tarafından 15.10.2018 tarihinde eklenmiş/güncellenmiştir.

Bu Sayfayı Paylaş:

Fibiler Üyelerinin Yorumları


Tüm üyeler içeriklere yorum ekleyerek katkıda bulunabilir : Yorum Gir

Misafir Yorumları




Bu Sayfayı Paylaş:

İletişim/Bize Yazın   mh@fibiler.com   Google+   Facebook   Twitter   fibiler@googlegroups.com
Her Hakkı Saklıdır
Bu sitede yayınlanan tüm bilgi ve fikirlerin kullanımından fibiler.com sorumlu değildir.
Bu sitede üretilmiş , derlenmiş içerikleri, fibiler.com'u kaynak göstermek koşuluyla kendi sitenizde kullanılabilirsiniz. Ancak telif hakkı olan içeriklerin hakları sahiplerine aittir