HTML Dersleri – 1 Bölüm

Merhabalar , Ben volkan tunç 20 senedir web tasarımıyla uğraşıyorum .Web Tasarımı hakkında herhangibi bir eğitim almadım internetten bulduğum bilgilerle kendi kendime kodlamaya girdim. Düşündüm ve karar verdim Artık bildiklerimi kendi anladığım şekilde sizlere aktarmaya. Belirtmek istiyorum profosyonel değilim bu işlerle hobi olarak uğraştığım için lazım olan bilgilere yoğunlaştım . Dersimize Başlayalım artık .

HTML NEDİR?

Tanımı Önce netten aratıp buraya Yazıcam

Hiper Metin İşaretleme Dili web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5’tir. HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz.

Vikipedi Kaynağı tarafından yapılan yazı HTML Tanımı olarak göze çarpıyor.Benimde buna ek olarak HTML Tarayıcılar tarafından notpad gibi bir basit bir uygulamayla bile yazilabilen web yazılım dili diyebilirim. Yanlış anlatmış yada yorumlamış olabilirim ama beni anladığım bu..

HTML GİRİŞ

Evet Tanımları Geçtiğimize göre dersimize başlayalım.Öncelikle masaüstünde bir metin belgesi açın adını ders olarak acın. şimdi bu metin belgesi aslında ders.txt olarak masaüstünüzde kaydedildi ama size gösterilen isim derstir. Şimdi ders.txt nedir.neden .txt bu nedir.Bu bir uzantıdır. uzantılar ne işe yarar buna bakalım ,biliyorsunuz ki bilgisayarınızda birçok işlem yapılıyor ve bunları hepsi farklı gorevler yapıyor evet işte bu gorevleri tanımlamaya yarayan birçeşit katagorileştirme oluyor. mesela .exe yada .pdf,jpg,gif gibi uzantılar mevcut bize lazım olan uzantılara zamanla değinicez ama önbilgi olarak bazı uzantılar ve gorevlerını sıralıcam

Sık Kullanılan uzantılar

  • Resim dosya uzantıları : .bmp .gif .ico .jpeg .png .tif 
  • Ses dosya uzantıları : ..mp3 .mpa .wav .wma .aif .cda
  • Video uzantıları : .avi .flv .mkv .mov .mp4 .mpg .wmv
  • Yazı uzantıları : .txt .doc .docx .pdf
  • Uzantılar hakkında detay isterseniz Buraya Tıklayın

Evet bize lazım olan bazı uzantıları yazdık öğrendik sanırım. Şimdi Konu dağılmış olsada konuya dönelim..txt demiştik. bu uzantıları sizin görmeniz için bazı ayarlar yapmanız lazım bunu kısa geçicem çünkü yazımız uzadı sıkılmamanız için kısa kesicem.

Windows 7 ve Windows XP

  1. Denetim masasından yapmak için şu yolu izleyiniz: Başlat » Denetim Masası » Klasör Seçenekleri
  2. Herhangi bir klasörden yapmak istiyorsanız: Araçlar » Klasör Seçenekleri şeklinde aynı pencereyi açabilirsiniz.

Bu pencerede “Görünüm” sekmesine geliyoruz. “Bilinen dosya türleri için uzantıları gizle” seçeneğini kaldırın ve kaydedin.

Windows 8 ve Windows 10:

Yine herhangi bir dosya açın Üste GÖRÜNÜME tıklayın en sonda seçeneklere tıklayıp açılan pencereden görünüme gelin burda gizli dosya ve klasörleri gösteri şeçip kaydedin.

Evet artık uzantılar geldi. Artık Hazırız ilk olarak ders.txt dosyasını ders.html yapın ve kaydedin. Gördüğünüz gibi not defterı resmi internet resmi halıne geldı artık buna tıkladıgınızda bilgisayarınız bunu tarayıcınızdan acacaktır. Ama sız şimdilik tıklamayın bız kodlamaya geçelim ders.html dosyasına sağ tık yapın birlikte aç seçeneğinden not defterini seçin. dosyamız açıldıysa içine

<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Adaazra html dersleri <b>Web Tasarımı Öğreniyorum.</b>
</body>
</html>

Yazın ve kaydedin. ders.html ye tıklayın artık kodları ınceleyelim.

O kadar kod yazdık bu kadar şey içinmi demeyin hemen 🙂 Bizim Kodlarla müdahele ettiğimiz yerleri kırmızıyla çizdim. Kodlarımız ne işe yarıyor onu anlatıcam Ama önce <tag> içerik </tag> aslında bildiğim kadarıyla htmlde boyle bir etiket yok anlatmak için yazdım he etiket(tag) nedir? Tag yani türkçesi etiket olan bu şey ne ? Web Tasarımında kullanılan bu taglar Tarayıcınız tarafından yorumlanıp okunur. ve siteniz oluşur. html ve çoğu kodlamada bu taglar kullanılır.<html> diye tag açılır </html> diye kapanır. yanı net olsun diye html yazısını silip yazıyorum dikkat edin.< > icerik </ > Gördüğünüz gibi Çalışma mantığı tüm web ve programlama dillerinde mevcut.

Kullandığımız Kodlar ve Acıklamaları

  • <html> ve </html> : Bu etiket tarayıcınıza bir HTML dosyası oldugunu söyler. 
  • <head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görünmez.
  • <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ününür.
  • <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ünür.
  • <b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir.

Bu Derslik bu kadar Son olarak bu dersten sonra hala webtasarımı yapmak istiyorsanız Notpad++ Adlı text editörü indirin. eğer anlamadığınız biyer olursa yorumlardan belirtin. 2. dersimizde web yazılım dillerinden bahsedeceğim. saat sabah 2 olmuş 🙂 Hadi Kalın Sağlıcakla..

NOTPAD++ INDIR.

Leave a reply:

Your email address will not be published.