Beni Sosyal Medyada Takip Etmek İçin:

İlk HTML dosyamız

HTML'nin tarayıcıların anladığı bir dil olduğundan bahsetmiştik. HTML dosyalar .htm veya .html uzantılı olan dosyalardır ve bir tarayıcıda açılmaları gerekir. Dosyanın düzenlenmesi ise örneğin basitçe notepad ile yapılabilir. Yani içeriğimizi note pad ile oluşturup tarayıcıda görüntüleriz.

Şimdi masaüstünde bir metin belgesi oluşturalım. Bunun için masaüstünde sağ tıklayıp Yeni>Metin Belgesi dememiz yeterli. Bu dosyanın adını da deneme.html koyalım. Uzantı değişmesi ile ilgili bir uyarı gelir, burada evet diyelim. Artık HTML uzantılı bir dosyamız oldu. Dosya simgesinin tarayıcınızın (varsayılan chrome veya internet explorer veya başka hangi tarayıcı ise) simgesi olduğunu göreceksiniz. Bu dosyayı çift tıklayarak açarsanız tarayıcıda boş bir sayfa açtığını göreceksiniz. Düzenlemek için ise dosya üzerinde sağ tıklayıp "Birlikte Aç" sekmesinden notepad'i seçmelisiniz. Tekrar belirtmeliyim ki HTML dosyayı görüntülemek ve düzenlenemek farklı şeylerdir. Bir internet sitesini görüntülersiniz ama düzenleyemezsiniz, düzenlemek için bir notepad,notepad++ gibi bir programa ihtiyacınız vardır.

Sıra geldi içerik eklemeye. Dosyayı notepad ile birlikte açıp içine adınızı ve soyadınız yazıp kaydetip kapatın. Dosyayı çift tıklayarak açtığınızda tarayıcınızda isminiz yazdı

TEBRİKLER!!

İlk HTML dosyanızı hazırlayıp çalıştırdınız.
Şimdi soranlar olacaktır. Buraya ne yazsak tarayıcıda çıkacak ise bu iş bu kadar mı? Tabi ki hayır. Diyelim ki adınızı kalın bir punto ile yazmak ya da italik(eğik) yazmak istediniz. İşte bu nokta HTML'in devreye girdiği ilk noktadır. Yani metin düzenlemek. Bunun için HTML kodlarının yapısını da biraz anlatayım.

Tüm HTML kodları < ve > işaretleri ile belirlenir(bu işaretlerin arasına yazılır). İlk olarak belgemizin html belgesi olduğunu tarayıcıya söyleyelim.

<html>

  Bir HTML sayfasında yer alan tüm bilgiler buraya yazılır.

</html>

  Bu noktada sayfamızın HTML sayfası olduğunu tarayıcıya söyledik. En güncel sürüm olan HTML 5 olduğunu söylemek için tek fark ise ilk satırda <HTML> yerine <!DOCTYPE html> yazmak.Tüm html kodları <kodismi> ile başlayıp </kodismi> ile biter. Genel yapı olarak HTML sayfası 2'ye ayrılır; sayfanın başlığı içeriği yazan kişinin bilgilerini içeren <HEAD> kısmı ve sayfanın tüm içeriğini barındıran <BODY> kısmı.
Şimdi de sayfa başlığımıza adımızı yazdırıp sayfa içeriğine "Merhaba Dünya Ben Bir HTML sayfasıyım!" yazalım ki adet yerini bulsun, her kodlama işi "Hello World!" ile başlar malum.

<html>

<HEAD>
<title> Kenan AKSOY </title>
</HEAD>
<BODY>
Merhaba Dünya Ben Bir HTML sayfasıyım!
</BODY>

</html>

Masaüstünde oluşturduğumuz deneme.html dosyasını sağ tıklayıp birlikte aç>notepad diyerek yukarıdaki kodu yapıştırın. Kaydedip dosyaya çift tıkladığınızda tarayıcı sekmesinde adınızın yazdığını; sayfa içeriğinde de Merhaba Dünya BEn Bir HTML sayfasıyım! yazdığını göreceksiniz. Şimdi bu yazıyı kalın ve italik yapalım, yani sitilini değiştirelim. bunun için basitçe iki yapı kullanacağız. <b> etiketi metini koyu yapan bir etikettir. Kullanımı ise <b>örnek metin</b> şeklindedir. Aynı mantık ile bir metni italik yapmak içinde <i> etiketi kullanılmaktadır. Örneğimize uyguladığımızda:

<html>

<HEAD> <title> Kenan AKSOY </title> </HEAD>

<BODY> <b><i>Merhaba Dünya Ben Bir HTML sayfasıyım!</i></b>

</BODY>

</html>

Kodu çalıştırdığınıza sayfada yazının hem italik hem de koyu renk olduğunuz göreceksiniz. İstersek kelime hatta harflere kadar indirgeyerek bu yapıyı kullanabiliriz.

Yeri gelmişken tek kullanılan ve kapatmadan işlem yapılan satır atlama kodumuz <br> ile ilgi biraz bilgi verelim. <body> kısmına yazacağınız yazılarda satır atlayarak, 1'den fazla boşluk koyarak yazabilirsiniz ama tarayıcınız bunları görmeyecektir. Tüm metinlere düz metin muamelesi yapacaktır. Metninizde satır atlatmak istediğiniz yere <br> yazmanız yeterli olacaktır.
Buraya kadar anlattıklarım ile ilgili geniş bir örnek kod vermem gerekir ise:



	<html>
	

<HEAD> <title> Kenan AKSOY </title> </HEAD> <BODY> <b><i>İlk</i></b> kelime italik ve koyudur! <br> <b><i>S</i></b>adece ilk harf italik ve koyudur! <br> <b>Bu metin sadece koyudur.</b> <br> <i>Bu metin sadece italiktir.</i> <br> </BODY>

</html>

Göreceğiniz gibi <br> kodu sayesinde her cümle sonunda bir satır atlamış olduk. <br> kodlarını kaldırarak denediğinizde tüm cümlelerin yana yana yazıldığını görebilirsiniz.

Detay bilgi olarak:

Her kod <örnekkod> şeklinde başlayıp </örnekkod> şeklinde bitiyordu ama istisna durumlar var. <br> kodu bir kapamaya ihtiyaç duymadan tek başına kullanılabilen bir koddur.


Kenan AKSOY
11.08.2019 02:14
Okunma Sayısı=206
Adınız:
E-Posta:
Yorumunuz:
x

xxxxxxxxxx

14.10.2019 23:11
Kenan

Tek karakterli isim ve var olmayan mail için düzeltme yapacağım uyarı için teşekkürler:)

23.10.2019 00:28
Ana Sayfa Teknoloji ve Yazılım Finans Genel Konular Kenan Kimdir? Kenan'a Mail At