HTML DERSLERİ

yorum yok
546 okuma
12 Ocak, 2018

HTML DERSLERİ

HTML, web sayfası dizayn dilidir. İngilizce açılmış biçimi: Hyper Text Markup Language (yani Hiper Metin Kodlama Dili). Her ne denli böyle heybetli bir isime sahipse de, sizi korkutmasın. Birkaç günlük bir çalışmayla, iyi web sitesi yapma yetisine ulaşabilirsiniz. Elbette HTML sanal ortamda her şey değildir, fakat ilk kapıları size HTML açacaktır. Neyse lafı uzatmadan, konuya giriyorum.

HTML uygulamaları amacıyla derleyici bir programa gereksiniminiz yoktur. Basit bir metin editörü işinizi görecektir. Örneğin ben “Notepad” kullanıyorum. Şimdi bir notepad açın ve yolculuğumuza başlamış olalım. (Notepad olması koşul değil, bulamıyorsanız Internet Explorer’ın alet kutusundan “Görünüm/Kaynaklar” (“View/Source”) bölümünü işaretleyin. Karşınıza bir notepad çıkacaktır, fareyle Dosya/Yeni (File/New) seçeneğini seçerek yeni bir sayfaya başlayın.)

Sayfa Yapısı

HTML dilinde çoğu kod için “AÇTIĞINI KAPAT” kuralı geçerlidir. Mesela bir HTML sayfası <html> koduyla başlatılır ve </html> koduyla bitirilir. Şimdi ilk HTML uygulamamızı yapalım.

<html>
merhaba
</html>

 

Bu uygulamada “merhaba” yazılı bir web sayfası yaptık. Bu sayfayı görmek amacıyla notepad’e yukarıdaki kodları yazın, ve deneme.Html gibi bir isim ve html kök ismi ile kaydedin. Notepad sayfanızı web sayfası durumunda kaydeder. Şimdi bu kayıtlı sayfayı (ismini “deneme.Html” koymuştuk.) bulun ve açın. (“Windows Explorer” ile bulabilirsiniz, ve ya masaüstüne kaydetmişseniz masa üstüne bakın. Kaydettiğiniz dosyaları bulmakta probleminiz varsa, evvel Windows Explorer, Windows Commander benzeri yazılımların üzerinde çalışın ve bilgisayarın dosyalama sistemi üzerinde fikir sahibi olmaya çalışın.)

Geliştirilmiş Sayfa Yapısı
Bu ilk uygulamamızda sadece bir kod öğrendik: <html> Bir HTML programı bu kodla adım atar ve </html> koduyla kapatılır. (AÇTIĞINI KAPAT kuralı.) Web sayfasına yazdırmak istediğiniz yazıları ise doğrudan yazabilmektedsiniz.Tabi genellik ile HTML sayfaları fazla daha komplike olur, bundan dolayı bu karmaşaya makul, daha ayrıntılı bir iskelete ihtiyacımız var. Genelde internet sayfaları şu iskelet üstüne yapılandırılır:

<html>
<head>
<title>HTML Uygulaması Deneme:2</title>
</head>
<body>
merhaba
</body>
</html>

 

Bu uygulamayı yazın ve tekrar web formatında bu sayfayı açın. Yine internet sayfamız bize “slm” diyecek. Peki bir değişiklik dikkatinizi çekti mi? Web sayfasının üstünde kalıntı “HTML Uygulaması Deneme:2” yazıyor. Bilin bakalım unsur?

<html>…</html> HTML kodlarının tamamı bu iki kodun arasına yazılır.
<title>…</title> Web sayfasının en üstünde ve Windows çubuğundaki sembol kutucuğunda, kullanıcıya sayfayı tanıtmak için kullanılan başlık yazısı bu iki komut arasına yazılır.
<head>…</head> <title> komutundan başka bu kısma genelde JavaScript (ve ya VBScript) kodlarıyla oluşturulan fonksiyonlar yazılır. (Bunları gelecek derslerde görebileceğiz.
<body>…</body> Web sayfasında görmek istediğimiz yapı buraya (gövdeye) yazılır. Mesela görünmesi istenen metin, resim vb. Vasıtalar için gerekli HTML kodları buraya girilir.
Bir web sayfasına başlamadan evvel, bu iskeleti oluşturunuz. (Şimdiki programlar amacıyla pek lüzumlu değilse de, alışmanızda fayda var.) İlk derslerde <head>…</head> arasına pek birşey yazmayacağız. Önce < body>…</body> arasında kullanacağımız kodları öğrenelim. (Ben tekrar de <head></head> kodlarını arası, boş da olsa inatla yazacağım; <title>…</title> kodlarının buraya yazılması şart olmamasına rağmen.)

Satır Oluşturma
Şu ana kadar öğrendiğimiz bölümle, metin sahibi olan bir internet sayfası tasarlayabiliriz; yalnızca metinden oluşan oldukça fazla web sayfası görmüşsünüzdür. (Özellikle bilimsel niteliği olan yayınlar, kurumsal dokümanlar vb.) Ancak şimdiki bilgilerimizle oluşturacağımız, sadece metine dayalı web sayfası kullanıma makul olmayacaktır. Zira metin yazıyoruz fakat paragraf yapamıyoruz. Veya paragraf başı yapamıyor, kalın ve ya italik yazılar kullanamıyor, makalelerin büyüklük ve ya küçüklüklerini ayarlayamıyoruz. Yaptığımız şey, sözcükleri ard arda sıralamaktan ibaret. Denerseniz görmüş olacaksınız ki, HTML çok sayıda bırakılan boşlukları (space bar ile) görmüyor, yalnızca bir boşluk bırakıyor. Yani siz kod içinde paragraf yapsanız dahi, sayfa HTML formuna çevrildiğinde karşınıza sözcükler diziliminden başka birşey çıkmayacaktır. Bana inanmayabilirsiniz; farazi ortamın yalancısı çoktur, dilerseniz beraber deneyim edelim. Örneğin Ömer Hayyam’ın bir dörtlüğünü yazalım güzelce, bakalım yazdığımız gibi çıkacak mı?

<html>
<head>
<title>Ömer HAYYAM</title>
</head>
<body>
Ferman sende, ama güzel yaşamak bizde;
Senden ayığız bu sarhoş halimizde.
Sen insan kanı içersin, biz üzüm kanı;
İnsaf be Sultanım, kötülük hangimizde?
</body>
</html>

Binbir emekle yazdığımız dörtlük, web sayfası haline ulaştığında okunamaz bir hale geldi. (Lütfen siz de gözden geçirin, böylelikle HTML’e ısınır, hem de yaptıklarımız aklınızda kalır. Yazmaya üşeniyorsanız, hiç olmazsa copy/paste yapıp gözden geçirin.) Oysa bu metinleri <pre>…</pre> arasına yazsaydık böyle olmayacaktı. <pre>…</pre> arasına yazılan yazılar, paragraflar ve gerçekleştirilen fazladan boşluklar öneme alınarak internet sayfasına yazdırılır. İnanmıyorsanız bakın:

<html>
<head>
<title>Ömer HAYYAM</title>
</head>
<body>
<pre>
Ferman sende, ama güzel yaşamak bizde;
Senden ayığız bu sarhoş halimizde.
Sen insan kanı içersin, biz üzüm kanı;
İnsaf be Sultanım, kötülük hangimizde?
</pre>
</body>
</html>

Her ne kadar <pre>…</pre> kodları işimize yarıyorsa da, internet sayfası tasarlarken uğraştığımız bir ton curcuna içerisinde <pre> kullanmak biraz yorucu oluyor. Zira AÇTIĞINI KAPAT kuralına sadık o kadar çok kodla uğraşırız ki, <pre> komutunu kapatmayı (yani </pre> kullanmayı) unutabiliriz. Bu nedenle kullanımı daha pratik olan <br> (“break”) kodunu öneririm. Bu kod, yazı editörlerinde “return” tuşunun meydana getirdiği fonksiyonu taşımaktadır. Şimdi Ömer Hayyam’ın diğer bir dörtlüğünü (monotonluk olmasın) bu kodla yazalım: (Siz de yazıyorsunuz di mi?)

<html>
<head>
<title>Ömer HAYYAM</title>
</head>
<body>
Ey kör! Bu yer, bu gök, bu yıldızlar boştur boş!<br/>
Bırak onu bunu da gönlünü hoş tut hoş!<br/>
Şu durmadan kurulup dağılan evrende<br/>
Bir nefestir alacağın, o da boştur boş!<br/>
</body>
</html>

Gördüğünüz gibi dizeler yeniden meydana geldi. Tabi <pre> ile <br> kodlarının ayrı şeyler olduğunu ihmal etmeyin. <br> yalnızca satır atlatır, o denli. <pre> ise metin editöründe yazılan formatı, internet sayfasına taşır.

Yazı Formatı
Hazır ısınmışken bir kaç şey daha öğrenelim. Artık paragraf yapabiliyor, şiir yazabiliyoruz. Ama her şiir Ömer Hayyam’ın rubaileri gibi başlıksız değil. Bazı yazıları koyu (bold) ve ya eğik (italic) yazmak isteyebiliriz. Bu halde kullanacağımız kodlar şunlardır: <b>…</b> (“bold”) ve <i>…</i> (“italic”). Mesela Cemal Süreya’nın “Ölmüştük” adlı şiirini yazalım:

<html>
<head>
<title>Cemal SÜREYA</title>
</head>
<body>
<b>ÖLMÜŞTÜK</b><br/><br/>
Büyük bir olasılıkla ölmüştük<br/>
Şehir kan-kıyametti arkamızda,<br/>
Gökyüzünü katlamış bir köşeye koymuştuk<br/>
Yıldızlar kaldırımlara dökülmüştü tüm<br/>
Hamza bütün parmaklarını ortaya dökmüştü<br/>
Cebinde biriktirdiği parmaklarını,<br/>
Hamza son şarkıyı kırka bölmüştü,<br/>
Doğrusu iyi yönetim etmiştik<br/>
Doğrusu iyi haltetmiştik<br/>
Yaşayanlar unutmuştu bizi<br/>
Yaşayanlar seven sevene dünyada,<br/>
Biz öldüğümüzle kalmıştık<br/><br/>
<i>Cemal SÜREYA</i><br/><br/>
</body>
</html>

 

Nasıl? Bir şeyler öğrenmeye başladık galiba. Şimdi biraz çay molası verelim. Sizden ricam moladan önce yaptıklarınıza biraz bakın ve kodları aklınıza yerleştirmeye çalışın. İngilizce bilenler için bu hiç zor olmayacak, kodların hangi kelimelerden kısaltılmış bulunduğunu veriyorum esasen. Umarım çay molasından sonra kendinizce birkaç örnek yapmanızı sağlayacak kadar heveslendirebilmişimdir sizleri. Diğer derste görüşmek üzere..

Öğrendiğimiz kodlar:

<html></html> HTML bu kodlarla başlar ve biter.
<title></title> Web sayfasının başlığı bu iki kodun arasına yazılır.
<head></head> Fonksiyonlar, <title> vb. bu kodların arasına yazılır.
<body></body> Web sayfasında görmek istediğimiz araçlarla (metin, şekil, form, tablo vb.) ilgili ifadeleri buraya yazılır.
<pre></pre> Metin editöründeki formatı, web formatına taşır.
<br> Bir satır aşağıya geçirir. (AÇTIĞINI KAPAT kuralı geçerli değildir.)
<b></b> Arasındaki ifadeyi kalın (bold) harflerle gösterir.
<i></i> Arasındaki ifadeyi eğik (italic) harflerle gösterir.
<u></u> Arasındaki ifadeyi altı çizili (underlined) harflerle gösterir.

 

Sanırım bu sayfalık bu kadar yeter.   Bir sonraki ders : Metin Düzeni,  Paragraf Oluşturma, Paragraf Hizalama, Tanıtıcı Mesaj Parametresi, Karakter Kodları, Yazı Komutları ) Ders2 Girmek için tıklayın. 


Bir önceki yazımda « makalem var.
ReGoR

Site web editörü olan admin makale yazarlığı yapar. Site web editörü olan admin .

Benzer Yazılar

Van Sohbet   Genel olarak Van sohbet sitelerine bağlanan kişilerin ...

aşkın gücü

Hayatın Anlamı Hayatımda yalnızca Tanrı ve dünya hakkında düşündüğüm ...

Aşkım Bir Rüya Gökyüzüne baktığımızda suratını görüyorum, senin ...

Yorumlar



Bir Yorum Yazmak İstermisiniz ?