Html Nedir?
Html, Hyper Text Markup Language’ın kısaltmasıdır. Web siteleri oluşturmak için kullanılan bir programlama dilidir. Html dosyaları, web tarayıcıları tarafından okunarak web sayfalarını oluşturmak için kullanılır. Bu yazıda, Html’nin temel etiketlerinden başlayarak, dosya oluşturmaktan, bağlantılar ve bağlantı eklemeye, listeler ve tablolardan, resim ve video eklemeye, form ve giriş alanlarına, Css ile stili eklemeye, Html5 yeniliklerine ve responsive tasarım konusuna kadar birçok konuyu ele alacağız. İyi okumalar!
Html Nedir?
Html (HyperText Markup Language – Hiper Metin İşaretleme Dili), web siteleri oluşturmak için kullanılan bir işaretleme dilidir. Web tarayıcılarına internet üzerindeki bilgilere nasıl şekil vereceğimizi söyler. Html, metinleri, bağlantıları, resimleri ve diğer içeriği düzenlemek ve biçimlendirmek için kullanılır. İnternetin temel yapı taşlarından biridir.
Html, etiketlerden oluşur. Her etiket bir açılış ve bir kapanış etiketinden oluşur ve içeriği bu etiketler arasına alır. Etiketler <etiketadı>…</etiketadı> şeklinde kullanılır. İşte bazı temel Html etiketleri:
- <p>: Paragraf etiketi, bir metin paragrafını belirtir.
- <h1>, <h2>, …, <h6>: Başlık etiketleri, metnin başlığını belirtir. h1 en önemli ve en büyük başlıktır.
- <a>: Bağlantı etiketi, bir web sayfasına veya belirli bir konuma bağlantı oluşturur.
- <img>: Resim etiketi, bir resim gösterir.
- <table>: Tablo etiketi, verileri tablo şeklinde düzenler.
| Ad | Soyad | Yaş |
|---|---|---|
| Ahmet | Yılmaz | 25 |
| Mehmet | Demir | 30 |
| Ayşe | Kara | 23 |
Temel Html Etiketleri
Html Nedir?
Html, HyperText Markup Language’in kısaltmasıdır. Web siteleri oluşturmak için kullanılan bir işaretleme dilidir. Html, web tarayıcılarına nasıl içerik sunulması gerektiğini söylemek ve web sayfalarını yapılandırmak için kullanılan bir standarttır. Html, metinleri, görüntüleri, bağlantıları, tabloları ve diğer içerikleri düzenlemek için özel etiketler kullanır.
Html etiketleri, web tarayıcısına içeriğin nasıl görüntüleneceğini söyleyen etiketlerdir. Temel Html etiketleri, web sayfalarının yapılanmasında kullanılan en temel ve önemli etiketlerdir. Bu etiketler, başlık oluşturma, paragraf biçimlendirme, listeler ve tablolar oluşturma gibi işlevleri yerine getirir.
Html’in en temel etiketlerinden bazıları şunlardır:
| Etiket | Açıklama |
|---|---|
| <h1> – <h6> | Başlık etiketleri, web sayfasının başlık metnini belirtmek için kullanılır. |
| <p> | Paragraf etiketi, metin parçacıklarını belirtmek için kullanılır. |
| <ul>, <ol> | Liste etiketleri, sırasız (noktalama işaretleriyle) veya sıralı (numaralarla) listeler oluşturmak için kullanılır. |
| <li> | Liste öğesi etiketi, liste içerisindeki her bir öğeyi belirtmek için kullanılır. |
| <table>, <tr>, <td> | Tablo etiketleri, verileri tablo şeklinde göstermek için kullanılır. <table> etiketi kendisi tabloyu, <tr> etiketi satırları, <td> etiketi ise hücreleri belirtmek için kullanılır. |
Html Dosya Oluşturma
Bir web sitesi oluşturmak istiyorsanız, HTML dosyalarınızı doğru şekilde oluşturmanız çok önemlidir. HTML dosyaları, web tarayıcısı tarafından okunabilen bir yapıya sahip olduğundan, doğru etiketleri kullanarak doğru bir dosya oluşturmak gerekir.
HTML dosyası oluşturmak için herhangi bir metin düzenleyici kullanabilirsiniz. Öncelikle, “.html” uzantılı bir dosya oluşturmanız gerekmektedir. Örneğin, “index.html” şeklinde bir dosya adı seçebilirsiniz. Ardından, oluşturduğunuz bu dosyayı açarak HTML kodlarını girebilirsiniz. HTML etiketlerini kullanarak içeriği oluşturduktan sonra, dosyanızı kaydederek web tarayıcınızda önizleyebilirsiniz.
| Etiket | Açıklama |
|---|---|
| <!DOCTYPE html> | Bir HTML belgesinin standart bir HTML5 belgesi olduğunu belirtir. |
| <html> | Bir HTML belgesinin kök elementidir. Diğer tüm elementler burada bulunmalıdır. |
| <head> | Bir HTML belgesinin başlık bölümünü tanımlar. Başlık bölümü, tarayıcıya belgenin meta bilgilerini sağlar. |
| <title> | Bir HTML belgesinin başlığını belirtir. Tarayıcı sekmesinde görünen metin bu element içinde yer alır. |
| <body> | Bir HTML belgesinin ana içeriğini tanımlar. Web tarayıcısında görünen metinler ve elementler bu bölüm içinde yer alır. |
Html Bağlantılar Ve Bağlantılar
blog yazısı için hoş geldiniz! İnternetteki sayfaları araştırırken, çeşitli web sitelerindeki bağlantıları sürekli görmüşsünüzdür. Html’de bağlantılar, farklı sayfalara veya farklı bölümlere yönlendiren metin veya görüntülerdir. Bu yazıda, Html bağlantıları nasıl oluşturabileceğinizi, bağlantıları nasıl stilize edebileceğinizi ve bağlantıların önemini keşfedeceksiniz.
Html’de bir bağlantı oluşturmak için “<a>” etiketini kullanırız. Bağlantı oluşturmak için etiketin “href” özelliğini kullanırız. Bu özelliğe, yönlendirilmek istenen sayfanın URL’sini veya dosya adını ekleriz. Örneğin, “<a href=”https://www.example.com”>Bu bir bağlantıdır</a>” şeklinde bir bağlantı oluşturabiliriz. Bu şekilde kullanıcılar, bağlantıya tıkladıklarında “https://www.example.com” adresine yönlendirilecektir.
Bağlantıların stilini özelleştirmek için Css kullanabiliriz. Örneğin, bağlantıların rengini, altını çizisini veya yazı tipini değiştirebiliriz. Bunun için bağlantı etiketine bir id veya class atayabilir ve Css stil dosyasında bu belirteçleri kullanabiliriz. Böylece bağlantılarımızı dilediğimiz gibi tasarlayabiliriz.
- Html bağlantı etiketi kullanılarak başka bir sayfaya veya belgeye bağlantılar oluşturulabilir.
- Bağlantıların stilini özelleştirmek için Css kullanılabilir.
- Html bağlantılar, web siteleri arasında gezinmeyi ve bilgileri paylaşmayı kolaylaştırır.
| Link Etiketi | Açıklama |
|---|---|
| <a href=””> | Bağlantıyı oluşturmak için kullanılır. “href” özelliği ile hedef sayfanın URL’si belirtilir. |
| <a> | Bağlantının metnini veya içeriğini belirtmek için kullanılır. |
| <a id=””> | Bağlantıya benzersiz bir belirteç atamak için kullanılır. |
Html Listeler Ve Tablolar
Html listeler ve tablolar, web sayfalarını düzenlemek ve içeriği daha kullanıcı dostu hale getirmek için önemli araçlardır. Liste oluşturma için <ul>, <ol> ve <li> etiketleri kullanılırken, tabloları oluşturmak için <table>, <tr>, <th> ve <td> etiketleri kullanılır.
Html’de <ul> etiketi, sırasız bir liste oluşturmak için kullanılır. Her bir liste elemanını belirtmek için <li> etiketi kullanılır. Örneğin:
- Elma
- Armut
- Portakal
Html’de sıralı liste oluşturmak için <ol> etiketi kullanılır. Sayı ile başlayan her bir liste elemanını belirtmek için yine <li> etiketi kullanılır. Örneğin:
- Kahvaltı yap
- İşe git
- Öğle yemeği ye
Html’de tablo oluşturmak için <table> etiketi kullanılır. Tablonun her bir satırını belirtmek için <tr> etiketi kullanılırken, başlık hücrelerini belirtmek için <th> etiketi, diğer hücreleri belirtmek için ise <td> etiketi kullanılır. Örneğin:
| Film | Yönetmen | Yıl |
|---|---|---|
| Interstellar | Christopher Nolan | 2014 |
| Inception | Christopher Nolan | 2010 |
Html Resim Ve Video Eklemek
HTML Resim ve Video Eklemek
HTML, web siteleri oluşturmak ve içeriklerini düzenlemek için kullanılan bir işaret dilidir. Resimler ve videolar, web sitelerine görsel çekicilik ve etkileşim katmak için sıkça kullanılan öğelerdir. Bu yazıda, HTML kullanarak nasıl resim ve video ekleyebileceğinizi öğreneceksiniz.
Resim Eklemek
HTML’de resim eklemek için <img> etiketini kullanırız. Bu etiketin src özelliği, resmin kaynak dosya yolunu belirtir. İsterseniz resmin genişlik ve yükseklik özelliklerini de belirtebilirsiniz. Örneğin:
| Kod | Açıklama |
|---|---|
| <img src=”resim.jpg” alt=”Resim Açıklaması”> | src özelliğiyle resmin dosya yolunu belirtir, alt özelliğiyle resim açıklamasını ekler |
| <img src=”resim.jpg” alt=”Resim Açıklaması” width=”300″ height=”200″> | width özelliğiyle resmin genişliğini, height özelliğiyle resmin yüksekliğini belirtir |
Video Eklemek
HTML’de video eklemek için <video> etiketini kullanırız. Bu etiketin src özelliği, video dosyasının kaynak yolunu belirtir. Ayrıca, videoyu kontrol etmek için play, pause, vb. işlevleri sağlamak için de bazı özellikler kullanılabilir. Örneğin:
| Kod | Açıklama |
|---|---|
| <video src=”video.mp4″ controls></video> | src özelliğiyle video dosyasının dosya yolunu belirtir, controls özelliğiyle kontrol çubuğunu görüntüler |
| <video src=”video.mp4″ width=”640″ height=”360″ controls></video> | width özelliğiyle video genişliğini, height özelliğiyle video yüksekliğini belirtir |
HTML kullanarak resim ve video eklemek oldukça kolaydır. Resimler ve videolar, web sitenizin daha görsel bir şekilde sunulmasını sağlar ve kullanıcı etkileşimini artırır.
Html Formları Ve Giriş Alanları
Html formaları, web sayfalarında kullanıcıdan bilgi almak, veri girişi yapmak ve işlemek için kullanılan önemli bir öğedir. Formlar sayesinde kullanıcılar, metin girişi, seçeneklerin seçimi, dosya yükleme gibi çeşitli işlemleri gerçekleştirebilirler. Bu da web sayfalarının etkileşimli ve kullanıcı dostu olarak tasarlanmasını sağlar.
Html formaları, <form> etiketi ile başlar ve </form> etiketi ile sonlandırılır. Form etiketi ile belirtilen alanlar kullanıcıların giriş yapmasına izin verir. Bu alanlarda kullanıcıdan istenen bilgilerin türüne göre çeşitli giriş alanları kullanılabilir.
Bunlardan bazıları şunlardır:
Html formaları ve giriş alanları, web sitelerinde kullanıcı etkileşimini sağlamada önemli bir rol oynar. Kullanıcıların rahatlıkla veri girebilmesi ve istenen bilgileri kolayca iletebilmesi, web sayfalarının kullanıcı dostu ve etkili olmasını sağlar.
| Giriş Alanı Türü | Kullanımı |
|---|---|
| Metin Giriş Kutusu | <input type=”text”> |
| Parola Giriş Kutusu | <input type=”password”> |
| Seçenek Kutusu | <select><option></option></select> |
Html Css Ile Stil Ekleme
Html ve Css, web tasarımında önemli iki bileşendir. Html, bir web sayfasının yapısını tanımlayan işaretleme dilidir. Css ise Html elemanlarının stil ve görüntüsünü belirlemek için kullanılan bir stil yapma dilidir. Html ile içerik oluşturulurken, Css ile bu içeriğin biçimlendirilmesi sağlanır. Bu yazıda, Html ile Css kullanarak nasıl stil ekleneceğini inceleyeceğiz.
1. İnline Css: İnline Css, doğrudan Html elemanlarına stil özelliklerinin atanmasıdır. Her bir Html etiketi içerisinde style özelliği kullanılarak stil tanımlanır. Örneğin; <p style=”color: blue;”>Bu bir mavi paragraf</p> şeklinde bir kod ile paragrafın metin rengi mavi olarak belirlenebilir.
2. Internal Css: Internal Css, Html dosyasının <style> etiketleri arasına yazılarak belirtilen stil kodlarıdır. Bu şekilde belirtilen stil kodları, tüm sayfa içerisinde geçerli olur. Örneğin;
<style>
p {
color: red;
}
</style>
şeklinde bir kod ile tüm paragrafların metin rengi kırmızı olarak ayarlanabilir.
3. External Css: External Css, Css kodlarının ayrı bir dosyada tutulması ve Html dosyasına bağlantı ile eklenmesidir. Bu sayede birden fazla Html dosyasında aynı stil kodlarını kullanmak mümkün olur. Örneğin, aşağıdaki gibi bir Css dosyası oluşturulup Html dosyasına bağlantı yapılarak stil eklenebilir:
styles.css dosyası:
p {
font-weight: bold;
}
<link rel=”stylesheet” href=”styles.css”>
| Html | Css |
|---|---|
| Yapıyı Tanımlar | Görünümü Tanımlar |
| Etiketlerden Oluşur | Kodlardan Oluşur |
| İçerik ve Yapı | Stil ve Görünüm |
Html5 Yenilikleri
Html5, web geliştirme dünyasını kökten değiştiren bir teknolojidir. Html5’in getirdiği yenilikler sayesinde web siteleri çok daha etkileşimli ve kullanıcı dostu hale gelmiştir. Html5 ile birlikte birçok yeni etiket, özellik ve API tanıtılmıştır.
1. Yeni Etiketler:
Html5 ile birlikte birçok yeni etiket eklenmiştir. Örneğin, <article> etiketi, sayfada bağımsız bir içerik bölümü tanımlamak için kullanılır ve arama motorlarının içeriği daha iyi anlamasına yardımcı olur. <section> etiketi ise sayfayı bölümlere ayırmak için kullanılır.
2. Form İyleştirmeleri:
Html5 ile birlikte form işlemleri daha kolay hale gelmiştir. Artık form alanları doğrulama, otomatik tamamlama ve yerel tarih seçimi gibi işlevlere sahiptir. Bu sayede kullanıcılar daha kolay ve hızlı bir şekilde formları doldurabilir.
3. Çoklu Ortam Desteği:
Html5, resim ve video içeriği konusunda daha esnek bir yapı sunar. <video> ve <audio> etiketleri sayesinde web sitelerine kolayca medya içeriği ekleyebiliriz. Ayrıca, video ve ses dosyalarının oynatılma hızını kontrol etmek, ses düzeyini ayarlamak gibi özellikler de Html5 ile mümkün hale gelir.
| Yeni Etiketler | Form İyleştirmeleri | Çoklu Ortam Desteği |
|---|---|---|
|
|
|
Responsive Tasarım Ve Html
İnternetin yaygınlaşmasıyla birlikte mobil cihaz kullanımı da hızla artmaktadır. Bu nedenle, web sitelerinin sadece masaüstü bilgisayarlarda değil, mobil cihazlarda da iyi görüntülenmesi önemlidir. İşte bu noktada responsive tasarım ve HTML devreye girer.
Responsive tasarım, web sitesinin farklı ekran boyutlarına ve cihazlara uyum sağlayabilmesini sağlayan bir yaklaşımdır. Bu sayede, kullanıcılar web sitenizi hem masaüstü bilgisayarlarda hem de mobil cihazlarda rahatlıkla kullanabilirler. Responsive tasarımın temel amacı, kullanıcı deneyimini optimize etmek ve sitenin erişilebilirliğini artırmaktır.
Responsive tasarım için HTML’in önemli bir rolü vardır. HTML, içerik yapısını belirlemek için kullanılan bir işaret dilidir. Web siteleri HTML etiketleri aracılığıyla oluşturulur ve düzenlenir. Responsive tasarımın temeli olan @media kuralı da HTML etiketleri ve CSS ile birlikte kullanılır.
HTML etiketleri, web sitelerinin yapısını belirlemek için kullanılan etiketlerdir. Bir web sayfası
| Etiket | Açıklama |
|---|---|
| <li> | Sıralı veya sırasız bir liste elemanını temsil eder. |
| <table> | Tablo oluşturmak için kullanılır. |
Bu örnekte, HTML etiketlerini kullanarak listeler ve tablolar oluşturulabilir. <li> etiketi sıralı veya sırasız bir liste oluştururken, <table> etiketi tabloları oluşturmak için kullanılır.
Sık Sorulan Sorular
Html Nedir?
Html, Web sayfaları oluşturmak ve düzenlemek için kullanılan bir işaretleme dilidir.
Temel Html Etiketleri nelerdir?
Html için temel etiketler,
,