Web siteleri, bloglar, web sayfaları - zamanımızda zaten tanıdık kavramlar. İnternetin gelişmesiyle birlikte, web sayfalarını barındırma siteleri inanılmaz derecede popüler hale geldi ve bu şaşırtıcı değil: bazı insanlar için kendi web sitelerine sahip olmak bir zorunluluktur, diğerleri için hoş bir eğlence. İlk durumda, talep edilen herhangi bir ürün veya hizmetin reklamını yaparken genellikle firmalardan, şirketlerden, özel girişimcilerden bahsediyoruz. İkincisi blogcularla ilgili.
Bunun yanında sadece bilgi arayan, blog okuyan, video izleyen vb. İnternet kullanıcıları var.
Kaliteli bir web sitesi oluşturmak için birçok seçenek vardır. HTML üzerinden web programlamaya odaklanacağız.
HTML nedir
HTML, Hiper Metin İşaretleme Dili anlamına gelir. İngilizce'den çevrilmiştir, bu "Köprü Metni Biçimlendirme Dili" anlamına gelir.
Başka bir deyişle, HTML, sitenin ana öğelerini, çerçevesini, örneğinkelimeler nasıl cümlelerden oluşur.
HTML kodları özel olarak Latin harfleriyle yazılır ve etiketler olarak adlandırılır ve her kod köşeli parantez içine alınır. Bazı etiketler eşleştirilir, bazıları eşleştirilmez.
Eşleştirilmiş, hatasız olarak çiftler halinde kullanılması gerektiği anlamına gelir. Örneğin, açılış etiketi bir web sayfasında nerede başladığını ve kapanış etiketi nerede bittiğini gösterir. İkincisi, açılı ayraçtan sonra bir eğik çizgi karakterinin varlığıyla öncekinden farklıdır. Örneğin, açılış etiketidir,kapanış etiketidir.
Eşleştirilmemiş etiketlerin bir ortağa ihtiyacı yoktur.
Birçok etiketin nitelikleri olabilir - ona daha spesifik bir anlam veren ek öğeler. Örneğin,. etiketi
HTML'nin kullanıldığı yerler
HTML'nin nerede gerekli olduğuna dair klasik anlayış, web sitesi oluşturmadır.
Pratikte bu yeterli olabilir, çünkü HTML sitenin ana öğelerini, menüleri (çok seviyeli olanlar dahil), arka planı ayarlamanıza, metin, resim, ses, video eklemenize, yazı tiplerini düzenlemenize izin verdiğinden ve çok daha fazlası.
Ancak, bir web sayfasına daha ilginç ve genellikle gerekli öğeler eklemenize izin veren başka diller de vardır:
- CSS, örneğin metnin rengi ve yazı tipi gibi etiketleri kullanarak tek tek öğelerin stil özelliklerini sürekli olarak belirlemeye gerek kalmadan tüm site için stiller ayarlar.
- Komut dosyası dili, siteye çeşitli mini programlar (komut dosyaları) geliştirmenize ve yerleştirmenize olanak tanır.banal estetik şeyler (fareyle üzerine gelindiğinde bağlantının rengini değiştirme) ve işlevsel olanlarla biten (müşteri e-posta adreslerini, telefon numaralarını toplama).
- PHP ile kendi ziyaretçi defterinizi veya yorum sisteminizi geliştirebilirsiniz.
Ayrıca HTML, dağıtım için e-postaların oluşturulmasında kullanılır.
Bağlantı nedir
Hem site içinde hem de harici olarak başka bir web sayfasına gitmenizi sağlar.
HTML bağlantıları yaygın olarak kullanılır:
- Harici bir web kaynağına gitmek için.
- Site içindeki sayfalarda gezinmek için.
- Google Formlara gitmek için.
HTML'de kaynağa bir bağlantı da sıklıkla belirtilir, özellikle başka bir siteden materyal kopyalarken yazarı belirtmeniz gerektiğinden. Aksi takdirde, atıfta bulunmadan kopyalama, telif hakkı ihlali, içerik hırsızlığı ve geri tepme tanımlarına girebilir. Ayrıca, ödünç alınan, benzersiz olmayan materyallerin kullanılması SEO performansını düşürür ve kaynağa bağlantı belirtmek riskleri az altır.
Bağlantı türleri
Klasik anlamda bir bağlantı, üzerine tıklayarak gidebileceğiniz bir web kaynağının adresidir.
Bunun yanında köprüler de var: metin ve resimler. Bu durumlarda, HTML bağlantısı bir cümlenin (kelime) veya resmin altında "gizlenir" ve onu takip etmek için metne veya resme tıklamanız gerekir.
Diğer bağlantı türleri:
- Ziyaret edilmemiş - belirli bir oturum sırasında henüz tıklanmamış bir bağlantı. Örneğin, dün bu bağlantıyı izlediyseniz, ardından bilgisayarınızı kapattıysanız ve bugün tekrar açtıysanız, yeni bir oturum başladığı için şimdi bağlantı tekrar ziyaret edilmez.
- Aktif - bu durumda, bağlantı çok kısa bir süre için kaydedilir: bağlantıya tıklamak ile onu takip etmek arasındaki aralık.
- Ziyaret Edilen - bir oturum sırasında en az bir kez ziyaret edilmiş bir bağlantı.
Normal metin bağlantıları için, ziyaret edilenler aksi belirtilmedikçe renk değiştirme eğilimindedir.
Köprü bağlantılı bir görüntü, ziyaret edilip edilmediğine bakılmaksızın görünümünü değiştirmez.
Normal bir bağlantı nasıl eklenir
Birçok web kaynağı site adresini bir bağlantı olarak algılar, hemen tıklanabilir hale getirir ve renkle vurgular. Örneğin adres messenger veya e-posta ile gönderilmişse üzerine tıklayarak siteye gidebilirsiniz.
HTML kullanarak kendiniz bir site oluşturmanız durumunda, özel bir etiket kullanarak bir bağlantı eklemelisiniz. Şuna benzeyecek: web sitesi adresi. HTML'deki bağlantı metni protokolle birlikte tam olarak belirtilmelidir.
Metin köprüsü nasıl eklenir
Daha önce bir metin köprüsünün normal bir bağlantıyla aynı işlevi yerine getirdiği, ancak estetik açıdan daha hoş göründüğü söylenmişti: genellikle gereksiz yere uzun olan bir site adresi yerine bir kelime veya tümcecik belirtilir. Örneğin, "Burada bilgi arayın" cümlesinde, bağlantıyı şurada gizleyebilirsiniz:"burada" kelimesi. Vurgulanacak ve üzerine tıklamak kullanıcıyı istenen siteye götürecektir.
HTML bağlantısı nasıl yapılır daha önce tartışılmıştı. Aynı etiketi kullanarak bir metin köprüsü ekleyebilirsiniz. Tek fark, etiketler arasında bağlantının altında gizleneceği metni belirtmeniz gerekmesidir: görünür metin.
Görüntü köprüsü nasıl eklenir
Burası biraz daha karmaşık. Aynı etiketi kullanıyoruz, ancak metin yerine görüntünün yolunu belirtmeniz gerekiyor.
Yol görüntünün konumudur. Resim (fotoğraf) bir dosya paylaşım hizmetinde bulunuyorsa, görüntüye giden yol boyunca tüm klasörleri bir eğik çizgi ile belirtmeniz gerekir. Mümkünse bir görselin bağlantısını da ekleyebilirsiniz.
Etiketlemek için
src'ye ek olarak, görüntünün yüksekliğini, genişliğini ve konumunu ve çok daha fazlasını ayarlamanıza olanak tanıyan diğer nitelikler de uygulanabilir. Bazıları:
- Src - görüntünün yolunu belirtir.
- Lowsrc - önceki öznitelikle aynıdır, ancak düşük kaliteli görüntüler için belirtilir.
- Yükseklik - resim yüksekliği.
- Genişlik - genişliği.
- Alt - resim açıklaması. Bir fotoğrafın veya resmin üzerine geldiğinizde, bu öznitelikte belirtilen metin açılır.
- Border - resmin etrafındaki kenarlığın kalınlığını belirler.
Özellikler etiketten sonra belirtilir veonun bileşimi. Niteliğin ardından değeri gelmelidir. Örneğin, "yükseklik" veya "genişlik" (yükseklik, genişlik) öznitelikleri için web sayfasındaki görüntünün yüksekliğini belirtir. Ölçü birimi, aksi belirtilmedikçe pikseldir.
Şu şekilde görünecek: <a href="web sayfası adresi"
. Bu nitelikler, görüntü için uygun boyutun ayarlanmasına yardımcı olacaktır. Kenarlık, görüntünün çevresinde görünmez bir kenarlık oluşturmaya yardımcı olur.
Yukarıdaki özellikler, resim ekleme etiketi için ayrı olarak geçerlidir. Örneğin:.
Çapa bağlantıları nelerdir
Çapa bağlantıları oluşturmak çok faydalı bir beceridir. Çoğu zaman, uzun bir metin bloğu veya bir sayfada birkaç alt bölüm içeren bir web sayfasını düzenlemeye ihtiyaç vardır. Bu durumda, metnin veya web sayfasının alt bölümlerine giden bağlantıların bir listesiyle hemen başlayabilirsiniz ve bunlara tıkladığınızda, kullanıcı doğrudan istenen bölüme gidecektir.
Çapa bağlantıları oluşturmak, diğer bağlantı türlerinden daha fazla özellik etiketi kullanımını gerektirir.
Önce, top niteliğini kullanarak her bilgi bloğu veya metnin alt bölümü için genel değeri ayarlamanız ve ardından bunu ilgili bağlantıyla ilişkilendirmeniz gerekir.
Özellikleri daha kapsamlıdır, bu nedenle önce daha basit bağlantıların oluşturulmasında ustalaşmanız ve ardından bağlantı bağlantılarının oluşumuna geçmeniz önerilir.
İpuçları
Deneyimlilerden yardımprogramcılar:
- Bir bağlantı hakkındaki bilgilerin HTML'de fareyle üzerine gelindiğinde görüntülenmesini sağlayabilirsiniz. Bunun için grafik öğeler için de kullandığımız alt özelliği işe yarayabilir.
- HTML kullanarak bir bağlantı listesi yapmak mümkündür. Bu özellikle, bağlantı bağlantıları için ve doğrudan geçerli web sayfasından bir bağlantıyla izlenebilecek web kaynaklarının bir listesini yapmanız gerektiğinde yararlı olabilir.
- CSS ve JavaScript'in yanı sıra bazı HTML işlevlerinin yardımıyla, normalden farklı bir metin bağlantıları ve köprüler tasarımı oluşturabilirsiniz. Örneğin, bir bağlantının üzerine geldiğinizde rengini değiştirebilir ve imleç ondan uzaktayken bir öncekine dönebilir. Bu, özel bir JavaScript komut dosyasıyla yapılabilir. Ek olarak, bağlantı rengi ziyaret edilmeyenler için mavi veya ziyaret edilenler için mor dışında bir şeye ayarlanabilir. Bu CSS'nin işidir.
- Bağlantıları kötüye kullanmayın. Birçok uygunsuz bağlantı içeren bir web sayfası özensiz ve özensiz görünür.
- Kullanıcının, resim içeren köprünün yalnızca bir resim değil, gerçekten bir resim olduğunu anladığından emin olun.
Sonuç
HTML'de bir sayfaya bağlantı vermek çok kolaydır. Bu dilin tüm ana noktalarını takip etmek önemlidir, çünkü küçük bir hata bile sonuç alınmayacağına ve kodun çalışmamasına neden olabilir.
