İNTERNET PROGRAMCILIĞI I BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2
HTML 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. Entropy can be changed from one base to another
HTML HTML Sayfalarının Ana Yapısı <html> <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. Entropy can be changed from one base to another
HTML UYGULAMA 1: İlk web sayfamız Verilen kodları Not Defterine yazarak uygulama1.htm olarak kaydediniz. Oluşan uygulama1.htm dosyasına çift tıklayarak browser penceresinde görüntüleyiniz. Entropy can be changed from one base to another
ETİKETLER (TAGS) 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 <p> 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. <p> Hello World, Merhaba Dünya </p> örneğinde olduğu gibi. Sonlandırmalı Olmayan Etiketler: Bitiş etiketi olmayan etiketlerdir. Merhaba <BR> BTP 207 Entropy can be changed from one base to another
ETİKETLER (TAGS) 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: <font face=“Verdana” color=“green”> Nuray AT </font> Etiket: font Özellik 1: face (yazı tipini belirler) Özellik 2: color (yazının rengini belirler) Entropy can be changed from one base to another
ETİKETLER (TAGS) UYGULAMA 2: Etiket özelliklerinin kullanımı Verilen kodları Not Defterine yazarak uygulama2.htm olarak kaydediniz. Oluşan uygulama2.htm dosyasına çift tıklayarak browser penceresinde görüntüleyiniz. font etiketinin color özelliğini red olarak etiketlere ekleyerek tekrar kaydedip sayfayı Yenile komutu ile görüntüleyiniz. Entropy can be changed from one base to another
Ö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 (<BR>) etiketinin kullanılması gerekir. Entropy can be changed from one base to another
Verilen kodları yazıp browser penceresinde görüntüleyiniz. UYGULAMA 3: Verilen kodları yazıp browser penceresinde görüntüleyiniz. HTML sayfası ile çıktıyı irdeleyerek karşılaştırınız. Entropy can be changed from one base to another
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. <font color=“blue”> Hello World </font> 2. 24 bit ekranda 224= 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. Entropy can be changed from one base to another
FF0000 = kırmızı, 00FF00 = yeşil, 0000FF = mavi 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. <font color=“#FF99CC”> Hello World </font> 3. Bu yöntemde renk RGB(R,G,B) şeklinde tanımlanarak belirlenir. R,G,B değerleri maksimum 255 değerini alabilirler. <font color=“rgb(255,0,0)”> Hello World </font> örneğinde, Hello World yazısı kırmızı renkte olacaktır. Entropy can be changed from one base to another
UYGULAMA 4: Renk özelliklerinin belirlenmesi Verilen kodları yazıp browser penceresinde görüntüleyiniz. Kendiniz de farklı renkleri, kodları değiştirerek elde etmeye çalışınız. Entropy can be changed from one base to another
Belgeye açıklayıcı notlar düşmek için kullanılırlar. 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 5: Verilen kodları yazıp browser penceresinde görüntüleyiniz. Kendiniz de farklı açıklama satırları ekleyerek sayfayı tarayıcıda açınız. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri <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. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri <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. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri UYGULAMA 6: Verilen kodları yazıp browser penceresinde görüntüleyiniz. Kendiniz de farklı dizinler için base etiketini kullanınız. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri <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. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri 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. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri 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”> Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri UYGULAMA 7: Verilen kodları yazıp browser penceresinde görüntüleyiniz. Birçok kodun çalışmasını gözlemleyemeyeceksiniz. Ancak 10 saniye sonra www.google.com adresine yönlendirileceksiniz. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri <TITLE> Etiketi Sayfanın başlığını belirlemede kullanılır. UYGULAMA 8: Verilen kodları yazıp browser penceresinde görüntüleyiniz. Kendinize ait çeşitli sayfa başlıkları oluşturarak görüntüleyiniz. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri <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 9: Aşağıdaki stil şablonunu kullanarak p ve H1 etiketlerini biçimlendiriniz. Entropy can be changed from one base to another
<HEAD> Etiketinin Alt Etiketleri <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”> Entropy can be changed from one base to another