- Katılım
- 2 Ağustos 2010
- Mesajlar
- 393
- Reaction score
- 0
Selamun aleyküm değerli arkadaşlar bu dersimizde resimlere devam ediyoruz yine diğer derslerimizde resim eklemeyi standart olarak gördük ve ona müteakiben resim boyutlandırma ve alt parametresini gördük bu dersimizde ise yine resim eklemeyi ve resimleri sayfamızda hizalamayı ele alacaza yalnız bu ekleme biraz daha ileri düzey olacaktır öncelikle bir önceki dersimizi aşağıdaki linkten bakmayanlar göz atsın devam edelim.
Html Resim Eklerken Klasör Yapısı
Biz şuana kadar nasıl çalıştık arkadaşlar kullandığımız resim masaüstünde tasarladığımız sayfa masaüstünde yani her ikiside aynı yerde oluyordu. Oysaki site dosyalarımız dağınık olmaması için bunları kalsör haline getiririz resimleri ve diğer materyalleri klasör şeklinde kullanırız.
Yani demek istediğim sayfamız ana dizinde iken resim image resimler yada farklı bir isimde barındırabiliriz hostingde karışıklığı önlemek için bu durumda ilk resim ekleme dersimizdeki şekil işe yaramaz yani resmin yolunu belirtmek gerekir en azından klasör yolu belirtilmeli şu klasöre gir yada şu klasörden çık şurda şeklinde belirtmeliyiz.
Bir uygulama yapalım öncesinde bilgisayarınızın masaüstüne bir klasör açın resimler adında boş bir klasör ve aşağıda vereceğim resmi ders.jpg olarak klasör içine kaydediyoruz arkadaşlar.
Bu resmi Masaüstünde Açtığınız Resimler Klasörü İçine ders.jpg olarak kaydedin
Evet resmimizi masaüstünde açtığımız resimler isimli klasörün içine attıktan sonra not defterimizi açarak aşağıdaki kodları aynen yazıyoruz ve farklı kaydet diyerek dosya adı resimklasor.html olarak sayfamızı masaüstüne kaydediyoruz arkadaşlar.
<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”Resimler/ders.jpg” >
</body>
</html>
Evet arkadaşlar resmin yolunu belirttim dedimki resim resimler klasöründe şu isimle peki klasör içine farklı bir örnekle girmeye devam edelim şimdide resimler klasörü içine dersresimleri diye bir klasör açalım ve verdiğim resmi resimler klasörününde açtığımız ders klasörünün içine taşıyalım ve bu şekilde uygulama yapalım ve kodlarımızı yazıp farklı kaydet diyerek dosya adı resimlerklasor1.html olarak masaüstüne kaydedin yine.
<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”Resimler/dersresimleri/ders.jpg” >
</body>
</html>
Html Resim Eklemede Klasör Yapısı
Evet arkadaşlar yukardaki örneklerde hep klasöre girdik çünkü resim hep alt klasörlerdeydi bu sefer tersini yapalım sayfamız klasör içinde olsun resim dışarıda bunun için ders isimli resimi tekrardan resimler isimli açtığımız klasöre alalım arkadaşlar yapacağımız sayfamızı ise resimler klasörü içe açtığımız dersresimleri klasörü içine kaydedeceğiz yani masaüstüne değil masaüstüne açtığımız resimler isimli klasörün içine açtığımız dersresimleri klasörüne kaydedeceğiz dosya adı olarak resimklasor2.html olarak kaydedelim aşağıdaki kodları.
<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”..\ders.jpg” >
</body>
</html>
evet arkadaşlar hata yapmadığınız sürece resim yine açılacaktır peki bunda ne yaptık onuda özetliyelim resmin yolunu belirtirken klasöre girmek için gireceğimiz klasör adlarını yazıyorduk bunda ise resmimiz bir üst klasörde yer aldığı için çıkmamız gerekti bir üst klasöre çıkmak içinse arkadaşlar ..\ bu parametreyi kulandık şayet 2 klasör üste çıkmak gerekseydi ..\..\ 3 gerekseydi 3 defa kullanmak gerekirdi yani her bir üst klasöre çıkmak için tekrarlamanız gerekir.
Html Resimleri Hizalama Sağa Sola Ortalama
Sayfamıda yer alan resimlerin hizalanamsını konumunu belirlemek için daha önce farklı amaçlarla anlattığım Align parametresini kullanacağız arkadaşlar onun için aşağıdaki resmi masaüstüne bayrak.jpg olarak kaydedin ve aşağıdaki kodları sizde uygulayıp farklı kaydet diyerek dosya adı bayraklar.html olarak masaüstünüze kaydedin.
Bu rEsmi Masaüstünüze bayrak.jpg olarak kaydedin
<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”bayrak.jpg” align=”left” ><br><br>
<center><img src=”bayrak.jpg” ><center><br><br>
<img src=”bayrak.jpg” align=”right” ><br><br>
</body>
</html>
evet arkadaşlar yukarda yaptığımız uygulamada hata yoksa aşağıdaki görüntü elde edersiniz aliğn parametrelerini daha öncede anlattım detayına giremeyeceğim.
Html Resim Hizalamaları
Bugünkü dersimizde bu kadar arkadaşlar bir sonraki dersimizde ise resimlere çerçeve border oluşturmayı ve sayfalarımıda arkaplan resmi kullanmayı anlatacağım resimleri bitirip linklere geçiş yapacağız inşeAllah.
Html Resim Eklerken Klasör Yapısı
Biz şuana kadar nasıl çalıştık arkadaşlar kullandığımız resim masaüstünde tasarladığımız sayfa masaüstünde yani her ikiside aynı yerde oluyordu. Oysaki site dosyalarımız dağınık olmaması için bunları kalsör haline getiririz resimleri ve diğer materyalleri klasör şeklinde kullanırız.
Yani demek istediğim sayfamız ana dizinde iken resim image resimler yada farklı bir isimde barındırabiliriz hostingde karışıklığı önlemek için bu durumda ilk resim ekleme dersimizdeki şekil işe yaramaz yani resmin yolunu belirtmek gerekir en azından klasör yolu belirtilmeli şu klasöre gir yada şu klasörden çık şurda şeklinde belirtmeliyiz.
Bir uygulama yapalım öncesinde bilgisayarınızın masaüstüne bir klasör açın resimler adında boş bir klasör ve aşağıda vereceğim resmi ders.jpg olarak klasör içine kaydediyoruz arkadaşlar.
Bu resmi Masaüstünde Açtığınız Resimler Klasörü İçine ders.jpg olarak kaydedinEvet resmimizi masaüstünde açtığımız resimler isimli klasörün içine attıktan sonra not defterimizi açarak aşağıdaki kodları aynen yazıyoruz ve farklı kaydet diyerek dosya adı resimklasor.html olarak sayfamızı masaüstüne kaydediyoruz arkadaşlar.
<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”Resimler/ders.jpg” >
</body>
</html>
Evet arkadaşlar resmin yolunu belirttim dedimki resim resimler klasöründe şu isimle peki klasör içine farklı bir örnekle girmeye devam edelim şimdide resimler klasörü içine dersresimleri diye bir klasör açalım ve verdiğim resmi resimler klasörününde açtığımız ders klasörünün içine taşıyalım ve bu şekilde uygulama yapalım ve kodlarımızı yazıp farklı kaydet diyerek dosya adı resimlerklasor1.html olarak masaüstüne kaydedin yine.
<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”Resimler/dersresimleri/ders.jpg” >
</body>
</html>
Html Resim Eklemede Klasör YapısıEvet arkadaşlar yukardaki örneklerde hep klasöre girdik çünkü resim hep alt klasörlerdeydi bu sefer tersini yapalım sayfamız klasör içinde olsun resim dışarıda bunun için ders isimli resimi tekrardan resimler isimli açtığımız klasöre alalım arkadaşlar yapacağımız sayfamızı ise resimler klasörü içe açtığımız dersresimleri klasörü içine kaydedeceğiz yani masaüstüne değil masaüstüne açtığımız resimler isimli klasörün içine açtığımız dersresimleri klasörüne kaydedeceğiz dosya adı olarak resimklasor2.html olarak kaydedelim aşağıdaki kodları.
<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”..\ders.jpg” >
</body>
</html>
evet arkadaşlar hata yapmadığınız sürece resim yine açılacaktır peki bunda ne yaptık onuda özetliyelim resmin yolunu belirtirken klasöre girmek için gireceğimiz klasör adlarını yazıyorduk bunda ise resmimiz bir üst klasörde yer aldığı için çıkmamız gerekti bir üst klasöre çıkmak içinse arkadaşlar ..\ bu parametreyi kulandık şayet 2 klasör üste çıkmak gerekseydi ..\..\ 3 gerekseydi 3 defa kullanmak gerekirdi yani her bir üst klasöre çıkmak için tekrarlamanız gerekir.
Html Resimleri Hizalama Sağa Sola Ortalama
Sayfamıda yer alan resimlerin hizalanamsını konumunu belirlemek için daha önce farklı amaçlarla anlattığım Align parametresini kullanacağız arkadaşlar onun için aşağıdaki resmi masaüstüne bayrak.jpg olarak kaydedin ve aşağıdaki kodları sizde uygulayıp farklı kaydet diyerek dosya adı bayraklar.html olarak masaüstünüze kaydedin.
Bu rEsmi Masaüstünüze bayrak.jpg olarak kaydedin<html>
<head>
<title>Web Tasarım Dersleri Resim Klasör Yapısı Ders 9</title>
</head>
<body>
<img src=”bayrak.jpg” align=”left” ><br><br>
<center><img src=”bayrak.jpg” ><center><br><br>
<img src=”bayrak.jpg” align=”right” ><br><br>
</body>
</html>
evet arkadaşlar yukarda yaptığımız uygulamada hata yoksa aşağıdaki görüntü elde edersiniz aliğn parametrelerini daha öncede anlattım detayına giremeyeceğim.
Html Resim HizalamalarıBugünkü dersimizde bu kadar arkadaşlar bir sonraki dersimizde ise resimlere çerçeve border oluşturmayı ve sayfalarımıda arkaplan resmi kullanmayı anlatacağım resimleri bitirip linklere geçiş yapacağız inşeAllah.