eklemek HTML'de oluşturİki ana format vardır: GIF ve JPEG. GIF formatı en basit animasyonu (dinamik banner'lar) kaydedebilir; JPEG, fotoğraf gibi çok sayıda görüntüyü görüntülemek için idealdir. Web grafikleri için üçüncü format PNG formatıdır, ancak web tasarımında yaygın kullanımını inkar etmiyoruz. Görsel ister GIF ister JPEG formatında olsun, ek bir etiketle web sayfasına eklenir. < img > , Hangisini kapatan etiket eksik.

SRC özelliği

Ek özellik yardımı için kaynak resim dosyasının adresi (URL) belirtilir, böylece tarayıcı bu öznitelikte belirtilen yola (URL adresi) göre sitenin kataloğundaki resimlere olan ihtiyacı bilir. Netlik sağlamak için sitedeki tüm görseller klasörde bulunmaktadır, lütfen bizimle iletişime geçin. görüntü. Örneğin, küçük formattan daha kısa herhangi bir görüntüyü alın ve onu, onlarla birlikte klasör görüntüsüne kaydedin. astar.jpg. Sonra başlangıç ​​için ona gideceğiz.

Peki, yan tarafa bir resim eklemeyi deneyelim mi? Kodu yazıyoruz (yol - URL, resimlerin bulunduğu klasörün konumuna kayıtlı):

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

Alternatif metin. ALT özelliği

Alternatif metin neden belirtildi? Sırayla gidelim. Her tarayıcıda görselleri açma fonksiyonu bulunmaktadır, dolayısıyla bu fonksiyonu kullanan kullanıcı başlıkta belirtilen açıklamayı kullanabilir. alternatif, Resim nedir? Transfer sınırsız tarifelere tabi olduğu için bugün geçerli olmayabilir, ancak yine de görgü kurallarına saygı duyulmaktadır. Popo koduna hayret ediyorum:

Resimleri tarayıcıda yalnızca üzerlerine tıklayarak görüntülemek en iyisidir.

Boyutu ayarlayın. WIDTH ve HEIGHT özellikleri

Size saygı duyuyorum, genişlik ve yükseklik çok önemli parametrelerdir, dolayısıyla bunları göz ardı etmenize gerek yok. Kendinize karar verin, görselin boyutları belirtilmemişse, görseller tarayıcıda etkinleştirilmişse, görseller büyütülmemişse küçük boş kareler yerleştirilmek istenen yerde yanlış yere yerleştirilebilir. Hikayenin güzelliği yeterli değil. Bu yüzden tembel olmayın ve boyutları HTML koduna tekrar yazın.

Resmin boyutları etiketlerle belirlenir Genişlik- genişlik i yükseklik- yükseklik, değerler ekranın genişliğine bağlı olarak hem piksel hem de piksel cinsinden ayarlanır (piksellere dikkat edin). Kodu merak ediyorum:

Visnovok

Resimler siteye eklenir, sadece wiki'den alınan pek çok bilimsel bilgiyi taşırlar, ancak yine de iyi, popüler bir site oluşturmak istiyorsanız belirli tavsiyelere uymanız gerekir.

Sitenin görünürlüğünü etkileyeceği için çok büyük bir resim dosyası boyutu oluşturmanıza gerek yoktur. İnanın bana, bu tek gösteriş olmaktan çok uzak.

ALT özelliğinin daha da önemli bir değeri var, onu IMG skin tag'ına eklemek gerekiyor. Metinsel bilgi yerine görselin doğru ve kısaca anlatılması gerekir.

Web sitesindeki görseller metin yerlerinden sorumludur.

Bu bölümü tamamladıktan sonra artık web uzmanı olmayı deneyebilir ve tam teşekküllü bir HTML sayfası oluşturabilirsiniz. Daha sonra multimedya özelliklerini eklemeye geçeceğiz.

Her metin yazarının hayatında html etiketlerine aşina olma aşaması gelir. Bu kendiliğinden ortaya çıkıyor ve asistanın “metni yayınlanmadan önce hazırlaması” fırsatı gibi görünüyor. Bu, istatistiklerde başlıkları, paragrafları, önemli yerleri ve listeleri görmeniz gerektiği anlamına gelir, ancak Word'de değil, özel bir HTML koduyla. Bu konuda yardım metin yazarı için etiketler. İş için gereken liste küçüktür, ancak metnin standart araçlarla biçimlendirilmesine bağlıdır. Bir metin yazarı için gerekli olan html etiketleri nelerdir? (Okuyamayacak kadar tembelseniz aşağı kaydırın; html etiketleri hakkında basit ve net bir tematik infografik var!)

Beslenme metin yazarı geleneği belirler. Ve tüm formüllerin kokusu başlıyor “Hangi etiket belirtildi...”:

• başlık;
• paragraf;
• kalın yazı;
• italik;
• işaretlilerin / işaretsizlerin listesi /

Bunların hepsi teknik göreve renk katar ve yeni bilgilerin edinilmesini teşvik eder. Anahtarın PS'deki görünürlüğünü artırmak için kalın metin için özel bir etiket ayarlarsanız durum daha da karmaşık hale gelir. Ancak her şeyin oldukça basit olduğu ortaya çıktı, o yüzden hemen çözelim.

Özel başlıklar için etiketler

Başlık oluşturmaya yönelik etiketler h1-h6 öğeleriyle temsil edilir. Kokularının harfi İngilizce Başlıktan (başlık) kaldırıldı. Gerekli başlık türünü ayarlamak ve bunun PS için önemini vurgulamak için aşağıdaki kodu kullanın:

Tema h1

Tema h2

Tema h3

Tema h4

h5 teması

Tema h6

Sitede yaklaşan siparişi göreceksiniz.

Tema h1

Tema h2

Tema h3

Tema h4

h5 teması

Tema h6

En büyük önem ve görünürlük h1 başlığıdır. Yogo vikorista ekimin adının jacuty'sinde ve buna bir kez alışıyor. Metindeki alt başlıklar için h2 ve h3'ü öneriyoruz. Bu materyalin öneminin vurgulanmasına ve makalenin bilgi düzeylerine bölünmesine yardımcı olurlar.

h4-h6 başlıkları pratikte gözden geçirilmez ancak mantıksal blokları ve önemli parçaları göstermeleri gerekir.

Harika makaleler için, h1-h3 başlıklarını, küçük makaleler için ise h1 ve h2 başlıklarını kullanmak en iyisidir.

Listeler: işaretli ve işaretsiz

İyi bir metni yapılandırmak her zaman bir veya birden fazla listeden oluşabilir. Dış görünümlerinin arkasında listeler var:

1. işaretli - numaralandırma içerirler;
2. işaretsiz - sembollerle gösterilen öğeler.

Tüm Word formatları sitede yayınlanmaya uygun değilse, HTML etiketlerindeki listeleri doğru şekilde nasıl biçimlendireceğinizi öğrenmeniz gerekir.
Etiket listesini etiketleme buna benzer:

Etiket işaretini kaldır listesi Bu yüzden:

Bu olduğunda, liste öğesinin bir HTML çerçevesi vardır:

Giriş yapmak, ek html kodu kullanarak metindeki işaretlerin listesini görmek için seçilen öğelerin türlerini birleştirmeniz gerekir. Bunun gibi görünecek:

1. popo
2. popo
3. popo
4. popo

İşaretlenmemiş bir liste için benzerdir:

• popo
• popo
• popo
• popo

Listeleri inceledik. Parçalanıp dağılabilirsin.

Etiketler: metin vurgusu: kalın ve italik

Hangi etiketin metni doğru şekilde biçimlendirmenize izin verdiğini anladığınızda, cilt türü kodu için hemen iki seçenekle karşılaşabilirsiniz. Bu, programcı olmayanlar ve beslenme konusunda merak uyandırıyor: milletvekilinin hangi etikete ihtiyacı var?

Her şey çok basit! Etiketler fiziksel ve mantıksal biçimlendirme seçeneklerini seçmelidir. İlk ihtiyaçlar ressamlara, diğeri ise ses makinelerine yöneliktir. Kendileri için de geçerli bir html kodu olan “Poshukoviki”, sıralama yaparken içerikten kaçınacağı ve bilgileri kaldıracağından, metni mantıksal biçimlendirme yöntemlerini kullanarak görmek sorun olmayacaktır.

HTML etiketlerinin kullanılması, jokerleri eşleştirmeyi ve okuyucunun metni görsel olarak görmesini mümkün kılar. Hangisinin daha öncelikli olduğuna kendiniz karar verin:

PS ve üyeler için ifadeleri kalın harflerle görme Koristuvach'lar için kalın yazılmış ifadeleri görmek PS ve muhabirler için ifadeleri italik olarak görme Yabancılar için italik ifadeleri görme

Cesur video etiketleri konusuyla ilgili harika ve çok ilginç bir makalem var.

Programcılar için konuya baktığımızda, metin yazarları için önemli olduğunu bir kez daha belirtmek isterim: Etiketlerin nasıl ayarlanacağı, bunların ne olduğu ve seçim yaparken dikkatli olmanın ne kadar önemli olduğu. Ve son olarak bir gereksinim daha gerekli olan html kodudur paragrafları görmek. Bu

Açılan etiket paragrafın başlangıcından önce, kapanan etiket ise sonuna yerleştirilir. Paragraf bir listeyle bitiyorsa, o zaman
etiket listesi için tüm vikorların arkasına yerleştirilir.

İşte sonunda birkaç basit tematik infografik:

Yorumlardakiler arasında tartışma başladıktan sonra Başarılı Metin Yazarları Kulübü'nde infografiklere ve makalelere dolambaçlı bir bağlantı verildi. Tartışmadaki yetkili bir katılımcının düşüncelerinin ekran görüntüsünü alıyorum.

Okundu: 6.687

Persh, daha düşük beslenme bilgisi " HTML'ye resim nasıl eklenir?“Kaynağa yalnızca görsel bir çekicilik kazandırmak değil, aynı zamanda sitenin dikkat süresini artırmak da mümkün olduğundan, büyük miktarda grafik materyal içeren web sayfalarını yeniden değerlendirmenin mümkün olmadığını belirtmek gerekir. .

Web siteleri oluştururken en sık kullanılan grafik formatları PNG, GIF ve JPEG'dir ve görüntülerle tasarım çalışmaları için, görüntüleri netliği kaybetmeden sıkıştırmak ve yeniden boyutlandırmak için son derece önemli olan birçok özelliğe sahip grafik düzenleyici Adobe Photoshop'tur. web Geliştirme.

HTML'ye görseller nasıl eklenir?

Bir HTML sayfasına resim eklemek için tek bir basit etiket kullanılır:

,

de xxx - resim adresleri. Bu durumda, resim sayfayla aynı dizindeyse etiket şu şekilde görünecektir:

Ancak hızlı ve istikrarlı bir İnternet henüz dünyanın her köşesinde mevcut değil ve bazen web sitesindeki görseller hiç de çekici değil. Bu gibi durumlarda alternatif metin kavramı yararlı olur.

Mevcut olmadığında, kullanılamadığında veya tarayıcı modunda "resimsiz" olduğunda resmin yerine gösterilir. Ek alt etiketi özelliği için kullanılabilir .

Bir grafik dosyasına alternatif metin ekleme örneği:

HTML'de resim boyutlarının atanması

Bir grafik dosyasının görüntüleme boyutlarını değiştirmek için, yüksekliğin yükseklik ve genişliğin piksel cinsinden genişlik olduğu yükseklik ve genişlik etiketlerini kullanın.

Bu nitelikler değiştirildiğinde, tarayıcı hemen grafik içeriği için bir yer görür, özel bir sayfa düzeni hazırlar, metni görüntüler ve ardından görüntünün kendisini görüntüler.

Bebek verilen boyutlarda bir dikdörtgenin içine yerleştirilir ve bu durumda parametreler çıktılardan az veya fazlaysa resim uzatılır veya sıkıştırılır.

Yükseklik ve genişlik nitelikleri yapılandırılmamışsa, tarayıcı görüntüyü pencerede görüntüler ve metnin ve diğer sayfa öğelerinin görüntülenmesini engeller.

Bu parametreler piksel cinsinden (resmin boyutu sabittir ve ekran boyutuna sığmaz) veya piksel cinsinden (resmin boyutu ekran boyutuna uyacak şekilde ayarlanır) belirtilebilir.

Örneğin:

Çıktı görüntüsünün boyutunu değiştirdiğinizde orantılarını korumanız gerektiğini unutmayın.

Bu amaçla parametrelerden yalnızca birinin değerini belirtmek yeterlidir ( genişlik veya yükseklik) Ve diğer tarayıcı otomatik modda kurulur.

HTML'de Roztashuvannya resimleri

Pek çok HTML etiketinin yanı sıra, Hizalama özelliği görüntünün hizalamasını belirler:

- resim metinden daha iyi görünüyor;

- resim metnin altında görüntülenir;

- resim metinden farklı görüntüleniyor;

- resim metnin yanında sağ tarafta görünür.

Fotoğraf çekildi

Bu yolu deneyin:

Bildiğiniz gibi grafik eki uzun veya kısaltılmış olarak gönderilebilir ve tıklandığında herhangi bir adrese iletilebilir.

HTML'de arka plan olarak nasıl resim oluşturabilirim?

Görüntüler yalnızca görünen bir nesnenin yan tarafına yerleştirilemez, aynı zamanda arka planda da kullanılabilir. Bir resmi arka plan olarak belirlemek için, başlığa arka plan niteliği \u003d "xxx" yazmanız gerekir; burada xxx, resmin adresidir, gösterge genel olarak izmaritlerdekiyle aynı şekildedir.

Popo için aşağıdaki doku görüntüsünü arka plan olarak ayarladım:

Görüntüleri arkalarında hazırlanmış bir kenarla bir klasöre kaydedin ve sonraki satırları yazın:

Metin içeren arka plan.

Sayfadaki arka plan resmi ayarlanır.

HTML etiketleri- HTML filminin temeli. Etiketler elemanları baştan sona ayırmak için kullanılır.

Bir HTML belgesi, HTML öğeleri ve metin ağacından oluşur. Bir HTML öğesi, head (açılır) ve end (kapanır) etiketiyle tanımlanır. Etiketleri kimin açıp kapattığı, etiketin adını değiştirecektir.

Tüm HTML öğeleri beş türe ayrılmıştır:

• boş elemanlar — , ,
  , , ,

  ---

  , , , , , , , , , ;
• biçimlendirilmemiş metin içeren öğeler —