DA - Duyuru Yazı Biçimlendirme Tagı nedir, Yazı Biçimlendirme Tagları

'Duyurular ve Kurallar' forumunda Vesaire tarafından 5 Aralık 2016 tarihinde açılan konu

  1. Vesaire

    Vesaire

    Medya Galerisi:
    26
    Albümler:
    2




    <font> </font>: Yazı biçimlerinin verildiği tagdır. <font> tagının bir takım parametreleri vardır Bunlar:

    color : Önceden anlatılan teknikler ve renk kodlarıyla yazının rengini belirlenebilir.
    Örnek:

    <font color="#ff0000">Kırmızı renkli yazı</font>​

    face : face parametresi yazının hangi yazı biçimini kullanacağını gösterir.

    (helvetica , arial ,verdana... gibi).Bu parametreye yazı değerleri isimleri verilir.

    Yazı biçiminin görünmesi için web sayfasını açan bilgisayarda o yazı tipinin bulunması gerekmektedir. Eğer yoksa bir kaç yazı tipini alternatif olarak ve virgülle ayırarak yazabilirsiniz.​


    Örnek:

    <font face="arial,verdana,helvetica">Bu yazı tipi arial dir. Eğer arial bulunmuyorsa diğer tipler kullanılır </font>

    size : Font büyüklüğünü belirler. Bu parametreye 1 - 7 arası rakamlar girilir (1 en küçük , 7 en büyük).​


    Eğer en son kullanılan yazı tipi boyutu artırılıp azaltmak istenirse +1,+5,-3,-4 gibi değerler kullanılır.​


    <b> : Bu tag kullanıldığında bundan sonraki yazılar koyu (bold) olacaktır.​


    <i> : Bu tag kullanıldığında bundan sonraki yazılar italik (italic) olacaktır.



    Örnek:



    <html>



    <head>



    <title> Fontlar </title>



    </head>



    <body>



    <font size="3" color="blue">Mavi yazı</font>



    <font size="5" color="blue">Mavi büyük yazı</font>


    <font size="3" color="blue">


    <b>Mavi kalın yazı</b>


    </font>


    <font size="3" color="blue">


    <b><i>Mavi kalın ve italik yazı</i></b>


    </font>

    </body>



    </html>
     
    Rüya bunu beğendi.
  2. Vesaire

    Vesaire

    Medya Galerisi:
    26
    Albümler:
    2
    Yukarıdaki örneği çalışma dizininize “ornek4.html” olarak kaydedin ve bir browser da görüntüleyin.

    [​IMG]

    Başlıklar

    Başlık tagları adındanda anlaşılacağı gibi başlık yazımında kullanılır. <h1> ,<h2> ,<h3> ,<h4> ,<h5> şeklindedir.



    Örnek :



    <html>



    <head>



    <title> Başlıklar </title>



    </head>



    <body>



    <h1>Başlık1</h1>



    <h2>Başlık2</h2>



    <h3>Başlık3</h3>



    <h4>Başlık4</h4>



    <h5>Başlık5</h5>



    </body>



    </html>



    Yukarıdaki örneği çalışma dizininize “ornek5.html” olarak kaydedin ve bir browser da görüntüleyin.

    [​IMG]


    Paragraflar


    <p> : Yeni bir paragraf yapmak için kullanılır.</p> şeklinde kapatılmaz. Bu tagla birlikte sadece “align” parametresi kullanılabilir.



    align : Önceki bölümlerde anlatıldığı gibi left, center, right değerlerini alabilir ve paragrafın sağa, sola veya ortaya dayalı olmasını sağlar. Align parametresi kullanılmadığı durumlarda paragraf sola dayalı olur.



    Kullanılış biçimi :



    <p> veya <p align=“değer”> şeklindedir.



    Örnek :



    <html>



    <head>



    <title> Paragraflar </title>



    </head>



    <body>



    <p> İlk paragraf sola dayalı



    <p align="center"> İkinci paragraf ortalı



    <p align="right"> Üçüncü paragraf sağa dayalı



    </body>



    </html>

    [​IMG]

    Yukarıdaki örneği çalışma dizininize “ornek6.html” olarak kaydedin ve bir browser da görüntüleyin.


    <br> : Yeni bir satır eklemek için kullanılır. </br> şeklinde kapatılmaz.



    Web Sayfalarında Resim Kullanılması


    Bir web sayfasında genellikle jpeg, gif formatlı resim dosyaları kullanılmaktadır.

    Bunun nedeni bu formattaki dosyaların boyutlarının daha küçük olması ve sayfalar görüntülenirken hızlı açılabilmesidir.



    <img> : Sayfa içerisine bir resim yerleştirmek istenildiğinde kullanılır. Bu tag belli parametrelerle kullanılır.



    Kullanılış biçimi:



    <img src=”dosya.adi” border=”değer” align=”değer” alt=”değer” weight=”değer” height=”değer”>



    src : Resim dosyasının konumunu belirtir. Eğer resim dosyaları html dosyaları ile aynı klasörde ise sadece resim dosyasının adını yazmak yeterlidir. Fakat başka bir klasör veya URL altında ise o zaman resmin yolunu belirtmeniz gerekir.



    Örnek 1: HTML dosyaları resim dosyaları ile aynı klasörde olsun. Bu durumda
    src = “resim.jpg” şeklinde yazmalısınız.



    Örnek 2: Resim dosyaları HTML dosyalarına göre “image” isimli bir alt klasörde olsun. Bu durumda



    src = “image/resim.jpg” şeklinde yazmalısınız.



    Örnek 3: Resim dosyaları www.progress.com adlı bir URL de olsun. Bu durumda
    src= “http://www.progress.com/resim.gif”) şeklinde yazmalısınız.



    Örnek 4:



    <html>



    <head>



    <title> Resimlerle Çalışmak </title>



    </head>


    <body>



    <img src="image/logo.jpg">



    </body>



    </html>



    Yukarıdaki örneği çalışma dizininize “ornek7.html” olarak kaydedin ve bir browser da görüntüleyin.​


    [​IMG]
    border : Resmin etrafına yerleştirilecek kenarlığın kalınlığını vermek için kullanılır.


    align : Resmin yatay konumunu belirler. Left, Center, Right değerlerini alabilir.
    alt : Resmin üzerine fare ile gelindiğinde gösterilecek metni vermek için kullanılır.

    weight : Resmingenişliğipiksel cinsinden girilir.


    height : Resmin yüksekliği piksel cinsinden girilir.

    Örnek 5:

    <html>

    <head>

    <title> Resimlerle Çalışmak </title>

    </head>

    <body>

    <img src="image/logo.jpg" border="4" alt="Ankara Üniversitesi" align="right">
    </body>


    </html>


    Yukarıdaki örneği çalışma dizininize “ornek8.html” olarak kaydedin ve bir browser da görüntüleyin.​


    [​IMG]

    Resmin sola dayalı, kenarlıklı ve açıklamalı olduğuna dikkat ediniz.

    Bağlantılar (Linkler)

    Web sayfaları arasında gezinti yapılabilmesi için sayfaların içerisine linkler yerleştirilir. Başka bir sayfaya veya sayfa içerisindeki bir başka konuma linklerle ulaşılabilir.
    <a> </a> : Link vermek için bu tag kullanılmaktadır. Bu tagda birtakım parametreler kullanılır. Bu parametrelerle hangi sayfaya link verildiği link verilen sayfanın nerede açılacağı bilgileri verilir.<a> tagı </a> ile kapatılır.

    Kullanılış biçimi :

    <a href=“değer” target=“değer” > Sayfada Görünecek Açıklama </a>
    href : Hangi sayfaya link verileceğini belirler. Link verilecek dosya çalışma klasörünüzle aynı konumda ise dosyanın adını vermek yeterlidir. Fakat farklı bir konumda ise yolu belirtmelisiniz.

    target : Bu parametre linke basıldığında sonucun nerede görüntüleneceğini belirler. Eğer kullanılmazsa linke basıldığında aynı sayfa üzerinde görüntüleme yapılır. Target parametresi en çok Frame’lerle birlikte kullanılır. Fakat bu konu daha ileride işleneceğinden şimdilik target parametresinin “_blank” değerinden bahsedilecektir.

    “_blank” değeri linkin sonucunun yeni bir browser penceresinde açılmasını sağlar.


    Eğer isterseniz sayfanızda kullandığınız bir linkin nereye bağlanacağına dair bir açıklamayı sayfanıza yerleştirebilirsiniz. Örneğin http://www.progress.com.tr adresine link verirseniz bu linke açıklama olarak Progress Türkiye yazabilirsiniz.


    Örnek :

    <html>

    <head>


    <title> Linkler </title>


    </head>


    <body>

    <a href=“http://www.progress.com.tr” target=“_blank”>Progress Türkiye </a>
    </body>​

    [​IMG]

    </html>


    Yukarıdaki örneği çalışma dizininize “ornek9.html” olarak kaydedin ve bir browser da görüntüleyin.



    Sayfanızdaki linke tıkladığınızda Progress Türkiye sayfası yeni bir pencerede görüntülenecektir.



    Progress Türkiye açıklaması yerine <img> tagını kullanarak sayfanızdaki bir resmede link verebilirsiniz.



    Örnek :



    <a href= “http://www.progress.com.tr” ><img src= “image/progress.gif”> </a>​

    [​IMG]

    “ornek9.html” adlı dosyanızda gerekli değişiklikleri yapın ve “ornek10.html” olarak kaydedin. Yaptığınız dosyayı bir browser da görüntüleyin. Bu örnekte resmin üzerine tıkladığınızda Progress Türkiye sayfası aynı pencerede açılacaktır.


    Listeler


    Web sayfalarında Word’ de olduğu gibi metinler maddeler halinde listelenebilir. Bu listeleme üç şekilde yapılabilir.


    Sıralanmamış Liste (Unordered List)


    Bu tipteki listelerde liste elemanları başlarında bir daire görüntülenerek listelenir.


    Kullanılış biçimi :


    <ul>


    <li> Liste elemanı 1


    <li> Liste elemanı 2


    <li> Liste elemanı 3


    <li> Liste elemanı 4


    </ul>


    Örnek :


    <html>


    <head>


    <title> Sırasız Listeler </title>


    </head>


    <body>


    <ul>


    <li> Kastamonu


    <li> Adana


    <li> Yozgat



    <li> Kayseri



    <li> Ankara



    <ul>


    </body>


    </html>


    Yukarıdaki örneği çalışma dizininize “ornek11.html” olarak kaydedin ve bir browser da görüntüleyin.​

    [​IMG]

    Sıralanmış Liste (Ordered List)


    Bu tipteki listelerde her liste elemanının başına sıra numarası gelir


    Kullanılış biçimi :

    <ol>


    <li> Liste elemanı 1


    <li> Liste elemanı 2


    <li> Liste elemanı 3


    <li> Liste elemanı 4


    </ol>


    Örnek :


    <html>


    <head>


    <title> Sıralı Listeler </title>


    </head>


    <body>


    <ol>


    <li> Kastamonu


    <li> Adana


    <li> Yozgat


    <li> Kayseri


    <li> Ankara


    </ol>


    </body>​

    [​IMG]

    </html>

    Yukarıdaki örneği çalışma dizininize “ornek12.html” olarak kaydedin ve bir browser da görüntüleyin.​

     
    Rüya bunu beğendi.

Bu Sayfayı Paylaş