Kişisel web witesi hazırlama – 2

By:
4 Yorum

İlk dersimizde kullanacağımız programları ve sıklıkla bahsedeceğimiz kelimelerin açıklamalarını yapmıştım. Kişisel web sayfası hazırlama ile ilgili bu ikinci dersimizde de dreamweaver ve fireworks programlarına başlamadan önce temel web tasarımı bilgilerini vermenin faydalı olacağını düşünüyorum. Bu derste html üzerinde duracağım. Her ne kadar sonraki derslerde html ile sürekli kod yazmayacak olsakta yaptımız sayfaların nasıl oluştuğunu, arka plandaki kodların ne anlama geldiğini bilmenizde yarar var. Yeteri kadar html bildiğini düşünen arkadaşlar bu dersi atlayabilirler. Özellikle html’ yi ilk defa duyan arkadaşlar içeri buyursunlar.

Birçok kaynakta html ‘ nin bir programla dili olduğu söylensede Html aslında bir işaretleme dilidir. Etiket (tag) denilen kod parçacıklarının bir araya gelmesi ile ziyaret ettiğimiz web sayfaları ortaya çıkar. Yani aslında her web sayfasının arka planında kodlar vardır.

Html dilinin yetersiz kaldığı durumlarda imdadına php, asp, java script, css vb. diller yetişir. Ama hepsinin temelinde ve öncesinde html olduğunu unutmamız gerekiyor. Web sitelerinin atası diyebiliriz : )

Html ‘ nin eksik tarafı ise html ile hazırlanan sayfalarda sadece yazıları biçimlendirmemize ve resimler eklememize izin verir. Yani sadece html ‘ yi kullanarak tanıtım sayfasının ötesinde ziyaretçi defteri, anket, forum gibi sayfalar hazırlayamazsınız. Bu özellikleri sitesinde görmek isteyen web master adayı arkadaşların html’ den sonra asp yada php’ den birisini seçmesi gerekecek.

Html dili kişisel web sayfası hazırlarken ne işimize yarayacak?

Biz dreamweaver programını kullanacağımız için bu program html kodlarını kendisi oluşturacak. Ama css yada java script kodlarını sayfamızın içerisine gömmemiz gerektiğinde yada dreamweaver programının olmadığı bir bilgisayarda sayfamızı güncellemek istediğimizde html çok fazla işimize yarayacaktır. O zaman içinizden bana bir teşekkür etseniz yeter : )

Bir html sayfası oluşturmak için dreamweaver, frontpage gibi gelişmiş özellikleri olan tasarım programlarını kullanabileceğimiz gibi windows’ un not defterinide kullanabilirsiniz. Biz bu dersimizde küçük bir uygulama ile not defterinde temel bazı bilgileri vereceğiz. Zaten tek bir sayfadaki bu kısa yazı ile html uzmanı olmanız söz konusu olamaz. Eğer html konusunda detaylı bilgi almak isterseniz yada html komutlarının kullanımını ve örneklerini ayrıntılı olarak görmek isterseniz buraya tıklayarak daha önce hazırlamış olduğum html eğitim cd’ sini bilgisayarınıza indirerek görüntülü olarak oradan çalışabilirsiniz.

Basit bir html sayfası oluşturmak için masaüstünde sağ tıklayın, açılan menüden Yeni > Metin Belgesi diyerek not defterini masaüstüne getiriyoruz. Şimdi not defterini açarak sayfamızı kodlamaya başlayabiliriz.

İlk olarak not defterine aşağıdaki kodları yazalım.

	<html>
<head>
<title>İlk web sayfam - www.nuriavci.com</title>
</head>
<body>
Kişisel Web Sayfama Hoşgeldiniz...
</body>
</html>

Sonrasında Dosya > Farlı kaydet menüsünden dosyamıza index.html ismini verelim. ( Buradaki html uzantısı çok önemli.) Şimdide html uzantılı dosyayı nereye kaydettiysek çift tıklayarak açalım ve ilk web sayfamızı görüntüleyelim.

Son olarak sayfamızdaki temel html kodlarını açıklayalım. Buradaki < ve > işaretleri arasına yazılan her bir komuta etiket dediğimizi bir kez daha hatırlatalım.

<html> – Bütün html sayfaları bu etiket ile başlar. web sayfasının başladığını işaret eder.

<head> – Head etiketi sayfanın baş bölümünü işaret eden etiketdir. Sayfa ile ilgili açıklayıcı bilgiler burada yer alır.

<title> – Başlık etiketidir. Buraya yazdığınız yazılar tarayıcının en üstünde görüntülenecektir.

</title> – Başlık etiketi kapatmak için kullanırız. Üstteki başlık etiketinden farkı önündeki / işaretidir. Açılış ve kapanış başlık etiketleri arasına yazılan yazı tarayıcının en üstünde görüntülenir. Google tarafından title etiketi çok büyük öneme sahiptir.

</head> – Baş etiketini kapatır.

<body> – Sayfa içerisinde görüntülenecek olan yazılar ve resimler bu etiketten sonra eklenir. Sayfanın gövde bölümünü oluşturur.

</body> – Sayfadaki gövde bölümünün bittiğine işaret eder.

</html> – Web sayfasının bittiğini işaret eder. Bütün sayfalar bu etiket ile sonlanır.

Yukarıdaki açıklamalar ilk seferde kısa ve karışık gelebilir. Ama genel hatlarıyla web sayfalarının <html> etiketiyle başlayıp </html> etiketiyle bittiğini bilmeliyiz. Ayrıca sayfamızı baş ve gövde olmak üzere iki bölüme ayırıyoruz. Baş bölümünü <head> ve </head> etiketleri arasına yazdıklarımız oluşturur. Sayfanın başlığıda <title> ve </title> etiketleri arasında baş bölümünde yer alır. Sayfaların görünen yüzü ise <body> ve </body> etiketleri arasında yer alan kısmıdır.

Bu açıklama soru işaretlerini biraz azalttı ise sayfamızdaki kodları tekrar görebilmek için html uzantılı dosya üzerinde sağ tıklayıp birlikte aç diyerek not defterini seçelim. Böylece kodlarımıza tekrar ulaşmış olduk. İstediğiniz düzenlemeyi yapıp dosyadan kaydet dedikten sonra sayfayı yeniden açtığınızda değişikliklerin sayfaya yansıdığını göreceksiniz.

Ziyaret ettiğiniz bir sayfanın html kodlarını görmek isterseniz sayfa üzerinde sağ tıklayarak kaynağı görüntüle diyebilirsiniz. Not defteri ile birlikte sayfa kodları karşınıza çıkacaktır. Ziyaret ettiğiniz sayfaya göre bu kodların çokluğu sizi şaşırtabilir hatta bazılarınızı korkutabilir : )

Eğer bu satıra kadar geldiyseniz, izninizle size küçük bir ödev vermek istiyorum : ) Aşağıdaki etiketleri <body> ve </body> etiketleri arasına yazdığınız bir paragraf yazının aralarına ekleyin. Bakalım ne gibi değişiklikler göreceksiniz. Etiketlerin hepsinde kapanış bölümü olmak zorunda değil, eğer varsada doğru şekilde kullanmaya özen gösterin.

<br>

<b>……..</b>

<u>…….</u>

<i>……..</i>

<font color=”red”>…….</font>

<font size=”20″>…….</font>

<font color=”red” size=”20″>…….</font>

<center>…….</center>

<h1>…… </h1> bu etiketi h6 ya kadar kullanabilirsiniz. Ama açılış ve kapanış bölümlerinin aynı olmasına dikkat edin.

Şu ana kadar işin sıkıcı kısmını geride bıraktığımızı bilmenizi isterim. Ödevde bittiğine göre artık bir sonraki derste görüşmek üzere.

4 Yorum

Your Thoughts