Kayıtlar

Aralık, 2015 tarihine ait yayınlar gösteriliyor

HTML CSS

Resim
« Önceki Ders Sonraki Ders » CSS ile yapabilecekleriniz! CSS ile Yazıları | R E N K L E R İ Kutuları Manipüle edin! HTML'e CSS ile Stil Atama CSS ( C ascading S tyle S heets) 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 kullanarak Belgeiçi CSS (internal) - HTML belgesinin <head> kısmında <style> öğesini kullanarak Harici CSS (external) - Dış bir kaynaktan çekilen Harici CSS dosyaları kullanarak Stil 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 bul

HTML Yorumlar

Resim
« Önceki Ders Sonraki Ders » HTML Yorum Etiketleri HTML 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

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çimlendirme HTML 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> Etiketi HTML <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> Etiketi HTML <samp> etiketi bir bilgisayar

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> Etiketi HTML <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> Etiketi HTML <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

HTML address Etiketi Örnek

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html><body> <p>HTML <address> etiketi belgenin ya da makalenin yazarının veya sahibinin iletişim bilgilerini tanımlar.</p> <address>Kurum/Şahıs Bilgisi<br/>Örnek Mh.<br/>35. Cad.<br/>46. Sok.<br/>No: 21<br/>Ankara / Türkiye </address> </body></html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

HTML abbr Etiketi Örnek

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html><body> <p><abbr title="Türkiye Büyük Millet Meclisi">TBMM</abbr> 23 Nisan 1920'de açılmıştır.</p> </body></html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

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ı H yper T ext M arkup L anguage, 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ği Basit 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 inceleyelim DOCTYPE Bildirimi belgenin HTML olması için belge türünü tanımlar. <html> ve </html> etiketleri ara

Basit Bir HTML Belgesi Örnek

<!DOCTYPE HTML> <html> <head> <title>Belge Başlığı</title> </head> <body> <h1>İçerik Başlığım</h1> <p>İlk paragrafım.....</p> </body> </html>

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 Elementleri Bir önceki derste HTML style özelliği kullanarak HTML stil atama hakkında bilgi sahibi olduk. HTML özel anlamları ve kullanım

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ülemesi HTML 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        

HTML Başlıklar

« Önceki Ders Sonraki Ders » HTML Başlık Etiketleri HTML belgelerinde başlıklar önemlidir. Belge başlıkları <h1> den <h6> ya kadar olan başlık etiketleriyle tanımlanır. <h1> en önemli başlığı, <h6> ise en az önemli olan başlığı ifade eder. Not: Tarayıcılar başlıklardan önce ve sonra otomatik olarak biraz boşluk bırakırlar. Örnek <h1>HTML Başlık Etiketleri</h1> <h2>HTML Başlık Etiketleri</h2> <h3>HTML Başlık Etiketleri</h3> <h4>HTML Başlık Etiketleri</h4> <h5>HTML Başlık Etiketleri</h5> <h6>HTML Başlık Etiketleri</h6> Kendiniz deneyin » HTML başlıklarını sadece başlık olarak kullanın. Metni büyük veya kalın yazmak için başlık etiketlerini kullanmayın. Arama motorları web sayfalarınızın yapısını ve içeriğini indekslemek için içerik başlıklarınızı kullanır. Kullanıcılar ise sayfalarınızı başlıklarınıza bakarak gözden geçirirler. Bu yüzden belge yapısını göstermek için başlıkları kul

HTML Temel Belge Örnek

<!DOCTYPE html> <html> <body> <h1>İlk Başlığım</h1> <p>İlk Paragrafım......</p> </body> </html>

HTML Temel Paragraflar Örnek

<!DOCTYPE html> <html> <body> <p>Bu bir paragraf.......</p> <p>Diğer paragraf.......</p> </body> </html>

HTML Temel Başlıklar Örnek

<!DOCTYPE html> <html> <body> <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6> </body> </html>

HTML İçiçe Elementler Örnek

<!DOCTYPE html> <html> <body> <h1>İlk Başlığım</h1> <p>İlk paragrafım...</p> </body> </html>

HTML Temel Linkler Örnek

<!DOCTYPE html> <html> <body> <a href="http://htmlvecssegitimi.blogspot.com">Bu bir linktir</a> </body> </html>

HTML title Özelliği Örnek

<!DOCTYPE html> <html> <body> <h1>HTML</h1> <p title="HTML"> HTML (Hypertext Markup Language) web sayfaları oluşturmak için kullanılan standart metin işaretleme dilidir. </p> <p><b> Fare imlecini yukarıdaki paragrafın üzerine doğru getirdiğinizde title özelliğine girilen "HTML" değerini paragraf başlığı olarak göreceksiniz. </b></p> </body> </html>

HTML Elementler - Kapanış Etiketsiz Örnek

<!DOCTYPE html> <html> <body> <p>İlk paragraf..... <p>Diğer paragraf..... </body> </html>

HTML Temel Resimler Örnek

<!DOCTYPE html> <html> <body> <img src="http://2.bp.blogspot.com/-GxgBQDz7RFA/Vkn6nmQCsFI/AAAAAAAAAuw/1JV0_jn1GqU/s1600/HTML-CSS.png" alt="HTML CSS Eğitim" width="424" height="315"> </body> </html>

HTML title Özelliği Örnek 2

<!DOCTYPE html> <html> <body> <h1>HTML Nedir?</h1> <p title=Hypertext Markup Language> Hypertext Markup Language (HTML) web sayfaları oluşturmak için kullanılan standart metin işaretleme dilidir. </p> <p><b>Fare imlecini yukarıdaki paragrafın üzerine doğru getirdiğinizde title özelliğine girilen değerin sadece ilk kelimesini göreceksiniz.</b></p> </body> </html>

HTML href Özelliği Örnek 2

<!DOCTYPE html> <html> <body> <a href=http://htmlvecssegitimi.blogspot.com>Bu bir linktir</a> </body> </html>

HTML href Özelliği Örnek

<!DOCTYPE html> <html> <body> <a href="http://htmlvecssegitimi.blogspot.com">Bu bir linktir</a> </body> </html>

HTML hr Etiketi Örnek

<!DOCTYPE html> <html> <body> <h1>HTML hr Etiketi Örnek</h1> <p><b>hr etiketi yatay çizgiyi tanımlar:</b></p> <hr /> <p>Bu bir paragraf.......</p> <hr /> <p>Bu bir paragraf.......</p> <hr /> <p>Bu bir paragraf.......</p> </body> </html>

HTML Yazı Boyutu Örnek

<!DOCTYPE html> <html> <body> <h1 style="font-size:350%">% 350 Daha Büyük Puntolu H1 Başlığımız</h1> <p style="font-size:200%">% 200 daha büyük puntolu paragrafımız.....</p> </body> </html>

HTML Metni Hizalama Örnek

<!DOCTYPE html> <html> <body> <h1 style="text-align:center">Ortaya Hizalı Başlık</h1> <p style="text-align:left">Sola hizalı paragraf.....</p> <p style="text-align:center">Ortaya hizalı paragraf.....</p> <p style="text-align:right">Sağa hizalı paragraf.....</p> </body> </html>

HTML Başlık Etiketleri Örnek

<!DOCTYPE html> <html> <body> <h1>HTML Başlık Etiketleri</h1> <h2>HTML Başlık Etiketleri</h2> <h3>HTML Başlık Etiketleri</h3> <h4>HTML Başlık Etiketleri</h4> <h5>HTML Başlık Etiketleri</h5> <h6>HTML Başlık Etiketleri</h6> </body> </html>

HTML Arkaplan ve Yazı Rengi Değiştirme Örneği

<!DOCTYPE html> <body style="background-color:red"> <h1 style="color:white">Bu bir başlık</h1> <p style="color:white">Bu bir paragraf.....</p> </body> </html>

HTML Yazı Rengi Örnek

<!DOCTYPE html> <html> <body> <h1 style="color:crimson">Kızıl (crimson) Renkli Başlığımız </h1> <p style="color:blue">Mavi renkli paragrafımız.....</p> </body> </html>

HTML Yazı Tipleri Örnek

<!DOCTYPE html> <html> <body> <h1 style="font-family:impact">impact Yazı Tipli Başlığımız</h1> <p style="font-family:tahoma">tahoma yazı tipli paragrafımız.....</p> <p style="font-family:verdana">verdana yazı tipli paragrafımız.....</p> <p style="font-family:charcoal">charcoal yazı tipli paragrafımız.....</p> </body> </html>

HTML Renkli Paragraf Örnek

<!DOCTYPE html> <html> <body> <p style="color:red"> Kırmızı renkli paragraf...</p> <p style="color:green"> Yeşil renkli paragraf...</p> <p style="color:blue"> Mavi renkli paragraf...</p> </body> </html>

HTML pre Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcılar, pre Etiketi içerisindeki boşlukları da satırsonlarını da korur ve gösterir:</p> <pre> Gözlerim gözünde aşkı seçmiyor Onlardan kalbime sevda geçmiyor Ben yordum ruhumu biraz da sen yor Çünkü bence şimdi herkes gibisin. </pre> </body> </html>