Лекция · 4.2

HTML-де мәтінді форматтау

Веб-беттегі мәтіннің қаріп өлшемін, түсін, тізім түрін қалай өзгертуге болады? Өткен сабақта HTML негіздерін білдік, ал бүгін мәтінді КӨРКЕМДЕУДІ — қаріп, түс, тізім — үйренеміз. Бұл дағды кез келген веб-бетті көзге ұнамды етеді.

FONT тегі

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

Атрибут	Қызметі
`size="n"`	Қаріп өлшемі 1-ден (кіші) 7-ге (үлкен), әдепкі — 3
`size="+i"` / `"-i"`	Ағымдағы өлшемге қатысты САЛЫСТЫРМАЛЫ өлшем
`face="..."`	Қаріп түрі (Arial, Times New Roman)
`color="..."`	Мәтін түсі — оналтылық код немесе атау

Есеп (оңай): бас әріптерді үлкенірек қаріппен көрсету

Берілді: «HyperText Markup Language» деген мәтінде әр сөздің бас әрпін үлкенірек көрсету.

<font size="6">H</font><font size="-1">yper</font>
<font size="6">M</font><font size="-1">arkup</font>
<font size="6">L</font><font size="-1">anguage</font>

Түсіндірме: size="-1" — ағымдағы (5) өлшемнен 1-ге кіші, яғни 4-ке тең.

RGB моделі және түстер

<body> тегінің bgcolor атрибуты бүкіл беттің фон түсін белгілейді: <body bgcolor="red"> немесе <body bgcolor="#FF0000">.

Анықтама
RGB моделі — Red (қызыл), Green (жасыл), Blue (көк) үш негізгі түстің әртүрлі пропорцияда қосылуына негізделген модель, барлығы 16,7 миллион түс береді. HTML-де #RrGgBb форматында жазылады — әр құрауыш екі оналтылық санмен (0–255).

Түс атауы	Код	RGB
Black	#000000	0, 0, 0
White	#FFFFFF	255, 255, 255
Red	#FF0000	255, 0, 0
Green	#008000	0, 128, 0
Blue	#0000FF	0, 0, 255

<basefont> тегі — құжаттың негізгі (әдепкі) қаріп мәндерін белгілейді, жабылатын жұп тегі жоқ. Құжаттың бір бөлігін  тегімен уақытша өзгертуге болады —  жабылғаннан кейін <basefont> әсері қайта жалғасады.

Тізім құру

HTML-де үш түрлі тізім бар: <ol> — нөмірленген, <ul> — маркерленген, ал <li> — тізімнің әр элементі (екеуінің ішінде де қолданылады).

Есеп (орта): көпсатылы тізім құру

Берілді: «Компьютер жады» тақырыбымен, ішкі және сыртқы жад түрлерін көрсететін тізім.

<ul>
    <li>Ishki zhad
        <ol>
            <li>Zhedel zhad</li>
            <li>Tuaqty zhad</li>
        </ol>
    </li>
    <li>Syrtqy zhad
        <ol>
            <li>Qatqyl disk</li>
            <li>Flesh-zhad</li>
        </ol>
    </li>
</ul>

Жауабы: маркерленген екі негізгі тармақ, әрқайсысының астында НӨМІРЛЕНГЕН ішкі тізім шығады.

Тізімді белгілі бір саннан бастау керек болса — <ol start="3"> тізімді 3-тен бастайды. Ал маркер пішінін өзгерту үшін <li type="..."> қолданылады: disc (нүкте, әдепкі), circle (шеңбер), square (шаршы).

⚠️

Ескеру: <li> элементінің жабу тегі (</li>) МІНДЕТТІ ЕМЕС — браузерлер оны қоспай-ақ дұрыс өңдейді, бірақ дұрыс құрылым үшін жабу ҰСЫНЫЛАДЫ.

Қосымша форматтау тегтері

Тег	Қызметі
`<sub>`	Төменгі индекс (мыс. H₂O)
`<sup>`	Жоғарғы индекс (мыс. x²)
`<s>`	Сызылған мәтін
`<tt>`	Біртекті ені бар (моноширинді) қаріп

Кейбір таңбаларды пернетақтадан тікелей теру қиын немесе олар HTML-де арнайы мағынаға ие болғандықтан, оларды арнайы «HTML код» арқылы жазады: § → § (параграф белгісі), ° → ° (градус белгісі).

🎯 ҰБТ байланысы

Тізім түрлерін және RGB кодтауды дәл білу жиі тексеріледі.

<ol> — нөмірленген, <ul> — маркерленген тізім, шатастырмау.

RGB код форматы — #RrGgBb, әр құрауыш 0–255 (00–FF) аралығында.

size="-1" — САЛЫСТЫРМАЛЫ мән, ағымдағы өлшемге тәуелді.

Сабақ қорытындысы

тегі size, face, color атрибуттары арқылы мәтінді безендіреді.
RGB моделі — қызыл/жасыл/көк қосындысы, HTML-де #RrGgBb форматында жазылады.
<ol> (нөмірленген), <ul> (маркерленген) және <li> — тізім тегтері.
, , <tt> — қосымша форматтау мүмкіндіктері.