Algoritma ve Programlamaya Giri R GR HSEYN BARIYANIK

Algoritma ve Programlamaya Giriş ÖĞR. GÖR. HÜSEYİN BAĞRIYANIK

HTML 2 �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

INTERNET 3 �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.

IP (Internet Protocol) Numarası 4 �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.

Internet Alanı (Domain) 5 �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.

Internet Alanı (Domain) 6 �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.

Internet Alanı (Domain) 7 �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)

Internet Alanı (Domain) 8 �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.

Web Tarayıcılar 9 �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.

Web Tarayıcıların Çalısması 10 �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.

Web Tarayıcıların Çalısması 11 �Ö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

Web Tasarımı 12

Sayfa Hazırlarken Dikkat Edilecek Noktalar 13 �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.

Sayfa Hazırlarken Dikkat Edilecek Noktalar 14 �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.

HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETIKETLERI 15

HTML Komut Yapısı 16 �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, Front. Page, Netscape Composer gibi gelismis araçlar da kullanılabilir.

HTML Komut Yapısı 17 �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.

Yazım Kuralları 18 �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.

Yazım Kuralları 19 �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>

Yazım Kuralları 20 �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>

21 Yazım Kuralları �Örnek : �<HTML> �<BODY> �. . . �<FORM> �. . . �</FORM> �</BODY> �</HTML> Örnek: <html> <body> …… <form> …… </form> </body> </html>

Yazım Kuralları 22 �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.

Yazım Kuralları 23 �Kullanım biçimi: �<tag_adi parametre_adi ="deger"> �Örnek: �<body bgcolor="blue">

Yazım Kuralları 24 �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.

<HTML> 25 �<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.

<HTML> 26 �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>

<HEAD> 27 �HTML belgesinin ilk bölümüdür. �Web sayfası ile ilgili temel özellikler, �sayfa baslığı, �yazı karakterler kümesi �link özellikleri �Meta etiketi burada tanımlanır. NOT: Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.

<BODY> 28 �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.

29 <TITLE> �Her sitenin bir adı olması gerekir. <title> Sefaköy Kültür Merkezi</title>

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

31 � Önce not defterimizi açalım. Sayfamızı yapalım � Aşağıdaki yazıyı İlk 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.

Yazı (Tip, Renk, Büyüklük) 32 �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.

Yazı (Tip, Renk, Büyüklük) 33 �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

Yazı (Tip, Renk, Büyüklük) 34 �<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>

Yazı (Tip, Renk, Büyüklük) 35 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. . �<h 1> FENERBAHÇE </h 1> �<h 2> FENERBAHÇE </h 2> �<h 3> FENERBAHÇE </h 3> �<h 4> FENERBAHÇE </h 4> �<h 5> FENERBAHÇE </h 5> �<h 6> FENERBAHÇE </h 6> �

Yazı (Tip, Renk, Büyüklük) 36 �<h 1> FENERBAHÇE </h 1> �<h 2> FENERBAHÇE </h 2> � <h 3> FENERBAHÇE </h 3> �<h 4> FENERBAHÇE </h 4> � <h 5> FENERBAHÇE </h 5> � <h 6> FENERBAHÇE </h 6>

Yazı (Tip, Renk, Büyüklük) 37 �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 - mavi yellow - sarı white - beyaz black - siyah

Yazı (Tip, Renk, Büyüklük) 38 �Kodlarla yazmak istiyorsanız, color="#FF 0000" renk adı yerine kod yazmanız gerekir. �red - #ff 0000 blue - #0000 ff yellow - #ffff 00 white - #ffffff black - #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.

Yazı (Tip, Renk, Büyüklük) 39 �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.

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 43 �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. �<h 1 align=“center”>……. . </h 1>

Yazıyı Sayfaya yerleştirme 44 �<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

Yazıyı Sayfaya yerleştirme 45 � <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>

Yazıyı Sayfaya yerleştirme 46 �<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>

Satırbaşı ve paragraf yapmak 47 � �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. 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. � komutunu </br> komutuyla kapatmaya gerek yoktur.

Neler Öğrendik 48 �<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>

Kalın, eğik ve altı çizgili yazmak 49 �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>

Yazıyı Sayfaya yerleştirme 50 �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>

Yazıyı Sayfaya yerleştirme 51 �Altı çizgili (underline) yazı �<u>Yazınızı buraya yazacaksınız</u>

Yazıyı Sayfaya yerleştirme 52 �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>

Listeleme Etiketleri 53 �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.

<LI> 54 �<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.

55 <LI> � <HTML> � <HEAD><TITLE>listelem e</TITLE></HEAD> � <BODY> � <LI>elma � <LI>armut � <LI>ayva � <LI>karpuz � <LI>portakal � <LI>mandalina � </BODY> � </HTML>

<OL>(Sıralı listeleme) 56 � 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.

<OL> 57 �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, iii gibi)

<UL>(Sırasız Listeleme) 58 �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.

LİSTELEME 59

ÖRNEK 60

ÖRNEK 61

ÖRNEK-SIRALI LİSTE <ol type="1"> 62 <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>

ÖRNEK-SIRASIZ LİSTE <ul 63 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>

Tanımlama Listeleri 64 � Bu 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.

Örnek 65 Başlık Kısmı: İçerik Kısmı Buraya yazılıcaktır. <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 Listeleri 66

Web sayfanıza Resim eklemek 67 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. . .

Web sayfanıza Resim eklemek 68 �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şli k”>

Web sayfanıza Resim eklemek 69 <html> <head> <title>İlk resimli sayfamız </title> </head> <body> <img src=“cicek. jpg"> </body> </html>

Web sayfanıza Resim eklemek 70 �<html> <head><title>Alt parametresi</title> </head> <body> <img src=“cicek. jpg" alt=“papatya" > </body> </html>

Web sayfanıza Resim eklemek 71 <html> <head> <title>Border parametresi </title> </head> <body> <img border=“ 10” alt=“papatya" src=“cicek. jpg"> </body> </html>

Web sayfanıza Resim eklemek 72 <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>

Web sayfanıza Resim eklemek 73 <html> <head> <title>Resimde boyut belirleme </title> </head> <body> <img src=“cicek. jpg" alt=“papatya“ height=“ 300" width=“ 200" > </body> </html>

BAĞLANTI (KÖPRÜ) OLUŞTURMA 74 �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.

BAĞLANTI (KÖPRÜ) OLUŞTURMA 75 Bağlantının açılacağı pencereyi belirtmek için "target" parametresinide kullanabiliriz. <a href=". . . " target=". . . " ></a>

BAĞLANTI (KÖPRÜ) OLUŞTURMA 76 �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

Köprü Oluşturma 77 �Ö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.

Sayfa İçi Bağlantı Oluşturma 78 �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>

79

80

E-Posta Adresine Bağlantı Oluşturma 81 �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.

E-Posta Adresine Bağlantı Oluşturma 82 �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.

83

TABLOLAR 84 �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.

Tablo Ekleme 85 �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.

Tablo Ekleme 86

Tablo Ekleme 87 �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.

Tablo Ekleme 88 �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.

Tablo Ekleme 89

Tabloyu Hizalama: align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, 90 align=right sağa dayalı yapar, align=center ortalar. <table border="1" align="left"> <tr> <td>hücre 1</td> </tr> <td>hücre 2</td> </tr> </table> <table border="1" align="right"> <tr> <td>hücre 1</td> </tr> <td>hücre 2</td> </tr> </table>

Hücre Birleştirme 91 �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.

Tablo Ekleme 92 Örnek:

Tablo Ekleme 93 �Örnek:

Tablo Ekleme 94 �Cellspacing: Tablonun. içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlar.

Tablo Ekleme 95 �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.

Tablo Ekleme 96

Arka Plan Rengini Değiştirme 97 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=“#FF 0000”> İki örnekte de artalan rengi kırmı olarak ayarlanır.

Arka Plan Rengini Değiştirme 98

Arka Plana Resim Ekleme 99 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.

Tablo Arka Plan Rengi 100 �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.

Örnek 101 <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>

Tablo Ekleme 102

Ses ve Video Dosyası Ekleme 103 �Web Sayfalarımızda Sitemize Gelen ziyaretçilere Müzik Dinletmek İsteyebiliriz bunu yapabilmek için <embed>…. . </embed> etiketi kullanılır. �<Embed src=“ses. mp 3”></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”

Ses ve Video Dosyası Ekleme 104 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. mp 3” volume=“ 10”> </embed>

Ses ve Video Dosyası Ekleme 105 �Örnek: <embed src="ses. mp 3" hidden="false" autostart="true" loop="1" width="300" height="300"> </embed>

Artalana Ses Dosyası Ekleme 106 �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.

Artalana Ses Dosyası Ekleme 107 �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 • . mp 3 • . mpg • . mpeg • . avi

ÇERÇEVELER 108 �Ç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, kendini de otomatik olarak boyutlayabilir.

Çerçeveler 109 Ç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.

Çerçeveler 110 �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>

Çerçeveler 111

frame. htm dosyası: �<html> 112 <head> <title>Çerçeveler</title> </head> <frameset cols=“ 50%, 50%"> <frame name="sol" src="htm 1. htm"> <frame name="sag" src="htm 2. htm"> </frameset> <noframes> <body>Browser'ınız çerçeve teknolojisini desteklemiyor </body> </noframes> </html>

113 htm 1. htm dosyası: <html> <head> </head> <body bgcolor="red"> <font size="7" color="#ffffff">htm 1. htm; </font> </body> </html>

114 htm 2. htm dosyası: <html> <head> </head> <body bgcolor="blue"> <font size="7" color="#ffffff">htm 2. htm; </font> </body> </html>

Çerçeveler 115 �<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 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.

Çerçeveler 116 �Ö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.

117

Çerçeveler 118 �Rows= Cols etiketinde değerler verilirken kullanılan formatın aynısı kullanılarak çerçevelerin alta satırlar görünümünde açılmasını sağlar. �Örnek 1: <frameset rows=” 60%, 40%”>

119

Kullanılacak Parametre NAME Görevi Ç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=120 “name” RESIZE/NORESIZE Çerçeve büyüklüğünün değiştirilip değiştirilmeyeceği bilgisini içerir. <frame name="bir" src="cerceve 1. htm" noresize > SCROLLING MARGINHEIGHT Çerçevenin içeriğinin bir ekrana sığmaması halinde tarayıcının kenara bir kayma çubuğu ekleyip eklemeyeceğini belirler (yes, no, auto). Varsayılan değeri auto’dur. <frame name="iki" src="cerceve 2. htm" scrolling="yes"> Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler. <frame name="uc" src="cerceve 3. htm" marginheight="0"> MARGINWIDTH Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler. <frame name="uc" src="cerceve 3. htm" marginwidth="0"> SRC İçine yerleştirilecek dosyanın URL’sini belirtir. Src’u belirtmediğiniz takdirde tarayıcı herhangi bir hata vermeyecek, buraya varsayılan renkte boş bir sayfa koyacaktır.

Çerçeve örneği �<html> 121 <head> <title>Çerçeveli Sayfa</title> </head> <frameset cols="50%, 50%" rows="50%, 50%"> <frame name="bir" src="cerceve 1. htm"> <frame name="iki" src="cerceve 2. htm"> <frame name="uc" src="cerceve 3. htm"> <frame name="dort" src="cerceve 4. htm"> <noframes>Browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html>

Çerçeve örneği �<html> 122 <head> <title>Çerçeveli Sayfa</title> </head> <frameset rows="50%, 50%" frame border="yes" border="5" bordercolor="#000000"> <frame name="bir" src="cerceve 1. htm" noresize > <frameset cols="*, *"> <frame name="iki" src="cerceve 2. htm" scrolling="yes"> <frame name="uc" src="cerceve 3. htm"> <noframes>Browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html>