Css ve Html İle Resmin Yanına Yazı Yazdırma Uygulaması 2 | E L M A

Css ve Html İle Resmin Yanına Yazı Yazdırma Uygulaması 2

  

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle  Resmin Yanına Yazı Yazdırma Uygulaması 2 programını aktaracağız.  Css ve Html  de kodlama nasıl gerçekleşir? Css ve Html İle  Resmin Yanına Yazı Yazdırma Uygulaması 2 nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.


Css ve Html Programlama Örnekleri


Css ve Html İle  Resmin Yanına Yazı Yazdırma Uygulaması Kod Alanı


Css ve Html  web programlama dilinde  Resmin Yanına Yazı Yazdırma Uygulaması 2 kod metnini oluşturduk. Bu uygulamamızda  html web programlama dilinde oluşturduğumuz sayfamızda bulunan resmin yanına css kullanımı ile yazı yazdıracağız. Css ile resmin yanına yazı yazdırma işleminde Float özelliğini kullanmamız gerekmektedir. Float css içerisinde bir konumlandırma yapısıdır. Bu uygulama örneğimizde ise html sayfamıza iki adet resim ekleyeceğiz. Bir resmin sağına diğer resmin ise soluna yaslanmasını ve böylelikle de resimlerin yanına yazılar yazdırmayı kodlayacağız. 


Uygulamanın html kod metin alanı aşağıdaki gibidir:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.programlamahocam.com</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<div class="ornek">
<img src="img/thumb1.jpg" class="saga-kaydir">
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p>
<p> 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
<img src="img/thumb1.jpg" class="sola-kaydir">
<p>
Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. </p>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p>
<p> 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
</div>
</body>
</html>


Uygulamanın css kod metin alanı aşağıdaki gibidir:


.ornek{
width: 900px;
margin:auto;
}
.saga-kaydir{
float:right;
padding:0 0 10px 10px;
}

.sola-kaydir{
float:left;
padding:0 10px 10px 0;
}


Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.

Yorum Gönder

Daha yeniDaha eski