Top

Teknoloji

  • All
  • AI / YZ / LLM / Makine Öğrenimi
  • Android
  • Bakım-Onarım
  • CSS Dersleri
  • Görsel ve Görüntü İşleme
  • Hacking
  • HTML Dersleri
  • iOS
  • Kripto paralar
  • Linux
  • Mobil
  • Ofis Uygulamaları
  • Photoshop Dersleri
  • PHP Dersleri
  • Uygulamalar
  • Windows

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com'dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools'a ait paylaşacak olduğum online editörü kullanabilirsiniz.HTML, Özel karakterler / Entities, URL ve...

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com'dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools'a ait paylaşacak olduğum online editörü kullanabilirsiniz.HTML, Meta ve Scripts Verilere dair bilgi sunar...

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.


HTML, Head Elementi

Tüm head elementi için bir taşıyıcıdır. <head> elementi içeriğinde; stil dosyası bağı, scriptler, meta bilgisi desteği ve daha fazlasını taşır.

HTML, Title Elementi

<title> etiketi dökümanın başlığını ifade eder.

HTML ve XHTML belgelerinde gereklidir. Title elementi;

  • Tarayıcının araç çubuğunda bir başlık gösterir,
  • Favorilere eklendiğinde sayfa başlığı sağlar,
  • Arama motorlarında sayfa için başlık görüntüler.

Misal;

<html>
<head>
<title>Title of the document</title>
</head>

HTML, Base Elementi

<base> etiketi bir sayfa üzerindeki tüm bağlantılar için bir varsayılan adres veya bir varsayılan hedef ifade eder.

Misal;

<head>
<base href=”http://www.w3schools.com/images/” />
<base target=”_blank” />
</head>

HTML, Link Elementi

<link> etiketi bir döküman ile bir harici kaynak arasındaki ilişkiyi tanımlar. En çok stil dosyasını bağlamak için kullanılır.

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

HTML, Style Elementi

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com'dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools'a ait paylaşacak olduğum online editörü kullanabilirsiniz.Style Nasıl Kullanılır? HTML 4.0'dan itibaren tüm biçimlendirmeler...

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com'dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools'a ait paylaşacak olduğum online editörü kullanabilirsiniz.HTML Doctypes / Döküman Türleri Bir döküman türü...

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.


Sitenizin iyi görünmesi için layout çok önemlidir. Sayfanızın düzenini çok iyi ayarlamalısınız.

Website Düzeni/ Layout ‘u

Çoğu web sitesi içeriklerini gazete ve dergilerdeki gibi çoklu sütunlara ayırarak yerleştirir.

Bu sütunlar ise ya <table> etiketi ile ya da <div> etiketi ile ayrılır. Bir miktar CSS kullanımı da renkli sayfa görünümü, sayfa konumlandırma, element yerleşimi, arkaplan resimi gibi sayfaya canlılık katar.

HTML’de Layout – Table Kullanımı

En basit şablon oluşturma yolu <table> etiketleri ile mümkündür. Aşağıdaki örnekte 3 satır ve 2 sütuna sahip bir düzen göreceksiniz tablolar ile; -birinci ve son satırın yaslanması ve sütunlar colspan özelliğini kullanmıştır-

Misal;

<html>
<body>

<table width=”500″ border=”0″>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;”>
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign=”top”>
<td style=”background-color:#FFD700;width:100px;text-align:top;”>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style=”background-color:#EEEEEE;height:200px;width:400px;text-align:top;”>
Content goes here</td>
</tr>

<tr>
<td colspan=”2″ style=”background-color:#FFA500;text-align:center;”>
Copyright © 2011 W3Schools.com</td>
</tr>
</table>

</body>
</html>

Örneğin kaynağı; Buradadır.

Not; HTML tablolarıyla güzel şablonlar oluşturabilmek mümkün olduğu halde; tablolar sunulacak veriler için dizayn edilmiştir, tasarım için değil.

HTML’de Layout – Div Elementi kullanarak yani tablosuz kullanım

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com 'dan yapacağım bu çeviriler ile HTML'yi kolaylıkla öğrenebileceksiniz. HTML'nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör...

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.


HTML Çerçeveleri/Frames

Çerçevelerle daha doğrusu frame’ler ile,  bir tarayıcı penceresinde birden fazla html belgesi görüntüleyebiliyorsunuz. Çağırılan her bir html belgesi bir çerçeve olarak anılır, her bir frame(çerçeve) de diğerlerinden bağımsızdır.

Çerçeveleri kullanma neden avantajlı değildir;

  • HTML’nin ileri versiyonlarında destek bulamayabilir
  • Kullanımı zordur çünkü tüm sayfayı basmak zordur.
  • Web geliştiricisinin birçok HTML belgesini takip etmesi gerekir.

HTML, Frameset Elementi

Frameset elementi bir veya daha fazla frame elemanını tutar. Her bir frame elementi ayrı bir belgede tutulur.

Frameset elemanı frameset’te kaç tane sütun ve satır olacağını belirler ve kaçının ne kadar pixel ya da yüzdelik alan kaplayacağını belirler.

HTML, Frame Elementi

<frame> etiketi belirli bir pencereyi tanımlar bir frameset içinde.

Aşağıdaki örnekte 2 sütunlu bir frameset mevcut.

Birinci sütun tarayıcının %25’ini kaplıyor. İkincisi ise %75’ini kaplıyor. “frame_a.htm” birinci sütunda, “frame_b.htm” ise ikinci sütundadır.

Misal;

<frameset cols=”25%,75%”>
<frame src=”frame_a.htm” />
<frame src=”frame_b.htm” />
</frameset>

Not; frameset’in sütunlarının alanı yanı cols, piksel cinsinden de yazılabilir ve sütunlardan geriye kalan yıldız ile kalan alanı kaplaması sağlanabilir.  (cols=”200,500″) ve (cols=”25%,*”) gibi.