Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

İNTERNET PROGRAMCILIĞI I BTP 207 Ders 2. Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik.

Benzer bir sunumlar


... konulu sunumlar: "İNTERNET PROGRAMCILIĞI I BTP 207 Ders 2. Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik."— Sunum transkripti:

1 İNTERNET PROGRAMCILIĞI I BTP 207 Ders 2

2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir.  Yüksek/ileri metin (hypertext) kavramı metin yanında resim, ses, video, tablo, madde işaretleri ve diğer nesnelerin bir arada olduğu yapıyı kapsar.  Bütün web sayfalarında en temel yapıyı HTML kodları oluşturmaktadır.  HTML kodları ile sayfa oluşturmak için herhangi bir editör programı kullanılabilir.  Günümüzde HTML kodlarını otomatik oluşturan birçok program mevcuttur: Microsoft FrontPage, Dreamweaver, Netobjects, Corel Web Suite… Bu dersteki uygulamalarda Not Defterini kullanacağız. HTML 2

3 HTML Sayfalarının Ana Yapısı … …  … HTML kodlarının başladığı ve bittiği yeri gösterir.  … Genelde görüntülenmeyen bilgi ve farklı işlevlere sahip kodlamalar ve parametrelerin tanımlandığı kısımdır. Bu veriler belgenin konusu, başlığı, url si, içeriğin yazıldığı dil ve yapımcısı gibi bilgilerdir.  … Sayfada görüntülenen tüm yazı, tablo, madde işaretleri, resim… gibi materyaller bu bölümde yer alır. HTML 3

4 UYGULAMA 1: İlk web sayfamız 1.Verilen kodları Not Defterine yazarak uygulama1.htm olarak kaydediniz. 2.Oluşan uygulama1.htm dosyasına çift tıklayarak browser penceresinde görüntüleyiniz. HTML 4

5 HTML kodlarına etiket (tag) adı verilir. Tarayıcılar bu etiketleri yorumlarlar. Etiket isimleri işaretleri arasında yer alır.  Yukarıdaki uygulamada,,, ve birer etikettir. Etiketler sonlandırmalı ve sonlandırmalı olmayan olmak üzere iki çeşittir:  Sonlandırmalı Etiketler: Etiketin etkili olduğu sınır bir başlangıç ve bir bitiş etiketi ile belirlenir. Başlangıç etiketi, bitiş etiketi ise şeklindedir. Hello World, Merhaba Dünya örneğinde olduğu gibi.  Sonlandırmalı Olmayan Etiketler: Bitiş etiketi olmayan etiketlerdir. Merhaba BTP 207 ETİKETLER (TAGS) 5

6 Etiketlerin Özellikleri  Etiketlere ek işlevsellik kazandırmak için bazı özellik parametreleri kullanılabilir.  Özellik parametrelerinin kullanımı mecburi değildir. Bu parametreler kullanılmadığı zaman varsayılan (default) değerleri etkin kılınır.  Özellik parametrelerinin aldığı değerler istenirse çift tırnak içerisinde veya yalın olarak yazılabilir. Örnek: Nuray AT Etiket: font Özellik 1: face (yazı tipini belirler) Özellik 2: color (yazının rengini belirler) ETİKETLER (TAGS) 6

7 UYGULAMA 2: Etiket özelliklerinin kullanımı 1.Verilen kodları Not Defterine yazarak uygulama2.htm olarak kaydediniz. 2.Oluşan uygulama2.htm dosyasına çift tıklayarak browser penceresinde görüntüleyiniz. 3.font etiketinin color özelliğini red olarak etiketlere ekleyerek tekrar kaydedip sayfayı Yenile komutu ile görüntüleyiniz. ETİKETLER (TAGS) 7

8 Özel Karakterler HTML yapısı içerisinde özel karakterler ve birden fazla boşluk için kullanılan kodlamalar:   Boşluk karakteri © © karakteri < < karakteri > > karakteri & & karakteri " “karakteri Ayrıca enter tuşu ile kodları ve içeriği alt satırlara indirmenin HTML açısından bir etkisi olmaz. Alt satıra geçmek için ( ) etiketinin kullanılması gerekir. 8

9 UYGULAMA 3: 1.Verilen kodları yazıp browser penceresinde görüntüleyiniz. 2.HTML sayfası ile çıktıyı irdeleyerek karşılaştırınız. 9

10 Nesnelerin Rengini Belirlemek Bilgisayarda tüm renkler 3 ana renkten oluşmaktadır: kırmızı (R), yeşil (G), mavi (B) Renk ifadeleri temelde görüntüyü oluşturan pikselleri etkiler. HTML sayfalarında yazı, sayfa, link gibi yapıların rengini belirlemek için kullanılan yöntemler:  1. Rengin İngilizce karşılığı ile. Hello World  bit ekranda 2 24 = farklı renk vardır. Bu renklerin hepsini İngilizce yazmak mümkün değildir ve karşılığı da yoktur. Bu yöntemde renk RGB olarak 16’lı sayı sisteminde ifade edilir. Renk 6 sayısal değerin ikişerli gruplandırılması ile oluşturulur. 10

11 XX XX XX R G B Her bir renk değerinin 16’lı sayı sisteminde alacağı maksimum değeri FF minimum değeri ise 00 dır. Bu durumda, ana renk değerleri FF0000 = kırmızı, 00FF00 = yeşil, 0000FF = mavi Kırmızının tonları = siyaha yakın koyu kırmızı, CC0000 = açık kırmızı Ara renkler ise = mor, = siyah, FFFFFF = beyaz, FF8000 = turuncu, FFFF00 = sarı Bu renk değerleri HTML sayfalarında # işareti başa getirilerek kullanılır. Hello World  3. Bu yöntemde renk RGB(R,G,B) şeklinde tanımlanarak belirlenir. R,G,B değerleri maksimum 255 değerini alabilirler. Hello World örneğinde, Hello World yazısı kırmızı renkte olacaktır. 11

12 UYGULAMA 4: Renk özelliklerinin belirlenmesi 1.Verilen kodları yazıp browser penceresinde görüntüleyiniz. 2.Kendiniz de farklı renkleri, kodları değiştirerek elde etmeye çalışınız. 12

13 Açıklama Satırları Belgeye açıklayıcı notlar düşmek için kullanılırlar. HTML belgelerine açıklama satırı eklemek amacıyla kodlaması kullanılır. Tarayıcılar bu iki kodlama arasındaki ibareleri dikkate almaz. UYGULAMA 5: 1.Verilen kodları yazıp browser penceresinde görüntüleyiniz. 2.Kendiniz de farklı açıklama satırları ekleyerek sayfayı tarayıcıda açınız. 13

14 Etiketi HTML dokümanlarının temel adresini tanımlar. Uzun adreslerde kolaylık sağlar. Örneğin, yerel veya www üzerinde herhangi bir resim dosyası olsun ve etiketini kullanarak sayfaya bu resmi ekleyelim. Bu işlem iki şekilde gerçekleştirilebilir.  1. Yol: Dosyanın bulunduğu adresi yazmak  2. Yol: etiketi aşağıdaki şekilde tanımlanır Resim bu klasörde olduğu için artık sadece resmin adı yeterli olacaktır. Bu şekilde aynı klasördeki diğer resimler de daha hızlı ve kolay adreslenebilir. Etiketinin Alt Etiketleri 14

15 etiketi özellikle sayfanın adresi değiştirilirken, sayfadaki bağlantılar kaldırılmak istendiğinde büyük kolaylık sağlar. Base etiketinin özellikleri:  Href: Bağlantılara temel olacak adresi belirlemek için kullanılır.  Target: Sayfadaki bağlantıların nerede açılacağını belirlemek için kullanılır. Aldığı değerler,  _blank: Yeni bir sayfada açılır  _self: Aynı sayfada veya çerçevede açılır. Default (etkin)  _parent: Tüm bağlantılar kendi çerçevelerinde açılır.  _top: Sayfa tüm pencereyi kapsayarak açılır. Etiketinin Alt Etiketleri 15

16 UYGULAMA 6: 1.Verilen kodları yazıp browser penceresinde görüntüleyiniz. 2.Kendiniz de farklı dizinler için base etiketini kullanınız. Etiketinin Alt Etiketleri 16

17 Etiketi Web sayfasına ait çeşitli bilgilendirme ve ayarlamaların yapıldığı etikettir. Dokümanın yazarı, konusu, anahtar kelimeleri, tazeleme süresi… gibi bilgiler yer alır. Meta etiketleri değişken ve değişkenin alacağı değer ikilisinden meydana gelir. İki şekilde tanımlama yapılır.  1. Sistem değişkenleri kullanılarak yapılan tanımlamalar Bu değişkenler HTTP-EQUIV özelliği ile tanımlanır. Değişkenin değeri ise CONTENT özelliği ile tanımlanır.  Refresh: Sayfanın belirli bir süre (saniye) içerisinde istenen sayfaya yönlenmesini sağlar. Yukarıdaki etiket HTML belgesinin 10 saniye sonra sayfasına yönlenmesini sağlar. Etiketinin Alt Etiketleri 17

18  Expires: HTML belgesinin belirli tarih ve zaman dolduğunda geçici sayfaların depolandığı dizinden veya arama motorlarının listesinden silinmesini sağlar. Bu örnekte, sayfa 24 Ekim 2014 saat 23:00’ten itibaren güncelliğini kaybetmektedir.  Content-Language: Sayfanın düzenlendiği dili belirlemek için kullanılır. Sayfanın içeriğinin Türkçe olduğunu göstermektedir.  2. Kullanıcı tanımlı değişkenler kullanarak yapılan tanımlamalar Bu değişkenler NAME özelliği ile tanımlanır. Değişkenin değeri ise CONTENT özelliği ile tanımlanır. Etiketinin Alt Etiketleri 18

19  Keywords: Arama motorları tüm web de sayfaları tararken, sayfaları kolay ve istenilen biçimde indekslemeye yardımcı olur.  Description: Sayfa hakkında açıklama cümlesi yazmak için kullanılır.  Author: Sayfayı hazırlayan kişiyi belirtmek için kullanılır.  Generator: Sayfayı hazırladığımız programı belirtmek için kullanılır. Etiketinin Alt Etiketleri 19

20 UYGULAMA 7: 1.Verilen kodları yazıp browser penceresinde görüntüleyiniz. 2.Birçok kodun çalışmasını gözlemleyemeyeceksiniz. Ancak 10 saniye sonra adresine yönlendirileceksiniz. Etiketinin Alt Etiketleri 20

21 Etiketi Sayfanın başlığını belirlemede kullanılır. UYGULAMA 8: 1.Verilen kodları yazıp browser penceresinde görüntüleyiniz. 2.Kendinize ait çeşitli sayfa başlıkları oluşturarak görüntüleyiniz. Etiketinin Alt Etiketleri 21

22 Etiketi Sayfa içi stil belirlemede kullanılır. Stiller sayfadaki çeşitli nesneleri topluca biçimlendiren yapılardır. Stil konusu daha sonra çalışılacaktır. UYGULAMA 9: Aşağıdaki stil şablonunu kullanarak p ve H1 etiketlerini biçimlendiriniz. Etiketinin Alt Etiketleri 22

23 Etiketi Sayfaya ait stil sayfalarını bağlamak için kullanılır. Bu sayfaların yapısı ve kullanımı CSS bölümünde incelenecektir. Aşağıda link etiketinin kullanımı gösterilmiştir: Etiketinin Alt Etiketleri 23


"İNTERNET PROGRAMCILIĞI I BTP 207 Ders 2. Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik." indir ppt

Benzer bir sunumlar


Google Reklamları