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

... konulu sunumlar: "HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni."— Sunum transkripti:

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

2 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

3 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

4

5

6 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

7 *.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

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

9 Dosya adı ve kayıt türü

10 Kaydedilen Belgelerin Simgeleri

11 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

12 Temel HTML Etiketleri 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. ve ve 12. 13. 14. 15. 16. 17. Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

13 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

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

15 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

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

17 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

18 3- …

19 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

20 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

21 4- …

22

23

24 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

25 5- …

26

27 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

28 6- …

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

30 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

31 7- …

32

33 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

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

35 Birlikte Kullanma

36 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

37 8-

38

39 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-

40

41

42 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-

43

44

45 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

46 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-

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

48 11-

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

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

51 12- …

52 12- … kullanılmayan

53 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

54 13-

55

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

57 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.

58 14-

59 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 http:// eklenmelidir. Örnek: 15- Burcu Yılmaz - İ brahim Mert: Bilişim Teknolojileri Ö ğ retmeni

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

61 15-

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

63 15-

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

65 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.

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

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

68 16-

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