Fotoğrafları HTML ile birlikte ver

HTML ve CSS

Hiper Metin İşaretleme Dili (HTML veya İspanyolca "hipermetin işaretleri dili"), web geliştiricileri tarafından statik web siteleri oluşturmak için kullanılan yaygın bir yazar dilidir. Bir web sayfasının yapısı HTML ile oluşturulmuştur. Web projenizin iskeletini oluştururken iyi olsa da, onu bir stil veya efekt olarak kullanmak o kadar da iyi değildir. Bunun için basamaklı stil sayfaları (CSS) kullanılır ve HTML'nizle tamamlanır, web sayfanıza grafik öğeleri ve stilleri eklemenize olanak tanır. Örneğin, metni her sayfanın tüm başlıklarında kalın harflerle göstermek istiyorsanız, bunu CSS ile yapabilirsiniz.

Görüntü opaklığı

En yaygın grafik efektlerinden biri opaklıktır. Opaklık, sitede bulunan bir görüntünün saydamlık derecesini belirler. Web sayfanıza bir arka plan resmi koymak istiyorsanız ve daha saydam bir efekt oluşturmak için opaklığı azaltmanız gerekiyorsa, bunu CSS ile yapabilirsiniz. İlgili CSS kodunu HTML etiketine yerleştirin :

Bu örnekte, "50" deki opaklık tanımlanmıştır, bu nedenle web sayfası görüntülerinin görünürlüğünün yarı yarıya azalması sağlanmıştır.

"Fare bitti" efekti

Opaklık efektini bir adım öteye taşıyabilir ve kullanıcının imleci üzerinden geçtiğinde fotoğrafın opaklığını değiştirebilirsiniz. Bu bir "fare-over" efekti. Kod, basit bir opaklık değişikliğine benzer ve HTML etiketinin içine de yerleştirilir . Bu, gezinti düğmelerini kullanmanın iyi bir etkisidir.

"Onmouseout" ve "onmouseover" komutlarını görebilirsiniz. Sayfayı yüklerken, bu kod görüntünün opaklığını% 50 azaltır, imleci geçtiğinizde% 100'e yükselir, dersi aldığınızda görüntü% 50'ye düşürülür.

Şamandıra (şamandıra)

"Float", bir fotoğraf için başka bir basit HTML ve CSS etkisidir. "Float", bir görüntünün bir tablo, hücre veya belge içinde görüneceği yeri tanımlar. "Float" komutu sol, sağ ve merkezin özelliklerini kullanır. Bunu, metnin içine bir görüntü yerleştirmek veya bir galeriye doğru şekilde yerleştirilmiş bir dizi resim oluşturmak için kullanabilirsiniz. Bunu, HTML başlık etiketinde şöyle tanımlayabilirsiniz:

Önceki örnekte, etiketli tüm HTML öğelerinin gösterildiği belirtildi. belgede solda yüzer.