Дипломдық жоба тақырыбы: «ХҚту түлектер қауымдастығы» ақпараттық жүйесін құру «6В06152-Есептеу техникасы және бағдарламалық қамтамасыз ету»
HTML, CSS и JavaScript технологиялары
жүктеу/скачать 1,32 Mb.
|
Озгертылген бырак дурыс емес
| 2.1 HTML, CSS и JavaScript технологиялары
Біз пайдаланатын бірінші тіл – HTML (HyperText Markup). Тіл, гипермәтінді белгілеу тілі). Ол қайсысын анықтауға мүмкіндік береді веб-беттің бір бөлігінде сол немесе басқа элементтер болады: мәтін, кесте, карта жасөспірім. Бұрын HTML мәтінді пішімдеу және элементтің түсін өзгерту үшін пайдаланылды. Бет полицейлері. Бірақ қазір каскадты стиль кестелері осы мақсатқа қызмет етеді. (Cascading Style Sheets, CSS), ол 2-тарауда талқыланады. Осы және келесі тарауды оқығаннан кейін сіз өзіңізді макет дизайнері деп атай аласыз сайттар, яғни HTML құжатын теретін адам. Макет – HTML құжатының құрылымын барлығында болатындай етіп жасау браузерлерде веб-бет ұсынылған дизайндағыдай болды. Орналасу – PSD форматында әзірленген болашақ HTML бетінің түрі, анықтайтын онда көрсетілетін элементтер мен кескіндердің орналасуын көрсету топтасу. Көбінесе макеттер AI және CDR векторлық пішімінде жасалады. Тіпті сирек сияқты, орналасу JPG кескіні немесе PDF құжаты. Үлгіні дайындау кез келген нәрсенің ең қиыны – бастау. Веб-сайтты жасау кезінде бастама әрқашан бірдей -kovo - сізге HTML, HTM немесе PHP кеңейтімі бар мәтіндік құжат жасау керек, содан кейін оған HTML құжатының жалпы құрылымын қосыңыз. Өйткені, HTML құжаты бұл кәдімгі мәтіндік құжаттан басқа ештеңе емес, тек арнайы ұзарту. Сіз оны кез келген мәтіндік редактормен оңай жасай аласыз, тіпті Блокнотта, HTML құжатының кеңейтімі HTML және HTM кеңейтімдерінің арасында ешқандай айырмашылық жоқ, сондықтан пайдалануға болады олардың кез келгеніне дауыс беріңіз. Бірақ PHP кеңейтімін тек егер сіз кез келген хостингте сайт жасасаңыз (жергілікті немесе Интернетте хостинг) PHP тілі орнатылған. РНР тіліндегі 4-тараудан кейін PHP кеңейтімін қолданамыз. Осы уақытқа дейін біздің барлық веб-құжаттарымызда HTML кеңейтімі болады. Үлгіні дайындау HTML құжатының аты Негізінде HTML құжатында латын тілінен тұратын кез келген атау болуы мүмкін әріптер мен сандар (бірақ әріп атауында бірінші тұруы керек). Бірақ егер қаласаңыз браузердің мекенжай жолағына мекенжайыңызды енгізген кезде HTML құжаты ашылды. сайтында HTML құжатына арнайы ат беру керек. Мысалы, сіз example.com доменін сатып алдыңыз, содан кейін топтаманы орналастырдыңыз HTML құжаттары. Келуші болса қай HTML құжаты ашылады http://example.com URL мекенжайын енгізеді (яғни мекенжай Сіз көргіңіз келетін құжатты көрсетпей сайт)? Бұл жағдайда веб-сервер index.html деп аталатын HTML құжатын ашуға тырысады немесе main.html. Көбінесе ең маңызды HTML құжаты index.html деп аталады. Сізге «басты бет» ұғымы таныс шығар. Көпшілікте сайттарда оған сілтеме бар логотип немесе «нан үгінділері»1 бар , басталатын одан кет. Әдетте, басты бет index.html, index.htm файлы болып табылады немесе index.php. Сонымен, HTML кеңейтімі бар мәтіндік құжат жасаңыз. CSS тілі - белгілі бір тілде қолданылатын ережелер жиынтығы экранда қалай көрсетілетінін көрсету үшін белгілі бір веб-бет нысанына. Типтік CSS пайдаланудың жаңа мысалы: дене { font-family: Arial, Verdana, sans-serif; шрифт өлшемі: 10 пт фон түсі: #f0f0f0; түс: #ff0000; } h1 { түсі: #a52a2a; шрифт өлшемі: 24 пт font-family: Georgia, Times, serif; шрифт салмағы: қалың; } Бұл мысалда ережелердің екі жинағы жасалған: біреуі негізгі тег үшін пайдаланылады, ал екіншісі h1 тегінің мазмұны қалай көрсетілетінін анықтайды. Ережелер жинағының келесі пішімі бар: селектор { css ережесі css ережесі ... } Әрбір ережелер жинағы CSS сипаттарынан және олардың мәндерінен, яғни жеке ережелерден тұрады. Келесі пішімі бар CSS шанышқылары: сипат: мән;. Төлеу Назар аударыңыз, CSS-тегі мәндер мына жағдайдағыдай цитаталанбаған. HTML тілінің атрибуттары. Дәлірек айтқанда, тырнақшаға тек кіші әріптермен жазылған мәндер алынады кілт сөздер емес. Және CSS-тегі мұндай мәндер сирек кездеседі. Сонымен, бізде CSS ережесін жазу үшін келесі пішім бар: селектор { қасиет: құндылық; } Бұл опция да мүмкін: селектор { сипат: мән; } CSS-тегі жол үзілімдері үлкен рөл атқармайды. Олар ыңғайлы болу үшін қосылады болат өңдеуші. Селектордың ішінде CSS сипаттарының кез келген саны (мәндері бар) болуы мүмкін, нүктелі үтір арқылы тізімделеді. Бірақ селектордың сыртында көрсетіңіз. CSS сипаттары мүмкін емес. Әрбір CSS сипаты бірнеше рет орнатылуы керек оқытушы. Өйткені, веб-беттің қай элементін анықтайтын селектор бұл CSS сипатын қолдануымыз керек. Селекторлар Келесі деректер селектор ретінде әрекет ете алады: Тег атауы - ең қарапайым жағдайда селектор болып табылады тег атауы: дене, р, енгізу және т.б. Негізгі ұғымдар CSS тегке тағайындалған класс (яғни, тегке тағайындалған класс атрибутының мәні) —бұл жағдайда селектордың алдында «.» таңбасы болады: .myclass, .form_ жіберу және т.б.; тег идентификаторы (яғни, тегке тағайындалған id атрибутының мәні) - бұл жерде жағдайда селектордың алдында # таңбасы көрсетіледі: #myid, #form_submit, т.б.; * - арнайы селектор * бірден барлық элементтерге сипаттарды тағайындауға мүмкіндік береді веб-беттер бар. сынып және id атрибуттары HTML тілінде кез келген тегке класс және/немесе id атрибуттары берілуі мүмкін. Бұлардың екеуі де- Рибута ұқсас мақсатқа қызмет етеді - тегті немесе тегтер тобын анықтау. Үкімет тегті анықтау CSS немесе арқылы белгілі бір тегке сілтеме жасауға мүмкіндік береді JavaScript. Сондықтан біз бұл атрибуттарды бұрын қарастырмадық. Нөмір үшін - бұл HTML, олар жай ғана қажет емес. Класс төлсипаты тегтер тобын анықтауға арналған. Осы себептен бұл төлсипаттың мәні бірнеше тегтер үшін бірдей болуы мүмкін. ID төлсипаты белгілі бір тегті анықтауға арналған. Бүкіл HTML бетінде белгілі бір тег болуы керек идентификатор тегінің мәні. Бірдей мәні бар бірнеше тегтердің болуы id тегіне рұқсат етілмейді және қателерге әкелуі мүмкін. Класс және id атрибуттарының мәні кез келген жол болуы мүмкін, латын әліпбиінің әріптерінен, сандардан, астын сызулардан және сызықшалардан тұрады. Және Бұл атрибуттардың мәндері әріптен басталуы керек. Сонымен қатар, біліңіз сынып және id төлсипат мәндері регистрді ескереді! Сондай-ақ, кез келген тег бірнеше тағайындалуы мүмкін екенін ескеріңіз сыныптарға. Бұл жағдайда олар сынып атрибутының мәніндегі бос орынмен көрсетіледі: .
Бірақ бұл мінез-құлық ең қарапайым жағдайда, селекторлар қайшы келмегенде орын алады өз араларында дірілдейді. Мысалы, мына HTML кодын қарастырыңыз: Сәлем әлем
Бұл HTML коды үшін CSS коды болады: div { шрифт өлшемі: 11 pt шрифт салмағы: қалың; } #сәлем_ид { шрифт өлшемі: 27 пт мәтінді безендіру: астын сызу; } .сәлем_сынып { шрифт өлшемі: 14 пт шрифт стилі: курсив; } Жоғарыдағы CSS кодында CSS сипаттары үште бір тегке тағайындалады әртүрлі селекторлар. Сонымен қатар, әрбір селектор басқа мәнді көрсетеді қаріп өлшемі сипаттары. Қаріп өлшемі сипатының қандай мәні қолданылады браузер? Бұл жағдайда «соңғы» деген жауап дұрыс емес. Мұның бәрі әртүрлі салмаққа байланысты селектор түрлері. CSS-те селектордың әрбір түрі өз салмағына ие: тег атауының салмағы 1 ұпай; тегке берілген сынып — 10 балл; тег идентификаторы - 100 ұпай. Бір тегті анықтайтын екі селектордың салмағы бірдей болса, CSS сипаты үшін төмендегі селектордан мән алынады кодта. Алайда, егер селекторлардың біреуінің салмағы басқаларының салмағынан үлкен болса, онда мәні CSS сипаттары CSS-тің қай жеріне қарамастан, одан алынады. файл селекторы жарияланады. JavaScript кодын бөлек .js файлында да жазуға болады, содан кейін оны HTML құжатына біз жасағандай қосыңыз CSS файлдарымен. .js кеңейтімі бар файл басқалар сияқты кәдімгі мәтіндік файл болып табылады. бізге бұрыннан белгілі файлдар: CSS және HTML файлдары. JS файлдары әдетте орналастырылады js қалтасында. Бос addons.js файлын жасап, оны файлға қосайық біздің шаблон. Біз сценарийлерді жасаймыз және байланыстырамыз Сценарий тегі JS файлдарын қосу үшін де қолданылады. Дегенмен, айырмашылығы CSS құжатын қосу үшін бұл жолы басқа синхрондауды пайдалану керек. Таксилер жүктеу/скачать 1,32 Mb. Достарыңызбен бөлісу:
|