HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni

Html Nedir?  Tarayıcılarda görünen internet dokümanlarını yaratmaya yarayan işaretleme dillerinden biridir. Bu diller Web sayfası oluştururken kullanılır. NOT: En sık tercih edilen İ nternet Tarayıcıları Google Chrome Tarayıcısı İ nternet Explorer Tarayıcısı Mozilla Firefox Tarayıcısı Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

Kayna ğ ı Görüntülemek  Her hangi bir internet sitesi açıkken, sayfada boş bir yere tıklayıp, açılan menüden kaynağı görüntüle seçildiğinde sayfanın kodlarına (sınırlı ölçüde) ulaşılabilir. Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

HTML belgeleri oluşturmak  HTML dokümanları bir yazı editörü ile (wordpad, notdefteri, word gibi) düzenlenip *.htm, *.html, *.shtml gibi uzantılarla kaydedilir. Not DefteriWordpad

*.html uzantılı bir belge kaydetme  Önce kodlar “not defteri” programında yazılır.  Dosya menüsünden “Farklı Kaydet” seçilir. “Kaydet” seçeneğiyle bir metin dosyası kaydedilirken (uzantısı *.txt), “Farklı Kaydet” ile bir web sayfası uzantısı (*.htm, *.html, *.shtml) belirlenebilir.  Açılan pencereden belgenin kayıt türü, kayıt yeri ve dosya adı belirlenir. ResimMüzikWordVideoNot DefteriWeb Jpg, gif, bmp mp3docAvi, mpegtxtHtml, htm, shtml Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

Dosya---Farklı Kaydet Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

Dosya adı ve kayıt türü

Kaydedilen Belgelerin Simgeleri

Temel HTML Etiketleri  Her etiket <> işaretleri arasına yazılır.  Her etiket <> işaretiyle başlar ve sonlanırken işareti kullanılır.  Örnek: … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

Temel HTML Etiketleri ve ve Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

a. Belgeye bu etiketle (kod) başlanır. Tüm etiketler bu kodun içine yazılır. b. Html belgeleri iki kısımdan oluşur. Baş Gövde 1- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

1- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

a. Html belgeleri iki kısımdan oluşur. 1. Baş 2. Gövde b. Head kısmında etiketi bulunur c. Body kısmında sayfanın içeri ğ inde gözükecek (yazı resim, tablo vb) ne varsa tümü bulunur. 2- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

2- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

etiketi, head kısmında bulunur. Başlık çubu ğ unda ne yazaca ğ ını belirler. 3- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

3- …

Başlık Çubu ğ u kısmı boş oldu ğ u için sayfa da boştur. Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

a. Html belgeleri iki kısımdan oluşur. 1. Baş 2. Gövde b. Body kısmında sayfanın içeri ğ inde gözükecek (yazı resim, tablo vb) ne varsa tümü bulunur. 4- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

4- …

etiketi, body kısmında bulunur. Yazının kalın yazılmasını sa ğ lar. 5- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

5- …

etiketi, body kısmında bulunur. Yazının italik (sa ğ a e ğ ik)yazılmasını sa ğ lar. 6- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

6- …

Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

etiketi, body kısmında bulunur. Yazının altıçizili yazılmasını sa ğ lar. 7- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

7- …

Etiketler bir arada kullanılabilir. Örnek: Bir yazının hem kalın, hem italik, hem altıçizili yazılması sa ğ lanabilir. Etiketleri kapatırken içten başlayan bir sıra uygulanır. …………. Birlikte Kullanma Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

Birlikte Kullanma Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

Birlikte Kullanma

Yazının rengini belirler. E ğ er kullanılan etikette bir de ğ er belirtmek gerekiyorsa kodun ardından = yazılır ve verilecek de ğ er çift tırnak “ ” işaretlerinin arasına yazılır. De ğ erler bir renk, bir sayı hatta bir internet adresi olabilir. Örnek: ……….. 8- Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

8-

Yazının boyutunu belirler. E ğ er kullanılan etikette bir de ğ er belirtmek gerekiyorsa, kodun ardından = yazılır ve verilecek de ğ er çift tırnak “ ” işaretlerinin arasına yazılır. De ğ erler bir renk, bir sayı hatta bir internet adresi olabilir. Örnek: ……….. 9-

Yazının tipini belirler. E ğ er kullanılan etikette bir de ğ er belirtmek gerekiyorsa, kodun ardından = yazılır ve verilecek de ğ er çift tırnak “ ” işaretlerinin arasına yazılır. De ğ erler bir renk, bir sayı hatta bir internet adresi olabilir. Örnek: ….. 10-

Paragraf belirler. Paragrafları özellikle biçimsel de ğ işikliklerin farklı olmasını istedi ğ imiz zamanlar kullanırız. 11- Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

paragraf etiketi align ile beraber kullanılınca yazının hizalamasını belirler. Center left right (sol-sa ğ -orta) de ğ erleri bulunur E ğ er kullanılan etikette bir de ğ er belirtmek gerekiyorsa, kodun ardından = yazılır ve verilecek de ğ er çift tırnak “ ” işaretlerinin arasına yazılır. Örnek: 11-

Font face Font color Font size Kodlarının, tek bir …… etiketi arasına yazıldı ğ ına dikkat ediniz.

11-

bir satır boşluk vermek için kullanılır. 12- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

12- … Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

12- …

12- … kullanılmayan

sayfanın arka plan rengini belirlemek için kullanılır. E ğ er kullanılan etikette bir de ğ er belirtmek gerekiyorsa, kodun ardından = yazılır ve verilecek de ğ er çift tırnak “ ” işaretlerinin arasına yazılır. Örnek: 13- Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

13-

sayfaya resim ekler. Resmin yolu tam olarak belirtilmelidir. Örnek: 14- Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

14- Resmin bulundu ğ u yerin tam adresi yazılmalıdır. Resmin adının yanı-sıra uzantısı da belirtilmelidir. Resim belgesini, html belgenizin bulundu ğ u yere kaydetmeyi alışkanlık edinin.

14-

sayfaya köprü(link) ekler. Bir yazıya ya da resme köprü ekleyebilirsiniz. Eklenen yazı ya da resmin önüne bu etiket eklenir. Adresi yazarken eklenmelidir. Örnek: 15- Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

15- Ba ğ lantının tam adresi yazılmalıdır. ( ile birlikte) Resimden ya da bir metinden köprü kurulabilir

15-

Bağlantının tam adresi yazılmalıdır. ( ile birlikte) Resimden ya da bir metinden köprü kurulabilir

15-

Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

15- hem resimden hem de resme köprü ekledik yazısından önce olduğu için hem resme hem de yazıya bağlantı eklenmiştir.

sayfanın arkaplanına resim ekler. Eklenen resim sayfa boyunca döşenir. Resmin tam yolu yazılmalıdır. Örnek: 16-

Arkaplana eklenen resim döşenir. (yani tüm sayfa dolana kadar tekrar tekrar kullanılır)

16-

Bu etiketi siz deneyin…. 17- …… Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni