Тәжірибелік жұмыс 4

Бет бірқатар құжаттарға тұруы тиіс. Ең бастысы (index.html) –ол  бірінші ашады және әрдайым интернетте сіздің сайтыныздаболуы тиіс. Басқа құжаттарды сізге ұнайтын, атауды қоюға болады (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Олар барлығы бір немесе әр түрлі директорияда (папкада) сақталады.
Сілтімелердің көмегімен бұл құжаттарды байланыстыруға болады. Басқа құжаттарға сілтіме болып мәтін (сөз, сөйлемше) немесе сурет бола алады. Мәтіндік сілтімені қарастырайық.
Жаңа құжатты (мысалы  prf.html) сол директоияда (папкада),  құру керек, мұнда ең басты құжат index.html.  сақталады. Құжаттың мазмұның өздерін ойлап табыңдар.

prf.html – сіздің фото суреттерімен болсын. "Менің фото суреттермді көру"сөйлеміне prf.html сілтіме жасау: 
<a href="prf.html"> Менің фото суреттермді көру </a> 
<a></a> тэгі қорытынды сурет немесе сөйлем (мәтін) ге сілтіме жасалады. Жазылу принциптерінің жолдарын сізге анық: 
(1) - <a href="prf.html">менің фотосуреттерім</a>
(2) - <a href="photos/prf.html"> менің фотосуреттерім </a>
(3) - <a href="http://www.homepage.ru/prf.html"> менің фотосуреттерім </a>
Бірінші жағдайда (1) құжаты сол директорияда (папкада) жатыр,  prf.html біз сілтімелейтін құжат, (2) құжат /photos директория астында жатыр, ал  (3) жағдайда сайтқа сілтімелейміз

 http://www.homepage.ru, мұнда керек құжат жатыр. 
Құжаттардың барлық сілтімелеріне түсті таңдау: link – жай сілтіме түсі, alink – белсенді сілтіме түсі (басылған), vlink – қабылданған сілтіме түсі.
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Құжаттағы барлық мәтіндер түсі сияқты, <body> да сілтімелер түсін жазыңыз. Жай сілтіме үшін түстер мысалына, белсенді және қабылданған – брдей, бірақ олар әр түрлі болуы мүмкін – ол сіздің қарауыңызда. 
Біздің құжатта сілтемелерді және сілтеме өзі үшін түстерді белгілеу:

<html>
<head>
<title> Менің алғашқы қадамым </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<div align="center">
<H3>Сәлеметсізбе, бұл менің бірінші бетім.</H3>
<br>
<font color="#CC0000"> Хош келдіңіз!</font> :) </div>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt=" менің фотосуретім"> Мен жақында ғана виртуалды өмірімен танысуды бастадым, бірақта маған бұрынғы дәстүр бойынша жаңа виртуальды достар мен таныстар табу үшін өзімнің парақшамды құрғым келді, <a href="prf.html"> менің фотосуреттерімді көрсін</a> , мен туралы хабарлы болсын, қонақ кітапшасында мен туралы сөз жасын деп ойым болды. <br><br> Мүмкін жай ғана кездейсоқ келуші кенеттен менімен танысқысы келіп, <b> менімен виртуалды дос болғысы келер?:)  </b><br><br> фотосуретте мен көрсетілгенмін. Сурет сапасы өкінішке орай, өте жақсы емес, сондықтан ол анық емес болып табылады және менің бетімнің ерекшеліктері сәл проблемалы көрініп тұр. Бірақ жаман емес екенім көрініп тұр:) <br><br> Егер сенде солай ойласан, кездесіп, бр шайханада кофе ішсек, қалай қарайсын?:) Кім біледі, мүмкін өмірде жақсы дос болып кетерміз:)

</p> 
</body>
</html>

 

Біздің құжатта (<font color="…"></font>) мәтіннің әр түрлі блогары үшін әр түрлі түстер белгілеу қажет. Мәтінді сілтімілер үшін әр түрлі түсті белгіле – ол <font> тэгі және оның color  атрибуты көмегімен жасалады. 
<a href="prf.html"><font color="#CC0000">менің фото суреттерімді көру</font></a> 
Назарларыңызды аударыңыз, <a></a> тэгі ішінде <font color="…"></font> жазылады, егер сіз басқалап жазсаңыз онда сіз құжатта басқа да әдебиеттер түсті сіздің сілтеме түсті түрлі орнату мүмкін емес.

Пошта жәшігіне сілтіме жасаңыз (e-mail), мәтіндік сілтімеге көмек көрсетіңіз, онда сіз меңзегенде пайда болады.
Пошта жәшігіне сілтіме кішкене басым қалай жасалады, басқа құжатқа қарағанда (беті, сайт): 
<a href="mailto:pochta@mail.ru"> pochta@mail.ru </a> 
mailto ның кейбір нұсқалары бар:
- ?subject=Хаттың тақырыбы
- &Body=сіздің хабарламаңыздің мәтіні
- &cc=copy@mail.ru,copy2@mail.ru (үтірлермен бөлінген хаттар көшірмелері)
- &bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (үтірлермен бөлінген хаттар жасырын көшірмелері) 
Барлық бірге ол көрінеді: 
<a href="mailto:pochta@mail.ru?subject=Hello&Body=text&cc=copy@mail.ru&bcc=hidden_copy@mail.ru"> pochta@mail.ru </a> 
Сілтеме болып суретте бола алады. Мәтін сияқты слтменің қағидасы сол бірақ тэгқа <a></a> мәтін емес сурет қойылады: 
<a href="prf.html"><img src="primtocodephoto.gif"></a> 
Пошта жәшігіне ішіне сурет сілтемені алыңыз, қағидасы бірдей: 
<a href="mailto:pochta@mail.ru"><img src="primtocodephoto.gif"></a> 
(prf.html) фото сурет құжаттарымен primtocodephoto.gif  суретіне сілтеме жасаңыз:

<html>
<head>
<title> Менің алғашқы қадамым </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<div align="center">
<H3>Сәлеметсізбе, бұл менің бірінші бетім.</H3>
<br>
<font color="#CC0000"> Хош келдіңіз!</font> :) </div>
<p align="justify">
<a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="менің фотосуретім"></a> Мен жақында ғана виртуалды өмірімен танысуды бастадым, бірақта маған бұрынғы дәстүр бойынша жаңа виртуальды достар мен таныстар табу үшін өзімнің парақшамды құрғым келді, <a href="prf.html"> менің фотосуреттерімді көрсін</a> , мен туралы хабарлы болсын, қонақ кітапшасында мен туралы сөз жасын деп ойым болды. <br><br> Мүмкін жай ғана кездейсоқ келуші кенеттен менімен танысқысы келіп, <b> менімен виртуалды дос болғысы келер?:)  


</p> 
</body>
</html>


Не шықаның көрейк. Картинка primtocodephoto.gif  суреті сілтме болды. Сіз сурет айналасында жақтау болды байқадыңыз. Бұл жақтауды қалдыруға болады, егер сізге ұнаса, алып тастауға да болады, егер суретке border="0"  атрибутын белгілесеңіз.
<img src="primtocodephoto.gif" align="left" hspace="30" vspace="5" alt="менің фотосуретім" border="0"> 
Сурет айналасында жиіктеме түсін орнату.
Сурет айналасында жиіктеме түсін bordercolor атрибутымен белгілейміз, мысалы:
<img src="picture.gif" border="3" bordercolor="#CC0000"> 
Суретке сілтіме жасаңыз (small.jpg) және басқа суретке сілтіме (big.jpg): 
<a href="big.jpg"> <img src="small.jpg"> </a> 
Осы жағдайда үлкен сурет келесі терезеде ашылады. <a></a>  тэгінде  target атрибуты бар: 
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>

Сонымен, target="_blank" – құжат (біздің жағдайда сурет), сілтіме жүргіземіз, браузердің жаңа терезесінде ашылады.

Бұл әрекетті жасау керек.