HTML’e Giriş

HTML’e Giriş

[sam id=”1″ codes=”true”]

Merhaba arkadaşlar ben Yağız. Bugün Web tasarım dersimizin ilk dersine başlayacağız. Öncelikle Web tasarım nedir veya ne işe yarar? Web tasarım adı üstünüde bir Web sitesini tasarlamak ve görünüm kazandırmaktır. Biz ilk olarak HTML5 ile başlayacağız, HTML5 son sürümdür ve diğerlerine göre daha basittir. HTML sitemizin iskeletini oluşturur daha sonra bu iskelete güç kazandıracağız. Bazı yazılımcılar HTML’i dil olarak görmez çünkü bir programlama diline nazaran daha basittir. Bunun sebebi ise HTML’in etiketlerden oluşmasıdır. Mesela yazıyı ortaya kaydırmak için bir etiket yazıyı büyütmek için başka bir etiket kullanılır. HTML biraz ezbere dayanır ama biz elimizden geldiğince mantığını öğreneceğiz. Hazırsanız başlayalım şimdi ilk olarak Notepad++’ı indirmemiz gerek Notepad’i kullanmamızın sebebi ise bu program ile mantığı çok daha iyi kavrayacağız.Visual Studio gibi programlar hataları örter bizim hataları görüp öğrenmemiz gerek. Tarayıcımıza Notepad++’ı aratıp 6.9.2 versiyonunu seçiyoruz ve indiriyoruz.Sonra aşağıdaki seçenekleri mutlaka işaretliyoruz.

npinstall1

 

npinstall2

Şimdi biraz dosyalama mantığından bahsedelim. HTML diye bir belge açalım içine 1. ders diye ayrı bir belge açalım sonra notepad’e gelip yukarıda kodlama bölümünden utf-8 olarak kodla diyoruz bunu sebebi Türkçe kelimelerin Web’te gözükmesi. Ardından dosya bölümünde html>1. ders klasörünün içine index.html olarak yazmamız bu şekilde kaydetmemiz çok önemli bunun sebebi çalışmalarımızın nasıl gözükeceğini internetten görebileceğiz.Şimdi

kaydettiğimiz index.html dosyasını chrome olarak açalım karşınıza boş bir sayfa açılacak. Şuan kod yazmadığımız için boş. Son olarak html yapısından bahsedelim ve bitirelim. Şimdi sizde Notepad’inize burada yazdığım kodu yazın.

npinstall3

Şimdi buradaki kodlardan bahsedelim yazdığımız her etiketin bir kapaması olur bunu / işaretini kullanırsak yapabiliriz.Baştaki <!doctype html> etiketi bu etiketin özelliği yazdığımız kodun HTML5 olduğunu söylemek içindir. Ardından direk <html> etiketi gelir bu etiketi açar açmaz hemen kapatınız çünkü ileride uzun kodlar yazacağımız zaman kapatmayı unutabiliriz. Bu etiketin ardında head body gelir. Head zaten anlamıyla baş kısmı yani sekmenin üstünde yazacağımız yerdir biz genelde bütün etiketlerimiz body kısmına yazacağız.Önemli bir unsur ise yine bu etiketleri açtığınız gibi kapatmanızdır. Şu anlık bu kadar konu ile sınırlı kalalım. Yazımızın herkese yayılması için paylaşmayı unutmayın!

 

Temel HTML Bilgileri

Merhaba. Bu gün web derslerimize başladık. Şimdi ilk olarak sizlerle temel HTM ile ilgili bilgiler vermek istiyorum.

[sam id=”1″ codes=”true”]

HTML Nedir? 

Öncelikle HTML ile ilgili yanlış bilinen bir bilgi var. HTML programlama dili değildir. Çünkü derleyicisi olmadan çalışamaz.

Bir HTML belgesi; web tarayıcısının bir sayfayı oluşturabilmesi için gerekli kuralları belirten bir metin belgesidir. Son sürümü HTML 5.0’dır (04.07.2016). Dosya uzantısı .html veya .htm’dir. Standartları W3C tarafından belirlenir.

İlk HTM Belgemizi Oluşturalım

Sizlere NotePad++ öneririm. Bu uygulama neredeyse tüm açık kaynak yazılımların kodlarını düzenleyebiliyor. https://notepad-plus-plus.org/adresinden indirebilirsiniz.

Şimdi masaüstünüze gelin. Yeni bir klasör oluşturun. klasörün adı ilk_sitem olsun. Klasörü oluşturduktan sonra içine bir metin belgesi açın. Metin belgesinin dosya uzantısını (.txt) .html olarak değiştirin. Dosyanın adını da index koyabilirsiniz. Şimdi oluşturduğunuz index.html dosyasını NotePad++ ile açın. Türkçe karakter uyumluluğu için her yeni dosya açtığınızda şunları yapmanız yeterli olacakır:

'Kodlama' menüsünden 'BOM olmadan UTF-8'e dönüştür' seçeneğini seçin.

Örnek HTML Belgesi:

<html>
  <head>
    <title>İlk Sitem!</title>

  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

Şimdi Bunları Tek Tek Açıklayalım

Html belgesi <html> ile açılır ve </html> ile biter.

<head> bölümü ise dosyalarımızı import etmekte vs kullandığımız bölümdür. Tasarımla alakalı değildir yani

<body> bölümü ise sitemizi oluşturacağımız bölümdür. Tüm içeriklerimiz bu tagdan sonra gelmesi gerekir.

<p> etiketi ise paragraf etiketidir. Paragraflarımızı bu etikete yazmamız gerekir.

Bunlar Dışında Bazı HTML Tagları

https://turkiyeelektronik.com/forum/index.php/topic,669.0.html forumumuzdaki bu yazıyı da okuyarak bilgilerinizi pekiştirebilirsiniz. İlerleyen konularımda sizlere css ile tasarımı da anlatmayı düşünüyorum. Ama öncelikli olarak PHP 😉