HTML-KODLAMAYA GİRİŞ

Merhaba dostlar. Pandemi durumunda evimize kapandığımız bugünlerde, bana çok zormuş gibi gelen ama aslında oldukça kolay ve eğlenceli olan kodlamayı öğrenmeye başladım. İlk öğrenmek istediğim dil HTML dili ile başlamak istedim. Ve öğrendiklerimi kodlamaya merak salan ama hiçbir bilgisi ve referansı olmayan veya bilgilerini tazelemek isteyen okurlarımızla paylaşmak istedim. Peki kodlamaya başlamadan önce nelere sahip olmamız gerekiyor? Tabii ki “Algoritma” terimini iyice kavramamız gerekiyor. Peki algoritma ne demek? Gelin beraber buna bakalım.

Algoritma nedir?

Algoritma, yazılımın her yerindedir. Bir sorunu çözebilmemiz veya belli bir amaca ulaşabilmek için tasarladığımız yola, işleri sırasıyla yapmaya algoritma denir. Amacımıza ulaşabilmek için işlediğimiz çözüm yolları ve sıralamaları belirleriz. Ve bu sırayı takip ederek en mantıklı çözüme ulaşmaya algoritma denir. E tabi kafanız karışmış olabilir. Aklınızdaki boşlukları örnekler ile dolduralım.

Örneğin bir balık yemek istiyorsunuz. Bunun için bir süpermarketten balık almamız gerekiyor. Ve sırasıyla bu adımları izleriz; balığı almak için süpermarkete git, balığı satın al, eve git, balığı pişir, tabağa koy ve yemeye başla. Bu şekilde algoritma kullanarak amacımıza ulaştık.

Algoritmayı öğrendiğimize göre artık HTML’nin ne olduğunu öğrenebiliriz.

HTML NEDİR? NEREDE KULLANIRIZ?

HTML “Hyper Text Markup Language” kelimelerinin kısaltılması olan işaretleme dili de denen bir dildir. Web sitelerini oluşturan kodları yazdığımız dildir, bu dilin çalışabilmesi için Chrome, Firefox, Safari, Edge, Opera gibi tarayıcılardan herhangi birine sahip olmamız gerekiyor.

Günlük hayatımızda gezindiğimiz web sitelerin tümü HTML alt yapılıdır. Bir web sitesi arka planda PHP, ASP.Net, Python gibi sunucular tarafından çalışabilecek diller ile yapılabilir. Ancak bu diller de HTML yapısında bir içeriği oluşturur ve tarayıcınıza gönderir. Yani kısacası tüm web siteleri HTML dili ile çalışır.

Peki biz bu dili nasıl yazacağız? Nereye yazacağız? Merak etmeyin HTML için yüksek özellikli bir bilgisayara ihtiyacımız yok. Bize şimdilik gereken tek program zaten bilgisayarınızda halihazırda bulunan not defteridir. Her şey hazırsa o zaman gelin beraber HTML ile web sitesi yazmaya başlayalım.

HTML BAŞLANGIÇ | TEMEL ETİKETLER

Öncelikle yapmamız gerekenler gizli olan dosya uzantılarımızı açmak. Bunun için sırasıyla bu adımları izleyin.

Dosya Uzantıları Gösterme Windows 10 ve 8

Öncelikle herhangi bir dosyayı açın örneğin Bilgisayarımı açın.

windows 10 dosya adı uzantıları gösterme

Görünüm yazan sekmeye gelip Dosya adı uzantıları kutucuğunu açın. Hepsi bu kadar artık dosyalar uzantıları ile beraber gözükecektir.

Dosya Uzantıları Gösterme Windows 7 ve Vista

Öncelikle herhangi bir dosyayı açın örneğin Bilgisayarımı açın.

windows 7 dosya uzantıları gösterme

Sol üstten Düzenle menüsünü açıyoruz, ardından Klasör ve arama seçenekleri’ne tıklayalım. Daha sonra Görünüm sekmesine gelip Bilinen dosya türleri için uzantıları gizle seçeneğinin tikini kaldırarak onaylayın. İşlemimiz bu kadar.

Şimdi yapmamız gereken şey bir Not Defteri açmak. Ve açtığımız not defterine bir ad verelim. Ad verirken dikkat etmemiz gereken şey Türkçe karakter kullanmamak. Açtığımız not defterinin “.txt” olan uzantısını silip “.html” olacak şekilde değiştirelim. Rutin bir uyarı verecektir “Evet” deyip  geçebiliriz. Artık kod yazmamız için hiçbir engel kalmadı.

HTML yazarken belli bir şema vardır. Bu şemanın ilk etiketi <html> etiketidir. Etiketlerin bir kısmı kapatılan etiketlerdir bir kısmıda kapatılmayan etiketlerdir. <html> etiketi kapatılan bir etikettir. Nasıl yani? Şöyle ki, bir etiketi kapatmak isteyince “<” işaretini koyup “/” işaretini koyuyoruz ardından etiketi yazıp “>” işaretini koyuyoruz örneğin html etiketini kapatalım. <html> yazarak etiketi açmış oluyoruz. </html> yazarakta bu etiketi kapatmış oluyoruz.

Tüm etiketlerimiz <html> </html> etiketleri arasına yazılır. <html> etiketini açtıktan sonra yaklaşık 10 satır aşağı inip </html> yazarak etiketimizi kapatabiliriz.

<html>

 

 

 

</html>

Gibi. Tabii ki html etiketinin sayfamızda gözle görünür bir etkisi yoktur.

Peki ikinci etiketimiz nedir? İkinci etiketimiz ise <head> etiketidir. Bu etiket sayfamıza bir başlık vermemiz için bir olanak sağlar. Ve kapatılan bir etikettir.

 

 

Peki head etiketini nasıl kullanacağız?

<head> etiketini html etiketinin hemen altına aynı şekilde açıyoruz ve iki satır aşağı inip kapatıyoruz (</head>).

<html>
<head>

</head>

 

</html>

Şimdi de sırada başlığı yazmakta ama tabiki olduğu gibi öylece yazamayız. “head” Etiketlerinin arasındaki boşluğa yeni bir etiket ekliyoruz. Bu etiketimiz ise “title” etiketimizdir. Bu etikette kapatılan bir etikettir. ama öğrendiğimiz diğer etiketlerin aksine alt alta değilde yan yana yazılan bir etikettir. Başlığımızı “title” etiketlerinin arasına yazabiliriz artık.

<html>
<head>
<title>Başlık</title>
</head>

 

</html>

Ve artık sitemizde gözle görülen bir değişikliği var. Heyacan verici değil mi?

Bir sonraki etiketimiz “body” etiketidir. Bu etiket sitemizin içine eklediğimiz tüm yazıları, fotoğrafları, videoları, linkleri yazacağımız etikettir. Aynı zamanda kapatılan bir etikettir.

<html>
<head>
<title>Başlık</title>
</head>
<body>
Merhaba Dünya!

 

</body>
</html>

Sizinde yazdıklarınız yukarıdaki gibiyse sitenizi artık deneyebilirsiniz. Not defterini kaydedip .html uzantılı dosyamızı bir tarayıcı ile birlikte açarsanız sitenize erişebileceksiniz. Şimdilik bu kadar dostlar bir daha ki dersimizde görüşmek üzere! Sorularınızı aşağıdan yorum olarak belirtebilirsiniz.

Etiket(ler): , , , , , , , , , , , , , , , , , , , , , .Yer işareti koy Kalıcı Bağlantı.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir