§ 38–39. Мәтінді форматтау (қаріп, абзац, тізімдер)

Мәтінді форматтау тегтері
   Құжатта тақырыптар <H> және </H> тегтерімен жасалады. Мысалы:

<Нi> белгісі (мұндағы i – 1-ден 6-ға дейінгі бүтін сан) алты түрлі сатыдағы символдар мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы тақырып – ең ірі, ал алтыншы сатыдағы – ең кіші.
         Абзац енгізу үшін <P> және </P> тегтері қолданылады. Мәтіннің сол жақ, орта немесе оң жаққа орналасуы үшін align атрибуты пайдаланылады. Мысалы:

Мұнда «Менің бірінші бетім» сөйлемі беттің ортасына орналаса алады. align атрибутының мәні: left (сол жақ), right (оң жақ) болуы мүмкін.
    Тегінің көмегімен мәтіннің қарпін, көлемін, түсін белгілеуге болады. Ол үшін face, size, color атрибуттары пайдаланылады. Мысалы:

Мұнда Arial қарпімен, көлемі 5-ке тең, көк түсті «Менің бірінші бетім» деген сөйлем шығады.
     Жолды бөлу үшін <BR> тегін қолдануға болады. Мысалы:

Мұндағы <BR> екінші сөйлемді келесі жолға түсіреді.

Қарай тілған әріптерді пайдалану үшін мәтінді қалың ету үшін <b> тегін, көлбеу (курсив) әріптер үшін <i> тегін қолданамыз.
      Мысалы, көрінетін мәтін яғни мына 10 «А» сыныбы Информатика пәні HTML-де былай жазылады:

Нөмірленген тізімдер
    Нөмірленген тізімдер белгіленген тізім тәрізді шығарылады. Олар тек <OL> және </OL> (ordered list – ретті тізім) тегтерімен қоршалады да, нәтижесінде тізім нөмірі ретінде бүтін сандар жазылады. Бір мысалды аздап түрлендіріп, нөмірлеп жазып көрсетейік:

Осы HTML тегтері жұмысы нәтижесінде мынадай тізім шығады:

Егер тізім нөмірін керекті бір нөмірден бастау қажет болса, онда start атрибутын пайдаланамыз. Мысалы:

Тізімнің түрін өзгерту үшін type атрибуты көмектеседі. Мысалы, нөмірлерді латын әріптерімен жазу:

Маркерлік тізімді жазғанда <UL> тегін қолданамыз, маркердің түрін өзгерту үшін type атрибутын қолдануға болады:

• <LI type="disc"> – нүкте түріндегі маркер
  
• <LI type="circle"> – шеңбер түріндегі маркер
  
• <LI type="square"> – шаршы түріндегі маркер
  

Нөмірленбеген тізімдер 
     <UL> және </UL>(unordered list–реті жоқ тізім) тегтері арасына орналасқан мәтіндер нөмірленбейді, бірақ белгіленіп жазылады. Мұнда тізімнің әрбір жаңа элементін <LI> (list–тізім) белгісінен бастап жазу қажет. Мысалы, экранда жасыл түсті әріптермен терілген мынандай тізім жасау үшін:

• Айдар;
• Марат;
• Айдос;

• Жанна
Төмендегідей түрде HTML тілі мәтінін Блокнотта теріп, кез келген браузерде көріп шығу керек:

         <LI> белгісі үшін жабылу тегінің қажет емес екенін байқаған боларсыңдар. <UL> тегінің атрибуты type="disc" | "circle" | "square" олар белгі маркерінің сыртқы пішінін өзгертіп, сәйкесінше дөңгелек | шеңбер | квадрат бейнесін де көрсете алады.
         Қабатталған тізімдер: кез келген тізімдегі элемент ішіне басқа да тізім түрлері енгізіліп, қабаттасқан тізімдер құрастырылуы да мүмкін. Бірақ мұндай қабатталған тізімдерді жиі қолданбасақ, ол мәтінді экранға көп сатылы түрде шығарып, оның ұзындығын арттырып жібереді. Сондықтан оларды тек керек кезінде ғана қолданған дұрыс деп саналады.
         Қабатталып орналасқан тізімдерді мәтін мазмұндары мен әртүрлі жоспарлар дайындауда қолданған тиімді болып табылады. Осындай тізімдер ұйымдастыруды қысқаша мынадай мысалмен көрсетейік:

Сырғымалы жолдар: <MARQUEE> және </MARQUEE> тегтері браузер терезесінде жолдың бір шетінен екінші шетіне жылжып отыратын «сырғымалы жол» жасайды және оның мынадай параметрлері болады:

Осылардың кейбірінің мағыналары мен жазылу түрі төмендегідей болып келеді.:
      ALIGN – «сырғымалы» мәтінді жолдың жоғарғы шетіне, ортасына немесе төменгі шетіне туралап орналастыру параметрін береді және ол мына мәндердің біреуін қабылдайды: TOP, MIDDLE, BOTTOM.
     BGCOLOR – «сырғымалы жолдың» фон түсін анықтайды, он алтылық RGB форматында немесе ағылшынша белгілі бір түс аты беріледі.
     DIRECTION – жол бойынша жылжу, яғни сырғу бағытын анықтайды, оның мүмкін мәндері: LEFT (солға), RIGHT (оңға). Егер мән көрсетілмесе, келісім бойынша LEFT мәні автоматты түрде іске қосылады. Екі жаққа да кезек-кезек сырғыту үшін BEHAVIOR=

ALTERNATE атрибуты қолданылады.

     HEIGHT – «сырғымалы жолдың» биіктігін пиксель (нүктелер) арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.
     LOOP – «сырғымалы жолдардың» қайталану санын анықтайтын бүтін сан; INFINITE (шексіздік) мәнін қабылдауы да мүмкін.
    SCROLLAMOUNT – жылжудың бір қадамында мәтіннің қанша пиксельге жылжитынын анықтайтын бүтін сан.
   SCROLLDELAY – екі сырғудың арасындағы интервалды миллисекундпен көрсететін бүтін сан.
  WIDTH – экрандағы «сырғымалы жолдың» енін пиксель арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.
   Осы сырғымалы жол жасау үшін бір мысал қарастырайық. Блокнотта теріп, мысал.htm атымен сақтап, оның нәтижесін кез келген браузерде көріп шығуға керек:

 Тапсырма 1. Сұрақтарға жауап берейік
1. Мәтінді форматтауға нелер жатады?
2. Сырғымалы жолдар деген не?
3. Сырғымалы жолдарды қандай тегтер мен ұйымдастырады?
4. Неліктен мәтінді форматтау тегтерден тұрады?
5. Неліктен сырғымалы жолдарды қолданамыз?
 

 Тапсырма 2. Талдап, салыстырайық

1. Нөмірленген тізім мен нөмірленбеген тізімнің айырмашылығы неде?
2. Сырғымалы жолдарды салыстырып, талдау жасаңдар.            

 

Тапсырма 3. Компьютерде орындайық
Блокнот мәтіндік редакторын ашып, бос құжатты Тапсырма2.html деген атпен сақтаңдар.

1. Құжаттағы алғашқы тег < HTML> тегі болу керек. Терезенің тақырыбын енгізу үшін мына жолдарды теріңдер:

2. Енді құжаттың денесін, яғни HTML құжатта не көрсетілетінін енгіземіз. Ол үшін мына жолдарды теріңдер:

Мұндағы BGCOLOR = yellow құжаттың фоны – сары, ал TEXT = blue шығатын мәтіннің түсі көк болатынын анықтайды.
3. Енді нөмірленген және нөмірленбеген тізім жасауды үйренейік. Ол үшін мына жолдарды енгізіңдер

4. Келесі жолға <BR> <BR> деп, теріңдер. Бұл екі рет бос жол жасағанды білдіреді («Enter» пернесін басқанды білдіреді).
5. Келесі жолға теріңдер: <MARQUEE> Сырғымалы жол </ MARQUEE>. Нәтижесінде сырғымалы жол жасалынады.
6. HTML құжатта көрсетілетін ақпарат таусылғандықтан <BODY> тегін жабу керек, ол үшін </BODY> деп жазыңдар. HTML құжаттағы жазу аяқталды, сондықтан <HTML> тегін де жабу керек, ол үшін </HTML> деп жазыңдар.
Блокнотты жауып, жасаған құжатты браузерде көріңдер.