View
137
Download
5
Category
Preview:
DESCRIPTION
Algoritma ve Programlamaya Giriş. Öğr . Gör. Hüseyİn BAĞRIYANIK. HTML. HTML (Hyper Text Markup Language- Hareketli Metin İşaretleme Dili ) web sayfalarının hazırlanmasında kullanılan dildir. - PowerPoint PPT Presentation
Citation preview
ÖĞR. GÖR. HÜSEYİN BAĞRI YANI K
Algoritma ve Programlamaya Giriş
HTML
HTML (Hyper Text Markup Language-Hareketli Metin İşaretleme Dili) web sayfalarının hazırlanmasında kullanılan dildir.
html komutları sayfa içinde bulunan herseyin nasıl gösterilecegini, kullanılan tarayıcıya anlatmak için kullanılır.
Yani sayfada bulunan resim, flash, yazı gibi materyallerin yanyana anlasılır görünmesi için HTML kullanmak zorundayız
2
INTERNET
Internet, bir çok bilgisayar sisteminin birbirine baglı oldugu, dünya çapında yaygın olan ve sürekli büyüyen bir iletisim agıdır.
Aynı zamanda, insanların her geçen gün gittikçe artan “üretilen bilgiyi saklama / paylasma ve ona kolayca ulasma” istekleri sonrasında ortaya çıkmıs bir teknolojidir.
Bu teknoloji yardımıyla pek çok alandaki bilgilere insanlar kolay, ucuz, hızlı ve güvenli bir sekilde erisebilmektedir.
3
IP (Internet Protocol) Numarası
IP (Internet Protocol), bilgisayarların iletisim kurmasını saglayan standart bir protokoldür.
Genel olarak her bilgisayarın kendine özel bir numarası vardır. İki bilgisayar iletisim kurdugu zaman birbirlerini bulmak için IP adresini kullanırlar.
IP adresi 32 bitlik bir adres ve herbiri noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan olusmus 4 adet numara setidir.
Örnegin: 192.168.123.254. Bilgisayarın networkte bir “adı” olsa bile (daha kolay
hatırlamanız için ), diger bilgisayarlarla iletisim kurdugunda IP adresini kullanır.
4
Internet Alanı (Domain)
Internete sürekli baglı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 gibi).
Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor oldugundan, alan adı (domain name) sistemi adını verdigimiz bir isimlendirme olusturulmustur.
5
Internet Alanı (Domain)
Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan web sitelerine) baglanmak için karmasık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay olan adlar kullanılmaktadır (www.google.com gibi).
Siz tarayıcınızın adres çubuguna www.meb.gov.tr yazdıgınızda, tarayıcınız merkezi bir bilgisayarla iletisim kurarak www.meb.gov.tr adresinin yerini tuttugu IP numarasını ögrenecek ve bu IP numaralı bilgisayara baglanarak istediginiz bilgilere erismenizi saglayacaktır.
6
Internet Alanı (Domain)
Internet adreslerinde görülen kısaltmalar sunlardır:
gov: Hükümet kurumları (government)edu: Egitim kurumları (education)org: Ticari olmayan kuruluslar (organization)com: Ticari kuruluslar (company)mil: Askeri kurumlar (military)net: Servis sunucular (network)ac: Akademik kuruluslar (academic)int: Uluslararası kuruluslar (international)
7
Internet Alanı (Domain)
Bunun yanında kullanılan ülke kısaltmaları da vardır. Bazıları;
tr:Türkiye, jp:Japonya,uk:Ingiltere, it:Italya, ch:Isviçre gibi.
8
Web Tarayıcılar
Web tarayıcısı, internet üzerindeki tüm bilgilere bakabilmek ve bu bilgilerle etkilesim halinde olabilme olanağı veren bir uygulama programıdır.
Tarayıcı kelimesinin Ingilizce karsılıgı “browser”’dır.
İnternet Explorer, Mozilla Firefox, Opera vb.
9
Web Tarayıcıların Çalısması
Web, istemci-sunucu (client-server) sistemi olarak bilinir.
Sizin web tarayıcı yazılımınız istemci, uzaktaki sizin erismek istediginiz bilgileri saklayan bilgisayar ise sunucudur.
10
Web Tarayıcıların Çalısması
Örnegin; Milli Egitim Bakanlıgının web sitesine bakıyorsanız sizin bilgisayarınız Ankara’daki bir sunucudan web sayfalarına erismek istedigi mesajını yollamıstır.
Milli Egitim Bakanlıgının web sunucusu istediginiz bilgileri internet üzerinden sizin bilgisayarınıza yollamaktadır.
Sizin web tarayıcınız gelen bilgileri yorumlar ve sizin ekranınızda anlasılır bir sekilde gösterir
11
Web Tasarımı12
Sayfa Hazırlarken Dikkat Edilecek Noktalar
Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kayıt edilirken asla türkçe ve özel karakterler (g,ü,s,I ,?,\ vs kullanılmaz.
Sabit diskinizde öncelikle web sayfanıza ait dokümanları kayıt edeceginiz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı kayıt edeceginiz bir alt dizin olusturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda olusturmak gerektigi asla unutulmamalıdır.
13
Sayfa Hazırlarken Dikkat Edilecek Noktalar
Web sitenizi yaptıgınızda, mutlaka ana sayfanızı index.html olarak adlandırınız.
Bir çok web sunucu için varsayılan sayfa index.html'dir.
Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını isterler.
14
HTML (HYPER TEXT MARKUP LANGUAGE)
TEMEL ETIKETLERI
15
HTML Komut Yapısı
HTML diger programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır.
HTML herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine web sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelismis araçlar da kullanılabilir.
16
HTML Komut Yapısı
Bu eğitim de uygulamalar için Notepad kullanılmıstır. Bir html dokümanı hazırlandıktan sonra kaydedilirken “dosya_adi.htm” veya “dosya_adi.html” olarak kaydedilmelidir.
17
Yazım Kuralları
Komutlar büyük ya da küçük harfle yazılabilir.
Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
Komutlar “<” ve “>” isaretleri arasında yazılır ve “etiket (tag)” adını alırlar.
18
Yazım Kuralları
Kullanım biçimi :<etiket (tag)_adi>
Örnek : <HTML>,<BODY>,<TITLE>Bir etiket <etiket_adi> seklinde baslar ve bazı
etiketler dısında </etiket_adi> seklinde biter.<html> ………………</html>
19
Yazım Kuralları
Etiketler iç içe yer alırlar ve en içteki etiketten baslatılarak kapatılırlar. Kullanım biçimi:
<tag_1><tag_2>......</tag_2></tag_1>
20
Yazım KurallarıÖrnek : Örnek:<HTML> <html><BODY> <body>...... ……<FORM> <form>...... ……</FORM> </form></BODY> </body></HTML> </html>
21
Yazım Kuralları
Bir etiket parametreler kullanarak biçimlendirilir ve bu parametrelere tırnak ("") isaretleri arasında deger atanır.
Degerle parametre adı arasında esittir (=) isareti kullanılır.
22
Yazım Kuralları
Kullanım biçimi:<tag_adi parametre_adi ="deger">
Örnek:<body bgcolor="blue">
23
Yazım Kuralları
Web sayfasında standart olarak bulunması gereken kodlar sunlardır.
<html><head><title> Sayfanın Baslıgı </title></head><body> Sayfanızın tüm içerigi: resim, yazı, video, vb.</body></html>Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı
bunun bir web sayfası oldugunu anlar ve ona göre görüntüler.
24
<HTML>
<html>, bir web sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin basladıgı ve bittigi yeri bildirir.
Bütün HTML kodları bu etiketin içinde yer almadır.
Bu etiketin hiç bir parametresi yoktur.
25
<HTML>
Bir web sayfası <html> ile başlar, </html> ile biter. <html><head><title>Buraya sitenin adı yazılır</title></head><body>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</body></html>
26
<HEAD>
HTML belgesinin ilk bölümüdür.
Web sayfası ile ilgili temel özellikler, sayfa baslığı, yazı karakterler kümesilink özellikleri Meta etiketi burada tanımlanır.
NOT:Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.
27
<BODY>
HTML belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir.
Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölümdür. Buradaki komutların neler olduğunu sırayla öğreneceksiniz.
28
<TITLE>Her sitenin bir adı olması gerekir.
<title> Sefaköy Kültür Merkezi</title>
29
<TITLE>Head bölümü içine yazılan title bölümüne
sayfanın baslıgı yazılır, tarayıcının sol üst bölümünde bulunan baslık çubugunda görüntülenir.
30
<html><head><title>Hüseyin BAĞRIYANIK</title></head><body>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</body></html>
İlk Sayfamızı yapalım
Önce not defterimizi açalım.Aşağıdaki yazıyı açtığınız sayfaya yazın
<html><head><title> Sayfa Başlığı</title></head><body>Web Siteme Hoşgeldiniz…
</body></html>
İndex.html adını verin ve önceden belirlediğiniz bir yerekaydedin.
31
Yazı (Tip, Renk, Büyüklük)
Farklı durumlar için, farklı büyüklük, tip ve renklerde yazılar gerekir.
Ayrıca yazının, sayfanın neresinde duracağına da siz karar vermelisiniz.
32
Yazı (Tip, Renk, Büyüklük)
Yazılar aşağıdaki komutlar içine yazılır.<font> ............... </font> Yazının büyüklüğü için "size“,yazı tipi için "face"
Yazı rengi için "color" komutlarını kullanmanız gerekir
33
Yazı (Tip, Renk, Büyüklük)
<html><head><title> Hüseyin BAĞRIYANIK</title></head><body><font size=“10" face="Arial“ color="red">OSMANİYE KORKUT ATA ÜNİVERSİTESİNİN ANASAYFASINA HOŞ GELDİNİZ
</font> </body>
</html>
34
Yazı (Tip, Renk, Büyüklük)
YAZI BÜYÜKLÜĞÜfont size=“10“ yerine 2, 3, 4, 6,12 yazabilirsiniz.Ayrıca başlıkları aşağıdaki kodların arasına da
yazabilirsiniz.. <h1> FENERBAHÇE </h1><h2> FENERBAHÇE </h2><h3> FENERBAHÇE </h3><h4> FENERBAHÇE </h4><h5> FENERBAHÇE </h5><h6> FENERBAHÇE </h6>
35
Yazı (Tip, Renk, Büyüklük)
<h1> FENERBAHÇE </h1><h2> FENERBAHÇE </h2>
<h3> FENERBAHÇE </h3><h4> FENERBAHÇE </h4>
<h5> FENERBAHÇE </h5> <h6> FENERBAHÇE </h6>
36
Yazı (Tip, Renk, Büyüklük)
YAZI RENGİRenkler için ya renk kodunu ya da ingilizce
adını yazmalısınız. color="red" yerine, farklı renk isimleri yazın.
red - kırmızıblue - maviyellow - sarıwhite - beyazblack - siyah
37
Yazı (Tip, Renk, Büyüklük)
Kodlarla yazmak istiyorsanız,color="#FF0000" renk adı yerine kod yazmanız gerekir.
red - #ff0000blue - #0000ffyellow - #ffff00white - #ffffffblack - #000000
Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz.
38
Yazı (Tip, Renk, Büyüklük)
YAZI TİPİface="Arial" yerine Verdana, Arial Narrow,
Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir.
Bir yazı tipi, ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz.
39
Yazı (Tip, Renk, Büyüklük)40
Yazı (Tip, Renk, Büyüklük)41
Yazı (Tip, Renk, Büyüklük)42
Örnek:
Yazıyı Sayfaya yerleştirme
Yazıların sayfanın neresinde durması gerektiğine biz karar verebiliriz. Hiçbir şey yazmazsak, Sayfanın solunda dururlar
<align> etiketinin paremetleri ile ayarlayabilirsiniz.
<h1 align=“center”>……..</h1>
43
Yazıyı Sayfaya yerleştirme
<right>....</right> yazınız sayfanın sağında görünür
<left>....</leftt> yazınız sayfanın solunda görünür
<center>...</center> yazınız sayfanın ortasında görünür
<justify>....</justify> yazınız sayfanın iki yanına hizalanır
44
Yazıyı Sayfaya yerleştirme
<html><head><title> Sefaköy Kültür Merkezi </title></head><body><font size=“10" face="Arial" color="red">
<center> SEFAKÖY KÜLTÜR MERKEZİ ANASAYFASINA HOŞ
GELDİNİZ </center> </font> </body>
</html>
45
Yazıyı Sayfaya yerleştirme
<p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar.
Sola dayalı olması için: <p>Yazınızı buraya yazacaksınız</p> Ortada olması için: <p align=“center”>Yazınızı buraya
yazacaksınız</p> Sağa dayalı olması için: <p align=“right”>Yazınızı buraya
yazacaksınız</p>
46
Satırbaşı ve paragraf yapmak
<br> Klavyede yazarken alt satıra inmek için enter
tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür.
<br> komutunu </br> komutuyla kapatmaya gerek yoktur.
47
Neler Öğrendik
<html>…..</html><head>…..</head><title>……</title><body>……</body><font size=“x” face=“y”
color=“z”>……</font><hx>……..</hx><align=“center,right,left,justify><p>……..</p>
48
Kalın, eğik ve altı çizgili yazmak
Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir.
Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak.
<b>Yazınızı buraya yazacaksınız</b>
49
Yazıyı Sayfaya yerleştirme
Yazıyı eğik yazmak için kullanacağınız kod ise böyle...
Eğik (İtalik) yazı <i>Yazınızı buraya yazacaksınız</i>
50
Yazıyı Sayfaya yerleştirme
Altı çizgili (underline) yazı <u>Yazınızı buraya yazacaksınız</u>
51
Yazıyı Sayfaya yerleştirme
Peki... Hem kalın hem eğik yazmak istersek ne yapacağız?
O zaman her iki kodu da peşpeşe kullanacağız. Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.
<b><i> Yazınızı buraya yazacaksınız</i></b>
52
Listeleme Etiketleri
HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır.
Dokümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidini destekler.
53
<LI>
<li> etiketi ingilizce “liste elemanı” anlamına gelen 'list item' kelimesinin kısaltılmışıdır.
<li>elma<li>armut şeklinde kullanılır.
Sıralanacak olan ifadenin başına <li> getirmeliyiz.
<BR> etiketinde olduğu gibi </> ile kapatılması gerekmez.
54
<LI><HTML><HEAD><TITLE>listelem
e</TITLE></HEAD><BODY><LI>elma<LI>armut<LI>ayva<LI>karpuz<LI>portakal<LI>mandalina</BODY></HTML>
55
<OL>(Sıralı listeleme)
Sıralı liste oluşturmak için kullanılır. Sıralı listelerden kastımız kelime ya da cümlelerinizi ya da herhangi bir şeyi numaralı, alfabetik, roma rakamlı olarak sıralı göstermektir.
Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. <ol> etiketine parametreler ekleyebiliyoruz.
Type parametresi listemizin rakamla mı harfle mi başlayacağını, start ise hangi rakam/harfle başlayacağını belirler. Yani a) b) c) değil de d) e) f) gibi.
56
<OL>
Start değeri her zaman bir sayı olmalıdır. Yani sırayı alfabe olarak atamak ve “f” den başlamak istersek start değerini “f” değil “6”, type değerini de küçük “a” yapmalıyız.
Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.
Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)
57
<UL>(Sırasız Listeleme)
Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler yerleştirmek için <ul> etiketini kullanıyoruz.
<ul> için kullanılan parametreler type ve compact’tır. Type ile kullanacağımız madde iminin şeklini seçebiliriz. Bunlar disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.
58
LİSTELEME59
ÖRNEK60
ÖRNEK61
ÖRNEK-SIRALI LİSTE62<ol type="1"> <li>Kimya <ol type="a"> <li>İnorganik <li>Analitik
</ol> <li>Fizik <oltype="a"> <li>Dinamik <li>Statik </ol> <li>Matematik <ol type="a"> <li>Sayılar <li>Diğer <ol type="i"> <li>Türev <li>İntegral
</ol> </ol> </ol>
ÖRNEK-SIRASIZ LİSTE63<ul type="disc">
<li>Kimya <ultype="square"> <li>İnorganik <li>Analitik </ul> <li>Fizik <ul type="square"> <li>Dinamik <li>Statik </ul> <li>Matematik <ul type="square"> <li>Sayılar <li>Diğer <ul type="circle"> <li>Türev <li>İntegral </ul> </ul> </ul>
Tanımlama ListeleriBu listelemede kullanılan etiketler şöyle; <dl>...</dl> ; Tanımlama Listesinin Başlangıc ve bitişini
belirtmek için kullanılır.<dt> Tanımın başlık kısmını belirtmek için kullanılır<dd> Tanımın açıklama kısmını yazmak için kullanılır.
Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada <dt> ve <dd> etiketleri alıyor.
Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz.
Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.
64
Örnek
Başlık Kısmı:İçerik Kısmı Buraya yazılıcaktır.
65
<html><head><title> Tanımlama Listeleri </title></head><body>
<dl ><dt><font color="red">Başlık Kısmı:</font><dd>İçerik Kısmı buraya yazılacaktır...
</dl></body></html>
Tanımlama Listeleri66
Web sayfanıza Resim eklemek
Sayfaya resim yerleştirmek için kullanacağımız etiket tag <img> dir. Bu tagın kapanış tagı yoktur.
Img tagı kullanılırken bir çok parametresi vardır. Bu parametreler resmi en güzel şekilde sayfaya yerleştirmek için kullanılır. şimdi bir kaçını öğreneceğiz.
NOT:Resimlerimiz ile .htm dosyalarımız aynı klasörde olmalı. Yoksa resimlerimiz gözükmez. Onun yerine bir çarpı işareti görmekte pek hoş olmaz...
67
Web sayfanıza Resim eklemek
src:Kullanacağımız resmin yerini belirtir. alt :Kullanacağımız resmin ismini yazar. border:Kullanacağımız resmi çerçeveler. align: Kullanacağımız resmi sağa veya sola
yerleştirir. heigth: Kullanacağımız resmin yüksekliğini belirler. widht :Kullanacağımız resmin genişliğini belirler. <img src=“yeri” alt=“ismi” border=“çerçeve”
align=“konumu”heigth=“yükseklik”widht”genişlik”>
68
Web sayfanıza Resim eklemek
<html><head> <title>İlk resimli sayfamız </title> </head><body><img src=“cicek.jpg"></body></html>
69
Web sayfanıza Resim eklemek
<html><head><title>Alt parametresi</title> </head><body><img src=“cicek.jpg" alt=“papatya" ></body></html>
70
Web sayfanıza Resim eklemek
<html><head> <title>Border parametresi </title>
</head><body><img border=“10” alt=“papatya" src=“cicek.jpg"></body></html>
71
Web sayfanıza Resim eklemek
<html><head><title>Align parametresi</title>
</head><body><img align=“right” border=“10” alt=“papatya" src="resim.jpg"> <p> resim sola yanaşık </p></body></html>
72
Web sayfanıza Resim eklemek
<html><head> <title>Resimde boyut belirleme </title>
</head><body><img src=“cicek.jpg" alt=“papatya“ height=“300" width=“200" ></body></html>
73
BAĞLANTI (KÖPRÜ) OLUŞTURMA
Web sayfalarındaki linkler(bağlantılar) başka bir sayfanın açılmasını sağlayan köprülerdir.
HTML'nin bu görevini yerine getirmesini sağlayan etiket <a>’dir.
WEB sayfalarının en önemli özelliklerinden birisi, kolayca başka sayfalara ve dökümanlara geçiş yapılabilmesidir.
Bunun için <a href >...</a> komutunu kullanırız. Bu komutlar arasına yazmış olduğunuz ifade mavi renkte
ve altı çizili olarak ekrana gelir.İfadenin üzerine tıkladığınızda yazmış olduğunuz WEB
adresine sizi yönlendirecektir.
74
BAĞLANTI (KÖPRÜ) OLUŞTURMA75
Bağlantının açılacağı pencereyi belirtmek için "target" parametresinide kullanabiliriz.
<a href="..." target="..." ></a>
BAĞLANTI (KÖPRÜ) OLUŞTURMA
target="_blank" Bağlantı yeni bir pencerede açılır.
target="_self" Bağlantı aynı pencere içerisinde açılır.
target="_top" Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.
NOT: Kendi çalışmanızı açacak bir link verin
76
Köprü Oluşturma
Örnek: şimdiye kadar yaptığınız tüm çalışmaların isimlerini yazınız ve bu sayfalara ulaşmayı sağlayan linkler veriniz.
Örneğin:1. Resim ekleme çalışması için tıklayınız.2. Listeleme çalışması için tıklayınız.3. Sırasız liste çalışması için tıklayınız.
77
Sayfa İçi Bağlantı Oluşturma
Bir metin üzerinde belirli bölgelere ulaşmak için yine etiketler kullanılabilir. <a href="#...">...</a>, <a name="....">...</a> komutlarını kullanarak sayfa içi (dahili) bağlantıları hazırlayabiliriz.
Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konuya gitsin. Böyle bir sayfa hazırlamak için yapacağımız şeyler:
"Tıklandığında" açılacak konuyu işaretlemek (<a name="....">...</a> ).Tarayıcıya, hazırlayacağımız menüye "tıklandığında" bu
işaretli konuya gitmesini bildirmek (<a href="#...">...</a>
78
79
80
E-Posta Adresine Bağlantı Oluşturma
Hazırlamış olduğunuz WEB sayfasında insanların istediğiniz bir mail adresine kolay bir şekilde ulaşabilmesini sağlayabilirsiniz. Bunun için,
<a href=”mailto…….”>….</a>komutunu kullanabilirsiniz.
81
E-Posta Adresine Bağlantı Oluşturma
Verilen komutları yazdığımızda ekranda “e-posta göndermek için tıklayınız” ifadesi görünecektir.
Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail’in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
82
83
TABLOLAR
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece istediğiniz düzenlemeyi yapabilirsiniz.
84
Tablo Ekleme
Tablolar <table> belirteci ile başlar ve </table> etiketi ile sonlandırılır.
<table> …… </table><tr> tabloda satır oluşturmak için kullanılır.<td> tabloda sütün oluşturmak için kullanılır.
85
Tablo Ekleme86
Tablo Ekleme
Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. border=“0” çerçevenin görünmemesini sağlar.
87
Tablo Ekleme
Satırların yüksekliğini ayarlamak için height parametresi Sütunların genişliğini ayarlamak için ise width parametresi kullanılır.
88
Tablo Ekleme89
Tabloyu Hizalama: align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar . <table border="1" align="left"> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>
<table border="1" align="right"> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>
90
Hücre Birleştirme
Colspan: Aynı satırdaki hücreleri birleştirmek için kullanılır
Rowspan: Aynı sütundaki hücreleri birleştirmek için kullanılır.
91
Tablo Ekleme92
Örnek:
Tablo Ekleme
Örnek:93
Tablo Ekleme
Cellspacing:Tablonun.içerisindeki hücrelerin, birbirlerinden ve
tablo sınırlarından uzaklığını, pixel cinsinden ayarlar.
94
Tablo Ekleme
Cellpadding: Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.
95
Tablo Ekleme96
Arka Plan Rengini Değiştirme
Oluşturduğumuz sayfanın artalan rengini değiştirmemiz mümkün. Bunun için body etiketinin parametresi olan bgcolor kullanılır.
Örnek:<body bgcolor=“red”> <body bgcolor=“#FF0000”>
İki örnekte de artalan rengi kırmı olarak ayarlanır.
97
Arka Plan Rengini Değiştirme98
Arka Plana Resim Ekleme
Oluşturduğumuz sayfanın artalanına resim eklemek için body etiketinin background parametresi kullanılır.
Örnek:<body background=“resim.jpg”><body background=“resim.bmp>
NOT:Resimin genişlik ve yükseklik ayarlaması yapılmayacak browser tarafından sayfanın genişliğine göre eklenen resim tekrarlanacaktır.
99
Tablo Arka Plan Rengi
Tablo içinde bulunan hücrelerin artalan rengini değiştirmek için <td bgcolor=“…”> ifadesi kullanılır.
Tablo içinde bulunan hücrelerin artalanına resim eklemek için <td background=“resim.jpg”> ifadesi kullanılır.
100
Örnek<html><head><title> Resim Ekleme </title></head><body bgcolor="blue">
<table border="2"><tr height="50">
<td width="80" bgcolor="red">Kasa</td><td width="40" background="cicek.jpg">Fare</td>
</tr><tr height="100">
<td width="100">Klavye</td><td width="80">Monitör</td>
</tr></table></body></html>
101
Tablo Ekleme102
Ses ve Video Dosyası EklemeWeb Sayfalarımızda Sitemize Gelen
ziyaretçilere Müzik Dinletmek İsteyebiliriz bunu yapabilmek için <embed>…..</embed> etiketi kullanılır.
<Embed src=“ses.mp3”></embed>src ile dosyanın kaynağını gösteriyoruz, autostart ile sayfa açılır açılmaz
etkileşimin çalmaya başlamasını istiyoruz autostart=“true” ve “false” değerini alır
loop sayfamıza eklediğimiz ses veya görüntünün kaç defa çalacağını belirliyor. Eğer loop="true" olursa etkileşim sürekli çalıyor. Loop=“3”
103
Ses ve Video Dosyası Ekleme
hidden ile kontrol konsolunu saklıyoruz. Hidden=“false” , “true”
Volume müziğin sesini arttırmak yada azaltmak için kullanılır (0-100) arasında bir değer alır
<embed src=“ses.mp3” volume=“10”></embed>
104
Ses ve Video Dosyası Ekleme
Örnek:
<embed src="ses.mp3" hidden="false" autostart="true" loop="1" width="300" height="300">
</embed>
105
Artalana Ses Dosyası Ekleme
Sayfamızın artalanına ses dosyası ekleyebilmek için <bgsound> etiketi kullanılır
<bgsound src=“ses.wav"> SRC özelliği kullanılacak müziğin adresini alır. BALANCE değeri müziğin balansını ( steryo )
ayarlar ve -10000 ile 1000 arasında bir değer alır. LOOP özelliği müziğin kaç kere çalacağını belirtir.
-1 ve INFINITE değerleri ile müzik devamlı çalacaktır.
VOLUME özelliği müziğin ses şiddetini ayarlar ve 0 ile -10000 arasında bir değer alabilir.
106
Artalana Ses Dosyası Ekleme
Sitenizi ziyaret edenler sitenizde gezerken müzik dinleyebilir veya video izleyebilirler. Tarayıcınız tüm ses ve görüntü formatlarını tanımaz. Tarayıcınızın uyum sağladı formatlar şunlardır:
• .wav • .wma • .au • .mp3 • .mpg • .mpeg • .avi
107
ÇERÇEVELER
Çerçeveler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. Çerçevelerin özellikleri;
Her çerçeve kendi URL’sine sahiptir.Her çerçeveye ad verilebilir.Her çerçeve kullanıcı tarafından
boyutlanabileceği gibi, kendi kendini de otomatik olarak boyutlayabilir.
108
Çerçeveler
Çerçevelerin kullanım alanları şunlardır:
İçindekiler sayfası hazırlanarak, metin okunurken bir tarafta sürekli içerik görüntülenebilir.
Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir.
Sürekli görünmesi istenen mesajlar için kullanılabilir.
109
Çerçeveler
Bir frame belgesi normal bir HTML belgesine çok benzer. Tek farkı içinde <body>elemanı (tag) yerine, <frameset> elemanı kullanılmasıdır. Basit bir çerçevenin oluşturulması;
<HTML><HEAD>…….</HEAD><FRAMESET>…..</FRAMESET></HTML>
110
Çerçeveler111
frame.htm dosyası:
<html><head><title>Çerçeveler</title></head><frameset cols=“50%,50%"><frame name="sol" src="htm1.htm"><frame name="sag" src="htm2.htm"></frameset><noframes><body>Browser'ınız çerçeve teknolojisini desteklemiyor</body></noframes></html>
112
htm1.htm dosyası: <html>
<head> </head><body bgcolor="red"><font size="7" color="#ffffff">htm1.htm;</font></body></html>
113
htm2.htm dosyası: <html>
<head> </head><body bgcolor="blue"><font size="7" color="#ffffff">htm2.htm;</font></body></html>
114
Çerçeveler
<frameset>=Çerçeve oluşturmada kullandığımız etikettir. Tag ile birlikte kullanılabilecek iki adet parametre vardır. Bunlar cols ve rows’dur. Bu parametreler oluşturulacak pencerelerin cinsini belirler.
Cols=Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yan yana sütunlar şeklinde olmasını sağlar. Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir.
Örnek 1: <frameset cols=”20, 60, 20”>İlk ve sonda tanımlanan çerçeve ortadaki
çerçeveden daha küçük olacaktır.
115
Çerçeveler
Örnek 1: <frameset cols=”20%, 60%, 20%”>
İlk ve sonda tanımlanan çerçeve ortadaki çerçeveden daha küçük olacaktır.
Örnek 2: <frameset cols=”100,*,100”>İlk ve sonda tanımlanan çerçeve sabit aralıklı,
ortadaki çerçeve ise geriye kalan aralığı kullanır.
116
117
Çerçeveler
Rows= Cols etiketinde değerler verilirken kullanılan formatın aynısı kullanılarak çerçevelerin alt alta satırlar görünümünde açılmasını sağlar.
Örnek 1: <frameset rows=” 60%, 40%”>
118
119
120
KullanılacakParametre
Görevi
NAME Çerçevenin adıdır. En önemli parametre sayılabilir. Çünkü frameset’lerde bir çerçevenin içindeki bir link bir başka çerçevenin içeriğini değiştirebilir. Target= “name”
RESIZE/NORESIZE Çerçeve büyüklüğünün değiştirilip değiştirilmeyeceği bilgisini içerir.<frame name="bir" src="cerceve1.htm" noresize >
SCROLLING Çerçevenin içeriğinin bir ekrana sığmaması halindetarayıcının kenara bir kayma çubuğu ekleyip eklemeyeceğinibelirler (yes, no, auto). Varsayılan değeri auto’dur.<frame name="iki" src="cerceve2.htm" scrolling="yes">
MARGINHEIGHT Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.<frame name="uc" src="cerceve3.htm" marginheight="0">
MARGINWIDTH Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.<frame name="uc" src="cerceve3.htm" marginwidth="0">
SRC İçine yerleştirilecek dosyanın URL’sini belirtir. Src’ubelirtmediğiniz takdirde tarayıcı herhangi bir hata vermeyecek, buraya varsayılan renkte boş bir sayfa koyacaktır.
Çerçeve örneği<html>
<head><title>Çerçeveli Sayfa</title></head><frameset cols="50%, 50%" rows="50%, 50%"><frame name="bir" src="cerceve1.htm"><frame name="iki" src="cerceve2.htm"><frame name="uc" src="cerceve3.htm"><frame name="dort" src="cerceve4.htm"><noframes>Browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes></frameset></html>
121
Çerçeve örneği<html>
<head><title>Çerçeveli Sayfa</title></head><frameset rows="50%, 50%" frame border="yes" border="5" bordercolor="#000000"><frame name="bir" src="cerceve1.htm" noresize ><frameset cols="*,*"><frame name="iki" src="cerceve2.htm" scrolling="yes"><frame name="uc" src="cerceve3.htm"> <noframes>Browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes></frameset></html>
122
Recommended