docZengin Metin İşaretleme Dili (HTML)
download 
Şikayet Transkript
Zengin Metin İşaretleme Dili (HTML)
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
Benzer belgeler
HTML Kullanarak Web Tasarimi
Her açılan etiketin görevi bitiği zaman kapanması gerekir. “/” işareti etiketi kapatır.
Bir HTML dokümanı iki ana kısımdan oluşmaktadır baş ve gövde bölümü.
< head > . . . < /head > etiketi a...
(5) ".html" uzantısını da yazarak dosyayı kaydedin.
