HTML - Karabük Üniversitesi

Transkript

HTML
5. Bölüm
Doç. Dr. İsmail Rakıp Karaş
www.ismailkaras.com
[email protected]
(Son Güncelleme: 26.03.2015)
Dersin
Course Page: www.ismailkaras.com/228
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:
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.
1.
2.
3.
RGB kodu: rgb(kırmızı
kodu, yeşil kodu, mavi
kodu)
RGB kodunun
Hekzadesimal karşılığı
Rengin ingilizce adı
2.
3.
Decimal RGB Code: rgb(red
value, green value, blue
value)
Hexadecimal RGB Code
The exact name of the color
(Just for main colors)
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.
•
•
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.
•
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 000 000 255
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: 000 000 255
•
Yine siyah için 000-000000 yani tüm renk
değerlerini sıfıra eşitledik,
beyaz için ise 255-255-255
değerlerini kullanmamız
gerekmektedir. Bu değerler
ile oynanarak istenilen renk
elde edilebilir.
•
Görüldüğü gibi bu sistemde
onlu sayı sistemi (Decimal)
kullanılmakta ve her bir
renge 0-255 arasında
değerler verilmektedir.
•
•
•
For black: 000-000-000
For white: 255-255-255
The Decimal number
system is used in RGB
system.
•
Üç renk için 0-255 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
•
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 = 16.777.216’dir
•
Bu sistem kullanarak oluşturulabilen
renk sayısı:
256 x 256 x 256 = 16.777.216’dir
RGB uzayına göre renklerin oluşturulması / RGB Color Space
ÖRN / Exp:
Bilgisayar
Mühendisliği
Üç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:
Bilgisayar Mühendisliği
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:
Bilgisayar Mühendisliği
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
black
silve
r
gray
white
red
maroo
n
purple
fuchsi
a
gree
n
lime
olive
yellow
gol
d
orange
blue
navy
teal
aqua
Web
renkleri
Yazılış
Gizliliğinizi k orumay a y ardımcı olmak için, PowerPoint bu dış resmin otomatik olarak k arşıdan y ük lenmesini önledi. Bu resmi k arşıdan y ük ley ip görüntülemek için, İleti Çubuğu'nda Seçenek ler'i tık latın v e sonra Dış içeriği etk inleştir'i tık latın.
Güvenli Renkler
Web Safe Colors?
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.
000
300
600
900
C00
F00
003
303
603
903
C03
F03
006
306
606
906
C06
F06
009
309
609
909
C09
F09
00C
30C
60C
90C
C0C
F0C
00F
30F
60F
90F
C0F
F0F
030
330
630
930
C30
F30
033
333
633
933
C33
F33
036
336
636
936
C36
F36
039
339
639
939
C39
F39
03C
33C
63C
93C
C3C
F3C
03F
33F
63F
93F
C3F
F3F
060
360
660
960
C60
F60
063
363
663
963
C63
F63
366
666
966
C66
F66
069
369
669
969
C69
F69
06C
36C
66C
96C
C6C
F6C
06F
36F
66F
96F
C6F
F6F
090
390
690
990
C90
F90
093
393
693
993
C93
F93
096
396
696
996
C96
F96
099
399
699
999
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
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.
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.
Örn/ Exp:
• 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.
<img src="boat.gif"/>
Sayfaya Resim eklemek
<html>
<body>

An image:
<img src="smiley.gif" width="32" height="32" />


A moving image:
<img src="hackanm.gif" width="48" height="48" />


Note that the syntax of inserting a moving image is no different from a non-moving
image.

</body>
</html>
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
Relative path is to define the position of a folder
according to another folder.
For instance; According to the Samsun folder,
address of Ankara folder is; Two level up, then
one level down to another branch (Ankara).
Bolu
Samsun
Sinop
• 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" />
• If the image is in the sub-folder of html
file, the folders name should be put in
front of image. Examples:
• 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" />
Root Folder
Ankara
Bolu
Samsun
Sinop
• If the image is in the up-folder of
html file, "../ " signs should be put
in front of image. Exp:
Root Folder
Ankara
• If the html file is in the Sinop folder
and the image in the Bolu folder:
<img src= "../flower.jpg" />
• If the html file is in the Sinop Folder
and the image in the Root folder:
<img src= "../../flower.jpg" />
Bolu
Samsun
Sinop
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:
• 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" />
Ankara
Bolu
Samsun
Sinop
• 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
İsmailkaras.com
HTML File
Image
<img src= "http://www.ismailkaras.com/images/flower.jpg" />
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.
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" />
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.
•
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.
•
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.
•
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.
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.
2.
Resmin en ve boyunu
değiştirerek, yani boyutlarını
düşürerek disk üzerinde
kapladığı alanı düşürmek.
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.
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.)
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.
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.
•
Ö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.
•
•
•
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.
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.
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.
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.
Resimlerde Align / Align Attribute
<html>
<body>
<h4>Image with default alignment (align="bottom"):</h4>

This is some text. <img src="smiley.gif" > This is some text.

<h4>Image with align="middle":</h4>

This is some text. <img src="smiley.gif" align="middle"> This is some text.

<h4>Image with align="top":</h4>

This is some text. <img src="smiley.gif" align="top"> This is some text.

Tip: align="bottom" is default!
</body>
</html>
Paragraf ile resim – Float in Pharagraphs
<html>
<body>

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


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

</body>
</html>
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="http://www.karabuk.edu.tr">Karabük Üniversitesi</a>
• Bir çok özelliği (attributes) vardır / There are several
attributes:
• ACCESSKEY, CHARSET, COORDS, HREF, NAME, REL,
SHAPE, TARGET gibi…
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 email 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="http://www.karabuk.edu.tr/etkinlik_tum.asp">Etkinlikler</a>
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>
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/Email:
<a href="mailto:[email protected] ">Sorularınız için tıklayınız</a>
Dosya/file:
<a href="http://www.karabuk.edu.tr/bahar/ödev.pdf">Ödev dosyanız</a>
Dosya/File:
<a href="http://www.karabuk.edu.tr/yayin/makale.doc">Okunacak
döküman</a>
Dosya/File:
<a href="http://www.karabuk.edu.tr/yayin/arsiv.zip">Tüm Dosyalar</a>
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="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
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=" http://www.karabuk.edu.tr "><img src="KBUamblem.jpg" width="32" height="32" /></a>
Hatırlatma: Metne link verme:
Grafik Ögelere (resme) Link vermek / To give the
link to the Images
ÖRN:
<a href="http://oidb.karabuk.edu.tr/mainlink_12.htm">
<img src="DSC06086.JPG" width="100" height="228" />
</a>
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.
• 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
rect
circle
poly
Specifies the entire region
Defines a rectangular region
Defines a circular region
Defines a polygonal region
• 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
COORDS ve SHAPE - Resmin belirli kısımlarına link vermek / image map
ÖRN:
<html>
<body>
Click on the sun or on one of the planets to watch it closer:
<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:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap
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"> 11-18 Ş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="http://www.karabuk.edu.tr/Sorular.htm#soru1">
Soru 1: Ders kayıtları ne zaman?</a>
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> 
<a href="#cevap2">Örgün eğitimle uzaktan eğitimin farkı nedir?</a> 
<a href="#cevap3">Karabük Üniversitesi Uzaktan Eğitim Merkezinin web sitesi adresi nedir? </a> 
 
<a name="cevap1"></a><a href="#top">Yukarı</a> 1. Uzaktan Eğitim nedir?
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.
 
<a name="cevap2"></a><a href="#top">Yukarı</a> 2. Örgün eğitimle uzaktan eğitimin farkı nedir?
 
Ö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.
 
<a name="cevap3"></a><a href="#top">Yukarı</a> 3. Karabük Üniversitesi Uzaktan Eğitim Merkezinin web sitesi
adresi nedir?
http://kbuzem.karabuk.edu.tr
 
 
• Linklerle başka Sayfaları ve Çerçeveleri
Kontrol Etmek
• To manage other pages and tabs by using
links
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
<HTML>
<HEAD>
<TITLE>Ogut 1</TITLE>
<meta http-equiv="ContentType" content="text/html;
charset=windows-1254">
</HEAD>
<BODY
BGCOLOR="#80FFFF">
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.

</BODY>
</HTML>
ogut2.htm
ogut3.htm
liste.htm
<HTML>
<HTML>
<HTML>
<HEAD>
<HEAD>
<HEAD>
</HEAD>
</HEAD>
<meta http-equiv="Content-Type"
content="text/html; charset=windows1254">
<BODY
BGCOLOR="#80FF00">
haline gelmiş olan internet
teknolojisi, daha önce
mümkün olmayan bir çok
faydalı uygulamayı
öğrenimimiz devam
etmektedir.

</BODY>
</HTML>
<BODY
BGCOLOR="#8000FF">
haline gelmiş olan
internet teknolojisi, daha
önce mümkün olmayan
bir çok faydalı uygulamayı
öğrenimimiz devam
etmektedir.

</BODY>
</HTML>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#808000">
Web
Tasarımında Gözetilecek
İlkeler:
<A HREF="ogut1.htm"
TARGET="ogut">Grafikle İlgili
İlkeler</A>
<A
HREF="ogut2.htm"
TARGET="ogut">İçerikle İlgili
İlkeler</A>
<A
HREF="ogut3.htm"
TARGET="ogut">Davranışla İlgili
Kurallar</A>
</BODY>
</HTML>
Ardından önceki 4 dosyaya ek olarak aşağıdaki dosyaları da oluşturun.
Create also below files…
anim.htm
temp1.htm
<HTML>
<img src="kayak.gif" alt="KBU" width="32" height="32" />
<HEAD>
<TITLE>Geçici Dördüncü Çerçeve</TITLE>
<meta http-equiv="Content-Type" content="text/html;
</HEAD>
<BODY>
Sevgili Web tasarımcısı
kardeş:
Yan tarafta size sunacağımız öğütlerimizin bir
listesini görüyorsunuz. Bu listede arzu ettiğiniz bir maddeyi
tıklarsanız, bu kutunun içinde o konudaki öğütlerimizi bulacaksınız.
İşlerinizde başarılar dileriz.
Kolay gelsin..
</BODY>
</HTML>
Şimdi de aşağıdaki dosyayı oluşturun ve ardından tarayıcınızda çalıştırın.
Linklere tıklayarak bir önceki uygulamadan farkına dikkat edin. Aynı işlemin framler arasında
yapıldığını göreceksiniz.
And create blelow file too. And run it
ogutler.htm
<HTML>
<HEAD>
<TITLE>Ogutler</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<FRAMESET BORDER="0" COLS="240,*">
<FRAMESET ROWS="180,*">
<FRAME SRC="anim.htm" NAME="anim" NORESIZE SCROLLING="no" MARGINHEIGHT="0" MARGINWIDTH="0">
<FRAME SRC="liste.htm" NORESIZE SCROLLING="no" NAME="liste" MARGINWIDTH="10" MARGINHEIGHT="10">
</FRAMESET>
<FRAMESET ROWS="271,61%">
<FRAME SRC="temp1.htm" NORESIZE SCROLLING="no" NAME="baslik" MARGINWIDTH="10" MARGINHEIGHT="10">
<FRAME SRC="ogut1.htm" NORESIZE SCROLLING="auto" NAME="ogut" MARGINWIDTH="10" MARGINHEIGHT="1">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Maalesef bu sayfayı çerçeveli olarak göremiyorsunuz. Onun için size düz bir liste veriyoruz:<A
HREF="ogut1.htm">Grafikle İlgili İlkeler</A><A HREF="ogut2.htm">İçerikle İlgili
İlkeler</A><A HREF="ogut3.htm">Davranışla İlgili Kurallar</A>
</BODY>
</NOFRAMES>
</HTML>
BİR FRAME’DEKİ LİNKLERLE BAŞKA BİR FRAME’İ KONTROL ETMEK /
(+ Frame’in genişlik ya da yüksekliğini serbest bırakmak)
Aşağıdaki kodlardan oluşan yedi ayrı HTML dosyası oluşturun ve aşağıdaki gibi isimlendirin.
Tüm dosyaları aynı klasörde saklayın ve ardından bolumhk.htm’yi çalıştırın. Bağlantılara tıklayarak sonuçları
izleyin. Another example. Create all below files and run bolumhk.htm
bolumhk_ust.htm
<body bgcolor="#99FFCC">
ÜST
FRAME
blhkmenu.htm
SOL
FRAME
<body bgcolor="#FFFFCC">
<base target="rbottom">
<a
href="fotolab.htm">Foto
grametri Arastirma
Laboratuvari</a>
 
<a href="jdezilab.htm">
Jeodezi Arastirma
Laboratuvari</a>
 
<a href="cbslab.htm">CBS
Arastirma
Laboratuvari</a>
bolumhk.htm
<FRAMESET border=0
frameBorder=0
frameSpacing=0
rows=85,*>
<FRAME name=rtop
scrolling=no
src="bolumhk_ust.htm" >
<FRAMESET border=0
cols=101,* frameBorder=0
frameSpacing=0>
<FRAME name=left noResize
scrolling=no
src="blhkmenu.htm" >
<FRAME name=rbottom
src="fotolab.htm" >
</FRAMESET>
</FRAMESET>
fotolab.htm
<body bgcolor="#C0C0C0">
 
Foto
Lab
cbslab.htm
<body bgcolor="#00FF99">
 
CBS
Lab
jdezilab.htm
<body bgcolor="#99CCFF">
 
Jeodezi
Lab

HTML - Karabük Üniversitesi

Transkript

Benzer belgeler

Görüntü ve Resim Koleksiyonları

Z?rh ve Silah Metin Ta?lar?