INTERNET & INTRANETS DERSİ 2004-2005 BAHAR YILI - 2. HAFTA HTML KOMUTLARI HTML Dersler Web sayfası hazırlamak çok zor bir iş değil... Yazdığınız bir yazıyı, o yazıyla ilgili resimler görünebilecek, varsa sesleri duyulabilecek biçimde başkalarının izlemesini sağlayabilirsiniz. Ama başka bilgisayarların bunu anlayıp, sizin yaptığınız gibi gösterebilmeleri için, ortak bir dil kullanmaları gerekir. Bu dile html denir. Browser'lar (yani bilgisayardaki bu işe yarayan programlar) ingilizce olarak yazılmak zorunda olunan bu komutlara bakıp, neyi nasıl göstereceğini anlar. HTML dili kullanarak websayfası hazırlamak için özel bir editöre gerek yoktur. Notepad kullanarak sayfalarınızı hazırlayabilirsiniz. Yazı yazmanıza yarayacak bir program (Not Defteri) nasıl açılır, nasıl kaydedilir biliyorsunuz... Biraz zor gelebilecek olan şey ise, ingilizce olan bu komutları doğru yazmak olabilir. Bir şey çalışmıyorsa, önce ingilizcesini doğru yazdım mı acaba diye kortrol etmeniz iyi olur. Sonra diğer olasılıkları kontrol edersiniz. Derslerimize başlıyayım :) 1
KONU 01 - HTML Komutlarına başlıyoruz! Bir web sayfası <html> ile başlar, </html> ile biter <html> <head> <title>buraya sitenin adı yazılır</title> </head> <body>sitenizdeki hemen hemen herşey daha sonra burada olacak</body> </html> <HEAD> </HEAD> Sitemizin adının yer aldığı Title'lın, Meta Tag denilen, arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi, yazıların biçimlerini, büyüklüklerini, renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın, zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim. TITLE> </TITLE> Her sitenin bir adı olması gerekir. <title> DayDay </title> Mısra ile Bulut'nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar... <BODY>... </BODY> Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm. Buradaki komutların neler olduğunu sırayla öğreneceksiniz. Ama önce, sayfamızı şöyle bir görelim değil mi? Bulut, ilk sayfada bu yazı olsun istiyor: "DayDay, seni çok seviyoruz! " Haydi bakalım deneyelim: 2
KONU 02 - İlk Sayfa Denemesi İlk sayfamızı yapıyoruz Önce not defterimizi açalım. Monitörün altında sol tarafta başlat menüsü var. Programların içinde Donatılar... Onun içinde de not defteri... Aslında bunun yerini bildiğinize eminim :) Aşağıdaki yazıyı açtığınız sayfaya yazın. <html> <head> <title> DayDay </title> </head> <body> DayDay seni çok seviyoruz </body> </html> index adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek) Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz. O zaman "farklı kaydet" seçeneğini kullanıp yeniden deneyelim: Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett :)) Oldu işte! Yazdığımız diğer yazılar artık görünmüyor. Görünen sadece söylemek istediğiniz şey olacak... Görünen sadece söylemek istediğiniz şey olacak... 3
KONU 03 - Yazı (Tip, Renk, Büyüklük) Bu yazıyı hatırlıyorsunuz. Sadece yazmıştık. Çok sıradan görünüyor değil mi? Farklı durumlar için, farklı büyüklük, tip ve renklerde yazılar gerekir. Ayrıca yazının sayfanın neresinde duracağına da siz karar vermelisiniz. Yazılar aşağıdaki komutlar içine yazılır. <font>... </font> Yazının büyüklüğü için "size" yazı tipi için "face" Yazı rengi için "color" komutlarını kullanmanız gerekir. Aşağıdaki örneği yazın: <font size="3" face="arial" color="red">dayday seni çok seviyoruz</font> Yazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın. <html> <head> <title>dayday</title> </head> <body> <font size="4" face="arial" color="red">dayday seni çok seviyoruz</font> </body> </html> İsterseniz yaptığımızın neye benzediğini bir deneyip bakalım?! Şimdi tek tek tekrar edelim. 4
Yazı Büyüklüğü font size="4" 5 yerine 2, 3, 4, 6 yazabilirsiniz. Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür. <h1> DayDay </h1> <h2> DayDay </h2> <h3> DayDay </h3> <h4> DayDay </h4> <h5> DayDay </h5> <h6> DayDay </h6> Yazı Rengi Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız. color="red" yerine, farklı renk isimleri yazın. red kırmızı ; blue mavi ; yellow sarı ; white beyaz ; black siyah Kodlarla yazmak istiyorsanız, color="#ff0000" renk adı yerine kod yazmanız gerekir. red #ff0000 ; blue #0000ff ; yellow #ffff00 ; white #ffffff ; black #000000 Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz. Yazı Tipi face="arial" yerine Verdana, Arial Narrow, Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir. Ama çok önemli bir şey var... Bir yazı tipi, ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden, örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın :))) Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik. 5
KONU 04 - Renkler (İngilizce Karşılıkları) Renk Adı red Hexadecimal Kodu FF0000 yellow FFFF00 lime 00FF00 cyan 00FFFF blue 0000FF magenta FF00FF white FFFFFF whitesmoke F5F5F5 gainsboro DCDCDC lightgrey D3D3D3 silver C0C0C0 darkgray A9A9A9 gray 808080 darkkhaki BDB76B darkgoldenrod B8860B goldenrod DAA520 gold FFD700 6
KONU 05 - Renkler (Zemine Göre Etkileri) aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose mistyrose navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen KONU 06 - Renkler (HTML, RGB, CMYK) FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00 G=255 B=204 G=255 B=153 G=255 B=102 G=255 B=51 G=255 B=0 R=204 G=204 B=0 M=0 Y=20 M=0 Y=40 M=0 Y=60 M=0 Y=80 M=0 Y=100 C=20 M=20 Y=100 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 G=204 B=102 G=204 B=0 G=204 B=51 R=204 G=153 B=0 R=204 G=153 B=51 R=153 G=102 B=0 M=20 Y=60 M=20 Y=100 M=20 Y=80 C=20 M=40 Y=100 C=20 M=40 Y=80 C=40 M=60 Y=100 7
KONU 07 Yazıyı Sayfaya Yerleştirme Yazıyı İstediğimiz Yere Yerleştirmek Yazıların sayfanın neresinde durması gerektiğine biz karar verebiliriz. Hiçbir şey yazmazsak, Sayfanın solunda dururlar. <center>...</center> Yazınızı <center>...</center> arasına yazarsanız. Sayfanın ortasında görünür. <p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar. Sola dayalı olması için: <p>yazınızı buraya yazacaksınız</p> Ortada olması için: <p align=center>yazınızı buraya yazacaksınız</p> Sağa dayalı olması için: <p align=right>yazınızı buraya yazacaksınız</p> Satırbaşı ve Paragraf Yapmak <br> Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür. Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir. <p> Bu iki komutun diğerlerinden bir farkı var. Yazdığınız her komutu "/" işaretiyle kapatmak zorundasınız ama bu ikisinde bunu yapmanız gerekmez. 8
KONU 08 Yazı (Bold, İtalik, Çizgili) Kalın, Eğik ve Altı Çizgili Yazmak Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir. Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak. Kalın (Bold) yazı <b>yazınızı buraya yazacaksınız</b> Eğik (İtalik) yazı <i>yazınızı buraya yazacaksınız</i> Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız. Ama dikkat etmeniz gereken birşey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız... Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin... Altı çizgili (underline) yazı <u>yazınızı buraya yazacaksınız</u> Peki... Hem kalın hem eğik yazmak istersek ne yapacağız? O zaman her iki kodu da peşpeşe kullanacağız. Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın. 9
KONU 09 Resim Eklemek Web Sayfanıza Resim Eklemek Bakıyorum bayağı ilerlediniz.. Yakında beni bile geçeceksiniz. Bu hafta sizlerle sayfamıza resim yerleştirmeyi öğrenelim... Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim:) Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim... Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim: Resim ekliyoruz <html> <head> <title>sayfamızda Resim </title> </head> <body> <p><img src="cicek.jpg"> </body> </html> Evet işte oldu sayfamıza resmimizi yerleştirdik. Ama şimdi sadece solda duruyor. Ortaya ya da sağa hizalanması isteseydik, aşağıdaki kodları yazmamız gerekecekti. Resmin ortaya hizalanması <img src="cicek.jpg align="center"> Resmin sağa hizalanması <img src="cicek.jpg" align="right"> Resmimizin boyutlarını da belirleyebiliriz. Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz. <img src="cicek.jpg" width=230 height=252> Resmin üzerine gelince görünen yazı Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir. <img src="cicek.jpg" width=230 height=252 alt="dayday web sitene hoşgeldin :)"> Şimdi bir hatırlatma... Resimlerimiz ile.htm dosyalarımız aynı klasörde olmalı. Yoksa resimlerimiz gözükmez. Onun yerine bir çarpı işareti görmekte pek hoş olmaz... 10
KONU 10 Tablolar Tablo Yapmayı Öğreniyoruz Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır. Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir. Tablo için kullanacağımız temel etiketler aşağıdakilerdir. Tablo oluşturmak için <table> Yatay hücre oluşturmak için Dikey hücre oluşturmak için <td> 6 bölüme (hücreye) ayrılmış bir tablo yapalım <table border="1"> <td>birinci sırada Hücre1</td> <td>birinci sırada Hücre2</td> <td>birinci sırada Hücre3</td> <td>ikinci sırada Hücre1</td> <td>ikinci sırada Hücre2</td> <td>ikinci sırada Hücre3</td> Birinci sırada Hücre1 Birinci sırada Hücre2 Birinci sırada Hücre3 İkinci sırada Hücre4 İkinci sırada Hücre5 İkinci sırada Hücre6 Hücremin içi renkli olsun (bgcolor) <table> <td bgcolor="red"> kırmızı hücrem oldu</td> Kırmızı hücrem oldu 11
Hücremin içinde resim istiyorum (background) <table> <td background="deneme.gif"> Heeyy burada kablumbiklerim vaarr</td> Hücremin kenar kalınlığını değiştirmek istiyorum (border) <table border="10"> <td>kenarı kalın oldu</td> kenarı kalın oldu Hücremin kenarını renkli yapmak istiyorum (bordercolor) <table border="10" bordercolor="green"> <td>kenarını yeşil yaptım</td> Hücremin içini de renkli yapmak istiyorum (bgcolor) <table border="10" bordercolor="red"> <tr bgcolor="yellow"> <td>kenarını yeşil yaptım</td> içi sarı kenarı kırmızı Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ") <table border="10" width="300" height="80" > <td>genişliği 250 yüksekliği 80 piksel</td> genişliği 300 yüksekliği 80 piksel 12
Hücremin içindeki yazı sağda olsun (align=" ") <table border="1" width="150" height= "100"> <td align="right"> DayDay</td> DayDay Hücremin içindeki yazı altta olsun (valign=" ") <table border="1" width="150" height="100"> <td valign="bottom"> Hücre</td> DayDay Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan) <table border="1"> <td>1</td><td>2</td><td>3</td> <td colspan="2">4</td><td>5</td> <td>6</td><td>7</td><td>8</td> 1 2 3 4 5 6 7 8 Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan) <table border= "1"> <td>1</td><td>2</td><td>3</td> <td >4</td><td> rowspan="2">5</td><td>6</td> <td>7</td><td>8</td> 13
1 2 3 4 6 5 7 8 Yazılarım hücrenin kenarına değmesin (cellpadding) <table border="1" cellpadding="15"> <td>değmiyor</td> Değmiyor Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing) <table border="1" cellspacing="15"> <td>etrafında boşluk var</td> Canım sıkılıyor Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur. 14
KONU 11 Link Vermek Yazıya Link Vermek Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir. Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar. Bir yazıya nasıl link veriririz? Bir yazıya link vermek istediğimizde şu kodları yazarız: <a href="http://buraya vermek istediğiniz linki girin/"> Buraya linkin adını yazın (örnek: ikinci sayfa </a> Linkimizin yazısını nasıl renklendiririz? Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için body taginin yanına renk kodlarımızı yazarız: (kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..) <body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"> Linkimizin altında açıklama çıkmasını istiyorsak (title) Bazen linkimizin altında açıklama çıkmasını isteriz. Bunun için kullanacağımız kod "title" dır: <a href="http://adresiniz" title="açıklaması"> e-postamıza link verelim(mailto) Sayfamızda e-postamıza da link verebiliriz. Böylece sayfamızı ziyaret edenler bizimle bağlantı kurabilir. Sitemiz hakkındaki düşünceleri söyleyebilirler. Şimdi bir e-posta bağlantısı nasıl olur onu görelim. e-posta linkini A etiketinin yanına "mailto" etiketini eklemek ile yaparız: <a href="mailto:serenity@webdersleri.com "> serenity@webdersleri.com </a> Yukarıdaki linkimize tıkladığınız zaman bilgisayarınızda yüklü olan mail programı devreye girecektir. Böylece kolaylıkla o sitenin webmasterı ile bağlantı kurabilirsiniz.. (Şimdilik ben kendi e-mailimi yazdım. Siz sayfanızda kendi e-postanızı yazacaksınız..) Yazımızın üzerine faremizi getirdiğimiz zaman rengini değiştirmek için CSS bilmemiz gerekiyor. CSS ile sayfalarımız daha dinamik olur.. Bunu da unutmadan söyleyelim. 15