Teknoloji - Bilişim - İnternet - Webmaster » HTML Arşivi http://bilginadam.com setgls@gmail.com Tue, 30 Mar 2010 18:30:03 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 HTML Kodları ,Text / CSS, ASP ASP’ye Giriş , Programlama Ders Notları http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-asp-2.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-asp-2.htm#comments Tue, 30 Mar 2010 16:58:52 +0000 Bilgin adam http://bilginadam.com/?p=519 <html>
<head>
<style type=”text/css”>
body
{
background-image:url(’sembol.jpg’)
background-repeat:no-repeat;
background-attackment:fixed;
background-position:center;
}
p{background-color:rgb(255,0,55),}
</style>
</head>
</body><p align=center>bu arkaplan örnegidir</p></body>
</html>

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-asp-2.htm/feed 0 HTML Kodları , ASP ASP’ye Giriş , Programlama Ders Notları http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-asp.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-asp.htm#comments Tue, 30 Mar 2010 16:54:07 +0000 Bilgin adam http://bilginadam.com/?p=517 <htlm>
<body>
<%
dim sayac
for sayac=0 to 100
response.write(sayac)
response.write “<br>”
next
%>
</body>
</htlm>
………………………………
<htlm>
<body>
<%
dim sayac
dim isim
dim bosluk
bosluk=” ”
isim=”aladdin”
for sayac=1 to 20
response.write(bosluk+isim)
response.write(“<br>”)
bosluk=bosluk+”.  ”
next
%>
</body>
</html>

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-asp.htm/feed 0 Html ilk sayfa yapmak-isim yazma-kayan yazı yapma , index.html http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-ilk-sayfa-yapmak-isim-yazma-kayan-yazi-yapma.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-ilk-sayfa-yapmak-isim-yazma-kayan-yazi-yapma.htm#comments Thu, 25 Mar 2010 14:59:29 +0000 Bilgin adam http://bilginadam.com/?p=411 <html>

<body bgcolor=rgb(200,200,200)>

<head>
<style>
h1 { color:#80080;text_align:center;}
</head>
</style>

<title>İlk sayfam</title>

<body>
<p>
<font face=”Old English Text MT” size=”20″>
Merhaba
</font>
<br>
</p>

<font face=”The new romans” size=”15″>
Hosgeldiniz

</font>

<h1>
engin
</h1>

</body>
</html>

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-ilk-sayfa-yapmak-isim-yazma-kayan-yazi-yapma.htm/feed 0 Html Resim Ekleme Kodları Ödev Arşiv Kaynak Kod Dizin http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-resim-ekleme.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-resim-ekleme.htm#comments Thu, 25 Mar 2010 14:54:03 +0000 Bilgin adam http://bilginadam.com/?p=408 <html>
<body>
<a href =”F:\Klasör\x.jpg”> <img border=”5″  src=”F:\KlasörAdı\x.jpg” width=”200″ height=”300″>
</a>
</body>
</html>

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-resim-ekleme.htm/feed 0 CSS , Selektörler , ID , Style Type , Pseudo Classes , CSS 2 , Font , External , Import http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-3.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-3.htm#comments Tue, 16 Mar 2010 19:38:10 +0000 Bilgin adam http://bilginadam.com/?p=398 Selektörler (seçiciler):

Bir style sheet ifadesindeki ilk öğelere “selektör” adı verilir. Bu bir HTML etiketi olabileceği gibi, SINIF (class) veya KİMLİK (ID) niteliğinde tasarımcı tarafından tanımlanabilen selektörler de olabilir. Eğer ilk öğe bir HTML etiketi ise bu “HTML Selektörü” olarak adlandırılır. Şimdi bu selektörleri içeren style sheet ifadelerine bir bakalım; Bu stil ifadeleri harici bir .css dosyasında olabileceği gibi, <head> ..</head> etiketleri arasına da konabilir

Yukarıdaki stil ifadelerinde görüldüğü üzere;

. işareti ile başlayan selektörlere sınıf (class),

# ile başlayan selektörlere ise kimlik (ID) tipinde selektör adı verilir.

Buradaki örnek stil ifadelerinin bildirim (deklerasyon) kısımlarında ise CURSOR özelliğine birtakım değerler atanmaktadır. Bunların herhangi bir web dökümanı içerisinde uygulanmasına gelince, kod satırları şöyle olabilir;.

Yukarıdaki kod satırları web dökümanının <body> .. </body> etiketleri arasında yer almalıdır

<STYLE TYPE=”text/css”>

body { cursor: crosshair }

.yardim { cursor: help }

#bekle { cursor: wait }

</STYLE>

<body>

<P STYLE=”color: #c0c0c0″><b>AÇIKLAMA: Mouse imlecini aşağıdaki cümlelerin üzerine götürünüz!. imleçteki değişimlerr dikkat ediniz</b></p>

<br>

<font size=”5″>

<span>Bu cümlede imleç değişir.</span>

<br><br>

<P>Bu cümlede de imleç değişir.</p>

</body>

Bazı Özel Karakterler:

Yukarıda anlattığımız selektörler yerine * ve > olmak üzere 2 joker karakteri kullanabiliriz… Örneğin;

*{font-color: red}

Bu ifade sayfadaki bütün etiketlere “kırmızı font rengi” stilini uygular.

> karakteri ise çocuk selektörler tanımlar. Örneğin;

ul > li {list-style-type: decimal}

Bu ifade UL etiketini ebeveyn olarak kabul eder ve UL içindeki LI öğelerini çocuk selektör olarak görür. Böylece sadece UL listelerindeki LI öğelerine stil belirtimi uygulanmış olur.

Pseudo Classes – Sınıfımsılar

CSS’de kullandığımız kodlarda da bazı yetersizlikler vardır. Bunlar normal etiketlerle karşılanamayan durumlar için düşünülmüş kontrol elemanlarıdırlar. Bütün sınıfımsıların önünde : (iki nokta üst üste) işareti bulunur.

Örnek:

A:visited {color: maroon}

ifadesi sınıfımsı kullanımına dair bir örnek teşkil eder. CSS2 ile tanımlanmış sınıfımsıları (pseudo-classes) aşağıdaki tabloda görebiliriz;

:first-child Bir öğenin ilk çocuk öğesi
:first-line Bir paragrafın biçimlendirilen ilk satırı
:first-letter Bir paragrafın ilk harfi
:link Henüz ziyaret edilmemiş linkler
:visited Ziyaret edilmiş linkler
:hover İmlecin o anda üzerinde durduğu öğe
:active O anda etkin olan öğe
:focus Odakta olan öğe
:lang Geçerli dil tanımı
:before İçeriği bir öğeden önceye konumlandırır
:after İçeriği bir öğeden sonraya konumlandırır

Örnek:

<STYLE TYPE=”text/css”>

.ilksatirbuyuk:first-line{

font-size:310%;

font-weight:bold;

}

</STYLE>

Body bölümünde yer alacaktır.

<p align=”justify”>

Cim Bom Galatasaray

</p>

<br>

<p align=”justify”>

Cim Bom Galatasaray! Dikkat edelim class ifadesi yok!

</p>

ÖZELLİKLER:

Bir web dökümanının tasarım elemanları (stil öğeleri) daha önce de ifade ettiğimiz gibi döküman gövdesi, arka planlar, başlıklar, yazılar, fontlar, tablolar, listeler, renkler ve görsel biçimler, bağlar, efektler, imaj, kutu modeli, katman vb. ile bunların sayfa üzerindeki yerleşimleri gibi birtakım nesnelerden oluşur. CSS içinde bu nesneleri kontrol edebilmek için belirli sayıda “PROPERTIES” (Özellik) tanımlanmıştır. Web sayfası oluştururken yapılan stil belirtimlerinde, yukarıda sözünü ettiğimiz tasarım elemanlarıyla ilişkilendirilebilen özellikler baz alınarak, bu özelliklere birtakım değerler (values) atanır. Örneğin FONT (EN ÇOK KULLANILAN ÖZELLİK) öğesini ele alırsak, bu öğenin özellikleri ve bu özelliklere atanabilecek değerler şöyledir;

Font Özellikleri:

font-family arial, verdana, times, courier vs.
bold
font-style normal, italic, oblique, inherit
font-size xx-small, small, medium, large, x-large, xx-large, larger, smaller, inherit, geçerli yüzde, geçerli uzunluk
font-variant normal, small-caps, inherit
font-weight normal, bold, bolder, lighter, 100-900, inherit
font-stretch normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condenced, expanded, semi-expanded, extra-expanded, ultra-expanded, inherit
font-size-adjust none, geçerli sayı, inherit
font font-style, font-variant, font-weight, font-size, line-height, font-family, inherit

Style Sheet Kullanım Metotları:

Bir HTML dökümanında CSS kodlaması yapmanın, yani stil tanımlamasında bulunmanın 4 farklı metodu vardır. Bunlar Inline (İç), Embedded (Gömülü), External (Harici Bağlantı) ve Importing (İthal Etme) şeklinde isimlendirilmektedir. Tabii bu dört metodun hepsinin bir arada kullanıldığı bir beşinci metod’tan da sözetmek mümkün. Buna da “karma metod” adını verebiliriz.

  1. 1. 1. INLINE (İç) Metotu:

Bu yöntemle; bir HTML dökümanı içerisinde, stili belirlenebilen herhangi bir HTML etiketinin kendi içine stil tanımlaması yapılabilir. Bu metotta çift tırnak olamsına dikkat edilmelidir. <head>…</head> etiketleri içine yazılması gibi durum söz konusu değildir.
Örnek:

<p style=”color: blue”> … </p>

Böyle birşey yaptığımızda, yani bir HTML etiketine stil ataması yaptığımızda tarayıcılar tarafından bu atama en büyük öncelikle dikkate alınır. Diğer stil belirtimleri geçersiz olur. Bu yöntemi kullanabilmek için ayrıca 2 etiketten yararlanılır. Bunlar <DIV> ve <SPAN> etiketleridir.

<div style=”font-color: blue”>

…

</div>

ve diğer etiket,

<span style=”font-color: blue”>

…

</span>

Bu iki etiket arasındaki fark şudur;

<div> etiketi blok düzeyinde işlev görür. Yani kapsadığı aralıktaki bütün öğeler bir blok mantığıyla ele alınır ve bu aralıkta bütün HTML öğeleri yer alabilir. Ayrıca <div> etiketi sonlandığında bir satır atlatır. <span> etiketinde böyle bir şey sözkonusu değildir. Bu yüzden <span> etiketini cümle içlerinde rahatlıkla kullanabiliriz.

2- 2- EMBEDDED (Gömülü) Metot:

Bu yöntemde stil tanımlamaları <head>…</head> etiketleri arasında yer alacak şekilde yapılır. Ve bu amaçla <style> etiketinden yararlanılır. Örneğin;

<style>

<!–

body {       background: #c0c0c0;

background-attachment: fixed;  }

–>

</style>

Buradaki ‘<!–’ ve ‘–>’ ifadeleri stil kodlarını eski web tarayıcılardan saklamak için kullanılmaktadır. BODY ifadesi stil tanımlamasının selektörü, diğer ifadeler ise bu selektöre atanan stil bildirimleridir.

3- 3- EXTERNAL (Linked – Harici Bağlı) Metot:

CSS kodları çok uzun olabilir. Bunun için CSS kodlarımızı ayrı bir not defteri sayfasında yazarız ve uzantısını .css yaparız. Daha sonra bunu sayfamıza bağlarız.

Sadece sayfamızın başına yazacağımız CSS etiketlerini Notdefterine yazmak ve uzantısını .html değil de .css yapmak.

“ali.css” dökümanını, bağlanacak olan “.html” dökümanlarınızın olduğu klasöre kopyalanır. Ve bu dosyanın sayfaya eklenmesi için aşağıdaki ifade yazılır;

<link rel=”stylesheet” href=”ali.css”>

etiketini sayfanızın <head> </head> etiketleri arasına yazılması gerekir.Böylece .css uzantılı dosyayı sayfanıza link yolu ile eklenmiş olur.

Bu yöntemi kullandığımızda bütün bir siteyi stil tanımlamaları açısından denetim altına almış oluruz. Örneğin sitemizdeki tüm sayfaların arkaplan rengini değiştirmek istediğimizde “ali.css” dosyasındaki tek bir değişiklikle bunu gerçekleştirebiliriz. Aksi durumda sitedeki tüm sayfalar için bunu tek tek yapmak zorunda kalırdık.

4- 4- IMPORTING (İthal Etme) Metotu:

Bu yöntemde ise kullanılmak istenen stil tanımlamaları ayrı bir dosyadan ithal edilir. Bu amaçla harici bir stil dosyasını ithal etmek için @ import komutu kullanılır. Örnek vermek gerekirse; web sayfasının <head>…</head> etiketleri arasına aşağıdaki gibi bir kod satırı yerleştirilir;

<STYLE>

<!– @import url;

… stil kodları

–>

</STYLE>

NOT: Eğer bir web sayfasında yukarıda saydığımız bütün yöntemleri de birarada kullanırsak bunların tarayıcılar tarafından okunma sırası şu şekildedir;

Harici stil -> Gömülü stil -> İç stil

Ancak, okunan stil tanımlamalarının geçerlilik sırası ise tam tersidir;

İç stil -> Gömülü stil -> Harici stil

Yani CSS uyumlu bir tarayıcı herhangi bir web dökümanında bütün stil yöntemleri de uygulanmışsa ilk olarak harici dosyayı, sonra gömülü tanımlamaları ve daha sonra da iç stil tanımlamalarını okur. Ve iş sayfayı ekranda göstermeye gelince öncelikle “iç stil” tanımlamalarını geçerli kılar. Sonra gömülü stildeki tanımlamaları, son olarak ta harici dosyadaki tanımlamaları dikkate alır. Görüldüğü üzere burada iç stil gömülü stile baskın rol oynamaktadır. Aynı şekilde gömülü stil de harici stil üzerinde baskın olur. Böyle bir durumda, tanımladığımız stillerin değerlendirilmesi açısından, tarayıcı ile web sayfası arasındaki ilişkide bir nevi “basamaklama” olayı sözkonusudur. CSS’deki “Cascading” kelimesi de zaten buradan kaynaklanmaktadır.

CSS Standartları ve W3C:

CSS’nin gelişimi W3C tarafından kontrol edilmekte olup, şu ana kadar Cascading Style Sheets hakkındaki gelişmeler CSS1 ve CSS2 şeklinde iki versiyonda (level) toplanmıştır. CSS3 için ise konsorsiyumun çalışmaları halen sürmektedir. CSS hakkında herhangi bir hususta tereddüte düştüğünüzde ilk bakacağınız yer bu konsorsiyumun teknik belgeleri olmalıdır.

World Wide Web Konsorsiyumu için;

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-3.htm/feed 0 CSS , Kod Arşivi , Ödev , Kaynak , Örnekler , CSS Örnekleri http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-ornekler.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-ornekler.htm#comments Tue, 16 Mar 2010 19:33:43 +0000 Bilgin adam http://bilginadam.com/?p=395 Çok kullanılan bazı örnekler:

Örnek:

<html>

<head>

<style type=”text/css”>

<!–

p {font-family: Verdana; font-size: 10px; color:#000000}

.bold {font-family: Verdana ;font size:10px; font-weight: bold;

color:#000000}

.yesilyazi {font-family: Verdana; font size:10px; color:

#00CC33}

.altinyazi {font-family: Verdana; font size: 10px; color:

#FF6633}

.maviyazi {font-family: Verdana; font size: 10px; color:

#006699}

.italik {font-family: Verdana; font size: 10px; color: #000000;

font-style: italic}

.alticizili {font-family: Verdana; font-size: 10px; color:#000000;

text-decoration: underline}

–>

</style>

<head>

<body>

<p> Galatasaray UEFA kupasını

<span class=”bold”>(2000 yılında) </span>

müzesine götürdü

<span class=”yesilyazi”> Bütün Avrupanın takdirini kazandı.</span>

<span class=”altinyazi”> Daha sonra Süper Kupaya sahip oldu</span>

<span class=”alticizili”> (2001 yılında)

</span>

<span class=”maviyazi”> Daha birçok başarıya imza  atacak</span>

<span class=”italik”>Herkes Galatasaraylı olacak</span>

</p>

</body>

</html>

CSS denen şeyin, sayfanın <head> </head> bölümde parantezler ile yaptığımız kodlamayı görüyoruz.Sayfamızda <p>(paragraf) ile kodladığımız kısımlar Font ailesinden Verdana, Size (genişliği) 10 px ve rengi de Siyah olmak üzere belirlendi. Ve sayfa da <p> kodlamasını yaptığımız da hep aynı şekilde görünecektir.

Örnek:

<a href=”deneme.htm”> Dinamik CSS link denemesi </a>

<html>

<head>

<style type=”text/css”>

<!–

a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color:

#000000; text-decoration: none}

a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color:

#FF0000; text-decoration: none}

a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color:

#FF0000; text-decoration: underline}

a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color:

#000000; text-decoration: none}

–>

</style>

</head>

<body>

<p> <a href=”deneme.htm”> Dinamik CSS link denemesi </a> </p>

</body>

</html>

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-ornekler.htm/feed 0 CSS , Kod Satırları , Gruplandırma , Inheritance http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-1.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-1.htm#comments Tue, 16 Mar 2010 19:30:04 +0000 Bilgin adam http://bilginadam.com/?p=393 CSS kod satırlarını (style sheet belirtimlerini) gruplandırmak;

Aynı stil belirtiminde bulunacağımız selektör etiket sayısı birden çok ise, örneğin aşağıdaki kodlamada olduğu gibi;

H1{font-weight:bold}

H2{font-weight:bold}

H2{font-weight:bold}

Bu 3 satırlık kodlama biçimini GRUPLANDIRMAK suretiyle aşağıda görüldüğü gibi tek satır halinde daha kolay bir şekilde ifade etmek mümkündür.

Miras Kavramı (inheritance)

Miras kavramı; bir etikete atanan bir stil tanımının ilgili etiket kapsamı içinde kullanılan bir başka etiket tarafından aynen üstlenilmesi olayıdır. Örneğin;

Stil ifadesi;H1 {color: green} olsun,HTML kodu ise;

<H1>Bu cümlede H1′in stilini miras alan bir <EM>etiket</EM> var.</H1>
şeklinde olsun.

Burada kullandığımız <EM> etiketi <H1> etiketinin yeşil renk stil belirtimini aynen üstlenir. Yani miras devralır. Kodumuz yazarken miras kavramını göz önüne alarak yazmalıyız.

Bir stil ifadesine açıklama satırı koymak;

Stil ifadelerinde açıklama satırı kullanmak için /* ve */ işaretlerinden yararlanılır. Örnek kod aşağıda;

H1 {color: red}    /* H1′i kırmızı yap */

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css-1.htm/feed 0 CSS , Web Style Sheets , Cascading Style Sheets , CSS Nedir , Dersler , Arşiv, Kod dizini http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css.htm#comments Tue, 16 Mar 2010 19:25:07 +0000 Bilgin adam http://bilginadam.com/?p=389 Web Style Sheets” Kavramı ve  CSS (Cascading Style Sheets = Yığılmalı Stil Kağıtları):

CSS (ingilizce açılımı Cascading Style Sheets olan Türkçeye çevrildiğin de ise Yığılmalı Stil Kağıtları) bizi HTML’in kalıplaşmış olan stil etiketlerinden bir bakıma kurtarıyor.

CSS kod kümesi sayfamızın <head> </head> etiketleri arasına yazılıyor.

“Style Sheets” kavramı oldukça geniş bir teknolojik yaklaşımı ifade ediyor. Açıkçası CSS konusu bu teknolojinin sadece bir bölümünü oluşturmakta olup, Style Sheets teknolojisi çerçevesinde CSS’den başka XSL, XSLT, DSSL gibi biçimlendirme teknikleri ve dillerinden de söz etmek mümkündür.

Bir web sayfasının tasarım elemanları (stil öğeleri) denilince aklımıza şunlar geliyor;

  • ·         arka planlar,
  • ·         başlıklar, yazılar, fontlar,
  • ·         tablolar,
  • ·         listeler,
  • ·         renkler ve görsel biçimler,
  • ·         bağ renkleri, efektler,
  • ·         imaj, katman vb. nesneler ve bunların sayfa üzerindeki yerleşimleri vs.

“Web Style Sheets” kavramı; işte bu tasarım elemanları üzerinde tam denetim sağlamak ve web dökümanlarının görünümlerini tayin etme işinde tasarımcılara ekstra güç kazandırmak için geliştirilmiş bir teknolojik yaklaşımı ifade etmektedir.

“Style Sheets” teknolojisini kullanmak demek, stiller belirlemek suretiyle belge biçimlendirmek demektir. Burada web dökümanlarının nasıl görüneceğini tayin etmek üzere geliştirilmiş bir takım kurallar sözkonusudur.

W3C’nin sitesinde “Web Style Sheets” teknolojisi çerçevesinde CSS, CSS1, CSS2, CSS3, CSS-P, XSL, XSLT, XPath, DSSL gibi kavramlardan sözedilmekle birlikte temelde 2 “Style Sheet” dili olduğu ifade edilmektedir.

Bunlar;

1-    1-     CSS (Cascading Style Sheets),

2-    2-      XSL (eXtensible Style Language)

Kursumuzda CSS konusunu ele alacağız.

CSS (Cascading Style Sheets)

CSS; çok daha etkin web sayfası biçimlendirebilmek amacıyla HTML’ye destek olması için oluşturulmuş bir işaretleme dilidir.

CSS’ye, herhangi bir web dökümanındaki yazı, başlık, font, arkaplan (background), imaj, katman, tablo ve liste gibi tasarım elemanlarının (stil öğelerinin) HTML kodlamasındaki uygulanış ve belirtim kurallarını belirleyen bir “web style sheets” teknolojisidir. Bu teknolojinin geliştirilmesindeki en temel amaç, HTML’nin sayfa biçimlendirme işlevlerini ekstra katkılarla arttırmak ve tasarımcıya çok daha etkin sayfa yapma imkanları sağlamaktır.

HTML belgesi (web sayfası) tarayıcıya yüklendiğinde yaptığımız stil tanımlamaları deyim yerindeyse üst üste yığılarak (basamaklandırılarak) ele alınır ve stil tanımlamasındaki yönteme bağlı olarak değerlendirilir. Yani belgedeki stil tanımlamalarının nerede yapıldığına bakılarak komutlar bir nevi basamaklandırmak suretiyle kademe kademe işlenir ve sayfa ekranda öyle gösterilir. Burada CSS komutlarının tarayıcılar tarafından işletilmesinde bir basamaklandırma modeli sözkonusudur. Bu nedenle stiller belirlemek suretiyle belge biçimlendirme olayına “Cascading Style Sheets” adı verilmiştir.

CSS’nin belli başlı faydaları;

-   daha iyi sayfa kontrolu (tek dosya ile tüm sitenin kontrol edilebilmesi imkanları),

-          -          kolay renk yönetimi,

-          -          etkin kenar boşluğu denetimleri,

-          -          metin biçimlendirme, gölgeleme olanakları,

-          -          geçişler gibi görsel etkiler yaratabilme olanakları,

-          -          nesne konumlandırma kolaylıkları,

CSS Syntax Sözdizimi – Genel Kavramlar

CSS kodu oluşturmanın en basit yolu HTML kodlamasında olduğu gibi herhangi bir metin editöründe (NotePad vs.) elle kodlama yapmaktır. Çünkü harici CSS dosyaları (örneğin “style.css”) da dahil olmak üzere CSS kodları da HTML dökümanları gibi ASCII (plain-text) formatındadırlar. Bu nedenle CSS kodlamasını basit text editörleri yardımıyla yapılabilir.

HTML ile web sayfası tasarımcılığında CSS kavramı önemli yer tutar. Bu nedenle iyi bir tasarımcı olmanın koşullarından birisi de CSS konusunu bütün yönleriyle iyice öğrenmektir.

Bir style sheet ifadesi, selektör ve bildirim olmak üzere 2 ana kısma ayrılır. Bildirim kısmı da yine aynı şekilde özellik ve değer olmak 2 bölümden oluşur. Bu söylediklerimizi aşağıda şematik olarak görebiliriz.

En yalın CSS kodlaması;

HTML’de yer alan ve stili belirlenebilen yani “selector” kimliği taşıyan etiketlerden herhangi birisini, örneğin H (Heading) etiketini baz alarak CSS kodlamasındaki en yalın hali ifade eden bir kod satırı yazalım. Aşağıda bildirim ve selectör kavramları gösterilmektedir. SELEKTÖR (selector) bir style sheet bildiriminin ilk öğesine verilen isimdir. Selektör CSS’lerde hangi etiket ile ilgili işlem yapacağımız seçmeye yarar.

Bildirim (decleration) kısmının da kendi içinde ÖZELLİK ve DEĞER olarak 2 temel bileşene ayrıldığını görmekteyiz.

H1{color:blue}

color:özellik(property)

blue:değer (value)

Yukarıda belirttiğimiz CSS kod satırına (Style Sheet) dikkat ederseniz, temel bileşenlerin biraraya getirilmesinde kullandığımız { } ve : şeklindeki noktalama işaretlerinin de bu yalın haldeki kod satırının tamamlayıcı öğeleri olduğunu görürüz.

Burada birbir önemli husus da; <STYLE> … </STYLE> etiketi arasındaki stil ifadelerinde, değer ataması yapmak için yazılan sözcükler ” veya ‘ işaretleri ile sınırlandırılmaz. Örneğin aşağıdaki ifade yanlıştır. H1 {color: “blue”} CSS2 ile kurallaşan bu hususa özen göstermek gerekmektedir.

CSS kapsamında ayrıca tasarımcı tarafından oluşturulabilen ID (kimlik) ve CLASS (sınıf) türünde 2 tip selektör daha vardır.

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/css.htm/feed 1 HTML Dersleri – URL – FTP – Telnet – Hipergrafik – VII http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-dersleri-url-ftp-telnet-hipergrafik-vii.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-dersleri-url-ftp-telnet-hipergrafik-vii.htm#comments Tue, 02 Mar 2010 19:52:34 +0000 setgs http://bilginadam.com/?p=224 9. Bağlantılar Kullanmak

URL Nedir?

Web’in gerçek gücü istenen yerlere hipertext bağlantıları oluşturabilmektir. Bu istenen yerler başka web sayfaları olabileceği gibi, grafikler, sesler, dijital filmler, animasyonlar, programlar, bir ftp arşivi vb. olabilir.

WWW (World Wide Web), URL (Uniform Resource Locators) olarak bilinen bir adresleme sistemi kullanır. Bu hipertext bağlantıları (altı çizgili ve genellikle mavi olarak görünüler) çapa olarak da tanınır.

9a. Yerel Dosyalara Linkler

En basit bağlantı şekli, aynı dizinde bulunan başka bir HTML dosyasını açmaktır. Bunun için yazılması gereken HTML komutu şöyledir:

<a href=”dosyaismi.html”>bağlantıyı sağlayacak yazı</a>

“a” için anchor (çapa) ve “href” için hypertext reference diyebiliriz.

Dosya ismi başka bir HTML dosyası olmalıdır. “bağlantıyı sağlayacak yazı”, hipertext ve altı çizgili olacak yazıdır.

Şimdi, çalışmamızda yerel bir dosyaya bağlantı oluşturmak için aşağıdakileri yapacağız:

1.   Volkanlar.html dosyanızı text editöründe açın.

2.   St Helen Dağı başlığı altında şunları yazalım:

Mayıs 18, 1980’de, uzun bir dinlenmeden sonra Washington’daki bu sessiz dağ büyük patlamalar hakkında bize <a href=”msh.html”>önemli incelemeler</a> olanağı sunmuştur.

3.   Çalışmanızı kaydedin ve browserda tekrar yükleyin.

4.   Şimdi text editörünüzde yeni (New) bir sayfa açın.

5.   Aşağıdaki yazıyı girin:

<html>

<head>

<title>St Helens Dağları</title>

</head>

<body>

<h1>Mount St Helens</h1>

Tepesi ağaçlarla kaplı ve bir zamanlar sessiz olan bu dağ faaliyete geçtiğinde etrafını oyuncaklar gibi dağıttı.

</body>

</html>

6.   Bu dosyayı msh.html adında diğer dosya ile aynı yere kaydedin.

7.   Browserınızda Volkanlar.html dosyasını tekrar yükleyin.

8.   “önemli incelemeler” bağlantısını test edin. Buraya kliklediğinizde browserın msh.html dosyasını yüklemesi gerekir.

Bir Grafiğe Bağlantı

Bir grafiğe bağlantı yaparken kullanacağınız biçim dosyaya bağlantı yapma mantığıyla aynıdır. Bu sefer bağlantıyı yapan yazıya kliklediğiniz zaman karşınıza başka bir döküman yerine bağlantının sonundaki grafik gelir.

Başka Dizinlere Bağlantı

Başka dizinlerdeki dosyalara bağlantı kurmak için dosya adını yazdığınız yere dosyanın tam yerini (path) ve dosya ismini yazmanız gerekir. Mesela, bundan sonra dökümanımızda kullanacağımız resimleri /resimler adlı bir dizine koyalım. Böylece resimlerimizin sayısı arttıkça oluşacak karışıklığı azaltmış oluruz.

Şimdi çalışmamıza yeni bir resim ekleyelim:

1.   Bilgisayarınızda Volkanlar.html dosyasının bulunduğu yere “resimler” adında bir dizin açalım.

2.   Bu dizinin altına St. Helens Dağını gösteren bir resim koyalım. Bizdeki bu resimin adı “msh.gif”.

3.   “msh.html” dosyasını text editörümüzde açalım.

4.   Resime ulaşmak için gerekli yere bir bağlantı kuralım:

Tepesi ağaçlarla kaplı ve bir zamanlar sessiz olan bu dağ faaliyete geçtiğinde <a href=”resimler/msh.gif”>etrafını oyuncaklar gibi dağıttı</a>.

5.   Dökümanınızı kaydedin ve browserınızda tekrar yükleyin.

Son olarak “etrafını oyuncaklar gibi dağıttı” yazısına kliklerseniz aşağıdaki resimin ekranda görünmesi gerekir:

Gördüğünüz gibi başka dizinlere bağlantı kurarken tüm yolu yazmak yerine o an bulunduğumuz dizine göre olan konumu yazmamız yeterli olur. Aslında bu bağlantıları yaparken dosyaların yolunu root dizininden itibaren yazabilirdik. Fakat kullandığımız şeklin bir avantajı, dosyalarımızı bilgisayarımızdan başka bir yere taşıdığımızda (mesela kendi adresine) üzerinde değişiklik yapmamıza gerek kalmaz. Aksi taktirde dosyaların bulunduğu yerleri baştan yazmak gerekirdi.

Üst Dizindeki Dosyalara Bağlantı

Eğer bir dosya dökümanınızın bulunduğu dizinden daha önceki dizinlerde yer alıyorsa ne yapacağız? Gene root tan itibaren dizinleri yazmaktansa başka yollar deneyebiliriz.

Mesela şu anki dizin ve dosya sıralamamız şöyle olsun (bundan sonra dosyalarımızı bu düzene göre yazacağız):

Bu durumda, msh.html dosyasından msh.gif dosyasını görüntülemek için:

<img src=”../resimler/msh.gif”>

yazmamız gerekir. Burada kullandığımız “..” iki nokta bir önceki dizini belirtir.

Şimdi dizin ve dosyalarımızın yerinde bir değişiklik daha yapalım. “lava.gif” dosyasını “resimler” dizinin altına yerleştirelim. Bunu yaptıktan sonra dökümanımızı browserda görüntülersek lava.gif dosyasının görüntülenmediğini görürüz. Bunun sebebi artık dosyanın, bulunduğunu belirttiğimiz yerde olmamasıdır. Şimdi Volkanlar.html dosyamızı text editörümüzde tekrar açalım ve lava.gif dosyasının sayfaya eklendiği yerde şu değişikliği yapalım:

<img alt=”Volkanlar üzerine bir inceleme” src=”../resimler/lava.gif” width=300 height=259>

Bir değişiklik daha:

Artık yapmamız gereken değişiklik Volkanlar.html dosyasının ismini index.html yapmak. Neden mi? Bu dersleri bitirdiğinizde sayfanızı TR-net’teki accountunuza atacaksınız. Diyelim ki sayfanızın adresi http://www.deneme.com.tr/ . Son haliyle sayfanıza ulaşmak için yazmanız gereken adres: http://www.deneme.com.tr/Volkanlar.html dir. Fakat başlangıç dosyanızın adı index.html olsaydı adrese http://www.deneme.com.tr yazmanız yeterli olacaktı. Bunun sebebi, bir standart olarak browserlar, eğer bir dosya ismi belirtilmemişse index.html dosyasının olup olmadığına bakar, varsa bu dosyayı görüntüler.

9b. URL’ler

URL, WWW’nin bilgisayarları ve dosyaları bulmak için kullandığı yoldur. URL’in içerdikleri:

  • İnternet servisçi makinasının çeşiti
  • bir internet adresi
  • ulaştığı dosyanın dizin sırası (path)

URL’ler nasıl kullanılır?

URL’lerin kullanılma şekli şudur:

şekil://in.ter.net.adresi/dizin/alt-dizin/…/dosyaismi

“şekil” ile belirtilen yer, ulaşılan servisçi makinanın cinsini belirler:

http

“HyperText Transfer Protocol” denen dosya aktarım biçimidir.

gopher

dizinlerin bir menü şeklinde göründüğü bilgi iletim servisi

ftp

“File Transfer Protocol (FTP)” denen servisçi dosya aktarımının gerçekliştiği makinalar için kullanılır.

telnet

Servisçi makinaya uzaktan erişebilmek için kullanılan bir servistir. Telneti kullandığınızda browserınız, bunun için yardımcı bir program kullanacaktır.

WAIS

“Wide Area Indexed Server”—genelde bir konu üzerine anahtar kelimelerden arama yapan servisçi

file

kendi bilgisayarınızdaki dosyaya ulaşmak için kullanılır.

Şekil ile belirttiğimiz yerden sonra hep “://” kullanılır. Bunu ise ulaşacağımız makinanın internet adresi izler.

NOT: Bir çok servisçide büyük küçük harf arası fark vardır. UNIX ve LINUX bilgisayarları büyük küçük harf duyarlıdır ve bugün bir çok web sayfası bu bilgisayarlar üzerinden çalışır (TR-net’te olduğu gibi).

Volkanlar.html

dosyası

volkanlar.html

dosyasından farklıdır.

9c. İnternet’e Linkler Oluşturmak

Daha önce dosyalara bağlantılar oluşturduk. İnternet’teki sayfalara link oluşturmak da aynı yolla yapılır. Yapmanız gereken sadece dosya yerine yazdıklarınız yerine internet adresini yazmaktır. Yani, yazmanız gereken yaklaşık olarak şöyledir:

<a href=”URL”>Bağlantıyı sağlayacak yazı</a>

Şimdi, kendi dökümanımıza, Mars’taki volkanları gösteren bir sayfanın bağlantısını yapacağız.

1.   “index.html” dosyanızı text editörünüzde açın.

2.   Mars’ta Volkan Bölgeleri başlığının altına şunları yazalım:

<a href=”http://bang.lanl.gov/solarsys/mars.htm”>

Mars’ın</a> kendine özgü volkanik bölgeleri vardır. Bunlardan birinde ise Güneş Sisteminin bilinen en büyük volkanı, <a href=”http://bang.lanl.gov/solarsys/raw/mars/olympus.gif”>    Olympus Mons</a> yer alır.

3.   Çalışmanızı kaydedin ve browserda tekrar yükleyin.

Buna ek olarak, dökümanımızdaki referanslar kısmına volkanlarla ilgili bir kaç bağlantı daha ekleyelim. Burada listeler ile bağlantıların birlikte kullanımına dikkat edin:

<ul>

<li><A HREF=”http://www.avo.alaska.edu/”>

Alaska Volcano Observatory</A>

<li><A HREF=”http://vulcan.wr.usgs.gov/home.html”>

Cascades Volcano Observatory</A>

<li><A HREF=”http://www.dartmouth.edu/~volcano/”>

The Electronic Volcano</A>

<li><A HREF=”http://www.geo.mtu.edu/volcanoes/”>

Michigan Tech Volcanoes Page</a>

<li><A HREF=”http://www.geo.mtu.edu/eos/”>

NASA Earth Observing System (EOS) IDS Volcanology Team</A>

<li><A HREF=”http://www.geol.ucsb.edu/~fisher/”>

Volcano Information Center</a>

<li><A HREF=”http://vulcan.wr.usgs.gov/Servers/

earth_servers.html”>

Volcano/Earth Science-Oriented Servers</A>

<li><A HREF=”http://www.ngdc.noaa.gov/seg/hazard/hazards.html”>

NGDC Natural Hazards Data</a>

<li><a href=”http://www.nmnh.si.edu/gvp/”>

Global Volcanism Program (GVP) </a>

<li><a href= “http://www.soest.hawaii.edu/hvo”>

Volcano Watch Newsletter</a>

<li><a href=”http://www.jasonproject.org/JASON/HTML/

EXPEDITIONS_JASON_6_home.html”>

JASON Project VI: Island Earth</a>

<li><A HREF=”http://volcano.und.nodak.edu/”>

VolcanoWorld</A>

</ul>

Sayfanızın son hali şöyle olmalıdır:

9d. Bir Sayfanın Bölümlerine Linkler Eklemek

İnternetten sayfalara ve istediğiniz dosyaya bağlantılar kurmayı öğrendiniz. Eğer bir sayfanın/dökümanın belirli bir bölümüne (mesela 80. Satırına) bağlantı kurmak isteseydiniz ne yapardınız? HTML dilinde bu da mümkün. Bu iş için kullanılan belirteçlere “named anchor (isimlere bağlantı)” deniyor. İsimlere bağlantı yapabilmek için aşağıdaki örneği inceleyin:

<a isim=”İSİM”>Bağlantının yapılacağı yazı</a>

Buradaki “İSİM”, bağlantıyı yaparken kullanacağımız adres yerine gelecek. Bir dökümanın kendisinde (sayfanın içinde başka bir yere) bağlantı yaparken belirteç:

<a href=”#xxxx”>Hipertext gibi davranacak yazı</a>

şeklinde kullanılır. “#” sembolü browsera dökümanın geneline bakmasını ve “xxxx” isimli bağlantıya gitmesini söyler. Burada “Hipertext gibi davranacak yazı”ya kliklediğinizde browser “#xxxx” isminin olduğu yeri ekranın başına getirir.

İsterseniz dökümanımızda bu belirteci kullanarak konuyu pekiştirelim:

1.   Text editöründe index.html dosyasını açın.

2.   Giriş başlığına gelin ve şu şekilde değiştirin:

eski hali:

<h2>Giriş</h2>

yeni hali:

<h2><a name=”başlangıç”>Giriş</a></h2>

3.   Aynı mantıkla, dökümandaki diğer başlıklara da birer isim atayalım:

<h2><a name=”term”>Volkan Terminolojisi</a></h2>

<h2><a name=”mars”>Mars’ta Volkan   Bölgeleri</a></h2>

<h3><a name=”proje”>Araştırma Projesi</a></h3>

4.   Şu an dökümanınızı browserda tekrar yüklerseniz bir fark göremezsiniz, isim bağlantıları kullanıcılardan gizlenen belirteçlerdir.

Aynı dökümandaki isim bağlantılarına link eklemek

Son oluşturduğumuz isim bağlantılarını kullanabilmek için kullanıcıları sayfanın bu bölümlerine yönlendirecek hipertext linkleri oluşturmamız gerekir. Dökümanımız üzerinde çalışmaya devam edelim:

1.   Şu an açık değilse, index.html dosyasını açın.

2.   Volkanlar sayfası başlığının altındaki cümleden sonra aşağıdakileri yazın:

<hr>

<B>Bu derste…</B>

<ul><i>

<li><a href=”#başlangıç”>Giriş</a>

<li><a href=”#term”>Volkan Terminolojisi</a>

<li><a href=”#mars”>Mars’ta Volkan Bölgeleri</a>

<li><a href=”#proje”>Araştırma Projesi</a>

</ul>

3.   Dökümanı kaydedip browserda tekrar yükleyin.

Başka bir dökümana isim bağlantıları koymak

Bu yöntemle başka bir sayfanın istediğiniz satırına (<a name…> belirtecini kullandığınız yerlere) bağlantı yapabilirsiniz. Bu konunun mantığı da dosyalara ya da internetteki adreslere bağlantı yapmakla aynıdır. Bu sefer ek olarak yazmanız gereken “#” işaretidir. Deneme olarak dökümanımızın msh.html dosyasına, index.html dosyasına geri dönmek için bir bağlantı koyalım.

1.   msh.html dosyasını text editöründe açın.

2.   Sayfanın en altına (</body> belirtecinden hemen önce) takip eden yazıyı yazın:

<hr>

<a href=”index.html#başlangıç”>Volkanlar Sayfasına dönüş</a>

3.   Dosyayı save edip browserınızda görüntüleyin.

Artık sayfada Volkanlar Sayfasına dönüş yazısına kliklerseniz index.html sayfasının başlangıç bölümüne dönersiniz.

Bundan sonra önceki bilgilerinizi de kullanarak bilgisayarınızda ya da internette istediğiniz dosyanın istediğiniz bölümüne bağlantı koyabilirsiniz.

9e. Hipergrafik Linkleri

Buraya kadar bağlantıları yaparken düz text kullandık. HTML de kullanabileceğimiz bir yöntem de hipergrafik bağlantılarıdır. Bu bağlantıları kullanarak istediğimiz grafiğe bir bağlantı atayabiliriz.

Şimdi dökümanımıza dönüp bir örnek deneyelim:

1.   Text editörünüzde index.html dosyanızı açın.

2.   Long Valley başlığı altına aşağıdakileri yazın:

Bu alan seismometresi volkanların yüzeye yaptığı basınç sonucu oluşan depremlerin kuvvetini ölçer. Bulunduğu yer, 600 bin yıl önce patlamış bir volkanın platosudur.

<p>

<a href=”../resimler/seismo.jpg”><img src=”../resimler/stamp.gif”>

– [Resimin Büyük Hali] — </a>

<p>

3.   Dosyayı kaydedin ve browserda tekrar yükleyin.

Ekrandaki resime mouse’u götürürseniz bir hipertext linki olduğunu göreceksiniz.

-Alıntıdır

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-dersleri-url-ftp-telnet-hipergrafik-vii.htm/feed 0 HTML Dersleri – Grafik – Grafikler – Dosya Biçimi – VII http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-dersleri-grafik-grafikler-dosya-bicimi-vii.htm http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-dersleri-grafik-grafikler-dosya-bicimi-vii.htm#comments Tue, 02 Mar 2010 18:39:54 +0000 admin http://bilginadam.com/?p=215 8.  Grafikler ve Dosya Biçimleri

İnternet üzerinden sadece text göndermek klasik e-mail’dan farklı değildir. Grafikleri kullanmaya başladığınızda mesajlarınız çok daha çarpıcı hale gelir.

Web’in Grafik Biçimleri

Bilgisayar grafikleri için bir çok grafik biçimi vardır. PICT. GIF. TIFF. EPS. BMP. JPEG…

Bir browserın grafikleri gösterme yolu, HTML formatında grafik dosyasının yerini ve ismini belirtmektir. Bu format birçok browserın tanıyabileceği bir format olmalıdır.

Teknik olarak söylemek gerekirse, resim formatınız platform bağımsız olmalıdır. HTML’in kendisi platform bağımsızdır, sonuçta text karakterleri tüm bilgisayarlar tarafından anlaşılabilir.

Bir web sayfasında görüntülenebilen standart format GIF ya da “Graphics Interchange Format”dır. GIF, resim boyutunu sıkıştırır (dolayısıyla boyutlarını küçültür) ve sonucu internette gönderilebilecek ikilik (binary) sisteme çevirir. GIF sıkıştırması, grafik büyük boyutlarda tek renk olursa çok etkilidir; ve bir renk yatayda sürekli olursa sıkıştırma çok daha iyidir.

Web de kullanılan diğer dosya formatı JPEG’dir (ismini bu formatı dizayn eden gruptan, Joint Photographic Expert Group, alır). Eskiden, JPEG resimleri browserlarda direk olarak gösterilmez, bunun için yardımcı bir program kullanılır ve resim ayrı bir ekranda görünürdü. Bugün browserların tamamına yakını bu formatı destekler.

JPEG sıkıştırması fotoğrafik resimlerde genellikle çok etkilidir. Bazen dosya boyutunu 1/10 a kadar düşürür.

Grafik kullanırken akılda tutulması gereken bazı noktalar

Artık web sayfanızı tasarlamaya başladığınıza göre, resimlerinizi GIF ya da JPEG formatında kullanmayı öğrenmelisiniz.

  • Büyük ve çok sayıda resim sayfanızın mükemmel görünmesini sağlayabilir fakat bu resimlerin yüklenmesini bekleyecek kullanıcılar için sonuç sıkıcı ve yorucu olur. Bir tavsiye olarak, resimlerinizin boyutlarını 100k’dan  az tutmanız iyidir. Küçük boyutlar her zaman iyidir.
  • Grafik boyutlarını çok büyük tutmamanız (genişlik 480, yükseklik 300 pixeli genelde geçmemeli) iyidir, sonuçta sayfanızı görüntüleyenlerin ekran boyutları her zaman 21 inch olmaz! Verdiğim boyutların üzerindeki görüntüleri ekranda görebilmek için genelde ekranı sağa-sola ya da yukarı-aşağı kaydırmak gerekir.
  • Macintosh bilgisayarlarında birçok koyu ton Windows bilgisayarlarında görünmez.
  • Tüm resimleri bir anda göstermek yerine bu resimlere bağlantılar (link) koymak daha iyidir, bazen internete yavaş bağlantısı olanlar bu resimleri görüntülemeyerek zaman kazanmak isteyebilirler.
  • Tek bir resim (mesela bir düğme) sayfanın bir çok yerinde kullanılabilir. Bu durumda browser her defasında resimi baştan yüklemek yerine ilk yüklemeden sonra geri kalan yerlerde bunu hafızadan yükler.
  • En önemlisi, kullanacağınız resimin o sayfa için gerekli olup olmadığından emin olun. Böylece gereksiz resimlerin yüklemeyi yavaşlatmasını engellemiş olursunuz.

Büyük resimlerden oluşmuş ve güzel görünen bir sayfa tasarlamış olabilirsiniz, fakat sayfanızı görüntülüyecek insanlar yavaş bir modemden ve yavaş bir hattan sayfanıza ulaşmaya çalışıyor olabilir.

Sayfanız için grafikler bulmak

Şimdi, tasarladığınız sayfa için bir kaç resim bulmanın tam zamanı. İnternete girip konuyla ilgili biraz araştırma yapabilirsiniz. Sayfanız için yararlı olabilecek birkaç resim bulmaya çalışın. Deneyebileceğiniz bir kaç yer: http://www.yahoo.com, http://altavista.digital.com

8a. Resim Kullanımı

Resimleri Gömmek için HTML Belirteçleri

Gömülen resim, bir web sayfasının texti ile birlikte görülen

resimdir. Buradaki “Büyük M” harfi gibi.

Gömülen resim için HTML belirteci:

<img src=”dosyaismi.gif”>

Buradaki dosyaismi.gif, HTML dökümanınızın bulunduğu dizinde bulunan grafik dosyasıdır. “gömülen” kelimesiyle kastımız, bir browser bu resimi textlerin arasına yerleştirir.

Yukarıda “Büyük M”nin yanındaki yazıyla aynı satırda olduğuna dikkat edin. Eğer bu resimin kendi başına bir satırda olmasını isteseydik ne yapardık? Resmin kendi başına bir satırda görünmesini sağlamak için,

yanlızca belirtecinin başına bir paragraf belirteci yerleştirin:

<p> <img src=”dosyaismi.gif”>

Text ve Gömülen Resimin Düzeni

<img…> belirteciyle bazı özellikleri kullanarak text ve resim arasında nasıl bir düzen olmasını istiyorsanız ayarlayabilirsiniz. <img> belirtecinin içine yerleştirilen align özelliği sayesinde aşağıdaki efektleri yapabilirsiniz:

1. align=top

<img align=top src=”dosyaismi.gif>

Yazı buraya gelecek. Dikkat ederseniz, ilk satırdan sonraki yazı

boşlukları dolduruyor.

2. align=middle

<img align=middle src=”dosyaismi.gif”>

Yazı buraya gelecek. Bu sefer “align=middle” yani “orta” dediğimiz

için yazı grafiğin ortasından devam ediyor.

3. align=bottom (normal)

<img align=bottom src=”dosyaismi.gif”>

Yazı bu sefer buraya gelecek. “align=bottom” demekle yazının en

alt kısımda olacağını belirttik.

HTML Dökümanımıza Resim Yerleştirelim

Bu çalışmada, üzerinde çalıştığımız dökümana bir giriş resmi koyacağız.

1.   Çalışmanızı, açık değilse tekrar açın.

2.   Text editörünüzde volkanlar.html dosyasını açın.

3.   <h1>Volkanlar Sayfası<h1> başlığının üzerine şunu yazın:

<img src=”lava.gif”>

Bu belirteç, sayfanızın en üstüne daha önce bulduğunuz volkan resimini yerleştirir. “lava.gif”, bu dosyanızın ismidir; eğer dosyanızın ismi değişikse, “lava.gif” yerine o ismi yazmalısınız.

4.   Dosyanızı kaydedin ve browserınızda tekrar yükleyin.

NOT: Dikkat etmeniz gereken nokta, lava.gif ya da kullandığınız resim dosyası HTML dökümanınızla aynı dizinde olmalıdır. Eğer değilse, dosyanın bulunabileceği yerin tam yolunu yazmalısınız.

Resimi yerleştirdiğinizde aklınıza neden resim belirtecinden sonra <p> belirtecini kullanmadığınız gelebilir, bunun sebebi resim belirtecinden hemen sonraki belirtecin bir başlık <hN> belirteci olmasıydı; daha önce gördüğümüz gibi bir browser başlık belirteçlerinden önce ve sonra bir satır boşluk bırakır (paragraf belirtecine gerek kalmaz).

Alt=”…” Özelliği

Eğer sayfanız yanlızca text tanıyan bir browser kullanan kullanıcılar tarafından görüntülenecekse, bu kullanıcılar tarafından hiç bir resim görüntülenemez. Ya da bazen, kullanıcılar daha hızlı erişim için browserın resimleri yükleme özelliğini kapatırlar. Bu durumda <img…> belirtecinde kullanacağınız “alt” özelliği resimin yerine, orada bir resim olduğunu belirten bir boşluk koyarlar.

Bu gibi durumlarda, yanlızca text kullanan bir browser sizin yaptığınız sayfanın başlangıç kısmını şu şekilde görürler:

[IMAGE]

Volkanlar Sayfası

Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.

Bu sayede kullanıcı, sayfanın başında bir resim olduğunu anlar. Buna ek olarak <img…> belirtecini bu gibi durumlarda buraya boşluk gelmesi yerine bir text gösterecek şekilde düzenleyebilirsiniz. Mesela, düzenlediğimiz sayfada bu gibi durumlarda resimin yerine “Volkanlar üzerine bir inceleme” yazısının gelmesini sağlayalım. Bunun için textinizde şu değişikliği yapın:

<img alt=”Volkanlar üzerine bir inceleme” src=”lava.gif”>

Buradaki alt=”…” özelliği gerekli olduğunda resimin yerine verdiğiniz textin yerleşmesini sağlar. Çalışmamızın bu bölümü artık yanlız text özelliği olan browserlarda şu şekilde görünür:

Volkanlar üzerine bir inceleme

Volkanlar Sayfası

Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.

Yükseklik (height) ve genişlik (width) özellikleri

<img…> belirtecinize dahil etmek isteyeceğiniz başka iki özellik de “height” ve “width” özellikleridir. Bunlar resimin boyutlarını pixel olarak belirlemenizi sağlar. Neden? Normal olarak browserınız bu boyutlara kendi karar vermek zorundadır, eğer boyutları siz belirlerseniz sayfanızın yüklenmesi daha hızlı olabilir. Ayrıca, bazen HTML 2.0 standratlarını kullanan kullanıcıların başına gelen browserlarının çökmesi sorununu engelleyebilirsiniz.

Bu özelliği eklemek için gerekli biçim şöyledir:

<img src=”dosyaismi.gif” width=X height=Y >

Burada X resimin genişliği, Y de yüksekliğidir (pixel cinsinden).

Bizim kullandığımız “lava.gif” dosyasının boyutları 300 pixel genişlik ve 259 pixel yüksekliktir. Bu durumda son olarak şu değişikliği yağmalıyız:

<img alt=”Volkanlar üzerine bir inceleme” src=”lava.gif” width=300 height=259>

NOT: Belirtecin içinde kullanılan özelliklerin sırası önemli değildir.

-Alıntıdır

]]> http://bilginadam.com/index.php/yazilim-programlama-ve-teknoloji/html-dersleri-grafik-grafikler-dosya-bicimi-vii.htm/feed 0