Data WebMaster
& KONULAR &
  HtmL TaNIMI
 

HTML NEDİR

HTML (HyperText Markup Language / Hareketli-Metin  İşaretleme Dili)basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit                         dildir. Örneğin okuduğunuz bu sayfa HTML dili  kullanılarak hazırlandı. Siz de browser'ınızı (Internet Explorer, Netscape Navigator,..) kullanarak bu sayfayı                         ekranınızda görüntülüyorsunuz. Tanımda geçen "internet  dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet                         bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz. HTML, programlama dilleri                         (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.
Dilden ziyade kabaca metinleri ya da verileri   biçimlendirmek, düzenlemek için kullandığımız komutlar  dizisi bile diyebiliriz HTML için. HTML Öğreniyorum yazı dizimizi okuyarak bu dil hakkında hiçbir bilginiz olmasa bile yazının sonunda öğrendiklerinizle siz de kendi sayfalarınızı  hazırlayabileceksiniz. 

Hazırsanız buyurun başlayalım...

HTML'DE TEMEL UNSURLAR

Bu sayfaya geldiğinize göre HTML öğrenme işinde ciddisiniz demektir. HTML nispeten kolay bir dildir dedik. Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un                         notepad'i ile dahi halledebilirsiniz. Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanı sıra rutin bazı işlemleri                         kolaylaştıran editörler(HotDog, HomeSite..) diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla                         uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..).

Benim yeni başlayanlara tavsiyem Windows'un notepad'i. Bu işlerin                         nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahele etmeniz                         gerekebilir. Üstelik görsel editörler bazen istenmeyen kodlar ekliyorlar, bu da döküman boyutunun büyümesi demek. Burada şunu da belirtmek gerekiyor; browserlar arasındaki yorum farklarından dolayı sayfanız bir Browser'da iyi görünürken bir başka browser'da hiç istemediğiniz bir şekilde görüntülenebilir. Hele yeni bazı teknikleri (css, dhtml gibi)sadece MS Internet Explorer 4 ve üstü desteklerken Netscape henüz bu teknikleri tam olarak desteklemiyor. Yine de piyasayı neredeyse yarı yarıya paylaşan bu iki browser'ın birbirlerine üstün olduğu yönleri var

Sonuçta, ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz başarı  sayfanızı ziyaret eden kişinin kullandığı browser'a mahkum. Hatta ziyaretçiniz browser'ına verdiği bir talimatla "yalnız şu fontu kullan", "grafikleri görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gitti demektir. Yine de bu kadar karamsar olmayalım. Bu kadar genel bilgi yeter. Bir sonraki konuda ilk HTML   sayfamızı yapıyoruz.

İLK SAYFAM

İşte ilk HTML sayfamızı yapıyoruz. Öncelikle çalışmalarınızı saklamak için                             kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela html_ders" olsun. Daha sonra bu ad bize lazım olacağından kolaylık olması için siz de                             yeni klasöre bu adı verebilirsiniz.   
 

 Şimdi de bu klasörü açıp yeni bir "metin belgesi" oluşturun (sağ fare/Yeni/Metin belgesi).  Dosyayı çift tıklayarak açın ve şunları yazın:

 

<html>

 

<head>

 

<title>İlk Sayfam</title>

 

</head>

 

<body>Sayfama Hoşgeldiniz</body>

 

</html>



HTML'ye Giriş

HTML Dersleri

    HTML (Hyper Text Markup Language) sizlere internet sitesi hazırlamanızda yardımcı olur. Bu dil anlaşılması oldukça kolay, fazla karışık olmayan bir dildir. Günümüzde site yapmak için Frontpage, Dream Weaver gibi programlar kullanılıyorda olsa, profesyonel bir web sitesine imza atmak için bu dili bilmek gereklidir. HTML belgesini not defterinde hazırlayıp sonunu .htm ya da .html olarak kaydetmeniz yeterlidir. Sonra kodların tarayıcı tarafından okunması ve size o şekliyle ulaşmasına tanık olacaksınız. Kısaca bahsedelim...
* * *
TAG (Element)'larla ilgili Genel Bilgi
    Bu HTML belgemizin ana dilidir. Açılan ve Kapanan Anahtarlar yardımıyla belgemiz tamamlanır. Örneğin: <ELEMENT>içerik</ELEMENT> Şeklinde açarız bilgiyi gireriz ve mutlaka kapatırız. Eğer Elementin kendi özelliğinde kapatılması yoksa tek olarak elemente yer veririz. Bunun gibi durumlarda element sonuna / işareti ekleriz. Örneğin: <BR /> gibi...
* * *
Element Özelliklerini Belirtmek
    Elementlere ait özellikleri ilk açtığımız element içinde ozellik="deger" şeklinde tarayıcıya bildiririz. Örneğin: <ELEMENT ozellik="deger">icerik</ELEMENT>
* * *
<HTML> Elementi
    Bu HTML belgemizin ilk ekleyeceğimiz ve son kapatacağımız TAG'ıdır.
* * *
<HEAD> Elementi
    HTML TAG'ından sonra gelir ve içerikten önce kapatılır. Bu element sitemiz ile ilgili dil, tanıtım, stil vb. konularda bilgilerin tutulacağı bölüm olacaktır.
* * *
<TITLE> Elementi
    HEAD TAG'ından sonra getirilmelidir. Sayfamızın başlığını yazarız. Bu başlık tarayıcının en üst sağ köşesinde görünecektir.
* * *
<BODY> Elementi
    HEAD TAG'ının bitişi ile açılır ve HTML TAG'ının kapanmasından önce kapatılır. BODY TAG'ı belge içeriğini sunduğumuz kısımdır. Sayfamızın arkaplanı, yazıtipi rengi, link renkleri, kenarlıkları vb. konularda bilgi vermemiz içindir.
* * *
Açıklama Eklenmesi
    Açıklama hem işimizi kolaylaştırmak hemde kaynağı inceleyen birine yardım vermek için kullanılması gereken kodlardan biridir. Bu açıklamayı yazmak için <!-- ve --> elementlerini kullanmalıyız. Açıklama bu iki elementin ortasına gelir. Unutmayın bu açıklama tarayıcıda görünmez ama kaynakta görünecektir.
~ HTML Belgemiz ~
* * *
Yazıların Şekillendirilmesi
    Yazı Şekillendirirken <B>, <EM>, <STRONG>, <I>, <SUP>, <SUB>, <DEL>, <CODE>, <U>... gibi TAG'ları kullanmaktayız...     Aşağıdaki Örneği ve Sonuçlarını inceleyin...
    NOT: <P> paragraf başlangıcı demektir. </P> ile kapatılır.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~

Bir örnek Kalın Yazıya

Bir örnek Vurgulu Yazıya

Bir örnek Güçlü Yazıya

Bir örnek Sağa Yatık Yazıya

Bir örnek Normalden Yukarıda Yazıya

Bir örnek Normalden Aşağıda Yazıya

Bir örnek Üzeri Çizilmiş Yazıya

Bir örnek Kod Yazısına

Bir örnek Altı Çizili Yazıya


* * *
<FONT>
    Yazı Şekillendirirken yazı tipi, yazı boyutu gibi özellikleri <FONT> elementi kullanarak şekillendiririz. Örnek verecek olursak...
    NOT: <BR /> satır atlama isteğini belirtir. Orjinal kullanımı <BR /> olup kapatılmaz.
    Özellikleri:
    size="deger" Yazının boyutudur. 0 ile başlar ve yükselir.
    color="deger" Yazının rengidir. Hex Renk Kodu ya da ingilizce rengin adı olabilir.
    face="deger" Yazıtipidir. Arial, Tahoma, Verdana vs. bunlar birer yazıtipidir.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~

Times New Roman tarzında bir yazı...

4 boyutunda yazı...
3 boyutunda yazı...
2 boyutunda yazı...
1 boyutunda yazı...

Bu yazı #FF0000 rengindedir.
Bu yazı 'kırmızı' (red) rengindedir.

Bu yazı 2 boyutunda ve mavi renklidir


* * *
<A HREF=""> (Bağlantı-Link Oluşturmak)
    Bu element, bir bağlantı oluşturmamızda bize yardımcı olmaktadır. Href="deger" linkimizin nereye varacağıdır. Tırnak işaretleri arasına 3 şekilde gideceği yeri yazarız. Eğer gideceği yer belgemizin içinde ise #gidecegiyer, yerel bir dizinde ise gidecegisayfa.htm ya da web sayfaları arasında ise http://www.siteniz.com şeklinde yazılabilir. Aşağıda örneklerle anlatılanları daha iyi anlayacaksınız.
    Özellikleri:
    name="deger" vereceğimiz iç link (# ile başlayan) için bir ad belirlemektir.
    title="deger" fare ile yazının üstüne geldiğinizde görülecek başlıktır.
    target="deger" sayfanın hangi sayfada açılacağını söylememize yarar. Eğer yeni bir sayfada açacaksak burayı farklı isimlerle anlatırız. Hiç kullanmazsak aynı pencerede açılır. Özellikle frame (çerçeve) kullanıyorsak çok işimize yarar.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~



Belgemizdeki 1 numaralı noktaya gider.
Sayfanın bulunduğu yerdeki qbindex.htm belgesine gider.
Href'de belirtilen sayfaya gider.

Fare ile yazının üstüne tutulduğunda açıklama görülür.

Bir E-Mail Bağlantısı Örneği...


* * *
<IMG SRC=""> (Resim Eklemek)
    <IMG> elementi sayfamıza resim eklememiz için gereklidir. Ekleyeceğimiz resmin adresini SRC="" özelliğindeki tırnak işaretleri arasına yazacağız.
    Özellikleri:
    alt="deger" resmimizin üzerine geldiklerinde görünecek açıklama.
    width="deger" pixel olarak resmin genişliğin sayısal değeri.
    height="deger" pixel olarak resmin yüksekliğinin sayısal değeri.
    border="deger" resmin çerçeve kalınlığı. Kullanılmazsa link durumu hariç görülmez.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~


Açıklama




Yandaki resim sağ tarafa hizalanmış bir resim. Kullandığımız align özelliğine bakarsanız right yazdığını göreceksiniz. Alternatif şekilleri center (orta) ve left (sola) dir.


    Sonraki ders görüşmek üzere...

 
  BuGüN 4 ziyaretçiKişi Siteye Girdi.____ ©2008 Data WebMaster