HTML әдемілегіш және минификатор

Ретсіз HTML кодын оқу үшін шегіністерін реттеңіз немесе өндіріске жіберу үшін оны минификациялаңыз — қате тегтерді қосымша тексеру мүмкіндігі бар.

HTML енгізу

Шегініс
Валидация
page.html
Форматтау, минификациялау немесе тексеру үшін HTML кодын қойыңыз немесе теріңіз.

HTML кодыңыз браузеріңізде форматталады, минификацияланады және тексеріледі. BroBroGo серверіне ештеңе жіберілмейді.

Жиі қойылатын сұрақтар

Әдемілеу (beautify) мен минификациялау (minify) арасында қандай айырмашылық бар?

Әдемілеу (Beautify) белгілеу кодын оқу және өңдеу оңай болуы үшін шегіністер мен бос орындарды реттейді. Минификациялау (Minify) керісінше әрекет етеді — ол браузерге қажеті жоқ бос орындар мен түсініктемелерді алып тастайды, нәтижесінде файл кішірейіп, тезірек жүктеледі. Жұмыс барысында әдемілеуді, ал жобаны шығарар алдында минификациялауды қолданыңыз.

Валидацияны қосу нені тексереді?

Ол браузерлер елемей кететін құрылымдық мәселелерді — жабылмаған немесе сәйкес келмейтін тегтерді, қайталанатын ID-лерді, қайталанатын атрибуттарды және экрандалмаған таңбаларды анықтап, әрқайсысының жолы мен бағанын көрсетеді. Бұл толық W3C сәйкестік есебі емес, жылдам құрылымдық тексеру болып табылады.

Минификациялау парағымның сыртқы түрін өзгерте ме?

Жоқ — парағыңыз дәл бұрынғыдай көрсетіледі және жұмыс істейді. Минификациялау бос орындар мен түсініктемелерді жояды, кірістірілген CSS пен JavaScript кодтарын сығады және міндетті емес атрибут тырнақшаларын алып тастайды, тек браузерге парақты бірдей етіп көрсету үшін қажет нәрсені ғана қалдырады. Алдын ала форматталған блоктар сияқты бос орынға сезімтал мәтіндер өзгеріссіз қалады.

HTML әдемілегіш және минификатор құралының қызметі

«HTML әдемілегіш және минификатор» құралы HTML кодын оқуды жеңілдету үшін оны қайта форматтауға немесе файл көлемін кішірейтуге арналған. Сонымен қатар, бұл құрал HTML кодындағы жабылмаған тегтер сияқты жиі кездесетін құрылымдық мәселелерді тексере алады. Барлық өңдеу процестері тікелей сіздің браузеріңізде орындалады.

Бұл құрал келесі жағдайларда қажет:

  • Ретсіз HTML кодын оқуды және өңдеуді жеңілдету үшін;
  • Веб-парақшаның жылдам жүктелуі үшін HTML файлының көлемін кішірейту қажет болғанда;
  • HTML кодындағы жабылмаған тегтер сияқты жиі кездесетін құрылымдық қателерді жылдам тексеру үшін;
  • Веб-парақшамен жұмыс істеу барысында HTML кодының минификациядан кейін де дәл бұрынғыдай көрсетілуін және жұмыс істеуін қамтамасыз ету үшін.

Құралдың енгізу параметрлері мен баптаулары

Құралмен жұмыс істеу үшін келесі параметрлерді реттеуге болады:

  • HTML енгізу: Пайдаланушылар HTML кодын арнайы мәтіндік аймаққа қояды немесе тереді.
  • Шегініс: Кодты әдемілеу кезінде шегініс үшін «2/4 spaces or Tab» (2 немесе 4 бос орын немесе Табуляция) опцияларын таңдау мүмкіндігі бар.
  • Валидация: Пайдаланушылар тексеруді «Қосулы» немесе «Өшірулі» күйіне ауыстыра алады.

Құрал өңдей алатын таңбалар санының шегі бар: ол 500 000 таңбаға дейінгі кодты өңдей алады. Егер енгізілген мәлімет тым үлкен болса, экранда «Бұл құжат өңдеу үшін тым үлкен. Кішірек файлды байқап көріңіз.» деген қате туралы хабарлама көрсетіледі. Егер HTML кодын өңдеу мүмкін болмаса, «Бұл HTML кодын өңдеу мүмкін болмады.» деген қате шығады.

Шығыс деректері мен статистикалық көрсеткіштер

Код өңделгеннен кейін құрал келесі статистикалық мәліметтерді ұсынады:

  • Жолдар: Өңделген HTML кодындағы жолдар саны.
  • Таңбалар: Өңделген HTML кодындағы таңбалар саны.
  • Көлемі: Өңделген HTML кодының байтпен есептелген көлемі.
  • Минификацияланды — {pct}% кішірек: Минификациялау кезінде үнемделген файл көлемінің пайыздық көрсеткіші.

Сонымен қатар, валидация режимі қосулы болғанда келесі нәтижелер көрсетіледі:

  • Ешқандай мәселе табылмады: Егер тексеру қосулы болып, кодтан ешқандай қате анықталмаса.
  • {count} мәселе табылды: Егер кодтан құрылымдық қателер табылса.
  • {line}-жол, {col}-баған: Анықталған қатенің нақты орналасқан жері.
  • Валидация: Қателер тізімінің алдында көрсетілетін арнайы тақырып.

Әдемілеу және минификациялау ережелері

Құрал таңдалған режимге байланысты кодты әртүрлі ережелер бойынша өңдейді:

  • Әдемілеу режимі белгілеу кодын қайта шегіндіріп, бос орындармен реттейді. Әдемілеу процесі аяқталғаннан кейін «Әдеміленді.» деген мәртебе хабарламасы пайда болады.
  • Минификациялау режимі кодтағы бос орындар мен түсініктемелерді жояды, кірістірілген CSS пен JavaScript кодтарын сығады және міндетті емес атрибут тырнақшаларын алып тастайды. Бұл ретте, алдын ала форматталған блоктар (мысалы, pre тегі) сияқты бос орынға сезімтал мәтіндер минификация кезінде өзгеріссіз қалады. Минификация аяқталғаннан кейін «Минификацияланды.» немесе «Минификацияланды — {pct}% кішірек.» деген мәртебе көрсетіледі.

Енгізу өрісі тазартылғаннан кейін «Тазартылды.» мәртебесі шығады.

HTML валидациясының ерекшеліктері

Валидация режимі іске қосылғанда, экранда «Тексерілуде…» деген мәртебе хабарламасы көрсетіледі.

Бұл тексеру толыққанды W3C сәйкестік есебі емес, жылдам құрылымдық тексеру болып табылады. Ол келесідей құрылымдық мәселелерді анықтайды:

  • Жабылмаған немесе сәйкес келмейтін тегтер;
  • Қайталанатын ID-лер;
  • Қайталанатын атрибуттар;
  • Экрандалмаған таңбалар.

Әрбір анықталған қате үшін оның нақты жолы мен бағаны көрсетіледі.

Құпиялылық және деректерді өңдеу

Бұл құралды пайдалану кезінде сіздің деректеріңіздің қауіпсіздігі толық сақталады. Сіздің HTML кодыңыз тікелей браузеріңізде форматталады, минификацияланады және тексеріледі. Енгізілген код пен өңделген деректердің ешқайсысы BroBroGo серверіне жіберілмейді.

Жиі қойылатын сұрақтар (FAQ)

Әдемілеу (beautify) мен минификациялау (minify) арасында қандай айырмашылық бар?

Әдемілеу (Beautify) белгілеу кодын оқу және өңдеу оңай болуы үшін шегіністер мен бос орындарды реттейді. Минификациялау (Minify) керісінше әрекет етеді — ол браузерге қажеті жоқ бос орындар мен түсініктемелерді алып тастайды, нәтижесінде файл кішірейіп, тезірек жүктеледі. Жұмыс барысында әдемілеуді, ал жобаны шығарар алдында минификациялауды қолданыңыз.

Валидацияны қосу нені тексереді?

Ол браузерлер елемей кететін құрылымдық мәселелерді — жабылмаған немесе сәйкес келмейтін тегтерді, қайталанатын ID-лерді, қайталанатын атрибуттарды және экрандалмаған таңбаларды анықтап, әрқайсысының жолы мен бағанын көрсетеді. Бұл толық W3C сәйкестік есебі емес, жылдам құрылымдық тексеру болып табылады.

Минификациялау парағымның сыртқы түрін өзгерте ме?

Жоқ — парағыңыз дәл бұрынғыдай көрсетіледі және жұмыс істейді. Минификациялау бос орындар мен түсініктемелерді жояды, кірістірілген CSS пен JavaScript кодтарын сығады және міндетті емес атрибут тырнақшаларын алып тастайды, тек браузерге парақты бірдей етіп көрсету үшін қажет нәрсені ғана қалдырады. Алдын ала форматталған блоктар сияқты бос орынға сезімтал мәтіндер өзгеріссіз қалады.