Algoritma ve Programlamaya Giriş

1. Algoritma ve Programlamaya Giriş Öğr. Gör. Hüseyİn BAĞRIYANIK

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

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

4. 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 iletisimkurdugu 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 iletisimkurdugunda IP adresini kullanır.

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

6. 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 çubugunawww.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 baglanarakistediginiz bilgilere erismenizisaglayacaktır.

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

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

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

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

11. Web Tarayıcıların Çalısması • Örnegin; Milli EgitimBakanlıgının web sitesine bakıyorsanız sizin bilgisayarınız Ankara’daki bir sunucudan web sayfalarına erismekistedigi mesajını yollamıstır. • Milli EgitimBakanlı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

12. Web Tasarımı

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

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

15. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETIKETLERI

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

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

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

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

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

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

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

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

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

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

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

27. <HEAD> • 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.

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

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

30. <TITLE> <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> Head bölümü içine yazılan titlebö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.

31. İ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.

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

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

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

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

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

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

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

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

40. Yazı (Tip, Renk, Büyüklük)

41. Yazı (Tip, Renk, Büyüklük)

42. Yazı (Tip, Renk, Büyüklük) Örnek:

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

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

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

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

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

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

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

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