DocType (Document Type - Belge Tipi) Nedir ?
DocType; sayfada kullanılan standartı browsera (tarayıcı) bildirmek için kullanılan bir yöntemdir.
Neden DocType Kullanılmalı ?
HTML`in ilk zamanlarında her tarayıcı sayfayı farklı yorumlamaktaydı. (Eskisi kadar olmasa da hâlen durum değişmiş değil)
Bu sorundan dolayı standartlara uyum için DocType yöntemi geliştirildi.
Artık tarayıcılar kullandığınız belge tipine göre sayfayı standart kipde (standards mode) kurallara uygun şekilde farklı yorumlanmaktadır.
Hiçbir belge tipi kullanmadığında ise sayfa eski usul garip kipde (Quirks mode) yorumlanmaktadır.
Tarayıcı tarafından garip kipde yorumlanan sayfalar her tarayıcının yorumuna göre farklı çıkmaktadır. Bu da tasarımcıların her tarayıcıda aynı görünen sayfalar hazırlamasını son derece zorlaştırmaktadır.
2-)
| <html> | HTML'ye başlamak. |
| <head> | Dosya bilgilerini açıklama bölümü. |
| <link> | Dosyaya bağlantı verme. |
| <div> | Dosyada alan belirtme. |
| <span> | Bir alan tanımlaması. |
| <h1> to <h6> | Başlık (1-6 arası) |
| <ul> | Madde işaretli liste. |
| <li> | Listeleme. |
| <a> | Bağlantı vermek. |
| <strong> | Vurgu yapmak. |
| <label> | Etiket belirleme. |
| <form> | Form kullanma. |
| <input> | Form nesnesi eklemek. |
| <textarea> | Metin kutusu. |
| <b> | Kalın yazmak. |
| <p> | Paragraf. |
CSS (Cascading Style Sheets)
Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlar
Css Özellikleri:
- Html sayfasındaki nesnelerin görüntüsünü belirler
- Html 4.0 sürümü ile stil dosyaları geliştirilmiştir
- CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar
- Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir
HTML ilk üretildiğinde yazı rengi ve boyu gibi özellikleri tag´lar ile tanımlayacağı düşünülmedi. ilk Html sürümünde aşağıdaki gibi temel taglar kullanıldı.
<h1>Başlık yazısı</h1>
<p>Paragraf yazısı</p>
Daha sonra html 3.2 sürümüyle <font> gibi taglar sunulduğundarenk ve yazı boyu gibi alt özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı için sıkıntılı olmaya başladı. çünkü sonradan doğru tagı bulmak ve değiştirmek zorlaşıyordu.
Bu sorunu çözmek için Dünya internet topluluğu (W3C) html 4.0 sürümü ile CSS yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek istediğinde tek yapması gereken CSS dosyasını açmaktı. böylece web sayfasında bir anda birçok sayfa değişmiş oluyordu.
4-)
Background web sitemizin her alanında kullandığımız ve kullanabileceğimiz bir kod aklınıza gelen hemen hemen her html kodunda kullanabiliriz ve istediğimiz şekilde konumlandırabiliriz bunları örneklerle görelim
background-color:background-color: kodmuzla elemetlere zemin rengi veririz Kullanabileceğimiz renk kodları ise alttaki şekildedir hex-decimal kodu ile renk verme
#etiket {background-color: #FF0000;}
renk ismi ile renk verme
#etiket {background-color: red;}
RGB ile renk verme
#etiket {background-color: rgb(255,0,0);}
Örnek:
Zemin Rengimiz Kırmızı Olsun
Eğer renk vermek istemiyor ve tarayıcıların otomatik renk atamasını istemiyorsak alttaki kodu kullanabiliriz
#etiket {background-color: transparent;}
background-image:background-image kodumuzla elemetlere zemin resmi veririz Kodlarımız örneklerle görelim elementlere Zemin Resmi verme
#etiket {background-image: url(klasör/resim.png);}
Gördüğünüz Gibi resim verirken URL ile başlıyoruz ve resim yolunu parantez içinde belirtiyoruz parantezler içerisinde çift tırnak ve tek tırnak kullanabilirz örnek
#etiket {background-image: url("klasör/resim.png");}
#etiket {background-image: url('klasör/resim.png');}
İp Ucu Eğer RESİM Klasörümüz ile CSS Klasörümüz ayrı ise resimlerimizi parantezden sonra ../ şeklinde resim yolunu vermeliyiz örnek:
#etiket {background-image: url(../klasör/resim.png);}
background-attachment:background-attachment kodumuz sabitleme kodumuzdur diyelimki bir elemente arka plan resmi verdik ama bu resim sabit kalmasını istiyoruz peki bunu nasıl yapabiliriz bakalım arka palan resmimizi sabitleme
#etiket: {background-attachment: fixed;}
Not: Genellikle sayfamızın genel zemin resmi için kullanılır (body) Birde scroll verebiliriz bu kodumuzda ise serbest bırak diye biliriz kısacası biz arka plan resmimizi sabitlemedikce Tarayıcımız scroll olarak alıgılayacaktır background-position:background-position kodumuz adı size cağrışım yapmıştır konumlandırma pozisyon kodumuzdur örnekle devam edelim
#etiket: {background-position: top left;}
Burada Konumlandırma etki yönlerinden bahsetmiştim yön yine aynı yanlız burada farklı bir durum var önce bunu anlatalım öğrenelim şimdi yukarıdaki kodda background-position: top left; top left yaptık yani ÜST ve SOL peki neye göre ? background-position: ↕ ↔ ; yukarıdaki gibi ilk kodumuz top ÜST ve ALT kısım 2. left İse SOL ve SAĞ kısım için yazıyoruz peki neler yazabiliriz bunlara bakalım top left > üste ve sola top center > üste ve ortala top right > üste ve sağa center left > ortala ve sola center center > ortala ve ortala center right > ortala ve sağa bottom left > alta ve sola bottom center > alta ve ortala bottom right > alta ve sağa Bunların dışında rakamla konumlandırma yapabiliriz örneğin background-position: 50% 50%; fakat burada durum tam tersine işliyor background-position: ↔ ↕ ilk verdiğimiz değer sağa ve sola ikinci verdiğimiz değer üste ve alta oluyor tabi sadece % yüzde kullanmak zorunda değiliz pixel ve diğer birimleride kullanabiliriz bir örnek yapalım bununlailgili background-repeat:background-repeat kodumuz ise arka plan resmimizin tekrar edip etmeyeceğini belirleriz soldan sağa doğru veya sağdan sola doğru tekrar ettirebiliriz veya üstten alta doğru tam tersi alttan üste doğruda tekrar edebilir kodlarımız ise şu şekilde alttaki kodda zemin resmimizin sürekli olarak tekrar etmesini istedik yön belitmeden
#etiket {background-repeat: repeat}
|
overflow: Bu özellikle birlikte sınırlarını belirlediğimiz bir kutu elemanının içeriğinin sınırlar dışına taşması durumunda nasıl görüneceğini belirlememizi sağlar.
Aldığı değerler : visible | hidden | scroll | auto | inherit
Aldığı değerler : visible | hidden | scroll | auto | inherit
- visible: sınırlar dışına taşan alanı gösterir.
- hidden: kutu dışına taşan alanları gizler.
- scroll: kutu dışına taşan alanlar için kaydırma çubuğu gösterir.
- auto: scroll ile aynı özelliği taşır.
- inherit: Daha önce de gördüğümüz gibi bir üst elemanın değerini alır..
- Kenarlık(border), içerik alanı ve padding etrafındaki bir veya daha fazla çizgiye denir.
- CSS ile sayfa planlamak için kullanılan yöntemlerden bir tanesidir float ve clear özelliklerinin kullanımı. Float bir elementi Normal Akışın dışına çıkarmak için kullanılan bir yöntemdir. Bir biri ardına sıralanmış elementlere float uygulandığında elementler eğer yeterli alan varsa yan yana dizilirler. Float Dinamik Göreceli Konumlandırma gibidir ve bu amaçla kullanılabilir.Clear özelliği ile float uygulanmış element'den sonraki elementlere float etkisini durdurmamız mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elementin yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda bu element float uygulanmış elementin altında konumlanacaktır.
float
Yapısı : float: <deger>
Aldığı Değerler :left | right | none | inherit
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: YokTarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android BrowserFloat ilk olarak resimleri konumlandırmak için kullanılmıştır. Resimlerin metinlere göre konumunu belirlemek için HTML 1.0 ile birlikte align özelliği kullanıldı. Böylelikle resimler metinlere göre sola veya sağa konumlandırması imkanı sağlanmış oldu. Bu kullanım float ile benzerdir. Resimleri konumlandırmak için kullanılan bu yöntem daha sonra CSS'in olaya el atması ile tüm elementler için kullanıla geldi. Ayrıca float özelliği çoklu kolon oluşturmak için de kullanılır.img { float:left; margin:0 4px 4px 0; }float:left ataması yapılan resim sola dayanacak ve metin bu resmin etrafını saracaktır.<img src="resim.gif" width="150" height=150 alt="resim bilgisi" /> <p>... paragraf metni ... </p>Bir elemente float uygulandığında, float uygulanan kutu kapsayıcı kutunun veya diğer float kutusunun dış kenarının sağına veya soluna kaydırılabilir. Float uygulanan kutu, dökümanın normal akışının dışına çıkacaktır. Dökümandaki normal kutular float elementi burda yokmuş gibi normal akışına devam edeceklerdir.Aşağıdaki şekilde görüldüğü gibi başlangıçta normal akış içinde bulunan 1.kutu float:rightözelliğ ile sağ tarafa kaymış ve normal akıştaki elementlerin akışı 1.kutu yokmuş gibi devam etmiştir.
Aşağıdaki şekilde float:left tanımlaması yapılarak 1.kutu kapsayıcı kutunun en soluna dayanmıştır. Diğer iki kutu ise normal akışına devam etmektedir.p { float:left; width:200px; margin:0; } img { float:left; margin:0 4px 4px 0; }Burada her iki elemente de float uygulanarak metnin resmi sarmasına son verilmiştir. Bu çoklu kolon oluşturma tekniğinin basit bir örneğidir. Float uygulanan her element satır boyunca yan yana dizilecektir.
Eğer kapsayıcı kutu genişliği her üçünün sığacağı kadar değil ise sondaki kutu kendiliğinden aşağı kayacaktır. Eğer kutular farklı yükseklikte ise yükseliği düşük olan kutudan sonra gelen kutu bunun altında devam edecektir. Bu durumu düzeltmek için clear özelliği kullanılır bunu aşığda göreceğiz.
Margin özelliği elementin etrafındaki boşluk olarak tanımlanır. Negatifdeğer alabilir. Tek tek özellikler(margin-top,margin-left vd.) atanabildiğigibi tek bir özellikle(margin) de tanımlama yapılabilir. Margin özelliklerinianlamak için lütfen Box modellerine bir göz atın.
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
- width: bu özellikle seçili elementin genişlik değeri düzenlenir.
- Aldığı değerler: uzunluk | auto | yüzde | inheritÖrnek bir kullanım123
div#container{width:100%;}height: bu özellikle seçili elementin yükseklik değeri düzenlenir.
Aldığı değerler: uzunluk | auto | yüzde | inheritÖrnek bir kullanım123div#container{height:600px;}
Display css de çok amaçlı kullanılan bir koddur haliyle tasarım yaparkende çok işimize yarar genel olarak bilinen inline,block ve none vardır ama display sadece bunlardan ibaret değildir fakat diğer özelliklerinin bir çoğu malesef tarayıcılar tarafından desteklenmemektedir bu yüzden bize gereken özellikle kalın harf yazdığım kodlardır ama diğerlerinede göz atalım
img {display: none}
yukarıdaki kodumuz herhan gibi bir nesneyi görünmez yapar yani gizler
span {display: block}
üstteki kodumuz bir nesneyi blok haline getiri nesnelerin satır atlamasını sağlar
p {display: inline}
üstteki kodumuz satır atlamadan yan yana sıralama yapar
li {display: list-item}
üstteki kodumuz bir elementi liste gibi sıralar listelerde kullanılır ama başka nesnelerdede kullanılabilir
h3 {display: run-in}
üstteki kodumuz satır bitişinin en üstüne taşır ama tarayıcılarda çok fark gösteriyor
dt {display: compact}
üstteki kodumuz css2.1 de kaldırıldı
strong {display: marker}
üstteki kodumuz css2.1 de kaldırıldı
TABLO alttaki kodlarımız tablo için kullanılıyor
table {display: table}
table {display: inline-table}
tbody {display: table-row-group}
thead {display: table-header-group}
tfoot {display: table-footer-group}
tr {display: table-row}
colgroup {display: table-column-group}
col {display: table-column}
th {display: table-cell}
caption {display: table-caption}
Liste özelliği ilk olarak listeleme amaçlı kullanılsa da şimdilerde menü yapımında kullanımı revaçtadır. Burada liste özellikleri yanısıra display ve white-space özelliklerinden de bahsedilecektir.- list-style
- list-style-type
- list-style-image
- list-style-position
- white-space
- display
list-style-type
Yapısı : list-style-type: <deger>
Aldığı Değerler : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Başlangıç değeri: disc Uygulanabilen elementler: display değeri list-item alan elementler
Kalıtsallık: Varlist-style-type özelliği list-item işaretinin tipini belirler. list-style-images özelliği none değeri aldığında veya resim görüntülenemediğinde kullanılır.ul.arabalar { list-style-type: none } ol ol ol { list-style-type: lower-roman /* i ii iii iv v gibi. */}Padding içerik alanı ile kenarlık arasındaki alandır.padding-top
Yapısı : padding-top: <deger>
Aldığı Değerler :| | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yokpadding-top özelliği içerik alanı ile üst kenarlık arasındakimesafeyi belirler.h2 { padding-left: 0.25in; }font-size:
font-size font büyüklüğünü küçüklüğünü belirlememize sağlar Temel Komutlar Kullanabilir yada numara ile boyut verebiliriz örnek kullanım
body { font-size: x-large;}Temel Yazım değerleri xx-small => html boyutu 1 x-small small => html boyutu 2 medium => html boyutu 3 large => html boyutu 4 x-large => html boyutu 5 xx-large => html boyutu 6 Numara olarak font boyutu vermek için px, pt, cm, mm, em, ex, pc, inc ve % kullanılabilir örnek
p {font-size: 260%} p {font-size: 14px} p {font-size: 2.6em}Göreceli değerler smaller => göreceli en küçük değer larger => göreceli en büyük değer length => göreceli normal değertext-decoration Bu özellik metinlerimize özel işaretler koymamızı sağlar. Örneğin metinlerizinaltını çizmek gibi.Kullanımı:Metin Üstü Çizgi: h1 {text-decoration:overline} Üzeri Çizili Metin: h2 {text-decoration:line-through} Altı Çizili Metin: h3 {text-decoration:underline} Yanıp Sönen Metin: h4 {text-decoration:blink} a:link, a:visited, a:active { text-decoration: none }
Hiç yorum yok:
Yorum Gönder