HTML Kodları http://html-kodlari.com Bir başka WordPress sitesi Mon, 09 Mar 2015 12:55:09 +0000 tr-TR hourly 1 HTML’de Tablolar Oluşturmak http://html-kodlari.com/htmlde-tablolar-olusturmak/ http://html-kodlari.com/htmlde-tablolar-olusturmak/#comments Mon, 09 Mar 2015 12:52:18 +0000 http://html-kodlari.com/?p=62 Tablolar ile web sitenizin içeriğini daha organize hale getirebilir, farklı bilgiler ekleyebilirsiniz.

Tabloları oluşturmak için 3 temel etiket kullanıyoruz:

  • <table> :tablo oluşturmak için
  • <tr> :tabloda satırlar oluşturmak için
  • <td> :hücreleri oluşturmak için

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

Örnek web sayfasının “body” bölümüne aşağıdaki kodu yazarak siz de ilk tablonuzu oluşturabilirsiniz.

<table border=1>
    <tr>
        <td>Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 2, Hücre 1</td>
        <td>Satır 2, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 3, Hücre 1</td>
        <td>Satır 3, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 4, Hücre 1</td>
        <td>Satır 4, Hücre 2</td>
    </tr>
</table>

Bu HTML kodu ile aşağıdaki gibi bir sonuç oluşturduysanız devam daha detaylı incelemeye geçebiliriz.

Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1 Satır 2, Hücre 2
Satır 3, Hücre 1 Satır 3, Hücre 2
Satır 4, Hücre 1 Satır 4, Hücre 2

 

  • “border” niteliği tablonun kenarlıklarını belirler. “border=0″ ile kenarlıksız tablolar oluşturursunuz.

Tablolara Başlık Eklemek

Tablolara başlık satırı eklemek için hücreler oluşturmak için kullanılan <td> etiketi yerine, <th> etiketini kullanılır. Aşağıdaki örneği siz de “body” ögesinin içine yerleştirin.

<table border=1>
    <tr>
        <th>İsim</th>
        <th>Ücret</th>
    </tr>
    <tr>
        <td>Bisiklet</td>
        <td>1000 TL</td>
    </tr>
    <tr>
        <td>Paten</td>
        <td>200 TL</td>
    </tr>
</table>

Sonuç ise aşağıdaki gibi olacaktır.

İsim Ücret
Bisiklet 1000 TL
Paten 200 TL

 

Hücre büyüklüğü ve hücreler arası boşlukları ayarlamak

Hücreni büyüklüğünü “cellpading” hücrelerin arasındaki boşluğu “cellspacing” ayarlayan niteliklerdir.

<table border="1" cellpadding="5" cellspacing="5">

şeklinde <table> etiketi içinde düzenlenirler.

Tablolarda satır ve sütunları birleştirme

“colspan” ve “rowspan” niteliklerini kullanarak tablolarda sırasıyla sütun ve satırları birleştirebilirsiniz.

Aşağıdaki örnek tabloyu oluşturan kodları siz de örnek web sayfanızda deneyebilirsiniz.

<table border="1">
    <tr>
       <th>Sütun 1</th>
       <th>Sütun 2</th>
       <th>Sütun 3</th>
    </tr>
    <tr>
        <td rowspan="2">Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
        <td>Satır 1, Hücre 3</td>
     </tr>
     <tr>
        <td>Satır 2, Hücre 2</td>
        <td>Satır 2, Hücre 3</td>
     </tr>
     <tr>
        <td colspan="3">Satır 3</td>
     </tr>
</table>

Yukarıdaki örnek kod aşağıdaki tabloyu oluşturur:

Sütun 1 Sütun 2 Sütun 3
Satır 1, Hücre 1 Satır 1, Hücre 2 Satır 1, Hücre 3
Satır 2, Hücre 2 Satır 2, Hücre 3
Satır 3

 

Bunlar dışından da tablolarda aşağıdaki özellikleri kullanabilirsiniz:

  • “bgcolor”: Bu nitelikle bütün tabloya ya da tek bir hücreye arka plan rengi ekleyebilirsiniz.
<table border="1" bordercolor="green" bgcolor="yellow">
  • “background” : Bu nitelikle arkaplan görüntüsü ekleyebilirsiniz.
  • “bordercolor” : Bu nitelikle kenarlıkların rengini değiştirebilirsiniz.
  • “width” ve “height” nitelikleri ile piksel veya ekranda kapladığı alanın yüzdesi olarak girerek hücrelerin ve tablonun boyutunu değiştirebilirsiniz.
]]>
http://html-kodlari.com/htmlde-tablolar-olusturmak/feed/ 0
Web Sitesine Görüntü Nasıl Eklenir? http://html-kodlari.com/web-sitesine-goruntu-nasil-eklenir/ http://html-kodlari.com/web-sitesine-goruntu-nasil-eklenir/#comments Mon, 09 Mar 2015 10:21:24 +0000 http://html-kodlari.com/?p=56 HTML’de sadece yazılarla oluşturulmuş bir site biraz sıkıcı olabilirdi. İnternette sitelere nasıl resimleri eklendiğine beraber bakalım.

HTML dökümanına imaj eklemek için <img> etiketi şu şekilde kullanılır:

<img src="images/ornek1.gif" width="120" height="90" alt="HTML Dog">

src niteliği tarayıcıya görüntüyü nerede bulabileceğini söyler. Tıpkı linklerde kullanılan <a> etiketi gibi bir linki, yukarıdaki gibi bilgisayarınızdan bir dosyayı gösterebilir.

width ve height nitelikleri ise sırasıyla görüntünün genişliğini ve yüksekliğini tanımlar. Bu nitelikleri belirlemeden resim yüklenirse görüntünün tamamını yükleyecektir. Yazdığınızda ise istenilen boyutlarda sonuç verir.

alt niteliği ise sitenize giren kullanıcılar için görüntünüzün tanımını verir ve görme engelli kullanıcılar için de okuyucu programlar sayesinde imajın tanımını verir.

  • <img> etiketi bir içeriği çevrelemediği için kapatma etiketine de ihtiyaç yoktur.
  • Web sitelerinde kullanılan görüntüler genelde JPEG, PNG veya GIF formatındadır. PNG en yüksek kaliteye ve sıkıştırma oranına sahiptir ancak bazı eski tarayıcılar tarafından desteklenmeyebilir. JPEG daha çok fotoğraf gibi görüntülerde kullanılır. GIF ise az renk seçeneği nedeniyle düşük boyutludur ve kalitesi de düşüktür.
  • Kullanıcılar web sitelerini her zaman daha hızlı kullanmak isterler ve ultra yüksek çözünürlükler hızı yavaşlatır. Görüntüleri web sitenize yüklerken en uygun kalite ve hız dengesini yakalamaya çalışmanız en uygunu olacaktır.

 

]]>
http://html-kodlari.com/web-sitesine-goruntu-nasil-eklenir/feed/ 0
HTML’de Linkler http://html-kodlari.com/htmlde-linkler/ http://html-kodlari.com/htmlde-linkler/#comments Mon, 09 Mar 2015 09:37:12 +0000 http://html-kodlari.com/?p=53 HTML’de ilk H ve T harfleri Hypertext’in kısaltmasıdır. Hypertext ise linklerden oluşmuş metin anlamına gelmektedir. HTML de linkleri kullanarak yazılan web sayfaları için tasarlanmıştır. İnternetin birbirine bağlı yapısı da linklerden gelmekte olduğu için linkler bulunmayan bir web sitesi düşünülemez. Şimdi web sitenize linkleri nasıl yerleştireceğinizi beraber inceleyelim.

Çapa(anchor) etiketi de denen link etiketi <a> ile belirlenir ve linkin adresi de bu etiket içine yazılır.

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>

    <h1>Bu benim ilk web sayfam</h1>

    <h2>Bu site neden yapılmıştır?</h2>
    <p>HTML öğrenmek için</p>

    <h2>Where to find the tutorial</h2>
    <p><a href="http://www.vidobu.com">Vidobu</a></p>

</body>

</html>

Linkin adresi “href” niteliği kullanılarak belirlenmiştir. Link örnekteki gibi tamamen farklı olabileceği gibi sayfanıza bağlı da olabilir.

Örnek dosyanızla aynı klasörde bir başka .hmtl dosyasını aşağıdaki gibi ekleyebilirsiniz.

 <a href="ogrendiklerim.html">HTML'de neler öğrendim?</a>

Aynı zamanda aynı sayfa içindeki başlıklara da link verebilirsiniz. Bunun için öncelikle başlığa “id” niteliği kimlik oluşturmanız gereklidir. Sonra başına kare(#) koyarak kimlikle link verebilirsiniz.

<h2 id="baslik2">HTML'de Başlıklar</h2>
<a href="#baslik2">Başlıklar için tıklayınız.</a>
]]>
http://html-kodlari.com/htmlde-linkler/feed/ 0
HTML ile Listeler Oluşturmak http://html-kodlari.com/html-ile-listeler-olusturmak/ http://html-kodlari.com/html-ile-listeler-olusturmak/#comments Mon, 09 Mar 2015 08:34:57 +0000 http://html-kodlari.com/?p=48 Web sayfanızdaki metinleri düzenlemede listeler önemlidir. HTML ile üç farklı tip liste oluşturabilirsiniz:

  • Sırasız liste
  • Sıralı liste
  • Tanım listesi

İlk iki listeyi bu yazıda inceleyeceğiz. Tanım listelerini öğrenmek için o bölüme geçebilirsiniz.

Sıralı ve sırasız listeler tamamen aynı şekilde çalışır. Ancak sırasız listelerde “nokta” gibi elemanlarla maddeler gösterilirken, sıralı listelerde sayılar veya harfler kullanılır.

<ul> etiketi sırasız listeler(unordered list), <ol> etiketi ise sıralı listeler(ordered list) için kullanılır. Her iki listenin içindeki maddeler <li> etiketi içine yazılır.

Sırasız Liste

Aşağıdaki kod ile sırasız liste hazırlayalım.

<!DOCTYPE html>

<html>

<head>
    <title>İlk sayfam.</title>
</head>

<body>
    <h1>Bu benim ilk web sayfam.</h1>

    <h2>Ne için yapılmıştır?</h2>
    <ul>
        <li>HTML öğrenmek için</li>
        <li>Öğrendiklerimi göstermek için</li>
        <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
    </ul>

</body>

</html>

İşte sırasız listemizi gerçekleştirdik. Şimdi bir de sıralı liste ekleyelim. Listeler bölümünü aşağıdaki gibi değiştirelim:

<ul>
    <li>HTML öğrenmek için</li>
    <li>Öğrendiklerimi göstermek için
        <ol>
            <li>Patronuma</li>
            <li>Arkadaşlarıma</li>
            <li>Kedime</li>
        </ol>
    </li>
    <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
</ul>

İşte sırasız bir liste içinde sıralı listeyi hazırladık.

]]>
http://html-kodlari.com/html-ile-listeler-olusturmak/feed/ 0
HTML’de Başlıklar ve Metin Düzenleme http://html-kodlari.com/htmlde-basliklar-ve-metin-duzenleme/ http://html-kodlari.com/htmlde-basliklar-ve-metin-duzenleme/#comments Mon, 09 Mar 2015 07:45:20 +0000 http://html-kodlari.com/?p=45 Bir önceki yazımızda <p> etiketiyle paragrafları oluşturmaya değinmiştik. Şimdi de metin düzenlemeye başlıklarla devam edelim.

Başlıkların büyüklükleri ve önem sırasına göre 6 farklı başlığımız var. h1, h2, h3, h4, h5 ve h6 etiketleri ile başlıkları sıralayabilirsiniz. h1 en fazla öneme ve h6 en az öneme sahiptir.

Bir önceki örneğe şimdi de başlıklar ekleyip değiştirelim:

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>
    <h1>Bu benim ilk web sayfam.</h1>

    <h2>Sayfada neler var?</h2>
    <p>Basit HTML kodları ile oluşturulmuş basit bir web sitesi.</p>

    <h3>Neden yapılmıştır?</h3>
    <p>HTML öğrenmek için yapılmıştır.</p>
</body>

</html>
  •  <h1> etiketinin her sayfada yalnızca bir kez kullanılması sayfa yapısı açısından önemlidir.
  • Başlıkları yazıların vurgusunu arttırmak için kullanmayın. Başlıklar arama motorları açısından önemlidir.

 

]]>
http://html-kodlari.com/htmlde-basliklar-ve-metin-duzenleme/feed/ 0
HTML ile Paragraflar Nasıl Oluşturulur? http://html-kodlari.com/html-ile-paragraflar-nasil-olusturulur/ http://html-kodlari.com/html-ile-paragraflar-nasil-olusturulur/#comments Sun, 08 Mar 2015 07:56:53 +0000 http://html-kodlari.com/?p=38 Artık yazdıklarınızı daha organize hale getirmenin zamanı geldi. Gelin örnek sayfamıza bir satır yazı daha ekleyelim ve neleri değiştirebileceğimizi hep birlikte inceleyelim.

<!DOCTYPE html>
<html>
<head>
      <title>İlk Sayfam</title>
</head>
<body>
      Bu benim ilk web sayfam. 
      Ne kadar heyecan verici!
</body>
</html>

Eğer siz de örnek sayfanızı yukarıdaki hale getirip kaydedip tarayıcınızda açtıysanız, yazdıklarınızın yeni satırdan başlamadığı görmüşsünüzdür. Onun yerine aşağıdaki gibi tek satırlık bir yanıt almış olmalısınız.

Bu benim ilk web sayfam. Ne kadar heyecan verici!

Bunun sebebi tarayıcıların “space” ve “enter” tuşuyla oluşturduğunuz boşlukları tanımamasıdır.

Body elemanı içindeki yazıları aşağıdaki hale getirerek istediğimiz sonuca ulaşalım.

 <p>Bu benim ilk web sayfam.</p> 
 <p>Ne kadar heyecan verici!</p>

“p” etiketi paragraflar için kullanılır. Tarayıcınız da iki ayrı paragrafı tanıyıp buna göre yanıt verdi.

Vurgulama

Bir paragraftaki yazıları em (vurgu) and strong (önem) etiketleri ile vurgulayabilirsiniz.

Genel olarak tarayıcılar em etiketini eğik(italik) ve strong etiketini de kalın(bold) gösterirler.

Ana elemente aşağıdaki satırı ekleyerek siz de etiketleri test edebilirsiniz.

<p>Evet,gerçekten <em>çok</em> heyecanlı. <strong>Uyarı:</strong> heyecan seviyesi yükseliyor.</p>

Eğer bu denediklerinizin sonund aşağıdaki gibi bir sonuç aldıysanız HTML ile ilgili pek çok temel kavramı öğrendiniz demektir.

html-ornek-1

]]>
http://html-kodlari.com/html-ile-paragraflar-nasil-olusturulur/feed/ 0
HTML’de Sayfa Başlıklarını Oluşturmak http://html-kodlari.com/htmlde-sayfa-basliklarini-olusturmak/ http://html-kodlari.com/htmlde-sayfa-basliklarini-olusturmak/#comments Sun, 08 Mar 2015 07:27:45 +0000 http://html-kodlari.com/?p=28 Bütün HTML sayfalarının bir başlığı bulunmalı. Siz de örnek sayfanıza başlık eklemek için yazdığınız kodları aşağıdaki gibi düzenleyin:

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>
    Bu benim ilk web sayfam.
</body>
</html>

 

Yukarıda sayfamıza head ve title etiketlerini kullanarak iki element ekledik (ve ikisini de kapattık).

  • Head elemanına( <head> ile başlayıp</head> ile bitiyor)  sayfa başlığı denir ve ana ögeden(<body>ile başlayıp </body> ile bitiyor) önce yerleştirilmiştir ve sayfa hakkında bilgi taşır. Sayfa başlığı tarayıcıda görülmez ancak tarayıcının üst kısmında sayfanızı tanımlayacak şekilde bulunur. Ayrıca sayfayı sık kullanılanlara eklerseniz orada da sayfanızın adı “İlk Sayfam” olarak görülecektir.
]]>
http://html-kodlari.com/htmlde-sayfa-basliklarini-olusturmak/feed/ 0
HTML’de Tag, Attribute ve Element http://html-kodlari.com/htmlde-tag-attribute-ve-element/ http://html-kodlari.com/htmlde-tag-attribute-ve-element/#comments Sat, 07 Mar 2015 16:15:09 +0000 http://html-kodlari.com/?p=23 HTML her ne kadar sadece metinden oluşsa ve sadece içerik girmek için kullanılsa da girdiğimiz içeriklerle ilgili basit görsel düzenlemeler yapmamıza da olanak tanır. Aşağıdaki komutlarla bu düzenlemelere başlayabilirsiniz.

1. Tag (Etiketler)

HTML dökümanlarının en basit yapısı olan etiketler, içeriklerinizin başında ve sonunda bulunur ve onlara anlam katmaya yarar.

Bir önceki sayfada oluşturduğunuz ilk web sayfanızı aşağıdaki gibi değiştirin:

<!DOCTYPE html>
<html>
<body>
    This is my first web page
</body>
</html>

Şimdi dökümanı kaydedin ve tarayıcıdaki HTML dökümanını yenileyin.

Sayfanızın görünümüyle ilgili hiçbir değişiklik olmadı ama zaten HTML’in amacı görünüm değil içerik katmaktı ve bu eklediklerimizle ilk sayfanız web sayfalarının temel özelliklerine kavuşmuş oldu.

<!DOCTYPE html> satırı, döküman tipi deklarasyonu olarak adlandırılır ve tarayıcıya HTML’in hangi versiyonunu kullandığınızı anlatır (HTML5 de olabilir). Eğer bu satırı yazmazsanız tarayıcı ne açtığınızı anlamayacak ve tuhaf sonuçlar verecektir.

<html> satırı, dosyanın açılış etiketi olarak ifade edilir. Tarayıcıya kapanış etiketi </html>‘ne kadar ki yazıların HTML dökümanı olduğunu anlatır.

<body> ve </body> arasında kalan kısım ise tarayıcıda görülen ana içeriktir.

  • Her etiketin kapama etiketi olmayabilir.
  • İçeriğin başında bulunan bütün etiketlerin kapatma etiketi de olmalıdır.

2. Nitelikler (Attributes)

Etiketler aynı zamanda bazı nitelikler de taşıyabilir. Nitelikler açılış etiketinde, tırnak işareti içinde yazılır.

<tag attribute="value">Margarine</tag>

Daha detaylı olarak ilerleyen bölümlerde nitelikleri inceleyeceğiz.

  • Her ne kadar tırnak işaretleri olmazsa olmaz değillerse de, hem pratik yapmanız hem de tutarlı ve temiz bir kodlama için gereklidir.

3. Ögeler (Elements)

Etiketler ögelerin başında ve sonunda bulunur. Elementler(ögeler) ise sitenizin görünen kısmıdır. Örneğin <body> ve </body> yazıları ve arasında bulunan içerik “body” yani ana öge olarak adlandırılır. Yine aynı şekilde “<title>” ve “</title>” etiketlerini kullanarak oluşturulan “<title>Rumple Stiltskin</title>” başlığı başlık elementi (ögesi) olarak adlandırılır.

]]>
http://html-kodlari.com/htmlde-tag-attribute-ve-element/feed/ 0
HTML’e Başlangıç http://html-kodlari.com/htmle-baslangic/ http://html-kodlari.com/htmle-baslangic/#comments Sat, 07 Mar 2015 15:18:00 +0000 http://html-kodlari.com/?p=12 HTML2HTML aslında çok basit bir metin editörü dosyası ile başlıyor. Siz de öğrendikçe HTML’in sadece süslü metinlerden ibaret olduğunu göreceksiniz.Notepad bütün Windows işletim sisteminde bulunan metin düzenleyici bir programdır. Mac OSX işletim sistemlerinde ise TextEdit aynı amaçla kullanılabilir. Ancak herhangi bir metin editörü programı ile HTML kodları yazabilirsiniz.Bir deneme yapalım.Metin editörünü açıp aşağıdaki gibi bir yazı yazın.

Bu benim ilk web sayfam.

Sonra “html” isimli bir klasör oluşturun (bu klasör istediğiniz yerde oluşturabilirsiniz) ve az önce oluşturduğunuz metin dosyasını “ilkhtmlsayfam.html” adıyla klasörün içine kaydedin. İşte ilk web sayfanızı oluşturdunuz bile.

  • Dikkat! Dosya adına “.html” uzantısını yazmayı unutmayın.  “.html” uzantısını unutursanız Windows dosyanızı “.txt” uzantısıyla metin dosyası olarak kaydedecektir.

İlk HTML sayfanızı açmak için internete ihtiyacınız yok. Bilgisayarınızda bir internet tarayıcı olması yeterli. Oluşturduğunuz HTML dosyasını çift tıklayarak açın ya da Chrome, Firefox, Safari, Opera veya Internet Explorer’ı açıp adres çubuğuna dosyanızın adresini yazın (örneğin: “c:\html\ilkhtmlsayfam.html”).

İşte ilk sayfanız webde böyle görünüyor.

Notepad gibi basit editörler yerine dilerseniz Adobe Dreamweaver gibi daha karmaşık ve ayrıntılı programlar kullanabilirsiniz. Ancak başlangıçta bu programlar kafa karıştıcı olabilir. Ayrıca öğrenmeye başlarken bu programlarla elle kodladığınız kadar iyi HTML öğrenemezsiniz. Ancak ilerledikçe bu programlara geçmenizi tavsiye ediyoruz.
]]>
http://html-kodlari.com/htmle-baslangic/feed/ 0
HTML Başlangıç Rehberi http://html-kodlari.com/html-baslangic-rehberi/ http://html-kodlari.com/html-baslangic-rehberi/#comments Sat, 07 Mar 2015 14:38:42 +0000 http://html-kodlari.com/?p=6  

HTML-KodlariHadi HTML’e başlayalım. HTML ve CSS hakkında hiç bir bilginiz yok ama öğrenmek istiyorsanız doğru yerdesiniz. HTML ile ilgili aşağıdaki detayları öğrenip, hepsini bir araya toplayıp, CSS öğrenmeye geçebilirsiniz.

Bilmeniz gereken ilk şey HTML içerik, CSS ise görünüm oluşturmak için kullanılır.

İçerikler:

 

Eğitime Başlayın>

]]>
http://html-kodlari.com/html-baslangic-rehberi/feed/ 0