§ 35–36. HTML веб-сайттарды әзірлеу әдістері.
Альмаханова Гулдана Алибекқызы
Последнее обновление 5 месяцев назад
• граф дегеніміз не?
• графтардағы алгоритмдер қалай орындалады?
Меңгерілетін білім:
• HTML тілі;• тег және оның түрлері;
• тег тердің атрибуттары;
• web-сайт ;
• web-сайт құрылымы;
• web-сайтты жоспарлау кезеңдері
Компьютер немесе басқа да электронды құрылғыларда оқылатын мәтіндер гипермәтін деп аталады. Гипермәтін терминін алғаш рет америкалық әлеуметтанушы, философ Тед Нельсон 1963 жылы айналымға енгізді. Ал 1986 жылы Халықаралық Стандарттау ұйымының «Standart Generalized Markup Language» деп аталатын ISO-8879 стандартын қабылдауы HTML тілінің пайда болуына негіз болды. Гипермәтінді белгілеу тілі (Hyper Text Markup Language) – web-браузерде web-беттерді және басқа да ақпараттарды шығару үшін қолданылатын ең басты белгілеу тілі, яғни құжатқа қойылатын тегтердің көмегімен құжаттың логикалық құрылысын сипаттайды, құжатты форматтауды және нысандарды қоюды басқарады.
Интернеттің бар деректерінің, яғни барлық web-құ жаттарының бір ортақ қасиеті – олардың басым көпшілігі HTML тілінде жазылғандығы. HTML тілінде web-құжаттарды жасау программалауға ұқсас болғанымен, ол – қарапайым программалау тілі емес.
HTML – гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді web-бет тер түрінде бейнелеуге арналған ережелер жиынын анықтайды. HTML тілінде web-бет немесе сайт құру үшін кәдімгі блокнот қосымшасын қолдануға болады. Кодты блокнотта жазамыз да, сақталу орнын көрсетіп, Файл ⇒ ... ретінде сақтау (Сохранить как) ⇒ Файл атауы nаmе*.html, ал Файл типтеріне Барлық файлдарды (Все файлы), кодировка бөлімінен UTF-8 кодтауын таңдап, Сақтау батырмасын басамыз (21-сурет). Жұмыс нәтижесін браузер мен ашып қараймыз.
HTML тiлiнде колданылатын командалар «тег» деп аталады. HTML тiліндегi тегтер екi топқа бөлiнедi: жұпты, жұпсыз.
Жұпты тегтерде бiр тег ашылса, келесi тег оны жабады. Мысалы, <html> тегтiң жұмысын ашады да, келесi </html> тегi оны жабады (11-кесте). Жұпсыз тегтер – тег ашылып, жабылуды қажет етпей қолданыла беретін тегтер.
11-кесте. Тегтердің қолданылуы
| Тег атауы | Қолданылуы | Мысалы |
| <HTML> ... </HTML> | Бұл тегтер міндетті түрде бетінде болуы керек. Олар браузерлерге және іздеу жүйелеріне бұл HTML беті екенін айтады | <html> <head> ... Тақырыптық тегтер ... </head> <body> ... Беттің негізгі денесі ... </body> </html> |
| <body> </body> | Осы тегтер арасында парақтың барлық мазмұны көрінеді | |
| <head> </head> | Осы тегтердің ішінде барлық тақырып тегтері орналасуы керек | |
| <title> </title> | Бұл тегтер арасында браузердің жоғарғы жағында көрсетілетін бет тақырыбы жазылады | tml> <head> <h2 align = "center"> Тақырып </h2> |
| <center> </center> | Бұл тегтер ортасында орналасқан барлық нәрселерді ортаға түзетеді | <title> Та қы рыɩ 1.1. </title> </head> <body> <p align = "center"> <font color = "# 008080" siz e = "7"> <b> мә тін 1 </b> </font> <br> <font siz e = "6" <i> мә тін 2 </i> </h1> </font> </p> </body> </html> <h1> html бетін құру үлгісі </h1> <h2> Та қы рыɩ 1 </h2> ... <h2>Тақырыɩ1.1</h2> <h3> Та қы рыɩ 2 </h3> ... жә не т.с.с |
| <font> </font> | Бұл тегтер қаріпті, фонды, өлшем ді және т.б. өзгертуге арналған. Бір сөз бен айтқан да, мәтінді пішімдеуге қатысты барлық нәрсе бір тегте конфигурациялануы мүмкін | |
| <b> </b> | <b> жә не </b> арасында жазылған барлық қаріптердің қалыңдығын өзгертеді | |
| <i> </i> | Қаріпті көлбеуге өзгертеді | |
| <u> </u> | Қаріптің астын сызады | |
| <s> </s> <h1> </h1> | Қаріптің бетін сызады Бұл – тақырып тегтерінің тегтерінің кластарының бірі болатын <h1> .. <h6> тегтері. Әдетте, бұл беттің атауы болуы мүмкін | |
| <br/> | Бұл – жабу тегін қажет етпейтін жұпсыз тег. Ол мәтінді келесі жолға ауыстырады | <html> <body> ... <b> <h1> Та қы рыɩ </h1> <br> мә тін <br> мә тін </b> </body> </html> |
| <img alt = "Сілтеме" src = "URT_ Сурет"> | Бұл – суретті көрсететін жұпсыз тег. src – суреттің мекенжайын көрсететін қажетті параметр (URL_Image орнына, сурет сақталатын мекенжайды тіркеу қажет) | html> <body> ... <img src = "https:// www.pinterest. com/pin/476397085373 47914/_oriJ.MpJ"> ... </body> </html> |
| <hr/> | Көлденең сызық беретін жұпсыз тег | a href = "stranica_50.html"> stranica_50.html </a> Беттің толық мекенжайын жазуға болады |
| <a href = "URL"> мәтін_ сілтеме </a> | Сілтеме құруға арналған тег | a href = "stranica_50.html"> stranica_50.html </a> Беттің толық мекенжайын жазуға болады |
| background = "URL" | Фондық суретті анықтайды. URL орнына фондық сурет мекенжайы жазылады | <html> <body> <table align = "center" width = "100%" border = "1"> <tr> td colspan = "2"> Кесте мысалы </td> </tr> <tr> <td> Баған 1 </td> <td> Баған 2 </td> </tr> </table> </body> </html> |
| bgcolor = "түс" border = "сан " | Кестенің түсін анықтайды. Бүкіл кез келген түсті таңдауға болады Кескіннің айналасындағы жақтаудың қалыңдығын анықтайды | |
| <table> </table> | Кесте жасау тегі. Осы тегтердің арасында кесте орналасады | |
| <tr> | Жаңа жолды құрады | |
| <td> | Жаңа бағанды құрады |
Web-құжат –тегтер мен толық тырылған мәтіндік файл, оның мәтін де рін бір-бірі мен байланыстыра отырып, белгілеуге мүмкіндік беретін HTML тілі. Web-бет негізгі үш құрамды бөліктен тұрады: Осы тегтердің арасында сайт қолданушысына қолжетімді web-беттің негізгі мазмұны орналасады:
Кез келген web-құжаттың өзіндік ерекшеліктері болады, алайда олардың барлығының құрылымы стандартты компоненттерден тұрады (5-сызба).
Web-сайт – бір тақырып бойынша біріктірілген және өзара гипер сілтемелермен байланыстырылған web-беттер жиынтығы. Web-беттер жиынтығы, әдетте, web-сайтатауы мен адресі жазылған бума түрін де серверде орналастырылып қояды. Дайындалған сайттарға web-беттерді енгізу қиын емес. Сондай сайт көлемі үлкен, күрделі құрылымды, иерархиялық түрде болуы мүмкін. Оларға енгізілетін түрлі ақпарат жиі ауыстырыла беретіндіктен, сайтты өңдеп, жаңа деректер енгізіп отыру керек. Мұндай сайттарды тез іздеп табу үшін негізгі беттеріне кілттік сөздер (гиперсілтемелер)
енгізіліп қойылады. Негізінен web-сайт – негізгі екі компонентті қамтитын ақпараттықжүйе. Олар:
1) Көрсету компоненті (front – end). Оған мазмұнының көрінісі кіреді (беттер өлшемі, графика, аудио, мәтін).
2) Жүзеге асыру компоненті (back – end). Көрсету компонентіне негіз болып табылатын бейнеленбейтін сценарийлер, серверлік компоненттері бар ағымды кодтарды тиімді жүзеге асыруға байланысты. Web-сайтты жобалау кезеңдері – сайттың көлемін, функционалдылығынжәне т.б. анықтау (6-сызба).
1. Алдымен сайттың негізгі міндетін айқындап алу керек.
2. Сайтта қандай ақпарат орналасу керек екендігін анықтау керек.
3. Қажетті ақпаратты жинақтап алу қажет.
4. Сайттың дизайнын нақтылау керек.
5. Сайттың логикалық құрылымын жобалау қажет.
6. Сайттың физикалық құрылымын ойластыру керек, яғни сайтты құрайтын бөлек файлдарды бумаларға бөліп алу керек.
7. Барлығы дұрыс болғандығын тексеру қажет.
Жоспарлау кезеңінде төмендегі мәселелер шешілуі керек:
1) Сайттың орны.
2) Сайттың аудиториясы.
3) Ақпараттың жариялануы.
4) Қолданушылармен қарым-қатынастың ұйымдастырылуы. Элементтерді жасақтау кезеңінде сайттың программалық өнім түрін де жүзеге асырылуы қарастырылады:
1) навигациялық құрылымын жасау;2) беттің дизайнын жасау;
3) бетті толтыру үшін мәтіндік және бейне ақпаратты әзірлеу. Программалау. Бұл кезеңнің мәні сайтты форматтауда.
Тестілеу. Сайт жасаудың негізгі кезеңдерінің бірі – тестілеу. Тестілеу кезеңін де сайттың дұрыс жұмыс істейтіндігі тексеріледі, оның ішінде:
1) сілтеменің жұмысы;
2) мәтіндегі қателер;
3) навигацияның тиімділігі;
4) пошта және басқа формалардың дұрыстығы;
5) графикалық файлдардың ашылуы;
6) сайттың әртүрлі браузерлердегі жұмысы.
Жариялау. Тест аяқталғаннан кейін web-сайт серверде жарияланады және қайтадан тексеріледі. Жарнамалау. Web-қоғамдастығына жаңадан жарияланған сайт туралы белгілі болу үшін сайттың адресін және ол жердегі материал туралы аннотацияны хабарлау керек. Осы мақсатқа жету үшін көрсетілген мүмкіндіктерді пайдалануға болады:
1) web-cайт адресін әртүрлі баспаларға жазу керек;
2) web-сайтты әртүрлі серверлерде тіркеу;
3) web-cайтқа сілтемелерді басқа web-сайттарға кіргізу;
4) баннерлерді жарнама ретінде қолдану.
Бақылау. Web-сайтта жариялап, жарнамалаған соң оған қатысу деңгейі оның беттерінде орналастырылған ақпараттың қажеттілігімен, жаңалығымен және көкей тестілігі мен анықталады.
Web-сайтимиджін сақтау үшін ол жердегі ақпаратты әрдайым жаңартып тұру керек. Web-сайтты өңдеу мынадай кезеңдерден тұрады: • сайттың негізгі және типтік беттерінің дизайны (графикалық редакторда орындалады);• HTML-кодтау, браузер көмегімен көруге болатын код құрылады;
• сайтты программалау;• web-те сайтты орналастыру;
• web-те көрінуін жоғарылату мақсатында web-сайтты оптимизациялау;
• сайтты тапсырыс берушіге өткізу.
Сайт құрылған соң, оны web-серверде жариялау керек. Оның үш тәсілі бар:
1. Ең қарапайым тәсіл. Сайттың барлық файлдары диск немесе басқа ақпарат тасушыға жазылады. Оны web-сервер администраторы на апару керек. Администратор біздің дискіміздегі бумаларды сервердің қажетті бумасына жазып, программалық жасақтаманы баптайды.2. Өте аз тараған тәсіл. Кейбір тегін web-серверлер пайдаланушыға оның сайтының файлдарын web-шолушы арқылы жүктеуге мүмкіндік береді. Бұл тәсілдің жетістігі – жүктеудің қарапайымдылығы. Пайдаланушы енгізу өрісіне қажетті файлдардың атауларын жазып, Submit (жіберу) батырмасын басу керек.
3. Ең кеңтараған тәсіл. Web-сервер администраторы FTPсервер программасын орнатады. Содан соң автордың сұранысы бойынша осы сайт үшін бума құрады және авторға тек осы бумаға ғана кіру мүмкіндігін береді. Сайттың авторы FTP-клиент программасы
арқылы FTP-сервер ге қосылып, құрылған түпкі бумаға сайтының файлдарын көшіреді. Содан соң администратор web-серверде жа ңа сайттың бар екенін жариялайды. Егер авторға кейбір файлдарды жаңарту керек болса, ол қайтадан FTP-серверге қосылып, ескі файлдарды жойып, жаңа файлдарын көшіреді.Тапсырма 1. Сұрақтарға жауап берейік
1. Гипермәтін деген не?
2. HTML қалай пайда болды?
3. Web-беттерді қандай программалар көмегі мен жасауға болады?
4. HTML тілінде web-бетті қайда құруға болады?
5. Браузер-программалардың қандай түрлерін білесіңдер?
Тапсырма 2. Дәптерде орындайық
Кестені дәптерге толтырыңдар.
1. Блокнот программасын ашып, бос құжатты тапсырма 1. HTML деген атпен сақтаңдар.
2. <HTML>
<HEAD> <TITLE> Менің алғашқы web-сайтым
</TITLE> </HEAD> (Терезенің тақырыбын енгізу).
3. <BODY BGCOLOR = yellow TET = blue> (құжаттың денесі).
Мұндағы BGCOLOR = yellow құжаттың фоны – сары, ал TET = blue шығатын мәтіннің түсі көк болатынын анықтайды.
4. <H1> Менің алғашқы жұмысыма қош келдіңдер </H1>.
5. <H2> Сіздерге web-сайт жасау жолдарын көрсетемін </ H2> .
6. Бұл жолдар әртүрлі деңгейдегі тақырыптарды анықтайды.
7. HTML құжатта көрсетілетін ақпарат таусылғандықтан, <BODY> тегін жабу керек, ол үшін </BODY> деп жазыңдар. HTML құжаттағы жазу аяқталды, сондықтан <HTML> тегінде жабу керек, ол үшін </HTML> деп жазыңдар. Блокнотты жауып, жасаған жұмыстарыңды браузерде ашыңдар.