Algoritma ve Programlamaya Giriş

ÖĞ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


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 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


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ı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


<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


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


<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


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


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


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



Ö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


<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


<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


<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ı 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


Altı çizgili (underline) yazı <u>Yazınızı buraya yazacaksınız</u>

51


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


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


<html><head> <title>İlk resimli sayfamız </title> </head><body><img src=“cicek.jpg"></body></html>

69


<html><head><title>Alt parametresi</title> </head><body><img src=“cicek.jpg" alt=“papatya" ></body></html>

70


<html><head> <title>Border parametresi </title>

</head><body><img border=“10” alt=“papatya" src=“cicek.jpg"></body></html>

71


<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


<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

Documents

Algoritma ve Programlamaya Giriş