HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I Bilişim Teknolojileri Ö ğ retmeni.

... konulu sunumlar: "HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I Bilişim Teknolojileri Ö ğ retmeni."— Sunum transkripti:

1 HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I 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ı Ayşe AK İ DA Ğ I: 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.

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

8 Dosya---Farklı Kaydet

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: …

12 Temel HTML Etiketleri 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. ve ve 12. 13. 14. 15. 16. 17.

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

16

17 etiketi, head kısmında bulunur. Başlık çubu ğ unda ne yazaca ğ ını belirler. 3- …

18

19 Başlık Çubu ğ u kısmı boş oldu ğ u için sayfa da boştur.

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

21

22

23

24 etiketi, body kısmında bulunur. Yazının kalın yazılmasını sa ğ lar. 5- …

25

26

27 etiketi, body kısmında bulunur. Yazının italik (sa ğ a e ğ ik)yazılmasını sa ğ lar. 6- …

28

29

30 etiketi, body kısmında bulunur. Yazının altıçizili yazılmasını sa ğ lar. 7- …

31

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

34

35

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-

37

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-

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

51

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-

54

55

56 sayfaya resim ekler. Resmin yolu tam olarak belirtilmelidir. Örnek: 14-

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

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

65 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 Etiket içine yazılan yazıyı büyük boyutta görüntüler. 17- ……