Neler yeni

Link Verme , İmage Ekleme , Table Yapısı , Demo

The Kerberos

Forum Yöneticisi
Yönetici
Süper Admin
İmage Ekleme

Projelerinizde web sayfalarına birden çok resim ekliceksiniz.İmagelerinizi dosyalarınıza dahil etmenin birçok yolu vardır , .html dosyanıza imagelerinizi şu şekilde dahil edersiniz:​
Kod:
    <img src="../img/resim1.png">

    <img src="../img/resim2.jpg" width="200" height="200" alt="html" title="elma">
src parametresiyle aynı dizindeki kendi oluşturduğumuz image klasorunden resimimizi çekeriz ardından width ve height parametreleriyle boyutlandırırız.Title parametresi fotografın üstüne geldiğinde çıkan yazıdır.Alt parametresi ise google aramalarında resimimizin görünmesini sağlar.


Link Verme

<a> tagi ile sayfa içi veya sayfalar arası link veririz.​
HTML:
<a href="www.google.com" target ="_blank">Google</a><!--Sayfalar arası link verme-->
<a href="#paragraf1">Paragraf bire git</a><!-- sayfa içi link verme , unutmayın gitmek istediğiniz tagi hrefin içine yazarken "#" kullanmalıyız , kullanıcagımız tagin name'ini vermeliyiz.-->

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p name="paragraf1">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>

Resimlere tıkladığımızda da başka sayfalar açabiliriz:
HTML:
<a href="www.google.com">
<img border="0" alt="W3Schools" src="google.gif" width="100" height="100">
</a>

<a> tagi ile bunların yanında href parametresinin içine telefon numaraları , mail adresleri , script özelliklerimizi ekleyerek de birden çok yapmak istediğimiz şeyleri gerçekleştirebiliriz.


Table Yapısı



HTML:
<table border="2" width="100" height="100">
        <thead><!--Her bir sütunun başlıgıdır-->
            <caption>programlama</caption><!--Ana Başlık-->
            <tr><!--Her bir satırı temsil eder-->
                <th>1.baslık</th><!--Herbir sütünu temsil eder-->
                <th>2.baslık</th>
                <th>3.baslık</th>
            </tr>
         </thead>
        <tr>
            <td>1sa1sü</td>
            <td>1sa2sü</td>
            <td>1sa3sü</td>
        </tr>
        <tr>
            <td>2sa1sü</td>
            <td>2sa2sü</td>
            <td>2sa3sü</td>
        </tr>
        <tr>
            <td colspan="2">3.sa1sü</td>
            <td>3sa2sü</td>
        </tr>
        <tr>
            <td rowspan="2">4sa1sü</td>
            <td>4sa2sü</td>
            <td>4sa3sü</td>
        </tr>
        <tr>
            <td>5sa2sü</td>
            <td>5sa3sü</td>
            
        </tr>
    </table>
Colspan parametresi , dikey olarak atlıcağınız sütunları yok eder.En soldaki sütünu üç gövdeden , en sağdaki sütunu iki veya tek gövdeli istediğiniz zaman kullanırsınız.Rowspan parametresi ise colspanın yaptığını yatay satırlarda yapar.

Demo

Bu yazıda öğrendiğimiz herşeyi kullanarak ufak bi demo çalışması yapalım.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="350" height="350">
        <thead>
            <th>resim</th>
            <th>java</th>
            <th>c#</th>
            <th>angular</th>
        </thead>
        <tbody>
            <tr width=>
                <td><a href="liste.html" target=_blank><img src="C:\Users\Blg\Desktop\java\img\google.jpg" width="100"></a></td>
                <td>JSF</td>
                <td rowspan="3">EF</td>
                <td>ECMA-1</td>
            </tr>
            <tr>
                <td><a href="liste.html" target=_blank><img src="C:\Users\Blg\Desktop\java\img\google.jpg" width="100"></a></td>
              
                <td rowspan="2">JSP</td>
                
                <td>SASS</td>
            </tr>
            <tr>
                
                
                <td><a href="liste.html" target=_blank><img src="C:\Users\Blg\Desktop\java\img\google.jpg" width="100"></a></td>
                <td>SCSS</td>
            </tr>
        </tbody>



    </table>
</body>
</html>
çıktınız :

Ek Açıklama 2020-07-11 003731.png
 
Üst