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

Html Öğrenim Seti // A'dan Z'ye // Sıfırdan

'Html - CSS - XML - JavaScript - Ajax' forumunda IPiyango tarafından 1 Ağustos 2017 tarihinde açılan konu

  1. IPiyango Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    93
    Alınan Beğeniler:
    72

    Özel Mesaj
    Öncelikle Selamun Aleykum Devrelerim Ve Üstlerim .

    Bu konuya tam 9.30 saatimi verdim umarım İşinize yarar

    Bugün size her webmasterın bilmesi gereken bir dil olan HTML Dilini elimden geldiği kadar kapsamlı bir şekilde yeni başlayanlar için anlatmaya çalışıcam umarım işinize yarayacakdır .


    Öncelikle HTML Nedir ?

    HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.

    HTML'in ne olduğunu umarım az çok anlamışsınızdır . Şimdi yavaşdan eğitimimize geçelim ;

    Öncelikle bunu bi yeni metin belgesinde ya da Notepad++ yapabiliriz ama işimizi kolaylaştırmak için Şimdi önericeğim programı kullanmanızı tavsiye ederim

    Sublime Text 3 : 70$ Ücreti var Ama şöylede bir güzel yanı var Free indirdikden sonra günde bir kere satın alın diyo başka bişey demiyo :D
    Link: https://www.sublimetext.com/

    NOT!!!=Her işlemden sonra CTRL+S İle kaydedin yoksa işlemez

    Şimdi Programımızı açalım :

    1) - Html Nasıl Yazılır ? Temel eğitim.

    Programın kolay bir yanıda kullanıcağınız kodu "<....>" sadece ... yerindeki yazıyı yazıp tab tuşuna bastığınızda kodu otomatik olarak tamamlıyo örneğin small+TAB size kalan tek şey <..>__</..> boşluğu doldurmak

    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    Programı açtıktan sonra sol üste bulunan file kısmına giriyoruz save as diyelim ve .html ya da .htm uzantılı olarak dosyayı istediğimiz yere kaydedelim . Kaydettikten sonra Sağdaki siyah kısma " html " yazıp " TAB " tuşuna basalım ve karşınza standart html kodlarını cıkardı

    2) - Html Etiketleri Nelerdir Nasıl kullanılır

    <head> Başlık bilgilerini İçerir
    <title>...</title> Sayfanın Başlığı
    <body> Dökümanın gövdesi görüntülenecek kısım
    <!-- --> Bu tag yorum satırıdır Normalde <body> arasına yazdiğiniz etiketler değerlenirken Bu kodun arasına yazdığınız şeyler Sadece koda bakanlar tarafından görülür tarayıcı bunları derlemez
    <h1></h1> Bu tag başlık yapımında kullanılır Sayı büyüdükçe Boyut küçülür
    <p></p> Bu tag paragraf oluşturur arasına yazıcağınız şeyler paragraf olarak görüntülenir


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    <h1>Bu Bir Başlıktır</h1>
    <p>Bu Bir paragrafdır</p>
    </body>
    </html>
    <br> Bu tag boş satır oluşturur ne kadar yazarsanız o kadar cok boş satır bırakır
    <hr> Bu tag Paragraflar arasındaki boşluğa çizgi çeker



    3) - Html Biçimlendirme Ve uygulama örnekleri

    <b>...</b> Bu tag Paragrafı kalın yazar eğer paragrafta bir kelimeyi ya da cümleyi kalın yazmak istiyosanız <b> tagları arasına almanız yeterli olur
    <big>...</big> Bu tag adındanda anlıcağınız gibi Büyük yazar
    <i>...</i> Bu tag italik metin oluşturur
    <small>...</small> Bu tag Metni ufaltır
    <strong>...</strong> Bu tag ismindende anlaşıldığı gibi Metindeki harflere daha güçlü bir gösterim katar
    <sub>...</sub> Bu tag alt indis metinidir genelde matematiksel terimlerde kullanılır arasına yazdığınız kelimeler normal metinin hizasından aşşağıda görünür
    <sup>...</sup> Bu tag ise sub tagının tam tersi üst indis metini oluşturur
    <ins>...</ins> Bu tag Altı çizili metin oluşturur
    <del>...</del> Bu tag Metnin üstüne çizer
    <code>...</code> Bu tag ise Metni kod şeklinde yazar


    4) - Html Link verme Nasıl Link verilir

    <a></a> Bu tag Link verir
    <a href="Basınca gidilecek link"><b> Basılmasını istediğiniz cümle ya da paragraf bu şekilde göndermek istediğiniz yere gönderebilirsiniz


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    <h1>IPiyango Html Dersleri</h1>
    <p>Html Bağlantılarını inceliyoruz</p>
    <a href="Site Adresi"> Buraya tıklayınız</a>
    </body>
    </html>
    <a href="....." target="_blank"><b>....</b></a> Bu target blank kodu ise sayfayı götürmek yerine açmak istediğiniz linki yeni bi sekmede açar


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    <h1>IPiyango Html Dersleri</h1>
    <p>Html Bağlantılarını inceliyoruz</p>
    <a href="Site Adresi" target="_blank"> Buraya tıklayınız</a>
    </body>
    </html>
    Sayfa içi Yönlendirme:
    <a href="#git"Basılması gereken cümle</a> Burası gönderen yeri
    <a name="git"<p>Gelineceke paragraf</p> Burası ise Gelinen yer


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    
    <a href="#git">Aşşağıya git</a>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    
    <a name="git"></a>
    </body>
    </html>
    (Br komutları sayfa uzasın diyedir)

    5) - Html Tablo oluşturma

    <table>...</table> Bu tag tablo başlatır
    <tr>...</tr> Bu tag tablo satır açmak için kullanılır
    <th>...</th> Tablonun başlıklarını belirtmek için kullanılır Tr tagları arasında kullanmalısınız
    <td>...</td> Bu tag tablo stun açmak için kullanılır
    <table border="İstediğiniz kalınlık"> Bu tag tabloda kenarlık belirtmek için kullanılır


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    
    <table border="3">
    <tr>
       <th>Adı</th>
       <th>Soyadı</th>
    </tr>
     
    <tr>
        <td>Bedirhan</td>
        <td>Kaya</td>
    </tr>
    
    </table>
    
    </body>
    </html>
    !!!Not=Eğer Türkçe karakter kodlama hatası verirse
    KOD : <meta charset="UTF-8">
    Etiketinin head taglarının arasına koymak sorunu çözecektir
    <th width="Genişlik sayı olarak"...</th> Tablonun başlığının genişliği için kullanılır

    6) - Html Listeleme etiketleri

    <ul>...</ul> Sırasız listeleme için kullanılır
    <li>...</li> Listenin maddeleri için kullanılır
    <ol>...</ol> Sıralı listeleme için kullanılır (1,2,3,4) Şeklinde
    <dl>...</dl> Tanımlama listesi için kullanılır
    <dt>...</dt> Dl ile yaptığımız tanımlama listelesinin alt başlıkları için dl tagları arasında kullanılır
    <dd>...</dd> Dt tagı ile yaptığımız Dl'nin alt başlıklarının açıklaması olarak kullanılır



    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
    </head>
    <body>
    
    <!-- Sırasız listeleme -->
    
    <ul>
       <li>Birince Madde</li>
       <li>İkinci Madde</li>
       <li>Üçüncü Madde</li>
    </ul>
    
    <!-- Sıralı Listeleme -->
    
    <ol>
       <li>... Eğitimleri</li>
       <li>....Eğitimler</li>
       <li>.... Eğitimleri</li>
    </ol>
    <!-- Tanımlama Listesi -->
    <dl>
       <dt>Html Dersleri</dt>
       <dd>Html derslerini öğretildiği forum başlığı</dd>
    </dl>
    
    </body>
    </html>
    7) - Html Formlar Form oluşturma

    Burada anlaşılması için yerine kendi örneklerimi yazıcam

    <form>...</form> Form başlatır
    radio Buton yapmak için kullanılır
    name Birbiriyle aynı olmalı sadece birinin seçilmesi için
    value Gelen veri tipi
    checked Seçilenlerin yanına yazıldığında sayfayı yenileyince sıfırlanması yerine seçili kalmasını sağlar
    checkbox Çoklu seçim
    <input type="text" name="IPiyango"> Formda Sorular yanında dolduracak sorular oluşturur
    <input type="radio" name"1" value="Alıcıya gelen bilgi"> Bu etiketler ise Dolduracak kutucuklar yerine buton vermeye yarar
    <input type="radio" name"1" checked=".." value=".."> Bu etiketler sayfayı yenileyince seçili kalmasını sağlar
    <input type="checkbox" name="..."> Bu etiketler birden fazla seçeneği seçmek için kullanılır
    <form action="Gönderilecek yer" method="get/post" > ............. </form> Bu etiketler gönder butonuna basınca nereye gönderceğini gösterir "get" bilgileri açık gönderir "post" ise gizli bir şekilde gönderir
    <input type="submit" name=".." value="Butonun ismi"> Bu etiketler ise Gönder butonu oluşturmak ve butona istediğiniz ismi takmaya yarar



    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
       <meta charset="utf-8">
    </head>
    <body>
    <form>
    Adınız
       <input type="text" name="Aliveli4950">
    <br>
    Soyadınız
       <input type="text" name="Veliali4950">
       <hr>
     </form>
    
       <form>
           <input type="radio" name="aynı olmalı" value="Erkek(Gönderilen değer)"> Erkek
           <input type="radio" name="aynı olmalı" value="Kadın(Gönderilen değer"> Kadın
       </form>
       <!-- İstedğiniz Kadar seçmek için -->
       <form>
       Mavi Gözlü
           <input type="checkbox" name="">
       Sigara içmiyor
           <input type="checkbox" name="">
       Uzun boylu
           <input type="checkbox" name="">
       </form>
    
       <!-- Gönder butonu eklemek -->
    
       <form action="http://......" method="post">
       Adınız
           <input type="text" name="ad">
           <input type="submit" name="" value="Gönder butonunun ismi">
     
       </form>
    
    </body>
    </html>
    <textarea cols="20" rows="50"> .... </textarea> Bu etiketler yeni bir yazı kutucuğu oluşturmanızı sağlar ("cols" "rows") ise metin kutucuğunu enini ve boyunu ayarlamanızı sağlar

    8) - Html Sayfaya Resim ekleme

    <img src="Resmin adresi"> Bu etiket sayfaya resim eklemenizi sağlar
    <img src="Resmin adresi" alt="Resmin tanımlama metini"> Alt parametersi ile resmin tanımlamasını yapmanızı sağlar
    <img width="resmin boyu" src="...." alt="..."> Bu etiketler Resmin Orantılı bir şekilde boyunu ayarlar



    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
       <meta charset="utf-8">
    </head>
    <body>
    
    <img width="400" src="Resmi adresi" alt="Resmin açıklaması">
    
    </body>
    </html>
    9) - Html Renklerin kullanımı ver Arkaplan Değiştirme

    <body bgcolor="#Rengin kodu"> Bu etiket arkaplanın rengini ayarlamanızı sağlar Html renk kodları yazarak Google amcadan bulabilrisniz kodları Ya da ingilizce terim kullanrak Örneğin:black yellow Gibilerinide kullanabilirsiniz


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
       <meta charset="utf-8">
    </head>
    <body bgcolor="#CCFFCC">
    
    </body>
    </html>
    <body background="Resmin Adresi > Sayfaya resim eklemenizi sağlar


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
       <meta charset="utf-8">
    </head>
    <body background="Resmin adresi">
    
    </body>
    </html>
    10) - Html Div blok yapısı oluşturma

    <div> 1.Bölge </div> Bloklar oluşturur kaydedip bakınca anlamsız gelebilir
    <div style="background: red;"> 1.Bölge </div> Burada css kodu kullandım aklınız karışmasın sadece blok blok olduğunu anlamnız için yaptım


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
       <meta charset="utf-8">
    </head>
    <body>
    <div style="background: red;">1.Bölge</div>
    <div style="background: yellow;">2.Bölge</div>
    <div style="background: orange;">3.Bölge</div>
    </body>
    </html>
    11) - Html İframe (Sayfa içinde sayfa ekleme)

    <iframe src="Sayfa içine ekliyeceğiniz diğer sayfanin adresi"> Bu etiketlerler sayfa içine sayfa ekleyebilirsiniz ((height="Yükseklik") (width="genişlik") ile Ayarlayabilirsiniz


    Kod:
    <!DOCTYPE html>
    <html>
    <head>
       <title></title>
       <meta charset="utf-8">
    </head>
    <body>
    <iframe src="Gösterilecek sitenin adresi" height="300" width="600"></iframe>
    
    </body>
    </html>

    12) - Html Meta taglar


    <head>
    <title></title>
    <meta charset="UTF-8"> (Sayfa dilini Türkçe olduğunu belirtir)
    <meta name="description" content="Html Dersleri"> (Sayfa açıklamsı bi nevi özeti)
    <meta name="keywords" content="Html, Taglar vs."> (Anahtar kelimeler)
    <meta name="author" content="IPiyango"> (Yazarın adı)
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> (Genişlik belirtir zaten standart genişlik belirtilmiş)
    </head>



    Kod:
    <head>
    
      <meta charset="UTF-8">
      <meta name="description" content="Free Web tutorials">
      <meta name="keywords" content="HTML,CSS,XML,JavaScript">
      <meta name="author" content="John Doe">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
     
    serhat4268, KAE, Trigged ve 23 kişi daha bunu beğendi.
  2. Stark_Bey Guest

    • Guest
    Katılım:
    20 Haziran 2017
    Mesaj:
    14
    Alınan Beğeniler:
    9

    Özel Mesaj
    Emeğine sağlık Tertip :)
     
    El-Biruni, HMB98 ve IPiyango bunu beğendi.
  3. HMB98 Guest

    • Guest
    Katılım:
    29 Temmuz 2017
    Mesaj:
    11
    Alınan Beğeniler:
    9

    Özel Mesaj
    Eyvallah devrem Allah razı olsun eline sağlık
     
    IPiyango bunu beğendi.
  4. fedakarlik Guest

    • Guest
    Katılım:
    13 Ağustos 2017
    Mesaj:
    18
    Alınan Beğeniler:
    23

    Özel Mesaj
    Emeğinize Sağlık.. Güzel Çalışma olmuş.
     
    HMB98 ve IPiyango bunu beğendi.
  5. Hackatkl Guest

    • Guest
    Katılım:
    17 Aralık 2016
    Mesaj:
    46
    Alınan Beğeniler:
    18

    Özel Mesaj
    Eline emegine saglik tertip basarili bi anlatim olmus
     
    El-Biruni, HMB98 ve IPiyango bunu beğendi.
  6. Fh2 Atıldı

    • Guest
    Katılım:
    9 Ağustos 2017
    Mesaj:
    402
    Alınan Beğeniler:
    462

    Özel Mesaj
    Yararlı Konu Devrem Ama Daha Öğrenilecek Çok Şey Var Sen Çeyreğine Kadar Anlatmışsın.Yinede Eline Sağlık :)
     
    El-Biruni ve IPiyango bunu beğendi.
  7. IPiyango Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    93
    Alınan Beğeniler:
    72

    Özel Mesaj
    Ne demek devrem EyvAllah
    EyVallah tertip saolasın
    EyvAllah devrem
    Tabi devrem Daha çok yeri ve konusu var şimdilik bu kadarına giriş yaptım part2 de yapıcam İnşAllah
     
    El-Biruni, HMB98 ve Fh2 bunu beğendi.
  8. fedakarlik Guest

    • Guest
    Katılım:
    13 Ağustos 2017
    Mesaj:
    18
    Alınan Beğeniler:
    23

    Özel Mesaj
    part 2 yapınca burdan paylaş konu açtığında haber gelsinde girip bakalım.
     
    El-Biruni ve IPiyango bunu beğendi.
  9. fedakarlik Guest

    • Guest
    Katılım:
    13 Ağustos 2017
    Mesaj:
    18
    Alınan Beğeniler:
    23

    Özel Mesaj
    part 2 ne zaman gelecek :)
     
    El-Biruni ve IPiyango bunu beğendi.
  10. IPiyango Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    93
    Alınan Beğeniler:
    72

    Özel Mesaj
    Tamam dir devrem
    Devrem suan yogunum boş bi zamanda yapicam
     
  11. BloggyWinner Guest

    • Guest
    Katılım:
    30 Ağustos 2017
    Mesaj:
    2
    Alınan Beğeniler:
    3

    Özel Mesaj
    Ellerine Sağlık Kardeş ;)
     
    IPiyango ve El-Biruni bunu beğendi.
    • Guest
    Katılım:
    8 Eylül 2017
    Mesaj:
    66
    Alınan Beğeniler:
    27

    Özel Mesaj
    devrem ben programı indirdim ama tab tuşuyla bir şey yapamıyorum
     
    IPiyango bunu beğendi.
  12. IPiyango Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    93
    Alınan Beğeniler:
    72

    Özel Mesaj
    Programı açına ilk önce siyah bir ekran cıkıcakdır üstteki kutucuklardan preferences kısmına pasıp keys bindings i seç önüne 2 ayri stun cıkıcak sol dakinde yazılar vardır sağdakinde ise bi iki pargraf açilimi falan vardir sağdaki yeri komple sil şu kodu yapıştır
    Kod:
    "keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false }},
    { "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
    { "keys": ["ctrl+shift+7], "command": "toggle_comment", "args": { "block": true } }
    CTRL +S yle kaydet sonra sol üstte file ye bas save as de istediğin yere kaydet ama .htm ya da .html uzantılı olarak kaydet html yazıp taba basarsan standart tagları cıkartır karşına he bide her işlemden sonra web sitende işlenmesi için ctrl+s ile kaydet devrem
     
    BlackNight7171 bunu beğendi.
  13. oDeCodeR Atıldı

    • Guest
    Katılım:
    6 Eylül 2017
    Mesaj:
    290
    Alınan Beğeniler:
    450

    Özel Mesaj
    yararlı konu beğendim :)
     
    IPiyango bunu beğendi.
    • Guest
    Katılım:
    8 Eylül 2017
    Mesaj:
    66
    Alınan Beğeniler:
    27

    Özel Mesaj
    • Guest
    Katılım:
    8 Eylül 2017
    Mesaj:
    66
    Alınan Beğeniler:
    27

    Özel Mesaj
    error trying to parse file hatası geliyor devrem
     
  14. IPiyango Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    93
    Alınan Beğeniler:
    72

    Özel Mesaj
    Önemli değil devrem
    Hangi kısımda veriyor hatayı devrem
     
    BlackNight7171 bunu beğendi.
    • Guest
    Katılım:
    8 Eylül 2017
    Mesaj:
    66
    Alınan Beğeniler:
    27

    Özel Mesaj
  15. IPiyango Guest

    • Guest
    Katılım:
    2 Nisan 2017
    Mesaj:
    93
    Alınan Beğeniler:
    72

    Özel Mesaj
    File kısmına gelip open folder a bas dosyayı kaydettiğin yeri seç sonra yap bi de dediklerimi
     
    • Guest
    Katılım:
    8 Eylül 2017
    Mesaj:
    66
    Alınan Beğeniler:
    27

    Özel Mesaj
    devrem bir de index nasıl yapılıyor biliyor musun
     
    IPiyango bunu beğendi.

Bu Sayfayı Paylaş