en temel html bilgileri

mumutti

Yeni üye
5 Eki 2006
3
0
bilmeyenler için:
HTML nedir?

NCSA yani National Center for Super Computing Association* değişik firmalar ve bölgeler arasında belge çeşitliğine bir son vermek için hiper metin veya hiper text olarak bilinen HTML işaretleme dilini tanımladı. Bu dil tarayıcı adı verilen yazılımlarda sayfanın gereken biçimde görünmesini sağlar. Sayfa hangi yazılım kullanılırsa kullanılsın aynı biçimde görünecek. Bugün HTML geliştirme ve yaygınlaştırma işini içine sindiremeyen bazı tekel firmalar kendi kodlarını yerleştirmeye çalışsalar dahi HTML salt metin belgelerden sonra dünyada kendi yerini edindi. Tarayıcı yazılımınız sayfanın kaynak kodunu gösterme seçeneği varsa beğendiğiniz bir sayfanın nasıl yazıldığını görebilirsiniz. Örneğin Netscape'de View Source seçeneğini seçerek şu an okumakta olduğunuz sayfanın HTML kodunu görebilirsiniz. Bu kodlardan oluşan belgeye HTML belgesi denmektedir.
HTML belgelesinin tarayıcı tarafından uygun bir biçimde görünebilmesi için uygun şekilde başlamalı ve sonlanmalı. Tüm sayfa bu başlangıç ve son arasında yer alır.
Bir HTML sayfasının en basit biçimi şu şekilde:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
Sayfanın ana bölümü burada olacaktır.
</BODY>
</HTML>
Burada dikkat etmeniz gereken bir şey var. Başlama işaretleri köşeli parantez içinde (< >)* bitiş işaretleri (</ >) kesmeli köşeli parantez içinde yer alıyor.
Örneğin HTML sayfasının başlangıcı <HTML> ile açılır* </HTML> ile kapatılır.
Başlamak için yukarıdaki kodu kopyalayıp istediğinizi yere yapıştırabilirsiniz. Bu belgeyi salt metin olarak ve *.htm uzantısı ile kaydedin. Belgenizi artık herhangi bir tarayıcıda görebilirsiniz.
HTML öğrenmenin en iyi yolu onu kullanmaktır. Kullandıkça kullanımını bilmediğiniz yeni işaretleri öğrenecek daha gelişmiş sayfalar yapabileceksiniz. Kullandığınız metin düzenleme programında bul/değiştir özelliği bulunması toplu değişiklikler yapmanızı kolaylaştırır. Yaptığınız her sayfa ile yeni şeyler öğreneceksiniz.



Başa dön
Doküman Renkleri

Sayfadaki ana renkler* arkaplan görüntüsü ve bazı diğer öznitelikler <BODY> işareti tarafından kontrol edilirler.
Dokümandaki öznitelikler <BODY> gibi basit bir işaretin şu şeklide değiştirilmesi ile oluşur.
<BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">
bgcolor: doküman arkaplan rengi
text: dokümandaki yazının rengi
link: linklerin rengi
vlink: daha önce ziyaret edilmiş linklerin rengi
alink: üzerine tıklandığında aktifleşen linkin alacağı renk.
Bünların hepsini aynı renk yapmayın yoksa hiç bir şey göremeyebilirsiniz. Bunların herhangi birini kullanabilir veya sadece <BODY> yazarak hiç birini kullanmayabilirsiniz. Bu durumda sayfa görüntülenirken kullanıcı tarayıcısının önceden ayarlı renkleri kullanılacaktır. Renkleri değiştirmek için sadece yukarıdaki xxxxxx leri istediğiniz renk ile değiştirin.
İşte kullanabileceğiniz bir kaç renk:
Beyaz = FFFFFF
Sarı = FFFF66
Kırmızı = FF0000
Gri = CC9999
Mavi = 0000FF
Yeşil = 00FF00
Siyah = 000000
Turkuaz = 00FFFF
Majenta = FF00FF
Mor = CC33FF
Açık Mavi = 00CCFF
Renklerde ilk iki harf maviyi* ikinci iki harf yeşili ve üçüncü iki harf kırmızıyı kontrol eder. Her renk Hexadesimal yani 16 tabanlı olarak belirtilir ve 00'dan FF'ye kadar 256 farklı değer arasında değişebilir. Bu şekilde belirtilebilen renk sayısı 16.777.216'dır.RENKLER hakkında internet'te daha fazla bilgi bulabilirsiniz. Beğendiğiniz bir sayfanın renklerini taklit etmek için tarayıcıdaki "View Source" komutunu kullanarak <BODY> içindeki renkleri kopyalayabilirsiniz.
Öneri başlamak için en basit renkleri kullanabilirsiniz:
<body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000">
Deneme ve yanılmalarınız devam ederken* bir süre sonra body işaretlerinden oluşan kendi kütüphaneniz olacaktır.
Body içinde belirtilebilen özniteliklerden biride kenarlardır:
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> Margins

Arkaplan görüntüleri* sayfa duvarkağıdı

Sayfada düz arkaplan yerine renkli görüntüler kullanmak için background="resimadı" işareti kullanılmaktadır. Örneğin sayfanızda zemin.jpg adlı resimi kullanmak için
<BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600">
işaretini kullanabilirsiniz.
Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.
background işareti bgcolor ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor renginde görünecektir.

Yatay çizgiler

sayfa içerisinde istediğiniz yere <hr> (horizontal ruler) işareti ile yatay bir çizgi atabilirsiniz. Bu çizgi aşağıdakine benzeyecektir:

Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:
Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE
Bu özellikleri birleştirerek:
<hr size=10 align=left noshade width=50%>
aşağıdaki gibi bir çizgi yapmak mümkün:
Sola dayalı* 10 piksel genişliğinde* gölgesiz* ve sayfa genişliğinin yarısı genişlikte bir çizgi.

Web sayfalarında gördüğünüz bir çok süslü çizgi <hr> işareti ile değil* resimler kullanılarak oluşturulmuştur. Başa dön
Sırasız listeler

Kendi sırasız listelerinizi <ul> (unordered list) işaretini kullanarak yaratabilirsiniz. Nokta olması istenen her liste maddesi başında <li> bulunmalıdır. Komut biçimi şu şekilde:
<ul>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ul>
Sırasız liste şu şeklide görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sırasız listeler istendiğinde iç içe döngülendirilebilir.
<ul>
<li>Birinci madde
<li>İkinci madde
<ul>
<li>İkinci madde birnici şık
<li>İkinci madde ikinci şık
</ul>
<li>Üçüncü madde
</ul>
Döngülendirilmiş liste şu şekilde görünecektir.
Birinci madde
İkinci madde
İkinci madde birinci şık
İkinci madde ikinci şık
Üçüncü madde

Sıralı veya Numaralı listeler

Sıralı listeler yaratmak için <ol> (ordered list) işaretini kullanabilirsiniz.
<ol>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ol>
Listeniz aşağıdaki gibi görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sıralı listeler sırasız listeler gibi döngülendirilebilirler. Ayrıca sıralı ve sırasız listeler ile karışık iç içe döngüler oluşturmak mümkündür. Başa dön
Tanım listeleri

Tanım listesini en iyi açıklamanın yolu bir örnek göstermektir.
<dl>
<dt> Elmalar
<dd> Elmalar hakkında bilgi burada verilmektedir.
<dt> Armutlar
<dd> Armutlar hakkında bilgi burada verilmektedir.
</dl>
İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir. Elmalar Elmalar hakkında bilgi burada verilmektedir. Armutlar Armutlar hakkında bilgi burada verilmektedir. <dl> bunun bir liste olduğunu gösterir.
<dt> bunun bir liste terimi olduğunu gösterir.
<dd> bunun bir liste maddesi olduğunu gösterir. Başa dön
Başlıklar

Tarayıcılar altı başlık düzeyini kabul ederler.
<h1>Birinci düzey başlık</h1>
<h2>İkinci düzey başlık </h2>
<h3>Üçüncü düzey başlık </h3>
<h4>Dördüncü düzey başlık </h4>
<h5>Beşinci düzey başlık </h5>
<h6>Altıncı düzey başlık </h6>
İşte yukarıda tanımlanan başlıklar aşağıdaki gibi görüneceketir. Birinci düzey başlık

İkinci düzey başlık

Üçüncü düzey başlık

Dördüncü düzey başlık

Beşinci düzey başlık

Altıncı düzey başlık

Ortalama

Resim veya metinleri <CENTER> işaretleri arasına alarak ortalayabilirsiniz.
Örnek olarak
<center> Bu yazı ortalanacaktır </center>
yazısı aşağıdaki gibi görünecektir:
Bu yazı ortalanacaktır.


Ortalanan birden fazla satır varsa başlangıç ve bitiş işareteri arasındaki tüm satırlar ortalanır.
HTML 3.0'da Dvisin içerisinde align: "Left"* "Right" ve "Center" tanımlı. Html 4.0 Tag'ı olan Align:"Justify" bir çok Browserde sorun yaratabilir. Bu nedenle sayfanız düzgün görünsün istiyorsanız bir süre için kullanmamanızı öneririm.
<DIV ALIGN="CENTER">Bu yazı ortalanacaktır</DIV> ve
<CENTER> Bu yazı ortalanacaktır </CENTER> arasındaki tek fark <CENTER> işaretinin tüm tarayıcılar tarafından desteklenmesidir.

Ön biçimli metin:

Bazen daha önce yazdığımız ve biçimlendirdiğimiz metinleri HTML içerisinde biçimleri bozulmadan kullanmak gerekir. Bu durumlarda metin parçasını <pre> işareti içine koymak yeterlidir.
Örnek: b e nd a ğ ı nık b i rada m ı mbır ak ındağ ı nıkk a l s ı n<pre> içine aldığımız metinlerin biçimi korunmuş olacak. Başa dön
Koyu* eğik* vs.

Bir metin parçasının biçimini bu işaretler ile kolayca değiştirebilirsiniz.
Koyu görünmesini istediğini metin parçasını <b> işaretleri içine yerleştirin.
<b> Koyu yazı </b>
Yazınız aşağıdaki gibi görünecektir.
Koyu yazı
Eğik görünmesini istediğiniz yazıyı <i> işaretleri arasına yerleştirin.
<i> Eğik yazı </i>
Yazınız aşağıdaki gibi görünecektir.
Eğik yazı
Hem eğik hem koyu görünmesini istediğiniz yazıda her iki işareti kullanabilirsiniz.
<b><i> Koyu ve Eğik Yazı</i></b>
Yazınız aşağıdaki gibi görünecektir.
Koyu ve Eğik Yazı
Her iki işareti kullandığınız durumda işaretleri açma sırasına göre kapatmalısınız. Örneğin Koyu yazı eğikten önce açılmışsa* sonra kapatılmalıdır. Aşağıda anlatılan işaretler için aynı kurallar geçerlidir.
Diğer komutlar gayet basi ve kullanımı diğerleri gibidir. Her birinden birer örnek yeter diye düşünüyorum.
<U>Alt Çizgili</U>
Alt Çizgili

<STRIKE>Üstü Çizgili</STRIKE>
Üstü Çizgili
<Strong>Güçlü</Strong>
Güçlü
<EM>Vurgu</EM>
Vurgu
<BIG>Büyük</BIG> İç içe döngü OK
Büyük
<Small>Küçük</Small> İç içe döngü OK
Küçük
<SUB> Alt yazı </SUB>
Alt yazı Alt yazı
<SUP> Üst yazı </SUP>
Üst yazı Üst yazı
<FONT SIZE=+1> </FONT> Font boyutunu arttırır.
<SAMP>Örnek Kod </SAMP>
Örnek Kod
<CODE>Örnek Kod </CODE>
Örnek Kod
<TT>Teletype </TT>
Teletype
<VAR>Değişken Notu </VAR>
Değişken
<CITE>Kısa Not </CITE>
Kısa Not

Göz kırpan şeyler:

Basit bir işaret ile metinde bir noktanın yanıp sönerek göz kırpmasını sağlayabiliriz.
You can make text or graphics blink on and off by surrounding them with tags.
İşte işaret:
<blink> Yanıp sönerim! </blink>
Ve yazı böyle görünecektir.
Yanıp sönerim!
Bunu fazla yapmamaya dikkat edin. Başa dön

Yazıtipi rengi:



<FONT COLOR=#KKYYMM> Yazının bulunduğu yer </FONT> Yazı rengini değiştirir
İlk iki harf kırmızı pixeli* orta iki harf yeşil* son iki harf mavi pixel renk değerini belirler. Değerleri 0-F arası değişebilir. 000000 hepsi sönük yani siyah* FFFFFF hepsi tam şiddet yani beyaz...
<FONT COLOR="#000000">Siyah</FONT>
<FONT COLOR="#FF0000">Kırmızı</FONT>
<FONT COLOR="#00FF00">Yeşil </FONT>
<FONT COLOR="#0000FF">Mavi</FONT>
<FONT COLOR="#FFFF00">Sarı</FONT>
<FONT COLOR="#FF00FF">Mor</FONT>
<FONT COLOR="#00FFFF">Turkuaz</FONT>
<FONT COLOR="#FFFFFF">Beyaz</FONT> |||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||

Yazı Tipleri:

<font face="Kidprint">Font biçimi </font> ile yeni nesil tarayıcılar için yazıtipi tanımı yapılabilmesine rağmen bu yazıtipinin aynı zamanda diğer işletim sisteminde ve kullanıcıda bulunması gerekir. Bu kısıtlılık nedeniyle sayfaları hazırlarken kullanıcının varsayılan yazıtipi ile okunabilmesi için mümküm olduğu kadar yazıtipleri arasında az geçiş yapmak gerekir. Örnekteki yazının düzyün okunabilmesi için sistemde kidsprint yazıtipi bulunması gerekir. Çok özel biçimse ve yazıtipi efektleri kullanmak gerekiyorsa .gif formatında düşük renk sayısı ile yazılması* yazının her sistemde düzgün ve aynı biçimde görünmesini garanti eder.

Paragraf ve satırbaşı

Tarayıcılar sizin sayfanızı nasıl düzenlediğinize bakmazlar. Onlar işretlere bakarlar. Satırbaşı ve paragraf işaretleri olmadığı sürece metin tek paragraf halinde devam eder. Bu işaretleri gördüklerinde satırlar erkenden son bulur.
<br> yani satır başının yaptığı etki metin parçasını boşluk bırakmadan yeni bir satırdan devam ettirmesidir.
<p> yani paragraf işaretinin tek farkı yeni başlayacak metin parçasından önce bir satırlık boşluk bırakmasıdır.


Belge içerisinde başka yere atlama

Belge içinde gidilecek yerleri tanımlayıp bir tıklama ile sayfanın o bölümüne gidilmesini sağlayabilirsiniz.
Bu işlemi geçekleştirmek iki aşamalıdır.
1. Hedef belirlemek Sayfada gidilecek noktaya hedef veya target adı verilmektedir. Gidilecek her noktanın bir adı olmalıdır. Bu adı daha önce tanımlamak gerekmektedir. <a name="hedef_adi"> Bu tanım gidilecek yerde olmalıdır.
2. Bağlantı yaratmak: Link içinde iki şey'i tanımlamak gerekmektedir. Tıklanacak metin* ve gidilecek nokta
<a href="#hedef_adi">Tıklanacak yazı</a>
Link olarak tanımladığımız yazı* altı çizgili ve <body> içinde tanımlı link rengi ile görünecektir. Üzerine tıklandığında kullanıcı hedef olarak tanımladığımız noktaya gidecektir. Bu sayfadaki Başa dön işaretleri ve içindekiler bölümü bu tarz bir sayfa içi atlamanın örnekleridir.
Aynı sistemde başka dokümana atlama

Tarayıcının aynı sistem üzerinde bulunan başka bir belgeye gitmesini sağlamak oldukça kolay. Gidilecek belgeniz üzerinde çalıştığınız doküman ile aynı dizin içerisinde bulunuyorsa sadece belgenin adını yazmak yeterlidir.
<a href="boludagece.jpg"> Bolu'da Gece </a>
Bolu'da Gece
Bunun için sadece belgenin bulunduğu dizinin göreceli veya mutlak konumu ve gidilecek dokümanın adını belirtmek yeterlidir.
<a href="göreceli_yol_ve_dosaya_adi">Link Yazisi</a>

Örnekler:
Kök dizinde bulunan varsayılan belge:
<a href="/">Ana sayfa</a>
Bu sunucu üzerindeki Ana sayfa
Sunucu üzerinde /SoHo/Museum/9404/ dizininde bulunan barutcu.jpg resim belgesi
<A HREF="../SoHo/Museum/9404/barutcu.jpg"> Şinasi Barutçu</A>
Şinasi Barutçu
Mevcut dizinin altında olan eski altdizin'indeki aramis.htm belgesi
<A HREF="eski/aramis.htm"> Aramis </A>
Mevcut dizinin bir üst dizininde bulunan scandisk.txt saltmetin belgesi
<A HREF="../scandisk.txt">Scandisk Hakkında</A>
gibi ::)
 

ByNostraViaN

Yeni üye
31 Ağu 2011
1
0
Bidahakine

Daha Basit Yazabilirdiniz Yahut Bölümlere Ayırabilirdiniz.Ama Yinede Uğraşmışşınız İşime Yarıyanlar Oldu.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.