Temel Web Programlama HTML Notları

Konu 'Web Programlama Dilleri' bölümünde baysedef tarafından paylaşıldı.

  1. baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64

    Arkadaşlar bu sayfada Web sayfası programlamak için gerekli olan temel dil Html'in tuttuğum ders notlarını paylaşacağım. İyi çalışmalar :)
    alemci_baba_42, fora ve Murat AKSOY bunu beğendi.
  2. baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64
    HTML nedir?

    Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının görünümünü ve/veya işlevini değiştirmeye yarar.

    HTML BELGESİ OLUŞTURMA

    Html belgesi oluşturmak için Not Defteri kelime işlemci programı açılır, kodlar yazıldıktan sonra uzantısı .htm yada .html olacak şekilde belge kaydedilir.

    HTML BELGELERİNİN YAPISI
    HTML:
    <html>
    <head>
    <title><title>
    </head>
    <body>
    
    </body>
    </html>
    Bu sayfa yapısını anladıktan sonra ilk sayfa örneklerine geçebiliriz.
    fora bunu beğendi.
  3. baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64
    HTML:
    <html>…</html>
    Bu kod browsera HTML belgesinin başladığı ve bitiği yeri
    bildirir.Bütün diğer kodlar bu iki kod arasına yazılır.

    -------------------
    HTML:
    <head>…</head>
    HTML belgesinin ilk bölümüdür.Bu bölüme yazlanlar metin
    olarak ekranda gözükmez.

    -------------------
    HTML:
    <title>…</title>
    Head bölümü içine yazlan Title kodu sayfann başlığının
    yazıldığı bölümdür.

    -------------------
    HTML:
    <body>…</body> 
    
    HTML belgesinin bütün içeriği bu kodlar arasına yazlır.

    fora bunu beğendi.
  4. Moderatör Bünyamin

    Moderatör Bünyamin Tekirdağ Yönetici Moderatör

    Katılım:
    9 Ocak 2012
    Mesajlar:
    523
    Beğenileri:
    365
    Ödül Puanları:
    63
  5. baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64
    ~~İlk Uygulama Örneği~~

    Öncelikle başlat-programlar-donatılar-not defteri yoluyla not defterini açıyoruz. Eğer başka bir kod yazma editörümüz varsa onuda açabiliriz.(Burdan onların llinklerinide vereceğim) Bu kodları yazıyoruz.

    HTML:
    <html>
    <head>
    <title>Deneme Sayfası</title>
    </head>
    <body>
    Bu bir deneme sayfasıdr
    </body>
    </html>
    <title> etiketine yazdığımız yazı sayfanın başlığını oluşturur. (Açılan sekme kısmında farkedersiniz. Sayfada görünmesini istediğim yeride <body> etiketine yazdım.

    Şimdi dosyayı farklı kaydet ile dosya uzantısı .html veya .htm olacak şekilde kaydedelim. Dosyayı kaydettiğimiz yerden internet sayfasını açtığımızda basit web sayfamız görüntülenmiş olur.
    fora bunu beğendi.
  6. baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64
    Benim baya bi notum var arkadaşlar bunlardan mahrum kalmasın. Zaten seninde devamı gelmemiş gibi göründüğü için açtım konuyu. :)
  • baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64
    Standart Takılar

    <h1> BAŞLIKLAR

    Yazıların Başlık şeklinde yazılması için kullanılır. 6 tane başlık çeşidi vardır.

    HTML:
    <html>
    <title> Başlıklar </tille>
    <body>
    <h1> Başlık 1 </h1>
    <h2> Başlık 2 </h2>
    <h3> Başlık 3 </h3>
    <h4> Başlık 4 </h4>
    <h5> Başlık 5 </h5>
    <h6> Başlık 6 </h6>
    </body>
    </html>
    BR ETİKETİ ( Alt satıra geçmeyi sağlar)

    HTML:
    <html>
    <title> BR Etiketi </title>
    <body>
    Pazartesi
    
    Salı
    
    Çarşamba
    
    <br> Ocak <br> Şubat  <br> Mart
    
    </body>
    </html>
    HR ETİKETİ ( Çizgi çizer)

    HTML:
    <html>
    <title> HR Etiketi </title>
    <body>
    <hr>
    <hr color=red> ( color  Renk verir)
    <hr color=blue size=5> (size  Kalınlık verir)
    <hr color=green width=500>
    </body>
    </html>
    HR Etiketi’nin Parametreleri

    <hr width=100> Çizginin genişliğini ayarlamak için kullanılır.
    <hr size=20> Çizginin kalınlığını ayarlamak için kullanılır.
    <hr color=ff0000> Çizginin rengini ayarlamak için kullanılır.
    <hr align=right> , left, center Çizginin sayfadaki yatay konumunun sola, sağa veya ortaya hizalanmasını sağlar.
    fora bunu beğendi.
  • baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64
    <marquee> KAYAN YAZI

    HTML:
    <html>
    <title> Kayan Yazı </title>
    <body>
    <marquee> <font color=red size=7> Kayan Yazı </font></marquee> 
    <marquee direction=right> Sağa Doğru Kaydırır </marquee>
    <marquee direction=up> Yukarı Kaydırıır </marquee>
    <marquee direction=down> Aşağı Kaydırır </marquee>
    </body>
    </html>
    <bgcolor> Ekranın arka planının rengini belirlemek için kullanılır. <body> takısı ile birlikte kullanılır. Bu parametre ile renklerin ASCII karşılıkları (FF0000) kullanılabileceği gibi rengin ingilizcesi de (green, gray) kullanılabilir.

    HTML:
    <html>
    <title> Renk Modelleri </title>
    <body bgcolor=FF0000>
    </body>
    </html>
    <center> Yazıyı satırda ortalar
    <b> Yazıyı Koyu, Kalın yapar.
    <i> Yazıyı İtalik, Eğik yapar.
    <u>Yazıyı Altı çizgili yapar.

    ==>Bu komutlardan son açılan ilk kapatılır. Yani sondan başa doğru kapatılır.

    <font>Yazının tipini ve boyutunu ayarlamamızı sağlar.
    <font> Takısının Parametreleri

    <font face=arial size=5 color=ff00ff >

    <font face=arial>Yazının tipini
    <font size=5> Yazının büyüklüğünü
    <font color=ff00ff> Yazının rengini belirler.
    fora bunu beğendi.
  • мoʀαoʀ

    мoʀαoʀ Üye

    Katılım:
    28 Ekim 2008
    Mesajlar:
    990
    Beğenileri:
    634
    Ödül Puanları:
    94
    Arkadaş anlatıyor yani öğretiyor ;)

    Birde code taglarını kullanırsak daha güzel olmazmı?
  • baysedef

    baysedef Üye

    Katılım:
    3 Nisan 2010
    Mesajlar:
    537
    Beğenileri:
    384
    Ödül Puanları:
    64
    Evet arkadaşlar bir kaç yazı öncesinde söylediğim gibi bu paylaştığım notları ve örnekleri uygulamak için sizlere bazı -Html- editörlerinin linklerini vereceğim.

    Başta da belirttiğim gibi bilgisayarımızda bulunan not defterinden bu kodları yazarak bir web sayfası oluşturabilirsiniz. Yapmanız gereken kaydederken uzantısını ".html" olarak kaydetmek. Ancak bilindiği üzere not defteri html kodları yazmak amacıyla oluşturulmuş bir program değil bu nedenle kodlar daha özensiz görünüyor ve sizin işiniz dahada zorlaşıyor. Özellikle yeni başlayanlar için ve uzun kodlar yazanlar için. Bende yaygın olan bazı editörlerin linklerini vermek istiyorum.Öncelikle benim kullandığım kolay not defterine benzeyen bir program Edit Plus'tan bahsedeyim. Bu program yeni Html görenler için gayet kullanışlı. Özellikle kodsal çalışanlar için. Bende bu programı kullanıyorum ve ilerleyen örneklerde de buradan resimler paylaşacağım.(Örnek uygulamalar için.)

    Ama baya kapsamlı bir program daha var; Dreamweaver. Bu program Edit Plus'tan daha fazla hatta çok fazla gelişmiş.Mesela bir tablo oluşturmak istiyorsunuz ki bunu uzun kodlarla yapıyoruz.Kodları yazmak yerine tabloyu istediğiniz gibi çizebilirsiniz. O kendisi kodlara çeviriyor. Şu an anlatamayacağım bir çok arayüz ve araçlar bulunmakta. Yani anlatılmaz yaşanır :) Eğer benim tavsiyemi sorarsanız Dreamweaver biraz tembellik. Yani kodlar yazılarak öğrenilir. En azından bu sayfayı şu an okuyan ve temelde hiç bir şey bilmeden gelen arkadaşlar varsa onlara Edit Plus tavsiye ederim.


    Edit Plus==>

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    (Sayfa açıldığında bir kaç saniye içinde indirme başlayacaktır. Başlamıyorsa belirtilen yere tıklayınız.)

    Adobe Dreamweaver ise yeni sahibi olan Adobe'nin sitesinden satın alabilrsiniz.

    Arkadaşlar ikisininde deneme sürümünün linklerini paylaştım emeğe saygı açısından. Ama isterseniz internette full sürümlerde mevcut. Sizin bileceğiniz iş. :)
    fora ve Murat AKSOY bunu beğendi.
  • Sayfayı Paylaş