HTML
advertisement
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. 2 HTML 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. 3 HTML 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. 4 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 5 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: <font face=“Verdana” color=“green”> Nuray AT </font> Etiket: font Özellik 1: face (yazı tipini belirler) Özellik 2: color (yazının rengini belirler) ETİKETLER (TAGS) 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. 7 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 (<BR>) etiketinin kullanılması gerekir. 9 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. 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. <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. 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ı 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. 12 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. 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. <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. 14 <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. 15 <HEAD> Etiketinin Alt Etiketleri UYGULAMA: 1. Verilen kodları yazıp browser penceresinde görüntüleyiniz. 2. Kendiniz de farklı dizinler için base etiketini kullanınız. 16 <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 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. 18 <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”> 19 <HEAD> Etiketinin Alt Etiketleri 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. 20 <HEAD> Etiketinin Alt Etiketleri <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. 21 <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: Aşağıdaki stil şablonunu kullanarak p ve H1 etiketlerini biçimlendiriniz. 22 <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”> 23
