Html Dersleri 1-giriş Ve Ilk Sayfa

ERVAH-I-EZEL · 12 Şubat 2017

Selamün Aleyküm devrelerim şu günlerde çok yoğunum bir türlü derslere başlayamadım ama nihayet ilk HTML dersimize şimdi başlayacağız. HTML'in ve diğer web dillerinin ne işe yaradığını, kodlarımızı nereye nasıl yazacağımızı vs. önceki konularda anlattım. Eğer bu dediklerimi bilmiyorsanız aşağıda verdiğim linklerdeki konulara bir göz atmanızı tavsiye ediyorum. Şimdi dersimize başlayalım.

http://forum.ayyildiz.org/konu/web-programlama-dilleri-ve-kullanıldıkları-yerler.81785/
http://forum.ayyildiz.org/konu/web-editörleri.83155/

HTML, temel olarak etiket adını verdiğimiz birimlerden oluşur ve parametre ismini verdiğimiz birimlerle de özelleştirilebilir. HTML etiketleri "<" ve ">" büyüktür işaretleri arasına yazılarak açılırlar.
Örnek: <html>, <head>, <title>, <body> gibi.
Ayrıca açılan her etiket "/" işareti ile kapanmak zorundadır.
Yani; </html>, </head>, </title>, </body> şeklindedir.
Biz web sayfasına ekleyeceğimiz içeriği etiketlerin arasına yazıyoruz. Mesela "p" paragraf açmak için kullanılan bir etikettir. Biz bir paragrafı şöyle oluştururuz:
<p>Burası bir paragraf.</p>
Bu kadar kolay. Şimdi bir HTML sayfasındaki temel HTML etiketlerini ve ne işe yaradığını görelim.
Kod:
 <html>

<head>

</head>                       

<body>

</body>                 

</html>
Basit bir HTML sayfasının kodları bu şekildedir. Bu kodları editörümüze ya da not defterine yazıp uzantısını .html olarak kaydettiğimizde içi boş bir internet sayfası oluşur çünkü biz daha sayfaya bir içerik oluşturmadık. Sadece sayfanın genel hatlarını oluşturduk. Şimdi bu etiketlerin ne işe yaradığını öğrenelim.

1- <html> Etiketi
Adı üzerine bir html sayfası oluşturacağımızı belirleyen kodu yazdık. Bu alanın içi head ve body etiketleri olarak ikiye ayrılıyor.

2- <head> Etiketi
Sayfanın bilgilerini içinde bulunduran kısımdır. Sayfanın kodlanış dili vs. bilgiler head kısmına yazılır. Bu bölüm pek önemsenmese de gerçekten gerekli kodların yazılması gereken önemli bir bölüm. Head kısmına yazılabilecek komutlardan ileriki derslerde bahsedeceğiz, merak etmeyin. Şimdi anlatmak istediğim bir de title etiketi var.

3- <title> Etiketi
Kısa ve net olarak açıklama istiyorum.

Şu resimde koyu yeşil olarak işaretlenmiş küçük penceredeki yazı title etiketi ile sağlanıyor. O pencerede "Ayyıldız Tim" yazısını yazmak için sizin de tahmin edeceğiniz gibi <title>Ayyıldız Tim</title> şeklinde bir kod kullanılmıştır.

Head etiketi içine giren başka bir komut da yok. "style" isimli bir etiket var ki bu bambaşka bir şey. İleride Css derslerine geçtiğimiz zaman öğreneceğiz.

4- <body> Etiketi
Geriye kalan bütün etiketleri içine alan bir sayfada gördüğümüz yazı,tablo,resim gibi içeriklerin girdiği kısımdır.

Bir web sayfasındaki temel etiketler bunlar. Önümüzdeki derslerde yavaş yavaş sayfamızı geliştirmeye başlayacağız. Dersi sonlandırmadan önce en başta bahsettiğim parametreler ile ilgili biraz bilgi vereceğim.

Parametreler
Src, hrefi, border, id gibi pekçok parametre mevcut. Fakat ben şimdi bu parametrelerin ne işe yaradığını, nerede ve nasıl kullanıldığını anlatmayacağım çünkü parametreler etiketlerle birlikte kullanılır ki daha doğru düzgün etiket öğrenmedik. Parametreleri vakti geldikçe tek tek öğreneceksiniz. Yine de size bir ön bilgi vermek isterim. Mesela "img" etiketi sayfaya resim koymak için kullanılan bir etikettir. Ancak diyelim ki bu resmin sayfadaki yüksekliğini biraz artırmak istiyoruz. Bunun için "height" parametresini kullanılır.

Devrelerim,ilk HTML dersimizin sonuna geldik. Bu dersimizde HTML ile ilgili giriş bilgileri öğrendik. Konuyu beğenerek derslerime devam etmem için beni teşvik edebilirsiniz. Anlamadığınız bir yer varsa yorum olarak sorun, ben cevap veririm. İyi günler, iyi forumlar.

ERVAH-I-EZEL · 12 Şubat 2017

AYDOĞAN Albayım kusura bakmayın rahatsız ettim başlıkta yanlışlık yapmışım, değiştiremiyorum.
"HTML Dersleri 1- Giriş ve İlk Sayfa" şeklinde olacaktı. Tekrar özür diliyorum.

mervenur_smsk · 12 Şubat 2017

Devrem gayet anlaşılır bir biçimde yazmışsın. Eline sağlık. Takipteyim.

ERVAH-I-EZEL · 12 Şubat 2017

mervenur_smsk demiş ki: ↑

Devrem gayet anlaşılır bir biçimde yazmışsın. Eline sağlık. Takipteyim.
Hepsini görmek için tıklayın...

Teşekkürler devrem. Yeni konu yakında gelir...

Aben3 · 12 Şubat 2017

mervenur_smsk demiş ki: ↑

Devrem gayet anlaşılır bir biçimde yazmışsın. Eline sağlık. Takipteyim.
Hepsini görmek için tıklayın...

html 5 mi anlaticaksin devrem yoksa xhtml mi ?

mervenur_smsk · 12 Şubat 2017

Aben3 demiş ki: ↑

html 5 mi anlaticaksin devrem yoksa xhtml mi ?
Hepsini görmek için tıklayın...

Bana mı dedin devrem?

Aben3 · 12 Şubat 2017

mervenur_smsk demiş ki: ↑

Bana mı dedin devrem?
Hepsini görmek için tıklayın...

kusuruma bakma yanlis yazdim

Aben3 · 12 Şubat 2017

ERVAH-I-EZEL demiş ki: ↑

Teşekkürler devrem. Yeni konu yakında gelir...
Hepsini görmek için tıklayın...

devrem html 5 derslerimi bu xhtml mi

mervenur_smsk · 12 Şubat 2017

Aben3 demiş ki: ↑

kusuruma bakma yanlis yazdim
Hepsini görmek için tıklayın...

Estağfirullah devrem, sorun değil.

ERVAH-I-EZEL · 12 Şubat 2017

Aben3 demiş ki: ↑

html 5 mi anlaticaksin devrem yoksa xhtml mi ?
Hepsini görmek için tıklayın...

Aben3 demiş ki: ↑

devrem html 5 derslerimi bu xhtml mi
Hepsini görmek için tıklayın...

Devrem Html 5'in Xhtml'den farkı bazı yenilikler ve eklemeler... Ben derslerin devamında önce xhtml'i kafanıza oturtup, sonra html 5 yenilik ve özelliklerinden devam edeceğim.

Aben3 · 13 Şubat 2017

devrem sukur ALLAHA ben ogrendim html yi yok simdi senin nasi ldevam edeceginizi sorudm dogrudur devrem html 5 de bazi kodlar kullanilmior

ERVAH-I-EZEL · 14 Şubat 2017

Yeni konumuz açıldı.

http://forum.ayyildiz.org/konu/html-dersleri-2-yazı-etiketleri.84006/

YUSUER · 19 Şubat 2017

Hiper Metin İşaretleme Dili (İngilizce Hypertext Markup Language, ks. HTML) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir.

HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler, dolayısıyla aynı HTML kodunun farklı tarayıcılarda farklı sonuç vermesi olasıdır. CSS ve JavaScript ile beraber kullanıldığında HTML vasıtasıyla görsel ve dinamik web siteleri yaratılabilir.

Küçüktür ve büyüktür işaretleri arasına yazılan HTML komutları kullanılarak yazılır (ör: <html>). İşaretlenen metnin başını ve sonunu belirtmek için çoğunlukla çift olarak kullanılırlar (Örnek: <h1>Selam</h1>) ancak işaretlemek yerine metnin bir yerine bir işaret konacaksa tek olarak da kullanılabilirler (Ör: <img>).

Örnek bir HTML kodu[değiştir | kaynağı değiştir]
HTML standartları W3C tarafından belirlenmektedir. HTML, "etiket" (İngilizce: tag) ismi verilen çeşitli elemanlar kullanılarak oluşturulur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.

<html>
<head>
<title>örnek başlık</title>

</head>
<body>
<p style="font-size:10px"><a href="http://tr.wikipedia.org">Özgür Ansiklopedi</a></p>
</body>
</html>

YUSUER · 19 Şubat 2017

HTML Giriş
Bu yazımda size HTML'i tanıtacağım ve birkaç basit örnek yapacağız. HTML derslerimiz bittiğinde ise bir web sayfası oluşturabilecek seviyeye geleceğiz.

HTML, tam adıyla söylersek Hyper Text Markup Language, web sayfalarını oluştururken kullandığımız temel dildir. Türkçe karşılığı tam yoktur ancak çeşitli yerlerde birbirine yakın çeviriler bulunmaktadır. Biz de Metin İşaretleme Dili diyebiliriz. Şunu da belirtelim HTML bir programlama dili değildir.

HTML kodlarını yazmak için özel bir programa ihtiyaç yoktur. Çalışmalarımızda kodlarımızı not defterine yazacak sonra da herhangi bir tarayıcı ile (Google Chrome, Firefox, Opera...) anlamlı hâle getireceğiz.

HTML 1990 yılında geliştirilmiştir ve daha sonra çeşitli sürümleri çıkmıştır. Sonuncusu ise 2012 yılında çıkan HTML5'dir.

Artık yavaş yavaş HTML kodlarını tanımaya başlayalım.

HTML dili etiket adını verdiğimiz kodlardan oluşur. Etiketler “<” ve “> “ arasına yazılır. Örneğin <html> ,<body> ,<head>… Genellikle her etiketin bir de kapanışı vardır. Bunun için de etikete fazladan “/” ekleriz. Yani örnek verdiğimiz üç etiketi kapatırken </html>, </body>, </head> şeklinde yazıyoruz. Kodumuzu yazıyoruz sonra istediğimiz herhangi bir içerik ekliyoruz (yazı, resim, vs...) sonra da kapatıyoruz. Daha detaylı bir örnek verelim: <b> etiketi yazının kalın görünmesini sağlar. <b>...</b> arasına yazıcağımız bütün yazı kalın görünür. (Örn.: <b>Bu yazı kalındır </b>)

Şimdi genel sayfa yapısını inceleyelim.

<html>
<head>
<title>Başlığım</title>
</head>
<body>
<p>
Merhaba Dünya
</p>
</body>
</html>

Dikkat ettiyseniz açılan her kod kapatıldı. Bunun unutulması kodların çalışmasını olumsuz etkiler. Not defterini açın ve yukarıdaki kodları yazın. Sonra kaydedin ve kapatın. Yeni Metin Belgesi.txt olarak kaydedilecektir. Uzantısını değiştirin, txt yi silin ve html yapın. Artık açtığınızda not defteri ile değil de internet tarayıcınız ile açılacaktır ve ekranda şu görülür: "Merhaba Dünya"

Sekme başlığında ise “Başlığım” yazısını görürsünüz. Böylece ilk kodlarımızı yazmış ve çalıştırmış olduk. Şimdi ise kodların ne işe yaradıklarını açıklayalım:

Bütün HTML kodları <html>…</html> arasına yazılır. Onun dışına yazdıklarınızın bir etkisi yoktur. <html> kodlarının arasında da iki temel kod kullandık. <head> ve <body> sayfanın baş ve gövde kısımları. <head>…</head> arasındaki kodlar sayfa bilgisini tanımlamaya yöneliktir. Biz <title> etiketini kullanarak sayfaya bir başlık verdik. Bunun dışında <meta> etiketini; javascript, css gibi diğer web dillerini kullanabiliriz. Javascript ve css HTML e göre ileri düzeydir. HTML’i öğrenmeden onlara çalışmanız doğru olmaz . Yine de ne işe yaradıkları hakkında araştırma yapabilirsiniz. Neyse konumuza geri dönelim.

<meta> etiketine ileride detaylı değineceğiz. Şimdilik asıl ilgilendiğimiz <body> etiketi olacak. Bir web sayfasının içeriği <body>..</body> etiketleri arasındadır. Tüm yazıları, resimleri, tabloları oraya ekleriz. Kullanıcının sayfada gördükleri <body> kısmındakilerdir.
Bu sefer HTML ile alt alta 3 cümle yazdıralım. <head> etiketini kullanmayabiliriz. Bu kodların çalışmasını olumsuz etkilemez.

<html>
<body>
Bugün hava yağmurlu ve soğuktu.<br/>
Evden hiç dışarı çıkmadım.<br/>
Bütün gün kitap okudum.<br/>
</body>
</html>

<br/> etiketi özel bir etikettir. Normalde yazılarımızı 2 etiket arasına yazıp öyle değer kazandırırız. Ancak <br/> etiketi tek kullanılır. Satır sonunu belirtir. Tarayıcı <br/> den sonraki herşeyi bir alt satıra atar. Mesela HTML ile bir şiir yazacaksak her mısra sonuna <br/> etiketi koymamız gerekir. Peki ya yazacağımız yazı paragraflar halinde uzun bir yazıysa? İşte o zaman paragraf özelliği kazandıran <p> etiketini kullanmamız gerekir. <p>..</p> arasına yazımızı yazarız. Bir örnekle gösterelim.

<html>
<body>
<p>
Barış Manço Türkiye'de rock müziğin öncülerinden, Anadolu Rock türünün
kurucuları arasında sayılır. Müziğe başlangıcı Galatasaray Lisesi'nde oldu.
Yüksek öğrenimini Belçika Kraliyet Akademisi'nde tamamladı. Bestelediği 200’ün
üzerindeki şarkısı, kendisine 12 altın ve bir platin albüm ve kaset ödülü kazandırdı
</p>
<p>
Barış Manço, kimi şarkılarını günlük hayatından aldı. “Domates, Biber, Patlıcan”,
buna bir örnektir. Hazırladığı televizyon programıyla dünyanın pek çok ülkesine gitmiş,
bu nedenle "Barış Çelebi" olarak adlandırılmıştır.
</p>
</body>
</html>

Barış Manço hakkındaki yazımız 2 paragraf halinde tarayıcımızda görüntülenir. Hadi bir de başlık ekleyelim. Ama önce ben başlık etiketleri hakkında biraz bilgi vereyim sizlere... 6 farklı büyüklükte başlık yazmamızı sağlayan etiketler vardır. Bunlar <h1>’den <h6> ya kadardır ve <h6>’ya gidildikçe yazı boyutu küçülür. Bir örnekle bunu görelim.

<html>
<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>

Not defterine yazıyoruz. Kaydedip uzantısını .html yapıyoruz ve tarayıcımızla açıyoruz. BAŞLIK kelimeleri büyükten küçüğe doğru sıralı olarak karşımızda!

Başlığımızın ortada olmasını isteyebiliriz. Bunun için de <center> etiketini kullanmamız gerekir. <center>…</center> etiketleri, arasındaki herşeyi ortalar. Hemen küçük bir örnekle gösterelim onu da...

<html>
<body>
<center><h1>BAŞLIK</h1></center>
</body>
</html>

Eğer <h1><center>BAŞLIK</center></h1> şeklinde yazsaydık yine aynı sonucu verirdi. Ancak <h1><center>BAŞLIK</h1></center> şeklindeki yazım yanlıştır! Yani bir ifadede iki farklı kod kullanacaksak, önce hangisini açtıysak en son onu kapatmamız gerekir.

DOĞRU
<a><b>bilgisayar</b></a>
<b><a>bilgisayar</a></b>
YANLIŞ
<b><a>bilgisayar</b></a>
<a><b>bilgisayar</a></b>

BYSahteJoker · 19 Şubat 2017

Ellerine Sağlık devrem

ERVAH-I-EZEL · 19 Şubat 2017

YUSUER demiş ki: ↑

Hiper Metin İşaretleme Dili (İngilizce Hypertext Markup Language, ks. HTML) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir.

HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler, dolayısıyla aynı HTML kodunun farklı tarayıcılarda farklı sonuç vermesi olasıdır. CSS ve JavaScript ile beraber kullanıldığında HTML vasıtasıyla görsel ve dinamik web siteleri yaratılabilir.

Küçüktür ve büyüktür işaretleri arasına yazılan HTML komutları kullanılarak yazılır (ör: <html>). İşaretlenen metnin başını ve sonunu belirtmek için çoğunlukla çift olarak kullanılırlar (Örnek: <h1>Selam</h1>) ancak işaretlemek yerine metnin bir yerine bir işaret konacaksa tek olarak da kullanılabilirler (Ör: <img>).

Örnek bir HTML kodu[değiştir | kaynağı değiştir]
HTML standartları W3C tarafından belirlenmektedir. HTML, "etiket" (İngilizce: tag) ismi verilen çeşitli elemanlar kullanılarak oluşturulur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.

<html>
<head>
<title>örnek başlık</title>

</head>
<body>
<p style="font-size:10px"><a href="http://tr.wikipedia.org">Özgür Ansiklopedi</a></p>
</body>
</html>
Hepsini görmek için tıklayın...

YUSUER demiş ki: ↑

HTML Giriş
Bu yazımda size HTML'i tanıtacağım ve birkaç basit örnek yapacağız. HTML derslerimiz bittiğinde ise bir web sayfası oluşturabilecek seviyeye geleceğiz.

HTML, tam adıyla söylersek Hyper Text Markup Language, web sayfalarını oluştururken kullandığımız temel dildir. Türkçe karşılığı tam yoktur ancak çeşitli yerlerde birbirine yakın çeviriler bulunmaktadır. Biz de Metin İşaretleme Dili diyebiliriz. Şunu da belirtelim HTML bir programlama dili değildir.

HTML kodlarını yazmak için özel bir programa ihtiyaç yoktur. Çalışmalarımızda kodlarımızı not defterine yazacak sonra da herhangi bir tarayıcı ile (Google Chrome, Firefox, Opera...) anlamlı hâle getireceğiz.

HTML 1990 yılında geliştirilmiştir ve daha sonra çeşitli sürümleri çıkmıştır. Sonuncusu ise 2012 yılında çıkan HTML5'dir.

Artık yavaş yavaş HTML kodlarını tanımaya başlayalım.

HTML dili etiket adını verdiğimiz kodlardan oluşur. Etiketler “<” ve “> “ arasına yazılır. Örneğin <html> ,<body> ,<head>… Genellikle her etiketin bir de kapanışı vardır. Bunun için de etikete fazladan “/” ekleriz. Yani örnek verdiğimiz üç etiketi kapatırken </html>, </body>, </head> şeklinde yazıyoruz. Kodumuzu yazıyoruz sonra istediğimiz herhangi bir içerik ekliyoruz (yazı, resim, vs...) sonra da kapatıyoruz. Daha detaylı bir örnek verelim: <b> etiketi yazının kalın görünmesini sağlar. <b>...</b> arasına yazıcağımız bütün yazı kalın görünür. (Örn.: <b>Bu yazı kalındır </b>)

Şimdi genel sayfa yapısını inceleyelim.

<html>
<head>
<title>Başlığım</title>
</head>
<body>
<p>
Merhaba Dünya
</p>
</body>
</html>

Dikkat ettiyseniz açılan her kod kapatıldı. Bunun unutulması kodların çalışmasını olumsuz etkiler. Not defterini açın ve yukarıdaki kodları yazın. Sonra kaydedin ve kapatın. Yeni Metin Belgesi.txt olarak kaydedilecektir. Uzantısını değiştirin, txt yi silin ve html yapın. Artık açtığınızda not defteri ile değil de internet tarayıcınız ile açılacaktır ve ekranda şu görülür: "Merhaba Dünya"

Sekme başlığında ise “Başlığım” yazısını görürsünüz. Böylece ilk kodlarımızı yazmış ve çalıştırmış olduk. Şimdi ise kodların ne işe yaradıklarını açıklayalım:

Bütün HTML kodları <html>…</html> arasına yazılır. Onun dışına yazdıklarınızın bir etkisi yoktur. <html> kodlarının arasında da iki temel kod kullandık. <head> ve <body> sayfanın baş ve gövde kısımları. <head>…</head> arasındaki kodlar sayfa bilgisini tanımlamaya yöneliktir. Biz <title> etiketini kullanarak sayfaya bir başlık verdik. Bunun dışında <meta> etiketini; javascript, css gibi diğer web dillerini kullanabiliriz. Javascript ve css HTML e göre ileri düzeydir. HTML’i öğrenmeden onlara çalışmanız doğru olmaz . Yine de ne işe yaradıkları hakkında araştırma yapabilirsiniz. Neyse konumuza geri dönelim.

<meta> etiketine ileride detaylı değineceğiz. Şimdilik asıl ilgilendiğimiz <body> etiketi olacak. Bir web sayfasının içeriği <body>..</body> etiketleri arasındadır. Tüm yazıları, resimleri, tabloları oraya ekleriz. Kullanıcının sayfada gördükleri <body> kısmındakilerdir.
Bu sefer HTML ile alt alta 3 cümle yazdıralım. <head> etiketini kullanmayabiliriz. Bu kodların çalışmasını olumsuz etkilemez.

<html>
<body>
Bugün hava yağmurlu ve soğuktu.<br/>
Evden hiç dışarı çıkmadım.<br/>
Bütün gün kitap okudum.<br/>
</body>
</html>

<br/> etiketi özel bir etikettir. Normalde yazılarımızı 2 etiket arasına yazıp öyle değer kazandırırız. Ancak <br/> etiketi tek kullanılır. Satır sonunu belirtir. Tarayıcı <br/> den sonraki herşeyi bir alt satıra atar. Mesela HTML ile bir şiir yazacaksak her mısra sonuna <br/> etiketi koymamız gerekir. Peki ya yazacağımız yazı paragraflar halinde uzun bir yazıysa? İşte o zaman paragraf özelliği kazandıran <p> etiketini kullanmamız gerekir. <p>..</p> arasına yazımızı yazarız. Bir örnekle gösterelim.

<html>
<body>
<p>
Barış Manço Türkiye'de rock müziğin öncülerinden, Anadolu Rock türünün
kurucuları arasında sayılır. Müziğe başlangıcı Galatasaray Lisesi'nde oldu.
Yüksek öğrenimini Belçika Kraliyet Akademisi'nde tamamladı. Bestelediği 200’ün
üzerindeki şarkısı, kendisine 12 altın ve bir platin albüm ve kaset ödülü kazandırdı
</p>
<p>
Barış Manço, kimi şarkılarını günlük hayatından aldı. “Domates, Biber, Patlıcan”,
buna bir örnektir. Hazırladığı televizyon programıyla dünyanın pek çok ülkesine gitmiş,
bu nedenle "Barış Çelebi" olarak adlandırılmıştır.
</p>
</body>
</html>

Barış Manço hakkındaki yazımız 2 paragraf halinde tarayıcımızda görüntülenir. Hadi bir de başlık ekleyelim. Ama önce ben başlık etiketleri hakkında biraz bilgi vereyim sizlere... 6 farklı büyüklükte başlık yazmamızı sağlayan etiketler vardır. Bunlar <h1>’den <h6> ya kadardır ve <h6>’ya gidildikçe yazı boyutu küçülür. Bir örnekle bunu görelim.

<html>
<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>

Not defterine yazıyoruz. Kaydedip uzantısını .html yapıyoruz ve tarayıcımızla açıyoruz. BAŞLIK kelimeleri büyükten küçüğe doğru sıralı olarak karşımızda!

Başlığımızın ortada olmasını isteyebiliriz. Bunun için de <center> etiketini kullanmamız gerekir. <center>…</center> etiketleri, arasındaki herşeyi ortalar. Hemen küçük bir örnekle gösterelim onu da...

<html>
<body>
<center><h1>BAŞLIK</h1></center>
</body>
</html>

Eğer <h1><center>BAŞLIK</center></h1> şeklinde yazsaydık yine aynı sonucu verirdi. Ancak <h1><center>BAŞLIK</h1></center> şeklindeki yazım yanlıştır! Yani bir ifadede iki farklı kod kullanacaksak, önce hangisini açtıysak en son onu kapatmamız gerekir.

DOĞRU
<a><b>bilgisayar</b></a>
<b><a>bilgisayar</a></b>
YANLIŞ
<b><a>bilgisayar</b></a>
<a><b>bilgisayar</a></b>
Hepsini görmek için tıklayın...

Bunları buraya yazmaktaki amacın neydi devrem?

YUSUER · 20 Şubat 2017

Buranın konusu html dersi olduğu için

ERVAH-I-EZEL · 20 Şubat 2017

YUSUER demiş ki: ↑

Buranın konusu html dersi olduğu için
Hepsini görmek için tıklayın...

Devrem herkes kendi konusunu kendi açar. Bu benim kişisel konum. Sen de kendi konunu açsaydın ya...
Hem ayrıca sen Javatr devremin konusunu alıntılamışsın.
http://forum.ayyildiz.org/konu/html-programlamaya-giriş-bölüm-1.77609/

canpanda3663 · 23 Şubat 2017

ERVAH-I-EZEL demiş ki: ↑

Selamün Aleyküm devrelerim şu günlerde çok yoğunum bir türlü derslere başlayamadım ama nihayet ilk HTML dersimize şimdi başlayacağız. HTML'in ve diğer web dillerinin ne işe yaradığını, kodlarımızı nereye nasıl yazacağımızı vs. önceki konularda anlattım. Eğer bu dediklerimi bilmiyorsanız aşağıda verdiğim linklerdeki konulara bir göz atmanızı tavsiye ediyorum. Şimdi dersimize başlayalım.

http://forum.ayyildiz.org/konu/web-programlama-dilleri-ve-kullanıldıkları-yerler.81785/
http://forum.ayyildiz.org/konu/web-editörleri.83155/

HTML, temel olarak etiket adını verdiğimiz birimlerden oluşur ve parametre ismini verdiğimiz birimlerle de özelleştirilebilir. HTML etiketleri "<" ve ">" büyüktür işaretleri arasına yazılarak açılırlar.
Örnek: <html>, <head>, <title>, <body> gibi.
Ayrıca açılan her etiket "/" işareti ile kapanmak zorundadır.
Yani; </html>, </head>, </title>, </body> şeklindedir.
Biz web sayfasına ekleyeceğimiz içeriği etiketlerin arasına yazıyoruz. Mesela "p" paragraf açmak için kullanılan bir etikettir. Biz bir paragrafı şöyle oluştururuz:
<p>Burası bir paragraf.</p>
Bu kadar kolay. Şimdi bir HTML sayfasındaki temel HTML etiketlerini ve ne işe yaradığını görelim.
Hepsini görmek için tıklayın...

Öncelikle terbit meğin için sana teşekür eder saygı duyarım ama ben pek anladım vidyolu sesli şekilde anlatırsan çok sevinirim

B4RC4T0GUN · 23 Şubat 2017

ERVAH-I-EZEL demiş ki: ↑
Selamün Aleyküm devrelerim şu günlerde çok yoğunum bir türlü derslere başlayamadım ama nihayet ilk HTML dersimize şimdi başlayacağız. HTML'in ve diğer web dillerinin ne işe yaradığını, kodlarımızı nereye nasıl yazacağımızı vs. önceki konularda anlattım. Eğer bu dediklerimi bilmiyorsanız aşağıda verdiğim linklerdeki konulara bir göz atmanızı tavsiye ediyorum. Şimdi dersimize başlayalım.

http://forum.ayyildiz.org/konu/web-programlama-dilleri-ve-kullanıldıkları-yerler.81785/
http://forum.ayyildiz.org/konu/web-editörleri.83155/

HTML, temel olarak etiket adını verdiğimiz birimlerden oluşur ve parametre ismini verdiğimiz birimlerle de özelleştirilebilir. HTML etiketleri "<" ve ">" büyüktür işaretleri arasına yazılarak açılırlar.
Örnek: <html>, <head>, <title>, <body> gibi.
Ayrıca açılan her etiket "/" işareti ile kapanmak zorundadır.
Yani; </html>, </head>, </title>, </body> şeklindedir.
Biz web sayfasına ekleyeceğimiz içeriği etiketlerin arasına yazıyoruz. Mesela "p" paragraf açmak için kullanılan bir etikettir. Biz bir paragrafı şöyle oluştururuz:
<p>Burası bir paragraf.</p>
Bu kadar kolay. Şimdi bir HTML sayfasındaki temel HTML etiketlerini ve ne işe yaradığını görelim.
Kod:
 <html>

<head>

</head>                      

<body>

</body>                

</html>
Basit bir HTML sayfasının kodları bu şekildedir. Bu kodları editörümüze ya da not defterine yazıp uzantısını .html olarak kaydettiğimizde içi boş bir internet sayfası oluşur çünkü biz daha sayfaya bir içerik oluşturmadık. Sadece sayfanın genel hatlarını oluşturduk. Şimdi bu etiketlerin ne işe yaradığını öğrenelim.

1- <html> Etiketi
Adı üzerine bir html sayfası oluşturacağımızı belirleyen kodu yazdık. Bu alanın içi head ve body etiketleri olarak ikiye ayrılıyor.

2- <head> Etiketi
Sayfanın bilgilerini içinde bulunduran kısımdır. Sayfanın kodlanış dili vs. bilgiler head kısmına yazılır. Bu bölüm pek önemsenmese de gerçekten gerekli kodların yazılması gereken önemli bir bölüm. Head kısmına yazılabilecek komutlardan ileriki derslerde bahsedeceğiz, merak etmeyin. Şimdi anlatmak istediğim bir de title etiketi var.

3- <title> Etiketi
Kısa ve net olarak açıklama istiyorum.

Şu resimde koyu yeşil olarak işaretlenmiş küçük penceredeki yazı title etiketi ile sağlanıyor. O pencerede "Ayyıldız Tim" yazısını yazmak için sizin de tahmin edeceğiniz gibi <title>Ayyıldız Tim</title> şeklinde bir kod kullanılmıştır.

Head etiketi içine giren başka bir komut da yok. "style" isimli bir etiket var ki bu bambaşka bir şey. İleride Css derslerine geçtiğimiz zaman öğreneceğiz.

4- <body> Etiketi
Geriye kalan bütün etiketleri içine alan bir sayfada gördüğümüz yazı,tablo,resim gibi içeriklerin girdiği kısımdır.

Bir web sayfasındaki temel etiketler bunlar. Önümüzdeki derslerde yavaş yavaş sayfamızı geliştirmeye başlayacağız. Dersi sonlandırmadan önce en başta bahsettiğim parametreler ile ilgili biraz bilgi vereceğim.

Parametreler
Src, hrefi, border, id gibi pekçok parametre mevcut. Fakat ben şimdi bu parametrelerin ne işe yaradığını, nerede ve nasıl kullanıldığını anlatmayacağım çünkü parametreler etiketlerle birlikte kullanılır ki daha doğru düzgün etiket öğrenmedik. Parametreleri vakti geldikçe tek tek öğreneceksiniz. Yine de size bir ön bilgi vermek isterim. Mesela "img" etiketi sayfaya resim koymak için kullanılan bir etikettir. Ancak diyelim ki bu resmin sayfadaki yüksekliğini biraz artırmak istiyoruz. Bunun için "height" parametresini kullanılır.

Devrelerim,ilk HTML dersimizin sonuna geldik. Bu dersimizde HTML ile ilgili giriş bilgileri öğrendik. Konuyu beğenerek derslerime devam etmem için beni teşvik edebilirsiniz. Anlamadığınız bir yer varsa yorum olarak sorun, ben cevap veririm. İyi günler, iyi forumlar.
Hepsini görmek için tıklayın...
DEVREM ANLAMADIĞIM TEK BİR NOKTA VAR YANLIŞ BİLMİYORSAM BU KODLARI NOT DEFTERİNE YAZIYORUZ DEMİ EMEĞİNE SAĞLIK SAYGILAR.

Giriş Yapın veya Üye Olun

Html Dersleri 1-giriş Ve Ilk Sayfa

Bu Sayfayı Paylaş