ödevler: Ağustos 2013

29 Ağustos 2013 Perşembe

21.08.2013

DİSPLAY NEDİR? NASIL KULLANILIR?

Seçili elemanların tasarımının akışında nasıl etkiler vereceğimizi belirlememizi sağlar.

Aldığı değerlerè

Display:none : Bir elemanın display özelliğine none değeri verdiğimizde eleman görünmez olur.

Display:inline : Bu değerde elemanlar blok elemanı olarak davranır. Örneğin paragraflar yan yana sıralanır.

Display:block : Bu değerde elemanlar blok elemanı olarak davranır.

Display:listitem : HTML<li> elementleri gibi blok halinde bulunan satır içi öğeler barındıran öğeler üretmek için kullanılır.

Display:inline-block : Bu özellikle ise aynı anda hem blok hem satır içi öğeler üretmek için kullanılır.

Display:run-in : Bu kodumuz satır bitişini en üste taşır ama tarayıcılıarda çok fark gösterir.

POZİTİON NEDİR? NASIL KULLANILIR?

CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına kararverebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:

static - Hiçbir özellik belirtilmediyse

fixed - Sabit, tarayıcıya göre hareket etmeyen element

relative - Normal olması gereken pozisyona göre konum belirlemek

absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek

static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.

fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).

p.fixed

{ position: fixed;

top: 30px;

right: 5px;

}

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.

relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.

h2{position: relative;

left: -20px;

}

Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.

absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:

h2 {position: absolute;

left: 100px; top: 150px;}

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.

Z-İNDEX NEDİR? NASIL KULLANILIR?

z-index, konumlandırma elementleri uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır.

z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmışelementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.

img

{

position: absolute

left: 0px;

top: 0px;

z-index: -1;

}

20.08.2013

OPACİTY NEDİR? NASIL KULLANILIR?

Bu özelliği kullanarak bir öğenin saydamlığını değiştirebiliyoruz.

Kullanımı: <img src=”abc. jpg” style=”opacity:0,4;filter:alpha(opacity=40);

Onmouseover=”this. style.opacity=1;this.filters.alpha.opacity=”100”

Onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40”/>

örneklendirelim:
<title>OPACITY</title>
<style type="text/css">
.rsm img{width:250px;height:200px;}
p{color:green;font-size:24px;}
</style>
</head>
<body>
<p>Opacity özelligi ile bir ögenin saydamligini degistirebiliyoruz...</p>
<div class="rsm">
<img src="abc.jpg" style="opacity:0.4; filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=4;this.filters.alpha.opacity=40"/>
</div>
</body>

FLOAT NEDİR? NASIL KULLANILIR?

Bu özellik ile birlikte bir elemanı diğerlerinden bağımsız olarak sağ yada solda gösterip elemanın gerisinde kalan alanları(aşağı yada yukarı) boşluk olarak değerlendirip o alanları da kullanabileceğimiz sayfalar yapabiliriz.

kullanımı:

<title>FLOAT</title>
<style type="text/css">

img{width:350px;height:300px;float:right;}

</style>
</head>

<body>
<u>float = </u>Bu özellik ile birlikte bir elemani digerlerinden bagimsiz olarak <b> sag ya da solda gösterip</b>
elemanin geride kalan alanlari kullanabilecegimiz sayfalar yapabiliriz. Bunu bir resim için yapalim...
<img src="abcd.jpg"/><br><h1>simdi sol tarafta kalan bos alani kullanabilirz. :)</h1>

</body>

WİDTH= Genişlik ayarı.

<title>WIDTH/</title>
<style type="text/css">
.rsm2 img{width:750px;}</style>
</head>

<body>
<u> WIDTH :</u> bu özellikle genislik ayarlari belirtilir. <i>Bir resimle örneklendirelim...</i><br>
<h3>resmin ilk hali</h3><br>
<img src="abcde.jpg" />
<div class="rsm2">
<h3>BUDA RESMIMIZIN GENISLIGIYLE OYNANMIS HALI</h3>
<img src="abcde.jpg" />
</div>
</body>

HEİGHT=Yükseklik ayarı.

<title>HEIGHT/</title>
<style type="text/css">
.rsm2 img{height:100px;}</style>
</head>

<body>
<u> HEIGHT :</u> bu özellikle yükseklik ayarlari belirtilir. <i>Bir resimle örneklendirelim...</i><br>
<h3>resmin ilk hali</h3><br>
<img src="abcde.jpg" />
<div class="rsm2">
<h3>BUDA RESMIMIZIN YÜKSEKLİĞİYLE OYNANMIS HALI</h3>
<img src="abcde.jpg" />
</div>
</body>

19.08.2013: CSS ,margin ,padding,display,opacity,float,width,height,z-index,pozition ifadelerinin anlamları ve nasıl kullanıldıkları aratırılıp örneklendirmeler yapılacak.

CSS NEDİR? NASIL KULLANILIR

CSS,Cascading Style Sheets=Katmanlı Biçim Sayfaları anlamına gelmektedir.HTML nesnelerini belirli bir standart üzerine biçimlendirmek için kullanılır.HTML’nin sahip olduğu ve en önemlisi eksik kaldığı birçok biçimlendirme özellğine sahiptir.CSS sitedeki sayfaların görüntüsünü tek düze yapmak ve tüm içeriği benzer şekilde biçimlendirmek için kullanılır.CSS tarayıcının kişiye has bazı ayarlamalarına karşı sitenin görüntüsünü garanti eder.CSS sayesinde sitenize ait tüm sayfalar aynı formatta olabilir.Başka bir deyişle sayfalarınızın biçimini tek elden CSS yapısını değiştirerek ypabilirsiniz…

ÖNCEDEN TANIMLANMIŞ BİR CSS DOSYASINI SAYFAMIZA NASIL ÇAĞIRIRIZ?

CSS dosyası uzantısı .css olan dosyadır.Amacı çağrıldığı bütün sayfaların CSS kurallarını taşımaktır.Sayfa içerisine yerleştirilen CSS kodlarından tek farkı sadece bir sayafaya değil çağrıldığında bütün safalara etki etmesidir.Bir css dosyası içinde sadece css kodları bulunur.

ÖRNEĞİN: bir css dosyası içeriği a{font-color:blue;margin:px;}

CSS dosyası oluşturmak için kodları bir not defterine yazıp uzantısını .css diye yapmamız yeterlidir. Oluşturduğumuz bu CSS i HTML sayfasına eklemek için:

è<head> kod bölümüne è <link rel=”stylesheet” type=”text/css” href=http://dosyanın bulunduğu adres /stildosyaadı.css>

Yazmamız yeterlidir.

bunları örneklendirelim : css kullanımı
<title>CSS NEDIR NASIL KULLANILIR </title>
<style>
h1{color:green;text-aling:center;}
p{color:red;font-size:24px;}
b{color:blue;font-size:36px;}
</style>
</head>
<body>
<h1> CSS NEDIR NASIL KULLANILIR ?</h1>
<p>CSS, Cascading Style Sheets=Katmanli Biçim Sayfalari anlamina gelmektedir.HTML nesnelerini belirli bir standart üzerine biçimlendirmek için kullanilir.
</p>
<b> CSS sitedeki sayfalarin görüntüsünü düzen olarak tek düze yapmak ve tüm içerigi benzer sekilde biçimlendirmek için kullanilir.</b>
</body>

CSS ÇAĞIRMA:
<title>CSS çagirma</title>
<link rel=stylesheet type=text/css href=benim.css>
</head>
<body>
<div class="css">
<h2> CSS dosyasini çagirma </h1>
<p> CSS dosyasi uzantisi .css olan dosyadir. Amaci çagrildigi bütün sayfalarin CSS kurallarini tasimaktadir.</p>
</body>

MARGİN NEDİR? NASIL KULLANILIR?

Elementin komşu elementlere olan uzaklığını belirtmek için kullanılır.

kullanımı:

<title>MARGIN</title>
<style>
u{color:red;margin:32px;}
h5{color:green;}
</style>
</head>

<body>
<h5> MARGIN </h5>
<b> <u>Elementin komsu elementlere</u>olan uzakligini belirtir.</b>
</body>

PADDİNG NEDİR? NASIL KULLANILIR?

İçeriğin elementin sınırlarına olan uzaklığını belirlemek için kullanılır.

Kullanımı: a{padding:4px;}:

26 Ağustos 2013 Pazartesi

16.08.2013

yukarıdaki görselin kodlarının yazılması...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.ust{width:800px; height:215px; background:purple;}
.rsm img{float:left;}
.rsm img {width:150px;height:215px;}

  .ust ul{float:right;}
   .ust ul li {float:left; list-style:none; margin:15px 10px 0 10px;color:#FFFFFF;}
    .ust ul li a{color:#FFFFFF; font-size:12px, font-family:Verdana; text-decoration:none;}
    .ust ul li a:hover{ color:#FFFFFF;}

.orta {background:pink; width:800px;height:800px;}
.baslik{width:600px;height:200px;color:#FFFFFF;font-weight:bold;float:right;}
.ortaa{width:600px;height:200px;color:#FFFFFF;font-weight:bold;float:right;}
  .sol{width:200px; border-right:1px dashed #FFFFFF;color:#FFFFFF;}
  .orta p{float:right;}
</style>

</head>
<body>
<div class="cerceve">

<div class="ust">

<div class="rsm">
<h1> <img src="abc.jpg"/> </h1>
</div>
  <ul>
   <li><a href="#">Ana sayfa</a></li>
   <li><a href="#">Hakkimda</a></li>
   <li><a href="#">Iletisim</a></li>
  </ul>
</div>
<div class="orta">
<h1 class="baslik">Staj Gunlugum</h1>
<p class="ortaa">Merhaba arkadaslar ben Gulseher Erzurumluyum Erzincan Universitesi Tercan MYO da bilgisayar bolumu okudum mezun olmam icin staj yapmam gerekiyor.
  Stajimi Ataturk Universitesi BAUM da yapiyorum...<img src="abcd.jpg" align="right"/>
  Bugunler stajimin ilk gunleri...Bu staj yerini ayarlamak icin cok caba harcadim, bir seyler ogrenecegimden de eminim yeni yeni basladik odev yapmaya bakalim
  insallah basaririm...Bugunler stajimin ilk gunleri...Bu staj yerini ayarlamak icin cok caba harcadim, bir seyler ogrenecegimden de eminim yeni yeni basladik odev yapmaya bakalim
  insallah basaririm...Bugunler stajimin ilk gunleri...Bu staj yerini ayarlamak icin cok caba harcadim, bir seyler ogrenecegimden de eminim yeni yeni basladik odev yapmaya bakalim
  insallah basaririm...Bugunler stajimin ilk gunleri...Bu staj yerini ayarlamak icin cok caba harcadim, bir seyler ogrenecegimden de eminim yeni yeni basladik odev yapmaya bakalim
  insallah basaririm...</p>

<div class="sol">
   <ul>
   <br>
    <li><a href="https://www.google.com.tr/">Google</a></li><br>
    <li><a href="http://tr.wikipedia.org/wiki/Ana_Sayfa">Vikipedi</a></li><br>
    <li><a href="http://www.youtube.com/?gl=TR&hl=tr">Youtube</a></li><br>
    <li><a href="http://www.erzincan.edu.tr/">Ezincan Universitesi</a></li><br>
    <li><a href="http://www.haberler.com/">Haberler</a></li><br>
    <li><a href="https://tr-tr.facebook.com/">Facebook</a></li><br>
   </ul>
  </div>
</div>
</div>
</body>
</html>

15.08.2013

Aşağıda verilen görselin kodları hakkında araştırma yapılması.

Hangi kodları kullanabilirm diye küçük bir araştırma yaptım.başlık,stil ,çerçeve.link verme ve resim ekleme gibi basit kodalrla bu görseli oluşturabilirm :)

14.08.2013

Notpad++ programı ile 13.08.2013 te araştırdığımız kodları içeren basit bir site yapmamız istendi.
Önce internetten notpad++ programını indirdim. sonra şu kodları yazmaya başladım...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>ILK ÖDEV SITEME HOS GELDINIZ... </title>
<style type="text/css">
.stil{width:800px;height:100px;background-color:#FFCCFF ;color:#9966FF;margin:0px auto;padding:10px;}
</style>
</head>
<body>
<center><div class="stil"><strong><font size="36px"> ASKALE NIN SESI</font></strong></div></center><br>
<p>Askale web sitesine hos geldiniz...</p>Bu sitemizin <span style="color:red">ilk asamasidir</span> ilerleyen zamanlarda daha profesyonel bir site karsiniza çikacaktir...<br>
<br>
<b>Faydali Siteler</b>
<ul type="disc">
<li><a href="http://www.google.com.tr/?gws_rd=cr"> GOOGLE </a>
<li><a href="http://tr.wikipedia.org/wiki/Ana_Sayfa"> VIKIPEDIA </a>
<li><a href="http://www.haberler.com/"> HABERLER</a>
<br>
<br>
<font color="green"> LISELER </font> <br>
<input type="radio" name="liseler" id="lise1" />
<label for="lise1">ASKALE IMKB LISESI</label>
<br />
<input type="radio" name="liseler" id="lise2" />
<label for="lise2">ASKALE ANADOLU LISESI</label>
<br />
<input type="radio" name="liseler" id="lise3" />
<label for="lise3">ASKALE MESLEK LISESI</label>
<br />

</body>
</html>

İŞTE PROGRAMIN GÖRSELİ...

13.08.2013

Html nedir?
<head>,<title>,<script>,<style>,<body>,<a>,<strong>,<b>,<p>,<ul>,<li>,<label>,<span>
<div>,<doctype> etiketleri ne anlama gelir ?

HTML NEDİR ?

Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. HyperText Markup Language =Yüksek/ileri Metin İşaretleme Dili anlamındadır. Bütün web sayfalarında en temel yapıyı HTML kodları oluşturmaktatır.HTML kodlarına etiket(tag) adı verilir.Bu etiketler < > işaretleri arasında yer alır.HTML etiketleri sayfa içeriğini biçimlendirmekle görevlidir.Dolayısıyla HTML etiketleri ile içerik iç içe olmak zorundadır...

<head> ..........</head> :

Genelde görüntülenmeyen bilgi ve farklı işlevlere sahip kodlamalar ve parametrelerin tanımlandığı kısımdır.Bu veriler belgenin konusu, başlığı, url si, içeriğin yazıldığı dil ve yapısı gibi bilgilerdir. İşte head kodları bu bilgileri tarayıcıya aktarır ve bu bilgiler ziyaretçiye asla gösterilmezler...

<title>...........</title> :

Sayfa başlığını belirtildiği yerdir. Tarayıcı penceresinde başlık çubuğunda yazan başlık görüntülenir.

<script> .......... </script> :

Vbscript,JScript ve ya JavaScript kodalrının yazılacağı bir alandır. Gerektiğinde <BODY> etiket sınırları içerisinde kullanılabilir.

<style>..........</style> :

Stiller sayfadaki çeşitli nesneleri topluca biçimlendiren yapılardır.

<body>..............</body> :

İçerik ve biçim etiketlerini kapsayan etikettir. Sayfada görüntülenen tüm yazı, tablo resim vb. gibi materyeller bu bölümde yer alır.

<strong>.........</strong> :

Vurgulama amaçlı kullanılır.Koyu ve kalın metin etkiye sahiptir.

<a>......</a> :

Bağlantı eklemek için kullanılır.

<b>.........</b> :

Metni kalın ve koyu yapar.

<p> .....................</p> :

Metin içerisinde parağraf oluşturmak için kullanılır.

<ul>......</ul> :

Numara ve harfler olmaksızın çeşili şekillerde liste oluşturmak için kullanılır.

<li>.......<li> :

Listeleme yapar.

<label> ...........</label> :

Form kontrolleri için tanımlayıcı etiket oluşturulmasını sağlar.

<span>..................</span> :

Satır içerisindeki verileri gruplamak için kullanılır.

<div>.......................</div> :

Sayfa içerisinde katman oluşturmak için kullanılır.

<doctype>...............</doctype> :

Html ve ya (x)html dökümanlarının tipini göstermek için kullanılır.

12.08.2013 staj başlangıç tarihi. Tanışma faslı ardından staj içeriği konuşması yapıldı ve ilk gün ödevi verildi.
ÖDEV: Kendi şahsımız adına bir blog hesabı oluşturma.

Blog a kısacası günlük diyebiliriz...:)