Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

WWW(Word Wide Web) nedir ?



WWW Nedir ?

WWW yani "Word Wide Web" günümüzde kulladığımız web sitelerinin standardıdır. Günlük hayatta en çok kullanığımız tabiri ise WEB 'dir. Yani aslında web sayfası derken "WWW" içerisinde geçen Web kelimesini kullanıyoruz. Peki nedir bu Web ?

Web 'in olmadığı yıllarda internet savunma amaçlı kullanılmaktaydı. İlk olarak internet ABD savunma bakanlığı tarafından ARPANET adında bir ağ şeklinde kullanılmaya başladı ve amacı sadece çeşitli bilgileri karşı tarafa göndermekti. Bu bilgiler de yalnızca metin içeriyordu.
Daha sonra internet 'e olan ilgi artmış ve çeşitli eğitim kuruluşlarının da ağ üzerine dahil olmasıyla internet geniş bir alana hızla yayılmaya başlamıştır.

WWW 'in İcadı

İnternet 'in yaygınlaşmasıyla beraber geniş bir ağ oluşmuş ve bu ağ üzerinden çeşitli bilgileri ve içeriği yayınlama sorunu oraya çıkmıştı. İnternet 'in ilk zamanlarında bir web sayfası yayınlamak şimdiki kadar cazibeli değildi. Çünkü ses,video,animasyon(multimedya içerikler) gibi içerikler internet ortamında paylaşılamıyordu.



Bundan dolayı bir gün Tim Benners-Lee adında bir bilim adamı CERN adında bir labaratuvarda internet 'teki bu sorunların çözümü için yeni bir fikir ortaya attı ve 1989 yılında günümüzde kullandığımız HTML adındaki işaretleme dilini icat etti.
Daha sonra 1994 yılında W3C (WWW Consortium/WWW Konsorsiyumukurulmuş, HTML ve zamanla da CSS icat edilerek bu dillerin uluslararası bir standart haline gelmesi sağlanmıştır.





HTML icat edildikten hemen sonra da milyonlara ulaşmış olan ilk WEB sayfasına aşağıdan ulaşabilirsiniz.

HTML Editörleri


Not defteri veya Metin Düzenleyici kullanarak HTML yazma

Web sayfalarını profesyonel editörler kullanarak oluşturabilir veya düzenleyebilirsiniz. Ancak HTML öğrenirken basit yazı editörleri olan Not Defteri(PC) veya TextEditör(Mac) kullanmanızı öneririm.

Not Defteri veya TextEdit ile  ilk Web sayfanızı oluşturmak için lütfen aşağıdaki dört adımı uygulayın.


1. Adım: Not Defteri'ni açın (PC)

Windows üzerinden:

Başlat > Programlar > Donatılar > Not defteri

1. Adım: TextEdit'i açın (Mac)

Finder'ı açın > Uygulamalar > TextEdit

Ayrıca, dosyaları doğru kaydetmek için bazı tercihleri ​​de değiştirin.
Tercihler> Biçim > "Düz Metin" seçeneğini seçin.

Daha sonra "Aç ve Kaydet" in altında "HTML dosyalarında zengin metin komutlarını yok say" yazan kutuyu işaretleyin.

Sonra kodu yerleştirmek için yeni bir belge açın.

2. Adım: Örnek HTML Kodu Ekleme

Aşağıdaki örnek HTML kodunu yada istediğiniz herhangi bir kodu açtığınız belge içerisinde yapıştırın.

<!DOCTYPE html>
<html>
<body>

<h1>Yeni bir başlık</h1>

<p>Yeni bir paragraf.</p>

</body>
</html>

Önizleme:












3. Adım: HTML Sayfasını Kaydetme

Dosyayı bilgisayarınıza kaydedin. Dosya > Farklı kaydet deyin.

Dosyayı "index.htm" olarak adlandırın ve kodlamayı UTF-8 (HTML dosyaları için tercih edilen kodlama) olarak ayarlayın.

Not: Dosya uzantısını .html veya .htm olarak kullanabilirsiniz. İkisi arasında hiç bir fark yoktur.












Adım 4: HTML Sayfasını Tarayıcınızda Görüntüleme

Kaydettiğiniz HTML dosyasını tarayıcınızda açın (dosyaya çift tıklayın veya sağ tıklayın - "Birlikte aç" ı seçin.

Sonuç olarak şöyle görünecek:













HTML 'i başarılı bir şekilde çalıştırdınız. Sonraki derslerde kodlarınızı dosyalar halinde kaydederek klasör içerisine arşivleyebilir ve tekrar tekrar gözden geçirebilirsiniz.

HTML 'e Giriş


HTML Nedir ?

HTML, Web sayfalarını oluşturmada kullanılan standart bir biçimlendirme dilidir. Genel olarak HTML 'in özellikleri şunlardır:
  • HTML, açılımı Hyper Text Markup Language 'dir.
  • HTML, işaretlemeyi kullanarak Web sayfalarının yapısını yorumlar.
  • HTML öğeleri etiketlerle gösterilir.
  • HTML etiketleri "başlık", "paragraf", "tablo" gibi içerik parçalarını etiketlemektedir.
  • Web tarayıcıları ise HTML etiketlerini görüntülemez, bu etiketlere göre sayfayı yorumlayarak kullanıcıya sunmaktadır.

Öncelikle basit bir HTML örneği gösterelim:

See the Pen wpBJNE by Gokhan (@Gokhank58) on CodePen.



Örneğin Açıklaması

<!DOCTYPE html> Bu sayfanın HTML5 olarak bildirildiğini belirtir.
<html> HTML sayfasının kök unsuru olarak açılan etikettir. Tüm etiketler <html> içerisine yazılır.
<head> Belgenin ilgili meta bilgileri içerir.
<title> Doküman için bir başlık belirtir.
<body> Görünen sayfa içeriklerinin olduğu kısım.
<h1> Bir başlık tanımlar.
<p> Bir paragraf tanımlar.

Yukarıdaki örnekte gördüğünüz gibi bazı temel etiketler var ve bu etiketlerin içerisinde de kullanılan başka etiketler var. Bu yapıyı aşağıda inceleyeceğiz.

HTML Etiketleri

Bazı istisnalar dışında HTML etiketleri genellikle bir açma ve bir kapama etiketinden oluşur. Aşağıdaki örneği inceleyin.

<etiketadı> içerik buraya girilir... </ etiketadı>


İnternet Tarayıcıları

İnternet tarayıcılarının(IE, Chrome, Firefox, Safari) amacı, HTML belgelerini okumak ve görüntülemektir. Tarayıcı HTML etiketlerini kullanıcıya göstermez. Bu etiketleri yalnızca sayfanın nasıl görüntüleneceğini belirtmek için kullanır ve ekranda gösterir.



HTML Sayfa Yapısı

Aşağıda bir HTML sayfa yapısının görselleştirilmesi verilmiştir:
<Html>
<Head>
<title> Sayfa başlığı </ title>
</ Head>
<Body>
<h1> Bu bir başlık </ h1>
<p> Bu bir paragraf. </ p>
<p> Bu bir başka paragraf. </ p>
</ Body>
</ Html>

Yalnızca <body> etiketi içerisindeki alan ekranda görüntülenir.


<! DOCTYPE> Bildirim Etiketi

<! DOCTYPE> etiketi tarayıcıların belge türünü belirlemelerine ve web sayfalarını doğru şekilde görüntülemelerine yardımcı olur.

Sayfanın en üstünde (herhangi bir HTML etiketinden önce) yalnızca bir kez eklenmelidir.

<! DOCTYPE> bildirimi büyük / küçük harf duyarlı değildir.

HTML5 için <! DOCTYPE> bildirimi şöyledir:

<!DOCTYPE html>

HTML Sürümleri

İnternetin başından beri HTML 'in bir çok sürümü vardır:

Versiyon Yıl
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014