2.1 Сайттың әрбір бетіне сипаттама беру
Бұл сайт негізгі беттен – index.html және “Басты бет”, “Топ мүшелері”, “Тарихы”, “Суреттер”, “Автор жайлы”, “Әндер”, “Бейнебаян”, “Ән мәтіндері” деген бөлімдерден тұрады.
Мына парақта сайттың алғашқы беті көрсетілген.
1-сурет. Сайттың басты бетінің көрінісі
Менің сайтымның алғашқы бетінің жоғарғы жағында музарт тобының жігіттерінің суреттері қойылған. Сонымен қатар әрбір бөлім Cascading Style Sheets (CSS) пайдалана отырып жасадым. (1 - сурет).
Музарт тобының суретін кою үшін мен келесі тегтерді қолдандым
<img width="300px" heght="300" class="img3" src="images/gost.jpg">.
Сайтымның бөлімдеріне шолу жасайын. Топ мүшелері бөлігін таңдағанда Сәкен, Мейрамбек, Кенжебек суреттері және өмірбаяны туралы ақпараттар шығады.
2-сурет. Топ мүшелері бөлімінің ашылуы.
Топ тарихы бөлімінде топтың құрылу уақыты, алғашқы және кейінгі топ мүшелері,топ жетістіктері, топтың орындауындығы алғашқы әні, топтың құрылуына себеп болған адамдар жайлы және т.б. мәліметтер бар. (1 - сурет).
3 – сурет. Топ тарихы бөлімі ішіндегі мәлімет.
Суреттер бөлімінде Музарт тобының бірге және жеке мүшелерінің суреттері қойылған.
4 – сурет. Суреттер бөлімі ішіндегі мәлімет.
Суреттерді қою үшін келесі тегтерді қолдандым:
<img width="300px" heght="300" src="images/100.jpg">
<img width="280px" heght="400" src="images/103.jpg">
<img width="350px" heght="400" src="images/102.jpg">
Әндер бөлімінде музарт тобының әндері қойылған. Оны қою үшін мына тег қолданылған:
<audio src="muz/Terme1.mp3" controls="controls"></audio><br><br>Асыл ана<br>
<audio src="muz/Asylana.wma" controls="controls"></audio><br><br>Ақ құсым<br>
<audio src="muz/Akkusym.mp3" controls="controls"></audio><br><br>Әттең ай<br>
5 – сурет. Әндер бөлімі ішіндегі мәлімет.
Бейнебаян бөлімінде Музарт тобының бейнебаяндары қойылған. Оны қою үшін мына тегті пайдаландым:
<video controls="controls" START="MOUSEOVER">
<source src="Beine/1.mp4" type="video/mp4"> </video>
6 – сурет. Бейнебаян бөлімі ішіндегі мәлімет.
Ән мәтіндері бөлімінде Музарт тобының қоржынындағы әндер тізімі жазылған.
7 – сурет. Ән мәтіндері бөлімі ішіндегі мәлімет.
Егер осындығы кез келген ән атын шертер болсақ сол ән мәтіні шығады.
Біз мысал ретінде Шын жүректен әнін шертсек 8-суреттегі пайда болады.
8 – сурет. Ән мәтіндері бөлімі ішіндегі мәлімет.
2.2 Сайтта қолданылған элементтер
Курстық жұмыста HTML, CSS тілінің тәгтері пайдаланылды.
Курстық жұмыс негізінде CSS – ті пайдалану арқылы жүзеге асты. CSS – Cascading Style Sheets (стильдердің сатылы кестелері) HTML-тəгтерге қосымша безендіру жəне де жазуды жеңілдету қасиеттерін беретін мүмкіндіктер жиыны. Стильдер енгізілген статикалық HTML тілі сайтты динамикалық жаңа күйге келтіре алады. STYLE түйінді сөзін (атрибутын) енгізу арқылы мынадай жұмыстар атқарылады:
- жеке тəгке арналған стильді пайдалану;
- жеке HTML-файлға арналған стиль беру;
- бірнеше HTML-файлдарға арналған стиль енгізу;
- стильдерді аралас түрде пайдалану.
Web-парақтардың басқа Web-парақтарға қатысты сілтемелерінің болуы – WWW жүйесінің ең тартымды ерекшеліктерінің бірі. HTML құжаттарында гипермәтіндік сілтемелерді құру өте жеңіл. Курстық жұмыстағы кез келген парақтан басқа кез келген қосымша параққа жеңіл өтуге болады. Олар HTML тілінің <А>...</А> тәгтері арқылы жасалған. Гиперсілтемелерді құрған кезде HREF=”...” атрибуты міндетті түрде қажет. Оның мәні сол сілтеме көрсетіп тұрған файл атынан немесе оның Интернеттегі URL-адресінен тұрады. Сілтеме мәтін <A> мен </A> тәгтерінің арасына орналасады.
Фотосуреттік бейнелер Web-парақтарды әшекейлеп безендіру кезінде маңызды рөл атқарады. Сол үшін де курстық жұмыстың кез келген парағынан фотосуреттерді көруге болады. Суреттерді құжаттардың ішіне орналастыру үшін <IMG …> жеке, яғни жабылмайтын жалқы тәгі қолданылды.