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ı

HTML Bloklar. CSS Display özelliği

HTML Bloklar. CSS Display özelliği HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

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ı

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>

<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ı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

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ı

İ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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

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ı

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 Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

Detaylı

DIV KAVRAMI <style> position: absolute

DIV KAVRAMI <style> position: absolute DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde

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ı

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ı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Web Sayfasını Kayıt Etmek : Share point designer ya da Notepad de oluşturduğumuz HTML kodunu kaydetmek için File Save As komutunu seçiniz. Kayıt

Detaylı

WEB TASARIMIN TEMELLERİ

WEB TASARIMIN TEMELLERİ WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Bu belge BT Sınıfı Etkinliklerinde Kullanılmak Üzere Hazırlanmıştır İÇİNDEKİLER GİRİŞ... 3 ÜYE (KAYIT) OLMA... 3 YÖNETİM PANELİ İŞLEMLERİ... 5 ŞABLON AYARLARI...

Detaylı

CSS ile yazıcı çıktı işlemleri

CSS ile yazıcı çıktı işlemleri CSS ile yazıcı çıktı işlemleri Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların

Detaylı

Metin Tabanlı İçerik Oluşturma Araçları

Metin Tabanlı İçerik Oluşturma Araçları Metin Tabanlı İçerik Oluşturma Araçları Microsoft Office Word Kelime işlemci, görsel nesnelerin veya çizimlerin resim ya da arka plan olarak kullanıldığı metinler oluşturabilen, harita ve tablo gibi şekiller

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma

Detaylı

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI CSS BACKGROUND ÖZELLİKLERİ background-color Zeminin rengini belirler. #color Renk adı. transparent Zeminin saydam olmasını sağlar. background-image Zemine

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları

Detaylı

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Kullanıcı dostu kontrol panelli dünya standartlarında web tasarım uygulaması.

Detaylı

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır.

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Üye Girişi Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Giriş Sayfası Sayfa ayarlarını buradan yapabilirsiniz. Anahtar

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

5-Hafta Genel Sayfa Yapısı

5-Hafta Genel Sayfa Yapısı 5-Hafta Genel Sayfa Yapısı Paragraf Oluşturma Metin Biçimlendirme Referans ve Alıntıların Belirlenmesi Metinlerin Vurgulanması Kısaltma ve Terimlerin Belirtilmesi Alt ve Üst Simge Kullanımı Uİ-UX NEDİR?

Detaylı

GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ

GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ Hazırlayan: URL: Amaç: Ögr.Gör. Mehmet Emin ÖZCAN www.gantep.edu.tr/~ozcan/ders/internet1 MYO öğrencileri için css dökümanı Kaynaklar. GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ KASIM-2009 CSS (Cascading

Detaylı

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR.

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HTML - TABLO Genel Bilgi Tablolar, sayfaları satırlara/sütunlara bölmek

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Her doktorun ihtiyacı olan doktor web sitesi, hasta ve doktor arasındaki

Detaylı

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ MICROSOFT OFFİCE WORD PROGRAMI Ms Word bir kelime işlemci programıdır. İçinde bulunan detaylı metin biçimlendirme seçenekleri, ayrıntılı tablo, şekil ve grafik oluşturma başarıları nedeniyle, kendi türünde

Detaylı

JavaScript Örnekleri PDF

JavaScript Örnekleri PDF 5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript

Detaylı

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu MS WORD 5. BÖLÜM Bölüm Adı: SAYFA DÜZENİ Bölümün Amacı: Sayfa yapısı ve düzenini değiştirmek. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Ofis temalarını bilir. 2. Kenar boşluklarını, sayfa yönlendirmesini,

Detaylı

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır.

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır. Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

2. Belgeye Metin Ekleme

2. Belgeye Metin Ekleme METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya

Detaylı

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014 ASSAM İçindekiler Önsöz... 3 ASSAM Web Sitesinde Makale Yayınlamak... 4 ASSAM Web Sitesine Nasıl Girerim?...

Detaylı

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA TEMEL BİLGİSAYAR Ders Notları Yrd. Doç. Dr. Seyit Okan KARA Pencerenin ortasında bulunan beyaz sayfa, slayt tasarımında kullanacağımız sayfamızdır. Sol panelde bu slayt sayfasının küçültülmüş halde bir

Detaylı

1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3

1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3 İÇİNDEKİLER VII İÇİNDEKİLER 1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3 2 BOOTSTRAP CSS DOSYASININ İNCELENMESİ 5 Bootstrap

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

İNTERNET PROGRAMCILIĞI 2 10. HAFTA MYSQL - PHPMYADMIN. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Mysql Nedir.

İNTERNET PROGRAMCILIĞI 2 10. HAFTA MYSQL - PHPMYADMIN. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Mysql Nedir. İNTERNET PROGRAMCILIĞI 2 10. HAFTA İçindekiler MYSQL - PHPMYADMIN Mysql Nedir PhpMyAdmin Nedir PhpMyAdmin Arayüzü Hedefler Mysql' in görevini söyleyebilir PhpMyAdmin' in kullanım amacını söyler Hazırlayan

Detaylı

08.11.2015 WORD KULLANIMI

08.11.2015 WORD KULLANIMI KELİME İŞLEMCİ-MİCROSOFT OFFİCE OFFICE DÜĞMESİ HIZLI ERİŞİM ARAÇ ÇUBUĞU MENÜLER ŞEKİL, RESİM EKLEME TABLO EKLEME ETKİNLİKLER 1 OFFICE DÜĞMESİ: Çalışmamız ile ilgili dosya işlemleri yapmamızı sağlar. Yeni

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 Yük. Müh. Köksal GÜNDOĞDU 2 HTML Editörleri Web sayfası oluşturmak için not defteri gibi basit bir metin düzenleme yazılımı

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

Detaylı

www.wikispaces.com Kullanım Kılavuzu

www.wikispaces.com Kullanım Kılavuzu www.wikispaces.com Kullanım Kılavuzu İnternet tarayıcınıza(internet Explorer vb.) www.wikispaces.com adresini yazıp enter tuşuna bastığınızda yukarıdaki ekranla karşılaşacaksınız. Önceden oluşturmuş olduğunuz

Detaylı

İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir.

İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir. 21 Aralık 2011 / Çarşamba Önce bir site tanımlayacağız, yani önce çalışacağımız klasörü oluşturacağız. Bunun içinde, bir de resim klasörünü oluşturacağız. Görünüm : Classic Site Manage Site sitede düzenleme

Detaylı

BİLGİSAYAR PROGRAMLAMA

BİLGİSAYAR PROGRAMLAMA BİLGİSAYAR PROGRAMLAMA Yrd. Doç. Dr. Beytullah EREN beren@sakarya.edu.tr 0264 295 5642 1 MİCROSOFT EXCEL Elektronik tablolama veya hesaplama programı olarak da adlandırılan Excel, girilen veriler üzerinde

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ STİL ŞABLONU (CSS) 482BK0170 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri

Detaylı

Mustafa Köksal Alaturka Dijital Kurucu Ortağı

Mustafa Köksal Alaturka Dijital Kurucu Ortağı Mustafa Köksal Alaturka Dijital Kurucu Ortağı SEO Nedir? Türkçe karşılığı Arama Motoru Optimizasyonu dur. Organik arama sonuçlarında, sayfaların sıralamasını belirleyen faktörlerin tamamına verilen isimdir.

Detaylı

AMACSEO TEMASI KULLANIM KILAVUZU. AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1

AMACSEO TEMASI KULLANIM KILAVUZU. AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1 AMACSEO TEMASI KULLANIM KILAVUZU AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1 TEMANIN ÖZELLİKLERİ - Wordpress 3.1.1 sürümü için hazırlanmıştır. - Basit kontrol paneli

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

Hizalama Word dokümanlarınızda oluşturduğunuz veya oluşturacağınız metinlerin hizalamasını yapabilirsiniz. Bu işlem için:

Hizalama Word dokümanlarınızda oluşturduğunuz veya oluşturacağınız metinlerin hizalamasını yapabilirsiniz. Bu işlem için: Biçimleme Metin biçimleme Hizalama Word dokümanlarınızda oluşturduğunuz veya oluşturacağınız metinlerin hizalamasını yapabilirsiniz. Bu işlem için: 1. Hizalamak istediğiniz metni seçin. 2. Giriş sekmesini

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler...

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler... i İçindekiler Kullanıcı Giriş Ekranı... 1 Ana Sayfa... 2 1-Projeler... 3 1.1 Yeni Proje... 3 1.2 Proje Düzenle... 3 1.3 Proje Sil... 3 1.4 Listeyi Güncelle.... 3 2-Gruplar... 4 2.1.1 Grup Adı.... 5 2.1.2

Detaylı

Web Tasarımının Bugünü ve Geleceği

Web Tasarımının Bugünü ve Geleceği Efe ÇİFTCİ Çankaya Üniversitesi Bilgisayar Mühendisliği Bölümü Ocak 2011 www.efeciftci.com Dünya tarihinde yayınlanan ilk web sayfaları, olabildiğince basit tasarımlara sahipti ve ağırlıklı olarak metin

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ı

CSS (ST ABLON) Style ABLON ÇE TLER Yerel Stil ablonu Örnek: style Global Stil ablonu Örnek: style style style style lantılı Stil ablon

CSS (ST ABLON) Style ABLON ÇE TLER Yerel Stil ablonu Örnek: style Global Stil ablonu Örnek: style style style style lantılı Stil ablon CSS (STİL ŞABLON) CSS (Cascading Style Sheets) diğer deyimiyle Stil Şablon HTML yazım şekli olarak etiket türünde bir yazım dilidir. Sahip olduğu özelliklerin kısıtlı olması nedeniyle sayfanın dizaynında

Detaylı

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir.

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Sayfa numarası ekleme: Ekle menüsünden sayfa numaraları seçeneğine tıklandığında Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Tarih ve saat ekleme: Ekle menüsünden Tarih

Detaylı

T.C. CELAL BAYAR ÜNİVERSİTESİ TURGUTLU MESLEK YÜKSEKOKULU BİLGİSAYAR TEKNOLOJİSİ VE PROGRAMLAMA CSS DERS NOTU. Seval ÖZBALCI

T.C. CELAL BAYAR ÜNİVERSİTESİ TURGUTLU MESLEK YÜKSEKOKULU BİLGİSAYAR TEKNOLOJİSİ VE PROGRAMLAMA CSS DERS NOTU. Seval ÖZBALCI T.C. CELAL BAYAR ÜNİVERSİTESİ TURGUTLU MESLEK YÜKSEKOKULU BİLGİSAYAR TEKNOLOJİSİ VE PROGRAMLAMA CSS DERS NOTU Seval ÖZBALCI seval.ozbalci@bayar.edu.tr MANİSA 2003 İÇİNDEKİLER İÇİNDEKİLER... 2 CSS (STİL

Detaylı

E-postalarınıza HTML imza ile daha ilgi çekici olun

E-postalarınıza HTML imza ile daha ilgi çekici olun E-postalarınıza HTML imza ile daha ilgi çekici olun 3 Temmuz Cuma 09 Diğer Dökümanlar http://mfyz.com/e-postalariniza-html-imza-ile-daha-ilgi-cekici-olun E-Postalarda imza kullanımı Günümüzde eposta ile

Detaylı

Bo lu m 7: Hesap Tabloları

Bo lu m 7: Hesap Tabloları Bo lu m 7: Hesap Tabloları Konu 1: Dosya, Tablo ve Grafik Oluşturma Hazırlayan: S.Engin Koç Bu konu bittiğinde; Dosya oluşturma ve tabloya şekil verme Tabloya sütun, satır ekleme ve hücreleri biçimlendirme

Detaylı

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 4 MasterPage Bir web sitesi birden fazla sayfadan oluşur. Bu sayfalarda içerik değişirken her sayfada tekrarlanan ögeler ve özellikler

Detaylı

Web Teknolojileri ve Programla

Web Teknolojileri ve Programla Web Teknolojileri ve Programla Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz?

Detaylı

.docx veya.doc (2007 ve üzeri sürümlerde.docx iken sürümlerinde.doc tur.) 1.Belge Başlığı

.docx veya.doc (2007 ve üzeri sürümlerde.docx iken sürümlerinde.doc tur.) 1.Belge Başlığı MİCROSOFT WORD (KELİME İŞLEMCİ) Dosya Uzantısı.docx veya.doc (2007 ve üzeri sürümlerde.docx iken 1997 2003 sürümlerinde.doc tur.) Genel Ekran Görünümü 1.Belge Başlığı 2.Sekmeler 3.Sekme Şeridi 5.Cetveller

Detaylı

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı