HTML мен CSS технологиялары
HTML (Hyper Text Markup Language) – вебшолғышта көрсетілуге арналған гипермәтіндік өлшеуіш тілі. Күрделі SGML (Standard Generalized Markup Language) өлшеуіш тілінің мүшесі болып табылады. HTML беттер ғаламторда браузерден серверге, жай текст немесе жасырын символдар (шифрлар) арқылы HTTP және HTTPS хаттамаларымен жіберіледі.
HTML тілін британ ғалымы Бернерс-Ли 1986-1991 жылдары Женев (Швейцария) Еуропалық ядерлік зерттеу орталығында жасаған болатын. Ол алғашында, ғылыми және техникалық документацияларды халық арасында алмастыруға арналған тіл ретінде танылған. HTML көмегімен әдемі жасалған веб-парақшаны оңай және тез жасауға болады.
HTML құжаттар (.html немесе .htm кеңейтілімді файлдар) толық көрсететін арнайы бағдарламада өңделеді. Мұндай бағдарламалар – веб-шолғыштар немесе браузерлер деп аталынады. Қазіргі кездегі атақты браузерлер: Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Safari және т.б.
HTML құжаттар таңбалауға арналған тегтер көмегімен құрылады. Әрбір тегтердің бастапқы және соңғы түрі ажыратылады (кейбіреулерін санамағанда). Одан басқа тегтердің атрибуттары, яғни қасиеттері ажыратылады. Айталық, тақырыпқа түсін, өлшемін, қаріп түрін белгілеу үшін қолданылады. Келесі қарастыратын мысалда <p> тегі – параграфты көрсетеді және оның – align=”center” текстті ортасына дұрыстайтын атрибуты бар. Сонда «ҚазҰТЗУ, АжТТИ тексті», суретте коды (1.1) және нәтижесі (1.2) көрсетілген:
CSS (ағылшынша Cascading Style Sheets – стильдер кестелерінің тілі) – веб-парақшаларды форматтау үшін қолданылатын белгілеу тілі.
«Стильдер кестелерінің тілі» терминін Хокон Виум Ли 1994 жылы ұсынды. Кейіннен Берт Бос екеуі дамытты. 1996 жылы CSS1 шығарылды. CSS осылайша веб-технологиялар саласында кең қолданысқа ие болды.
CSS – HTML құжаттарға сыртқы көрінісін беру үшін қажет. Мысалы, шрифттар мен басқа да элементтердің түстерін, элементтердің өзара қатынасын, блоктардың орналасуын реттеп, өңдеуге мүмкіндік береді. Сонымен қатар, CSS көмегімен үлкен сайттар құрылымын, қайталанатын элементтерді оңай басқара аламыз.
CSS – қарапайым тексттік құжат болып табылады. Құжат құрылымы селекторлардан тұрады. Әр селектордың өз ережелері болады. Ережелерінде сол селектордың сипаты және сипат ережелері жазылады. Бір селектордың өзінде бірнеше ережелер жазыла береді. Мысалы, тақырыптың позициясын, орналасу ретін, қаріп түрін, түсін, стилін бір селекторда оңай жаза аламыз.
Негізгі селекторлар типтері:
– әмбебап селектор (универсалды) *{ … };
– тег селекторы p{ … };
– әулет селекторы ul em{ … };
– класс селекторы .class{ …};
– идентификаторлы селектор #id{ … };
– топ селекторы h1, h2, h3{ … };
1.3 JavaScript – объектіге бағытталған скрипттік бағдарламалау тілі
JavaScript – объектіге бағытталған скрипттік (немесе сценарийлер) бағдарламалау тілі. ECMAScript тілінің диалекті болып табылады.
Аталған бағдарламалау тілінің тарихы 1992 жылдан Nombas компаниясынан бастау алады. Алғашында макростардың орнын басуға ыңғайлы болуы үшін, Си бағдарламалау тілінің синтаксисына ұқсата отырып, құрастырушыларға үйренуге оңай болу мақсатында Cmm (Си-минус-минус) скрипттік тілін өңдеуден бастады.
1995 жылдың 4 сәуірінде Брендан Эйх, Марка Андрессен және Билл Джой веб-дизайнерлер мен бастапқы құрастырушыларға ыңғайлы LiveScript (алғашында Mocha) тілін құрастырды. Құрылымына C мен Java бағдарламалау тілдерінің синтаксисі кіреді.
2 Web-сайт құруға кіріспе
2.1 Web-сайт құру кезеңдері
Web-сайт құрудың негізгі міндеті құрылатын сайттың құрылымы, ақпараттық толтыруы және ақпараттық модельдерін анықтау. Сайт құраушы келесі кезеңдерді қарастуы тиіс: жоспарлау, іске асыру, тестілеу, жариялау, жарнамалау, қызмет көрсету.
Көп жағдайда web-сайт өзіндік иерархия болып келеді. Иерархиялық құрылымның екі түрі бар: кең емес-терең иерархия және кең таяз иерархия (суретте көрсетілген).
– Кең емес-терең иерархия. Бұл иерархия түрінде жоғарғы деңгейде аз санаттан тұрады. Пайдаланушы өзіне қаже ақпарат алу үшін бірнеше деңгей парақтардан өтеді.
– Кең таяз иерархия. Мұнда пайдаланушы қажетті ақпаратты алу үшін бір-екі шертпе жасаса болды, қажетті мазмұн ашылады.
3 Құрылатын сайт туралы мәлімет
3.1 Сайт аты, құрылымы, мазмұны
Құрылған сайт «PolyTech» бағдарламалау мектебі туралы. Сайтта мектеп туралы ақпарат, сабақтар түрлері, байланыс, жасалынған жобалар туралы ақпарат бар. Құрылатын сайт кең-таяз иерархиялық құрылымға ие. Себебі сайт аз парақшалардан тұрады, қажетті ақпаратты ең көп – үш шертпе арқылы алынады. Құрылған сайттың технологиялар құрамына HTML, CSS, JavaScript технологиялары, суреттер, сыртқы сілтемелер және Bootstrap фрэймворкі кіреді.
Енді қажетті ресурстарды қарастырайық. css папкасында сайтқа өң, сыртқы келбет беру үшін қажетті css құжаттар бар. font-awesome папкасында сайтта қолданылған пернелер, иконкалар орналасқан. Font Awesome – арнайы векторлық пернелер мен иконкалар жиынтығы. fonts – сайтта қолданылған қаріптер, img – суреттер, js – папкасында скрипттер мен анимациялар құру үшін құрылған JavaScript құжаттар орналасқан. Ал қалғандары сайттың HTML құжаттары, яғни, веб-парақшалар.
Сайттың барлық парақшалары бірдей <head> тегінен құралады (тек, сайт атаулары, байланыстырылған CSS және JS құжаттары өзгертіліп көрсетіледі). Барлық web-парақшалар <!DOCTYPE html> тегінен басталады. Ол HTML құжат соңғы 5 нұсқада екенін көрсетеді. <html lang=”ru”> тегі құрылатын сайттың орысша тілде жазылғанын көрсетеді. Одан кейін <head> тегінде сайттың аты, кодировка, контенті, белгішесі (иконка), байланыстырылған CSS құжаттар орны көрсетілген.
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<meta name=»description» content=»»>
<meta name=»author» content=»»>
<title>PolyTech бағдарламалау мектебі</title>
<link href=»css/bootstrap.min.css» rel=»stylesheet»>
<link href=»css/stylish-portfolio.css» rel=»stylesheet»>
<link href=»font-awesome/css/font-awesome.min.css» rel=»stylesheet» type=»text/css»>
<link href=»http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic» rel=»stylesheet» type=»text/css»>
<link rel=»icon» href=»img/logo.jpg»>
</head>
Енді сайттың басты бетін толық қарастырайық. Біз алдымен сайттың браузердегі көрінісін, содан кейін оның HTML және CSS кодтарымен танысамыз (қажет жағдайда анимацияның JS кодтарымен).