1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İdda edenlere inanmayınız.. Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.
    Duyuruyu Kapat

Html Dersleri 1-giriş Ve Ilk Sayfa

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 12 Şubat 2017 tarihinde açılan konu

Konu Durumu:
Yanıtlara kapalı.
Toplam 3 sayfadan 1. sayfa
  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,628
    Özel Mesaj
    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.
    [​IMG]
    Ş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
    #1
    Rootoff, BYpatron12, egger ve 109 kişi daha bunu beğendi.
  2. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,628
    Özel Mesaj
    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.:(
     
    ERVAH-I-EZEL, 12 Şubat 2017
    #2
    ICREWI, serkanbtmn, NuriBey ve 2 kişi daha bunu beğendi.
  3. mervenur_smsk Guest

    • Guest
    Katılım:
    24 Aralık 2016
    Mesaj:
    336
    Alınan Beğeniler:
    654
    Özel Mesaj
    Devrem gayet anlaşılır bir biçimde yazmışsın. Eline sağlık. Takipteyim. :)
     
    mervenur_smsk, 12 Şubat 2017
    #3
    AydoganGotu, kaycici38 ve MrTuRkIsH bunu beğendi.
  4. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,628
    Özel Mesaj
    Teşekkürler devrem. Yeni konu yakında gelir... :p
     
    ERVAH-I-EZEL, 12 Şubat 2017
    #4
    AydoganGotu, CamBaz-Tr, BYSahteJoker ve 1 kişi daha bunu beğendi.
  5. Aben3 Guest

    • Guest
    Katılım:
    28 Ocak 2017
    Mesaj:
    160
    Alınan Beğeniler:
    272
    Özel Mesaj
    html 5 mi anlaticaksin devrem yoksa xhtml mi ?
     
    Aben3, 12 Şubat 2017
    #5
    AydoganGotu ve mervenur_smsk bunu beğendi.
  6. mervenur_smsk Guest

    • Guest
    Katılım:
    24 Aralık 2016
    Mesaj:
    336
    Alınan Beğeniler:
    654
    Özel Mesaj
    Bana mı dedin devrem?
     
    mervenur_smsk, 12 Şubat 2017
    #6
    AydoganGotu bunu beğendi.
  7. Aben3 Guest

    • Guest
    Katılım:
    28 Ocak 2017
    Mesaj:
    160
    Alınan Beğeniler:
    272
    Özel Mesaj
    kusuruma bakma yanlis yazdim
     
    Aben3, 12 Şubat 2017
    #7
    AydoganGotu ve mervenur_smsk bunu beğendi.
  8. Aben3 Guest

    • Guest
    Katılım:
    28 Ocak 2017
    Mesaj:
    160
    Alınan Beğeniler:
    272
    Özel Mesaj
    devrem html 5 derslerimi bu xhtml mi
     
    Aben3, 12 Şubat 2017
    #8
    AydoganGotu bunu beğendi.
  9. mervenur_smsk Guest

    • Guest
    Katılım:
    24 Aralık 2016
    Mesaj:
    336
    Alınan Beğeniler:
    654
    Özel Mesaj
    Estağfirullah devrem, sorun değil.
     
    mervenur_smsk, 12 Şubat 2017
    #9
    AydoganGotu bunu beğendi.
  10. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,628
    Özel Mesaj
    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. ;)
     
    ERVAH-I-EZEL, 12 Şubat 2017
    #10
    AydoganGotu ve mervenur_smsk bunu beğendi.
  11. Aben3 Guest

    • Guest
    Katılım:
    28 Ocak 2017
    Mesaj:
    160
    Alınan Beğeniler:
    272
    Özel Mesaj
    devrem sukur ALLAHA ben ogrendim html yi yok simdi senin nasi ldevam edeceginizi sorudm dogrudur devrem html 5 de bazi kodlar kullanilmior
     
    Aben3, 13 Şubat 2017
    #11
    AydoganGotu, ERVAH-I-EZEL ve mervenur_smsk bunu beğendi.
  12. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,628
    Özel Mesaj
    ERVAH-I-EZEL, 14 Şubat 2017
    #12
    AydoganGotu, mertmert446 ve mervenur_smsk bunu beğendi.
  13. YUSUER Atıldı

    • Guest
    Katılım:
    5 Ocak 2017
    Mesaj:
    2,157
    Alınan Beğeniler:
    1,278
    Özel Mesaj
    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
    #13
    PaCyPieSt, AY_akfrt_15 ve mertmert446 bunu beğendi.
  14. YUSUER Atıldı

    • Guest
    Katılım:
    5 Ocak 2017
    Mesaj:
    2,157
    Alınan Beğeniler:
    1,278
    Özel Mesaj
    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>
     
    YUSUER, 19 Şubat 2017
    #14
    AY_akfrt_15 ve CamBaz-Tr bunu beğendi.
  15. BYSahteJoker Guest

    • Guest
    Katılım:
    24 Ocak 2017
    Mesaj:
    8
    Alınan Beğeniler:
    5
    Özel Mesaj
    Ellerine Sağlık devrem
     
    BYSahteJoker, 19 Şubat 2017
    #15
    ERVAH-I-EZEL bunu beğendi.
  16. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,628
    Özel Mesaj
    Bunları buraya yazmaktaki amacın neydi devrem?
     
    ERVAH-I-EZEL, 19 Şubat 2017
    #16
  17. YUSUER Atıldı

    • Guest
    Katılım:
    5 Ocak 2017
    Mesaj:
    2,157
    Alınan Beğeniler:
    1,278
    Özel Mesaj
    Buranın konusu html dersi olduğu için
     
    YUSUER, 20 Şubat 2017
    #17
  18. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,628
    Özel Mesaj
    ERVAH-I-EZEL, 20 Şubat 2017
    #18
  19. canpanda3663 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    1,030
    Alınan Beğeniler:
    1,707
    Özel Mesaj
    Ö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
     
    canpanda3663, 23 Şubat 2017
    #19
  20. B4RC4T0GUN Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    2
    Alınan Beğeniler:
    1
    Özel Mesaj
    DEVREM ANLAMADIĞIM TEK BİR NOKTA VAR YANLIŞ BİLMİYORSAM BU KODLARI NOT DEFTERİNE YAZIYORUZ DEMİ EMEĞİNE SAĞLIK SAYGILAR.
     
    B4RC4T0GUN, 23 Şubat 2017
    #20
Toplam 3 sayfadan 1. sayfa
Konu Durumu:
Yanıtlara kapalı.

Bu Sayfayı Paylaş