BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2

HTML 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 3 HTML Sayfalarının Ana Yapısı <html> <head> </head> <body> </body> </html> < html> </html> HTML kodlarının başladığı ve bittiği yeri gösterir. <head> </head> 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. <body> </body> Sayfada görüntülenen tüm yazı, tablo, madde işaretleri, resim gibi materyaller bu bölümde yer alır.

HTML 4 UYGULAMA: İ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.

ETİKETLER (TAGS) 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 <html>, <head>, <title>, <body> 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 <etiket_ismi>, bitiş etiketi ise </etiket_ismi> ş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) 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) 7 UYGULAMA: 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.

8 Özel Karakterler HTML yapısı içerisinde özel karakterler ve birden fazla boşluk için kullanılan kodlamalar: &nbsp Boşluk karakteri &copy karakteri &lt < karakteri &gt > karakteri &amp & karakteri &quot 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.

UYGULAMA: 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 2. 24 bit ekranda 2 24 = 16.777.216 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.

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ı 440000 = siyaha yakın koyu kırmızı, CC0000 = açık kırmızı Ara renkler ise 800080 = mor, 000000 = 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

UYGULAMA: 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 <!- - ve - -> kodlaması kullanılır. Tarayıcılar bu iki kodlama arasındaki ibareleri dikkate almaz. UYGULAMA: 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.

<BASE> 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 <img> etiketini kullanarak sayfaya bu resmi ekleyelim. Bu işlem iki şekilde gerçekleştirilebilir. 1. Yol: Dosyanın bulunduğu adresi yazmak <img src="c:\users\public\pictures\sample Pictures\Tulips.jpg"> 2. Yol: <base> etiketi aşağıdaki şekilde tanımlanır <head> <base href= C:\Users\Public\Pictures\Sample Pictures\ > </head> Resim bu klasörde olduğu için artık sadece resmin adı yeterli olacaktır. <img src= Tulips.jpg > Bu şekilde aynı klasördeki diğer resimler de daha hızlı ve kolay adreslenebilir. <HEAD> Etiketinin Alt Etiketleri 14

<HEAD> Etiketinin Alt Etiketleri 15 <BASE> 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.

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

<HEAD> Etiketinin Alt Etiketleri 17 <META> 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. <META HTTP-EQUIV= refresh CONTENT= 10; URL=http://www.google.com/ > Yukarıdaki etiket HTML belgesinin 10 saniye sonra http://www.google.com/ sayfasına yönlenmesini sağlar.

<HEAD> Etiketinin Alt Etiketleri 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. <META HTTP-EQUIV= expires CONTENT= Fr, 24 Oct 2014 23:00:00 GMT > 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. <META HTTP-EQUIV= content-language CONTENT= TR > 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.

<HEAD> Etiketinin Alt Etiketleri 19 Keywords: Arama motorları tüm web de sayfaları tararken, sayfaları kolay ve istenilen biçimde indekslemeye yardımcı olur. <META NAME= keywords CONTENT= Programlama, HTML > Description: Sayfa hakkında açıklama cümlesi yazmak için kullanılır. <META NAME= description CONTENT= İnternet Programlama > Author: Sayfayı hazırlayan kişiyi belirtmek için kullanılır. <META NAME= author CONTENT= Nuray At > Generator: Sayfayı hazırladığımız programı belirtmek için kullanılır. <META NAME= generator CONTENT= Microsoft Frontpage 5.0 >

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

<HEAD> Etiketinin Alt Etiketleri 21 <TITLE> Etiketi Sayfanın başlığını belirlemede kullanılır. UYGULAMA: 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.

<HEAD> Etiketinin Alt Etiketleri 22 <STYLE> 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: Aşağıdaki stil şablonunu kullanarak p ve H1 etiketlerini biçimlendiriniz.

<HEAD> Etiketinin Alt Etiketleri 23 <LINK> 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: <LINK REL=stylesheet TYPE= text/css REF= stil1.css >