FatihGirgiç

Html Nedir? Html Eğitim Seti

Html Nedir?

Html nedir sorunuza verilecek en basit ve anlaşılır yanıt olarak web sayfalarınız hazırlamak için kullanılan işaret dilidir demek doğru olacaktır. Bu işaret dilleri web tarayıcılar tarafından çözülerek görsel web sitelerini bizlere gösterirler. Html kesinlikle bir programlama dili değildir. Html daha çok yazı, görsel ve video gibi içerikleri web sayfamızın içerisine yerleştirme ve konumlarını belirleme, web tarayıcıların sayfaları düzgün bir biçimde görüntülenmesini sağlama ve arama motorlarının sayfa hakkında daha fazla bilgi edinmesi için gerekli bir işaret dilidir.

Html nedir sorunuzun yanıtını verdiğimize göre biraz da html işaret dili hakkında bilinmesi gerekenler ve nasıl html sayfa oluşturulur hakkında yazalım… Öncelikle html ile web sayfası oluşturmak için hiç bir programa ihtiyacınız yoktur. Bilgisayarınız windows işletim sistemli ise windows kurulumuyla gelen not defteri aracı işinizi fazlasıyla görecektir. Not defterinde html sayfalarınızı oluşturduktan sonra farklı kaydet demeniz ve uzantılarını .html, .htm, .xhtml şeklinde kaydetmeniz yeterli olacaktır. Fakat hızlı ve düzenli html kodları yazarak daha kolay bir şekilde web sayfası oluşturmak isterseniz sublime text,dreamweaver ve notepad++ gibi programları kullanabilirsiniz. Ben kolaylık ve kullanış olarak rahat ettiğim sublime text pro kullanıyorum.

Html Nedir ve html ne işe yarar sorularınızı yanıtladıktan sonra html kodlarını kullanırken dikkat etmeniz gereken bazı püf nokları sizlere yazmak istedim.

  • <html>,<head>,<title> gibi <….> işaretleri arasına yazılan kodlara tag ya da etiket denmektedir. Bu etiketler </….> şeklinde kapatılır.
  • Html’de açılan her etiket kapatılmalıdır.
  • Html etiketleri Türkçe karakter barındıramaz.
  • Html etiketlerini ister büyük isterseniz küçük harfle yazabilirsiniz. Ama genel olarak küçük harfler kabul görmektedir.

Html Dersleri

 

  • <html> Etiketi

Bu etiket html işaret diliyle tüm etiketleri kapsayan ve web sayfasının html kodlarıyla yapılacağını belirten sayfa başında <html> etiketiyle başlayıp sayfa sonunda </html> ile kapatılan bir etikettir.

  • <head> Etiketi

Hazırlanan web sayfası ile ilgili bilgiler, tanımlamaların yer verildiği bir bloktur. Bu etiketler arasındaki kodlar web tarayıcılar tarafından görüntülenmez.  Title(Başlık), description(Açıklama), keywords(anahtar kelime) gibi bilgilerin yer aldığı bölümdür.

  • <body> Etiketi

Bu etiket ziyaretçini görebildiği ve sayfanın içeriklerinin yer aldığı bölüm olarak karşımıza çıkmaktadır. Genel olarak bir çok etiket barındırmaktadır.  html etiketinden sonra en çok etiket barındıran blok diyebiliriz.

Artol ana etiketlerimizi ve açıklamalarını öğrendiğimize göre metin biçimlendirmesi, boyutlandırması,renk ve yazı tipi, kalınlık gibi özelliklerinin nasıl değiştirileceğine değinelim. Şimdi vereceğimiz etiketler <body>…… </body> etiketleri arasında yer almalıdır.

  • <h.> </h.> Etiketleri

bu etiketler <h1>,<h2>,<h3>,<h4>,<h5>,<h6> etiketleridir ve başlık belirlemek için kullanılmaktadır.  Etiket İngilizce Heading yani başlık kelimesinin baş harfi ile belirtilmiştir. Büyüklükten küçüğe doğru sıralamasına göre h1den h6 etiketine doğrudur. Yani ne büyük başlık etiketi <h1> iken en küçük <h6>’dır.

  • <b> Etiketi

<b>….</b> etiketleri arasına yazdığınız yazılar kalın görüntülenecektir. İngilizce bold kelimesinden gelmektedir. Ziyaretçilerin ve arama motorları için anahtar kelimelere vurgu yapmak için kullanılmaktadır.,

  • <i> Etiketi

<i>…</i> etiketleri arasına yazdığınız yazıların italik yanı eğik bir yazı şeklinde yazılması için kullanılır. İtalic kelimesinden gelmektedir. Ziyaretçilerin dikkatini çekmek ve arama motorlarının anahtar kelimeleri belli etmek için kullanılır.

  • <u> Etiketi

<u>…..</u>Bu etiketler arasına yazılan yazılar altı çizili olarak vurgulanmaktadır. Underline kelimesinden gelmektedir. Ziyaretçilerin bu etiket arasına yazılan yazılara dikkatiğni çekmek amaçlı kullanılmaktadır.

  • <br> Etiketi

Bu etiket </br> olarak kapatılmamaktadır. Buna dikkat etmelisiniz. <br> etiketi alt satıra geçmek için kullanılmaktadır. Html ile web sayfası oluştururken alt satıra geçmek için kullanılmaktadır.

  • <p> Etiketi

<p>……….</p> etiketi yazılan içeriklerin daha doğrusu yazıların paragraflara bölmek için kullanılmaktadır. Uzun yazıların okunabilirliğini arttırırken kullanıcı deneyimini arttırmaktadır.

  • <font> Etiketi

Bu etiket metnin rengini, yazı tipini ve boyutunu ayarlamak için kullanılabilmektedir. Size parametresi ile metnin boyutunu, color parametresi ile yazının rengini, face parametresi ile de yazı tipini değiştirebilirsiniz.

<font size=”4″>…….</font> <!Yazının boyutunu ayarlamak için font etiketi ve size parametresi kullanılmalıdır.>

<font face=”Ariel”>…….</font> <!Yazı tipini ayarlamak için font etiketi ve face parametresi kullanılmalıdır.>

<font color=”red”>……</font> <!Yazının rengini ayarlamak için font etiketi ve color parametresi kullanılmalıdır.>

 

Genel olarak html ile yazı yazma, sitemizin başlık, açıklama, anahtar kelimelerini ve metinlerimizi biçimlendirmemiz için gerekli olan html kodlarını öğrendik. Sıra geldi html kodlarını kullanarak link oluşturmakta. Bildiğiniz gibi siteler tek bir sayfadan oluşmamaktadır. Durum böyle olunca iletişim, hakkımızda gibi bir çok sayfa için html kodlarıyla linkleri oluşturmamız gerekmektedir.

  • Html Yazıya Link Verme Kodu

<a href=”hedefteki html dosyası adı”>Link vermek istediğiniz yazı</a> şeklinde kullabilirsiniz. Örnek vermek gerekirse <a href=”iletisim.html”> İletişim </a> şeklinde kullanabilirsiniz.

Eğer site dışında başka bir adrese link vermeniz gerekiyorsa kullanım şekli aynıdır sadece link vermek istediğiniz sitenin tam adresini yazmanız gerekmektedir. Örnek verecek olursak

<a href=”https://www.facebook.com/profyko14″> Facebook Adresim</a> şeklinde kullanılabilir.

Html ile e-posta adresine bağlantı oluşturmak için <a href=”mailto: [email protected]”> E-posta göndermek için tıklayınız.</a> şeklinde kullanabilirsiniz.

Html ile resme link vermek için ise <a href=“https://www.fatihgirgic.com.tr”><img src=“resimler/kucukresim.jpg”></img></a>

Sizlere html ile link verme kodlarını örnekler ile detaylı bir şekilde anlattığımı düşünüyorum. Takıldığınız bir durum var ise herkesin faydalanması için yorum yaparak yanıt alabilirsiniz.

  • Html’de Tablo Oluşturma

Burada dikkatimizi çekecek olan 4 adet etiket olacaktır. Bu etiketleri sizler için listeleyelim.

<table…</table> etiketi: Bir tablo oluşturmak için bu etiketler arasına html kodları yazılmaktadır. Tablolara satır ve sütunlardan oluştuğunu bildiğinizi varsayarak satır ve sütun için de birer etikete ihtiyaç duyacağımızı düşünmüşseniz doğru düşünmüşssünüz.

<tr>….</tr> etiketi:Tablo içinde satır oluşturmak için kullanılmaktadır.

<td>….</td> etiketi: Tablo içerisinde sütun oluşturmak için kullanılmaktadır.

<th>….</th> etiketi: Tablo içerisinde başlıkları vurgulamak için kullanılmaktadır.

Html ile tablo oluşturulurken 5 adet parametre sizlerin işini kolaylaştıracak ve ziyaretçileriniz için tablolara dikkat çekebilirsiniz. Ayrıca satır ve sütunları birleştirebilirsiniz.

border: Tablonuza kenarlık oluşturmak için kullanılmaktadır.

bordercolor: Kenarlık rengini belirlemek için kullanılmaktadır.

bgcolor: Tablonun arka plan rengini değiştirmeniz için yarayacaktır.

width: Tablonun genişliğini belirlemenize yarayan parametredir.

height: Tablonun yüksekliğini ayarlamanız için  kullanabilirsiniz.

colspon: Aynı satırdaki hücreleri birleştirmek için kullanılır.

rowspan: aynı sütundaki hücreleri birleştirmek için kullanılmaktadır.

Örnek bir html’de tablo oluşturmak istersek tüm paremetleri ve kodları kullanarak olursak şöyle bir örnek verebiliriz:

Html ile Tablo Oluşturma

 

  • Html ile Form Oluşturma

<form   ……</form> etiketleri arasına yazılır. Burada bilmeniz gereken bir kaç parametre mevcuttur.

method: form verilerini sunucuya gönderme yolunu belirtmektedir. Get ve Post olmak üzere iki şekilde sunucuya gönderilmektedir. Action kısmına girilen bu yöntemler ile get ile gönderim yaparsanız sorgu olarak eklenip sunucuya gönderilmektedir. Diğer yöntem post ise http isteği içinde veri paketi şeklinde sunucuya gönderilmektedir. post özelliğinde herhangi bir limit yoktur.

Action:  Form verilerinin gönderileceği adresi belirlenmesinde kullanılır. Gönder ve ya html’de submit  butonuna bastığında seçilen yöntemle belirtilen adrese gönderim yapmaktadır.

TYPE: Veri alanı tipini tanımlar. Text, checkbox, reset, radio, submit, password, image, file, hidden, button, range, scribble gibi değerler alabilir. Default değeri “text” dir. Biraz sonra ayrıntıları açıklanacaktır.

NAME: Veri alanının adı. Programlama dilindeki değişken_adı yerine geçer. CGI scriptine gönderilecek veriyi tutacak değişkenin adıdır. Formu yazan dilediği adı verebilir. Yukarıdaki örnekte NAME=”isim” nitelemesi yapılmıştır. Dolayısıyla bu veri alanının adı “isim” olmuştur. Mutlaka belirtilmelidir.

VALUE: Değişkene atanan ön-değer. Kullanıcı bu alana veri girince ön-değer yok olur. Yukarıdaki örnekte VALUE=”webcebir.com” nitelemesi yapılmıştır. Ön-değer ataması zorunlu değildir; yani ön-değer konulmayacaksa VALUE parametresi kullanılmaz.

SIZE: “text” ve “password” elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.

CHECKED: Radio ya da checkbox seçeneğini ön-seçili kılmaya yarar

DISABLED: Veri alanını kullanıcı girişine kapatır.

SRC: Image belirleyen “%URL” adresini belirler.

Bazen, birden çok seçeneğin seçilmesi istenebilir. Bu durumda, TYPE değeri olarak checkbox kullanılır.

<INPUT type=radio> etiketi, birbirleri ile ilişkili fakat sadece birinin seçilebileceği radyo düğmesi (radio button / option button) oluşturulmasını sağlar.

<INPUT type=submit> etiketi, kullanıcının formu göndermesini sağlayan bir düğme (button) kontrolü oluşturulmasını sağlar.

Bir INPUT tipidir. Bir forma girilen verileri siler ve formu default haline koyar. INPUT damgasında type=”reset” nitelemesi yapılır. Value adı girilmese tarayacının diline göre sıfırla , reset gibi değer atar.

<INPUT type=file> etiketi, bir metin kutusu (textbox) ve gözat (browse) butonu ile sunucuya dosya gönderme/yükleme (upload) kontrolü oluşturulmasını sağlar.

<INPUT type=button> etiketi, düğme (button) form kontrolü oluşturulmasını sağlar.

Html Form Oluşturma