HTML, CSS және әр адамға қолжетімді интерфейс

Картадағы орнымыз

Бұл 72 сабақтың 45-сі, «Интернет, веб және бұлт» блогы (39–46). Бір жобаны жалғастырамыз: 1.0 нұсқасындағы ойдан алынған үш жазба мен еске салудың бес нәтижесі сақталуы тиіс. Тірек сызба тексеруге болатын өтуді ғана көрсетеді; жебе барлық аралық құрылғы салынғанын білдірмейді.

Жағдай және сұрақ

Екі оқушы бір тапсырма бетін ашады. Бірі түрлі түсті блоктарды көреді, екіншісі экран дикторын тыңдап, күнді таңдау өрісіне пернетақтамен барғысы келеді. Өріс атаусыз, ал тізімнің мәні тек түспен берілсе, көмекші екінші оқушыға жарамсыз болады.

Жаңа сөздерді анық түсінейік

HTML мазмұн құрылымы мен мағынасын береді: тақырып, пішін, кесте, белгі. CSS сыртқы көріністі өзгертеді, мағынаны алмастырмайды. Семантикалық элемент беттің бөлігінің рөлін білдіреді. label белгісі мәтінді енгізу өрісімен бірдей for және id арқылы байланыстырады. HTML таңбаларын экранирлеу пайдаланушы мәтініндегі < пен > таңбаларын пәрмен емес, көрінетін мәтін етеді. Қолжетімділік — түрлі құрылғы және қабылдау тәсілі бар адамның міндетті орындай алуы.

Сабақтың тірек сигналы

Сызбаны солдан оңға қарай оқыңыз. Әр жебенің кірісін, әрекетін және тексерілетін нәтижесін атаңыз. Келесі карточканың жазуын жауып, оны өз сөзіңізбен болжаңыз. Нақты мысалға оралыңыз: оқу ұқсастығын, localhost жұмысын және болашақ қашық сайтты ажыратыңыз. Сурет түсіндірмеден артық уәде етсе, мәтінді не суретті түзетіңіз.

Қадамдап талдаймыз

web_assistant.py ішін ашыңыз: бетте <main>, <h1> және <h2> тақырыптары, <label for='today'>, <input id='today'> және <th scope='col'> баған атаулары бар. Tab пернесімен күн өрісінен батырмаға өтіңіз; фокус реті түсінікті болуы тиіс. CSS-ті өшіріп елестетіңіз не браузерде өшіріңіз: беттің мағынасы қалуы керек. Сервер ойдан алынған тапсырма атауын html.escape арқылы шығарады; тесттегі <script> таңбалары пәрмен болып орындалмай, мәтін күйінде көрінеді. Бұл — көрсетуді қорғау, болашақ сайттың бүкіл қауіпсіздігі емес.

Болжаңыз және тексеріңіз

Кодты бірден іске қоспаңыз. Жол реті мен таңбаларын сақтап, нақты нәтиже жазыңыз. Бұл шағын мысал нені дәлелдейді, нені дәлелдемейді, түсіндіріңіз: ол бір ережені көрсетеді, бірақ шынайы интернет, TLS сертификаты немесе ашық сервер жасамайды. Содан соң үзіндіні step-04 бумасында орындап, нәтижені таңба бойынша салыстырыңыз. Бір кірісті өзгертіп, алдымен болжап, кейін тексеріңіз.

from html import escape
print(escape("<b>Task</b>"))

Күтілетін нәтиже

<b>Task</b>

Қатені табыңыз

Көрінетін белгі орнына тек placeholder жазу немесе күйді тек түспен көрсету — қате. Мәтінсіз батырма әрекетті түсіндірмейді; мәтін суреті шынайы мәтінді алмастырмайды. Шығаруда экранирлеу енгізудегі тексеруді жоймайды және оқу серверін ашық интернетке дайындамайды.

Жобаға енгізілетін өзгеріс

?lang=ru, ?lang=kz, ?lang=en нұсқаларын көріңіз: құжат тілі мен жазуы өзгереді, ID және машиналық бес күй өзгермейді. Жоба журналына пернетақта, тар экран және үлкейтілген мәтінмен тексеру нәтижесін қосыңыз. Сыныптастардың шынайы дерегін қолданбаңыз.

Тапсырма және дәлел

Кодтан үш мағыналық элемент тауып, пайдасын түсіндіріңіз. Ойдан алынған файл көшірмесіне <b>Task</b> тақырыбын енгізіп, HTML қалай көрінетінін болжаңыз; содан соң тексеріңіз. Тек CSS түсін өзгерту кесте мазмұнын өзгертпейтінін көрсетіңіз.

Жаңа жағдайға көшіру

Келесі бетте тапсырма суреті болса, оған қандай мәтіндік балама керек? Сурет тек безендіру болса бос alt қашан орынды, ал маңызды ақпарат болса нені жоғалтасыз?

1, 7 және 30 күннен кейін қайталау

1 күннен кейін негізгі өтуді жатқа сызып, тым қарапайым ұқсастыққа қарсы мысал келтіріңіз. 7 күннен кейін мәтінге қарамай жаңа жағдайды досыңызға түсіндіріп, 10 сұрақтың кемінде 7-еуін тексеріңіз. 30 күннен кейін жергілікті веб-нұсқаны қайта ашып, үш бастапқы тапсырма мен бес ереженің сақталғанын көріңіз. Түсініксіз терминді жазып, оның алғашқы анықтамасына оралыңыз.

Тексеруге арналған бастапқы құжат

Ресми құжаттама

Келесі сабақ

1.1 шығарылымы: веб-нұсқа және бұлттың шынайы моделі