This is a discussion on HTML nedir ? giriş... gelişme .... within the HTML forums, part of the Programlama Dilleri category; HTML nedir? HTML bir programlama dili değildir. HTML bir mark-up ...
|
|||||||
| Blogs | Yardım | Üye Listesi | Ajanda | Arama | Bugünki Mesajlar | Bütün Forumları okunmuş kabul et |
|
|
|
||||
|
Listeler:
HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar; Sıralı listeler (ordered list) Sırasız listeler (unordered list) Tanımlama listeleri (definition list) Sıralı listeler rakam , harf yada her ikisini içiçe alarak liste oluşturmamızı sağlar.Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır. Listemizin rakamla mı harfle mi olacağını (type) parametresi ile belirtebiliriz. Sıralı Listeler Html Etiketi Etiketin Web Sayfasındaki görüntüsü <OL TYPE = "1">ELEMANLAR : <LI>ELEMAN 1 <LI>ELEMAN 2 <LI>ELEMAN 3 </OL> ELEMANLAR : ELEMAN 1 ELEMAN 2 ELEMAN 3 Sırasız Listeler Html Etiketi Etiketin Web Sayfasındaki görüntüsü <UL TYPE="DISC"> ELEMANLAR: <LI>ELEMAN 1 <LI>ELEMAN 2 <LI>ELEMAN 3 </UL> ELEMANLAR: ELEMAN 1 ELEMAN 2 ELEMAN 3 Tanımlama listeleri <dl> <dt>Karbonhidrat ve ben <dd>En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. </dd></dt> <dt>Sebze ve ben <dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. </dd></dt> <dt>Et ve ben <dd>Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. </dd></dt> </dl> Karbonhidrat ve ben En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini.. Sebze ve ben Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. Et ve ben Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. alıntı
__________________
[B][SIZE="5"]TrBil@Forum[/SIZE][/B] [SIZE="7"][COLOR="Blue"][B]BuRaK[/B][/COLOR][/SIZE] |
|
||||
|
RESİMLER
<IMG SRC="resmin bulunduğu yer ve adı yazılacak yer" WIDTH="x" HEIGHT="y" > Seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yoktur. Resim eklemek için yapmamız gereken sayfaya koyacağı resmin nerede olduğunu göstermemiz gerekir.Resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz resmin düzgün görünmesi sağlar ama şart değildir. Kullanacağımız etiket şu şekilde olacak; Burada x resmin enini y ise boyunu ifade ediyor Örnek : <img src="Fil.gif" width="64" height="79"> Eklemek istediğiniz çok sayıda resim varsa bunları resimler adlı bir alt klasörde ise html dosyası c:\ders dizininde resimler de c:\ders\resimler\Fil.gif dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanılır; <img src="resimler/Fil.gif" width="64" height="79"> Resmi Hizalamak Hizalama (align) komutuyla resmi sağa (right) ,ortaya (center) ya da sola (left) koyabiliriz. <img src="resim.jpg" width="25" height="25" align="left"> Resme alternatif metin eklemek: <img src="resim.gif" alt="saat"> buradaki alt="saat" ifadesi bize resmimize alternatif metin eklememizi sağlar. Resme Çerçeve eklemek : <img src="resim.gif" border="6"> border ise resmimize çerçeve içine alır alıntı
__________________
[B][SIZE="5"]TrBil@Forum[/SIZE][/B] [SIZE="7"][COLOR="Blue"][B]BuRaK[/B][/COLOR][/SIZE] |
|
||||
|
BAĞLANTILAR
<A></A> Bağlantılarla hazırladığımız birçok sayfayı birbirleriyle ilişkilendirebilirz. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür.Yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim: <A HREF="....">...</A> Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün. Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; <A>...</A> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir. <A HREF="doğa.gif"> buraya tıklandığında doğa resmi açılacak </A> Birinci örnekte "buraya tıklandığında doğa resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır. <A HREF="Ders.rar"> sıkıştırılmış Ders dosyalarını çekmek için tıklayın İkinci örnekte aynı şekilde "sıkıştırılmış ders dosyalarını çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte doğa.gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya ders.rar dosyasını açmak mı yoksa kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken rar,zip,, doc, xls, mp3 gibi dosyaları görüntüleyememesidir. <A HREF="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </A> Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır. <A HREF="resimler/Fil.jpg"> kedi resmi </A> Bu örnekte altdizinlere/üstdizinlere verilen bağlantıyı görüyorsunuz, resimler konusunda gördüğümüz kurallar burada da geçerli. <A HREF="http://www.webbilgileri.com"> tıklayın dosyaları indirin </A> Bu ise bir http adresine verilen link örneği. <A HREF="mailto: [email]bendeniz@mail.com[/email]"> mail atın </A> Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır. alıntı
__________________
[B][SIZE="5"]TrBil@Forum[/SIZE][/B] [SIZE="7"][COLOR="Blue"][B]BuRaK[/B][/COLOR][/SIZE] |
|
||||
|
TABLOLAR(TABLE)
<TABLE>...</TABLE> Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde olmasını sağlamak amaçlarıyla kullanabiliriz. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabiliriz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılabilir. Basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <TABLE>...</TABLE> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <TR> etiketi ile satırları <TD> etiketi ile de sütunları oluşturuyoruz. Parametreler: <TABLE BORDER=".." CELLPADING=".." CELLSPACING=".." ALIGN=".." WIDTH=".." HEIGHT=".."> Border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar. Cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlıyabilirz. HTML etiketi Etiketin Web Sayfasındaki görüntüsü <table border="1" cellspacing="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> <tr> <td>hücre3</td> <td>hücre4</td> </tr> </table> hücre1 hücre2 hücre3 hücre4 Align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar. colspanaynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir. HTML etiketi Etiketin Web Sayfasındaki görüntüsü <table border="1" cellspacing="1"> <tr> <td>hücre1</td> <td>hücre2</td><td>hücre3</td> </tr> <tr> <td rowspan="2">hücre4</td> <td colspan="2">hücre5</td></tr> <tr><td>hücre6</td><td>hücre7</td> </tr> </table> hücre1 hücre2 hücre3 hücre4 hücre5 hücre6 hücre7 alıntı
__________________
[B][SIZE="5"]TrBil@Forum[/SIZE][/B] [SIZE="7"][COLOR="Blue"][B]BuRaK[/B][/COLOR][/SIZE] |
![]() |
| Tags |
| html |
| Seçenekler | |
| Stil | |
|
|