HTML örnekleri hakkında genel bir bakış sunan bir makaleye hoş geldiniz.
Temel HTML Etiketleri
HTML belgeleri oluşturmanın temel öğelerine bir göz atacak olursak, içeriklerimizi birçok farklı etiket kullanarak biçimlendirebilir ve düzenleyebiliriz. Bu etiketler sayesinde web sayfalarımızın yapısı ve görüntüsü kontrol altında tutulur.
Bu temel etiketlerin başında <html> etiketi gelir. Bu etiket, belgenin HTML olduğunu belirtir ve tüm HTML etiketlerini içeren bir konteyner oluşturur. Herhangi bir HTML belgesinde bu etiket bulunmalıdır.
Bir başka temel etiket ise <head> etiketidir. Bu etiket, belgenin başlığını temsil eder ve içerisinde sayfanın meta verilerini, CSS bağlantılarını, stil bilgilerini ve dosya bağlantılarını içerebilir.
HTML belgelerinde gövde kısmını temsil etmek için kullanılan etiket ise <body> etiketidir. Bu etiket, web sayfamızın görünen içeriğini içerir ve tüm içerik etiketlerini bu etiketin içinde kullanırız.
Diğer bir önemli etiket de <p> etiketidir. Bu etiket, yeni bir paragraf oluşturmak için kullanılır. Paragraf etiketi içine istediğimiz metni ekleyerek sayfamızdaki yazıları düzenleyebiliriz.
Tablolar oluşturmak istediğimizde ise <table> etiketini kullanırız. Bu etiketin içine <tr> etiketiyle satırları ve <td> etiketiyle hücreleri ekleriz.
Bu örneklerin yanı sıra, listeler oluşturmak için <ul> etiketini kullanabiliriz. Bu etiketin içine sırasız bir liste oluşturmak için <li> etiketleriyle listelemeler ekleriz.
HTML Biçimlendirme
=Metinleri, başlıkları, paragrafları ve diğer içerikleri nasıl biçimlendireceğinizi öğrenin.
HTML, metinleri biçimlendirmek için çeşitli etiketleri kullanır. Bu sayede metinlerinize kalın, eğik ya da altı çizili gibi farklı stiller verebilirsiniz.
Ayrıca başlıklar, paragraflar ve diğer içerikler için de biçimlendirme işlemleri yapabilirsiniz.
Örneğin, h1 etiketi bir başlık için kullanılırken, p etiketi ise bir paragrafı temsil eder.
Bir metni kalınlaştırmak için strong etiketini kullanabilirsiniz:
| Kod | Sonuç |
|---|---|
| <strong>Bu metin kalınlaştı</strong> | Bu metin kalınlaştı |
Eğer bir metni eğik yapmak isterseniz italic etiketini kullanabilirsiniz:
| Kod | Sonuç |
|---|---|
| <i>Bu metin eğik</i> | Bu metin eğik |
Bir metne altı çizgi eklemek için underline etiketini kullanabilirsiniz:
| Kod | Sonuç |
|---|---|
| <u>Bu metin altı çizili</u> | Bu metin altı çizili |
Ayrıca, metinlerinizi renklerle de biçimlendirebilirsiniz. Bunun için style özelliğini kullanabilirsiniz.
Örneğin, bir metni kırmızı renkli yapmak için şu şekilde bir kod kullanabilirsiniz:
| Kod | Sonuç |
|---|---|
| <p style="color: red;">Bu metin kırmızı renkte</p> |
Bu metin kırmızı renkte |
HTML biçimlendirme etiketleri sayesinde metinlerinizi istediğiniz gibi düzenleyebilir ve görsel olarak daha çekici hale getirebilirsiniz.
Metin Biçimlendirme
=Kalın, eğik, altı çizili ve geçişli metin örneklerine göz atın.
Kalın metin: HTML etiketleri kullanılarak metinlere vurgu yapabilirsiniz. Mesela, bu cümle kalın bir şekilde gösterilebilir.
Eğik metin: İstediğiniz metni eğik yazmak için i etiketini kullanabilirsiniz. Örneğin, bu yazı eğik olarak gösterilebilir.
Altı çizili metin: Altı çizili metni vurgulamak için u etiketini kullanabilirsiniz. Örneğin, bu kısım altı çizili olarak gösterilebilir.
Geçişli metin: Geçişli metinler dikkat çekmek için kullanışlıdır. Birçok insan bu metin biçimlendirmeyi kullanır. Örneğin, bu paragrafı geçişli olarak gösterelim.
Daha fazla metin biçimlendirme örneği keşfetmek isterseniz buraya tıklayarak ilgili kaynağa ulaşabilirsiniz.
Alt Başlık1
=Metin biçimlendirme ile ilgili alt başlık içeriğinin tanıtımını yapın.
Metin biçimlendirme, HTML belgelerinde metinleri görsel olarak daha çekici hale getirmek için kullanılan önemli bir özelliktir. HTML etiketleri ve stillerini kullanarak metinleri kalınlaştırabilir, eğikleştirebilir, altı çizebilir ve geçişli hale getirebiliriz.
Bununla birlikte, metin biçimlendirmede aşırıya kaçmak da önemlidir. Metni fazla vurgulamak, okuyucunun dikkatini dağıtabilir ve metni karmaşık hale getirebilir. Bu nedenle, metin biçimlendirmede dengeli bir yaklaşım benimsemek önemlidir.
HTML etiketlerini kullanarak metin biçimlendirme yaparken, <b> veya <strong> etiketlerini kullanarak metni kalınlaştırabiliriz. <i> veya <em> etiketlerini kullanarak metni eğikleştirebiliriz. <u> etiketiyle metni altı çizili hale getirebiliriz. <s> veya <strike> etiketlerini kullanarak metni geçişli hale getirebiliriz.
Ayrıca, stil özelliklerini de kullanarak metin biçimlendirme yapabiliriz. Örneğin, kırmızı renkte bir metin oluşturmak için stil özelliğini kullanabiliriz. Veya, metni büyük bir boyutta gösterebiliriz.
Metin biçimlendirme, HTML belgelerinde dikkat çekici ve anlaşılır bir metin oluşturmanın önemli bir parçasıdır. Doğru etiketleri ve stilleri kullanarak, metinleri okuyucuların ilgisini çekmek ve mesajlarımızı net bir şekilde iletmek için güçlü bir araç haline getirebiliriz.
Alt Başlık2
Alt Başlık2
HTML ile metin biçimlendirmesi yaparken, farklı metin boyutları ve renkleri kullanarak metnin görünümünü özelleştirebilirsiniz. Bu, belgenizin daha çekici ve dikkat çekici olmasını sağlar.
Bir metnin boyutunu belirlemek için font-size özelliğini kullanabilirsiniz. Örneğin, <p style=”font-size: 20px;”>Bu metin büyük boyutta.</p> kodunu kullanarak metni büyük boyutta gösterebilirsiniz. Aynı şekilde, daha küçük boyutlarda metinler oluşturmak için <p style=”font-size: 12px;”>Bu metin küçük boyutta.</p> şeklinde bir kod kullanabilirsiniz.
Metnin rengini belirlemek için ise color özelliği kullanılır. Örneğin, <p style=”color: red;”>Bu metin kırmızı renkte.</p> kodunu kullanarak metni kırmızı renkte gösterebilirsiniz. Ayrıca, <p style=”color: #FF0000;”>Bu metin de kırmızı renkte.</p> şeklinde bir kod kullanarak HEX renk koduyla da belirli bir rengi seçebilirsiniz.
Bu örnekleri inceleyerek, farklı metin boyutları ve renkleri kullanarak nasıl metin biçimlendirmesi yapabileceğinizi görebilirsiniz. Böylece, belgenizin görünümünü istediğiniz şekilde özelleştirebilirsiniz.
Paragraf Biçimlendirme
Paragraf biçimlendirme, HTML belgelerinde metinleri düzenlemenin önemli bir bölümünü oluşturur. Bu özellikler sayesinde paragrafları hizalayabilir, satır aralığını ayarlayabilir ve kenar boşluklarını belirleyebilirsiniz. Böylece metinleriniz daha düzenli ve okunabilir hale gelir.
Hizalama, paragraflarınızı sola, sağa, ortaya veya her iki tarafa da hizalamanıza olanak tanır. Sol hizalama, genellikle kullanılan varsayılan hizalamadır ve metinlerin sol kenarına yaslanır. Sağ hizalama ise metinleri sağ kenara yaslar. Ortaya hizalama ise metinleri belgenin ortasına hizalar. Her iki tarafa hizalama ise metinleri belgenin her iki kenarına da yaslar.
Satır aralığı, paragraflar arasındaki boşluk miktarını belirler. Satır aralığını artırarak paragraflar arasındaki boşluk miktarını büyütebilirsiniz. Bu sayede metinler daha okunaklı hale gelir. Ayrıca, kenar boşluğunu belirleyerek paragraflarınızın belgedeki konumunu belirleyebilirsiniz.
Örnek olarak, aşağıda bir tablo üzerinde hizalama örnekleri verilmiştir:
| Hizalama | Kod |
|---|---|
| Sol Hizalama |
<p align="left">Bu bir sol hizalanmış paragraftır.</p> |
| Sağ Hizalama |
<p align="right">Bu bir sağ hizalanmış paragraftır.</p> |
| Ortaya Hizalama |
<p align="center">Bu bir ortaya hizalanmış paragraftır.</p> |
| Her İki Tarafa Hizalama |
<p align="justify">Bu bir her iki tarafa hizalanmış paragraftır.</p> |
Paragraf biçimlendirme sayesinde metinlerinizi istediğiniz gibi düzenleyebilir ve belgenizin tasarımını geliştirebilirsiniz.
Resim ve Linkler
=HTML’de resim ve bağlantı eklemek için kullanılan etiketlere bir göz atın.
HTML, web sayfalarınızı daha etkileyici hale getirmenizi sağlar. Resim ve bağlantı eklemek, sayfanızı daha ilgi çekici ve bilgilendirici hale getirmenin harika bir yoludur. Bu makalede, HTML’de resim ve bağlantı eklemek için kullanılan etiketleri bulabilirsiniz.
Resim Ekleme:
Sayfanıza resim eklemek için src özelliğini kullanır. Ayrıca, resmin boyutlarını ayarlamak için width ve height özelliklerini belirtebilirsiniz.
Bağlantılar:
HTML’de bağlantı eklemek için etiketini kullanabilirsiniz. Bu etiket, bağlantının metnini belirtmek için kullanılır ve href özelliği, bağlantının hedefini belirtmek için kullanılır. Ayrıca, bağlantının yeni bir pencerede açılmasını sağlamak için target özelliğini de kullanabilirsiniz.
Ayrıca, bağlantının alt metnini yani açıklamasını belirtmek için etiketini ve bağlantının başlığını