Gönderen Konu: HTMLye Giriş (Okunma sayısı 2359 defa)

YaBuBeCaN · « : 10 Haziran 2006 10:13:36 »

Bir Web Sitesini Hep Birlikte Birlikte Adım Adım Derslerle Yapalım

Demekki bir Web Sayfası hazırlamak istiyorsunuz!
İşiniz var..
Ders 1!..
Hemen Notepad'i açın ve başlayalım...

Kod: [Seç]

<HTML>
</HTML>

Terimlerin İngilizcesini söylemek zorundayım zira edineceğiniz bütün yardımcı programlarda İngilizce olacak.Yukarıda Kırmızı ile yazılmış şeylere "TAG" yani "etiket" derler. İlki açılış tag idir, ikincisi kapanış tag i. Kapanış tag i yapmak için açılş tag ine / eklediniz mi yeterlidir. Tag lerin hepsinin olmamakla beraber birçoğunun kapanış tag i vardır.
Tag leri Tarayıcınızla konuşmak gibi değerlendirin, daha doğrusu birşeyler yapmasını tarif ediyorsunuz. Şu anda tarayıcıya bunun 'HTML dökümanının başlangıcı olduğunu' söylediniz (<HTML>) ve bununda 'HTML dökümanının sonu' olduğunu söylediniz. (</HTML>). Şimdi içine birşeyler dolduralım.

--------------------------------------------------------------------------------

Her HTML dökümanı bir çift HEAD tag i ister.

Kod: [Seç]

<HTML>
<HEAD>
</HEAD>
</HTML>

--------------------------------------------------------------------------------

HEAD Taglerinin bizi ilgilendiren tarafı şimdilik sadece TITLE tagleridir.

Kod: [Seç]

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

--------------------------------------------------------------------------------

Ve sayfanın geri kalanı ise BODY ( Gövde )tagleri arasında bulunur. Yani şu anda izlediğiniz sayfa bu tagler arasındadır.

Kod: [Seç]

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

--------------------------------------------------------------------------------

Aman, birşey daha, dökümanınıza TITLE ile BODY tagleri arasına giracak birşeyler ilave edelim.

Kod: [Seç]

<HTML>
<HEAD>
<TITLE>Benim ilk web denemem!</TITLE>
</HEAD>
<BODY>
Merhaba ilkturk.net!
</BODY>
</HTML>

Şimdi save yapın, fakat text dökümanı değil, html dökümanı olarak. index.html olarak yeni bir klasörün içinde save yapın. Eğer bu biraz kafayı karıştırdı ise şöyle yapın... Notepadde Dosyayı tıklayın sonra Farklı Kaydet.
Çıkan diyalog kutusunda -> tıklayarak yeni bir klasör açın, istediğiniz adı verin. Sonra çift tıklayıp açın
Dosya Adı: diyen yere index.html yazın Farklı kaydet: tıklayın. Ama dikkat edin all files(*.*) yada Bütün dosyalar desin.
Enter'a basın ve bitti evet bitti.!

Tebrikler! artık tam fonksiyonlu webdede yayınlanabilecek bir WEB SAYFANIZ oldu. başardınız. İsterseniz SuperTurks veya ilkturk üye alanınızdan file manager ile web alanınıza yollayın. Artık bütün dünya görebilir...

Şimdi tarayıcının adres çubuğuna http://sitenizinadı.ilkturk.org yazın... birşey başarmış olmanın keyfi ile eserinizi seyredin.
Bir sonraki basamak sayfanıza güzel birşeyler koymak olacak.

Bir sonraki bölüme geçmeden iki önemli nokta

BİR: bu yaptığınız bir iskelet HTML dökümanı idi. Şu anda bu okuduğunuz sayfa dahil bütün fiyakalı web sayfaları bu esas tagleri bulundurmak zorundadır.

İKİ: Döküman <TITLE>Benim ilk web denemem!</TITLE> etiketleri arasında yazılı olanlar entepede tarayıcı penceresinin sol üst köşesinde, lacivert çubuğun üzerinde çıkar. İnanmazsanız kafanızı kaldırıp dediğim yere bakın.

YaBuBeCaN · « **Yanıtla #1 :** 10 Haziran 2006 10:28:27 »

DERS 2
*********

Karışıklığa sebep vermemek için <BODY> taglerinin içini yazacağım. Bunadan sonra <HTML>, <HEAD> & <TITLE> taglerini artık yazmayacağım ama siz mutlaka yazın. (ben kısaltmış olmak için yazmıyorum-belirteyim).

Kod: [Seç]

<BODY>
</BODY>

--------------------------------------------------------------------------------

Güzel bir şey yazın.

Kod: [Seç]

<BODY>
Güzel bir şey
</BODY>

Dökümanda herhangi bir şey değiştirdiniz mi mutlaka "Kayıt" ile saklatın, "Yenile" yi tıklayın ve değişikliği hemen gözlemleyinki ne olduğunu anlayabilesiniz

Sanırım ilk öğrenmemeiz gereken background - fon - renginin nasıl değiştiği.

Kod: [Seç]

<BODY BGCOLOR="#FFFF00">
Güzel bir şey 
</BODY>

FFFF00 sarı renginin HEX kodudur. Tıklarsanız burada biraz daha var.

Dilerseniz arkaplanı image - resim - de yerleştirebilirsiniz.
DİKKAT : image -resim- sizin HTML dosyanızla (sayfanızla) aynı folder -klasör- de olmalı. Yoksa resimleriniz çıkmaz. Resimleri göremezseniz endişelenmeyin, mutlaka aynı klasörde değildir veya GIF ve JPG dosyalarınızı Türkçe harfler kullanarak isimlendirmiş olabilirsiniz.
Kodun yazılışı ise aşağıdaki gibidir:

Kod: [Seç]

<BODY BACKGROUND="fon.gif">
Güzel bir şey
</BODY>

Arka Plan rengi

İmage in görünebilmesi için aynı HTML dosyanızla aynı klasörde olması gerek. Bunun en kolay yolu , image ın üzerine sağ tıklayıp birinci derste yaptığınız sayfa bilgisayarın hangi bölümünde ise hemen onun yanına Resmi Farklı Kaydet yapın
--------------------------------------------------------------------------------

Eski düz beyaz ekrana gidelim tekrar.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir şey
</BODY>

İstersek yazıları böyle Kalın yapabiliriz.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir <B>şey</B>
</BODY>

Biz aslında browsere diyoruz ki görünce harfleri kalın yapmağa başla görüncede durdur.

--------------------------------------------------------------------------------

Aynı kural italikler içinde geçerlidir....

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel <I>bir</I> <B>şey</B>
</BODY>

vede.. altçizgi.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
<U>güzel</U> <I>bir</I> <B>şey</B>

Beyaz ekrana tekrar dönelim.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir şey
</BODY>

İstersek tagleri birlikte kullanabiliriz.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir <I><B>şey</B></I>
</BODY>

Bu nested - yani içiçe geçmiş - taglere örnektir. İlerde etiketleri birlikte kullandığınız zaman aşağıdaki şekilde yapın yoksa browserin kafasını karıştırırsınız.

Kod: [Seç]

<THIS><THAT></THIS></THAT> Karışık yani HATALI

Kod: [Seç]

<THIS><THAT></THAT></THIS> Nested DOĞRUSU BÖYLE

--------------------------------------------------------------------------------

Elbette font size too font ebatlarıda değişir... Nasıl mı? - Çok kolay.

Önce taglerini ilave edin...

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir<FONT>şey</FONT>
</BODY>

Sonra SIZE ebat özelliğini belirtin.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT SIZE=6>şey</FONT>
</BODY>

Fontlar 7 ebatta gelir:

minik küçük normal büyücek büyük gerçekten büyük jumboo!
1 2 3 4 5 6 7

Şimdi iki şeyi tartışalım. <TAG> browsere bir şeyi yapmasını söyler ve ATTRIBUTE ise <TAG> içine girer ve browsere nasıl yapacağını söyler.
İkinci nokta ise defaultlar yani varsayılanlar. Eğer hiçbirşey belirtilmemişse browser varsayılan değerleri atar. Mesela font ölçülerinde varsayılan değer 3 tür. bir şey belirtmezseniz browser 3 varsayarak karakterleri yazar.

Her browserin değişik varsayılan font ayarları vardır. Eğer PCnizi fazla kurcalamadı iseniz varsayılan ayarları " Times New Roman 12pt ve siyah renk tir". Ama ARIAL and COMIC SANS gibi değişik fontlarda vardır.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT FACE="ARIAL">şey</FONT>
</BODY>

Tabii fontların gözükmesi için PCnize yüklü olması gerekir. Tekrarlayayım eğer sayfanıza bakan kimse, sizin belirttiğiniz fontlar bilgisayarına yüklü değilse, sadece kendi bilgisayarının varsayılan fontunu görür. Onun için fontlarınızla biraz dikkatli olun.Arial ve Comic Sans MS Windows ile gelen yaygın fontlardandır. Aynı şekilde Impact! da. Yapmanız gereken, işi garantiye almak için birden fazla font belirtmeniz. (Evet! yapabilirsiniz) Bunlardan birini yapın.. Hidee Ho.
Benim gibi jetonu geç düşenlere açıklayayım. Olay şu: Sayfa yüklenirken browser ARIAL arar. Bulursa kullanır, bulamadı ozaman HELVETICA yı arar. Bulursa kullanır olmadı LUCIDA SANSı gider bakar. Onuda bulamazsa çaresiz varsayılan fontu kullanır.

Evvet, eğlenceye geri dönelim..
İsterseniz font rengini değiştirebilirsiniz.

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT COLOR="#FF0000">şey</FONT>
</BODY>

İstersek birden fazla özelliği <TAG> içine yerleştirebiliriz...

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">şey</FONT>
</BODY>

Elbette bu kadar değil!

Kod: [Seç]

<BODY BGCOLOR="#FFFFFF">
Güzel bir <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">şey</FONT></B></I></U>
</BODY>

Tekrar belirteyim, birden fazla tag nested olmalı.

Kod: [Seç]


<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>

Hangisinin önce olduğu mühim değil. Bir şeyi kırmızı ve kalın yapmak için sıra farketmez. İstediğiniz sırada yapabilirsiniz.

Kod: [Seç]

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2> Kendinizi ve browserin kafasını karıştırmak için en kestirme yol, etiketlerin sırasını karıştırmaktır. The fastest way to confuse the browser, not to mention yourself is to overlap the tags...

Kod: [Seç]

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>
--------------------------------------------------------------------------------

Son olarak: Browserin text rengi, link rengi, aktif link rengi ve ziyaret edilmiş link rengi ve ekran fon rengi için varsayılan değerleri vardır. Şöyleki:

Text siyahtır
Linkler mavi
Actif link kırmızı
Ziyaret edilmiş link mor

Eğer ihtiyacınız olursa bunları değiştirebilirsiniz (ihtiyacınız olursa dedim!) Bütün dünya linkleri mavi görmeğe alışmıştır. Lütfen fazla değişiklik yapıp kafaları karıştırmayın. Bütün döküman için varsayılanları <BODY> etiketinin içinde değiştirebilirsiniz.

Kod: [Seç]

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Güzel bir şey
</BODY>

Dersi kapatmadan, bir şeye dikkatinizi çekmek isterim. Eğer bir sayfanın HTML kodunu merak ediyorsanız, görmek için sayfanın üzerinde sağ tıklayıp, Kaynağı Görüntüleyi tıklarsanız açılan Notepad penceresinden HTML kodunu görürsünüz. Ama sağ tıklamaya kimi arkadaşlar çok mühim keşiflerinide saklamışlarsada zamanı gelişnce sayfayı sağ tıklamaya kapatmanında pek çözüm olmadığını öğrenirsiniz. İyi haftalar....

Alıntı yapılan: Belirtilmemiş

ALINTIDIR..

YaBuBeCaN · « **Yanıtla #2 :** 12 Haziran 2006 18:04:41 »

Evet Arkadaslar HTMl derslerine devam Ediyoruz

Komutları öğrenmeye başlıyoruz!

Kod: [Seç]

<HTML> </HTML> Bir web sayfası <html> ile başlar, </html> ile biter.

Kod: [Seç]

<html>
<head>
<title>Buraya sitenin adı yazılır</title>
</head>
<body>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</body>
</html>

Kod: [Seç]

<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.

Kod: [Seç]

<TITLE> </TITLE>

Her sitenin bir adı olması gerekir.

Kod: [Seç]

<title> DayDay </title> Mısra ile Bulut'nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar...

Kod: [Seç]

<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:

YaBuBeCaN · « **Yanıtla #3 :** 12 Haziran 2006 18:08:01 »

İ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.

Kod: [Seç]

<html>
<head>
<title> DayDay </title>
</head>
<body> DayDay seni çok seviyoruz </body>
</html>

İndex 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...

Alıntı yapılan: Belirtilmemiş

ALINTIDIR

....

YaBuBeCaN · « **Yanıtla #4 :** 12 Haziran 2006 18:13:47 »

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.

Kod: [Seç]

 ............... 

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:

Kod: [Seç]

DayDay seni çok seviyoruzYazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın.

Kod: [Seç]

<html>
<head>
<title> DayDay </title>
</head>
<body>

<font size="4" face="Arial" color="red">DayDay seni çok seviyoruz</font>

</body>
</html>

YaBuBeCaN · « **Yanıtla #5 :** 12 Haziran 2006 18:21:09 »

HTML REN KODLARI
JPG Dosyasını indirmeyin Örnek Olarak Görebilmeniz İçin Ekledim.
Kolay Gelsin Esen Kalın

Kodbank İndir

Gönderen Konu: HTMLye Giriş (Okunma sayısı 2359 defa)

YaBuBeCaN

HTMLye Giriş

YaBuBeCaN

Ynt: HTML Dersleri

YaBuBeCaN

Ynt: HTMLye Giriş

YaBuBeCaN

Ynt: HTMLye Giriş

YaBuBeCaN

Ynt: HTMLye Giriş

YaBuBeCaN

Ynt: HTMLye Giriş