Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama"

Özlem Tiryaki
8 yıl önce
İzleme sayısı:

1 Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

2 Word Dokümanı - Yapılandırma

3 Web Sayfası - Yapılandırma

4 What You See Is What You Get (WYSIWYG)

5 Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının yapısını tanımlamaya yarayan dildir.

6 HTML - Elemanlar ve Etiketler (Elements and Tags)

7 Etiketler - Açılış Etiketi (Opening Tag) küçüktür işareti karakter p: paragraf büyüktür işareti

8 Etiketler - Kapanış Etiketi (Closing Tag) ileri taksim işareti

9 Etiket Özellikleri (Tag Attributes) Özellik adı Özellik değeri

10 Basit bir HTML web sayfası (kod)

11 Basit bir HTML web sayfası (sonuç)

12 Windows'ta yeni web sayfası oluşturma (1) (1) Donatılar'dan Not Defteri uygulamasını açın.

13 Windows'ta yeni web sayfası oluşturma (2) (2) Not defterine HTML kodunu yazın.

14 Windows'ta yeni web sayfası oluşturma (3) (3) Dosya menüsünden "Farklı Kayder" i seçin (4) "Kayıt tipi" olarak tüm dosyaları seçin (5) ".html" uzantısını da yazarak dosyayı kaydedin.

15 Web sayfalarının kaynak kodunu görmek (1) Sayfaya sağ tıkla (2) Kaynağı göster (IE) veya Sayfa kaynağını göster (FF ve Chrome)

16 <HTML>, <HEAD> ve <TITLE> Etiketleri <html> Kapanış etiketine (</html>) kadar olan herşeyin html kodu olduğunu belirtir. <head> Web tarayıcısın ana sayfasında gösterilmeyen ve sayfa hakkındaki bilgileri içerir (örnek: sayfa başlığı). «body» etiketinden önce kullanılır. <title> Tarayıcının en üstündeki alanda ya da sayfanın kendi tabında gösterilir.

<head> Web tarayıcısın ana sayfasında gösterilmeyen ve sayfa hakkındaki bilgileri

17 <BODY> Etiketi <body> Web tarayıcısın ana sayfasında gösterilen herşey bu etiket içerisinde yer alır.

18 <TITLE> Örneği Title etiketi içeriği burada gösterilir

19 Başlıklar (Headings) <h1> <h2> <h3> <h4> <h5> <h6>

20 Paragraflar

21 <B> ve <STRONG> Etiketleri <b> ve <strong> görsel olarak aynı etkiye sahiptir. Farklı olarak, <strong> içerisindeki ifadeyi, arama motoru robotları (search engine bots) önemli bir bilgi olarak algılar.

22 <SUP> ve <SUB> Etiketleri Üst simge ve Alt simge

23 Boşluk Karakteri

24 HTML Karakter Kodları Karakter Desimal Kodu İsimlendirilmiş Giriş Açıklama " " " Çift Tırnak İşareti (Quotation mark) & & & VE İşareti (Ampersand) < < < Küçüktür (Less than) > > > Büyüktür (Greater than) [Kesintisiz] Boşluk (Nonbreaking space) veya &brkbar; Kesintili Dikey Çizgi (Broken vertical bar) Telif Hakkı (Copyright)

25 <BLOCKQUOTE> ve <Q> Etiketleri

26 <CITE> Etiketi - Alıntılar

27 <DFN> Etiketi - Tanımlama

28 <ADDRESS> Etiketi Yazar Erişim Bilgisi

29 <S> Etiketi Geçerliliğini Kaybetmiş Bilgi

30 <OL> ve <LI> Etiketleri Sıralı Listeler

31 <DL>, <DT> ve <DD> Etiketleri Tanım Listeleri

32 İçiçe Listeler

33 Örnek

34 Örnek Çözüm 1. bölüm

35 Örnek Çözüm - 2. bölüm

36 <A> Etiketi Bağlantılar (Links) Mutlak adresler (Absolute URL)

37 <A> Etiketi Bağlantılar (Links) Bağıl adresler (Relative URL)

38 Örnek En sevdiğiniz ya da en çok ziyaret ettiğiniz 3 web sitesine sıralı liste halinde başlantı içeren web sayfasını oluşturunuz.

39 Dizin İndeks Dosyaları (index.html veya index.htm) Web tarayıcısından biir dizine erişilmek istendiğinde, eğer varsa içeriği otomatik kullanıcıya gösterilen HTML dosyalarıdır.

40 Dizin Yapısı ve Bağıl Adresler (1) Aynı dizin: music dizininden reviews.html sayfasına erişmek için Alt dizin: Ana sayfadan music dizinindeki listelere (listings.html) erişmek için İki alt dizin: Ana sayfadan DVD incelemelerine (reviews.html) erişmek için

41 Dizin Yapısı ve Bağıl Adresler (2) Üst dizin: musik incelemeleri dizininden ana sayfaya erişmek için İki üst dizin: DVD incelemeleri dizininden ana sayfaya erişmek için

42 Bağlantıları mailto:

43 Bağlantıları Yeni Pencerede Açmak target

44 Aynı Sayfadaki Bir Alana Bağlantı Bu html dosyasını oluşturup test ediniz.

45 Başka Bir Sayfadaki Bir Alana Bağlantı <a href= web sitesinin "bottom" isimli alanına bağlantı sağlar.

46 <IMG> Etiketi İle İmge Eklemek (1)

47 <IMG> Etiketi İle İmge Eklemek (2) src: Resmin bulunduğu URL. alt: Resmin gösterilememesi durumunda, onun yerine gösterilecek yazı. title: Resim hakkında ekstra bilgi. Genellikle resmin üzerine fare getirildiğinde gösterilir.

48 Resmin Genişliğinin ve Yüksekliğinin Ayarlanması width/height: Piksel olarak resmin genişliği/yüksekliği Not: Resmin genişlik ve yüksekliğini belirlemek için genellikle CSS kullanılmaya başlanmıştır. Bunun nasıl yapılacağını ileride göreceğiz.

49 Farklı İmge Konumlandırmaları (1)

50 Farklı İmge Konumlandırmaları (2)

51 Farklı İmge Konumlandırmaları (3)

52 İmgenin Yatay Hizalanması (1)

53 İmgenin Yatay Hizalanması (2)

54 İmgenin Dikey Hizalanması (1)

55 İmgenin Dikey Hizalanması (2)

56 İmgenin Dikey Hizalanması (3)

57 İmgenin Hizalaması (align) "align" özelliği HTML5 standardında yer almamaktadır. Yeni sitelerde resim hizalama CSS ile yapılmalıdır. Ancak "align" özelliği içeren pek çok web sitesi ile karşılaşabileceğinizden anlatılmıştır. CSS kullanarak resim hizalama ilerleyen haftalarda anlatılacaktır.

58 <FIGURE> ve <FIGCAPTION> Etiketleri HTML5 standardına eklenen bu iki etiket, imgelere altyazı eklemeyi sağlar. Aynı etiket, <FIGURE> içine yerleştirilen birden fazla imgeye uygulanabilir.

59 Tablolar <table > <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> <tr> <td>john</td> <td>doe</td> <td>80</td> </tr> </table>

60 Tablo Başlıkları: <TH> Etiketi scope: başlığın satıra ya da sütuna ait olduğunu belirtmek için kullanılır.

61 Hücrelerin Birden Fazla Sütuna Yayılması colspan: hücrenin kaç sütuna yayılacağı belirtilir.

62 Hücrelerin Birden Fazla Satıra Yayılması rowspan: hücrenin kaç satıra yayılacağı belirtilir.

63 Uzun Tablolar: <THEAD>, <TBODY> ve <TFOOT> Etiketleri thead: başlık, tbody: gövde, tfooter: altbilgi

64 Uzun Tablolar

65 Tablolar: Kenarlık ve Arka Plan Rengi Tablolar için border ve bgcolor HTML5 standardında tanımlı değildir. Yeni web sitelerinde kullanılmamalıdır.

66 HTML Renk Kodları (HTML Color Codes)

67 HTML Formları Kullanıcıdan bilgi (kullanıcı adı, şifre vs.) almak için kullanılan kontroller kümesidir.

68 Formlar Nasıl Çalışır?

69 Form Yapısı action Form bilgilerinin gönderileceği adresi belirler. method Form bilgilerinin hangi HTTP metodu (GET veya POST) ile gönderileceğini belirler.

70 Formlar: Metin Girişi

71 Formlar: Şifre Girişi

72 Formlar: Çok Satırlı Metin Girişi

73 Formlar: Radio Button

74 Formlar: Checkbox

75 Formlar: Açılan Liste (Dropdown List)

76 Formlar: Çoklu Seçilebilir Liste

77 Formlar: Dosya Giriş Kutusu

78 Formlar: İmge Butonu

79 Form: Kontrollerin Etiketlenmesi Form kontrollerinin açıklamalarının, form kontrolleri ile ilişkilendirilmesini sağlar (kullanım kolaylığı sağlar). (1) Kontrol ve açıklama label içine yazılabilir (2) for özelliği kullanılarak ilişkilendirilebilir

80 Form Kontrollerin Gruplanması

81 Form Doğrulama (HTML5)

82 Formlar: Date (HTML5)

83 Formlar: (HTML5)

84 Formlar: URL (HTML5)

85 Formlar: Arama Girişi (HTML5)

86 Formlar: Arama Girişi - Placeholder

87 HTML Açıklama Satırları

88 ID Özelliği Bir HTML elemanını diğer HTML elemanlarından ayırmak için kullanılan isimdir. Bu ID sayesinde, CSS kullanarak bu elemanı istenilen şekilde formatlamak mümkündür.

89 CLASS Özelliği Tek bir HTML elemanını isimlendirmek (ID) yerine, birden fazla elemana sınıf atayarak (CLASS) isimlendirmek amacıyla kullanılır.

90 HTML Blok Elemanları Her zaman yeni bir satırdan başlayan HTML elemanlarıdır.

91 HTML Satıriçi Elemanları Komşu elemanları ile aynı satırda olan HTML elemanlarıdır.

92 DIV: Blok Elemanları Gruplamak

93 SPAN: Satıriçi Elemanları Gruplamak

94 IFRAME: Başka Bir Sayfayı Eklemek

95 IFRAME: Scrolling (HTML4), Frameborder ve Seamless (HTML5)

96 META: Sayfa Hakkında Bilgiler

97 VIDEO: Video Ekleme (HTML5) Tüm web tarayıcıları aynı video formatını desteklemeyebilmektedir. Bu nedenle, bu sorun çözülene kadar, videolar birden fazla formatta sunulmalıdır. Aşağıdaki formatlar * en çok destek gören formatlardır: H264 (MP4): IE ve Safari WebM: Android, Chrome, Firefox, Opera * Formatları destekleyen web tarayıcıları zaman içerisinde değişmiş olabilir.

98 VIDEO Etiketi ile video eklemek

99 SOURCE: Birden Fazla Video Kaynağı Belirtmek

100 AUDIO: Ses Eklemek (HTML5)

101 SOURCE: Birden Fazla Ses Kaynağı Belirtmek

Benzer belgeler

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı