DERS 02 TEMEL HTML ETKETLER indekiler Metin Dzenleme
- Slides: 11
DERS 02 TEMEL HTML ETİKETLERİ
İçindekiler Metin Düzenleme Etiketleri Uygulama 1 Uygulama 2 Metin Biçimlendirme Etiketleri Uygulama 3 Unutmayalım Yararlı Bağlantılar ve Kaynakça
Metin Düzenleme Etiketleri HTML’de kullandığımız bazı metin düzenleme etiketleri ve görevleri aşağıda sıralanmıştır. Etiket (Tag) <h 1>, <h 2>, <h 3>, <h 4>, <h 5>, <h 6> Açıklaması Başlıkları belirtir. <h 1> en büyük başlık boyutudur. <p> Paragraf alanını belirtir. Bir alt satıra geçme işlemini gerçekleştirir. <hr> Sayfada yatay bir çizgi çeker. B İ L G İ ve <hr> etiketlerinde kapatma etiketi kullanılmaz. 2
Metin Düzenleme Etiketleri Tablodaki HTML kodu Ekran Çıktısı örnekleri inceleyin. <h 1>Bu başlık 1</h 1> <h 2>Bu başlık 2</h 2> <h 3>Bu başlık 3</h 3> Bu bir paragraftır. <p>Bu bir paragraftır. </p> <p>Bu diğer bir paragraftır. </p> Bir alt satıra geçme işlemini gerçekleştirir. Bu diğer bir paragraftır. Bir alt satıra geçme işlemini gerçekleştirir. İki yazı arasında <hr> yatay çizgi var 2
Uygulamalar 1. UYGULAMA Az önce öğrendiğimiz etiketleri ve özellikleri kullanarak yanda ekran görüntüsü verilmiş siteyi hazırlayınız. 3
Uygulamalar 2. UYGULAMA Yan tarafta ekran görüntüsü verilmiş siteyi hazırlayınız. 4
Metin Biçimlendirme Etiketleri HTML’de kullandığımız bazı temel biçimlendirme etiketleri ve görevleri tabloda sıralanmıştır. Etiket (Tag) Açıklaması <b> <strong> <i> Kalın yazı oluşturmak için kullanılır. Güçlü yazı oluşturmak için kullanılır. <b> ile aynı işi yapar. Metni eğik hale getirir. <em> Metni eğik hale getirir. <i> ile aynı görevi görür. <ins> Altı çizili yazı <del> Metnin üstünü çizer. <mark> Metnin üzerine renkli vurgu uygular. <sub> Metnin alt kısmına indis ekler. ( H 20 ) vb. gibi <sup> Metnin üst kısmına indis ekler. (a 2 + b 2 = c 2) vb. gibi 5
Metin Biçimlendirme Etiketleri Tablodaki HTML kodu örnekleri Ekran Çıktısı <!DOCTYPE html> <body> inceleyin. <b> bu yazı kalın </b> <strong> bu yazı da kalın </strong> <i> bu yazı italik </i> <em> bu yazı da italik </em> <ins> bu yazının altını çizdik </ins> <del> bu yazının üstünü çizdik </del> bu yazıda <mark> vurgu var </mark> bu yazıda alt<sub>indis</sub> bu yazıda ise üst<sup>indis</sup> </body> </html> B İ L G İ etiketini her satırda bir alt satıra inmek için kullandığımıza dikkat edin. 2
Uygulamalar 3. UYGULAMA Bir önceki uygulamada hazırladığımız şiirin her mısrasına az önce incelediğimiz etiket araçlarını kullanarak yandaki web sitesini hazırlayın. 3
Unutmayalım Temel HTML Etiketleri ve Anlamları <html> <head> Bu etiket diğer tüm etiketleri sarmalayan html Site Başlığı, Sayfa tanımları, CSS ve Java. Script <html> dosyaları bu bölüme eklenir. Bu kısımdaki diliyle kodlama yapılacağını belirten, sayfanın başında açılıp sonunda kapatılan bir etikettir. bilgiler tarayıcıda görüntülenmez. </head> Hazırladığımız sayfa ile ilgili bilgiler ve <body> <head> tanımlamaların yer aldığı bloktur. Bu kısımdaki kodlar web sayfasında görüntülenmezler. Sayfayı oluşturacak tüm bilgiler bu kısımda tanımlanır. </body> </html> Bu etiket ziyaretçinin görebildiği, sayfanın tüm <body> içeriğinin yer aldığı bölümdür. Kullanılacak etiketlerin bir çoğu body etiketinin içerisinde yer alır. 10
Yararlı Bağlantılar ve Kaynakça Bu sununun içeriğinde faydalandığım kaynakları yandaki bağlantılardan inceleyerek ek uygulamalara ve bilgilere ulaşabilir http: //kod 5. org/html 5 -nedir/ https: //www. w 3 schools. com http: //www. htmldersleri. org/index. php? getir=html 5_intro&ID=29 http: //zinzinzibidi. com/web_tasarim/html 5/temel_html 5_dersleri kendinizi daha çok geliştirebilirsiniz. Diğer dersimizde görüşmek üzere. 11