Html Dersleri

Kod yazmaya girmeden once su konulari ogrenmeliyiz.
(Resimler windows10 ortaminda hazirlandi)


1.Html Dosyasi Acma
2.Html Dosyasını Kaydetme.
3.Html Dosyasını Goruntuleme
4.Sublime Text/Notepad++/Atom


1.Html Dosyasi Acma

Herhangi bir klasor icinde yada masaustunde "sag tik" yaptigimizda karsimiza bir menü gelecektir.
Burda "Yeni" yazan kısma gelince bir alt menü acilir,Bu menüden "Metin Belgesi" secildiginde muhtemelen adi "Yeni Metin Belgesi.txt" seklinde olan dosyamiz olusmus olacaktir.

Html Dosya Acma


Bazi arkadaslar ".txt" uzantisini goremeyebilir,bunun cozumununu de gosterelim

Herhangi bir klasore girelim,yukarda "gorunum" sekmesine tiklayalim,daha sonra sagda cikan "secenekler" kısmına tiklayalim ve simdi Tekrar "Gorunum" sekmesine tiklayalim uzun bir liste acilacaktir ordan "Bilinen Dosya Türleri için uzantıları gizle" ifadesinin solundaki isaretlemeyi kaldıralım kaydedip(Uygula/Tamam) cikalim.
Bilinen Dosya Türleri icin uzantılari Gosterelim

Acmis oldugmuz dosyanin adini istedigimiz gibi degistirebiliriz,fakat .txt uzantisini .html yapalim.
(yada htm) Evet icerigi bos olan bir html dosyamiz hazir durumda.uzantisi html oldugu icin sisteminizde yuklu olan ve varsayilan olarak sectigniz Tarayici iconu belirecektir. (Gordugmuz gibi .html de tipkı .mp4 gibi .txt gibi... bir dosya uzantisidir,Bir muzik dosyasini tikladigmizda Sistemimizde yuklu program tarafindan hemen acilip oynatildigi gibi html uzantili dosyamizi tikladigimizda da alakalı program tarafindan acilacaktir(Internet Explorer,Chrome,Firefox,Opera,Safari,Microsoft Edge,...) tabiki sadece varsayilan olarak belirledigimiz program tarafindan)

2.Html Dosyasını Kaydetme.

1-Olusturdugmuz dosyayi cift tiklayarak acabiliriz
yada
2-Dosyayi sag tiklayip,"Birlikte Ac" bolumune gelince bu dosyayi acabilecek,yada acabilecegini iddia eden programlar listelenecektir.simdilik ordan "Not Defteri" yazani secelim ve acilan beyaz temiz alana lutfen anlamasaniz da su kodlari tek tek yazin/yada dogrudan kopyalayin

<!DOCTYPE html>
<html>
<head>
	<title>Sayfa Baslıgı</title>
</head>
<body>
	<h1>Istanbul 7 Tepe</h1>
	<p>Html Ogreniyoruz...</p>
</body>
</html>
Kayıt islemi icin kısaca "CTRL+S" tiklayabilirsiniz oldukca hizli calismayi saglar,yada "Dosya->Kaydet" yapabilirsiniz(ust menüden).
Birlikte Ac
Dosya Kaydet

3.Html Dosyasını Goruntuleme

Bu kisim en kolay olani,dosyayi tikladigimizda varsayilan olarak belirlenen tarayici tarafindan dosyamiz acilacaktir ve Ekranda "2 Satirlik" Yaziyi gormus olacagiz.
Neden yazdigmiz tüm kodlari goremedik?
Cunku web tarayicimiz sayfayi yorumladi ve bıze oyle sundu.cunku bizler yazdıgmız kodlar sayesinde tarayicimiza emirler veriyoruz ve "bunu soyle goster,bu yaziyi su boyutta su renkte goster vs diyoruz bizim dediklerimiz yani kodlarimiz,talimatlarimiz tarayicimizla bizim aramizda kaliyor :) tarayici sadece sonucu yansitiyor (tabiki bikac kucuk islemle tum html kodlarini gormekte mumkun tarayici ekraninda sag tik->kaynagi goster demek gibi)"

4.Sublime Text/Notepad++/Atom

"Sublime Text" Bu linki ziyaret ederek bu kucuk ama harika programi indirelim ve kuralim
(isteyen arkadaslar benzer bir editor olan Atom/Notepad++ programini kurabilir) Not Defteri ile kod yazmak oldukca zahmetli bir istir tamamen tek tonda yazilar gorundugu icin,hata ayiklamak,oldukca zordur ornegin kucuk bir tirnak isareti eksigini uzun bi sure farkedemeyebilirsiniz. (Bu durum yeni arkadaslar icin oldukca faydali tabiki) Bu programin otomatik tamamlama vs bicok yardimci kısayollari bulunmaktadir,kod yazmayi oldukca zevkli bir hale getirir.programi burda fazla tanitamayacagim kullandikca ogrenecegiz.

Html ogrenmeye yeni baslamis arkadaslar icin onerim en azından birkac hafta "Not Defteri" kullanarak kod yazmalaridir !


Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com