Веб сайттың ішкі құрылымы

Жұмыс түрі: Курстық жұмыс
Тегін: Антиплагиат
Көлемі: 46 бет
Таңдаулыға:

ҚАЗАҚСТАН РЕСПУБЛИКАСЫНЫҢ БІЛІМ ЖӘНЕ ҒЫЛЫМ МИНИСТРЛІГІ
АЛМАТЫ ҚАЛАЛЫҚ БІЛІМ БАСҚАРМАСЫ

МКҚК Алматы мемлекеттік энергетика және электронды технологиялар колледжі

КУРСТЫҚ ЖОБА

мамандығы: 1305000-Ақпараттық жүйелер(қолдану саласы бойынша___
тақырыбы: Күтімдік продукцияға арналған Web-сайт құру___________

Орындаған: ИС-180 тобының білім алушысы:

Жетекші:

----------------------------------- ----------------------------------- ----------
(қолы)
----------------------------------- ----------------------------------- ----------

----------------------------------- ----------------------------------- ----------

(қолы)

Амангелді А.Б.

Ғабиденқызы А

Алматы, 2021

МАЗМҰНЫ
I.КІРІСПЕ ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 3-5
II.НЕГІЗГІ БӨЛІМ ... ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...6-
2.1 Веб-сайттар туралы жалпы түсініктеме ... ... ... ... ... ... ... ... ... ... ... ... ... .6-10
2.2 Веб-сайтты жасауға қолданылатын тілдер мен қосымшалар ... ... ... ... 10-25
2.3 Веб сайттың ішкі құрылымы ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...25-31
2.4 Веб сайтты құру барысы ... ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ... ... 31-38
III.ҚОРЫТЫНДЫ ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..
ПАЙДАЛАНЫЛҒАН ӘДЕБИЕТТЕР ТІЗІМІ ... ... ... ... ... ... ... . ... ... ... ... ..

КІРІСПЕ
Веб-сайттың негізгі маңыздылығы. Неліктен веб-сайт үлкен қолданысқа ие?
Цифрландыру? Кейбір кәсіпорындарда әлі де веб-сайт жоқ немесе тек қарапайым,кішігірім веб-сайттары бар. Бір таңқаларлығы, веб-сайты жоқ кәсіпкерлердің жартысынан көбі өздеріне онлайн режимінде қатысудың қажеті жоқ деп санайды. Қалғандары өздерінің интернеттен бас тартуын компанияның веб-сайтын құру және жүргізу бойынша арнайы білімдерінің жетіспеуімен аяқтайды. Сонымен бірге бұл тапсырманы кәсіпқойларға сеніп тапсыру тым қымбатқа түседі дейді. Бірақ та осы мәселенің салдарынан бұл кәсіпорындардың басқаларына қарағанда, шағын-шағын кемшіліктері болады. Яғни, клиенттер үшін компаниямен тікелей байланыс орнату қиынға соғады. Міне осы мәселе клиенттер санының азаюына алып келеді.
Осы секілді мәселелер болмас үшін веб-сайттың болғаны дұрыс. Алдағы түсіндірмемізде веб-сайттың маңыздылығы жайында қарастыратын боламыз.Сонымен қозғап отырған тақырыбымыз, дәлірек айтқанда веб-сайт не себепті маңызды?
1-себеп: Веб-сайт клиенттердің назарын сіздің компанияңызға аударады. Бүгінде бірдеңе сатып алғысы келетін немесе қызмет көрсетушіні іздейтін адам Интернеттен жиі іздейді. Сондықтан парақшалары Google-де көрсетілетін компаниялар клиенттерді қызықтырады. Егер сізде кәсіби веб-сайт болмаса, сіз бәсекелестерден клиенттеріңізді жоғалтуыңыз мүмкін. Сонымен қатар, қанағаттанған клиенттер достарына және таныстарына компанияны басқаларға ұсынғысы келсе, компанияның сайтының сілтемесін жібере алады.
2-себеп: Сіздің компанияңызбен кез-келген уақытта веб-сайт арқылы байланысуға болады. Жарнамалық кампаниялар компания туралы ақпарат пен коммуникацияларды қысқа уақыт аралығында ғана көпшілікке қол жетімді етеді. Веб-сайт басқаша: оны жасағаннан кейін оған кез келген уақытта қол жеткізуге болады. Мысалы, дүкен сатып алушыларға тәулік бойы дүкеннің қашан жұмыс істейтіндігі, не ұсынатыны немесе оған қалай жетуге болатындығы туралы хабарлауға болады.
Клиенттер кез-келген уақытта сұрақтарға жауап ала алады. Телефоннан айырмашылығы, компаниямен әрдайым электрондық пошта арқылы байланысуға болады.
3-себеп: Веб-сайт жан-жақты ақпарат алуға көмектеседі. Компанияның тарихы мен қызметінен бастап, жұмысшыларына дейін сілтемелер мен суреттерге қарап компани туралы мәліметке қол жеткізуге болады. Алайда, жарнамалар, радиожабдықтар немесе плакаттар үшін орын шектеулі. Екінші жағынан, веб-сайтта компаниялар олар үшін барлық маңызды ақпаратты ұсына алады. Бұл ұсыныстың барлық артықшылықтарын егжей-тегжейлі ұсынуға мүмкіндік береді, әсіресе түсіндіруді қажет ететін өнімдер мен қызметтерге қатысты. Бұл қалың, жылтыр брошюралар немесе каталогтар үшін де мүмкін - бірақ олар тез ескіреді, әрі экологиялық тұрғыдан қарағанда да зиян.
4-себеп: Жақсы веб-сайт сіздің компанияңызды заманауи етеді. Көптеген клиенттер үшін компанияның веб-сайты компаниямен байланыс орнатудың алғашқы нүктесі болып табылады. Егер сіз бірінші жақсы әсер қалдырғыңыз келсе, сіздің интернеттегі қатысуыңыз ұқыпты және заманауи болуы керек. Егер компанияның веб-сайты болмаса немесе ол ескірген болса, ол клиенттерді артқа тартуы мүмкін. Демек, бұл веб-сайттың дизайнына да көңіл бөлу керектігіңізді білдіреді.
5-себеп: Веб-сайт арқылы жаңа мүмкіндіктер туралы оңай хабарлауға болады. Компанияда ешнәрсе ұзақ уақыт бойы өзгермей тұрмайды. Жаңа ұсыныстар болсын, байланысатын адамдар ауысса немесе жұмыс уақыты ұзартылса: клиенттерге компанияның сайты арқылы осындай жаңалықтар туралы хабарлауға болады.
6-себеп: Веб-сайтты қосымша сату арнасы ретінде пайдалануға болады.
Интернет-дүкенді өз веб-сайтына біріктіретін кез-келген адам өз өнімдерін сатудың жаңа арнасын жасайды. Бұл жергілікті компанияларға өз ауқымын кеңейтуге мүмкіндік береді, мысалы, олар Интернет арқылы аймақтан тыс немесе тіпті бүкіл әлем бойынша клиенттерге қол жеткізе алады.
Жұмыс мақсаты:
Жұмыс барысында веб-сайт құру тәжірибесін кеңейту;
Жаңа материалдармен танысу;
Берілген тақырыптағы веб-сайтты құру;
Жасалған веб-сайтқа түсіндірме беру және оны сипаттау;
Жұмыс міндеті: веб-сайт құру.
Зерттеу пәні: веб-бағдарламалау.

2.1. Веб-сайттар туралы жалпы түсініктеме
Пайдаланушы жағынан веб-сайт біртұтас организм ретінде қабылданады, оның міндетті түрде өзінің жеке мекен-жайы болады.
Бұл не екенін түсіну үшін - Интернеттегі веб-сайт, қарапайым аналогияны қарастырыңыз. Кез-келген кітапты алыңыз. Ол жеке тараулардан, мақалалардан, әңгімелерден және басқа бөлімшелерден тұрады. Дегенмен, олар үйлесімде ең құнды, өйткені олар бір-бірін жалғастырады. Сол сияқты веб-сайт әртүрлі материалдарды біріктіретін кітап ретінде жұмыс істейді.
Қазіргі кезде көптеген кәсіпкерлер веб-сайт не үшін керек деп ойланады. Өнім сатып алу немесе қызметке тапсырыс беру қажет болғанда, өзімізге қажет нәрсені интернеттен іздейміз. Жеке веб-сайттары бар компаниялардың бәсекелестікке қарағанда сөзсіз артықшылығы бар.
Веб-сайтты ашудың бірнеше себептері бар:
-Ақпараттың таралуы. Веб-сайт - бұл сіздің компанияңыз туралы ақпаратты аудиторияға жеткізуге, мамандандыру, қызмет, қызмет, баға саясаты және т.б. туралы әңгімелесудің тамаша тәсілі.
-Тиімді жарнама. Егер компания веб-сайт жасаса, ол автоматты түрде оның жарнаманы ілгерілету құралына айналады.
-Қарым-қатынас алаңы. Веб-сайт сонымен қатар байланыс құралы болып табылады, мұнда екі қызметкер де бір-бірімен және клиенттер компаниямен сөйлесе алады. Пайдаланушылардың кері байланысы жақсы нәтижеге қол жеткізуге көмектеседі.
-Кескіннің қалыптасуы. Сайт Интернетте сіздің компанияңыздың жағымды имиджін жасайды, ұйымның мәртебесін көтереді және тұтынушылардың адал көзқарасын қалыптастырады.
-Тиімді маркетинг. Сайт өнімдерді қызметтерді жылжытуға және сатуға мүмкіндік береді.
Сайт түрлері:
Визит картасының веб-сайты. Бұл компания туралы шағын нұсқаулық, онда қысқаша түрде нақты және анық, бір парақта қызметі, байланыстары туралы негізгі мәліметтер келтірілген. Мұндай ресурстың негізгі артықшылықтары: арзан және тез жасалған, пайдалану оңай.
Корпоративті. Бұл ресурстың негізгі міндеті - бизнестің табысын арттыру. Корпоративтік веб-сайттың көмегімен клиенттер каталогты көре алады, тапсырыс береді, акциялар туралы біледі және т.б. Корпоративті веб-сайт - бұл сіздің бизнесіңіздің байыпты және берік екендігінің дәлелі. Бұл жарнаманың ең арзан құралы емес, бірақ дұрыс ұсынылған кезде оның әсері оған тұрарлық.
Жарнамалық сайт. Промо-компания конкурс акция басталған жағдайларда қолданылады. Құрылымы бойынша ол жарнамалық брошюраға немесе брошюраға ұқсайды, ол пайдаланушыларды міндетті түрде қызықтыру үшін жарқын және шырынды жасалған.
Витриналық сайт. Бұл бір өнім ұқсас тауарлар тобы сатылатын бизнес үшін ең жақсы нұсқа. Мұнда бұл тауарлар барлық жағынан сипатталған, олардың толық фотосуреттері, бағасы көрсетілген. Каталог пайдаланушы ең төменгі басу санымен қажетті позицияны таба алатындай етіп ұйымдастырылған.
Интернет дүкен. Мұнда сіз өнімді көріп қана қоймай, оған тапсырыс бере аласыз және кейбір ресурстарға дереу төлей аласыз. Оның басты қасиеті - бұл пайдаланушы ешқандай кедергісіз сатып алуды жүзеге асыруы үшін мүмкіндігінше қарапайым және ыңғайлы болуы керек.
Құру мақсаты бойынша:
-Коммерциялық (сайтта сіз тауарларды сатып ала аласыз, тапсырыс бере аласыз).
- Коммерциялық емес болып 2 түрге бөлінеді.
Қатынау түрі бойынша:
-Ашық (бәріне қол жетімді).
-Жартылай ашық (қол жеткізу үшін белгілі бір шарттар орындалуы керек).
-Жабық (шектеулі адамдар саны бар.
-Шешілетін міндеттер санаты бойынша:
-Көпфункционалды, көпсалалы ресурстар (әр түрлі салаларды қамтиды).
-Жаңалықтар (жаңалықтармен алмасу алаңдары).
-Жоғары мамандандырылған, белгілі бір тақырыпқа арналған.
-Форумдар мен әлеуметтік желілер (ақпарат алмасу, байланыс үшін құрылған).
-Кіріспе (аудиторияны компаниямен өніммен қызметпен және т.б. таныстыру үшін жасалған).
-Ақпараттық немесе мақала (мақалалар мен қызықты басылымдар осында орналастырылған).
-Көңіл көтеру (олардың басты міндеті - пайдаланушының уақытты жақсы өткізуі).
-Веб-қызметтер (мұнда пайдаланушылар белгілі бір тапсырмаларды орындай алады).
Веб-сайтты қалай құрудың бірнеше әдісі бар.
Веб-студияда немесе фрилансерде веб-сайт құруға тапсырыс бере аламыз, қалаған талаптарымыз бен тілектерімізді сипаттай аламыз. Әдістің артықшылықтарының ішінен мынаны атап өтуге болады: арнайы білім мен дағдылар қажет емес, сайт кәсіпқойлармен айналысады (жұмыста қателіктер мен сәтсіздіктер болмайды), уақытты үнемдеу. Жалғыз негатив - ақша жұмсау қажет болады, ал сайт неғұрлым күрделі болса, соғұрлым көп болады.
Дайын ресурстарды сатып алу. Әдістің артықшылығы: өзімізге сәйкес келетін дұрыс ресурстарды өзіміз табамыз. Біз барлық қажетті заттармен дайын ресурс аламыз (мазмұны жазылып қойған, индекстеу алға қойылған); Сайттарды ашуға деген күш-жігеріміз сайттарды сатып алу-сату биржасына баруға дейін азаяды. Кемшіліктері:сайт іздеуге уақыт жұмсалынады, тиімді жұмыс істей алатын ресурстарды сатып алу үшін ең болмағанда минималды біліміңіз болуы керек және бізге тағы ақша керек.
Өз таңдаған дизайнермен хостингте жасау.Оған ақылы немесе ақысыз ресурстарды таңдай аламыз. Тегін хостингтің бірқатар кемшіліктері бар: шектеулі мүмкіндіктер: қатты дискінің аздығы, сценарийлердің аздығы, минималды техникалық мүмкіндіктер, ресурстарда үшінші деңгейлі жарнаманың болуы, үшінші деңгейлі домен ұсынылған, сайт дизайнына арналған шаблондар шектеулі, hoster сайт үшін жауап бермейді. Ақылы ресурс қазірдің өзінде жетілдірілген функционалдылыққа ие, оған деректер базасымен және сценариймен жұмыс істейтін CMS қосуға болады. Ақылы хостингте ыңғайлы веб-сайт құрастырушысы бар веб-сайт жасаған дұрыс. Хостинг жоспарын осы жерде төлеу керек, конструктор әдетте ақысыз.
Веб-сайт қалай жұмыс істейді
Пайдаланушы үшін бәрі өте қарапайым: браузерде баннерлер, навигация жүйесі, жаңалықтар және басқалары бар беттер жиынтығы көрсетіледі. Алайда, сыртқы қабықтың астын қарасаңыз, бағдарламалау тілінде жазылған барлық элементтерді көре аламыз. Келушілердің барлық сұраныстары серверге жіберіледі, олар бірден өңделеді және жауап түрінде дайын формада кері жіберіледі.
Сайт иесі үшін деректерді үнемі жаңартып отыру, жаңа материалдарды орналастыру және ресурстарды басқару қажеттілігі айқын. Осы мақсатта мазмұнды басқару жүйесі (CMS) қолданылады. Бұл пайдаланушылардың сұраныстары мен қажеттіліктері негізінде беттер жасауға мүмкіндік беретін қозғалтқыш. CMS ішінде 2 интерфейс бар: пайдаланушы және әкімші, яғни келушілерге және администраторға арналған жағы. Мазмұн қосу, модульдерді конфигурациялау, пошта арқылы жіберу және басқа операциялар әкімші блогынан жүзеге асырылады. Өңдеу Word-қа өте ұқсас арнайы WYSIWYG редакторымен жүзеге асырылады.
Әкімші үшін CMS және мәліметтер базасын басқару жүйесі болуы маңызды. Бұл жерде ресурстардың барлық ақпараты мен мазмұны сақталады. CMS жүйесі php бағдарламалау тілінде жұмыс істейді.
Сайт беттері
Сайттағы парақтар статикалық болуы мүмкін, яғни олар өзгермейтін файлдар түрінде веб-серверде сақталады немесе динамикалық болуы мүмкін, яғни олар тікелей серверде арнайы бағдарлама арқылы жасалады, оны басқа деп те атайды. сайттың қозғалтқышы. Сайттың қозғалтқышы веб-беттердің мазмұнын өзгертуге, жаңа веб-беттер қосуға және веб-сайтты конфигурациялау және ондағы ақпаратты веб-әкімшілік интерфейсі арқылы өңдеу үшін басқа әрекеттерді орындау үшін кең мүмкіндіктер ұсына алады, бұл мазмұнды басқару жүйесі немесе CMS деп аталады. .
Веб-сайтты құру - бұл әртүрлі мамандардың жұмысын біріктіретін ауыр процесс: веб-дизайнерлер, бағдарламашылар, HTML кодерлері, оптимизаторлар, менеджерлер, журналистер сайтты ақпаратпен толтыру үшін және т.б. Веб-сайтты құру уақыты мен құны жобаның күрделілігіне, оның құрылымына және дизайн сапасына байланысты.
Көріп отырғаныңыздай, дұрыс ұйымдастырылған және жақсы жұмыс істеген веб-сайт тұтынушыларды қызықтыратын, тауарлар мен қызметтерді тиімді насихаттайтын платформа болып табылады.

2.2 Веб-сайтты жасауға қолданылатын тілдер мен қосымшалар
Ең бірінші алғашы құрылған веб-сайт туралы айтып кетсек. Әлемдегі алғашқы сайтты 1991 жылы 6 тамызда американдық Тим Бернерс-Ли құрды, ол сайтта Дүниежүзілік Интернет желісінің технологиясы туралы жариялады. World Wide Web технологиясы HTTP деректерді жіберу хаттамасына, HTML гипермәтінді белгілеу тіліне және URL мекен-жайы жүйесіне негізделген. Сайт сонымен қатар Интернеттің басқа негізгі принциптерін сипаттады, мысалы, серверлер, веб-шолғыштар және т.б. Тим Бернерс-Ли жасаған сайт сонымен қатар әлемдегі алғашқы Интернет-каталогқа айналды, өйткені кейінірек сол кездегі Интернеттің басқа ресурстарына сілтемелер орналастырды.
Сайтқа қажетті құралдар ертерек дайындалған, 1990 жылдың соңында WorldWideWeb деп аталған алғашқы шолғыш пайда болды, оған гипермәтіндік редактордың функциясы қосылды. Тим Бернерс-Ли NeXTcube негізіндегі алғашқы веб-серверді де құрды.
HTML дегеніміз не? Бұл гипермәтінді белгілеу тілі. Бұл қолданушыға веб-парақтар мен қосымшаларға арналған бөлімдер, абзацтар, тақырыптар, сілтемелер мен блоктар құруға және құрылымдауға мүмкіндік береді.

HTML программалау тілі емес, яғни динамикалық функцияларды құру мүмкіндігі жоқ. Оның орнына, бұл құжаттарыңызды Microsoft Word-қа ұқсас етіп ұйымдастыруға және пішімдеуге мүмкіндік береді.
HTML-мен жұмыс жасағанда, біз веб-парақты белгілеу үшін қарапайым код құрылымдарын (тегтер мен атрибуттар) қолданамыз. Мысалы, біз параграфты тіркелген мәтінді түпнұсқа p тегіне және жабу p тегіне орналастыру арқылы жасай аламыз.
HTML-ді Швейцариядағы CERN зерттеу институтының физигі Тим Бернерс-Ли ойлап тапты. Ол Интернеттегі гипермәтіндік жүйені ойлап тапты.
Гипермәтін дегеніміз - көрермендер бірден қол жеткізе алатын басқа мәтіндерге сілтемелері бар мәтін. Ол 1991 жылы 18 HTML тегтерінен тұратын HTML-нің алғашқы нұсқасын шығарды. Содан бері HTML тілінің әрбір жаңа нұсқасы жаңа тегтер мен атрибуттарды (тегтер модификаторлары) белгілей отырып пайда болды.
Mozilla Developer Network ұсынған HTML элементінің анықтамасына сәйкес, қазіргі уақытта 140 HTML тегтері бар, дегенмен кейбірі ескірген (қазіргі браузерлер қолдамайды).
Танымалдықтың тез өсуіне байланысты HTML қазір ресми веб-стандарт болып саналады. HTML сипаттамаларын Дүниежүзілік Желі Консорциумы (W3C) қолдайды және дамытады. Сіз тілдің соңғы күйін кез келген уақытта W3C веб-сайтынан тексере аласыз.
Тілдегі ең үлкен жаңарту 2014 жылы HTML5-тің енгізілуі болды. Өз мазмұнының мағынасын көрсететін бірнеше жаңа семантикалық тегтер қосылды, мысалы, article, header және footer.
HTML қалай жұмыс істейді?
HTML құжаттары - .html немесе .htm кеңейтілімімен аяқталатын файлдар. Сіз оны кез-келген веб-шолғышты (мысалы, Google Chrome, Safari немесе Mozilla Firefox) пайдалана отырып көре аласыз. Браузер HTML файлын оқиды және оның мазмұнын Интернет қолданушылары көре алатындай етіп көрсетеді.
Әдетте, орташа веб-сайтта бірнеше әртүрлі HTML-парақтар болады. Мысалы: үй беттері, кәдімгі беттер, байланыс беттерінде бөлек HTML құжаттары болады.
Әрбір HTML-парақ тегтер жиынтығынан тұрады (оларды элементтер деп те атайды), оларды веб-парақтардың құрылыс блоктары деп атауға болады. Олар мазмұнды бөлімдерге, абзацтарға, тақырыптарға және басқа блоктарға құрылымдайтын иерархияны жасайды.
HTML элементтерінің көпшілігінде tag tag синтаксисі қолданылатын ашық және жабық болады.
-Маңызды элемент - қарапайым бөлу (div div), оны мазмұнның үлкен бөлімдерін белгілеу үшін пайдалануға болады.
-Онда тақырып (h1 h1), тақырыпша (h2 h2), екі абзац (p p) және сурет (img) бар.
-Екінші абзацта URL мекенжайы бар href атрибуты бар сілтеме (a a) бар.
-Кескін тегінде де екі атрибут бар: кескін жолына арналған src және кескінді сипаттауға арналған alt.
Ең көп қолданылатын HTML тегтеріне шолу
HTML тегтері екі негізгі түрге бөлінеді: блок деңгейіндегі және кірістірілген тегтер.
Блок деңгейінің элементтері барлық бос орынды алады және құжатта әрдайым жаңа жолды бастайды. Тақырыптар мен абзацтар блок-белгілердің керемет мысалдары болып табылады.
Кірістірілген элементтер қажет болғанша көп орын алады және парақта жаңа жолды бастамайды. Олар әдетте блок деңгейіндегі элементтердің ішкі мазмұнын форматтау үшін қолданылады. Сілтемелер мен сызылған сызықтар кірістірілген тегтердің жақсы мысалдары болып табылады.
Деңгейлік белгілерді бұғаттау
Әр HTML құжатында үш блок деңгейлері болуы керек: html, head және body.
html html тегі - бұл әрбір HTML парағын қамтитын ең жоғары деңгейлі элемент.
head head тэгінде бет атауы және кодтау сияқты мета ақпараттар бар.
Соңында, body body тегі бетте көрсетілген барлық мазмұнды қамтиды.
HTML-де тақырыптар 6 деңгейден тұрады. Олар h1 h1 -ден h6 h6 дейін, мұнда h1 - ең жоғарғы деңгей тақырыбы, ал h6 - ең төменгі деңгей. Параграфтар p p қоса беріледі, ал блоктық түсініктемелерде blockquote blockquote тэгі қолданылады.
Бөлімдер дегеніміз - мазмұнның үлкен бөлімдері, оларда бірнеше параграфтар, суреттер, кейде жазбаларды блоктайды және басқа да кіші элементтер бар. Біз оларды div div тегінің көмегімен белгілей аламыз. Div элементінің ішінде басқа div тэгі болуы мүмкін.
Сондай-ақ, тапсырыс берілген тізімдер үшін ol ol тегтерін, ал реттелмеген тізімдер үшін ul ul тегтерін пайдалануға болады. Жеке тізім элементтері li li тегіне қосылуы керек.
Мысалы, HTML-де негізгі ретсіз тізімнің көрінісі:
ul
li Тізім элементі 1 li
li Тізім элементі 2 li
li Тізім элементі 3 li
ul
Кірістірілген тегтер
Көптеген кіріктірілген тегтер мәтінді пішімдеу үшін қолданылады. Мысалы, strong strong тегі ерекшеленген элементті қарамен, ал em em тегтер оны курсивпен көрсетеді.

Гиперсілтемелер - бұл сілтеме тағайындалған жерді көрсету үшін a a тегтері мен href атрибуттарын қажет ететін кірістірілген элементтер:
Суреттер сонымен қатар кірістірілген элементтер болып табылады. img бар біреуін жабылатын тегсіз қосуға болады. Сонымен қатар сурет жолын көрсету үшін сізге src атрибутын қолдану қажет болады, мысалы:
img src="imagesexample.jpg" alt="кескін "
HTML эволюциясы.
HTML мен HTML5 арасындағы айырмашылық неде?
Алғашқы күндерден бастап HTML керемет эволюциядан өтті. W3C үнемі жаңа нұсқалар мен жаңартуларды жариялайды, сонымен бірге тарихи белестер арнайы аттар алады.
HTML4 (қазіргі кезде HTML деп аталады) 1999 жылы жарық көрді және соңғы негізгі нұсқасы 2014 жылы шықты. HTML5 - тілге көптеген жаңа мүмкіндіктер енгізген жаңарту.
HTML5-тің күтілетін мүмкіндіктерінің бірі - аудио және бейнені ендіруді қолдау. Flash ойнатқышын пайдаланудың орнына біз жаңа audio audio және video video тегтерін қолданып, веб-парақтарымызға жай бейне және аудио файлдарды енгізе аламыз. Оған математикалық және ғылыми формулаларға арналған масштабталатын векторлық графика (SVG) және MathML қолдауы кіреді.
HTML5 сонымен қатар бірнеше мағыналық жетілдірулер енгізді. Жаңа семантикалық тегтер браузерлерге мазмұнның мағынасы туралы хабарлайды, бұл оқырмандарға да, іздеу жүйелеріне де тиімді.
Ең танымал семантикалық тегтер - article article, section section, aside aside, header header және footer footer.
HTML-дің артықшылықтары мен кемшіліктері
Көптеген нәрселер сияқты HTML-дің күшті және әлсіз жақтары бар.
Артықшылықтары:
-Көптеген ресурстарға және кең қауымдастыққа ие кең қолданылатын тіл.
-Әр веб-шолғышта табиғи түрде жұмыс істейді.
-Оқудың тегіс қисық сызығымен келеді.
-Ашық көзі және мүлдем тегін.
-Таза және дәйекті түзету.
-Ресми веб-стандарттарды World Wide Web Consortium (W3C) қолдайды.
-PHP және Node.js. сияқты негізгі тілдермен оңай интеграцияланады.
Минустары:
Көбінесе статикалық веб-парақтар үшін қолданылады. Динамикалық функционалдылық үшін сізге JavaScript немесе PHP сияқты Backend тілін қолдану қажет болуы мүмкін.
Бұл пайдаланушының логиканы жүзеге асыруына жол бермейді. Нәтижесінде, мысалы, бірдей элементтерді қолданса да, барлық веб-парақтарды бөлек жасау қажет. колонтитулдар мен колонтитулдар.
Кейбір браузерлер жаңа мүмкіндіктерді баяу қабылдайды.
Кейде браузердің әрекетін болжау қиын (мысалы, ескі браузерлер әрдайым жаңа тегтер жасай бермейді).
HTML - Интернеттегі негізгі белгілеу тілі. Ол әр браузерде жұмыс істейді және оны бүкіләлемдік желі консорциумы қолдайды.
Сіз оны веб-сайттар мен веб-қосымшалардың мазмұндық құрылымын жасау үшін қолдана аласыз. Бұл frontend технологиясының ең төменгі деңгейі және сіз CSS-пен қосуға болатын стильдеудің негізі және JavaScript-пен енгізе алатын функционалдылық үшін қызмет етеді.
CSS (каскадтық стильдер кестесі) - бұл сіздің веб-парағыңызды сәндеуге арналған код. CSS негіздері сізге не бастау керек екенін түсінуге көмектеседі. Біз келесі сұрақтарға жауап береміз: мәтінді қара немесе қызыл етіп қалай жасауға болады? Мазмұнды экрандағы белгілі бір жерде қалай көрсетуге болады? Веб-парағымды фондық суреттер мен түстермен қалай безендіруге болады?
HTML сияқты, CSS іс жүзінде бағдарламалау тілі емес. Бұл түзету тілі емес - бұл стиль кестесі. Бұл дегеніміз, HTML құжаттарындағы элементтерге стильдерді таңдамалы түрде қолдануға мүмкіндік береді. Мысалы, HTML парағындағы абзацтың барлық элементтерін таңдап, олардың ішіндегі мәтінді қарадан қызылға өзгерту үшін, сіз келесі CSS-ті жазасыз:
p {
color: red;
}
CSS пайдалану
CSS веб-парақ жасаушылар түстерді, қаріптерді, стильдерді, блоктарды орналастыруды және осы веб-беттердің сыртқы көрінісінің басқа аспектілерін көрсету үшін қолданылады. CSS-ті дамытудың басты мақсаты - веб-парақтың логикалық құрылымының сипаттамасын (HTML немесе басқа белгілеу тілдерінің көмегімен жасалады) сол веб-беттің пайда болу сипаттамасынан бөлу болды (қазір CSS формальды тілі қолданылған) ). Бұл бөлу құжаттың қол жетімділігін арттыра алады, оның ұсынылуына икемділік пен бақылауды қамтамасыз етеді, құрылымдық мазмұндағы күрделілік пен қайталануды азайтады.
Сонымен қатар, CSS бір құжатты дисплей, басып шығару, дауыспен оқу (арнайы дауыстық браузермен немесе экрандық оқырманмен) немесе брайль қолданатын құрылғылардан шығару сияқты әр түрлі стильде немесе шығару тәсілдерінде көрсетуге мүмкіндік береді.
CSS-ті құжатқа қосу тәсілдері
CSS ережелері олар сипаттайтын веб-құжаттың өзінде де, .css кеңейтімі бар сыртқы файлдарда да орналасуы мүмкін. CSS форматы - бұл CSS ережелерінің тізімін және оларға түсініктемелерді қамтитын мәтіндік файл.
CSS стильдері төрт жолмен сипатталатын веб-құжатқа енгізілуі немесе ендірілуі мүмкін:
-стиль сипаттамасы бөлек файлда болған кезде, оны head элементіне кіретін link элементі арқылы құжатпен байланыстыруға болады.
-стиль файлы өзінің негізгі құжатынан бөлек орналастырылған кезде, оны style элементіндегі @import операторымен байланыстыруға болады.
-стильдер құжат ішінде сипатталған кезде, оларды head элементіне кіретін style элементіне қосуға болады.
-стильдер құжаттың негізгі бөлігінде сипатталған кезде, олар жеке элементтің атрибуттарында орналасуы мүмкін.
CSS құру ережелері
CSS стильдерін құжатқа қосудың алғашқы үш жағдайында файлдан алынған әрбір CSS ережесі екі негізгі бөліктен тұрады - селектор және декларация блогы. { Белгісінің алдында ереженің сол жағында орналасқан селектор құжаттың қандай бөліктеріне қолданылатындығын анықтайды (мүмкін арнайы тағайындалған). Жарнама блогы ереженің оң жағында орналасқан. Ол бұйра жақшалармен қоршалған және өз кезегінде ; белгілерімен бөлінген бір немесе бірнеше декларациядан тұрады. Әрбір декларация CSS қасиеті мен : арқылы бөлінген мәннің тіркесімі болып табылады. Таңдаушыларды бір жолға үтірлермен бөлуге болады. Мұндай жағдайда мүлік олардың әрқайсысына қолданылады.
селектор, селектор {
қасиет: мән;
қасиет: мән;
қасиет: мән;
}
CSS-ті құжатқа қосудың төртінші жағдайында (тізімді қараңыз), ол қолданылатын элементтің стиль атрибутының мәні болып табылатын CSS ережесі декларациялар тізімі болып табылады (CSS қасиеті: мәні) , ; белгісімен бөлінген.
Элемент кластары мен элемент идентификаторларының басты айырмашылығы - идентификатор бір элементке арналған, ал класс әдетте бірнеше бірден тағайындалады. Алайда, қазіргі браузерлер бірдей идентификатормен бірнеше элементтерді дұрыс көрсетуге бейім. Сонымен қатар айырмашылық бірнеше кластардың болуы мүмкін (элемент класы бос орындармен бөлінген бірнеше сөзден тұрғанда). Бұл идентификаторлар үшін мүмкін емес.
Идентификатор мен класс арасындағы келесі айырмашылықты атап өту маңызды: идентификаторлар құжаттағы ерекше элементті табу үшін JavaScript-те кеңінен қолданылады.
Сынып атаулары мен идентификаторлар, тег атаулары мен олардың атрибуттарынан айырмашылығы регистрге тәуелді.
Класстар мен идентификаторлардың қасиеттері тиісті селекторлар көмегімен орнатылады. Сонымен қатар, оны тұтастай алғанда сыныптың қасиеті ретінде қоюға болады (бұл жағдайда селектор ., Мысалы, .big -тен басталады) немесе идентификатордың өзінің қасиеті (бұл жағдайда селектор) # -дан басталады, мысалы #first) және осы кластың кейбір элементтерінің қасиеттерінен немесе осы идентификатордан басталады.
CSS-те парақ авторы анықтаған кластардан басқа, құжаттағы белгілі бір күйдегі гипер сілтемелердің пайда болуын сипаттайтын, псевдо-класстар деп аталатын шектеулі жиынтығы бар, ол кіру фокусы болатын элементтің типі. орналасқан, және басқа элементтердің алғашқы балалары болып табылатын элементтер типі. CSS-те псевдоэлементтер деп аталатын төрт нәрсе бар: бірінші әріп, бірінші жол, элементтің алдында және кейін арнайы стильдер қолдану.
Мұрагерлік. Каскадтау. CSS стилінің басымдықтары.
CSS-ті HTML құжаттарына қолдану мұрагерлік және каскадтық принциптерге негізделген. Тұқымқуалаушылық принципі - ата-баба элементтері үшін жарияланған CSS қасиеттері әрдайым дербес ұрпақ элементтері арқылы мұрагерлік болып табылады.
Каскадтау принципі бір уақытта бірнеше CSS ережелері HTML элементімен байланысты болғанда, яғни осы ережелердің мәндері арасында қайшылық болған кезде қолданылады. Осындай қайшылықтарды шешу үшін басымдылық ережелері енгізіледі.
Браузер стилі ең төменгі басымдыққа ие;
Келесі маңызды - браузер қолданушысы өз параметрлерінде көрсеткен стиль;
Ал парақ авторы тікелей белгілеген стильде ең жоғары басымдыққа ие. Сонымен, осы авторлық стильде басымдықтар келесідей белгіленді:
-Құжатта элемент бойынша ата-бабаларынан мұраға қалған стильдердің басымдығы ең төмен;
-Құжатқа бекітілген сыртқы стильдер кестесінде көрсетілген стильдер басым болады;
-Осы құжаттың стиль контейнерлерінде қамтылған барлық он түрдегі таңдаушылар тікелей көрсететін стильдер (селекторлар түрлері бөлімін қараңыз), одан да жоғары басымдылыққа ие. Элементке байланысты жағдайлар, оның сыртқы түрі орнатылған, бірнеше осындай селекторлар жиі кездеседі. Олардың арасындағы осындай қақтығыстар әрбір осындай селектордың ерекшелігін есептеу және осы элементтерге олардың ерекшеліктерінің кему реті бойынша берілген элементке қолдану арқылы шешіледі.
CSS пайда болғанға дейін веб-парақтар тек HTML-нің көмегімен, құжаттың тікелей шеңберінде жасалған. Алайда, CSS-тің пайда болуымен құжаттың мазмұны мен презентациясын түбегейлі ажырату мүмкін болды. Осы жаңашылдықтың арқасында ұқсас құжаттар массасы үшін бірыңғай дизайн стилін оңай қолдануға, сондай-ақ бұл дизайнды тез өзгертуге мүмкіндік туды.
Артықшылықтары:
Әр түрлі қарау құрылғыларына арналған бірнеше беттің дизайны. Мысалы, экранда дизайн үлкен енге арналған болады, басып шығару кезінде мәзір көрсетілмейді, ал PDA және ұялы телефондарда мәзір мазмұнға сәйкес келеді.
Деректерді ұсыну ережелерін бөлек CSS файлына жіберу арқылы веб-сайт беттерін жүктеу уақытын қысқарту. Бұл жағдайда браузер тек құжат құрылымын және бетте сақталған деректерді жүктейді, ал осы мәліметтердің көрінісі шолғышпен бір рет қана жүктеледі және оны кэштеуге болады.
Кейінгі дизайн өзгерістерін жеңілдету. Әр бетті өңдеудің қажеті жоқ, тек CSS файлын өзгерту керек.
Қосымша дизайн нұсқалары. Мысалы, CSS орналасуын қолдана отырып, мәтіннің қалған бөлігін орап алатын мәтін блогын жасауға болады (мысалы, мәзір үшін) немесе парақты айналдыру кезінде мәзір әрқашан көрінетін болады.
Кемшіліктері:
Бір CSS деректерін әр түрлі түсіндіретін әртүрлі шолғыштарда (әсіресе ескірген) орналасудың әр түрлі көрсетілуі.
Іс жүзінде жиі кездесетін қажеттілік тек бір CSS файлын ғана емес, сонымен қатар HTML тегтерін де түзету болып табылады, олар CSS таңдағыштарымен байланысты күрделі және сүйікті тәсілмен байланысты, бұл кейде бірыңғай стильді файлдарды қолданудың қарапайымдылығын жоққа шығарады және редакциялау мен тестілеу уақытын едәуір арттырады.
CSS - W3C мақұлдаған және жиынтықта Веб-стандарттар деп аталатын технологиялардың кең ауқымының бірі . 1990 жылдары вебтерді стандарттау, бағдарламашылар мен веб-дизайнерлер сайттарды жобалайтын бірыңғай ережелер құру қажеттілігі айқын болды. HTML 4.01 және XHTML тілдері және CSS стандарты осылай пайда болды.
1990 жылдардың басында әр түрлі браузерлерде веб-парақтарды көрсетудің әр түрлі стильдері болды. HTML өте тез дамыды және сол кезде болған барлық дизайн қажеттіліктерін қанағаттандыра алды, сондықтан ол кезде CSS кеңінен қабылданбады.
Каскадтық стильдер кестесі терминін Хаакон Ли 1994 жылы енгізген. Берт Боземен бірге ол CSS-ті дамыта бастады.
Сол кезде болған көптеген стиль тілдерінен айырмашылығы, CSS ата-анадан балаға мұрагерлікті пайдаланады, сондықтан әзірлеуші бұрын анықталған стильдер негізінде әр түрлі стильдерді анықтай алады.

1990 жылдардың ортасында Дүниежүзілік Желі Консорциумы (W3C) CSS-ке қызығушылық танытып, 1996 жылдың желтоқсанында CSS1 ұсынысы шығарылды.
1 деңгей (CSS1)
W3C ұсынысы, 1996 жылы 17 желтоқсанда қабылданды, 1999 жылдың 11 қаңтарында өзгертулер енгізілд. Осы ұсыныста берілген мүмкіндіктердің арасында:
Қаріп параметрлері. Қаріптің және қаріптің өлшемін, сондай-ақ оның стилін - әдеттегі, курсивті немесе қалың қаріппен қою мүмкіндігі.
Түстер. Техникалық сипаттама мәтін, фон, жиектер және басқа бет элементтері үшін түстерді анықтауға мүмкіндік береді.
Мәтіннің атрибуттары. Символдар аралығын, сөз аралығын және жолдың биіктігін (мысалы, жол аралығын) орнату мүмкіндігі
Мәтінге, суреттерге, кестелерге және басқа элементтерге туралау.
Биіктігі, ені, төсеме және шеттер сияқты қораптың қасиеттері. Техникалық сипаттамада сонымен қатар float және clear сияқты шектеулі элементтерді орналастыру құралдары бар.
2 деңгей (CSS2)
W3C ұсынысы, 1998 жылы 12 мамырда қабылданған . CSS1 негізінде бірнеше ерекшеліктермен кері үйлесімділікті сақтау. Функционалдылыққа қосу:
Блоктың орналасуы. Салыстырмалы, абсолютті және тіркелген позициялар болды. Кесте орналасуынсыз беттегі элементтердің орналасуын басқаруға мүмкіндік береді.
БАҚ түрлері. Әр түрлі медиа үшін әр түрлі стильдерді орнатуға мүмкіндік береді (мысалы, монитор, принтер, PDA).
Дыбыстық стильдер кестесі. Аудио медиа үшін дауысты, дыбыс деңгейін және т.б. анықтайды (мысалы, сайтқа зағип келушілер үшін).
Ақпарат құралдары. Мысалы, басып шығару кезінде тақ және жұп беттердегі элементтерге әртүрлі стильдер орнатуға мүмкіндік береді.
Жетілдірілген селекторлық механизм.
Көрсеткіштер.
Құрылған мазмұн. Қажетті элементтен бұрын немесе кейін түпнұсқа құжатта жоқ мазмұнды қосуға мүмкіндік береді.
W3C қазіргі уақытта CSS2 қолдамайды және CSS2 қолдануды ұсынады.
2 деңгей қайта қарау 1 (CSS2.1)
W3C ұсынысы, 2011 жылы 7 маусымда қабылданды.
CSS2.1 CSS2 негізінде жасалған. Қателерді жөндеуден басқа, жаңа редакцияда спецификацияның кейбір бөліктері өзгертілді, ал кейбіреулері толығымен алынып тасталды.
3 деңгей (CSS3)
CSS3 таксономиясы және мәртебесі:
-Ұсыныс
-Ұсынымға үміткер
-Соңғы талап
-Жұмыс жобасы
CSS3 (ағылш. Cascading Style Sheets 3 - үшінші буынның каскадтық стильдер кестесі) - белсенді дамыған CSS спецификациясы. Бұл түзету тілін қолдану арқылы жүзеге асырылатын ресми тіл. CSS1, CSS2 және CSS2.1-ден кейінгі ең үлкен қайта қарау. CSS3-тің басты ерекшелігі - анимациялық элементтерді JS қолданбай құру мүмкіндігі , сызықтық және радиалды градиенттерді қолдау, көлеңкелер, жұмсақтыққа қарсы және т.б.
Бұл, ең алдымен, HTML және XHTML-де жазылған веб-парақтардың сыртқы түрін сипаттау және сәндеу құралы ретінде қолданылады, бірақ кез-келген XML құжатына, мысалы, SVG немесе XUL-ға қолданыла алады.
Әзірлеу нұсқасы (барлық модульдердің тізімі).

Алдыңғы нұсқалардан айырмашылығы, спецификация модульдерге бөлінеді, олардың дамуы мен дамуы тәуелсіз. CSS3 CSS2.1-ге негізделген, бар қасиеттер мен мәндерді көбейтеді және жаңаларын қосады.
Бөлшектердің дөңгелектелген бұрыштары сияқты кішігірімнен бастап инновациялар, түрлендірумен (анимациямен) аяқталатын айнымалыларды енгізу.
JavaScript - бұл веб-бетте күрделі заттарды жасауға мүмкіндік беретін тіл - веб-бетте статикалық бейнелеу ғана емес - әрдайым жаңартылған мазмұнды немесе интерактивті карталарды көрсету, немесе 2D 3D графикасын анимациялау немесе ойнатқыштағы бейнені айналдыру. және т.б. - сіз JavaScript-тің қатысқанына сенімді бола аласыз. Бұл стандартты веб-технологиялардың үшінші қабаты, оның екеуі (HTML және CSS) біз оқулықтың басқа бөліктерінде егжей-тегжейлі қарастырдық.
JavaScript - бұл динамикалық жаңартылған мазмұнды құруға, мультимедияны басқаруға, суреттерді жандандыруға мүмкіндік беретін бағдарламалау тілі. Жарайды, бәрі емес, бірақ JavaScript кодының бірнеше жолымен қол жеткізуге болатын нәрсе таңқаларлық.
JavaScript тілінің өзегі келесілерді жасауға мүмкіндік беретін бірқатар жалпы мүмкіндіктерден тұрады:
Деректерді айнымалылар ішінде сақтаңыз. Жоғарыдағы мысалда, мысалы, біз жаңа атауды енгізуді сұрадық, содан кейін атауды айнымалыда сақтадық.
Мәтін фрагменттеріне операциялар (бағдарламалауда жолдар деп аталады). Жоғарыда келтірілген мысалда ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.