Position
Beautiful Soup ile HTML Tagleri Alma
Beautiful Soup ile sadece bir kaç aşama ile html taglere ulaşabiliriz. Bu da bize büyük kolaylıklar sağlamaktadır.Sayfa analizi veya veri çekme gibi işlemlerde elimizi güçlendiren bu kodları daha önce anlattığım aşamalar ile birlikte göstermek istiyorum. import requests from bs4 import BeautifulSoup robotum={"User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36"} cagrigungor=requests.get("https://www.cagrigungor.com/",headers=robotum) sayfakaynagi=cagrigungor.content soup=BeautifulSoup(sayfakaynagi,"lxml") soup=BeautifulSoup(sayfakaynagi,"html.parser") print(soup.title) print(soup.h1)
CSS Position ile Konumlandırma : Static, Relative,Absolute,Fixed,Sticky
HTML’de normal şartlarda divler yani bizim web sitemizin blokları birbirlerini takip eden akışa sahiptir. Biz position etiketi ile konumlandırmayı manuel olarak ayarlayabiliyoruz. Bu etiket position ile bir kaç yapı öğreneceğiz. Bunlar ; Relative Absolute Fixed Static Sticky Ayrıca top bottom left right gibi yönleride yardımcı eleman olarak kullanıyoruz. <!DOCTYPE html> <html> <head> <title>Position</title> <meta charset="utf8"> <style type="text/css"> .bir { background-color: yellow; width: 400px; position: relative; bottom: 10px; height: 100px; } .iki { background-color: red; width: 400px; height: 100px; } .uc{ background-color: green; position: fixed; width: 400px; height: 100px; } .ana { background-color: blue; width: 600px; position: abs...
HTML Position Sticky Örneği: Telefon ile Arama Butonu
Özellikle mobil gösterimlerde size büyük avantajlar sağlayacak telefon ile ara ve whatsapp iletişim butonu örneğini hazırladım. HTML ve CSS kodlarını kullanarak kendi kullanımınıza uygun olarak düzenleyebilirsiniz. Bu buton dijital pazarlama çalışmalarında Sizlere büyük avantaj sağlayacaktır. Dönüşüm ve etkileşim oranını arttırdığı herkes tarafından bilinen bu elementi full width olarak kullanmanızı tavsiye ederim. <html> <head> <title>Yapışkan Buton Yapımı</title> <style type="text/css"> .telefon { background-color:red; position: sticky; position: -webkit-sticky; bottom:0; width: 100%; margin:0; } .telefon h4 { padding:10px; } .telefon h4 a { text-decoration: none; color: white; } </style> </head> <body> <h1>Yapışkan Buton Kullanarak T...
