![5GmrdA.jpg](https://i.hizliresim.com/5GmrdA.jpg)
Merhaba TürkHackTeam üyeleri, HTML derslerinin son dersi olan bu dersimizde, HTML'de site içeriği ve tasarım konusuna değineceğim.
Resim Eklemek
HTML belgemize resim eklemek için <img> kodundan yararlanırız.
Kod:
<img src="ornek.jpg" alt="Örnek Resim">
![HnPmQe.png](https://resmim.net/f/HnPmQe.png)
Buradaki src="" özelliği resmin dosya adını yazacağımız yerdir. Eğer resim, html belgemizin olduğu yerde değil ve bir klasörün içindeyse bu kez src değerine "klasor/resim.jpg" şeklinde yazmak gerekecekti. Resmi farklı bir siteden alacaksanız o halde resmin yolunu yazmanız yeterlidir (http:// ile başlamalı ve bu bir resim dosyası olmalı, jpg, gif, png gibi)
Resimlerimize alt="" özelliği kullanarak fare imleci ile üstüne tuttuğumuzda görünecek açıklayıcı bir yazı yazılabilir. Resmimize link verebiliriz. Bunun için normal link komutu arasına resmimizi alırız.
Kod:
<a href="#"><img src="html.jpg" alt="Örnek Resim"></a>
![HnPmQe.png](https://resmim.net/f/HnPmQe.png)
Kod:
<a href="#"><img src="html.jpg" alt="Örnek Resim" border="7"></a>
Görüldüğü gibi kalın bir çizgi görünüyor resmimizin etrafında. Bunu stil dosyasından ayarlayabileceğiniz gibi, border="0" diyerek tamamen yok edebilirsiniz.
![nhoxpD.png](https://resmim.net/f/nhoxpD.png)
Resmimizi yazımızın sağına ya da soluna dayamamız mümkün. Bunun için align="hiza" özelliğinden yararlanırız. Bu değer left ise sağa, right ise sola dayalı olacaktır.
Kod:
<img src="html.jpg" alt="Sağa Dayalı Resim" border="0" align="right">
Ahmet Bey, küçük, ahşap, kırmızı boyalı, iki katlı bir evde otururdu. Erkenden kalkar, "Haydi ya nasip" derdi ve evden çıkardı. Kimseler anlamazdı "Ya nasip" ne demekti? O mahallede herkes gömlek giyerdi, Ahmet Bey bir de ceket diktirdi, mahalleli bundan pek hoşlanmamış gibiydi.
![q3BZIO.png](https://resmim.net/f/q3BZIO.png)
Arkaplan Kullanmak
Bahsettiğim kodları arasında <body>'ye ekleyeceğiniz bgcolor="" özelliği ile html belgesinin arkaplan rengini belirleyebilirsiniz, bu özellik içerisine yazılan renk kodları ingilizce, 16'lık ya da RGB değerlerinde belirtilmelidir. Bunlara bir resim editörü yardımıyla ulaşabilirsiniz (Photoshop tarzı).
Kod:
<body bgcolor="black">
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
Eğer arkaplanda bir resim kullanacaksak bu kez aynı kod için background="resim" şeklinde bir özellik kullanıyoruz.
Kod:
<body background="arkaplan.jpg">
Renkler
Bir HTML belgesinde kullanılan renkler RGB (Red, Green, Blue) yani Kırmızı - Yeşil - Mavi tonlarının belirtilmesi ile ortaya çıkarlar. Bunlar 16'lık sisteme göre #RRGGBB şeklinde düzenlenir.
Eğer bir kırmızı elde edeceksek, kırmızı tonlar en çok diğerleri en az kullanılmalı. 16'lık sistemde 0 = siyah, koyu, F = beyaz, açık anlamındadır. Buna göre değerleri koyudan açığa doğru sıralayacak olursak: 0123456789ABCDEF şeklinde olacaktır.
16'lık sisteme göre Kırmızı renk #FF0000 olacaktır. Burada dikkat edildiyse sadece kırmızı tonlar en açık belirtildi, yeşil ve mavi ise 0 yani en koyu tonunda bırakıldı.
![iRxe1i.png](https://resmim.net/f/iRxe1i.png)
Konuyla ilgili anlaşılmayan kısımları sorabilirsiniz. Kolay gelsin.
![1IJC46.png](https://i.resimyukle.xyz/1IJC46.png)
Son düzenleme: