Html5 Css 02

www.ilkaddimlar.
com Təlimçi: Rəşad Əliyev; 050 648 2737
HTML və CSS
Dərs 2:
Link və Şəkillər
İlk Addımlar tədris portalı rashad@aliev.info

Rəşad Əliyev 050 648 2737
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737
HTML: Link və Şəkillər :

 Ünvanların yerləşməsi mexanizmi. Bu mexanizmlərin HTML-də tətbiqi.
 A teqi və onun atributları vasitəsi ilə linklərin yaradılması. Linklərin
tipləri.
 Şəkillərin web səhifədə yerləşdirilməsi. Şəkil fayllarının tipləri. IMG
elementi və onun atributları.
 Ünvanların yerləşməsi mexanizmi. Bu mexanizmlərin HTML-də tətbiqi.
 A teqi və onun atributları vasitəsi ilə linklərin yaradılması. Linklərin
tipləri.
 Şəkillərin web səhifədə yerləşdirilməsi. Şəkil fayllarının tipləri. IMG
elementi və onun atributları.
Linklər. A Elementi (anchor)

...
<a href="#nişan1">Bağlantı 1</a>
<a href="#nişan2">Link 2</a>
<a href="#nişan3">Keçid 3</a>
...
...
... Brauzerin keçidi
<h2 id="nişan2">Nə isə başlıq</h2>
...
...
<a name="nişan1"></a>Hansısa mətn
...
<p id="nişan2">Abzas</p>
...
nişan3
Keçid necə olur: Qaydalar

Nişana ad qoyuruq: <a name="nişan"></a>
- Ad unikal olmalıdır. Sənəddə ona oxşar II ad olmamalıdır.

Bu qaydanı qulaqardına vursaq nə olar?
- İstifadə olunan simvollar. Məsafə və simvollar olarsa dırnaq vacibdir.

Əvvəli hərflə başlamalıdır.
a-z A-Z 0-9 -_ . :
<a href="#nişan">Mətn</a>
•# - Açar(nişanı bildirən) simvol
•Nişan – Nişana verilən ad
•Mətn – Brauzerdə link kimi göstərilən yazı
Laboratoriya işi
 Nişanların istifadə edilməsi
1 lab-02-1 qovluğunda, index.html faylını açın
İlk blokun içində yazılan mətnləri normal formaya salıb.

2 Sənədimizdə müvafiq yerlərə nişan qoyaq.
Digər sənədə keçid

... <a href="faylın_adı">mətn</a> ...
<a href="1.html">Bu 1.html faylına keçir</a>

1.html
2.html
Bu 1.html faylına keçir

3.html
Laboratoriya işi
 Hiperlinklərin istifadə edilməsi
1 lab-02-2 qovluğunu açın
2 index.html faylını açın
Fayllar:
meqsed.html
referat.html
3 sertifikatlashdirma.html
sertifikatlashdirma-imtahani.html
siyaset.html
4 index.html-dən bütün fayllara və əksinə link qoyun

Digər fayldakı nişana keçid

<a href="faylın_adı#nişan">mətn</a>
<a href="1.html#а">1.html faylındakı "а" nişanına keçid</a>
<a name="а">Burda isə nişanı qeyd edək</a>
1.html
1.html faylındakı "а"
Nə isə çətm...
nişanına keçid
...
...
...
Burda isə nişan
Keçid bura olacaq

Linklərin bir neçə nisbi variantları
href="target.html" root
current.html
root
target.html
current.html
folder href="folder/target.html"
target.html
Linklərin bir neçə nisbi variantları
href="../target.html" root
target.html
root
folder
folder
current.html
target.html
folder1
href="../folder/target.html"
current.html
Nisbi ünvanlara nümunələr

public_html
"info.html" about
"manual/info.html" contacts.html
"manual" manual
"../help.html" demo
"../project/first.html" index.html
"../../about/contacts.html" help.html
images
pic.gif
"/" – Saytın kökü manual
"/demo/" info.html
"/images/pic.gif" test.html
images
pic.gif
<head>//Başlıqda! project
<base href="http://ilkaddimlar.com" > first.html
index.html
info.html
Laboratoriya işi (Evə)

 Hiperlinklərin daxilində nişanların qoyulması (8-ci səhifəyə bax)
Lab-02-2 qovluğunda index.html-də hansısa fayllara linklər var. O

1 faylların içində 1-2 başlıq açın və onlara nişan qoyub index.html –
dən ora nişanlar qoyun.
Müxtəlif fayl və protokollara sərbəst linklərin qoyulması:

(13-cü səhifədəki dəsrə bax)
protokol://serverin_adı:port/ünvan
HTTP profokolu ilə ilk səhifəyə link:

<a href="http://ilkaddimlar.com">Nümunə 1</a>
HTTP protokolu ilə HTML faylına link:

<a href="http://www.ilkaddimlar.com/sehife1.html">Nümunə 2</a>
HTTP protokolu ilə PDF faylına link:

<a href="http://www.ilkaddimlar.com/doc/sample.pdf">Nümunə 3</a>
Portu göstərməklə HTTP protokolu ilə ZIP faylına link. :

<a href="http://ilkaddimlar.com:81/test.zip">Nümunə 4</a>
EXE faylına FTP protokolu ilə link:

<a href="ftp://ilkaddimlar.com/pub/install.exe">Nümunə 5</a>
mailto protokolu ilə E-poçta link. :

<a href="mailto:ad@mektub.az">ad@mektub.az</a>
Laboratoriya işi(Evə)
 Sərbəst hiperlinklərin istifadə edilməsi
1 index.html faylını istifadə edin
2 İlk Addımlar portalının ilkaddimlar.com saytına hiperlink yaradın
3 İstifadəçilər üçün sərbəst e-poçt göndərməyə bir link yaradın

Linki hansı pəncərədə açaq?

<a href="file.html" target="_blank">link</a>
<a href="file2.html" target="abcd">link</a>
<head>
<base target="_blank">
</head>
<body>
<a href="file.html" target="_self">link</a>
</body>
GIF formatı
Graphics Interchange Format
256 rəng (indekslənmiş palitra)
GIF-formatı 3 əlavə imkana malikdir:
• Hərəkət
• Şəffaf qrafika
• Bucaqların verilməsi (Matte)
• Vertikal üzrə rəngin sıxılması
Hereket uchun MNG formati hazirlanir.

Matte – kenarlarindaki border kimi Mosaic
JPG formatı
Joint Photographic Experts Group
8x8 sıxır
Ölcü 600х450 piksel
Aşağı keyfiyyət (Low 5)

Fayl - 14 KB
Yüksək keyfiyyət (High 60)

Fayl- 44 KB
Tam formatli shekiller

Amerikada Fotoqraflar qrupu
Bucaqlar sinir
PNG formatı
Portable Network Graphics
PNG-8:
İndekslənmiş rəng palitrası
Şəffaf şəkillər
PNG-24:
Tamrəngli.
PNG-32:
Tamrəngli.
Yarımşəffaf
Alfa-kanal ilə təyin edilir.
PNG8 – 256 reng

PNG24 – 24 bit – 3x8bit (olchu boyuk olur)
PNG32 – PNG24+Alfa kanal – Matte olmur
Faylı necə göstərək?
<img src="faylın_adı">
<img src="file.gif">
<img src="pic/file2.jpg">
<img src="http://ilkaddmilar.com/pic/img.gif">
Img, iframe, object,embed

Şəkili yazırıq
<img src="glbus.gif">
<img src=glbus.gif alt="Hərəkətli qlobus">
<img src=qlobus.gif alt="Hərəkətli qlobus">
<img src=glbus.gif title="Hərəkətli qlobus">
Linkdə də...

 Şəkillərin yerləşdirilməsi
1 Hansısa fayl götürün, məs index.html
2 logo.png(lab-02-3) və shekil1.jpg (Lab_2) faylını götürün
3 alt və title atributlarını istifadə etməklə img elementində bu şəkilləri yazın
images qovluğu yaradın və ora da hər hansı jpg faylı atın və ordakı faylı da
4 səhifədə çağırın
Şəkil link kimi

<img src="file.gif">
<a href="link"> </a>
<a href="link">
<img src="file.gif" border="0">
</a>
<a href="link">
<img src="file.gif" border="1">
</a>
Ölçü verib şəkilə istiqamət veririk

<img src=img.gif width="100" height="150">
<img src=img.gif align="left" hspace="8">
bottom, top, middle
left – Şəklin horizontal uyğunlaşaraq sol tərəfdə istiqamətlənməsi
right - Şəklin horizontal uyğunlaşaraq sağ tərəfdə istiqamətlənməsi
<img src="../shekil2.jpg" width="200" align="right" <img src="../shekil2.jpg" width="200" align="right" >

hspace="10" vspace="10">
vspace
hspace hspace
vspace
<img src="../shekil2.jpg" width="200" align="left" hspace="10" vspace="10">

 Şəkillərin istifadə edilməsi (Lab_2/lab-02-3)
logo.png şəklini istifadə edərək http://ilkaddimlar.com saytına hiperlink

1 yaradın
images/shekil1.jpg şəklinə images/shekil1_balaca.jpg istifadə edərək

2 hiperlink yaradın
3 Səhifənin fonunu fon.gif edin

Nəticə
 İnternetdəki resurslara ünvalanmaq üçün HTML dilində
linklər istifadə edilir.
 Hiperbağlantılar ünvanlanmanı sənədin daxilində və ya
kənar resursa da verə bilər.
 Kənar resurslara hiperbağlantılar mütləq və ya nisbi
olur.
 3 qrafik format istifadə edilir: gif, jpg, png.
 Şəkil link ola bilər.

Html5 Css 02

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Html5 Css 02

Uploaded by

Copyright:

Available Formats

www.ilkaddimlar.

com Təlimçi: Rəşad Əliyev; 050 648 2737

İlk Addımlar tədris portalı rashad@aliev.info

HTML: Link və Şəkillər :

Linklər. A Elementi (anchor)

Keçid necə olur: Qaydalar

- Ad unikal olmalıdır. Sənəddə ona oxşar II ad olmamalıdır.

- İstifadə olunan simvollar. Məsafə və simvollar olarsa dırnaq vacibdir.

1 lab-02-1 qovluğunda, index.html faylını açın

İlk blokun içində yazılan mətnləri normal formaya salıb.

Digər sənədə keçid

<a href="1.html">Bu 1.html faylına keçir</a>

Bu 2.html faylına keçir

Bu 3.html faylına keçir

1 lab-02-2 qovluğunu açın

2 index.html faylını açın

4 index.html-dən bütün fayllara və əksinə link qoyun

Digər fayldakı nişana keçid

Keçid bura olacaq

Linklərin bir neçə nisbi variantları

Linklərin bir neçə nisbi variantları

Nisbi ünvanlara nümunələr

Laboratoriya işi (Evə)

Lab-02-2 qovluğunda index.html-də hansısa fayllara linklər var. O

Müxtəlif fayl və protokollara sərbəst linklərin qoyulması:

HTTP profokolu ilə ilk səhifəyə link:

HTTP protokolu ilə HTML faylına link:

HTTP protokolu ilə PDF faylına link:

Portu göstərməklə HTTP protokolu ilə ZIP faylına link. :

EXE faylına FTP protokolu ilə link:

mailto protokolu ilə E-poçta link. :

1 index.html faylını istifadə edin

2 İlk Addımlar portalının ilkaddimlar.com saytına hiperlink yaradın

3 İstifadəçilər üçün sərbəst e-poçt göndərməyə bir link yaradın

Linki hansı pəncərədə açaq?

<a href="file2.html" target="abcd">link</a>

256 rəng (indekslənmiş palitra)

GIF-formatı 3 əlavə imkana malikdir:

• Bucaqların verilməsi (Matte)

• Vertikal üzrə rəngin sıxılması

Hereket uchun MNG formati hazirlanir.

Ölcü 600х450 piksel

Aşağı keyfiyyət (Low 5)

Yüksək keyfiyyət (High 60)

Tam formatli shekiller

PNG8 – 256 reng

Faylı necə göstərək?

Img, iframe, object,embed

<img src=glbus.gif alt="Hərəkətli qlobus">

<img src=qlobus.gif alt="Hərəkətli qlobus">

<img src=glbus.gif title="Hərəkətli qlobus">

Laboratoriya işi (Evə)

1 Hansısa fayl götürün, məs index.html

2 logo.png(lab-02-3) və shekil1.jpg (Lab_2) faylını götürün

3 alt və title atributlarını istifadə etməklə img elementində bu şəkilləri yazın

Şəkil link kimi

Ölçü verib şəkilə istiqamət veririk

<img src="../shekil2.jpg" width="200" align="right" <img src="../shekil2.jpg" width="200" align="right" >

Laboratoriya işi (Evə)

logo.png şəklini istifadə edərək http://ilkaddimlar.com saytına hiperlink

images/shekil1.jpg şəklinə images/shekil1_balaca.jpg istifadə edərək

3 Səhifənin fonunu fon.gif edin

You might also like