AÖF Bilgisayar programcılığı Web tabanlı kodlama ilk 4 ünite özet.

Web tabanlı kodlama dersi için ilk 4 ünitenin hazırlandığı ders notunu sizlerle paylaşıyoruz.

1-(NLS) Online sistem olarak adlandırılan aynı ağ üzerinde çalışan ayrıntılı çoklu ortam sistemini geliştiren kişi : Doug Engelbart (1960-1970 ) (bilgisayarların modern dünyanın karmaşık problemlerine çözüm olabileceğini düşünerek bilgisayarların insan aklının artırılmasında kullanılması için çalışmalar yürütmüştür

2- ilk mause kullanımını gerçekleştiren kişi : Ayrıca Engelbart (1967)

3- World Wide Web i (W.WW/ oluşturan kişi : Tim Berners-Lee (1990) Cerrn de yaptığı çalışmalar sonucu oluşmuştur

4- Bünyesindeki farklı bilgilerin paydaşları ile etkili bir biçimde paylaşımı için oluşturulan ilk ağ : ARPANET dir (1969)

5- ARPENET ile gönderilen ilk ağ mesajı : 1969 Kaliforniya Üniversitesi- Los Angeles (UCLA)’a gönderilmiştir.

6- Veri iletiminde farklı bağlantılar ve protokollerin olmasından kaynaklı olarak bağlantı sorunlarını çözmek için yapılan çalışma: Transmission Control Protocol – TCP) farklı ağların birbirleriyle bağlanması standart protokol olmuştur. Çalışmaları yapanlar : stansart Vint Cerf ve Bob Kahn (1974)

7- TCP/ IP (1982) yılında standart internet ağlantı protokolü olmuştur.

8- Günümüzde kullandığımız internet adreslerinin ortaya çıkmasına vesile olan çalışma : Paul Mockapetris tarafından ortaya konulan Alan Adı Sistemi (Domain Name System– DNS) ile ağa bağlı her bir sistemin birbirlerine veri gönderip almak için kullandıkları internet protokol adresini (Internet Protocol Address – IP Adress) okunabilir internet adresleriyle eşleştirilmesiyle olmuştur.

Web tabanlı kodlama

9- Tarayıcı, temel web komutlarını anlayarak GIF ve JPG uzantılı resim dosyalarını görüntülemenize daha da önemlisi dosya indirmenize izin web tarayıcısı : NCSA Mosaic web tarayıcısıdır.

10- Geliştirilen ilk Mosaic web tarayıcısı, grafik ekran sunabilen çalışmanın kullanıldığı işletim sistemi : UNİX işletim seistemleridir.

11- Genel olarak güvenlik ve maliyet açısından sunucularda kullanılan işletim sistemi : Linux temelli işletim sistemleridir.

12 – Web teknolojisinde kullanılan sunucu türleri : • E-posta sunucuları • Web sunucuları • DNS sunucuları • FTP sunucuları • Proxy sunucuları • Güvenlik sunucularıdır.

13- web ağı üzerinden asenkron iletişim kurmaya olanak sağlayan ilk uygulama örneği : E-postadır.

14- Gönderilen e-postanın hangi bilgisayara ve hangi kullanıcıya iletileceğini belirtmek için kullanılan “@” işaretini e- posta adreslerinde ilk olarak kullanan kişi : Ray Tom Linson dur.

15- Posta kutularında gelen e- postaların üst üste binmemesi ve arka arkaya eklenmesi için yazılım geliştiren kişi : Ray Tom Linson dur.

16- E- sunucularının WWW yapısı içerisindeki temel görevi ve , internette yayınlanması istenen bir web sitesine ait tüm dosyaların (HTML) sayfası, resim, video, ses, animasyon vb.) internet kullanıcıları tarafından erişilebilecek bir sunucuya yerleştirilmesi ne: hosting (barındırma) hizmeti adı vermektir

17- Web tasarımcıları, hazırlamış oldukları web sitesine ait tüm dosyaları yayınlayabilmek ve dosyalarını saklayabilmek için aldıkları hizmet türü : Hosting arındırma hizmetidir

18- Web ağı üzerindeki iki bilgisayarın WWW yapısına göre birbirleriyle iletişim kurmak için kullandığı temel protokol hangisidir : HTTP (Hypertext Trasnfer Prothocol) dir.

19- web ağına bağlı olan her bir sisteme verilen ve o sistemi tanımlayan benzersiz numaralara verilen ad : IP

(Internet Protocol) adresidir.

20- Kendi altyapıları üzerinden internet ağına erişim olanağı sağlayan ticari firmalara verilen ad : İnternet servis sağlayıcıları (ISS) dir.

21- web teknolojileri üzerinden kendine erişen istemci ile sunucu arasında dosya paylaşımı sağlayan sistem :

Dosya transfer protokolü (File Transfer Protocol– FTP) dir.

22- FTP protokolü hangi amaçla kim tarafından kullanıldı : FTP protokolü, 1971 yılında ARPANET projesi kapsamında yapılan çalışmalar sonucunda Abhay Bhushan tarafından kullanılmıştır.

23- Bir bilgisayardan diğerine gönderilecek iletiyi, ağ üzerinde gönderilebilecek uzunlukta küçük paketlere bölerek gönderilmesi işlemine verilen isim. TCPprotokolü dür.

24- İlk Web tarayıcısı nerede ne zaman kim tarafından yazılmıştır : İlk web tarayıcısı olan WorldWideWeb, 1990 yılında CERN’de yazılım mühendisi olan Tim Berners-Lee tarafından yazılmıştır.

25- Geliştirilen ilk Mosaic web tarayıcısı, grafik ekran sunabilen hangi işletim sistemleri için oluşturulmuştur: UNIX işletim sistemleri için oluşturulmuştur.

26- Windows işletim sistemleri için geliştirilen ilk web tarayıcısı : Cello dur (1993)

27- Windows sistemler için geliştirilen, HTML3 desteği, zoom özelliği ve çoklu resim, video desteği gibi birçok özelliği

Ulunan Web tarayıcısı : Opera We tarayıcısıdır. (1996)

28- Tarayıcısında ilk e-posta ve haber grubu üyelikleri, internet sayfası geliştirme aracı, internet üzerinden sohbet etmeye olanak sağlayan IRC (Internet Relay Chat – İnternet Aktarımlı Sohbet) istemcisi bulunduran Web tarayıcısı : Mozilla dır.

29- Apple firmasının Macintosh bilgisayarlar için yayınladığı ilk Web tarayıcısı: Safari dir

30- Apple firması Windows için yaptığı ilk safari web tarayıcısı hangi yıl kullanılmıştır : 2007

31- Yandex Web tarayıcısı hangi yıl yayınlanmıştır: 2002

32- 4 saatte en çok indirilen program” kategorisinde dünya rekoru kıran Web tarayıcısı : Firefox 3 web tarayıcısı (2008)

33- Bilgisayar iletişim protokolleri (TCP/IP), dosya aktarım protokolleri (FTP), e-posta protokolleri (SMTP), alan adı sistemi (DNS) gibi webin arkaplanında çalışan birçok işleyişin temellerinin atıldığı yer : Amerikan Savunma Bakanlığı’na bağlı İleri Araştırma Projeleri Kurumu (ARPA)dır.

34- . Hipermetin transfer protokolleri (HTTP), hipermetin işaretleme dili (HTML), benzersiz kaynak konumlaması (URL), sunucular, web tarayıcıları ve web sayfaları gibi birçok gelişme hangi tarihten itibaren başlamıştır : 1990

35- Bir web tarayıcısının adres çubuğuna bir web sitesinin adresi yazılarak görüntülenmek istediğinde, öncelikle web tarayıcı web sitesine ait dosyaları barındıran sunucu bilgisayarlarla hangi protokolle iletişim kuracağına karar vermektedir. Bunun için görüntülenmek istenen adresin baş kısmında bulunan protokol türleri : (http, ftp vb.) dir

36- Web tarayıcılarında sunucu bilgisayarla iletişim kurma sıralaması: Dosya barındırma protokolü (http/ FTP / daha sonra alan adı /Yerel DNS sunucusu ile Belirlenen sunucu bilgisayarın DNS si ile IP adresi ne ulaşması/ daha sonra istenilen web sayfasına ulaşılması.

37- Farklı işletim sistemlerine ait web tarayıcılarının oluşturulmuş bir web sayfasını aynı biçimde görüntülemesindeki temel nedeni : Web sayfasının HTML diliyle oluşturulmasıdır.

38- Web sitesi tasarımında Türkçe karakter sorunu nu çözmek için yapılacak işlem : Meta etiketine charset parametresi olarak UTF-8 veya Windows-1254 atamak sorunu çözecektir

39- Web sitesi tasarımında başlık hazırlama komutu : <h> etiketi ile yapılır (1 ile 6 arasında değer alır ve sayı arttıkça başlığın büyüklüğü azalmaktadır.)

40- Metin içerisinde kullanılan vurgu etiketleri : 3 tanedir. Bu etiketler koyu için <b> , italik için <i> ve altı çizili için <u>’dur. Vurgu yapılacak kelime veya kelimelerden önce bu etiketler kullanılmaya başlanır, bitiminde ise kullanılan etikete göre </b>, </ şeklinde kapatılır.

41- Metindeki yazı rengini, stilini ve büyüklüğünü değiştirmek için kullanılan etiket: <font> etiketi dir. Ayrıca

değişikliğin etkisini sürdürmemesi için yine </font> etiketi ile ilgili yerde kapatma işlemi yapılmalıdır.

42- Metindeki yazıya özellik verilmesi gerekiyorsa aldığı parametreler: 3 tane parametre alır: . face parametresi ile yazı tipi (times new roman, arial vb.), size ile punto olarak yazı büyüklüğü, color ile de yazı rengi değiştirilebilir.

43-Kelimeler arasında boşluk vermek için kullanılan html etiketi : &nbsp

44- Alt satıra geçişte kullanılan html etiketi : , <br>

45- Metinler de hizalama yapmak için kullanılan html etiketi : <p> dir ve içerisinde align parametresi kullanılmalıdır.

Dört değer almaktadır. Right sağa, left sola, justify iki yana, center ortaya hizalama için align parametresine atanmalıdır.

46- Html işaretleme dilinde kaç çeşit liste kullanılır : 3 çeşit : (<ol>) ,(<ul>),(<ul>) etiketleridir.

47- Html işaretleme dilinde sıralı liste oluşturmak için kullanılan etiket : (<ol>)dir

48- Html işaretleme dilinde sıraSız liste oluşturmak için kullanılan etiket : (<ul>)dir

49- Html işaretleme dilinde Kategorik liste oluşturmak için kullanılan etiket : (<dl>)dir

50-Link vererek kendi menümüzü oluşturabileceğimiz etiket : <a>

51- Herhangi bir metin veya resme tıklanması durumunda yeni bir sayfanın açılması, sayfanın yeniden yüklenmesi, resim, ses veya video dosyalarının açılmasını sağlamak için yapılan işlem : Link veya köprü verme işlemidir. Kullanılan etiket : <a href=”….”>…</a> etiketidir.

52- Köprü veya link verme etiketi : <a href=”….”>…</a>

53- web sayfalarda nesnelerin biçimlendirilmesi için kullanılan etiket : (style)

54- Html’de bütün sayfa için yapılması planlanan değişiklikler hangi etiket içerisinde yapılır : <body>

55- Herhangi bir resim dosyası arka plana hangi etiketle eklenebilir: background parametresi ile.

Örnek : <body bgcolor=”#FFFF00” background=”balik. jpg”>

56-</body> Etiketi içerisinde Stil parametresinin alabileceği bazı özellikler, işlevleri ve örnek değerler

color Yazı rengi red, blue, #FFAA00

font-family Yazı stili Verdana, arial

font-size Yazı büyüklüğü 300%, x-small

text-align Hizalama Center, left, right, justify

text-indent Paragraf girintisi 1em veya 50px gibi

background-color Zemin rengi red, blue, #FFAA00

text-decoration Altı çizili olma Underline, overline

text-transform Büyük küçük harf dönüşümü Uppercase, lowercase, capitalize

57- Paragraflarda kullanılan yazının rengini yazıtipini <p> etiketinin kullanıldığı yerlerde tek tek değiştirmek yerine tek seferde değiştirmek için kullanılan etiket : <head> </head> etiketleri arasında <style> </style> etiketleri

arasına gömülü stil olarak tanımlamak yeterli olacak, tüm <p> etiketlerinde ilgili değişiklik otomatik olarak geçerli olacaktır. Örnek :

<head>

p { text-indent: 2em; font-family:arial; color: red;>

h1 {color:green;}

i {color: #0925F4 ; font-family: verdana ; text-decoration: underline; }

…

</style>

</head>

58-Tasarımcının kendine özgü kurallar listesi belirleyerek stil tanımlaması yapabilmesine olanak veren tanımlamalar : class seçici ve id seçici dir.

class= “ ” ile bu şekilde tanımlama yapılabilir.

id= “ ” ile bu şekilde tanımlama yapılabilir.

59- id ve class’ın metin içerisinde özel bir bölgeye tanımlanan stillerin uygulanabilmesinde kullanılan işlevsel html etiketi : <span>

60- Dışarıdan CSS çağırmada kullanılan etiketler : Link ve @import etiketleridir. Aynı işlevi yapmakla birlikte aralarında küçük bir fark vardır. Önek :

Css dosyasının link etiketi ile çağrılması

Css dosyasının @import etiketi ile çağrılması

@import “style.css”;

</style>

61- Bir html sayfası kaç bölümden oluşur : 3 bölümden : . <html> </html> kodların başlayıp bittiğini vurgular ve ilk satır ile son satırı oluşturur. İkinci bölüm ise <head> </head> bloğu olup bu yapı arasında sitenin başlığı, dil ayarları gibi özellikleri ayarlanır. Üçüncü bölüm ise <body> </body> etiketleri arasına yazılmakla birlikte bu bölüm html’nin asıl tasarım bölümünü oluşturmaktadır.

62- Farklı etiketler ile resim, metin, tablo gibi nesnelerin nerede ve nasıl görünmesi gerektiği hangi etiketler arasında tanımlanır : <body> </body>

63- Bir paragraf oluşturmak ve bu paragraf kontrol altına alınmak istenirse oluşturulacak etiket : <p> </p> etiketleri arasında paragraf yazılır.

64- Paragraf içerisinde belirli bir bloğun seçilmesini sağlayan etiket : <span>

Not : Köprü ve linkler sayfalar içerisinde geçişi veya sayfalar içerisindeki word belgesi, resim, video ya da müzik dosyalarına indirme özelliği kazandırabilmeyi sağlayan etiketleri kapsamaktadır. Bunun için kullanılan temel etiket ise <a>etiketidir. <a href= “..link..”>link verilecek nesne </a> yapısında link verme işlemi yapılmaktadır. Burada href= “link” kısmı ile etkilenen yani tıklanması durumunda ne yapılması isteniyorsa o adres olarak gösterilir. Örneğin bir yazıya tıklanınca iletisim.html dosyası açılacak ise <a href= “iletisim. html”> Biz kimiz </a> şeklinde etiket yazılmalıdır.

Not : Metinlerde stil kullanımı metnin belirli bir bölümünde belirlenen kuralların geçerli olması işlemi olarak özetlenebilir. Bu işlem style parametresi ile yapılabileceği gibi, çok sık kullanılacak bir işlem ise kurallar listesi isimlendirilerek belirlenen yerlerde bu isim aracılığı ile kuralların yansıtılması şeklinde de yapılabilir.

Örneğin <h1 style= “color=blue”> şeklinde bir kullanım ile başlık metninin mavi olması sağlanabilir. Benzer şekilde

<a href= “iletişim.html” style= “color=red”> şeklindeki bir stil kullanımı ile de linkin mavi yerine kırmızı renkli görünmesi sağlanabilir. Diğer kullanımlar ise gömülü ve seçiciler ile stil kullanımlarıdır.

Gömülü kullanımda <style type= “text/ css”> <style> etiketleri arasında kurallar belirlenir ve tüm site için bu kurallar otomatik olarak yansıtılır. Örneğin h1 {color=red;} yapılır ise bu durumda site içerisindeki tüm h1 kullanılan etiketler kırmızı renkli olacaktır. Son olarak seçiciler kullanılabilir. Class seçici ve id seçici sırası ile . ve # işaretleri ile özel kuralların belirlenmesini sağlar. Belirlenen bu seçici isimleri etiketlerde kullanılarak kurallar bu kısımlara yansıtılabilir. Örneğin .ahmet class veya #ahmet id isimli kurallar tanımlanmış olsun. #ahmet {color:red; text-align=left;} şeklindeki kuralın istenilen yere yansıtılması <h1 id= “ahmet”>, <p id= “ahmet”>, <span id= “ahmet”> şeklinde yapılmaktadır. Bu açıdan özellikle <span> </span> etiketleri ile css kullanım alanı belirlenebilmektedir. Span metinlerde stil kullanımı açısından önemli bir etikettir. Html’de resimlerin gösterimi için img etiketi aşağıdaki şekilde kullanılmaktadır.

<img src=”resmin bulunduğu konum ve resim dosyasının adı “ width=”x” height=”y”> Width ve Height ise kullanımı zorunlu olmamakla birlikte resmin sayfa içerisindeki büyüklüğünü pixel olarak ifade etmektedir. Bir tasarımcı resmin boyutlarını program aracılığı ile hiç değiştirmeden sayfasında bu iki parametreyi kullanarak istediği ebatlarda gösterebilir. Resimlerin gösterimi width ve height ile istenilen ebatta yapılabilmesine karşın, özellikle mobil uygulamalar düşünülerek profesyonel tasarımda bu tür ayarlamalar için photoshop, paint gibi programlar aracılığı ile orijinal dosya boyutu küçültülmelidir.

65- Resim etiketi olan <img> etiketinin alabileceği birkaç önemli parametre : border, alt, align ve usemap parametreleridir.

Not : Eğer resme çerçeve verilecekse border parametresine değer atanmalıdır (ör: border= “4”). Atanan değer 0 olursa çizgi olmayacağı anlamına geleceği gibi, bu değer ne kadar fazla olursa çizginin kalınlığı da o kadar artacaktır. Alt resmin açılmaması durumunda veya üzerine gelinmesi durumunda görünmesi istenilen metnin görüntülenmesi, align ise resmin sayfaya göre hizalanması (sağa – right ya da sola – left ) amacıyla kullanılır. Örneğin resim yüklenememişse “Manzara resmi” yazsın ve resim sağa hizalı olarak görünsün şeklindeki bir img etiketi aşağıdaki şekilde olmalıdır .

<img> etiketinin parametre olarak align parametresi sadece sol – left ve sağ – right değerlerini almaktadır. Ortalama

işlemi için bu parametre çalışmamaktadır. Ancak resmi ortalamak isteyen bir tasarımcı img parametresinin önünde kullanacağı <center> ve sonunda kullanacağı </center> etiketleri ile bu sorunu aşağıdaki şekilde çözebilir.

Hangi çokluortam özelliği olduğuna bakılmaksızın <center> etiketi ile istenilen tüm öğelerin sayfayı ortalaması sağlanabilir. <center> <img src=”resimler/manzara.jpg” width=200height=120 > </center>

<img> etiketinin alacağı bir diğer parametre ise usemap olup, resim haritalarının oluşturulmasında kullanılmaktadır.

Resim haritaları (image maps) resimlerin üzerindeki bir veya daha fazla noktaya link verme amacı ile kullanılmaktadır.

Örnek olarak yedi coğrafi bölgeden oluşan Türkiye Coğrafi Bölgesi haritası göz önünde bulundurulur ve bolgeler.html sayfasında kullanıldığı varsayılırsa, her bir bölge için resim üzerinde resim haritası ile belirli alan link olarak oluşturulabilir ve yedi bölgeden herhangi birini oluşturan alana tıklanması durumunda kendi bölgesine ait html (örneğin marmara.html, akdeniz.html vb.) dosyasının açılması sağlanabilir. Resim haritalarının oluşturulmasında <img> etiketi usemap parametresi ile kullanılmalıdır. Bu kullanımda ilişkilendirme değeri kullanılırken önüne # işareti unutulmamalıdır. Sonrasında ise <map> etiketi ile resim haritalarının alanları ve link işlemleri atanır.

Önek : Web sayfasına resim ekleyebilme: <img src=”resimler/bolgeler.png” width=”800” height=”600” border=”1”

66- Resim üzerinde işaretlenecek alan veya alanların şekillerinin belirlenmesi için kullanılan parametre : Shape parametresidir. ve rect (dikdörtgen), circle (daire), poly (çok kenarlı) olmak üzere üç farklı değer alabilmektedir.

Önek : usemap=”#bolgeharita”>

</map>.

67- Resim üzerinde işaretlenecek alanın genişliğini pixel olarak belirlemek için kullanılan etiket : Coords

Not : Coords parametresi ise resim üzerinde işaretlenecek alanın genişliğini pixel olarak belirlemek için kullanılmakla

beraber kullanım şekli tercih edilen shape seçeneğine göre değişmektedir. shape=“rect” yani dikdörtgen alan oluşturmak için 2 nokta tanımlanmalıdır. Bunlar sol üst ve sağ alt noktadır (coords=X1,Y1,X2,Y2) ve tanımlama <area shape=”rect” coords=”0,0,30,20”) şeklinde olacaktır. Büyüklük için dairesel yani shape=“circle” şeklinde bir alan belirlenecek olursa bu durumda coords parametresinde (coords=X1,Y1,r) koordinatlar dairenin merkezini ve yarıçapını gösterir tanımlama ise <area shape=”rect” coords=”50,50,25”) şeklinde olacaktır. Serbest olarak bir alan belirlenecekse bu durumda X ve Y koordinatları istenilen sayıda kullanılabilir (coords=X1,Y1, …,Xn,Yn) ve en son seçimdeki koordinatlar ile ilk koordinatlar birleştirilecektir, tanımlama ise <area shape=”poly” coords=”0,0,25,50,48,78,75,100”) Area ile resmin üzerinde bölgeler oluşturulabilir. Rect, circle ve poly olmak üzere

üç tür shape seçeneği vardır ve seçilen shape seçeneğine göre coords parametresinin kullanımı da farklılaşmaktadır.

Son olarak area etiketi ile oluşturulan her bir seçenek yani link verilmiş bölgeye tıklanması durumunda ne olacağını belirlemek için href parametresi kullanılır ve link verilir. href parametresine atanacak değer ile başka bir html dosyasına yönlendirme yapılabileceği gibi, bir Word dosyasına link verme, müzik dosyasına link verme veya zip dosyası gibi bir dosyaya link verme işlemi de yapılabilir.

68- Başka bir html dosyasına yönlendirme yapmak yada , bir Word dosyasına link verme, müzik dosyasına link verme veya zip dosyası gibi bir dosyaya link verme işlemi yapmamıza olanak sağlayan etiket : href etiketidir.