WEB Tasarımcılığa İLK ADIMLAR

Save this PDF as:
 WORD  PNG  TXT  JPG

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "WEB Tasarımcılığa İLK ADIMLAR"

Transkript

1 Yeni başlayanlar Ve Gelişmek İsteyenlere WEB Tasarımcılığa İLK ADIMLAR Batuhan Akkaya 0

2 Kitap Hakkında; Kitabımı web tasarım işlerine yeni başlayanlar veya az bilgisi olan kişilerin bakmasını tavsiye ederim. Kitabımda sadece tasarım değil temel kavramlar hakkında yeterli bilgi kazanabilirsiniz. Kendi siteme bütün okurlarımı beklerim kitapta gördüğünüz hataları ve benle iletişime geçmek için adresten kolayca benle iletişime geçebilirsiniz. 1

3 İÇİNDEKİLER 1. Temel Kavramlar Web Master Nedir? Basit Bir Web Site Yapmak İçin Neler Bilinmeli HTML Nedir? CSS Nedir? Domain ve Hosting Nedir? SEO Nedir? 2. Basit İşlemler HTML Giriş HTML Temelini Oluşturan Taglar Temel Sayfa Düzeni Temel Taglar Basitçe Tablo Yapımı 3. Gelişmiş İşlemler Link İşlemleri Liste Yapımı Div ve Spam Pre Tagı Form İşlemleri 4. CSS ye Giriş CSS Mantığı CSS Seçiciler Font ve Metin İşlemleri Kenar Çizgisi (Border) Ve Arka Plan İşlemleri İç Dış Boşluk (margin-padding) Elementler (display) Yan Yana Sıralama Olaylar 5. Gelişmiş CSS ve SEO İşlemleri Köşe Ovalleştirme (Radius) Gölgelendirme (Shadow) Meta Taglar SEOÖnem 2

4 Web Master Nedir? Temel Kavramlar Webmaster Türkçe karşılığı ağ uzmanı demektir. Web site yapan, geliştiren ve hatalarını tespit edip düzenleyen kişidir. Web tasarımcı ve webmaster aynı anlama gelmektedir fakat webmasterlar siteleri tasarlamaz ondan ziyade yapılmış tasarımı siteye uyarlayıp kodlarlar. Basit Bir Web Site Yapmak İçin Neler Bilinmeli Kendimize ait bir site açacağız peki ne bilmemiz asıl hangi dilleri bilmemiz lazım? Bu sorunun cevabı en az Html ve Css bilmeniz gerekir. Bu kitabın sonunda büyük bir yol kat edeceğinizden emin olun. Html ve Css kullanarak güzel görünümlü işlevli bir site açabiliriz fakat bunun yanında Javascript ve bu dilin kütüphanesi olan jquery ile sitemizi dinamikleştirebiliriz. Php programlama dili ve MySQL ile sitenizi veri işlemlerini yani üyeliktir vs. yapabilirsiniz. HTML Nedir? Hyper Text Markup Language kelimelerinin kısaltılmış hali olan HTML dili, bir sitenin iskeletini oluşturur. HTML ile görsel olarak hiçbir etkide bulunmaz fakat sitenin bütün işlevini HTML dili ile sağlarız, örneğin; sitenin içeriği, resimleri, linkler, ses, video vs. düz bir şekilde ekleriz. Bütün siteler HTML ile oluşur asıl bir web sitesinde fare ile sağ tık kaynağı görüntüle dediğimizde sitemizin kodlamasını gördük. Aşağıdaki resim gibi. 3

5 CSS Nedir? Html ile bir sitenizin iskeletini temelini oluştururuz CSS ile deri, görsellik gibi şekillendiririz. Cascading Style Sheets kelimelerinin kısaltılmış hali olan CSS ile ne yapabiliriz derskek; arka planları, renkler, boyutları, yazı tipini gibi biçimlendirme ayarlarını ayarlarız. İlerki bölümlerde CSS daha da değineceğiz. Domain ve Hosting Nedir? Domain yani özel alan adı bir web sitesine ulaşılmasını sağlayan isimdir. Örneğin.com,.net,.org gibi, alan adları satın alamayız yani kiralarız genellikle yıllık 20 türk lirasından başlar. Hosting özel alan adımızın (domainimiz) altında dosyalarımızı barındırdığımız yerdir. 4

6 Aylık satın alınabilirler ve her hosting firmasının domain ile ilişkilendirilmesi için özel DNS ayarları ile ayarlanır. Hosting güvenliği nedir, bir çok web host hosting şirketi var fakat her hosting şirketinden alınmaz çünkü hızlı ve güvenilir değildir bunun sonuçları kötü olabilir kesinlikle dikkat edilmelidir. Benim tavsiye ettiğim site Alastyr dir köklü ve güvenilirdir. Domainizi ve Hostinginizi aldıktan sonra web dosyalarını hostinge atabilir internet ve tarayıcılar üzerinden siteniz erişilebilir hale gelir. SEO Nedir? SEO açılımı olan Search Engine Optimization Türkçe karşılığı arama motoru optimizasyonu olarak çevrilir. Seo bir web sitesinin ürünler ve hizmetleri hakkında arama motorlarında bilgi vermesini sağlayacak şekilde kodlanmasıdır, yani web sitenin arama motorlarında istenilen bilgilerde gelişmesine yapılan çalışmalara seo diyebiliriz. Bu SEO işlemlerini uzman kişilere belli bir ücret ile yaptırabilir veya internette bazı sitelerde ücretsiz SEO rehberlerini bulabilirsiniz. HTML E GİRİŞ Bir web sitesini oluşturmak için önceki konularda da anlattığım gibi HTML bilmemiz lazım bir site temeli html ile oluştururuz. Öncelikle html tag mantığını anlatacağım. <tag> tag içeriği </tag> Yukarıdaki öğretici örneği incelersek tagımızı başta açarız içeriği girdikten sonra / tag isminin başına konularak tagı kapatmış oluruz. Peki tagı kapatmazsak ne olur derseniz hangi tag ile açtık ise diğer içeriğimizde o tagı kapsamış oluruz örneğin <b> tagının içine ismimizi yazdıktan sonra kapatmazsak sadece isim değil geride yazdığımız cümlede kalın yazmış olur. Ama her tag kapatılmaya bilir örneğin satır atlama tagımız <br /> bu tag sayesinde paragraf atlayabiliriz. 5

7 Yorum satırı da yeri gelmişken anlatayım html kodlarımızı yazarken yorum satırı ekleyerek yorum satırı tagları arasında yazılan yazılar html de hiç işlenmez sadece açıklama öğretici olarak kullanırız. <! Yorum satırı html hiçbir türlü işleve girmeyecektir --> Bunu genellikle kısa açıklamalar için kullanılır eğer uzun bir açıklama ekleyeceksek tavsiye edilen /* açıklama */ örnek göstereyim: /* 1. satır 2. satır 3. satır 4.satır */ Kod mantığımızı anladıktan sonra şimdi html iskeletini inceleyebiliriz. <html> <head> <! Title, meta tags --> </head> <body> <! Görünücek bütün içerikler. --> </body> </html> Html çalışmalarımızı yapmamız için editöre ihtiyacımız olacaktır okurlarıma tavsiyem Notepad++ editörünü indirip çalışmalarınız yapmanız. 6

8 Editörümüzde html kodlamamız bittikten sonra farklı kaydet diyerek isim.html veya isim.htm olarak kaydederek tarayıcınız ile birlikte açarak çıktılarınızı alabilirsiniz. HTML İN TEMELİNİ OLUŞTURAN TAGLAR Taglar <!doctype html> <html></html> <head></head> <body></body> <title></title> Açıklamaları Sayfanın en başında ublunur ve html5 kullanıldığı belirtilir. Sayfanın başında ve sonunda bulunur bütün kodlar arasında yazar. Site başlığı, özellikleri ve meta tagları ve sunucu bilgilerini içerir. Bu taglar arasında sayfadaki gözükecek her şeyi içerir. Sayfanın (sekmenin) başlığını belirler. Örnek bir kodlama göstereyim. <!DOCTYPE html> <html> <head> 7

9 <title>sayfa Başlığı</title> </head> <body> Sayfada gösterilicek içerikler </body> </html> Sayfa düzeni hakkında bahsedeyim. Genellikle sayfanın en üst kısmında logo bulunun kısma header, header kısmının hemen altında menü seçenekler arama kutusu vs. olan kısma navbar, sayfanın ortasında olan içerik olan kısma article denir. Sayfanın sağ tarafında bulunan bölgeye aside, en alt kısma ise footer denmektedir. 8

10 Yukarıdaki çizimde de gösterdiğim gibi sayfa yerleşim mantığı genellikle böyledir. Header logo, reklam vs. Navbar menü, arama kutusu, navigasyon vs. Aside navigasyon, reklam vs. Footer alt bilgi telif hakkı vs. Aşağıda da kendi sitemin yerleşimini görebilirsiniz. 9

11 Footer kısmı sığmadığı için ayriyeten aşağıda göstereceğim. 10

12 Temel Taglar Taglar Açıklamaları <br /> Satır atlamamızı sağlar. <img src=. /> Sayfaya resim eklemeyi sağlar. <a href= link ></a> Metine link eklememizi sağlar. <ul></ul> Liste oluşturmamızı sağlar. <li></li> Liste elemanları oluşturmamızı sağlar. <hx></hx> Başlık oluşturmamızı sağlar, x 1 den 6 ya kadar değer alır. <hr></hr> Sayfada yatay düz bir çizgi oluşturmamızı sağlar. <p></p> Bir paragraf oluşturmamızı sağlar. <div></div> Sayfada bir bölüm oluşturmamızı sağlar. <b></b> Kalın yazmayı sağlar. <mark></mark> Seçili alanı vurgulu göstermeyi sağlar. Bu temel tagların dışında genelde yazı biçimlendirmeler css ile ayarlanır ama bazı taglar ile de css gerekmeden yazıları biçimlendirebilirsiniz. Basitçe Tablo Yapımı Öncelikle bildireyim web sitelerimizi tasarlarken html kodlarımızda table ile tablo tasarımlarında seo için pek iyi olmaz. <table></table> <tr></tr> <td></td> Border=x cellspacing=x Width=x Align=hiza Tablo oluşturmamızı sağlar. Tabloya satır eklememizi sağlar. Tabloya hücre eklememizi sağlar. Kontur kalınlığını ayarlar. Sütunlar arasındaki boşluğu ayarlar. Genişliği ayarlar. Hücre hizasını ayarlar. 11

13 <table border="1"> <tr> <td>1.satır sol hücre</td> <td>1.satır sağ hücre</td> </tr> <tr> <td>2.satır sol hücre</td> <td>2.satır sağ hücre</td> </tr> <tr> <td>3.satır sol hücre</td> <td>3.satır sağ hücre</td> </tr> </table> Yukarıdaki örneği incelersek tr ile satırları ayarladık td ile sütunları ayarladık basitçe bir tablo oluşturduk. Mantık bu kadar basittir. Görüntüsü: 1.satır sol hücre 2.satır sol hücre 3.satır sol hücre 1.satır sağ hücre 2.satır sağ hücre 3.satır sağ hücre 12

14 LİNK İŞLEMLERİ Öncelikle link nedir? Link bir köprüdür bir nesneye tıklayınca bir hedefe gitmesini sağlar. Html de link atama görevini <a> tagı görür. Linkler bir den farklı görev görür. Kullanımı: <a href= hedef >tıklanılacak metin</a> Sayfa içi linklerde örneğin sayfada üç bölüm bulunmakta a, b ve c dir a bölmüne gitmek için a, b veya c ye tıklama butonları yapılarak sayfa içi gezinme linkleri oluşturabilir. Sayfa dışı gezinme linklerinede bir sitenin menüsündeki hakkımızda, iletişim gibi sayfalarda gezinmesini sağlayabiliriz. Dış link (backlink) başka bir sitede bir resimde, cümlede vs. olabilir backlinkin avantajı ise seo açısından siteniz gelişir yani arama motorlarında daha tavsiye edilen bir site olarak ön sıralara çıkmada büyük etkisi vardır. Not: <a href= iletisim.html >iletişim</a> burada sayfa içi işlemlerde kullanabilir. Fakat başka sitelere link verirken linkin başına htpp ekli olması gerekir. <a href= > Webte Hayat </a> Htpp başta yazılı olmaz ise sayfa içinde arayacaktır öyle bir sayfa olmadığı içinde sayfa bulunamadı 404 hatası alacaksınızdır. Bunun dışında linkle mailto gibi parametreler ile mail, mobil arama, indirme linkleri de oluşturulabilir. <a mailto= > gönder </a> 13

15 Liste Yapımı Html de liste oluşturmak için <ol> ve <ul> taglarını kullanırız. Genellikle kullanacağımız <ul> tagı olacaktır. <ul> tagımız ile listenin başını ve sonunu belirleriz <li> tagımız ile liste elemanlarımızı belirleriz. Şimdi bir liste oluşturalım. <ul> <li>1. satır</li> <li>2. satır</li> </ul> Görüntüsü: 1. satır 2. satır İleride yapacağımız menüleri genellikle div ve ul taglarımızla yapacağız css yardımıyla. Div Ve Span Html serilerimizde en çok kullanacağımız ve işimize yaracak iki tag div ve spandır. Div tagı block bir elementtir ve kaç tane div yazarsak alt alta sıralanacaktır divin özelliği budur sayfa bir yer belirlememizi sağlar tabi css olmadan bir şey ifade etmeyecektir. <div> Örnek alan </div> Span tagı inline bir elementtir bu yüzden yanına ne kadar inline nesne koyarsak yan yana dizilirler spanın özelliği budur. Tabiki span da css olmadan bir şey fark etmeyecektir. <span> Örnek alan </span> 14

16 Pre tagımızı da anlatıp geçeyim html de bildiğiniz gibi yazdıklarımız direk aynı gözükmez <br/> ile satır atlamaz vs. gerekir. Pre tagı ile başını ve sonunu belirlediğimiz yeri yazdığımız gibi gözükmesini sağlar. Webte Hayat <br /> Yazılım dersleri <pre> Webte Hayat Yazılım dersleri </pre> İki örnekte de görüntü aynı olacaktır. Form İşlemleri form tagımızın kullanımı ve form işlemlerini öğreneceğiz. Formlar ile sadece görsel olarak ayarlarız kullanıcıdan veri almada yardımcı olur, şimdi taglarımıza geçelim. <form> Form elemanların bu tagımızın arasında kullanırız. Kullanımı: <form ACTION="url" METHOD="get- post" TARGET="pencere">... </FORM> İki parametremiz var gördüğünüz üzere action ve method bunların görevleri neler onları görelim. ACTION: Formdan girilen bilgilerin değerlendirileceği dosyanın URL adresini belirtiriz. METHOD: Göndereceğimiz yöntemi seçeriz iki adet değeri vardır getve post get veriler linkte toplanır. post veriler bir yerde gözükmez. 1-İnput: form içerisinde bilgi almak için kullanılır. Type parametresi ile türü belirlenir (text, password, checkbox, radio, submit, reset...) gibi değerler alabilir. 15

17 Kullanımı : <input ALIGN=tip [CHECKED] MAXLENGTH=uzunluk NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=deger> Şimdi inputta birkaç tane parametremiz var bunlar neler görevleri ne ona bakalım. 1- TYPE: Eleman türünü belirtmek için kullanılır. 2- SRC: Görüntülenmesi istenilen resim belirtilir. 3- ALIGN: Type parametresi ile belirlediğimiz elemanların konumunu ayarlarız. 4- NAME: Girilecek verinin değişken ismini belirlemek için kullanılır. 5- MAXLENGTH: Girilecek olan verinin en fazla kaç karakter olacağını ayarlarız. 6- SIZE: Metin kutusunun boyutu ayarlanır. Belirtilmediği taktirde varsayılan 20 olacaktır. 7- CHECKED: Bir seçim kutusu kullandıysak tikli olduğunu belirler. 8- DISABLED: Veri girişini engellemek için kullanılır. Şimdi Form nesnelerimize geçelim birkaç adet nesnemiz var hemen işleyelim. 1-CheckBox: Formumuza onay kutucukları eklememizi sağlar. örnek: <html> <head><title>w ebte hayat</title> <body> <input type="checkbox" name="onay1">.com<br> <input type="checkbox" name="onay2">.net<br> <input type="checkbox" name="onay3">.org </body> </html> Canlı çıktı: 16

18 .com.net.org 2-Radio: Kullanıcının bir kere seçebileceği yuvarlak düğmeli seçenekler oluşturmamızı sağlar. örnek: <html> <head><title>w ebte hayat</title> <body> <input type="radio" name="onay1" value="1">.com<br> <input type="radio" name="onay2" value="2">.net<br> <input type="radio" name="onay3" value="3">.org </body> </html> Canlı çıktı:.com.net.org 3-text: kullanıcıdan yazı bilgileri almanızı sağlar: örnek: <html> <head><title>w ebte hayat</title> <body> <input type="text" name="isim" />isim </body> </html> Canlı çıktı: isim: 4-Password: Şifreli halde yazar kullanıcılarının parolarını girmelerini sağlar siyah nokta olarak gözükür. örnek: 17

19 <html> <head><title>w ebte hayat</title> <body> <input type="passw ord" name="sifre"/> </body> </html> Canlı çıktı: Parola: Select-option: Select bir açılır kapanır seçenek menüsüdür. kullanımı <select> tagları arasında <option> tagları arasınta yazılır, örnekle biraz daha açayım. CSS Mantığı Ve Seçiciler Html ile bir sitenin iskeletini tasarladıktan sonra css ile görsellik katarız. Css yi html de seçiciler yardımı ile kullanırız önce css ile seçicilerimize değer veririz sonra taglarımıza seçicileri ekleriz. Css kodlarımızı html de <head> tagları arasında <style> tagı arasında yazılır. İstenilirse.css olarak kaydettiğimiz dosyada çağırabiliriz. <link rel="stylesheet" type="text/css" href="dosyaismi.css" /> <!doctype html> <html> <head> <title>css serimiz</title> <style type="text/css"> Css kodları... </style> </head> <body> Html kodları... 18

20 </body> </html> seçici ismi {kodlar...} Not: kodlar ve değerler yazılırken operatörümüz iki nokta üstüste(:) ve en önemli nokta her değerin sonuna noktalı virgül(;) konulması gerekir. İd seçicisi sadece 1 elemente atanır. seçici önünde sharp(#) konur. Kullanımı: #isim { color:white; background-color:black; } Class seçicisi yani sınıf seçicimiz kodlarımızdaki bütün elementlere atayabiliriz. seçicinin önüne nokta(.) konur. kullanımı:.isim { color:white; background-color:black; } Mantık budur arkadaşlar. Genel bir örnek yapalım hem seçici nasıl atanır onuda görürüz. Genel örnek: <!doctype html> <html> <head> <title>css ders 2</title> <style type="text/css"> #idsecici{ color:white; background-color:black; }.classsecici{ 19

21 color:red; background-color:yellow; } </style> </head> <body> <div id="idsecici"> Ben id Secici </div> <div class="classsecici"> ben class(sinif) secici </div> </body> </html> Çıktı: Tag seçiciler ise direk yazılarak ayarlayabiliriz. h1 { color:red; margin:5px; } Kullanımı bu kadar basittir. 20

22 Font Metin İşlemleri Css ders serimize devam ediyoruz bu derste font ve metin bütün özellikleriyle geniş kapsamda anlatacağım. Font ve metinin arasındaki farkı bilmeliyiz. Font tip ve biçimlerinin nasıl olacağını belirler, metin(text) ise sayfadaki düzeni ayarlarız. Bu derste font işlemlerini anlatacağım. Font: Font özellikleri sitemizdeki metinlerin font ailesini, kalınlığını, boyutunu vs. ayarlamak için kullanılır. bu ayarları ayarlayan font özellikleri vardır bu Font özellikler: 1- Font-family 2- Font-size 3- Font-weight 4- Font-style 5- Line-height font-family: Bir metnin font ailesini belirlememizi sağlar yani yazının tipini ayarlarız. birden fazla font aile ismi kullanabiliriz bunların her birini virgül(,) ile ayırırız. Örnek:.orn{ } font-family: verdana, sans-serif, arial; Örnekte gördüğünüz gibi bir kaç adet font ailesi belirledik tarayıcı hangisine uygunsa baştan başlayıp uygun olanı seçer. font-size: Bir yazın boyutunu ayarlarız. Boyutunu "px", "%" ve "em" ile belirleyebiliriz. Örnek: 21

23 .orn{ } font-size:10px; font-weight: Bir yazının kalınlığını ayarlamamızı sağlar. 100 ince olmak üzere 900 arasında değer alır. Örnek:.orn{ } font-weight: bold; font-style: Bu özelliğimiz bir yazının eğik, az eğik ve normal yapmak için kullanılır. Örnek:.orn_1{font-style:normal;} //Normal gözükür.orn_2{font-style:italic;} //Eğik olur.orn_3{font-style:oblique;} //Az eğik olur line-height: Satırlar arasındaki mesafeyi ayarlamamızı sağlar. Örnek:.örn { line-height:15px; //satırlar arasındaki mesafe 15px } 22

24 Önceki dersimde fontun özelliklerini görmüştük bu derste metni nasıl biçimlendireceğiz bir metnin rengini hizasını harfler arasındaki boşluğu vs. bu özellikler: 1- color 2- text-align 3- text-decoration 4- text-transform 5- text-indent 6- line-height 1- Color: metnimize renk vermemizi sağlar. Derğer olarak renk birimlerinin istediğinizi kullanabilirsiniz..örn {color:red;} #örn {color:#449bdb;} 2- text-align: Metinleri hizalamamızı sağlar sağa sola ortalama ve iki yana yaslayabiliriz. 4 tane değeri vardır. h1{text-align:left;} // metni sola hizaladık. h2{text-align:center;} // metni ortaladık. h3{text-align:right;} // metni sağa hizaladık. h4{text-align:justify;} // metnin içeriğini sağ taraftaki boşluğa orana hizalar. 3- text-decoration: metindeki bazı değişiklikler eklememizi veya kaldırmamızı sağlar. 5 tane değeri vardır bunlar inceleyelim. text-decoration:none; //Çizgiyi kaldırır (genellikle a tagında kullanılır) text-decoration:underline; //metnin altı çizili olur. text-decoration:overline; //metnin üst tarafını çizili yapar. text-decoration:line-through; //metnin üzerinden yani ortasından çizili yapar. text-decoration:blink // metnin yanıp sönmesini sağlar. 4- text-transform: metindeki karakterlerin büyük veya küçük olmasını sağlar. 3 adet değeri vardır bunlar: text-transform:uppercase; //metindeki tüm harfler büyük olur. text-transform:lowercase; //metindeki tüm harfler küçük olur. 23

25 text-transform:capitalize; //metindeki ilk harfleri büyük hale gelmesini sağlar. 5- text-indent: girinti yani paragrafın nereden başlayacağını sağlarız. p{text-indent:50px;} //her paragraf başlarken 50 px içerden başlayacak. 6- line-height: metinler arasındaki mesafeyi ayarlar. p{line-height:20px;} // satırlar arası mesafeyi 20px olarak ayarladık. Kenar Çizgisi (Border) Ve Arka Plan İşlemleri Div üç ana öğeden oluşur bunlar: 1- Boder (kenar kalınlığı) 2- Margin (dış boşluk) 3- Padding (iç boşluk) Biz bu derste border işleyeceğiz. Border 3 özelliği vardır style, width ve color veya kısaltması direk border olarak yapabiliriz. sadece alt tarafı veya sağ tarafı biçimlendirmek istersek "border-top-style" gibi ayarlayabiliriz. 1- border-style: Kenar çizgimizin biçimini belirleriz eğer belirlemezsek otomatik olarak "none" değerinde olur. a) dotted=noktalı b)dashed=kesik c)solid=düz d)double=çift e)groove=içe kabarık f)ridge=dışa kabarık g)inset=içe gömülü h)outset=dışa gömülü Bir örnek yapalım..cerceve{border-style:solid;} //heryer düz çizgi oldu..cerceve_1{border-top-style:solid; border-bottom-style:solid; border-right-style:double; border-left-style:double;} //sag sol çif üst alt düz çizgi oldu. 24

26 2- border-width: çizgimizin kalınlığını ayaarlarız mantık yine aynıdır. bir örnekle hemen göstereyim değerler ülçüm birimleri ile atanır..border {border-style=solid; border-w idth:5px;} //düz çizgili çizgiler 5px kalinliginda..border_1 {border: solid 5px;} //yukardaki örnekle ayni border-color: Kenar çizgilerimizin rengini belirleriz. değerleri renk birimleri ile atarız. bir iki örnekle göstereyim hemen..kutu{border-style:dotted; border-w idth:5px; border-color:red;} //çizgiler noktali 5px kalinliginda rengi kirmizi oldu..kutu_1{border: dotted 5px red;} // yukaridaki örnekten farki yok. arkaplan özelliklerini işleyeceğiz arka plan rengi verme, arkaplana resim ekleme, arka planı pozisyonunu vs. öğreneceğiz. Beş adet özelliği vardır bunlar: 1- background-color 2-background-image 3-background-repeat 4-background-attachment 5-background-position 1-Background-color: Arka plan rengi vermeye yarar. body {backgorund-color=red;} //arkaplan rengini kirmizi yaptik. 2-Background-image: arka plana resim eklememizi sağlar. 25

27 body {background-image:url("zeminrengi.jpg");} //arka plana zeminrengi resmini atadik. 3-Background-repeat: arka plana eklenen resmin tekrarlanma biçimini kontrol etmek için kullanılır. Dört adet değeri vardır bunlar: backgroud-repeat:repat; //resmin hem dikey hemde yatay tekrar etmesi. backgroud-repeat:no-repeat; // tekrar etmemesini sağlar. backgroud-repeat:repeat-x; //yatay (x) ekseninde tekrar etmesi. backgroud-repeat:tepeat-y //dikey (y) ekseninde tekrar etmesi. body{background-image:url("logo.gif");} backgorund-repeat:repeat; } 4-Background-position: Görselin sayfadaki pozisyonunu belirler. 11 adet değeri vardır. top left top center top right center left center center center right bottom left bottom center bottom right bu tür bir matnıktır bir kaçtane de örnek göstereyim. background-position:top left; //sol üstte yer alacak. background-position:top right; //sag üstte yer alir. background-position:bottom right; //sag altta yer alir. background-position:center right; //ortanin saginda yer alir. 5-Background-attachment: Görselin kaydırma çubuğunu kullandığımızda takip edip etmememsini sağlar. takip etmesi için "scroll" sabit olması için "fixed" değerleri verilir. 26

28 body { background-image:url("logo.gif"); background-repeat:no-repeat; background-attachment:scroll; } Margin(dış boşluk) padding(iç boşluk) Margin dış boşluğu ayarlamamızı padding ise iç boşluğu ayarlamamızı sağlar. Border la dışarının uzaklığı margin. Border la içerik arasındaki uzaklıkta Padding olarak adlandırılır. Margin ve padding dört adet değer alır bunlar sağ, sol, üst, alt. ölçüm birimleri ile değer veririz. kodlarımıza geçelim. margin-top:15px; // üstten dış boşluk 15px margin-right:15px; //sağdan dış boşluk 15px margin-bottom:15px; //alttan dış boşluk 15px margin-left:15px; //soldan dış boşluk 15px padding-top:15px; // üstten iç boşluk 15px paddingright:15px; //sağdan iç boşluk 15px padding-bottom:15px; //alttan iç boşluk 15px padding-left:15px; //soldan iç boşluk 15px Genel örnek: 27

29 <html> <head> <style>.kutu {background-color:blue; margin:10px; w idth:150px; height:150px; padding:50px;}.icerik{w idth:50px; padding:50px;height:50px; background-color:red;} </style> </head> <body> <div class="kutu"> <div class="icerik"> </div> </div> </body> </html> Çıktı: Display Elementler Bir web sayfasındaki nesnelerin akışı, o elemanın seviye türüne göre değişir. Seviye türüne göre iki tip eleman vardır: 1- Blok elementi 2- İnline elementi 1- Block: Sayfada blok olarak işlenirler. Sayfada yukarıdan aşağı doğru sırayla sıralanır. Bir özelliği de satır başından başlar. 2-İnline: İnline elementleri sayfada tek satırda işlenir. Sayfada soldan sağa doğru sırayla sıralanırlar. Özelliği tek satırda olur yani alt satıra geçmez. 28

30 Bu elementlerimizin başlangıç değerlerini display komutu ile değiştirebiliriz. Yani bir inline yi block a dönüştürebilir bir block uda inline ye dönüştürebiliriz. Bir örnekle göstereyim: li{ display:inline; // listelemeyi inlineye çevirdik. } span { display:block; // span elemanimizi block a çevirdik. } Yan Yana Sıralama float div leri yani kutularımızı yan yana sıralamamızı sağlar. clear ise bu işlemi sonlandırmamızı sağlar. float 2 adet değer alır bunlar sağ ve sol dur yani sağ değeri verirsek sağ sıralar sol ise sol sıralar. Genel örnek: <html> <head> <style>.kare{w idth:100px;height:100px;background:red;float:left; margin-left:10px;}.son{clear:both;} </style> </head> <body> <div class="kare"> 1</div> <div class="kare"> 2</div> <div class="kare"> 3</div> <div class="son"> </div> </body> </html> Çıktı: 29

31 Olaylar Web sitelerde bazı olaylar olur yani örneğin yazının üstüne mouse ile gelindiğinde renk değiştirmesi veya kanlınlaşması gibi olaylardır. Bu olaylar nedir inceleyelim. Hover Focus Link Visited Checked Mouse geldiğinde olacak. Nesne odaklandığında olacak. Gidilmemiş linkleri seçilir. Gidişmiş linkleri seçer. İşaretli onay vs. kutucuklarını seçer. Basitçe mantığını anlamak için örnek yapayım. class_ismi:hover { Çalışacak kodlar... }.class_ismi:focus { Çalışacak kodlar... } Yukarıda da gördüğünüz gibi kullanımı böyledir class : ve olay ismi ardından çalışacak kodları yazarız genel bir örnek yapayım. <html lang="tr"> <head> <title>webtehayat</title> 30

32 <style type="text/css">.kutu {width:70px; }.kutu:focus {width:110px;}.kutu:hover {border:solid 3px red;} </style> </head> <body> <input class="kutu" /> </body> </html> Bir inputumuz var Mouse üzerine geldiğinde dış çizginin rengi kırmızı oluyor tıklandığında da yani focus olayında input genişliği artıyor. CSS Köşe Ovalleştirme Css nin güzel özelliklerinden biri olan köşe yuvarlama özelliğimize geldik. Css nin bu özelliğini border larda kullanmaktayız direk kullanımına geçeyim. border-top-left-radius = üst sol köşe border-top-right-radius =üst sağ köşe border-bottom-left-radius =alt sol köşe border-bottom-right-radius =alt sağ köşe css3 de kodları aynısını başına webkit moz o koyarak yazıyoz tarayıcı uyumu için. Yani her css3 kodu nu 4 kere yazmamız gerekir. Bunu yapmazsanız daha sonra tarayıcı hata verir. 31

33 Örnek:.buton{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; } Hızlıca gölgelendirmeyide anlatayım mantık gene aynı..logo{ box-shadow:0px 0px 15px #333; -webkit-box-shadow:0px 0px 15px #333; -moz-box-shadow:0px 0px 15px #333; -o-box-shadow:0px 0px 15px #333; } Sondaki 15 px blur etrafına 15 px lik bir gölge yaydık sonrada rengini belirledik diğer parametreleri ile de yönünü falan ayarlarız. Meta Taglar Seo ya fazlasıyla katkısı olan meta taglar kodlarımıza eklemeliyiz peki bu meta taglar ne işe yarıyor bakalım. <meta name="description" content="içerik "> Description ile sayfalarımıza açıklama ekleriz. Bu da sayfalarımızın GOOGLE da çıktığı zaman alt kısmında bir açıklama ile gelmesini sağlamaktadır. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 32

34 Bu etiket ile sayfalarımızın Türkçe dil desteğini aktifleştirmiş oluruz. Bu tagın HTML5 ile kullanımı kısaltılmıştır. Kısa kullanımı <meta charset="utf-8"> şeklindedir. <meta name="abstract" content="içerik"> Description yerine de kullanılabilir. Aynı şekilde sayfalara açıklama metni eklemek için kullanılır. <meta name="author" content="yazar"> Sayfayı hazırlayan kişi ya da kurum bilgisinin paylaşıldığı tagdır. <meta name="classification" content="kategori"> Sayfanızın kategorisini belirlemek için kullanılır.(politics, Finance, Business, web hosting gibi) <meta name="copyright" content= "içerik "> Sayfanın yayın hakkı sahibinin bilgilerini içermektedir. <meta name="distribution" content="global / Local"> Sayfa içeriğinin kime hitap ettiği bilgisini içermektedir. 33

35 <meta name="content-language" content="tr"> Sayfada kullanılan dil bilgisini içermektedir. <meta name="rating" content="all"> Sayfa içeriğinin kime hitap ettiği bilgisini içermektedir. Eğer herkese yönelikse "All" yapılmalıdır. <meta name="resource-type" content="document"> Sayfa içeriğinin tipini yazmanız gerekmektedir. <meta name="robots" content="all"> robots : Robotun nasıl çalışacağını belirtir index / noindex : sayfayı arşive alır / almaz follow / nofollow : sayfaya bağlı diğer sayfaları da tarayıp endeksler / endekslemez imageindex / noimageindex : resimleri endeksle / endeksleme imageclick / noimageclick : resim linklerinin endeksle / endeksleme archive / noarchive : sayfayı arşivine al / alma (Google için özel) all : sayfanın her şeyi arşive alınır <meta name="revisit-after" content="1 days"> 34

36 Robotun sitenize kaç günde bir gelmesi gerektiğini bildirirsiniz., Bunun dışında resimlerimize alt title parametrelerini düzgün bir şekilde girin. En önemli faktörlerden biride backlink seo fazlasıyda önemlidir başka sitelerden kendi sitenizin link vermenizde fayda olur. Son olaradakta güzel kategorinize uygun bir domain seçerek içeriğinizide doğru doldurarak seo durumu iyi olan bir site açmış olursunuz. 35

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını

Detaylı

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin Özellikleri Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile

Detaylı

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet

Detaylı

2-Hafta Temel İşlemler

2-Hafta Temel İşlemler 2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının

Detaylı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web

Detaylı

sayfa Başlığı Bu benim ilk sayfam bu metin koyu

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

Arayüz Geliştirme Dokümantasyonu

Arayüz Geliştirme Dokümantasyonu Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ 11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder. Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin

Detaylı

İNTERNET PROGRAMCILIĞI

İNTERNET PROGRAMCILIĞI İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık 1 İnternet Programcılığı 1. TEMEL HTML ETİKETLERİ 1.1. HTML etiketi HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir.

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

HTML & CSS. Öğr.Gör. M.Ersin AKAY HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda

Detaylı

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri Puseduo Class Örnekleri Cssin html içerisinde kullanım şekilleri, puseduo class örnekleri CSS Stillerini HTML içerisine bağlama Css yapacağımız stilleri Html içerisinde 3 farklı şekilde bağlayabiliriz.

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur. Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.

Detaylı

ADOBE DREAMWEAVER CS5 CSS PANEL

ADOBE DREAMWEAVER CS5 CSS PANEL CSS Cascading Style Sheets ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 ÖZELLİKLER TYPE Font-Family : Yaz lar n alaca yaz tipini belirler Font adlar al r, Tahoma, Verdana Arial gibi. font-family: Arial, Helvetica,

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5 Stil Oluşturmak/CSS 2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden

Detaylı

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla

Detaylı

Radio butonları CSS ile makyajlamak

Radio butonları CSS ile makyajlamak Radio butonları CSS ile makyajlamak 4 Ocak Cuma 13 (X)HTML, CSS ve JavaScript Dökümanları http://mfyz.com/radio-butonlari-css-ile-makyajlamak Bildiğiniz gibi bazı form elementlerine (radio butonlar, check

Detaylı

4 Front Page Sayfası Özellikleri

4 Front Page Sayfası Özellikleri 4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak

Detaylı

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME Büro Yönetimi Öğretmeni Fatma GEZ BİÇİMLENDİRME Yazmış olduğumuz metinleri farklı boyut, renk, yazı tipi vb. özelliklerde yazabilmek için biçimlendirme işlemi

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU

CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU CSS Anlatımları #1 Hazırlayan Oğuzhan CABBAROĞLU Önsöz İnternetteki çeşitli kaynaklardan, birikimlerimizden bir araya getirdiğimiz CSS Anlatımları serimizin başlangıç yazısı Css e Giriş ile takipçilerimize

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

WEB PROGRAMLAMA. DERS NOTLARI / CSS e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA

WEB PROGRAMLAMA. DERS NOTLARI / CSS e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA WEB PROGRAMLAMA DERS NOTLARI / CSS e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA CSS NEDİR? Cascading Style Sheets (CSS Geçişli (Basamaklı) Stil Sayfaları) Günümüzde web tasarım alanında birçok teknolojiden

Detaylı

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1 Slice Fireworks te yapacağımız sitenin boyutuna göre

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

DIV KAVRAMI