Semantic: Anlamsal Elemanlar. Sayfada bir h1 elemanı gördüğümüz zaman bunun bir header olduğunu anlarız ya da p etiketi gördüysek bunun içinde yazı olacağını anlarız <div> ya da <span> kendi başına bir anlam ifade etmezler buna bir id,class özelliği verilmesi lazım Arama motoru h1 gördüğü zaman bunun başlık olduğunu anlar fakat class ya da id verilmemiş bir id etiketini anlayamaz. Sayfamızda <div id="footer"> gördüğümüzde bunun bir footer olduğunu anlayabilliriz fakat bu eksi bir kullanımdır HTML5 ile birlikte header,nav,footer vb. alanlar için <header> <nav> <footer> özel etiketler oluşturulmuştur Bu etiketlerin kullanılması arama motoru ve kullanıcıların siteyi anlamasını sağlar websiteleri header,navbar,siderbar,section,footer gibi alanlardan oluşur. <!-- Semantic: Anlamsal Elemanlar Sayfada bir h1 elemanı gördüğümüz zaman bunun bir header olduğunu anlarız ya da p etiketi gördüysek bunun içinde yazı olacağını anlarız <div> ya da <span> kendi başına bir anlam if. etmez buna bir id,class özelliği verilmesi lazım Arama motoru h1 gördüğü zaman bunun başlık old. anlar fakat class ya... Okumaya Devam et →
HTML – Forms & Inputs
HTML' form etiketleri kullanıcıdan veri almak için kullanılır, bu veriler Back-End'te işlenerek gerekli CRUD (Create, Reading, Update, Delete) işlemleri yapılır. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5 Form ve Inputs</title> </head> <body> <!-- <form action="process.php"> şekl. yazsaydık girdileri backend'teki process.php dosyasına gönderecekti. --> <!-- <form method="get"> ya da... Okumaya Devam et →
HTML – Bookmarks
Sayfada bir linke bastığımız zaman bizi aynı sayfanın başka bir kısmına götürebilir. Yukarı aşağı vs belirli bir bölgeye...) Bunu bookmarks (işaretleme) özelliği ile yaparız link'e href=#gidilecek_yerin_idsi şekl yönlendirme yaparız. Gitmek istediğimiz yerin id'sini de buna göre veririz. Aynı şekilde sayfa_linki/#sayfada_bulunan_elemanin_idsi şekl tarayıcı çubuğuna yazarak da gidebiliriz. <!-- Sayfada bir linke bastığımız zaman bizi aynı sayfanın başka bir kısmına götürebilir. Yukarı aşağı vs belirli bir bölgeye... Bunu bookmarks (işaretleme) özelliği ile yaparız link'e href=#gidilecek_yerin_idsi şekl yönlendirme yaparız Gitmek istediğimiz yerin id'sini de buna göre veririz Aynı şekilde sayfa_linki/#sayfada_bulunan_elemanin_idsi şekl tarayıcı çubuğuna yazarak da gidebiliriz --> <!DOCTYPE html> <html lang="en">... Okumaya Devam et →
HTML – Id & Class
HTML'de etiketlere id ve class'larla kimlik ya da sınıf verebilir, sınıf verilen etiketlerde toplu tasarım değişiklikleri yapabiliriz. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5 - Id & Classes</title> </head> <body> <pre> id sayfada bir defa verilir.Unique yapılar için kullanılır. Classlar ise birden fazla yere verilebilir. id kimlik için,... Okumaya Devam et →
HTML – Div & Span
Div ve span etiketleri HTML'de bir bölümü, bir alanı karşılar. Bu etiketler içerisine elemanlar konularak tasarım yapılır. Div, block level bir elementtir, dolayısıyla değiştirilmedikçe sayfa genişliği kadar alan kaplar. Span ise inline tip bir elementtir, içeriği kadar yer kapsar. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML - Div... Okumaya Devam et →
HTML – Block Level & In Line Elements
HTML elemanları varsayılan görüntülenme değerleri bakımından block ve in-line olmak üzere ikiye ayrılır. Block level tipindeki etiketler sayfada ekranın genişiliği kadar yer kaplar örneğin <h1> block level elementtir. In-line etiketler ise sayfada içeriği kadar yer kaplar. Width, height gibi özellikler verilemez örneğin <a> etiketi, in-line tipinde bir elementtir ve sadece içeriği kadar yer kaplar <!DOCTYPE... Okumaya Devam et →
HTML – Videos & Audios
HTML'de videolar <video> etiketinde src ile uzantısı belirtilerek yazılır <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5 Videos</title> </head> <body> <video src="./videos/example.mp4" width="300px" controls> <!-- controls autoplay etiketini girersek otomatik başlar--> Tarayıcı içerik türünü desteklenmiyor. <!-- Desteklenmeyen tarayıcılarda yazı görünsün --> </video> </body> </html> Sesler ise aynı şekilde <audio>... Okumaya Devam et →
HTML – Lists
HTML listeler <ul> ve <ol> etiketleri ile yapılır. Unordered Lists (Sırasız Listeler), Ordered Lists (Sıralı Listeler) olarak ikiye ayrılır, bunlar ul ve ol'nin de kısaltmasıdır. Elemanlar <li> etiketkleri ile eklenir. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5 Lists</title> </head> <body> <!-- HTML5 Unordered Lists (Sırasız Liste) --> <ul>... Okumaya Devam et →
HTML – Tables
HTML'de tablolar <table> etiketleri içerisine yazılır. <tr> etiketleri ile table row yani tablo satırları oluşturulur bu <tr> etiketleri içerisine de <th> (table head) ya da <td> (table data) elemanları yazılır. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML Tables</title> <style> table, th, td { border: 1px solid black; border-collapse:... Okumaya Devam et →
HTML – Images
HTML'de resimlerimizi image etiketi içerisine yazarız. <img src="https://sitename.com/image2.jpg" /> <!-- url vererek --> <img src="./images/image2.jpg" /> <!-- dosya uzantısı ile--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5 Images</title> </head> <body> <a href="https://examplesjhsdbbf.com/image1.jpg" target="_blank"> <img src="https://examplesjhsdbbf.com/image2.jpg" height="300" alt="Resim Yazısı" /> <img src="./images/michael.jpg" height="200" alt="Resim Yazısı" /> <!-- Alt resmimiz... Okumaya Devam et →
