Toggle navigation
Ana Sayfa
Yardım
Giriş Yap
Kayıt Ol
Giriş Yap
Kayıt Ol
×
Close
Giriş Yap
Remember me
Dersler
Webmaster
HTML
HTML Dersleri
Konu:
Html Dersleri
« önceki
sonraki »
+
Yazdır
Sayfa:
«
1
2
[
3
]
Aşağı git
Html Dersleri
13 Yanıt
10943 Gösterim
0 Üye ve 1 Ziyaretçi konuyu incelemekte.
Halime
***Sen kaldırım taşlarını dize dur önüme, ben toprağa basa basa senden uzaklaşıyorum ***
Join Date: Nis 2008
Yer: İsk€nd€run
2695
+198/-0
Cinsiyet:
Ve Birgün Bu Dünya Gül Bahçesine Dönecek..
Ynt: Html Dersleri
«
Yanıtla #10 :
07 Eylül 2008, 02:45:36 »
teşekkür ederim .... ggüüll
Kayıtlı
kardelen
Join Date: Nis 2008
Yer: Hatay / İskenderun
3198
+238/-0
Cinsiyet:
Ynt: Html Dersleri
«
Yanıtla #11 :
07 Eylül 2008, 02:47:51 »
6. HTML Dersi
Resimde Yükseklik-Genişlik ve Bir başka sayfaya link vermek (HTML Title)
Hoşgeldiniz!
Yeni bir derste daha sizinle buluşmak güzel.
Şu ana kadar hangi HTML etiketlerini gördük?
<h1> </h1> <h2> </h2> <h3> </h3> ...
<br>
<font size="" color=""> </font>
<body bgcolor=""> </body>
<html> </html>
<b> </b>
<title> </title>
<head> </head>
<U> </U>
<I> </I>
<IMG SRC="....">
Web tasarımı öğrenme isteğiniz sizi bu derse kadar getirdi; Tebrik ederim
Haydin devam edelim.
Bu dersimizde sizlerle resimlere (<img> html etiketi) yükseklik (height) ve genişlik (width) vermesini göreceğiz.
Resimlere çerçeve (border) vereceğiz.
HTML dosyasında nesneler (kelime/resim vs..) arasına boşluğu ile vermemiz gerektiğini öğreneceğiz.
Ayrıca web sitelerine link vermeyi öğrenmiş olacağız.
Daha önce aldığım fakat hazırlamaya fırsatımın olmadığı bir domain adı var : [url=http://www.gazeteler-e.gen.tr]www.gazeteler-e.gen.tr[/url]
Bunu birlikte kodlamaya (sadece html kullanarak) başlayalım.
[img]http://www.htmldersleri.info/gazeteler-e-yapimasamasinda.jpg[/img]
Sitenin şu anki görüntüsünü oluşturan HTML kodu aşağıdaki gibidir. <html>
<head>
<title>Türkçe gazeteler, yerel ve ulusal gazeteler</title>
</head>
<body>
<h1> Gazeteler'e linkler<br> şu anda yapım aşamasında...</h1>
</body>
</head>
Şimdi kodlamaya başlayabiliriz:
</h1> tagı kapandıktan hemen sonra bu site için hazırlanmış logomuzu img html etiketiyle yerleştirelim.
logoyu kendi makinanıza almak için; logonun üzerine sağ tıklayıp farklı kaydeti seçiniz.
Logoyu aldıktan sonra html dosyasıyla aynı dizinde olmasını sağlayınız.
[img]http://www.htmldersleri.info/gazetelere-link-logo.jpg[/img]
<img src="gazetelere-link-logo.jpg">
Çerveve vermek için border özelliğini kullanıp çerçeve kalınlığına da 1 değerini atıyoruz.
<img border=1 src="gazetelere-link-logo.jpg">
ikisi arasında farkı görebilmek için bu iki img tagını da aynı sayfada kaydedelim.
Görüntü için buraya tıklayınız.
ikinci img etiketinden sonra bir <br> ekleyip 3. ve 4. resmin aşağıdaki satırda çıkmasını sağlayacağız.
yi 3. ve 4. resim arasında kullanalım.
<img src="gazetelere-link-logo.jpg"> <img border=1 src="gazetelere-link-logo.jpg">
Ben 5 tane kullandım herbiri bir karakter kadar boşluk verir. Ben iki resim arasında 5 karakter kadar boşluk elde etmek istiyorum.
Sonuç aşağıdaki gibi olması lazım.
[img]http://www.htmldersleri.info/nbsp_img_between.jpg[/img]
Çalışmamızın şu anki görüntüsü için buraya tıklayınız.
web sayfalarındaki kelime yada harfler arasında birden çok boşluk varsa bunlar web tarayıcıları tarafından tek bir boşlu olarak gösterilir.
HTML de yazılar arasında boşluk vermek için kullanılır;
yukarıda resimler arasında boşluk vermek için kullandığımız gibi.
Şimdi width ve height ile çalışalım. aynı sayfada logomuzu 5. kez çıkartalım.
ekleyeceğimiz resmin yeni bir satırda gelmesi için br tagını bir kez kullanalım.
html etiketleri çeşitli özellikler alabilirler bu özelliklerin değerleri vardır.
img etiketinin width özelliğine biz 300 değerini atayalım
<img src="gazetelere-link-logo.jpg" width=300>
sonucu görmek için buraya tıklayınız.
6. resmi ilave etmeden önce çalışmamıza tekrar bir br etiketi ekleyelim
Bu sefer de img etiketinin height özelliğine değer atayacağız.
<img src="gazetelere-link-logo.jpg" height=235>
sonucu görmek için buraya tıklayınız.
Yeni bir resim eklemeden önce br etiketini kullanmassanız 7. resmimiz 6. nın hemen yanında olacaktır.
Bu son resimde width=100 olsun height=45
<img src="gazetelere-link-logo.jpg" width=100 height=45>
Son bir ekleme daha yapıp bugünkü HTML dersimizi bitirmiş olalım.
<a href="http://www.gazeteler-e.gen.tr"> Gazetelere linkler </a>
Bugünkü çalışmamızın tamamına ait HTML kodları aşağıdaki gibidir <html>
<head>
<title>Türkçe gazeteler, yerel ve ulusal gazeteler</title>
</head>
<body>
<h1> Gazeteler'e linkler<br> ?u anda yapym a?amasynda...</h1>
<img src="gazetelere-link-logo.jpg">
<img border=1 src="gazetelere-link-logo.jpg">
<br>
<img src="gazetelere-link-logo.jpg"> <img border=1 src="gazetelere-link-logo.jpg">
<br>
<img src="gazetelere-link-logo.jpg" width=300>
<br>
<img src="gazetelere-link-logo.jpg" height=235>
<img src="gazetelere-link-logo.jpg" width=100 height=45>
<a href="http://www.gazeteler-e.gen.tr"> Gazetelere linkler </a>
</body>
</head>
inşaAllah bir dahaki dersimiz de <a href="http://www.gazeteler-e.gen.tr">Gazetelere linkler </a> kodunu daha iyi anlamış olacaksınız.
Sizin bir dahaki dersimize kadar yapabileceğiniz pratik şudur:
internetten çeşitli resimleri indirip onlar üzerinde width ve height çalışması yapmak
Dersime katıldığınız için teşekkür ederim.
Kayıtlı
D®agon
Ezberletmez Öğretir
Join Date: Mar 2008
Yer: Ankara
11650
+524/-0
Cinsiyet:
Ynt: Html Dersleri
«
Yanıtla #12 :
07 Eylül 2008, 02:49:09 »
[b] aarroo kardelen (+) goor[/b]
Kayıtlı
Halime
***Sen kaldırım taşlarını dize dur önüme, ben toprağa basa basa senden uzaklaşıyorum ***
Join Date: Nis 2008
Yer: İsk€nd€run
2695
+198/-0
Cinsiyet:
Ve Birgün Bu Dünya Gül Bahçesine Dönecek..
Ynt: Html Dersleri
«
Yanıtla #13 :
07 Eylül 2008, 15:43:21 »
[quote author=Dragon link=topic=2606.msg9415#msg9415 date=1220744949]
[b] aarroo kardelen (+) goor[/b]
[/quote]
Kayıtlı
+
Yazdır
Sayfa:
«
1
2
[
3
]
Yukarı git
« önceki
sonraki »
Dersler
Webmaster
HTML
HTML Dersleri
Konu:
Html Dersleri
Yukarı git
Aşağı git