• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Duyuru

Gizle
No announcement yet.

HTML Dersleri !

Gizle
Bu konu kapalıdır.
X
Bu konu sabit bir konudur.
X
X
 
  • Filtrele
  • Zaman
  • Göster
Hepsini Sil
new posts

  • HTML Dersleri !

    HTML Dersleri !


    GENEL YAPISI


    HTML’de tüm dosyalar <html> komutuyla başlayıp </html> komutuyla biter. Browser’a bir HTML dosyasının başladığını gösterir.

    Bir HTML dosyası genel olarak HEAD ve BODY olmak üzere iki bölümden oluşur. Yani, genel olarak bir HTML dosyası şöyle görünür;
    HTML-Kodu:
    <html>
    <head>
    .....................
    HEAD bölümünde kullanılacaklar.
    .....................
    </head>
    <body>
    .....................
    BODY bölümünde kullanılacaklar.
    .....................
    </body>
    </html>
    Şimdi HTML komutlarını ayrıntılarıyla ele alalım...
  • #2

    &lt;html&gt;

    <html>


    - Kullanılışı: <html> .....dosyayı başlatır. </html> .....dosyayı bitirir.
    - Ekleri: HTML komutunun kullanışlı bir eki yoktur.

    Bu komut t&#252;m HTML dosyalarının ilk ve son komutu olmalıdır.Bir HTML dosyasının başladığını ve bittiğini g&#246;sterir.

    Yorum yap

    • #3

      &lt;head&gt;

      <head>


      - Kullanılışı: <head> .....Head bölümünü başlatır. </head>.... Head bölümünü sonlandırır.
      - Ekleri: HEAD komutunun bir eki yoktur.

      Bu komut Head bölümünü başlatır ve bitirir dedik. Peki head bölümü ne işe yarar. Head bölümünde bazı önemli sayılabilecek komutlar kullanılır.Bunlar;

      <base> : Sayfanın ana URL’sini belirtmek için kullanılır. Dış bağlantılar için bir referans görevi yapar.
      Kod:
      [B]<base>[/B]
      
      Örnek:
      
      Bir sitede kullanılan bir resmin adresi 
      [B]<img src="http://www.site.com/resimler/resim.jpg">[/B] dir. Fakat [B]HEAD[/B] bölümünde
      [B]<base href="www.html.site.com">[/B] yazılırsa daha sonra body bölümünde tanıtılacak olan resmin adresi [B]<img src="resimler/resim.jpg">[/B] olacaktır.
      <title> : Browserınızın üst penceresindeki başlığı yazmanızı sağlar. Bu komut sayfanızın ana başlığını tanımlar. Sayfanızın ana başlığı browserın üst penceresine, ekranınızın en üst kısmına yazılır. Eğer sayfanıza gelen ziyaretciniz sayfayı Sık Kullanılanlar(Favorites) bölümüne eklemek isterse o bölümde sitenizin tanımı title sayesinde olacaktır. Arama motorları sitenize ulaşırsa sitenizin arama motorundaki tanımı title ile yazdığınız gibi olacaktır.
      Kod:
      [B]Örnek:[/B]
      
      <html>
      <head> 
      <title>HTML KOMUTLARI</title>
      </head>
      <body>
      .........Sayfanızın içeriği......
      </body>
      </html>
      <basefont> : Kullanacağınız yazıların büyüklüğünü ayarlar. Kullanmazsanız browserın tercihi default 3 olacaktır.

      Yorum yap

      • #4

        &lt;meta&gt;

        <meta>


        <meta> : Sayfanızla ilgili bilgileri yazmanızı sağlar.Genelde arama motorları için kullanılır. Bu komut siteniz hakkındaki bilgileri girmenizi sağlar.Bu bilgiler browserlar tarafından görüntülenemez fakat arama motorları sitenizi bulabilir.Head komutları arasında en önemli komuttur.

        - Ekleri: http-equiv:
        - Kullanılışı : <meta http-equiv="........." ..........

        Şimdi o noktalı kısımları nasıl dolduracağımızı örneklerle görelim..

        HTML-Kodu:
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-9">
        Ziyaretçinizin browserına dosyanızın Türkçe karakterler içerdiğini söyler. Browserda Windows’taki Türkçe karakterleri yardımıyla sayfanızı görüntüler. <meta> etiketinin oldukca gerekli bir kullanımıdır. Bunu kullanmadan da görüyor olabilirsiniz fakat bütün browserların aynı şekilde yorumlamadığını bilmelisiniz.

        HTML-Kodu:
        <meta http-equiv="expires" content = "Wed, 31 Dec 2001 00:00:00 GMT"
        Hazırladığınız dosyanın 31 Aralık 2001’de gece yarısı(Greenwich saatiyle) web ortamından kaldıralacağını gösterir.

        HTML-Kodu:
        <meta http-equiv= "refresh" content="3; 
        URL = "www.site.com/resimler.html">
        Bu komut satırını yazdığınız dosya 3 sn. boyunca görüntülenir daha sonra resimler.html adlı dosya görüntülenmeye başlanır.

        <meta name= "................." content= "..............."

        Dilerseniz <meta> komutunun name etiketiyle kullanımını da örneklerle görelim..
        HTML-Kodu:
        <meta name="description" content="Açıklamaları ve örnekleriyle HTML komutları">
        Yaptığınız sitenin içeriği ile ilgili bilgi vermenizi sağlar.Burada yazdıklarınız browserlar tarafından görüntülenmezler.

        HTML-Kodu:
        <meta name="keywords" content="HTML,HTML dersleri, web tasarimi, web tasarımı,web dizayn">
        İşte <meta> nın önemli kullanışlarından biri daha. Burada content kısmında yazdığınız sözcükler sayesinde siteniz arama motorları sayesinde bulunabilecektir.

        HTML-Kodu:
        <meta name= "author" content="isminiz">
        Bu da <meta> nın gereksiz uygulamalarından biri... Sayfayı yapan kişi veya kurum hakkında bilgi vermenizi sağlar.

        Yorum yap

        • #5

          &lt;body&gt;

          <body>


          <body bgcolor> : Sayfanızın arka fonunun rengini ayarlamanızı sağlar. Kullanmak istediğiniz rengi tanımlarken bazı özel renklerin ingilizcesini veya renk kodunu kullanabilirsiniz.
          HTML-Kodu:
          Kullanılışı: 
          <body bgcolor="yellow">
          veya
          <body bgcolor="#FFFF00">
          <body background> : Arka fona bir resim yerlestirmenizi sağlar. Kullandığınız resmin boyutu ne olursa olsun ekranda yatay ve dikey olarak defalarca kez tekrarlanıp bütün arka fonu kaplayacak hale getirilir.
          HTML-Kodu:
          Kullanılışı : 
          <body background="resim.jpg">
          <body text> : Kullanacağınız yazının rengini belirlemenizi sağlar..
          HTML-Kodu:
          Kullanılışı: 
          <body bgcolor="yellow" text="#FFFFOO">
          <body alink> : Sayfanızdaki aktif linkin rengini belirlemenizi sağlar. Mouse ile linkin üzerine tıklandığında linkin alacağı renktir.
          HTML-Kodu:
          Kullanılışı: 
          <body alink="FF0000">
          <body link> : Sayfanızdaki linklerin rengini belirlemenizi sağlar. Daha önce ziyaret edilmemiş linklerin rengidir.
          HTML-Kodu:
          Kullanılışı: 
          <body link="00FF00">
          <body vlink> : Kullanıcının sayfanızda daha önce ziyaret ettiği renkleri belirtmenizi sağlar.
          HTML-Kodu:
          Kullanılışı: 
          <body vlink="0000FF">

          Yorum yap

          • #6

            &lt;font&gt;

            <font>


            <font> : Yazı tipini belirlemeye ve şekillendirmeye yarar.

            <font size="3"> : Yazı tipinin boyutunun değerinin 3 olacağını belirtir.

            <font face="Arial"> : Yazı tipinin "Arial" fontunda olacağını belirtir.

            <font color="red"> : Yazı tipinin renginin kırmızı olacağını belirtir.

            <hX> : X yerine verilecek rakama göre de yazı tipi boyutu farklı değerler alabilir. Alternetif bir yazı boyut ayarı tagıdır.
            HTML-Kodu:
            <h3>Yazı buraya</h3>

            Yorum yap

            • #7

              Yazıyı hizalama komutları

              Yazıyı hizalama komutları


              <center>....</center> : Ortalamak için kullanılır.

              <p>....</p> : Yazı sola dayalı olur.

              <p align=center>....</p> : Yazı ortalanır.

              <p align=right>....</p> : Yazı sağa dayalı olur.

              <br> : Alt satıra geçmek için kullanılır.

              Yorum yap

              • #8

                &lt;b&gt; &lt;i&gt; &lt;u&gt; &lt;strike&gt;

                <b> <i> <u>


                <b>...</b> : Yazının kaln olmasını sağlar.

                <i>...</i> : Yazının italik (sağa yatık) olmasını sağlar.

                <u>...</u> : Yazının altçizgili olmasını sağlar.

                <strike>...</strike> : Yazının üstü çizili olmasını sağlar.

                Yorum yap

                • #9

                  Resim eklemek ve ayarlamaları

                  Resim eklemek ve ayarlamaları


                  Genel resim ekleme komutu <img src 'dir.

                  HTML-Kodu:
                  <img src="resmin URL'si">
                  Resim ortalansın;
                  HTML-Kodu:
                  <img src="resmin URL'si" align="center">
                  Resim sağa dayalı olsun;
                  HTML-Kodu:
                  <img src="resmin URL'si" align="right">
                  Resmin boyutları ne olursa olsun ek kodlar kullanarak browserde bunun boyutlarını değştirebilirsiniz;
                  HTML-Kodu:
                  <img src="resmin URL'si" align="right" width="100" height="50">
                  width = genişlik
                  height = yükseklik


                  Resmin üzerine fareyle gelince çıkan yazı için;
                  HTML-Kodu:
                  <img src="resmin URL'si" alt="çıkacak olan yazı buraya">

                  Yorum yap

                  • #10

                    Sayfaya Flash (swf) Eklemek


                    Kod:
                    <embed src="[COLOR="red"]swf_dosyasının_URLsi[/COLOR]" quality="high" width="[COLOR="red"]genişliği[/COLOR]" height="[COLOR="red"]yüksekliği[/COLOR]" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

                    Yorum yap

                    Hazırlanıyor...
                    X