Зертханалық жұмыс: Мәтінді пішімдеу тегтерін қолдану

Мақсат: HTML тегтерін мәтінді пішімдеу үшін қолдануды үйрену, оқылымдылығын арттыру, негізгі элементтерді ерекшелеу және дизайн талаптарына сәйкестендіру.

Бағалау критерийлері:
• Мәтінді пішімдеу тегтерін қолдана алады.
• Негізгі және қосымша HTML-тегтерді қолданып пішімделген мәтіні бар құжат жасайды.
• Оқылымдылықты жақсарту және маңызды элементтерді ерекшелеу үшін тегтерді қолданады.

Жұмыстың барысы:

1. Дайындық кезеңі:
   o HTML-дегі мәтінді пішімдеу тегтерімен танысыңыз:
   Тақырыптар: <h1> – <h6>
   Абзацтар: <p>
   Жуан мәтін: <b> немесе <strong>
   Курсив: <i> немесе <em>
   Астын сызылған мәтін: <u>
   Сызылған мәтін: <s>
   Дәйексөздер: <blockquote> және <q>
   Тең ені бар мәтін: <code> және <pre>

2. HTML-құжатты құру:
   o Мәтіндік редакторды (мысалы, Visual Studio Code) ашып, .html кеңейтімі бар жаңа файл жасаңыз.
   o HTML-дің негізгі құрылымын қосыңыз:

<!DOCTYPE html><html lang=»kk»><head>    <meta charset=»UTF-8″>    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>    <title>Мәтінді пішімдеу</title></head><body>    <!— Бет контенті —></body></html>

3. Мәтін қосу және пішімдеу:
   o Тақырыптар мен абзацтар:

<h1>Зертханалық жұмыс 17</h1><h2>Тегтерді қолдану мысалы</h2><p>Бұл мәтін <b>HTML</b>-дің мәтінді пішімдеу мүмкіндіктерін көрсетеді.</p>

o Жуан және курсив мәтін:

<p><strong>Жуан мәтін</strong> негізгі сөздерді ерекшелеу үшін қолданылады.</p><p><em>Курсив</em> маңыздылықты немесе акцентті көрсету үшін қолданылады.</p>

o Астын сызылған және сызылған мәтін:

<p><u>Астын сызылған мәтін</u> маңызды элементтерге назар аудару үшін қолданылады.</p><p><s>Сызылған мәтін</s> ескірген немесе жойылған элементтерді көрсету үшін қолданылады.</p>

o Дәйексөздер:

<blockquote>Бұл негізгі мәтіннен бөлек көрсетілетін ұзын дәйексөз мысалы.</blockquote><p>Қысқа дәйексөздер, мысалы <q>Ұлы іс уақытты қажет етеді</q>, мәтіннің ішінде қолданылуы мүмкін.</p>

o Тең ені бар мәтін:

<p>Тең ені бар мәтін мысалы:</p><pre>Line 1: КодLine 2: Мысал</pre><p>Кодтың қысқа бөліктерін <code>&lt;code&gt; тегі</code> арқылы бөлуге болады.</p>

4. Мәтінді тегтермен стильдеу:
   o Әртүрлі тегтерді біріктіріп мәтіндік блок құрыңыз:

<p>    Бұл <b>маңызды</b> хабарламада <i>курсивті</i> және <u>асты сызылған</u> мәтін бар.      Сондай-ақ <s>сызылған</s> мәтінді жойылған элементтерді белгілеу үшін қолдануға болады.</p>

5. Жұмысты тексеру:
   o Файлды сақтап, браузерде ашыңыз.
   o Барлық пішімдеу элементтерінің дұрыс көрсетілуін тексеріңіз.

6. Есепті рәсімдеу:
   o Қоса беріңіз:
   HTML-құжат коды.
   Браузердегі нәтиженің скриншоты.
   Қолданылған тегтерге қысқаша сипаттама.

Тапсырма мысалы:
Мәтіні келесідей пішімделген веб-бет жасаңыз:

1. Бет тақырыбы.
2. Жуан және курсив мәтіні бар абзацтар.
3. <blockquote> көмегімен рәсімделген дәйексөз.
4. <code> көмегімен ерекшеленген код мысалы.

Кеңестер:
• Күрделі пішімдеу үшін тегтердің комбинациясын қолданыңыз.
• Мәтіннің оқылымды болуын және құжаттың мақсатына сәйкес рәсімделуін қадағалаңыз.
• Мәтіннің айқындылығын және визуалды иерархиясын тексеріңіз.

Күтілетін нәтиже:
• Әртүрлі тегтермен пішімделген мәтіні бар дайын HTML-құжат.
• Мәтіннің браузерде анық және ұқыпты көрсетілуі.
• HTML тегтерінің мәтінді пішімдеудегі мүмкіндіктерін түсіну.