Beni Sosyal Medyada Takip Etmek İçin:

Kenan AKSOY19.08.2019 00:14

HTML Nedir?

Web sitesi kurma maceramda ilk karşılaştığım soru buydu.

Teknik bilgisi yüksek bir çok kişinin hazırladığı bir çok içerik bu konuyu detaylı anlatmakta. Ama esas konu basit olarak nedir bu HTML basit olarak?

HTML bir programlama dili değil örneğin. Yani kodlar yazarak kullanıcıdan veri alıp işleyip çıktı alamaz ya da oyun yazamazsınız HTML ile… Burada başka bir soru doğdu “Programlama dili nedir?”

İşte kafa burada karışıyor ama bu başka bir yazının konusu.

Basit olarak HTML sizin hazırladığınız bir içeriğin (yazı, makale, roman, video, ses her türlü içerikten bahsediyoruz) bir web sitesinden kullanıcıların tarayıcılarına yayınlanması için bir düzenleme aracıdır kısaca.

Bir Word dosyasında ya da metin belgesinde bir yazı yazdınız ve bunu sitenize yüklediniz diyelim (site açma, buraya içerik yükleme bambaşka bir konu ama onu da boş geçmeyeceğiz yazacağız? ). Bir kullanıcının bu yazıyı tarayıcısında (Chrome, internet Explorer, Safari, mozilla vb.. tarayıcılar) nasıl görüntüleyeceğini, arama motorlarının yazdığınız yazıyı nasıl göreceğini, arama motorlarında mesela Google’da yazınızın ne yazınca aranacağını ve daha bir çok detayı HTML denilen yapı ile şekillendirirsiniz. Kısaca sizin sunmak istediğiniz şekilde içeriğinizin görüntülenmesi için bu içeriği HTML ile hazırlarsınız. Tarayıcıların içerikleri okuması için standartlaştırılmış bir ortak dildir HTML.

Açılımı ise HYPER TEXT MARKUP LANGUAGE olup Zengin Metin İşaretleme Dili olarak çevirebiliriz kendisini. İnsanlar nasıl ki Türkçe, İngilizce gibi diller konuşuyor ise WEB TARAYICILARI da HTML dilini konuşurlar.

Belki girişi uzun tuttun diyenler olacak ama konu hususunda ilk kez araştırma yapanları bir çok site gezmeden tek yazı ile bir fikir sahibi olmaları amacındayım söyleyeyim. Çünkü bu yoldan henüz çok yeni geçtim…

Özetle:

Gözünüzde büyütmeyin bu mereti. İçeriğinizi tarayıcılarda açılabilir ortak HTML diline tercüme etmek haricinde bir işlevi yoktur kendisinin. Hatta görsel olarak hoş görünür bir içeril hazırlamak için Html’in yancısı CSS ile tanışacağız yakın bir zamanda. HTML boşluksuz, imla işaretleri olmayan bir yazı iken CSS bu yazıyı boşluklar, imla işaretleri ekleyerek anlaması kolay hale getirir; bir çok yerde karşılaştığınız bu ikilinin olayı budur.

Gelelim bu Html’i öğrendik tamam mı diye? Tabi ki hayır. CSS ile hoş bir görünüm kattıktan sonra mesela animasyonlar olsun isteyeceksiniz burada JAVA SCRİPT gibi yapılar girecek hayatınıza. Sonra site süper görünüyor ama okuyan adam yorum yapsın; ya da okuyan kişiden bilgi alıp işleyelim diyeceksiniz burada da PHP, PYHTON gibi gerçek programlama dilleri girecek hayatınıza. Yetmeyecek sitem giderek büyüyor en ufak bir değişiklik için tüm sayfaları açmam gerekiyor diyeceksiniz ve MySQL gibi veri tabanı uygulamaları ile sayfalarınızı DİNAMİK hale getirmek isteyeceksiniz. Ama gözünüz korkmasın zamanla hepsi öğreniliyor, gereken şey ise çaba ve sabır o kadar.

Daha da uzatmadan ilk HTML dosyamızı oluşturalım ne dersiniz?

İlk HTML dosyamızı oluşturalım

Kenan AKSOY11.08.2019 02:14

İlk HTML dosyamız

HTML'nin tarayıcıların anladığı bir dil olduğundan bahsetmiştik. HTML dosyalar .htm veya .html uzantılı olan dosyalardır ve bir tarayıcıda açılmaları gerekir. Dosyanın düzenlenmesi ise örneğin basitçe notepad ile yapılabilir. Yani içeriğimizi note pad ile oluşturup tarayıcıda görüntüleriz.

Şimdi masaüstünde bir metin belgesi oluşturalım. Bunun için masaüstünde sağ tıklayıp Yeni>Metin Belgesi dememiz yeterli. Bu dosyanın adını da deneme.html koyalım. Uzantı değişmesi ile ilgili bir uyarı gelir, burada evet diyelim. Artık HTML uzantılı bir dosyamız oldu. Dosya simgesinin tarayıcınızın (varsayılan chrome veya internet explorer veya başka hangi tarayıcı ise) simgesi olduğunu göreceksiniz. Bu dosyayı çift tıklayarak açarsanız tarayıcıda boş bir sayfa açtığını göreceksiniz. Düzenlemek için ise dosya üzerinde sağ tıklayıp "Birlikte Aç" sekmesinden notepad'i seçmelisiniz. Tekrar belirtmeliyim ki HTML dosyayı görüntülemek ve düzenlenemek farklı şeylerdir. Bir internet sitesini görüntülersiniz ama düzenleyemezsiniz, düzenlemek için bir notepad,notepad++ gibi bir programa ihtiyacınız vardır.

Sıra geldi içerik eklemeye. Dosyayı notepad ile birlikte açıp içine adınızı ve soyadınız yazıp kaydetip kapatın. Dosyayı çift tıklayarak açtığınızda tarayıcınızda isminiz yazdı

TEBRİKLER!!

İlk HTML dosyanızı hazırlayıp çalıştırdınız.
Şimdi soranlar olacaktır. Buraya ne yazsak tarayıcıda çıkacak ise bu iş bu kadar mı? Tabi ki hayır. Diyelim ki adınızı kalın bir punto ile yazmak ya da italik(eğik) yazmak istediniz. İşte bu nokta HTML'in devreye girdiği ilk noktadır. Yani metin düzenlemek. Bunun için HTML kodlarının yapısını da biraz anlatayım.

Tüm HTML kodları < ve > işaretleri ile belirlenir(bu işaretlerin arasına yazılır). İlk olarak belgemizin html belgesi olduğunu tarayıcıya söyleyelim.

<html>

  Bir HTML sayfasında yer alan tüm bilgiler buraya yazılır.

</html>

  Bu noktada sayfamızın HTML sayfası olduğunu tarayıcıya söyledik. En güncel sürüm olan HTML 5 olduğunu söylemek için tek fark ise ilk satırda <HTML> yerine <!DOCTYPE html> yazmak.Tüm html kodları <kodismi> ile başlayıp </kodismi> ile biter. Genel yapı olarak HTML sayfası 2'ye ayrılır; sayfanın başlığı içeriği yazan kişinin bilgilerini içeren <HEAD> kısmı ve sayfanın tüm içeriğini barındıran <BODY> kısmı.
Şimdi de sayfa başlığımıza adımızı yazdırıp sayfa içeriğine "Merhaba Dünya Ben Bir HTML sayfasıyım!" yazalım ki adet yerini bulsun, her kodlama işi "Hello World!" ile başlar malum.

<html>

<HEAD>
<title> Kenan AKSOY </title>
</HEAD>
<BODY>
Merhaba Dünya Ben Bir HTML sayfasıyım!
</BODY>

</html>

Masaüstünde oluşturduğumuz deneme.html dosyasını sağ tıklayıp birlikte aç>notepad diyerek yukarıdaki kodu yapıştırın. Kaydedip dosyaya çift tıkladığınızda tarayıcı sekmesinde adınızın yazdığını; sayfa içeriğinde de Merhaba Dünya BEn Bir HTML sayfasıyım! yazdığını göreceksiniz. Şimdi bu yazıyı kalın ve italik yapalım, yani sitilini değiştirelim. bunun için basitçe iki yapı kullanacağız. <b> etiketi metini koyu yapan bir etikettir. Kullanımı ise <b>örnek metin</b> şeklindedir. Aynı mantık ile bir metni italik yapmak içinde <i> etiketi kullanılmaktadır. Örneğimize uyguladığımızda:

<html>

<HEAD> <title> Kenan AKSOY </title> </HEAD>

<BODY> <b><i>Merhaba Dünya Ben Bir HTML sayfasıyım!</i></b>

</BODY>

</html>

Kodu çalıştırdığınıza sayfada yazının hem italik hem de koyu renk olduğunuz göreceksiniz. İstersek kelime hatta harflere kadar indirgeyerek bu yapıyı kullanabiliriz.

Yeri gelmişken tek kullanılan ve kapatmadan işlem yapılan satır atlama kodumuz <br> ile ilgi biraz bilgi verelim. <body> kısmına yazacağınız yazılarda satır atlayarak, 1'den fazla boşluk koyarak yazabilirsiniz ama tarayıcınız bunları görmeyecektir. Tüm metinlere düz metin muamelesi yapacaktır. Metninizde satır atlatmak istediğiniz yere <br> yazmanız yeterli olacaktır.
Buraya kadar anlattıklarım ile ilgili geniş bir örnek kod vermem gerekir ise:



	<html>
	

<HEAD> <title> Kenan AKSOY </title> </HEAD> <BODY> <b><i>İlk</i></b> kelime italik ve koyudur! <br> <b><i>S</i></b>adece ilk harf italik ve koyudur! <br> <b>Bu metin sadece koyudur.</b> <br> <i>Bu metin sadece italiktir.</i> <br> </BODY>

</html>

Göreceğiniz gibi <br> kodu sayesinde her cümle sonunda bir satır atlamış olduk. <br> kodlarını kaldırarak denediğinizde tüm cümlelerin yana yana yazıldığını görebilirsiniz.

Detay bilgi olarak:

Her kod <örnekkod> şeklinde başlayıp </örnekkod> şeklinde bitiyordu ama istisna durumlar var. <br> kodu bir kapamaya ihtiyaç duymadan tek başına kullanılabilen bir koddur.

Ana Sayfa Teknoloji ve Yazılım Finans Genel Konular Kenan Kimdir? Kenan'a Mail At