Yayınlar

HTML Dersleri etiketine sahip yayınlar gösteriliyor

Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

HTML Linkler

Resim
« Önceki Ders Sonraki Ders » HTML Linkler (Web Bağlantıları)Linkler, yani bağlantılar, tüm web sayfalarında vardır. Linkler aynı web sitesinin farklı sayfalarına yönlendirilebileceği gibi farklı web sitelerinin sayfalarına da yönlendirilebilir.HTML linki, bir web bağlantısıdır (hyperlink).Web bağlantıları bir metin olabileceği gibi, bir resim de olabilir. Metin görünümündeki web bağlantısı tıklanabilir bir metni ifade ederken, resim üzerine eklenen web bağlantısı ise tıklanabilir bir resmi ifade eder.HTML belgelerinde linkler yani bağlantılar <a> etiketi ile tanımlanır:<a href="sayfa linki">bağlantı metni</a>
Örnek
<a href="html-giris.html">HTML Dersleri sayfamızı ziyaret edin</a> Kendiniz deneyin »
href özelliği ile bağlantı yapılacak adres belirtilir (http://htmlvecssegitimi.blogspot.com/2016/01/html-link-verme-ornek.html)bağlantı metni alanı görünen kısımdır (HTML ve CSS öğrenmek için bizi ziyaret edin.)Bağlantı metnine tık…

HTML Resimler

Resim
HTML Resimler <img> EtiketiHTML'de resimler <img> etiketi ile gösterilir.<img> etiketi boş etiket olarak tanımlanır, yani kapanış etiketi yoktur ve sadece özellikler (parametreler) içerir.src özelliği resmin URL'sini (web adresini) belirtir. alt özelliği ise, resmin görüntülenmediği durumlar için alternatif metni tanımlar:<img src="URL" alt="alternatif metin">
Örnek
<!DOCTYPE html> <html> <body> <h2>HTML Resimler - Örnek</h2> <img src="cennet_papagani.jpg" alt="Papagan" width="150px" height="150px"> </body> </html> Kendiniz deneyin » Resimlerin yükseklik ve genişlik değerlerini her zaman belirtin. Yükseklik ve genişlik değerleri belirtilmediğinde, resim yüklenirken sayfada titreşimler oluşur.alt Özelliğialt özelliği resmin görüntülenmediği, zayıf bağlantı, src özelliğindeki bir hata, veya ekran okuyucu kullanımı gibi durumlar için tan…

HTML CSS

Resim
« Önceki Ders Sonraki Ders » CSS ile yapabilecekleriniz! CSS ile Yazıları | RENKLERİ Kutuları Manipüle edin! HTML'e CSS ile Stil AtamaCSS (Cascading Style Sheets) Basamaklı Stil Sayfaları anlamına gelir.HTML öğelerine stil atama işlemi 3 yolla yapılabilir.Satıriçi CSS (inline) - HTML etiketleri içerisinde style özelliği kullanarakBelgeiçi CSS (internal) - HTML belgesinin <head> kısmında <style> öğesini kullanarakHarici CSS (external) - Dış bir kaynaktan çekilen Harici CSS dosyaları kullanarakStil atamada kullanılan en yaygın yöntem stilleri harici kaynaklı CSS dosyalarında tutmaktır. Biz ise örneklerimizde hem sunumu kolay olduğu için hem de sizin örnekleri kolayca deneyebilmeniz ve isteğinize göre değişiklikler uygulayabilmeniz için Belgeiçi Stilleri kullanıyoruz.Not: CSS ile ilgili daha fazla bilgi ve örneği CSS Dersleri sayfamızda bulabilirsinizSatıriçi Stil Atama (Inline CSS)Satıriçi stil atama tek bir HTML öğesine stil vermek için kullanılır.Satıriçi stil biç…

HTML Yorumlar

Resim
« Önceki Ders Sonraki Ders » HTML Yorum EtiketleriHTML belgelerine yorum eklemek için <!-- ve -->yorum etiketleri kullanılır.Aşağıdaki örnek HTML belgesine ekleyebileceğiniz bir yorumu, açıklamayı temsil ediyor. <!-- Açıklamanızı yorum etiketleri arasına yazın -->
Not: Yorum etiketlerinin açılış etiketinde ünlem işareti (!) vardır, ama kapanış etiketinde yoktur.Yorumlar tarayıcılar tarafından görüntülenmezler ama özellikle fazla kaynak kodu olan HTML belgeleri için, belgenin ilgili kısımlarına notlar ya da açıklamalar eklemek oldukça faydalıdır. İleride kaynak kodlarınız üzerinde yeni düzenlemeler yapmak istediğinizde HTML yorumları düzenleme yapılacak alana kolayca ulaşabilmenize yardımcı olur.HTML Yorumları ile bildirim ve hatırlatıcılar ekleyebilirsiniz.Örnek
<!-- Hakkımda sayfası içeriği -->

<p>Bir paragraf.....</p>

<!-- Buraya daha fazla bilgi girmeyi unutma! --> Kendiniz deneyin » HTML yorumlarını HTML belgenizde henüz görüntülenmesini isteme…

HTML Bilgisayar Kodları

« Önceki Ders Sonraki Ders » Bir bilgisayar kodu öğesi
<code>
var x = 4;
var y = 7;
document.getElementById("demo").innerHTML = x + y;
</code> HTML Bilgisayar Kodlarını BiçimlendirmeHTML belgeleri normalde değişken harf boyutu ve aralığı kullanır. Fakat bilgisayar kodu örnekleri gibi öğelerin görüntülenmesinde bu tercih edilmez.Görsel olarak farkedilebilmeleri ve arama motorlarına bu örneklerin ne olduğunun bildirilebilmeleri için, varsayılan metin boyutu, stili ve karakter aralığından farklı olmaları gerekir.Bu yüzden <kbd>, <samp> ve <code> gibi bilgisayar kodu örnekleri sabit karakter boyutu ve aralığındadır.Klavye Girişi için HTML <kbd> EtiketiHTML <kbd> etiketi klavye girişini tanımlar.Örnek
<p><kbd>Dosya | Aç...</kbd></p>
Sonuç:
Dosya | Aç... Kendiniz deneyin » Bilgisayar Çıktısı için HTML <samp> EtiketiHTML <samp> etiketi bir bilgisayar programının örnek çıktısını tanımlar.Örnek
<samp>

HTML Alıntı ve Kaynak Elementleri

« Önceki Ders Sonraki Ders » Alıntı
Mevlana'dan bir alıntı:Bencillik göze takılan ayna gibidir. O gözler nereye bakarsa baksın kendinden başka birini görmez. Kısa alıntılar için <q> EtiketiHTML <q> etiketi kısa alıntıyı tanımlar.Tarayıcılar <q> etiketi içerisine girilen metni tırnak işareti içerisine alır.Örnek
<p>Harlan Coben'in Kapan adlı eserinden: <q>Gün geçmiş ve daha çok şey öğrenmiş olsak da, aynı hataları tekrarlamak insanların dna'larında var.</q></p> Kendiniz deneyin » Uzun alıntılar için <blockquote> EtiketiHTML <blockquote> etiketi alıntılanmış kısmı tanımlar ve uzun alıntılar için kullanılır.Tarayıcılar <blockquote> öğelerini girintileyerek gösterir.Örnek
<p>UNICEF internet sitesinden bir alıntı:</p>
<blockquote>
Birleşmiş Milletler Çocuk Fonu UNICEF, dünyada çocuk haklarının başlıca savunucusudur. Hükümetlerle çalışarak kalıcı sonuçlar elde eden bir örgüttür. Bütün çocukların bedensel,…

HTML Giriş

Resim
« Önceki Ders Sonraki Ders » HTML Nedir?HTML internet sayfalarını tanımlamaya yarayan bir işaretleme dilidir.HTML'nin açılımı Hyper Text Markup Language, yani Hiper Metin İşaretleme Dili'dir.İşaretleme dilleri bir dizi işaretleme etiketinden oluşur.HTML belgeleri, HTML Etiketleri kullanılarak tanımlanırlar.Her bir HTML etiketi farklı bir belge içeriğini tanımlar.HTML etiketleri açılı parantezler arasında yer alır.HTML ÖrneğiBasit bir HTML belgesi:
<!DOCTYPE HTML>
<html>

<head>
  <title>Belge Başlığı</title>
</head>

<body>
  <h1>İçerik Başlığım</h1>
  <p>İlk paragrafım.....</p>
</body>

</html> Kendiniz deneyin » "Kendiniz deneyin" butonunu kullanarak nasıl çalıştığını görün.
Yukarıda örneğini verdiğimiz HTML belgesinin öğelerini inceleyelimDOCTYPE Bildirimi belgenin HTML olması için belge türünü tanımlar.<html> ve </html> etiketleri arasındaki metin HTML belgesidir.<head> ve

HTML Metin Biçimlendirme Etiketleri

Resim
« Önceki Ders Sonraki Ders » Metin Biçimlendirme Örnek
<p>Bu bir <b>kalın</b> metin</p>
<p>Bu bir <i>italik</i> metin</p>
<p>Bu bir <em>vurgulanmış italik</em> metin</p>
<p>Bu bir <small>daha küçük puntolu</small> metin</p>
<p>Bu bir <strong>önemli</strong> metin</p>
<p>Bu bir <sub>altsimge</sub> metni</p>
<p>Bu bir <sup>üstsimge</sup> metni</p>
<p>Bu bir <ins>yeni eklenmiş</ins> metin</p>
<p>Bu bir <del>içerikten silinmiş, çıkarılmış</del> metin</p>
<p>Bu bir <mark>öne çıkarılmış</mark> metin</p> Kendiniz deneyin » HTML Biçimlendirme ElementleriBir önceki derste HTML style özelliği kullanarak HTML stil atama hakkında bilgi sahibi olduk.HTML özel anlamları ve kullanım alanları olan özel eleme…

HTML Paragraflar

Resim
« Önceki Ders Sonraki Ders » HTML ParagraflarıHTML <p> elementi bir paragrafı tanımlar.Tarayıcılar her bir paragraftan önce ve sonra otomatik olarak bir satır boşluk eklerler.Örnek <p>Bu bir paragraf.....</p>
<p>Bu da diğer paragraf.....</p> Kendiniz deneyin » HTML Belge GörüntülemesiHTML belgelerinin nasıl görüntüleneceklerini kestiremeyebilirsiniz. Büyük ya da küçük ekranlar veya ölçeklendirilmiş pencereler farklı görüntüleme sonuçları ortaya çıkarabilir.HTML belgesi içerisinde ekstra boşluklar ya da satırlar ekleyerek tarayıcıda görüntülenecek çıktıyı değiştiremezsiniz. Tarayıcı fazladan boşlukları ve boş satırları sayfa gösterilirken görmezden gelecektir. HTML belgesi içerisinde oluşturulacak her boşluk ve satır atlama sadece tek bir boşluk olarak görüntülenecektir.Örnek <p>
Bu paragraf
kaynak kodunda
birkaç satır içeriyor,
ama tarayıcı
bunu gözardı ediyor.
</p>

<p>
Bu paragraf
kaynak kodunda       bir         sürü
     boşluk içeriyo…