Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama
Word Dokümanı - Yapılandırma
Web Sayfası - Yapılandırma
What You See Is What You Get (WYSIWYG)
Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının yapısını tanımlamaya yarayan dildir.
HTML - Elemanlar ve Etiketler (Elements and Tags)
Etiketler - Açılış Etiketi (Opening Tag) küçüktür işareti karakter p: paragraf büyüktür işareti
Etiketler - Kapanış Etiketi (Closing Tag) ileri taksim işareti
Etiket Özellikleri (Tag Attributes) Özellik adı Özellik değeri
Basit bir HTML web sayfası (kod)
Basit bir HTML web sayfası (sonuç)
Windows'ta yeni web sayfası oluşturma (1) (1) Donatılar'dan Not Defteri uygulamasını açın.
Windows'ta yeni web sayfası oluşturma (2) (2) Not defterine HTML kodunu yazın.
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.
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)
<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.
<BODY> Etiketi <body> Web tarayıcısın ana sayfasında gösterilen herşey bu etiket içerisinde yer alır.
<TITLE> Örneği Title etiketi içeriği burada gösterilir
Başlıklar (Headings) <h1> <h2> <h3> <h4> <h5> <h6>
Paragraflar
<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.
<SUP> ve <SUB> Etiketleri Üst simge ve Alt simge
Boşluk Karakteri
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)
<BLOCKQUOTE> ve <Q> Etiketleri
<CITE> Etiketi - Alıntılar
<DFN> Etiketi - Tanımlama
<ADDRESS> Etiketi Yazar Erişim Bilgisi
<S> Etiketi Geçerliliğini Kaybetmiş Bilgi
<OL> ve <LI> Etiketleri Sıralı Listeler
<DL>, <DT> ve <DD> Etiketleri Tanım Listeleri
İçiçe Listeler
Örnek
Örnek Çözüm 1. bölüm
Örnek Çözüm - 2. bölüm
<A> Etiketi Bağlantılar (Links) Mutlak adresler (Absolute URL)
<A> Etiketi Bağlantılar (Links) Bağıl adresler (Relative URL)
Ö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.
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.
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
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
Email Bağlantıları mailto:
Bağlantıları Yeni Pencerede Açmak target
Aynı Sayfadaki Bir Alana Bağlantı Bu html dosyasını oluşturup test ediniz.
Başka Bir Sayfadaki Bir Alana Bağlantı <a href= http://www.htmlandcssbook.com/#bottom">kitap</a> http://www.htmlandcssbook.com web sitesinin "bottom" isimli alanına bağlantı sağlar.
<IMG> Etiketi İle İmge Eklemek (1)
<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.
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.
Farklı İmge Konumlandırmaları (1)
Farklı İmge Konumlandırmaları (2)
Farklı İmge Konumlandırmaları (3)
İmgenin Yatay Hizalanması (1)
İmgenin Yatay Hizalanması (2)
İmgenin Dikey Hizalanması (1)
İmgenin Dikey Hizalanması (2)
İmgenin Dikey Hizalanması (3)
İ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.
<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.
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>
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.
Hücrelerin Birden Fazla Sütuna Yayılması colspan: hücrenin kaç sütuna yayılacağı belirtilir.
Hücrelerin Birden Fazla Satıra Yayılması rowspan: hücrenin kaç satıra yayılacağı belirtilir.
Uzun Tablolar: <THEAD>, <TBODY> ve <TFOOT> Etiketleri thead: başlık, tbody: gövde, tfooter: altbilgi
Uzun Tablolar
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.
HTML Renk Kodları (HTML Color Codes)
HTML Formları Kullanıcıdan bilgi (kullanıcı adı, şifre vs.) almak için kullanılan kontroller kümesidir.
Formlar Nasıl Çalışır?
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.
Formlar: Metin Girişi
Formlar: Şifre Girişi
Formlar: Çok Satırlı Metin Girişi
Formlar: Radio Button
Formlar: Checkbox
Formlar: Açılan Liste (Dropdown List)
Formlar: Çoklu Seçilebilir Liste
Formlar: Dosya Giriş Kutusu
Formlar: İmge Butonu
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
Form Kontrollerin Gruplanması
Form Doğrulama (HTML5)
Formlar: Date (HTML5)
Formlar: Email (HTML5)
Formlar: URL (HTML5)
Formlar: Arama Girişi (HTML5)
Formlar: Arama Girişi - Placeholder
HTML Açıklama Satırları
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.
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.
HTML Blok Elemanları Her zaman yeni bir satırdan başlayan HTML elemanlarıdır.
HTML Satıriçi Elemanları Komşu elemanları ile aynı satırda olan HTML elemanlarıdır.
DIV: Blok Elemanları Gruplamak
SPAN: Satıriçi Elemanları Gruplamak
IFRAME: Başka Bir Sayfayı Eklemek
IFRAME: Scrolling (HTML4), Frameborder ve Seamless (HTML5)
META: Sayfa Hakkında Bilgiler
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.
VIDEO Etiketi ile video eklemek
SOURCE: Birden Fazla Video Kaynağı Belirtmek
AUDIO: Ses Eklemek (HTML5)
SOURCE: Birden Fazla Ses Kaynağı Belirtmek