BTP207_ders2

Report
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 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.
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 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.
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 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.
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 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.
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 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.
<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 6:
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 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
www.google.com adresine yönlendirileceksiniz.
20
<HEAD> Etiketinin Alt Etiketleri
<TITLE> 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.
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 9:
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

similar documents