İçindekiler Tablosu
Giriş
Önceki yazımızda HTML dilinin temel etiketlerini ve yapısını keşfettik. Bu temel bilgileri kullanarak web sayfalarını daha etkileşimli hale getirmenin yollarını öğrenmeye hazır mısınız?
Web sayfalarınızı düzenlemek ve verilerinizi daha organize bir şekilde göstermek için tabloları nasıl oluşturacağınızı keşfedeceksiniz. HTML form elemanları ile kullanıcılarınızın sizinle etkileşimde bulunmasını sağlayabilirsiniz. Kullanıcıların girdiği verileri almak, seçenekler sunmak ve hatta geri bildirim toplamak için form oluşturmanın temel adımlarını da inceleyeceğiz.
WEB SAYFASININ TEMEL TAŞI:HTML-1 yazısını okumak için buraya tıklayabilirsiniz.
Tablo Kodları
Tablolar satır ve sütundan oluşur. Tablo etiketleri kullanılarak tabloya genel bir başlık yazabilirsiniz.
<table> </table> tablo oluşturmak için kullanırız. Bazı özellikleri;
- border, tablo kenarının boyutunu belirleriz.
- cellspacing, hücreler ile çerçevenin arasındaki boşluğu belirlemek için kullanırız.
- cellpadding, satır kenarları ile içeriği arasındaki mesafeyi belirleriz.
- width, tablonun genişliğini belirlemek için kullanırız.
- class, tablo stilini belirleriz. Ancak bu stil CSS kullanılarak yazılmaktadır.
<tr> </tr> tabloda satır oluşturmak için kullanırız. Bazı özellikleri;
- align, sütun içine yazdığımız metnin hizasını belirlemek için kullanırız. Bunlar right, left, center olmak üzere üç tanedir.
- colspan, aynı satırdaki hücreleri birleştirmeye yarar. Ayrıca kaç tane satırı birleştirmek istersek sayısını belirtiriz.
<td> </td> tabloda sütun oluşturmak için kullanılır. Bazı özellikleri;
- align, sütun içine yazacağımız metnin hizasını belirlemek için kullanırız. Bunlar right, left, center olmak üzere üç tanedir.
- width, tablonun genişliğini belirtiriz.
- height, tablonun yüksekliğini belirtiriz.
- class, tablo stilini tanımlarız. Ancak bu stil CSS kullanılarak yazılmaktadır.
- bgcolor, hücreyi renklendirmek için kullanırız.
- rowspan, aynı sütundaki hücreleri birleştirmeye yarar. Ayrıca kaç tane sütunu birleştirmek istenirsek sayısı belirtiriz.
<th> </th> tabloya başlık hücresi eklemek için kullanılır.
<caption> </caption> etiketi ile tablonun altına veya üstüne başlık eklemek için kullanırız. Tablonun altına mı yoksa üstüne mi ekleneceğini belirlemek için “align” özelliğini kullanırız. Eğer tablonun altına başlık eklemek istenirse “bottom”, üstüne eklemek istenirse “top” değerlerini kullanabiliriz.
<thead> </thead> tabloya genel başlık eklemek için kullanılır.
<table border="1">
<th <td colspan="2"></td>Tablo Başlığı</th>
<tr align="center">
<td colspan="2" bgcolor="cyan">sütun 1 ve 2 birleşti</td>
</tr>
<tr>
<td rowspan="2">satır 2 ve 3 birleşti</td>
<td>satır 2, sütun 2</td>
</tr>
<tr>
<td>satır 3, sütun 2</td>
</tr>
</table>
Frame Kodları
Frame, çerçeve olarak da bilinir; birden fazla sayfayı veya belgeyi tek bir web sayfasında görüntülenmesini sağlar. Aynı zamanda birden fazla web sayfasını tek bir browser penceresinden açmaya yarar.
<frameset> </frameset> çerçeveli sayfayı belirtmek için kullanırız. Çerçevenin sayısı veya büyüklüğünü bu etiketin özelliğini kullanarak belirtiriz. Ancak bu etiket <body> ve <head> etiketlerinin arasına yazılmaz. Bu özellik günümüzde pek tercih edilmemektedir. Ayrıca bazı tarayıcılarda da uyumsuzluklar oluşabilmektedir.
- cols, çerçeveleri sayfada sütun olarak böler.
- rows, çerçeveleri sayfada satır olarak böler.
<frame> çerçeveli sayfada görünmesini istediğiniz sayfaları tanımlamak için <frameset> etiketinin içinde tanımlarız.
<noframe> </noframe> çerçeveyi desteklemeyen browserların göstereceği alternatif sayfa belirtiriz.
<iframe> </iframe> etiketi, farklı bir web sayfasının veya belgenin sayfa içinde bir pencere oluşturarak görüntülenmesini sağlar. <frame> etiketinden farklı olarak günümüzde kullanımı daha yaygın ve güvenli bir yöntemdir. Bir diğer farkı ise <frameset> etiketinin içinde tanımlanmamasıdır.
<frameset rows="50%,50%">
<frame src="http://hacktorx.com">
<frameset cols="50%,50%">
<frame src="https://hacktorx.com/brute-force-attacks/">
<frame src="https://hacktorx.com/web-sayfasinin-temel-tasihtml-1/">
</frameset>
HTML Formları
HTML ‘de formlar, web sayfasını ziyaret eden kişilerle web sayfasını tasarlayan veya yöneten kişiler arasındaki bilgi alışverişini sağlamak için iki yönlü olarak çalışan araçlardır. Aynı zamanda formları bilgi göstermek için de kullanabiliriz.
<form> </form> etiketi form oluşturmak kullanırız. İstenilen kontroller ve bu kontrollerden elde edilen verilerin nasıl değerlendireceğimizi bu etiket arasında belirleriz. Bazı özellikleri;
- name, form için isim belirleriz.
- action, forma eklenen butona bastığımızda form bilgilerinin gönderileceği URL’yi belirtmek için kullanırız.
- method, form bilgilerinin Server’a teslim edileceği metodu belirleriz. Bu metot varsayılan olarak get kullanır. Ancak büyük miktarda veri gönderilecekse post kullanılmalıdır.
- target, kullanıcıya geri gönderilen yanıtın nerede gösterileceğini belirleriz.
<input> kullanıcının veri girebileceği alanı oluşturmak için kullanırız.
- type, <input> etiketi ile oluşturulan alanın türünü belirtiriz. Örneğin; düz metin için text, şifre için password, buton için submit, dosya seçmek için file, çoktan seçmeli bir form için radio türleri tercih edebilirsiniz.
- size, kullanıcı tarafından girilmesi istenilen verinin uzunluğunu belirleriz. Bu özellik text ve password türleri için geçerlidir.
- name, veri girileceği alanları isimlendirmek için kullanırız.
- value, metin kutusunda veya buton üzerinde görünmesini istediğimiz yazıyı belirleriz.
<textarea> </textarea> kullanıcı tarafından uzun veri girilmesi gereken durumlarda kullanılır. Metin kutusu oluşmasını sağlar.
- cols, kullanıcı tarafından yazılan verinin ekranda görülmesi istediğimiz sütun sayısını yazarız.
- rows, kullanıcı tarafından yazılan verinin ekranda görülmesi istediğimiz sütun sayısı belirtiriz.
<select> </select> seçim kutusu oluşturmak için kullanılır.
<option> </option> oluşturulan seçim kutusunun içinde olması istenilen seçenekler tanımlanır.
- value, istenilen seçenek için bilgi ekleriz.
<form name="form" action="veirlerin gönderilecek url" method="post">
Kullanıcı Adı: <br><input type="text" name="isim" size="24"><br /><br />
<b>Şifre:</b><br />
<input type="“checkbox”" name="sifre"><br /><br />
<input type="button" name="gonder" value="Gönder"><br /><br />
<textarea cols="20" rows="7">Yorum Kutusu</textarea><br /><br />
<select name="renk">
<option value="beyaz">Mavi</option>
<option value="kirmizi">Kırmızı</option>
<option value="siyah">Siyah</option>
</select>
</form>
Arka plan özelleştirme
Arka planı özelleştirmek kullanılan özellik <body> etiketinin arasına yazılır.
bgcolor=” “ , bu özellik ile arka palan rengini belirleyebiliriz.
background=” “ , arka plana resim eklemek için kullanırız. Google üzerinde bir resim eklemek için resmin bağlantı adresini yazarız.
<body background="hacking.png">
Genel Kodlar
</body>
Renkler
Web sayfasını oluştururken, kullanılan renkleri RGB (kırmızı, yeşil, mavi) renklerinin karışım oranlarıyla belirleriz. “#000000” siyah renk, “#ffffff” beyaz renk demek. Kullanabileceğiniz tüm renkler bu aralıktadır. Ayrıca renk kodlarını yazmak yerine isterseniz renklerin ingilizce karşılığını da kullanabilirsiniz.
<body bgcolor="#898">
Genel Kodlar
</body>
Linkedln adresim : https://linkedin.com/in/edanur-erdoğan-677640233
Edanur Erdoğan
HacktorX YazarıMerhaba ben Edanur Adli Bilişim Mühendisliği yanında Görsel İletişim Tasarımı bölümünde de eğitim görmekteyim. Kendimi Python dilinde geliştirmekteyim.
Son Yazılar
Nmap Detaylı Anlatım (3/3)
Nmap Detaylı Anlatım (2/3)
Nmap Detaylı Anlatım (1/3)
KERBEROS
Nmap Detaylı Anlatım (1/3)
