HTML Kodları

23 Şubat 2019 0 Yazar: Onur Cici

HTML (Hyper Text Markup Language), Web sayfaları oluşturmak için kullanılan işaretleme dilidir.
Kullandığımız Chrome, Firefox , Opera İnternet Explorer gibi tarayıcılar HTML kodlarını işleyerek bu kodları web sayfasına dönüştürür.
Bir web sayfasında görüntülenen tablo, paragraf, başlık vb. tüm içerik HTML Etiketlerinden oluşur.

Bu derste HTML ile kendi Web Sayfanızı oluşturabileceksiniz. Çünkü HTML öğrenmek oldukça kolaydır.

Aşağıda en basit haliyle bir HTML belgesini görüyorsunuz.

<!DOCTYPE html>

<html>

<head>

<title>Ben tarayıcıda görünen başlık metniyim 🙂</title>

</head>

<body>

<h1>Bu bir Başlık</h1>

<p>Bu da benim ilk paragrafım. Merhaba HTML. Merhaba Dünya</p>

</body>

</html>

Yukarıdaki HTML kodlarını açıklamaya geçmeden önce bir soruya cevap verelim.

HTML Kodları Nereye Yazılır?

Html kodu yazmak için bilgisayarlara bir program yüklemek gerekmez. Wordpad, not defteri gibi bir metin editörü ile Html sayfaları oluşturabilirsiniz.

Kod yazmayı daha kolay hale getirmek için dreamwear, Sublime Text, Brackets veya Notepad++ gibi programlar kullanılabilir. Yazılan html kodları kaydedilirken;

htm, xhtml ve html gibi tarayıcıların anlayacağı şekilde kaydedilmesi gerekir.

Biz örneklerimizde metin düzenleyicisi olarak Bracketsprogramını kullanacağız.

HTML Yazım Kuralları:

HTML Etiketleri (tag) “<” ve “>” işaretleri arasına yazılır.

Bir HTML öğesi genellikle içeriğin arasına yerleştirilen bir başlangıç etiketi ve bitiş etiketinden oluşur. Örnek: <p>…….</p>

Bitiş etiketi, başlangıç etiketi gibi yazılır, ancak etiket adından önce bir “/” eklenir. “<html> </html>” , “<p> </p>” vb.

HTML Belgesi:

Yukarıda en basit haliyle yazdığımız HTML kodlarını açıklayalım.

<!DOCTYPE html> bildirimi belgeyi HTML5 olarak tanımlar.

<html> </html> Tüm etiketleri saran, html kodu ile kodlama işleme yapılması gerektiğini belirten sayfanın başında açılarak sayfanın sonunda da kapatılan etiketin adıdır. <html> … </html> şeklinde açılmalı ve kapanmalıdır.

<head> </head> etiketi belge hakkında meta bilgileri içerir. Bu bölümdeki yazılan hiç bir şey sayfada görünmez. Meta öğeleri genellikle sayfa açıklaması, anahtar kelimeler, belgenin yazarı, son değiştirilen ve diğer meta verileri belirtmek için kullanılır.

<title> </title> bu etiketler arasına yazdıklarınız tarayıcınızda başlık olarak görüntülenecektir.

<body> </body> Sayfamızın içeriği ile ilgili tüm HTML kodları buraya yazılacaktır. Başlıklar, paragraflar, resimler, videolar, listeler vb..

Html belgesinin temel etiketlerini açıkladık. Artık içerik oluşturmak için kullanılan HTML Kodlarına (HTML Etiketleri) geçelim.

HTML Başlık Ekleme Kodları

HTML’ de başlıklar <h1> .. <h6> etiketleriyle oluşturulur.

Başlık boyutu <h1> den <h6> y< doğru küçülür. Önemli başlıklar için <h1> etiketi kullanılır. Aşağıdaki örnekte tüm başlıklara ait (<h1> den <h6> ya kadar) görünümleri inceleyebilirsiniz.

Html Kodları:

<!DOCTYPE html>

<html>

<head>

<title>yazilimkodlama.com</title>

</head>

<body>

<h1>BAŞLIK 1</h1>

<h2>BAŞLIK 2</h2>

<h3>BAŞLIK 3</h3>

<h4>BAŞLIK 4</h4>

<h5>BAŞLIK 5</h5>

<h6>BAŞLIK 6</h6>

</body>

</html>

HTML Paragraf Ekleme

HTML sayfalarına paragraf eklemek için <p> </p> etiketi kullanılır.

HTML Paragraf Ekleme Kodları:

<!DOCTYPE html>

<html>

<head>

<title>yazilimkodlama.com</title>

</head>

<body>

<p>Bu bir paragraftır.</p>

<p>Bu ikinci paragraftır.</p>

</body>

</html>

HTML Alt Satıra Geçme

HTML dokümanında alt satır geçmek için klavyeden ENTER tuşuna basmanız bir işe yaramayacaktır.

<br> etiketi satır sonu olduğunu belirtir. Eğer paragraf kullanmadan bir alt satıra geçmek isterseniz <br> etiketi kullanmalısınız.

HTML Alt Satıra Geçme Kodları:

<!DOCTYPE html>

<html>

<head>

<title>yazilimkodlama.com</title>

</head>

<body>

<h1>İSTİKLAL MARŞI</h1>

<p>Korkma, sönmez bu şafaklarda yüzen al sancak;<br>

Sönmeden yurdumun üstünde tüten en son ocak.<br>

O benim milletimin yıldızıdır, parlayacak;<br>

O benimdir, o benim milletimindir ancak.<br>

</p>

</body>

</html>

HTML Biçimlendirme Etiketleri

HTML <abbr> Etiketi:

HTML <ABBR> etiketi, içerdiği kelimenin, bir kelime veya kelime grubunun kısaltılmış hali olduğunu belirtir. Bununla birlikte baş harflerinden oluşan kısaltma tanımlanmasını sağlayan <ACRONYM> etiketine HTML 5‘te hiç yer verilmediği için her türlü kısaltmada alışkanlık açısından <ABBR> etiketi ile kullanılmalıdır.

HTML Sözdizimi ve Özellikler

<ABBR
id=	Eşsiz kimliğini belirtir.
class=	Sınıf adını belirtir.
style=	CSS kuralları tanımlar.
title=	Kısaltılmış kelimeyi veya kısaltma hakkında kısa bilgi belirtir.
lang=	İçerdiği metnin lisanını belirtir.
dir=	İçerdiği metnin yönünü belirtir.
>

HTML <address> Kodu

HTML <address> etiketi, bir belgenin veya makalenin iletişim bilgilerini (yazar / sahibi) tanımlar.
elemanı genellikle italik olarak görüntülenir. Çoğu tarayıcı, öğeden önce ve sonra bir satır sonu ekler.

Written by John Doe.<br> 

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

HTML mailto ve tel bağlantısı oluşturma

mailto: link verilecek kişinin mailadresi yazılır. Bu özellik çalışması için bilgisayarda mail programının olması gerekir. Outlook gibi. Bağlantıya tıklandığında mail programında gönderilecek kişi e-posta adresi verilen bağlantıya göre doldurulacaktır.

tel:telefon numarası verilecek kişinin numarası yazılır. Bu özellik mobil cihazlarda çalışacaktır. Bu bağlantı üzerine tıklandığında verilen telefon numarası çevrilecektir.

<a href=“mailto:ornek@hotmail.com”>Örnek Adlı kişinin mail adresi</a>

<a href=“+902121001010”>Benim Numaram Değil (+902121001010)</a>

HTML Yorum Etiketi:

Yorum etiketleri, HTML kaynak koduna yorum eklemek için kullanılır.

Aşağıdaki sözdizimini kullanarak HTML kaynağınıza yorum ekleyebilirsiniz:

<!– Yorumunuzu buraya yazın –>

HTML Link Kodu Kullanma

Linkler neredeyse tüm web sayfalarında bulunur. Bağlantılar, kullanıcıların sayfadan sayfaya doğru yönlendirilmesi için kullanılır. Örneğin bu sitede tıkladığınız her menü link kullanılarak yönlendirilmektedir. Eğer bağlantının farklı pencerede açılması istenirse target=”_blank” özelliği eklenmelidir.

Örnek Kullanım:

<a href=“https://www.yazilimkodlama.com/” target=“blank”>Anasayfaya Gidin.</a>

Kodlar çalıştığında aşağıdaki gibi olacaktır.

Anasayfaya Gidin

HTML Image – Resim Ekleme Kodu

Bir web sayfasında bulunan resimle sayfanın göze daha hoş görünmesini sağlayacaktır. HTM sayfasına resim eklemek için örnek kod;

<img src=”tablo.jpg” alt=”HTML Tablo Örneği”>

HTML’de, görüntüler <img> etiketi ile tanımlanır.

<img> etiketi diğer etiketler gibi </img> şeklinde kapatılmaz. Yukarıdaki kullanımı inceleyin.

src niteliği, görüntünün URL’sini (web adresi) belirtir.

alt niteliği bir görüntü için alternatif bir metin sağlar, Bu çeşitli nedenlerle olabilmektedir. Örneğin kullanıcı bir nedenden dolayı görüntüleyemiyorsa (yavaş bağlantı nedeniyle veya src niteliğinde bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa gibi..

Bu sebele alt özelliğine verilecek değer resmi açıklayıcı, resimle alakalı olmalıdır.

HTML Tablo Oluşturma Kodu

Bir HTML tablosu <table> </table> etiketi ile tanımlanır.

Her tablo satırı <tr> </tr> etiketi ile tanımlanır.

Tablo başlığı <th> </th> etiketi ile tanımlanır. Varsayılan olarak tablo başlıkları kalın ve ortalanmış yazılacaktır.

Tablo hücreleri tanımlamak için <td> </td> etiketleri kullanılır.

Örnek:

<!DOCTYPE html>

<html>

<head>

<title>yazilimkodlama.com</title>

</head>

<body>

<h2>HTML Tablolar</h2>

<table>

<tr>

<th>Soyad</th>

</tr>

<tr>

<td>Ergül</td>

</tr>

<tr>

</tr>

<tr>

<td>Fatma</td>

</tr>

</table>

</body>

</html>

HTML Liste oluşturma Kodları:

HTML sayfalarında listeler Sıralı Liste ve Sırasız Liste olarak iki çeşittir.

HTML Sırasız Liste Oluşturma

Sırasız listeler <ul> </ul> etiketiyle tanımlanır. Daha sonra her bir eleman <li> </li> etiketleri arasında belirtilir. Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.

Örnek:

<ul>

<li>Kahve</li>

</ul>

Ekran Çıktısı:

Kahve
Çay
Süt

Sırasız listelerde liste işareti çeşitli şekiller alabilir.

HTML Sıralı Liste Oluşturma

OL etiketi sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma
işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.
Belirteceğiniz parametreler yardımı ile de istediğiniz harf, rakam veya roma rakamından
başlayarak sıralı listenizi oluşturabilirsiniz.

Type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını
belirleyebiliriz.
“A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle
olacaktır.

“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,…. şeklinde küçük roma
rakamları ile yapılacaktır.

Sıralamanın her zaman “1” den veya “A” dan başlamasını istemeyebiliriz. Bu tür
durumlarda Start parametresi kullanılır. Start parametresinin her zaman sayı olması gerekmektedir. Örneğin sıralamayı “C” harfinden başlatmak istiyorsak start değerine “C” yazmak yerine “3” yazmak zorundayız.

İç İçe Sıralı Liste Oluşturma

OL etiketlerini iç içe kullanarak listeler oluşturulabiliriz. Örneğimizde bilgisayar parçalarıyla ilgili basit bir liste gerçekleştirelim.

<!doctype html>

<html>

<head>

<title>Liste Örnekleri-1</title>

</head>

<body>

<ol>

<li>

İŞLEMCİ

<ol>

<li>INTEL</li>

</ol>

</li>

<li>

HDD

<ol>

<li>Seagete

</ol>

</li>

<li>

Western Digital

</li>

</ol>

</li>

<li>

RAM

</li>

</ol>

</body>

</html>

Ekran çıktısı:

HTML Form Oluşturma Kodları

HTML‘ de kullanıcıdan giriş almak için kullanılan formları oluşturmak için aşağıdaki etiketleri kullanırız.

<form> Etiketi :

<form> etiketi kullanıcıdan bilgi toplamak için kullanacağımız formu tanımlamak için kullanılmaktadır.

<form>

form elemanları

</form>

<input> Etiketi :

<input> etiketi en önemli Form etiketidir. <input> etiketi , tür özelliğine bağlı olarak çeşitli şekillerde görüntülenebilir.

<input> etiketinin type özelliğine göre bazı örnek kullanımları aşağıdaki gibidir.

Type	Açıklama
<input type=”text”>	Tek satırlık bir metin girişi alanı tanımlar.
<input type=”radio”>	Bir çok seçenekten birini seçmek için bir radyo düğmesi tanımlar.
<input type=”submit”>	Formu göndermek için bir gönder düğmesi tanımlar.

Şimdi bu türleri açıklayalım.

Text Girişi <input type=”text”> :

Metin girişi için tek satırlık bir giriş alanı tanımlar.

Örnek:

<form>Adı:<br>

<input type="text" name="ad"><br

>Soyadı:<br><input type="text" name="soyad">

</form>

Ekran Çıktısı:

Yukarıdaki örneği incelediğimizde input etiketinin type özelliğinin text olarak ayarlandığını, yani kullanıcıya tek satırlık bir veri girişi yapma imkanı sağlandığını görmekteyiz. name özelliği önemlidir. Her girdi alanının gönderilmesi gereken bir ad özniteliğine sahip olması gerekir. Yani bir isim vermek gerekir. Nameözniteliği atlanırsa, o girdi alanının verileri gönderilemeyecektir.

Şifre Girişi <input type=”password”> :

<input type=”password”> şifre giriş alanı oluşturmak için kullanılır.

<form action="">

Kullanıcı:<br><input type="text" name="kadi"><br>

Şifre:<br><input type="password" name="sifre">

</form>

Ekran Çıktısı:

Radio Button Girişi <input type=”radio”> :

Radyo düğmeleri, bir kullanıcının sınırlı sayıda seçimden birini seçmesine izin verir. Aşağıdaki örneği ve ekran çıktısını inceleyelim.

<form>

<input type="radio" name="cinsiyet" value="erkek" checked> Erkek<br>

<input type="radio" name="cinsiyet" value="kadin"> Kadın<br>

</form>

Ekran Çıktısı :

CheckBox Girişi <input type=”checkbox”> :

Radio Button öğesinden farklı olarak birden fazla seçim yapılabilmesi gereken durumlarda kullanılmaktadır. Kullanımı ile ilgili kodlar ve ekran çıktısı aşağıdadır.

<form action="/action_page.php">

<input type="checkbox" name="dil1" value="ing">İngilizce<br>

<input type="checkbox" name="dil2" value="fr">Fransızca <br>

<input type="checkbox" name="dil3" value="alm">Almanca<br><br>

<input type="submit"></form>

Button <input type=”button”> :

Buton oluşturmak için kullanılır.

<input type="button" onclick="alert('www.onurcici.com')" value="TIKLA!"

Aşağıdaki butona tıklayarak yukarıdaki kod satırının ne işe yaradığını görebilirsiniz.

Gönder (Submit) Butonu <input type=”submit”> :

Verilerin işleneceği sunucu sayfasına verileri göndermek amacıyla kullanılır. Formun işleneceği sayfa Form etiketinde action özelliğinde belirtilmelidir. Aşağıda Submit butonunun kullanımını gösteren bir örnek ve aekran çıktısı bulunmaktadır.

<form action="action_page.php">

Ad:<br><input type="text" name="ad" value="Ahmet"><br>

Soyad:<br><input type="text" name="soyad" value="Cansever"><br><br>

<input type="submit" value="GÖNDER"></form>

Ekran Çıktısı:

Reset Butonu <input type=”reset”> :

<input type=”reset”> tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar.

Örnek:

Ad:<br>

<br>

Soyad:<br>

</form>

Ekran Çıktısı:

<form> etiketinin alabileceği bazı özellikleri inceleyelim.

Action özelliği :

<form action=”/action_page.php“>

Action özniteliği, form gönderilirken yapılacak işlemi tanımlar.
Normal olarak, kullanıcı, gönder düğmesini tıklattığında form verisi sunucu üzerindeki bir web sayfasına gönderilir.
Yukarıdaki örnekte, form verileri sunucudaki ‘/action_page.php’ adlı bir sayfaya gönderilir. Bu sayfa, form verilerini işleyen bir sunucu tarafı komut dosyası içerir.

Method Özelliği :

Method özniteliği, form verilerini gönderirken kullanılacak HTTP yöntemini belirtir. Bu yöntem GET yada POST olabilir.

Get ve Post Farkı Nedir ?

Form verisi gönderirken varsayılan yöntem GET’tir.
Ancak, GET kullanıldığında, gönderilen form verileri sayfa adres alanına görünür. Bu yüzden Hassas bilgileri gönderirken GET kullanılmamalıdır!
GET, boyut sınırlamaları da olduğu için kısa, hassas olmayan, miktarda veri için uygundur.

Form verileri hassas veya kişisel bilgiler içeriyorsa daima POST kullanılmalıdır. POST yöntemi, gönderilen form verilerini sayfa adresi alanına görüntülemez. Ayrıca POST hiçbir boyut sınırlamasına sahip değildir ve büyük miktarda veri göndermek için kullanılabilir.

Form Verilerini Gruplama <fieldset> :

Form içindeki elemanları gruplamak için kullanılır.

<fieldset> etiketi ilgili verileri bir formda gruplamak için kullanılır.

<legend> etiketi ise <fieldset> öğesi için bir başlık tanımlar.

Örnek:

<legend>Personel Bilgileri :</legend>

Adı:<br>

Soyadı:<br>

</fieldset>

</form>

Ekran Çıktısı:

Select Etiketi <select>:

<select> etiketi açılır liste kutusu oluşturmak için kullanılır. kullanımı aşağıdaki gibidir.

<option value=“web”>Web Tasarım</option>

<option value=“veri”>Veri Tabanı</option>

<option value=“grafik”>Grafik Animasyon</option>

<option value=“protem”>Programlama Temelleri</option>

</select>

Yukarıdaki HTML kodlarını yazıp sayfamızı görüntülediğimizde aşağıdaki ekran çıktısı oluşacaktır.

Kodları inceleyelim.

<option> etiketi seçim yapılabilecek elemanları tanımlamak için kullanılır.

Önceden seçilmiş bir seçeneği tanımlamak için, selected özelliği kullanılır. Yani yukarıdaki örnekteki listede varsayılan olarak Veri Tabanı öğesinin gelmesini istersek kodlarımızı aşağıdaki şekilde düzenlemeliyiz.

<textarea> Etiketi :

Formumuzda çok satırlı bir metin alanı kullanmamız gerektiğinde <textarea> etiketini kullanabiliriz. <textarea> etiketinde rows ve cols özellikleri kullanılabilir.

Rows özelliği, bir metin alanında görünür satır sayısını belirtir.

Cols özelliği, bir metin alanının görünür genişliğini belirtir.

İlgili

KategoriHTML MAC PHP SCRİPT SEO

Etiketlerhtml başlangıç HTML Belgesi: html dersleri HTML Kodları HTML Kodları Nereye Yazılır? html kodu html nedir html öğren HTML Yazım Kuralları: onur cici

HTML Boşluk Bırakma Kodu

PYTHON PROGLAMA DİLİ HAKKINDA ÖRNEKLER

HTML Kodları

HTML Kodları Nereye Yazılır?

HTML Yazım Kuralları:

HTML Belgesi:

HTML Başlık Ekleme Kodları

HTML Paragraf Ekleme

HTML Alt Satıra Geçme

HTML Biçimlendirme Etiketleri

HTML Sözdizimi ve Özellikler

HTML <address> Kodu

HTML mailto ve tel bağlantısı oluşturma

HTML Yorum Etiketi:

HTML Link Kodu Kullanma

HTML Image – Resim Ekleme Kodu

HTML Tablo Oluşturma Kodu

HTML Liste oluşturma Kodları:

HTML Sırasız Liste Oluşturma

HTML Sıralı Liste Oluşturma

HTML Form Oluşturma Kodları

<form> Etiketi :

<input> Etiketi :

Text Girişi <input type=”text”> :

Şifre Girişi <input type=”password”> :

Radio Button Girişi <input type=”radio”> :

CheckBox Girişi <input type=”checkbox”> :

Button <input type=”button”> :

Gönder (Submit) Butonu <input type=”submit”> :

Reset Butonu <input type=”reset”> :

Action özelliği :

Method Özelliği :

Get ve Post Farkı Nedir ?

Form Verilerini Gruplama <fieldset> :

Select Etiketi <select>:

<textarea> Etiketi :

Bunu beğen:

İlgili

Bir Cevap Yazın Cevabı iptal et

Kategoriler

HTML Kodları

HTML Kodları Nereye Yazılır?

HTML Yazım Kuralları:

HTML Belgesi:

HTML Başlık Ekleme Kodları

HTML Paragraf Ekleme

HTML Alt Satıra Geçme

HTML Biçimlendirme Etiketleri

HTML Sözdizimi ve Özellikler

HTML <address> Kodu

HTML mailto ve tel bağlantısı oluşturma

HTML Yorum Etiketi:

HTML Link Kodu Kullanma

HTML Image – Resim Ekleme Kodu

HTML Tablo Oluşturma Kodu

HTML Liste oluşturma Kodları:

HTML Sırasız Liste Oluşturma

HTML Sıralı Liste Oluşturma

HTML Form Oluşturma Kodları

<form> Etiketi :

<input> Etiketi :

Text Girişi <input type=”text”> :

Şifre Girişi <input type=”password”> :

Radio Button Girişi <input type=”radio”> :

CheckBox Girişi <input type=”checkbox”> :

Button <input type=”button”> :

Gönder (Submit) Butonu <input type=”submit”> :

Reset Butonu <input type=”reset”> :

Action özelliği :

Method Özelliği :

Get ve Post Farkı Nedir ?

Form Verilerini Gruplama <fieldset> :

Select Etiketi <select>:

<textarea> Etiketi :

Bunu paylaş:

Bunu beğen:

İlgili

Bir Cevap Yazın Cevabı iptal et

Kategoriler