HTML Kodlamaya Giriş #1 İlkadım

HTML Kodlamaya Giriş #1 İlkadım


HTML Kodlamaya Giriş #1 İlkadım

Dikkat : Bu konu HTML'i ilk defa öğrenecekler için hazırlanmıştır.Bilenler herhangi bir oylama yapmadan diğer konularımıza dönebilirler.
HTML (Hyper Text Markup Language) - Hiper Metin İşaretleme Dili
HTML öğrenmek artık çok kolay.Youtube kanalları,çeşitli makaleler ile artık sıfırdan öğrenmek hiç zor bir durum değil.HTML kelimesini duyduğunuz zaman ve araştırmaya başladığınız an yazılımcılık sektörü(web alanında) adım atmışınız demektir.Bu makale bir seri olacaktır ve inanın sizlerin hiç bir bilgi bilmiyorsanız HTML Kodlamaya Giriş seri makalemizden bir şeyler kapacaksınız.

Başlangıç olarak bilmemiz gerekenler HTML kodlarını not defterinde yazabilirsiniz.
Adobe Dreamviewer,Visual Studio gibi profesyonel programlarda da yazılır.

Biz Notepad Plus Plus (notepad++)  not defteri programını kullanacağız.Sizlerinde indirmenizi bekliyoruz.Derslerimize notepad++ ile başlayacağız.


HTML Programlamaya Giriş #1 İlkadım


Notepad++ kurduktan sonra programımızı açıyoruz ve kodlarımızı yazmaya başlayabiliriz.

HTML kodları
<html>
<head>
<title>Sayfamızın Bağşlığı</title>
</head>
<body>
  HTML Kodları buraya gelecek
</body>
<html>
Bu kodları yazıp dosyamızı .html şeklinde kaydedelim.Ve adını index.html yapalım.Dosyamıza sağ tıklayıp birlikte aç diyerek Google Chrome tarayıcısında açalım.

HTML Programlamaya Giriş #1 İlkadım

Kırmızı şeritten sonra ki kısımda Google Chrome'de görünen kısmımız.Şimdi burada dikkat edilmesi gerekenbir kaç kısım var hemen onlardan bahsedeyim.

Öncelikle kodları bilmelisiniz.Burada devreye ezber giriyor. W3School adresinden HTML kodlarının tümüne bakabilirsiniz.Tabi tümünü öğrenmek mecburiyetinde değilsiniz.En önemlilerini size yazacağım.

Kendi kodlarımıza dönelim.
HTML kodları <html> ... </html> etiketleri arasına yazılır.
<head> --- HEAD baş demek sayfamızın üst kısmıdır.
<head> </head> kodları arasına yazdığımız <title> etiketi sayfamızın ismini belirler.
HTML Programlamaya Giriş #1 İlkadım
Fark ettiğiniz gibi sayfa url miz ve sayfa başlığımız üst kısımda bulunduğu için <title> kodunu <head> kısmına yazdık yani
burada www.projevekod.com sayfamızın url si oluyor, Proje ve Kod Paylaşım Platformu yazan yer ise sayfamızın title'ı.olmuş oluyor.

<body> kodumuz gövde demektir.
Gövde içine yazdığımız her şey sayfamızda görünecektir.
Bizim örnekte yaptığımız gibi artık bütün yazılarımız kodlarımızı <body> etiketi içerisine yazıyoruz.

<body>
        HTML kodları ve içeriklerimiz buraya gelecek.
</body> 

Şimdi sizlere en çok kullanılan HTML kodlarının 10 tanesini,anlamları ile yazacağım.Diğer konularımızda daha ayrıntılı göreceğiz.

<div> .. </div> -- Kutu anlamındadır.Web sitemizi kutulara bölerek hazırlamamızı sağlar.
<span> .. </span>-- Arasına genelde yazılar gelen kod
<img> .. </img> -- Resimlerimizi web sitemizde göstermemizi sağlayan kod
<br /> -- Bir alt satıra inme kodu,sayfa içerisinde görülür
<p> .. </p> --  Paragraf kodumuz.Bir yazının paragraf olduğunu belirtir.
<b> .. </b> -- İçerisine yazılan yazılarımızı kalınlaştırır.
<h1> .. </h1> ,<h2> .. </h2> ,<h3> .. </h3>,<h4> .. </h4> ,<h5> .. </h5> ,<h6> .. </h6> ,<h7> .. </h7> -- H1 En yüksek , H7 en küçük yazı boyutudur.Yazı başlıkları için boyut kodu.
<ul> .. </ul> -- Sıralı - sırasız liste oluşturmak için kod.Bu kod sayesinde menülerde hazırlanır.
<li> .. </li> -- Listenin eleman kodu list item demektir.Her zaman ul etiketi içinde bulunur.Listenin her bir elemanına verilir.
<hr /> -- Sayfada düz çizgi çizer boydan boya.

HTML'i öğrenmek için yazılarımızı okumaya devam edin.

Hatırlatma : Bu yazı ilk defa HTML öğrenecekler için yazılmıştır.Lütfen konu hakkında bilgisi olanlar oylama yapmasın.

Yorumlar

  1. Hocam uzun zamandır weble uğraşıyorum ama bir türlü kod öğrenmeye başlayamadım. Sayenizde başlamaya niyetlendim ve bu anlaşılır anlatım ile üstesinden geleceğimi düşünüyorum. Serinin devamını dört gözle bekliyorum.

    YanıtlaSil
  2. Serinin devamını bekliyorum.Yazılarınızı kolay öğreniyorum tesekkür ederim. 😊

    YanıtlaSil

Yorum Gönder

Konu hakkında yorumlarınızı bekliyorum teşekkürler.