SEO Blog, SEO Dersleri

Html Nedir? Ne İşe Yarar? Html Kodları Kullanımı Nasıldır?

Teknoloji dili kodlardan oluşmaktadır. Kelimeler yerine, öncelikli olarak kodlar üzerinden arama yapılır. Web site yapıyorsanız, her şeyi bilseniz bile html kodları bilmiyorsanız büyük bir eksiğiniz var demektir. Bu yazıda             html kodları nedir, ne işe yarar ve nasıl kullanılır gibi bilmeniz gereken tüm bilgilere yer vereceğiz.

Html nedir?

Bu kodlar, web sitesi yapımında temel taşları oluşturmaktadır. Yani bunun eksikliği demek, büyük bir kayıp. Tüm site ve yazılar bu kodlar üzerine kurulmaktadır. Html kelimesinin orijinal dilinde karşılığı ‘’Hyper Text Markup Language’’ olarak geçmektedir. Bu kelimeleri Türkçe’ye çevirdiğimizde bunu Hiper Metin İşaretleme Dili olarak isimlendirebiliriz. Kavramlar ağır gelebilir ancak, html kodları bu yapılardan oluşmaktadır. Kodların uzantıları genel olarak .html ya da .htm şeklinde görünmektedir.

Ancak yukarıdaki uzantıların aksine farklı adlar alabilir. Bunlar: html, htm, aspx, php olarak karşımıza çıkar. Bunlar giriş sayfalarının farklı isimleri olarak bilinmektedir. Uygun uzantının seçilmesi durumunda, sayfalar daha rahat açılacaktır. Genel olarak bilgi edindiğinize göre html kodları konusuna detaylı bir giriş yapalım.

html nedir ne ise yarar html kodlari kullanimi nasildir

Html kodları nedir ve ne işe yarar?

Web sayfaların dili olarak isimlendirilen html, web sitelerinin kodlama sistemini oluşturmaktadır. Bu nedenle, bu sektörde bir şeyler yapmak istiyorsanız bu dilden çok iyi anlamanız gerekiyor. Bir kere öğrendikten sonra, oldukça basit gelecek. Ve rahatça web sitesi geliştirebileceksiniz. Html ve css bu noktada oldukça önemlidir. Css konumuzdan farklı olduğu için, şimdilik ilk olarak html üzerinden bilgi vereceğiz.

Html kodları yapabilmek ve kodlama işlemlerini tamamlayabilmek için uygulama gereklidir. Bu süreçte bize yardımcı olacak Html kod için uygulama Notepad. Bu uygulama ile tüm yazıları yazacağız ve işlemleri buradan gherçekleştireceğiz.

html nedir ne ise yarar html kodlari kullanimi nasildir

Html sayfası nasıl oluşturulur?

Html sayfası oluşturmak için bazı karakterlere aşina olmanız gerekiyor. Html kodları sürecinde her zaman karşınıza çıkacak olan karakter < > bu olmaktadır. Bazı kavramların kenarına koyarak kodlamayı bu şekilde  oluşturacağız. Bunlara geçmeden önce bazı html tagları hakkında bilgi verelim. Bu tagları kullanarak, sayfaları oluşturup, kodlayacağız.

Örnek html tagları: html, head, body ..vs Bu tagları daha da uzatabiliriz.

html nedir ne ise yarar html kodlari kullanimi nasildir

Kod oluştururken yapılması gereken işlem çok basit. yukarıda gösterdiğimiz karakterlerin arasına, bu html taglarını yerleştiriyoruz.

Örneğin:

<html>

<head>

<title> HTML Nedir </title>

</head>

<body>

<font size = “8” color = “green”> HTML Nedir </font>

</body>

</html>

html nedir ne ise yarar html kodlari kullanimi nasildir

Yukarıdaki örneğin detaylı incelenmesi

Bu sadece örnek bir kodlama yöntemi. Burada gördüğünüz gibi, tüm karakterler iç içe. Bu da kodlamanın iç içe karakterler yardımıyla yapıldığını göstermektedir.

  • Dikkat ettiğiniz gibi yukarıdaki örnekte, en başta ve en sonda <html> </html> bu html tagları yer almaktadır. Tüm kodlamalarda sistem bu şekildedir. Başta ve sonda bu html tagının yer alması gerekmektedir. Birinde bulunan ‘’/’’ işarete dikkat edin. Sonraki gelenlerde bu işaret bulunmaktadır.
  • Html kodları arasında bu koddan sonra gelen html tagı <head> </head> olmaktadır Her zaman ikinci sırada bu gelmektedir. Gördüğünüz gibi aynı şekilde, sonraki html tagında ekstra bir karakter kullanılmıştır. Bu head tagı, yazının başlık kısmını temsil etmektedir.
  • Üçüncü sırada gelen tag ise <body> </body> tagı olmaktadır. Bu da aynı şekilde, biri başta biri sonda olacak şekilde yer almaktadır. Bu kısım ise yazının gövde bölümünü temsil etmektedir. Yani yazının içeriği ile ilgili her şeyi bu alana kodluyoruz. Boyut, renk, görünüm vs tüm bilgileri bu alan içine kodluyoruz. Yukarıdaki örnekte gördüğünüz gibi yazı puntosu ve yazı rengi örnek olarak verilmiştir. Body bölümü içerisinde yer almaktadır.
  • Yukarıdaki örnekte head tagından sonra, görüldüğü gibi title tagı gelmektedir. <title> HTML Nedir </title> bu şekilde gösterilmektedir. Bu title kısmı yazının başlığı anlamına gelmektedir. Bu başlık, yazınız okunurken en başta görünen yerdir. Biz HTML nedir başlığını yazarak, kodlama işlemini tamamladık. Başlık kodlamasını bu şekilde, başta ve sonra title kodları olacak şekilde kolayca yapabilirsiniz.
Bu Yazımızıda Hemen İnceleyin:  Inbound Pazarlama

 

Yazının başında bu kodlamaları yazmak için Notepad uygulamasını kullanacağımızı belirtmiştik. Tüm kodlamaları buraya yapmanız gerekiyor. Yukarıda bahsettiğimiz kodlamaları tamamladıktan sonra farklı kaydet diyerek kaydetmeniz gerekiyor. Burada kayıt işlemi yaparken dikkat etmeniz gereken bir nokta var. Farklı kaydet dedikten sonra, kayıt türü bölümüne ‘’tüm dosyalar’’ seçeneğini seçeceksiniz. Ve en sonuna .html uzantısını ekleyerek kaydedeceksiniz. Bu şekilde kaydettiğiniz zaman, tüm arama motorları üzerinde kolay bir şekilde açılacaktır. Sorun yaşamadan kullanabileceksiniz.

 

Buraya kadar kodları detaylı bir şekilde anlattığımızı düşünüyoruz. Daha iyi anlamanız adına biraz daha bahsetmek de fayda var.

 

html nedir ne ise yarar html kodlari kullanimi nasildir

 

Html kodlarını kullanma

Yazının bu kısmına kadar html kodları nedir ve nasıl kodlanır genel hatlarıyla öğrendiniz. Bir örneğe daha yer vererek, bu konuyu çok daha iyi anlamanıza yardımcı olacağız. Yapacağımız uygulamada, bizi bir web sayfasına götürmesi için gereken komutları öğreneceğiz. Yani işlem sonunda o linke tıkladığımızda, bizi yaptığımız sayfaya götürecek. Yapılacak işlemler:

  • Tekrardan Notepad uygulamasına girin. Kodları buradan yazacağız. İlk olarak hangi kodla başlamamız gerekiyordu? Tabiki de <html> Yazının en sonunda ise kapanışı bu </html> kodu ile yapacağız. <html>  bu kodu yaptıktan sonra işleme devam edelim.
  • İkinci olarak normalde head tagına yer vermemiz gerekiyordu. Ancak biz bu örnekte başlık bölümünü atlayarak, direkt gövde kısmına geçmek istiyoruz. Bunun için html tagı sonrasında, body tagı ile devam edeceğiz.
  • Üçüncü olarak bu body tagları arasına <a href = ”SEOadımları.html”> SEO Adımları Sayfası </a> yazın. (SEO adımları olarak belirttiğimiz kısım, bize kalmış. İstediğinizi yazabilirsiniz.) Siz bu işlemi yaptığınız zaman, SEO adımları sayfası şeklinde bir link ortaya çıkacak ve ziyaretçiler bu linke tıklayarak, sayfaya ulaşmış olacak.

Mantığını bir türlü anlayamadığımız web siteler bu şekilde kodlanmaktadır. Bu şekilde açılmaktadır. İki örnekle html kodları nasıl çalışır sorusuna cevap verildi. En azından yeni başlayanlar için birazda olsa zihinde somutlaşacaktır. Kodlama hakkında genel bilgileri aldığınıza göre, bazı uygulamalar hakkında bilgi verebiliriz.

html nedir ne ise yarar html kodlari kullanimi nasildir

Html Viewer uygulaması nedir?

Bu alana ilgi duyuyorsak ve kodlama hakkında yeni yeni bilgiler ediniyorsak bu uygulama oldukça önemli. Html Viewer uygulaması web sitelerinin nasıl kodlandığını ve hangi html kodlarının olduğunu doküman şeklinde gösteren bir sistemdir. Kod yapısını merak ettiğiniz bir web site var. Bunun adres bilgilerini, bu uygulamada arattığınızda yapısı görünecektir. Bu şekilde hangi kodlama yapıldığında, nasıl göründüğünü daha rahat bir şekilde anlayabileceksiniz.

Bu alanda detaylı bilgiye sahip kişiler için belki de çok önemli değildir. Ancak kod yapısına yeni aşina olan kişiler için, oldukça işlevsel bir uygulama olarak karşımıza çıkıyor. Sizde bu alanda yeniyseniz ve kodlamalar yabancı geliyorsa, bu şekilde aşinalık düzeyinizi arttırabilirsiniz.

Bu uygulamaya Google Play ya da App Store üzerinden ulaşıp, cihazınıza indirebilirsiniz. Böylece daha kolay şekilde inceleme fırsatı bulacaksınız.

html nedir ne ise yarar html kodlari kullanimi nasildir

Html tarayıcı uygulaması ne işe yarar?

Html tarayıcı uygulamaları, web sitelerinde yer alan kodlama sistemlerini, anlaşılır hale getirmeye yarar. Yani html kodları insanların anlayacağı bir dile dönüşür. Bu şekilde baktığımızda, tüm web tarayıcılar bu işlemi yapmaktadır. Örneğin bir arama motoru, yeni yayınlanmış bir yazıyı kod yapısı üzerinden tarar ve inceler. Uygun bulması dahilinde indeksler ve bizlere anlayabileceğimiz düz yazı şeklinde gelir. Bu web tarayıcılarının bilmemiz gereken ortak bazı özellikleri vardır. Bunlar:

  1. Html ve http uyumunu sağlama ve bunlar arasında bulunmakta olan protokollerle ilgilenme
  2. Web tarayıcılara yüklenen dosyaları açabilme, okuyabilme ve bunları kaydetme olanağı sunma
  3. Tüm metin ve videoları, kullanıcıların açıp görebilmesini sağlama. Bunlar hakkında bilgi edinme ve kaydetme olanağı sunma.
  4. Bir sayfada aradığınız bölümü ya da kelimeyi bulabilme olanağı sağlar. Aynı zamanda kelime aramalarında kaç adet olduğu gibi bazı bilgilere ulaşabilirsiniz.
  5. Sürekli kullanmakta olduğunuz siteleri sık kullanılanlar haznesine ekleyebilirsiniz. Aynı zamanda geçmiş aramalarınızın hepsi kaydedilir. İstediğiniz zaman bunları silme gibi imkanlar tanır.
  6. Web site ya da web site üzerindeki programlara dosya yükleme. Bu dosyaları başkalarıyla paylaşma, kaydetme ya da indirebilme olanağı sunar.
  7. E-Posta hesabını kullanabilme. Web tarayıcılar üzerinden iletişim numarası olan kişilerle iletişim kurabilme imkanı sunar.
  8. Web site üzerinde yer alan herhangi bir sayfanın çıktısını kolay bir şekilde alabilme imkanınız vardır.
  9. İnternetiniz olmasa bile bazı sitelerde girdikten sonra çevrimdışı kalabilme olanağına sahipsiniz. (İstisna durumlar vardır.)
Bu Yazımızıda Hemen İnceleyin:  Aramalarda Haritalı Çıkma İpuçları ve Taktikleri

Bu özellikler kapsamında, genel olarak web siteleri ne işe yarar sorusuna cevap verdik. Tüm bu işlemleri yaparken temelde kod yapısından faydalanır. Arama motoru örümcekleri bu kodlar yardımıyla, sitelerinizi inceler ya da size istediğiniz bilgileri sunabilme imkanı olur. Kısaca web site üzerinde yapılan her işlemin html kodları ile bir bağlantısı vardır.

Web tarayıcı ile ilgili bilmeniz gereken bölmeler

Yukarıdaki yazıda web tarayıcılar ne işe yarar sorusuna cevap bulduk. Bu web tarayıcıların, bazı bölmeleri vardır. Bunların kavramsal olarak isimlerini bilmeniz, profesyonel olmak açısından önemlidir. Web tarayıcılarla alakalı bu kavramlar:

html nedir ne ise yarar html kodlari kullanimi nasildir

Adres çubuğu:

Bu kısım bilgi aratırken ya da aradığınız sitenin adresini yazmaya yarayan bölüm. Bu kısma adres bilgilerini yazarak, arama motorunda sonuçların görüntülenmesini sağlarsınız.

Arama çubuğu:

Bu kısım arama motorları ile ilişkili olan bölümdür. Yine aynı şekilde aratma yapacağınızda buralardan faydalanabilirsiniz. Aynı şekilde burada bilgi yazdığınızda, istediğiniz sonuçlar görüntülenecektir.

html nedir ne ise yarar html kodlari kullanimi nasildir

Yenile – dur- ana sayfa:

Ana sayfa butonuna bastığınızda, hangi sayfada olursanız olun, web tarayıcı sizi ana sayfaya götürecektir.

Yenile butonuna bastığınızda, sayfa yeniden yüklenir. Bu şekilde yaptığınızda, bazen donma ya da internet sorunlarında oldukça faydalı olacaktır.

Dur butonu, sayfa yüklenirken durmasını sağlar. Buraya bastığınızda, sayfa yüklemeyi tamamen bırakıp donmuş bir şekilde kalacaktır. Sonrasında tekrardan yenile diyerek sayfanın tekrar yüklenmesine yardımcı olabilirsiniz.

İleri ve geri:

İleri ve geri butonları sayfalar arasında geçiş sağlar. Bir sayfada arama yaptınız diyelim. Geri dediğinizde sizi bir önceki arama yaptığınız sayfaya getirecektir. Geri dedikten sonra ileri dediğinizde de eski sayfanıza kolay bir şekilde geri dönebileceksiniz. Ancak bu ileri geri alma işlemleri bazı açılardan sakıncalı olabilir. Sayfada bir işlem yapıyorsanız ve bunu kaydetmemişseniz, sayfa geri geldiği için işlem kaydedilmeyebilir.

Bu nedenle yeniden yapmak durumunda kalabilirsiniz. Bu gibi durumlarda daha hassas davranma noktasına özen gösterin. Bu sistemlerin hepsinin temelinde html kodları ve diğer kodlar yer almaktadır. Görüldüğü gibi web site denilince bundan sonra akla ilk gelen kod yapısı olmalıdır.

html nedir ne ise yarar html kodlari kullanimi nasildir

Geçmiş:

Geçmiş bölümü belli kategorilere ayrılır. Bir gün, bir hafta, bir ay ya da bir yıl. Bu şekilde farklı zamanlarda yaptığınız aramalar bu bölmede saklanır. Geçmiş bölümüne geldiğinizde, geçmişte yaptığınız tüm aramaları görebilirsiniz. Ben geçmişte yaptığım aramaları kimsenin bilmesini istemiyorum diyorsanız, tarama verilerini toplu olarak silebilirsiniz. İsterseniz kayıtlı şifreleri vs de aynı şekilde silebilirsiniz. Bu şekilde kimse geçmişte yaptığınız aramalardan haberdar olmayacaktır.

Durum çubuğu:

O anda ziyaret edeceğiniz sayfaya bağlanılacağını gösteren bölüm. Aynı şekilde sayfayı ya da yazıları buradan büyüyüp küçültebilme imkanına sahipsiniz.

Bu kısımda bilmeniz gereken tüm web tarayıcı bölmeleri hakkında bilgi verdik. Bundan sonra bu kavramlar geçtiğinde hiçbir şekilde yabancılık çekmeyeceksiniz. Bu web tarayıcılar sizinde bildiğiniz gibi en başta Google Chrome. Sonrasında Yaani, Mozilla Firefox, İnternet Explorer, Opera gibi web tarayıcıları bunu takip etmektedir.

Sonuç

Yazımızda yeni başlayan kişiler için html kodları ile ilgili detaylı olarak bilgi verdik. Html kodları nedir, bu kodlar nasıl yazılır, web sitesi sisteminde nasıl görüntülenir gibi sorulara cevap verdik. Artık html kodları ve web tarayıcı sistemi bölmeleri hakkında yeterli bilgiye sahipsiniz. Daha iyi bir sonuç için, bu alanda uzman olan kişilerden yardım almak faydalı olacaktır.

Bir sonraki yazıda görüşmek üzere…

 

 

 

 

 

 

Html Nedir? Ne İşe Yarar? Html Kodları Kullanımı Nasıldır?
5 (100%) 2 votes

Bir önceki yazımız olan Backlink Nedir? Nasıl Alınır? Yükselmeye Yardımcı Olur Mu? başlıklı içeriğimiz backlink hakkında bilgiler verilmektedir.

Bir cevap yazın

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