Hoşgeldiniz Esrarengiz.NET | Türkiyenin En iyi Webmaster Platformu

Webmaster Forum - Tüm özelliklerimize erişmek için şimdi webmaster topluluğumuza katılın.
  • Kayıt olduktan ve giriş yaptıktan sonra, konu oluşturabilir, mevcut konulara cevap gönderebilir,
  • diğer üyelerinize itibar kazandırabilir, kendi özel mesajlaşma programınızı edinebilir ve çok daha fazlasını WF ile yapabilirsiniz.
  • Ayrıca hızlı ve tamamen ücretsiz, ne bekliyorsun?
  • HTML Dersleri: 1

    CasperTR

    Esrarengiz
    Moderator
    Katılım
    12 Tem 2020
    Forum
    314
    Tepki
    127
    Puan
    42
    Konum
    İzmir
    Web
    teknobalik.com
    Meslek
    Yazılımcı

    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:
    <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:
     <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:
    <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:
     <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:
     <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.
    İlk ders için bu kadarı yeterli olur. Umarım sade ve açıklayıcı bir anlatım olmuştur. Diğer derste görüşmek dileğiyle kendinize iyi bakın.
     

    Rubik Dijital

    Yazılımcı-Grafik Tasarımcı-Seo-Dijital Reklamcı
    Grafik Tasarımcı
    Yazılım Uzmanı
    Katılım
    18 Şub 2021
    Forum
    80
    Tepki
    52
    Puan
    17
    Konum
    Türkiye/İstanbul
    Meslek
    Webmaster/Yazılım Geliştirici / Grafik Tasarımcısı/Seo Uzmanı/Dijital Reklamcı

    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:
    <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:
    <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:
    <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:
    <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:
    <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.
    İlk ders için bu kadarı yeterli olur. Umarım sade ve açıklayıcı bir anlatım olmuştur. Diğer derste görüşmek dileğiyle kendinize iyi bakın.
    beynimimi okuyorsun hocam be canmod benim de
     

    Admin

    Admin
    Katılım
    19 Ara 2017
    Forum
    1,228
    Çözümler
    1
    Tepki
    502
    Puan
    428
    Yaş
    33
    Konum
    Esrarengiz
    Web
    esrarengiz.net
    Meslek
    Web
    gelecek zaten yarın paylaşacağım.

    Social Networks Ok GIF by louis16art
     
    instagram takipçi satın al smm panel fenerbahçe haberleri instagram türk takipçi paketleri
    Üst