HTML 5. Bölüm. Doç. Dr. İsmail Rakıp Karaş Dersin Course Page:

Transkript

1 HTML 5. Bölüm Doç. Dr. İsmail Rakıp Karaş (Son Güncelleme: ) Dersin Course Page:

2 WEB SAYFALARINDA RENKLER COLORS IN WEB PAGES Web sayfasında herhangi bir nesnenin (yazı, arkaplan, tablo, vb.) rengini değiştirmek için şu üç yöntemden biri kullanılabilir: 1. RGB kodu: rgb(kırmızı kodu, yeşil kodu, mavi kodu) 2. RGB kodunun Hekzadesimal karşılığı 3. Rengin ingilizce adı To define the color of an item (font, background, table, etc) in a HTML web page, one of the these three methods can be used: 1. Decimal RGB Code: rgb(red value, green value, blue value) 2. Hexadecimal RGB Code 3. The exact name of the color (Just for main colors)

3 RGB Renk Kodu / RGB Color Code İnternet'te kullanılan renk sistemi RGB renk sistemidir. Bunun sebebi, 1953'te ilk anında çıktı veren fotoğraf makinesi Polaroid'te ve ondan sonra da televizyonlarda standart kabul edilmiş olmasıdır. Günümüzde de tüplü ekranlarda, tarayıcılarda, televizyon ve manuel fotoğraf makinelerinde standart olarak kullanılır. In Internet, RGB Color System is used. It comes from the photography history. RGB system was accepted as the standart, firstly in Polaroid cameras, and then in TV s. Today, all monitors, scanners, TV s, and cameras use this system.

4 RGB Renk Kodu / RGB Color Code RGB renk uzayı, İngilizcedeki 'Red' 'Green' 'Blue' (yani 'Kırmızı' 'Yeşil' 'Mavi') kelimelerinin baş harflerinden ismini alan bir renk uzayıdır. En sık kullanılan renk uzaylarındandır. (CMYK renk uzayı, HSV renk uzayı gibi başka renk uzayları da vardır, fakat HTML de RGB uzayı kullanılır) Işığı temel alarak, doğadaki tüm renklerin kodları bu üç temel renge referansla belirtilir. Bu üç renk %100 oranında karıştırıldığında beyaz ve %0 oranında karıştırıldığındaysa siyah elde edilir. RGB in RGB color space, comes from 'Red' 'Green' 'Blue' words. This space is used very common. (Some of other color spaces are: CMYK cs, HSV cs. In HTML RGB cs is also used. All of the colors in nature, can be defined by using this system. If each of these three colors mixed in 100%, the white color will be acquired. If mixed in 0% %, the black color will be acquired.

5 RGB Renk Kodu / RGB Color Code Bu üç rengin karışımı kullanılarak istenilen renk ortaya çıkarılır. Burada her renk değeri için 0 ile 255 arasında bir tamsayı girilmek zorundadır. Mesela iyi anlaşılabilmesi için mavi rengin kodunu verelim kırmızı ve yeşilin renk değerlerini 0 yaptık mavinin renk değerini ise 255 olarak atadık ve ortaya mavi renk çıktı. By mixing these three colors, every color can be acquired. For each of R, G, B colors, a number between 0 and 255 should be defined For example; for pure blue:

6 RGB Renk Kodu / RGB Color Code Yine siyah için yani tüm renk değerlerini sıfıra eşitledik, beyaz için ise değerlerini kullanmamız gerekmektedir. Bu değerler ile oynanarak istenilen renk elde edilebilir. For black: For white: The Decimal number system is used in RGB system. Görüldüğü gibi bu sistemde onlu sayı sistemi (Decimal) kullanılmakta ve her bir renge arasında değerler verilmektedir.

7 RGB Renk Kodu / RGB Color Code Üç renk için arasında tanımlanan bu değerler üç-baytlık decimal bir numaradır. Baytlar, kullanılacak olan rengin kırmızı, yeşil ve mavi bileşenlerini betimler. Her bayt 0 ile 255 arasında bir sayı ile belirtilir. Bayt 1: kırmızı değer Bayt 2: yeşil değer Bayt 3: mavi değer Bu sistem kullanarak oluşturulabilen renk sayısı: Each of these three numbers has one byte value. Every byte keeps a number between 0 and 255. Byte 1: Red value Byte 2: Green value Byte 3: Blue value Total number of colors (tone) can be obtained by using this system is: 256 x 256 x 256 = dir 256 x 256 x 256 = dir

8 RGB Renk Kodu / RGB Color Code RGB uzayına göre renklerin oluşturulması / RGB Color Space ÖRN / Exp: <font color=rgb(255,0,255) size="30">bilgisayar Mühendisliği</font>

9 Üçlü Hex RGB Renk Kodu Hexadecimal Color Code Hex üçlüsü ise altı haneli, üç-baytlık hexadecimal bir numaradır. Baytlar, kullanılacak olan rengin kırmızı, yeşil ve mavi bileşenlerini betimler. Her bayt heksadesimal gösterim ile 00 ile FF arasında bir sayı ile belirtilir. Örneğin, renk değerleri kırmızı=36, yeşil=104, ve mavi=160 olan renkteki bu değerler 24, 68 ve A0 heksadesimal sayılarına denk gelmektedir. Elde ettiğimiz heksadesimal renk değerlerini yanyana yazacak olursak, 2468A0 hex üçlüsünü elde etmiş oluruz. Colors are also defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign. For example; to define this color: red=36, green=104, blue=160, the numbers should be converted to hexadecimal number system: 24, 68 and A0. So the hex RGB code is: 2468A0 ÖRN: <font color= "#964B00" size="30">bilgisayar Mühendisliği</font>

10 Doğrudan Rengin İngilizce adını kullanmak (Ana renkler için) For the main 18 colors, exact english name of the color can be directly used. ÖRN: <font color= "blue" size="30">bilgisayar Mühendisliği</font> Web renkleri siyah güm üş gri beyaz kırmı zı bordo mor galiba rda yeşil çim zeyti n sarı altu nî turunc u mav i laciv ert teal turku az Yazılış black silve r gray white red maroo n purple fuchsi a gree n lime olive yellow gol d orange blue navy teal aqua

11 Gizliliğinizi korumaya yardımcı olmak için, PowerPoint bu dış resmin otomatik olarak karşıdan yüklenmesini önledi. Bu resmi karşıdan yükleyip görüntülemek için, İleti Çubuğu'nda Seçenekler'i tıklatın ve sonra Dış içeriği etkinleştir'i tıklatın. Güvenli Renkler Güvenli renkler tüm ekran ve tarayıcılarda aynı sonucu verirler. Altı çizili olan renk kodları güvenli renklerden bazılarıdır. Bugün çok anlamlı değildirler C00 F C03 F C06 F C09 F09 00C 30C 60C 90C C0C F0C 00F 30F 60F 90F C0F F0F C30 F C33 F C36 F C39 F39 03C 33C 63C 93C C3C F3C 03F 33F 63F 93F C3F F3F C60 F C63 F C66 F C69 F69 06C 36C 66C 96C C6C F6C 06F 36F 66F 96F C6F F6F C90 F C93 F C96 F C99 F99 09C 39C 69C 99C C9C F9C 09F 39F 69F 99F C9F F9F 0C0 3C0 6C0 9C0 CC0 FC0 0C3 3C3 6C3 9C3 CC3 FC3 0C6 3C6 6C6 9C6 CC6 FC6 0C9 3C9 6C9 9C9 CC9 FC9 0CC 3CC 6CC 9CC CCC FCC 0CF 3CF 6CF 9CF CCF FCF 0F0 3F0 6F0 9F0 CF0 FF0 0F3 3F3 6F3 9F3 CF3 FF3 0F6 3F6 6F6 9F6 CF6 FF6 0F9 3F9 6F9 9F9 CF9 FF9 0FC 3FC 6FC 9FC CFC FFC 0FF 3FF 6FF 9FF CFF FFF Web Safe Colors? Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors. This is not important now, since most computers can display millions of different colors, but the choice is left to you. The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette. Some of are on the left as underlined.

12 WEB SAYFALARINA RESİM EKLEMEK / ADDING IMAGES TO THE WEB PAGES <img> etiketi ve Src özelliği kullanılır. <img> etiketi sadece özellikler içerir (attributes) kapanış etiketi yoktur. Src "source" yani kaynak anlamındadır. Bu özellikle resmin kaynağı belirtilir. Src nin karşısına göstermek istenen resmin URL si (Uniform Recourse Locator) yani adresi yazılır. To add an image, <img> tag should be used and the source defined by using Src attribute. "Src" defines the source path and name of the image. Örn/ Exp: <img src="boat.gif"/>

13 Sayfaya Resim eklemek <html> <body> <p> An image: <img src="smiley.gif" width="32" height="32" /> </p> <p> A moving image: <img src="hackanm.gif" width="48" height="48" /> </p> <p> Note that the syntax of inserting a moving image is no different from a non-moving image. </p> </body> </html>

14 Farklı konumlardaki resimleri sayfaya eklemek / Adding the images in different location (REFERENCE DEFINITION RULES) If the all files in same server, instead of to define exact path, relative path should be defined. Root Folder Ankara Bolu Relative path is to define the position of a folder according to another folder. Samsun Sinop For instance; According to the Samsun folder, address of Ankara folder is; Two level up, then one level down to another branch (Ankara).

15 Farklı konumlardaki resimleri sayfaya eklemek / Adding the images in different location If the html file and image are in the same folder, no need to use any path. Just enough to type name of the image. Ex: <img src= "flower.jpg" /> Root Folder If the image is in the sub-folder of html file, the folders name should be put in front of image. Examples: Ankara Samsun Bolu Sinop If the html file is in the Root Folder and the image in the Ankara folder: <img src= "ankara/flower.jpg" /> If the html file is in the Root Folder and the image in the Samsun folder: <img src= "bolu/samsun/flower.jpg" />

16 Farklı konumlardaki resimleri sayfaya eklemek / Adding the images in different location If the image is in the up-folder of html file, "../ " signs should be put in front of image. Exp: Ankara Root Folder Bolu If the html file is in the Sinop folder and the image in the Bolu folder: <img src= "../flower.jpg" /> Samsun Sinop If the html file is in the Sinop Folder and the image in the Root folder: <img src= "../../flower.jpg" />

17 Farklı konumlardaki resimleri sayfaya eklemek / Adding the images in different location Root Folder According the html file, if the image is in the different branch of the tree, the mixed approach (folder names and "../ " signs) should be put in front of image. Examples: Ankara Samsun Bolu Sinop If the html file is in the Sinop folder and the image in the Samsun folder: <img src= "../samsun/flower.jpg" /> If the html file is in the Sinop Folder and the image in the Ankara folder: <img src= "../../ankara/flower.jpg" />

18 Farklı konumlardaki resimleri sayfaya eklemek / Adding the images in different location The html file and the image could also be hosted in different servers. For instance, the html file could be under the karabuk.edu.tr domain (the server phsically in Karabuk). And the image could be under the ismailkaras.com domain (the server phsically in California). Usage Examples: Karabuk.edu.tr HTML File İsmailkaras.com Image <img src= " /> Not: Eğer resimleri (yada diğer nesneleri) farklı bir sunucudan/web sayfasından transfer ederek sayfanıza gömüyorsanız, bu kaynağın resimleri her zaman aynı bağlantı üzerinden, düzgün bir biçimde sağladığından emin olun. Bundan emin olamıyorsanız (yani o kaynağın hizmet dışı kalması yada bağlantının adresinin değişmesi ihtimali varsa) resim yada nesneleri oradan çekmek yerine kopyalayıp kendi sunucunuzdan sunmayı tercih ediniz. PS: If you embed the images to your web page by taking from another server, you have to be sure that this source is going to provide your images always by keeping in the same url. Otherwise, instead of to give reference, it is better to copy these images to your server.

19 Resimlerin Boyutlarını Ayarlamak / Resize the Images Resmin Yükseklik ve Genişlik (height and width) özellikleri kullanılarak sayfada yerleşeceği alanın boyutları belirlenebilir. By using Height and Width attributes, the size of the placement of the image ON PAGE could be set in pixel. Height ve width piksel cinsinden belirlenir. Örn / Exp: <img src="pulpit.jpg" width="304" height="228" />

20 Resimleri sunucuya kopyalamadan önce optimize etmek / Optimization of the images before uploading to server Width ve Height özelliklerini kullanarak resim boyutlarını küçültmek sadece sayfadaki görünümü küçültür. Tarayıcıya yüklenen resmin boyutlarında bir değişiklik olmaz. Resimleri orijinal halleri ile (örneğin dijital kamera ile çekilmiş şekli ile ) sunucuya koyarsanız, hem sunucu hem de istemci için çok fazla işlem yüküne sebep olursunuz. To resize of the image by using Width and Height attributes, provides just to change the size of the image ON PAGE. Downloaded image is still in original dimensions and original disc size. If an image will be uploaded in original size (e.g. images captured by a camera), processing load (time, data, etc) will increase too much.

21 Resimleri sunucuya kopyalamadan önce optimize etmek / Optimization of the images before uploading to server Bu yüzden internet sayfalarına resim eklerken, Width ve Height özellikleri resmi küçültmek için kullanılmamalıdır. Bunun yerine, resimlerin orjinalleri küçültülmeli ve optimize edilmelidir. Optimizasyon işlemi iki şekilde olur: 1. Resmin en ve boyunu değiştirerek, yani boyutlarını düşürerek disk üzerinde kapladığı alanı düşürmek. 2. Resim kalitesini düşürerek disk üzerinde kapladığı alanı düşürmek. Width and Height attributes should not be used to reduce the size of images on page. Instead of this, original size (data and dimension) of the images should be reduced and optimized. Optimization can be applied in two ways: 1. To reduce the dimension of the original image (width and height). 2. To reduce the disc size of original image by changing the quality of image.

22 Boyutlarını düşürerek resmi optimize etmek / Optimization by reducing of the dimensions of image Bunun için Fotoğraf Düzenleyici programlar (Photo Editor, Picasa, PhotoShop vb.) kullanılmalıdır. Sağda MS PhotoEditor programı ile resmin boyutlarının nasıl değiştirildiği gösterilmektedir. (Resize özelliği kullanılarak resmin eni ve boyu %25 oranına düşürülmektedir.) To do this, Photo Editor programmes should be used (MS Photo Editor, Picasa, PhotoShop vb.). In right image, it is shown that changing of dimension of an image by using MS PhotoEditor programme. The size of the image is reduced 25% percent by using Resize Resize operation of the software.)

23 Görüntü kalitesini düşürerek resmi optimize etmek / Optimization by reducing of the quality of image Burada ise MS PhotoEditor programı ile fotoğrafın resim kalitesinin nasıl değiştirildiği gösterilmektedir. (Resmin görüntü kalitesi %100 den örneğin %70 e düşürülmektedir.) In the right image, it is shown that changing of quality of an image by using MS PhotoEditor programme. The quality of the image is reduced to 70% percent by using JPEG Quality Factor operation of the software.

24 Resimleri optimize etmenin faydaları / Benefit of the Optimization of the Images Çoğu kez çektiğimiz fotoğrafların çözünürlükleri yüksektir. Bu haliyle web sayfanıza koyduğunuzda, kullanıcı ekran boyutundan çok daha büyük bir görüntü ile karşılaşacaktır. Özel bir sebebi yoksa, resimleri tarayıcı penceresine uygun bir boyuta düşürmek gerekir. The resolution of the images captured by a camera are mostly high. If we put these images to a server directly, the client/user can see this image overmuch in the screen. If there is no compelling reason, the images should be reduced suitable for the monitor s screen.

25 Resimleri optimize etmenin faydaları / Benefit of the Optimization of the Images Örneğin 2592x1944 piksel boyutlarındaki bir resmi, tarayıcıda düzgün bir şekilde görüntüleyebilmek için, kenarlarını %75 oranında küçülterek 648x486 piksel boyutlarına düşürmek uygun olacaktır. Bu işlemin ardından ilk dosyanın diskte kapladığı alan 1600 Kb iken, ikinci dosyanın alanı 190 Kb olacaktır. Bu kez ikinci dosyanın görüntü kalitesini %100 den %70 e düşürdüğümüzde 190 Kb den 19 Kb a düştüğünü görülecektir (Görüntü kalitesini bu oranda düşürmek görsel açıdan çok az bir farka sebep olacaktır, fakat alan olarak 9/10 luk bir tasarruf söz konusudur). Dolayısı ile bu işlemlerin ardından 1600 Kb lık bir resmi 19 Kb ile internetten yayınlamak mümkün hale gelecektir. For example: 2592 x 1944 pixel sized original image is 1600 Kb. First optimization: The dimensions have been reduced in 75% rate. After first optimization: 648 x 486 piksel sized image is 190 Kb Second Optimization: The JPEG Quality have been reduced in 30% rate. After second optimization: 648 x 486 pixel sized image is 19 Kb. To reduce JPEG Qoality in 30% rate, doesn t matter for visualisation. En of the whole process, 1600 Kb original file has been converted to 19 Kb image which suitable to publish on Internet.

26 Resimleri optimize etmenin faydaları / Benefit of the Optimization of the Images Resimleri optimize ettiğinizde sunucudaki dosyalarınız daha az yer işgal edecek ve sunucudan istemcilere yapılan transferler çok daha hızlı olacaktır. Böylece sunucuların iş yükü azalacaktır. Aynı şekilde istemci tarafında sayfalar çok hızlı yüklenecek, kullanıcılar beklemek zorunda kalmayacaktır. Yine istemcinin bilgisayarındaki lüzumsuz yer işgali de azalacaktır (Örn: Temporary Internet files klasörü). Hem sunucu (Hosting, transfer, vb), hem de istemci (ADSL vb) tarafındaki kotaların çabuk tükenmesi de önlenmiş olacaktır. Optimization process provides optimum usage of the quotas. More disc space could be gained in server. And transfers to the clients would be faster. On the other hand, in client side, the pages will load faster to the browsers. So, no need to wait by the users. Similarly, more disc space could be gained in client computers. The quotas (Hosting, storage, transferring, etc) will be used feasible in both side.

27 Resimlerin Boyutlarını Ayarlamak / Resize the Images Resimlerinizi web sayfanızda orijinal boyutu ile gösterecek olsanız bile width ve height değerlerini belirtmenizde fayda vardır. Sayfaya resim eklerken bu değerler kullanılmaz ise, tarayıcı sayfayı yüklerken resmin boyutlarını bilemeyeceğinden sayfanın olması gereken görünüme kavuşması için tüm resimlerin yüklenmesi beklenecek, bu da o ana kadar sayfada kaymalara sebep olacaktır. Oysa bu değerlerin tanımlandığı bir sayfa, resimlerin yüklenmesi uzun sürse bile, konum ve boyutları önceden tanımlı olacağı için düzgün görüntülenecek ve kaymalar yaşanmayacaktır. Even if the original dimensions of an image will be kept in page, width and height attributes of it must be defined. If not, while loading, since the browser cannot interpret the location of the image, the page cannot be viewed properly until all elements will be loaded.

28 Bir web sayfasında örneğin 10 adet resim varsa, sayfanın tamamen yüklenmesi için 11 adet dosyanın istemciye transfer edilmesi gerekecektir (10 resim+1 html dosya) Resimlerin yüklenmesi zaman alıcı bir işlemdir. Dolayısı ile mecbur kalınmadıkça web sayfalarında büyük boyutlu çok fazla resim kullanmaktan kaçınılmalıdır. Bunun yerine çoklu resimleri büyüklerine link vererek miniboy (thumbnail) olarak tek bir sayfada (albüm) sunmalı, büyük boy resimlerin yeni sayfada açılması sağlanmalıdır. If a web page contains, for instance, ten images, to load the page tottally, 11 files shoud be downloaded. (10 images+1 html file). Downloading the images is time consuming process. If this is not a requrement, avoid to put too much big sized images in a web page. Instead of this, thumbnail photos should be put together in an album page. And large images should be viewed in seperate page.

29 Orijinal resmin boyutları küçültülürken ya da width ve height öznitelikleri kullanılırken, resimlerin en ve boy oranlarını her zaman korumaya dikkat etmek gerekir. Genişlik ve yüksekliğin orjinal resimdeki oranı neyse, boyutlandırma yapıldığında da aynı oran korunmalıdır. Aksi davranış amatör bir yaklaşım olacaktır. During resize process or usage of width and height attributes, the aspect ratio of the images always must be kept. All redimensional images have to have same aspect ratio with the original one. Otherwise the designed page will be amateurish.

30 Resimlerde Align / Align Attribute <html> <body> <h4>image with default alignment (align="bottom"):</h4> <p> This is some text. <img src="smiley.gif" > This is some text. </p> <h4>image with align="middle":</h4> <p> This is some text. <img src="smiley.gif" align="middle"> This is some text. </p> <h4>image with align="top":</h4> <p> This is some text. <img src="smiley.gif" align="top"> This is some text. </p> <p><b>tip:</b> align="bottom" is default!</p> </body> </html>

31 Paragraf ile resim Float in Pharagraphs <html> <body> <p> <img src="smiley.gif" align="left" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src="smiley.gif" align="right" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html>

32 WEB SAYFALARINA BAĞLANTI EKLEMEK ADDING LINKS TO THE WEB PAGES <a> etiketi kullanılır. </a> ile kapatılır. To add a link, <a> beginning, and </a> ending tags are used. <a> anchor kelimesinden gelir. Çapa anlamındadır. Bir başka doküman, sayfa, nesne vb ne çapa atmak yani bağlantı yapmak anlamında. Örn: <a href=" Üniversitesi</a> Bir çok özelliği (attributes) vardır / There are several attributes: ACCESSKEY, CHARSET, COORDS, HREF, NAME, REL, SHAPE, TARGET gibi

33 HREF HREF="url" Verilecek linke ait adres / The address of the link. Bu adres, kendi sabit diskinizde bir klasör (ve alt-klasörler) içindeki bir dosyanın adı olabileceği gibi, HTTP, FTP veya elektronik posta yoluyla ulaşılabilecek bir Web alanı ve o alanın içindeki bir dosya olabilir. / The address could be a webpage or ftp folder or or a file. Örnekler/Examples: HTTP ye link verme / Giving an HTML link: Dışarıdaki bir adrese link verme / Giving link to an external domain: <a href=" Üniversitesi</a> <a href=" Kendi sunucumuzdaki bir sayfaya link verme / Giving a link to a file in same server: Bağıl adresleme kuralları burada da geçerlidir. Relative addressing is valid here too: Link verilen dosya aynı klasörde ise / If the file is in the same folder: <a href="resimler.htm">resimler</a> Üst klasörde ise / If the file is in an up-folder: <a href="../resimler.htm">resimler</a> Alt klasörde ise / If the file is in an sub-folder : <a href="dosyalar/resimler.htm">resimler</a>

34 HREF Resim/Image: <a href="flower.jpg">karabük Üniversitesi</a> FTP: <a href="ftp://software.com/pub/ ">Bedava Yazılımlar </a> E-Posta/ <a ">Sorularınız için tıklayınız</a> Dosya/file: <a href=" dosyanız</a> Dosya/File: <a href=" döküman</a> Dosya/File: <a href=" Dosyalar</a>

35 ACCESSKEY, TARGET ACCESSKEY="metin": Bu özellikle, bağlantıya fare ile tıklamaya ilave olarak, klavyede bir veya birden fazla tuşa basarak gidilmesini de sağlayabilirsiniz. "Metin" kelimesinin yerine yazacağınız karakterler, klavye kestirmesi olur. Özellikle de engelli kişiler için düşünülebilir. It provides to enter to a link by using a key combination, in addition by clicking. Especially, it can be arranged for visually handicapped persons. TARGET="pencere": Bu bağlantı sağlandığı zaman alınacak HTML sayfasının nerede kullanılacağını gösterir. It enables the state of new page which clicked. It can be opened in same tab or in a new tab. _blank: Alınacak sayfa veya unsur için yeni bir tarayıcı penceresi açılır. A new window/tab. _parent: Alınacak unsur, o anda açık sayfayı oluşturmuş bir ana sayfa varsa, onun yerine konulur. _self: Alınacak sayfa mevcut sayfanın bulunduğu tarayıcı perceresine konulur. _top: Alınacak sayfa mevcut pencereye en üstten itibaren konulur. ÖRN: <a href=" target="_blank">visit W3Schools!</a>

36 Grafik Ögelere (Resme) Link vermek / To give the link to the Images Aynen metne link vermek gibidir. Farkı Metnin yerine resim ekleme etiketleri yazılır. Böylece başta belirlenen link eklenen resimlere verilmiş olur. It is very similar giving to the text. The difference is to put all procedure for adding image instead of the text code. <a href=" "><img src="kbuamblem.jpg" width="32" height="32" /></a> Hatırlatma: Metne link verme: <a href=" Üniversitesi</a>

37 Grafik Ögelere (resme) Link vermek / To give the link to the Images ÖRN: <a href=" <img src="dsc06086.jpg" width="100" height="228" /> </a>

38 COORDS ve SHAPE - Resmin belirli kısımlarına link vermek / image map COORDS="X1, Y1, X2, Y2... Xn, Yn": Bu özellik, bağlantının metinde değil, bir grafik üzerinde oluşturulması halinde, resmin hangi koordinatları arası tıklanırsa, bağlantının sağlanacağını gösterir. Bu etiket, SHAPE yüklemi ile birlikte kullanılır. The coords attribute is used together with the shape attribute to specify the size, shape, and placement of a link in an <object> or <img> element. The coordinates of the top-left corner are 0,0.

39 COORDS ve SHAPE - Resmin belirli kısımlarına link vermek / image map SHAPE=(RECT/CIRCLE/POLY/DEFAULT): Bu özellik ve karşısına yazacağınız ifade ile, tarayıcıya bir grafik unsurun üzerine konmuş bağlantı noktasının biçimini tanımlarsınız. The shape attribute specifies the shape of an area. The shape attribute is used together with the coords attribute to specify the size, shape, and placement of an area. Rect şeklin dörtgen, circle daire, poly çok kenarlı ve default ise arayıcının varsayılan bağlantı şekli olduğunu ifade eder. Bu özelliği COORDS yüklemi ile birlikte kullanırsınız. default Specifies the entire region rect Defines a rectangular region circle Defines a circular region poly Defines a polygonal region

40 COORDS ve SHAPE - Resmin belirli kısımlarına link vermek / image map Bu durumda COORDS ün önüne yazacağınız "X1, Y1, X2, Y2, Xn, Yn" şeklindeki koordinatların da anlamı farklı olur. SHAPE i "rect" olarak bildirirseniz, linkin X1 ve Y1 şekin sol üst köşesinin, resmin sol üst köşesinden itibaren kaç pixel sağa ve aşağı konulacağını; X2 ve Y2 ise linkin sağ alt köşesinin koordinatlarını gösterir (Örnek: SHAPE=rect, COORDS="0,0,9,9"). SHAPE i "circle" olarak tanımlarsanız, koordinatlar dairenin merkezini ve çapını gösterir (Örnek: SHAPE=circle COORDS="10,10,5"). Çok kenarlı bir şekil tanımlamanız halinde, her bir koordinat diğerine, son koordinat da birinciye bağlanır (Örnek SHAPE=poly COORDS="10,50,25,20,20,50"). Şeklinde DEFAULT olarak bırakıldığında bütün resim kastedilmektedir. Attribute Values x1,y1,x2,y2: If the shape attribute is set to "rect", it specifies the coordinates of the top-left corner and the bottom-right corner of the rectangle x,y,radius: If the shape attribute is set to "circle", it specifies the coordinates of the circle center and the radius x1,y1,x2,y2,..,xn,yn: If the shape attribute is set to "poly", it specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser must add the last coordinate pair to close the polygon

41 COORDS ve SHAPE - Resmin belirli kısımlarına link vermek / image map ÖRN: <html> <body> <p>click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm" /> </map> </body> </html> Denemek İçin Tıklayın / To try:

42 Sayfa içindeki belirli bir noktaya link vermek / giving a link to a spesific place in the same page NAME özelliği ile yapılır. To define "name" attribute should be used. NAME="metin" şeklinde kullanılır. Anchor a, yani gidilecek linke isim vererek, daha sonra bu noktaya atıfta bulunma imkanı kazandırır. Sayfadaki belirli bir konumu isimlendirmek / To name a spresific position in a page: <a name="soru1"> Şubat</a> İsimlendirilen konuma link vermek / To give a link above position: <a href="#soru1"> Soru 1: Ders kayıtları ne zaman?</a> Bir başka sayfadan, isimlendirilen bu konuma link vermek / It is possible todo same thing from different page: <a href=" Soru 1: Ders kayıtları ne zaman?</a>

43 Sayfa içindeki belirli bir noktaya link vermek / giving a ling to a spesific place in the same page ÖRN / Ex: <a href="#cevap1">uzaktan Eğitim nedir?</a><br> <a href="#cevap2">örgün eğitimle uzaktan eğitimin farkı nedir?</a><br> <a href="#cevap3">karabük Üniversitesi Uzaktan Eğitim Merkezinin web sitesi adresi nedir? </a> <br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br> <a name="cevap1"></a><a href="#top">yukarı</a><br>1. Uzaktan Eğitim nedir?</b> Uzaktan Eğitim, öğrenci ile öğretenin birbirinden uzakta olmalarına karşın eş zamanlı ya da farklı zamanlı olarak bir araçla iletişim kurdukları bir eğitim sistemidir. <br><br><br><br><br> <a name="cevap2"></a><a href="#top">yukarı</a><br>2. Örgün eğitimle uzaktan eğitimin farkı nedir?</b></font></p> <br> <p><font face="arial">örgün eğitim; öğreten ve öğrenenin aynı fiziksel ortamda bulunduğu eğitim şeklidir. Uzaktan eğitimde ise; öğreten ve öğrenenin aynı fiziksel ortamda bulunma zorunluluğu yoktur. <br><br><br><br><br> <a name="cevap3"></a><a href="#top">yukarı</a><br>3. Karabük Üniversitesi Uzaktan Eğitim Merkezinin web sitesi adresi nedir?</b> <br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br>

44 Linklerle başka Sayfaları ve Çerçeveleri Kontrol Etmek To manage other pages and tabs by using links

45 BİR SAYFADAKİ LİNKLERLE BAŞKA BİR SAYFAYI KONTROL ETMEK Aşağıdaki kodlardan oluşan dört ayrı HTML dosyası oluşturun ve aşağıdaki gibi isimlendirin (ilk üçünde sadece başlıklar ve renkler farklıdır). Her üç dosyayı da aynı klasörde saklayın ve ardından liste.htm yi çalıştırın. Bağlantılara tıklayarak sonuçları izleyin. (Target ve Ogut kelimelerine; ve dosya isimlerine (ogut*.htm) dikkat edin.) Create these HTML files, then run the liste.htm file. ogut1.htm ogut2.htm ogut3.htm liste.htm <HTML> <HEAD> <TITLE>Ogut 1</TITLE> <meta http-equiv="content- Type" content="text/html; charset=windows-1254"> </HEAD> <BODY BGCOLOR="#80FFFF"> <P>Son zamanlarda hayatın vazgeçilmez bir parçası haline gelmiş olan internet teknolojisi, daha önce mümkün olmayan bir çok faydalı uygulamayı mümkün hale getirmiştir. Bunlardan yaşam boyu öğrenimimiz devam etmektedir. </P> </BODY> </HTML> <HTML> <HEAD> <TITLE>Ogut 2</TITLE> <meta http-equiv="content- Type" content="text/html; charset=windows-1254"> </HEAD> <BODY BGCOLOR="#80FF00"> <P>Son zamanlarda hayatın vazgeçilmez bir parçası haline gelmiş olan internet teknolojisi, daha önce mümkün olmayan bir çok faydalı uygulamayı mümkün hale getirmiştir. Bunlardan yaşam boyu öğrenimimiz devam etmektedir. </P> </BODY> </HTML> <HTML> <HEAD> <TITLE>Ogut 3</TITLE> <meta http-equiv="content- Type" content="text/html; charset=windows-1254"> </HEAD> <BODY BGCOLOR="#8000FF"> <P>Son zamanlarda hayatın vazgeçilmez bir parçası haline gelmiş olan internet teknolojisi, daha önce mümkün olmayan bir çok faydalı uygulamayı mümkün hale getirmiştir. Bunlardan yaşam boyu öğrenimimiz devam etmektedir. </P> </BODY> </HTML> <HTML> <HEAD> <TITLE></TITLE> <meta http-equiv="content-type" content="text/html; charset=windows- 1254"> </HEAD> <BODY BGCOLOR="#808000"> <P ALIGN="left"><B><FONT COLOR="Red" SIZE="6">Web Tasarımında Gözetilecek İlkeler:</FONT></B></P> <P><B><FONT SIZE="5" COLOR="Red"><A HREF="ogut1.htm" TARGET="ogut">Grafikle İlgili İlkeler</A></FONT></B></P> <P><FONT SIZE="5" COLOR="Red"><B><A HREF="ogut2.htm" TARGET="ogut">İçerikle İlgili İlkeler</A></B></FONT></P> <P><FONT SIZE="5" COLOR="Red"><B><A HREF="ogut3.htm" TARGET="ogut">Davranışla İlgili Kurallar</A></B></FONT></P> </BODY> </HTML>