HTML Giriş - SiberMega - Basit Yazılım ve Tasarım Eğitimleri

Popüler Yazılar

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

23/08/2021

HTML Giriş

HTML Eğitim serimizin ikinci dersi ile herkese merhaba diyoruz. Bugün sizlere gerçek anlamda HTML ile kodlamaya başlamadan önce; HTML'ye kısa bir giriş yaparak, HTML'nin ne işe yaradığından bahsedeceğim.

HTML Dersleri Bölüm 2: HTML Giriş


HTML Nedir?

  • Hyper Text Markup Language.
  • Web sayfalarının hazırlanmasında kullanılır.
  • Web tarayıcıları HTML kodlarını işleyerek, web sayfasına dönüştürürler.
  • Web sayfalarının iskeletini oluşturur.
  • Resim, yazı ve video gibi içeriklerin web sayfasına konumlandırılmasını sağlamaktadır.
  • Konumlandırılan içeriklerin web sayfalarında doğru bir şekilde görüntülenmesini sağlar.
  • Arama motorlarına web siteleri hakkında bilgi verir.
  • Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir.
  • Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
  • Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
  • Bir HTML dosyası basit bir text editör ile oluşturulabilir.

Test Etmek İstermisiniz?

Şayet Windows işletim sistemini kullanıyorsanız bilgisayarınızdaki not defteri uygulamasını açın.

Şayet MAC kullanıyorsanız "SimpleText" isimli uygulamayı kullanabilirsiniz.

Ayrıca OSX işletim sistemini kullanıyorsanız, "TextEdit" açın ve şu adımları izleyin:

"Format" menüsünü açın ve "Rich Text" ifadesi yerine "Plain Text" ifadesini seçin. Ardından "Text Edit" menüsünün altında yer alan "Preferences" seçeneğini açın ve "Ignore rich text commands in HTML files" ifadesini seçin. Şayet bu anlatmış olduğum değişiklikleri gerçekleştirmezseniz HTML dosyanız çalışmayacaktır.


Aşağıda yer alan kodu açtığınız editör içerisine yazarak kodlamaya başlayabilirsiniz:

HTML Kod Örneği



Dosyayı "sayfam.htm" olarak kaydedebilirsiniz.
Şimdi kaydettiğiniz dosyayı çift tıklayalım. Ve kodumuzun tarayıcıdaki çıktısına bir göz atalım.

HTML Kod Örneği Çıktısı



Örneği Analiz Edelim

HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının aktif olacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler. <html> </html> etiketi açılıp kapanabilen bir etikettir.


<head> ve </head> etiketleri arasında kalan kısım ise başlık bilgilerini ifade eder. Bu bilgiler tarayıcı penceresinde gözlenmez. 


<title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.


Not: title etiketi ve head etiketi birbirine karıştırılmamalıdır. Birisi tarayıcıda gözükürken diğeri ise tarayıcıda gözükmez.


<body> ve </body> (gövde) etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.


<b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir. Kısaca bu etiketler arasına girmiş olduğunuz ifadeler kalınlaşacaktır.



HTML Yazılırken Dikkat Edilmesi Gereken Noktalar:

  • <...> şeklinde yazılan ifadelere etiket (tag) denir.

  • Açılan etiketlerin kapatılması gerekir. </...> (Ama istisna olan etiketler de vardır.

  • HTML etiketleri yazılırken küçük harf tercih edilir.

HTML Yazılırken Dikkat Edilmesi Gereken Noktalar:


Web Sitelerinin Çalışma Mantığı:

  • Host: C:/sibermega/index.html

  • Domain: https://sibermega4.blogspot.com/

web siteleri host ve domain ismi verilen bu iki bölümden oluşmaktadır. Bir web sitesinin başarılı bir şekilde çalışabilmesi için bu iki gereksinimede ihtiyaç vardır.


Web Sitelerinin Çalışma Mantığı:

Domain: Hatırlanması zor olan IP adresleri yerine kullanılması için intarnet otoriteleri tarafından geliştirilen bir isimlendirme yöntemidir.


Hosting: Web sayfanıza ait tüm dosyaların, yılın 365 günü bir sunucuda saklanması ve erişime açık tutulması hizmetidir. Yıllık olarak yenilenmesi gerekir.



Web Editörleri (Web Derleyicileri):

  • Windows Notepad
  • Notepad++
  • Brackets
  • Visual Studio Code
  • Sublime Text
  • Atom
  • Adobe DreamWeaver

gibi birçok web editör aracı mevcuttur bu araçların hepsinin artışarı ve eksileri vardır. Ancak HTML'ye yeni başlayacaksanız kesinlik kullanmanızı tavsiye ettiğim; web editör araçları (Windows Notepad, Notepad++ veya Brackets) olur bu üç web editörününde kullanımı oldukça rahattır. 

Hiç yorum yok:

Yorum Gönder

Görüş ve Düşüncelerinizi Bizimle Paylaşmayı Unutmayın.

Post Top Ad

Responsive Ads Here