HTML(Hiper Metin İşaretleme Dili)
İlk yazımı ilk öğrendiğim yazılım teknolojisi olan HTML anlatarak başlamak istedim. Peki nedir bu HTML ? Basitçe anlatmak gerekirse, vücudumuzdaki iskelet ne ise, web teknolojilerinin iskeleti de HTML’ dir. Şuanda okuduğunuz bu yazıdan, alışveriş yaptığınız sitelere, gezindiğiniz blog sitelerinden, hiç görmediğiniz ama aslında var olan milyarlarca sitenin var olmasını sağlayan, bir işaretleme dilidir. Nasıl yani ? HTML bir işaretleme dili mi? Peki, nedir bu işaretleme dili dediğinizi duyar gibiyim. Yine basitçe anlatmak gerekirse elinize bir kağıt birde kalem alın ve kağıda bir kare çizin daha sonra yanına biraz boşluk bırakarak bir kare daha ekleyin işte eklediğiniz bu kareleri web teknolojilerinde HTML ile yapıyoruz. Yani aslında elimizde ki kağıda noktalar işaretlemiş oluyoruz. Örneğin ilk çizdiğiniz kareye bir yazı alanı işaretlemiş oldunuz ya da bir e ticaret sitesinde ki sepete ekle butonu…
Peki bunu kim akıl edip yapmış derseniz, CERN(Avrupa Nükleer Araştırma Merkezi) de görevli olan Timothy Berners-Lee adlı abimizin 1980'li yıllarda CERN(Avrupa Nükleer Araştırma Merkezi) de yapılan çalışmaları, dokümanları, çalışan bilgilerinin bir birleriyle paylaşabilmeleri için bir sistemin olması gerektiğini düşünerek çalışmaya başlamış ve ortaya HTML doğmuş. Ayrıca, Tim abimiz sadece HTML’yi değil, WWW (World Wide Web)’inde kurucusudur. Bu bilgi belki ilginizi çekebileceğini düşündüğüm için yaptığı diğer çalışmalara da bakmak isterseniz linkine giderek inceleyebilirsiniz. Tim Berners-Lee
Yazıyı çok uzatmamak adına, HTML’nin şuan ki gelişim sürecinden yada yeni sürümünden bahsetmek yerine sizinle birlikte biraz daha Syntax(Söz dizimi)’ine bakalım istedim. Hiç bilmeyen birine nasıl anlatılırsa o şekilde anlatmaya çalışacağım.
Masaüstüne yeni bir metin belgesi oluşturuyoruz.
Metin belgesinin adını istediğiniz şekilde değiştirebilirsiniz. Ben burada index ismini veriyorum.
Temel HTML yapımızı oluşturuyoruz. Burada bir sonraki adıma geçmeden önce, yukarıdaki yapıdan biraz bahsetmek istiyorum. HTML dili ile ilgili bilmemiz gereken bir kaç kural vardır. Bunlardan ilki bazı etiketler dışında etiketlerin açılışı ve kapanışı söz konusudur. Diğer bir kuralı ise HTML dili, hiyerarşisi olan bir dildir. Yukarıdaki görünen yapı bizim en temel yapımızı oluşturur ve etiketlerin sıralamasının değiştirilmesi hata almamıza veya çalışmamasına sebep olabilir. Bir başka kural ise biz yeni bir etiket oluşturamayız. Örneğin <merhaba></merhaba> diye bir etiket yoktur. İlerleyen zamanlarda Javascript ile bunun yapılabileceğini görüyor olacağız ancak şu aşamada bunun böyle bilinmesinin daha doğru olacağı kanısındayım. Şimdi gelelim yukarıda ki gördüğünüz etiketlerin anlamlarına ve işlevlerine yazımın ilk aşamasında kağıda çizdiğimiz karelerden bahsetmiştik, burada ki <!DOCTYPE html> bizim kağıdımızın türünü belirliyor a4 kağıdı a3 kağıdı gibi düşünebilirsiniz. Daha sonra <html> etiketimiz ise bizim kağıdımızın etrafındaki en geniş kareyi temsil ediyor. Hemen sonrasında gelen <head> etiketimiz ise kağıdımızın başlığını, hangi dosyaları içereceğini, karakter kodunu ve bir çok farklı etiketi içeriyor ancak şuan yeni öğrenme aşamasında olduğumuz için sadece <title> etiketine yer verdim. Peki nedir bu <title> etiketi “<title>Başlık</title>” bizim için internet sayfamızın başlığını oluşturmuş oluyor. Bir resimde örneklemek gerekirse
Diğer bir etiketimiz <body> Türkçesi gövde anlamına gelen bu etiketimiz bizim için kağıt örneğinde olduğu gibi göstermek istediğimiz tüm kareleri, tüm yazıları temsil etmiş oluyor, yani öğreneceğimiz bir çok etiketi <body> etiketimiz içerisinde yazıyor olacağız. <h1> etiketimiz ise bir yazının başlığını temsil ediyor örneğin;
MERHABA DÜNYA, MERHABA MEDIUM
şeklinde ekrana büyük harflerle bir başlık yazmış oluyoruz.<title> etiketinin özelliğiyle karıştırılmaması gerekir <title> etiketi sekmemizde ki başlığı belirlerken <h1> etiketimiz ise sayfamızın içerisinde ki başlığı temsil ediyor.
Şimdi gelelim son aşamaya, tüm bu kodları yazdık ancak nasıl görüntüleyeceğiz derseniz aşağıda ki adımları takip etmeniz yeterli olacaktır.
Evet artık oluşturduğunuz metin dosyasında şuan varsayılan tarayıcınızın iconunu görüyorsunuz, açtığınızda ise <h1> etiketinin içerisine yazdığınız metni görüntülüyor olacaksınız.
Basitçe HTML’ i anlatmaya çalıştım. Umarım faydalı olmuştur, bir sonraki yazımda görüşmek üzere…
