Top

Bölüm 9 (HTML Dersleri), Konu CSS

Bölüm 9 (HTML Dersleri), Konu CSS

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.


HTML Stilleri-CSS

CSS(Cascading Style Sheets yani yığma stil dosyaları) HTML elemanlarını şekillendirir.

Bu sayfadaki örneğe bakabilirsiniz. Look! Styles and Colors yazan yerde Bak! Şekillendirmeler ve renkler, This text is in Verdana and res yazan yer Bu yazı Verdana ve kırmızı, This Text is in Times and green yazan yer Bu yazı times ve yeşil, This text is 30 pixels high yazan yer ise bu yazı 30 piksel büyüklükte olarak Türkçe’ye çevirebiliriz.

Daha önce de belirttiğim gibi bunlar in line yani satır içi kullanımdır ve HTML5’te artık yeri yoktur. Daha doğrusu kimi yerlerde kullanabilirsiniz ama heryerde kullanmamanız gerekmektedir.

CSS ile HTML Biçimlendirme

CSS html 4 ile beraber tanıtıldı, html elementleri stillerinin daha iyi yolunu desteklediğini göstererek.

Css;

  • Ayrı bir stil dosyası olarak(Css dosyası)
  • HTML head bölgesinde style elementi ile
  • Tekil HTML elemanlarında yani satırda style özellikleri ile

HTML’de kullanılabilir.

HTML Style özelliğini kullanmak

Vakit kaybettiren ve pratik bir yol olmayan HTML Elementinde style kullanıma style özelliği ile mümkün olur.

HTML’ye CSS eklemede tercih edilen yol Css söz dizimine sahip ayrı bir dosya kullanmaktır.

Bununla beraber bu html eğitiminde style özelliğinin Css’te kullanımını da göstereceğiz. Basit örneklerle halledilebilir.

Css’e dair geniş bilgiyi ve eğitimi HTML ve HTML5 içerikli derslerden sonra görebileceksiniz.

Aşağıdaki örneklere tıklayarak sizler de deneyebilirsiniz; kaynak w3schools.com…;

HTML Stil örneği- Arkaplan rengi

HTML Stil örneği- Font, Renk ve Boy

HTML Stil örneği- text hizalama

Kullanımdan düşen/kaldırılan etiketler ve Özellikler

HTML 4’teki, birkaç etiket ve özellik kaldırıldı ve ilerideki sürümlerde yani HTML5’te artık kullanımda değiller.

Yani bunları kullanmaktan uzak duracaksınız;

Etiketler Tanım
<center> İçeriği merkeze alırdı ama artık yok
<font> and <basefont> HTML fontlarını tanımlardı ama artık yok
<s> and <strike> Üstüçizili texti tanımlardı ama artık yok
<u> altıçizili texti tanımlardı ama artık yok
Özellik Tanım
align TExtin yaslanması kontrol edilirdi ama artık yok
bgcolor Arkaplan rengi tanımlardı ama artık yok
color Yazı rengi tnaımlardı ama artık yok

 

Bunların yerine style kullanılacak yani artık.


Uygulamaları yapmayı unutmayınız.

 

 

 

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan Bölüm 8 (HTML Dersleri) başlıklı makalemizde font, html ve klasor hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious