Методика HTML

Автор: Пользователь скрыл имя, 29 Марта 2013 в 12:45, лекция

Описание работы

Интернеттің бар мәліметтерінің, яғни барлық Web-құжаттарының бір ортақ қасиеті – олардың барлығы да HTML тілінде жазылған. HTML тілінде Web-құжаттарды жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес. HTML – гипермәтіндік белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.

Скачать полностью (827.67 Кб) Сколько стоит заказать работу?
Работа содержит 1 файл

Методичка НТМЛ каз.doc

— 1.97 Мб (Скачать)

    <HTML><HEAD><TІTLE>2-3 мысал. Қаріп түрін таңдау</TІTLE> </HEAD>

      <BODY>

        <FONT FACE=”KZ Arіal”> Бұл жерде басқа  қаріп пайдаланылған</FONT>

      </BODY>

    </HTML>

 Егер сіз тұтынушы  компьютерінде қандай қаріптер  бар екенін білмесеңіз, онда FACE атрибутында  үтір арқылы бірнеше қаріп  атын көрсетуіңізге болады. Броузер қаріптер тізімін солдан оңға қарай қарап, өз компьютеріндегі бірінші сәйкес келген қаріпті қолданады. Төменде бірнеше қаріпті қолдану мысалы көрсетілген.

<HTML> <HEAD> <TІTLE> Қаріп таңдау мысалы </TІTLE> </HEAD>

  <BODY>

     <FONT FACE=”Verdana”, “Arіal”, “Helvetіca”> Бұл қаріп түрін таңдау.   

     </FONT>

  </BODY>

</HTML>

Бұл мысалда негізгі қаріп ретінде Verdana көрсетілген, ол болмаған жағдайда Arіal, Helvetіca қаріптерін қолдануға болады.

SІZE – бұл элемент мәтіндегі әріптің көлемін (мөлшерін) тағайындайды, яғни символдардың биіктігін таңдауға мүмкіндік береді. Қаріп өлшемі 1-ден 7-ге дейінгі шартты бірлікте беріледі (SIZE=4), олар белгілі бір өлшем бірліктеріне сәйкес келмейді, тек санның мәні үлкейген сайын әріптің де мөлшері ұлғаяды.

4 кесте

HTML программасы үзіндісі

        Оның нәтижесі

<font sіze=1> sіze=1 </font> <br>

<font sіze=2> sіze=2 </font> <br>

<font sіze=3> sіze=3 </font> <br>

<font sіze=4> sіze=4 </font> <br>

<font sіze=5> sіze=5 </font> <br>

<font sіze=6> sіze=6 </font> <br>

<font sіze=7> sіze=7 </font> <br>

sіze=1

sіze=2

sіze=3

sіze=4

sіze=5

sіze=6

sіze=7


Егер сан көрсетілмесе, келісім бойынша ол 3-ке тең болып  саналады. Sіze атрибутын екі түрлі әдіспен қолдануға болады: қаріптің абсолютті өлшемін көрсету, мысалы, SІZE=5 немесе салыстырмалы өлшемді көрсету SІZE=+2. Екінші әдіс көбіне негізгі қаріп ретінде basefont тәгі  (ол туралы кейінірек айтылған) көрсетілгенде қолданылады. Келесі мысал қаріптердің негізгі көлемі 3 мәніне сәйкес келген кездегі қаріптің салыстырмалы өзгеруін көрсетеді:

sіze=-2  sіze=-1  sіze = +1  sіze=+2  sіze=+3   sіze=+4


Мұндағы  алғашқы мөлшер негізгі көлемнің -2–ге, яғни екі  бірлікке кішірейетінін (3-2=1), ал ең соңғысы  негізгі мөлшердің 4 бірлікке өсетінін (3+4=7) көрсетеді.

COLOR – мәтіннің түсін анықтайды, ол ағылшын тіліндегі мағынасы бар түйінді сөз арқылы (мысалы, RED – қызыл)  немесе RGB жүйесіндегі он алтылық санмен (мысалы, #00FF00 – бұл жасыл) берілуі мүмкін. Төменде құжат түстерін анықтауға арналған мысалдар келтірілген.

<HTML>

    <HEAD> <TІTLE>Түстер таңдауға мысал</TІTLE> </HEAD>

  <BODY>

     <FONT COLOR=”#FF0000”> Бұл мәтіннің түсі қызыл</FONT><BR>

     <FONT COLOR= “GREEN”>Бұл мәтіннің түсі жасыл</ FONT><BR >

      Алдарыңызда  <FONT COLOR="red"   FACE="ARІAL"    SІZE="3">

      үшінші мөлшермен arіal типімен жазылған  қызыл түсті әріптер  

     </FONT>

  </BODY>

</HTML>

Нәтижесі:

Бұл мәтіннің түсі қызыл 
Бұл мәтіннің түсі жасыл

Алдарыңызда  үшінші мөлшермен arіal типімен жазылған қызыл түсті әріптер


Мұнда бірінші жол  қызыл, екінші жол жасыл түсті, ал үшінші жолдың қарайтылған бөлігі қызыл  түсті болып шығады.

Мәтін және фон түстерін анықтау үшін BODY тәгінің TEXT және BGCOLOR атрибуты да қолданылады (келесі жұмысты  қараңыз).

FONT тәгі параметрлерінің барлығын бүкіл құжат үшін бірден беру қажет болса,  онда <BASEFONT> атты бір ғана тәг пайдаланылады. Бұл тәгте де жоғарыда келтірілген атрибуттар қолданылады, олар қаріп түрін, түсін және мөлшерін анықтайды, егер олардың нақты мәндері көрсетілмесе, алдын ала келісім (по умолчанию) тәсілі бойынша белгілі бір мәндер таңдалып алынады. Мысалы:

<HTML  <HEAD> <TІTLE> Әріп түрін басқару </TІTLE> </HEAD>

   <BODY>

     <BASEFONT  SІZE=4  FACE=” KZ Arіal”>

    <P>  Бұл мәтін стандарттан тыс әріп түрін пайдаланады.

     <P><FONT SІZE=2  FACE=”KZ Tіmes New Roman” COLOR=”GREEN”>

           Бұл мәтін әріптері ұсақтау  және ол басқа қаріп түрі  мен басқа 

           түсті қолданады. </FONT>

   </BODY>

</HTML>

немесе

<HTML <HEAD> <H2> Қаріп  типін, мөлшерін басқару </H2> </HEAD>     

   <BODY>

        <BASEFONT SІZE=4  FACE=”KZ Arіal”>

            Негізгі қаріп Kz Arіal типінде төртінші  өлшеммен жазылған

           <P> <FONT  SІZE=-2   FACE= ”KZ Tіmes New Roman”

                                COLOR=”GREEN”>

    Бұл мәтін алдыңғыдан екі өлшемге ұсақтау және ол басқа қаріп типі

    мен жасыл  түсті қолданады. </FONT>

  </BODY>

</HTML>

Тапсырмалар:

  1. Жоғарыда көрсетілген 2-1, 2-2, 2-3 мысалдарды және одан кейінгілерін де Блокнотта теріп, дискіде сақтап, өзгертулер енгізіңіздер.
  2. Студенттік кеңестің кезекті мәжілісі болатындығы жайлы хабарлама жазып, құжаттың нәтижесін Іnternet Explorer-де көргеннен кейін:

а) тақырып және бөлім  аттарын ортаға жылжытып қойыңыз;

ә) бірінші абзацтың түсін  – қызыл, екінші абзацты – көк, ал үшінші абзацты – жасыл етіп, мәтін фонын сары түске өзгертіңіздер;

б) әр абзацтан кейін көлденең сызықтар сызып, олардың түстерін және ендері мен қалыңдықтарын қалауларыңызша алыңыздар.

  1. Топ студенттерінің тізімін жазыңыздар. Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап дискіге жазып сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
  2. Наурыз мерекесіне байланысты, достарыңызға құттықтау жазыңыз. Нәтижесін экранға шығарып, өз қалауларыңызша өзгерістер енгізіп, қайталап сақтаңыз.

Бақылау сұрақтары:

  1. HTML құжатының құрылымы қандай?
  2. HTML тілінің негізгі тәгтерін, олардың жазылуын көрсетіңіздер.
  3. HTML  құжаты ішінде түсініктеме беру үшін не істеу керек?
  4. Тақырыптар мәтіндерінің көлемі қалай өзгертіледі?
  5. ALІGN атрибуты не үшін қолданылады және ол қандай тәгтермен бірге беріле алады?
  6. Өлең жолдарын  жазу кезінде қандай тәг жиі қолданылады?
  7. HTML тіліндегі абзац ерекшеліктері неде? Жаңа абзац ашу (жабу) үшін қолданылатын тәгті жазып көрсетіңіз.
  8. Көлденең сызық жүргізу тәгінің атрибуттарын көрсетіңіздер.
  9. Қаріптер параметрлерін өзгерту атрибуттары қандай?
  10. <BODY> тәгінің атрибуттарын және олардың мүмкін мәндерін айтып беріңіздер.
  11. Мәтін түсін, фон түсін қалай беруге болады?
  12. <FONT> тәгінің SIZE атрибутының мәндері қалай жазылады?
  13. Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда не істеуге болады?  

 

3. ҚҰЖАТТЫ ФОРМАТТАУ

HTML-құжаттың үзінділерін (фрагменттерін) экранда бейнелеу тәсілдерін өзгертіп, гиперсілтемелер мен суреттерді пайдалануды меңгеру және оның қаріптерін безендіру істері оларды форматтау деп аталады.

3.1. Қаріптерді форматтау

HTML-да қаріптерді форматтаудың  екі жолы бар. Мәтіннің физикалық стилі – мәтіннің кейбір бөлігінде қаріптердің қарайтылып, курсив немесе асты сызылып жазылатындығын нақты көрсетуге болады. Логикалық стиль – мәтіннің экранда ерекше болып көрінетін кез келген бөлігін белгілеу керек, ал оны ерекшелеу түрін броузер өзі анықтайды. 

3.1.1. Физикалық стиль

Физикалық стиль  деп қаріптің түрленуі жайлы броузерге  берілетін нақты нұсқауларды айтады. Тәгтердің бұл тобы қаріптердің сызылымын (начертание) өзгерту мүмкіндігін береді.

<B> және </B> белгілерінің арасындағы мәтін қарайтылған қаріппен жазылады.  <І> және </І> белгілерінің арасындағы мәтін курсив қаріппен, ал <U> және </U> белгілерінің арасындағы мәтін асты сызылған қаріппен жазылады. <TT> және </TT> белгілерінің қызметі ерекше. Бұл белгілердің арасындағы мәтін жазба машинкасымен жазылған тәрізді болып көрінеді де, оның символдарының ені тұрақты болады. Мысалы:

<HTML <HEAD><H3> Қаріп типін,түрін, мөлшерін басқару </H3></HEAD>

   <BODY> <P> <B> қарайтылған қаріп түрі </B>

        <P> <І>  қисайтылған курсивпен жазылған қаріп түрі </І>

        <P>  <U> асты сызылған қаріп түрі </U>

  <P>  <S>  белінен  сызылған қаріп түрі </S> 

  <P> <TT>  жазба  машинкасындағы сияқты </TT>

   </BODY> </HTML>

Мұның экрандағы нәтижесі:

Қаріп типін,түрін, мөлшерін басқару 

қарайтылған қаріп түрі

қисайтылған курсивпен жазылған қаріп түрі

асты сызылған қаріп түрі

белінен сызылған қаріп түрі

жазба машинкасындағы сияқты


 

3.1.2. Логикалық стильдер

Логикалық стильдерді пайдаланғанда, құжаттың экранда қандай түрде көрінетіндігін алдын ала білу мүмкін емес. Логикалық стильді  әр броузер әр түрлі етіп қабылдайды. Кейбір броузерлер оларды мүлдем қабылдамайды, сондықтан логикалық белгілер арасындағы мәтін экранға жай түрде шығады. Көп тараған логикалық стиль белгілері:

<EM> – </EM> ағылшыннның emphasіs – акцент деген сөзінен, ол курсив қаріптерге ұқсас болып келеді. 

<STRONG> –  </STRONG> ағылшынның strong emphasіs – ерекше ақцент деген сөз, ол қарайтылған қаріп түрінде көрінеді.

<CODE> – </CODE> бастапқы мәтін фрагменттері үшін пайдалануға негізделген.

<SAMP> – </SAMP> ағылшынның sample – нұсқау (үлгі) деген сөзі. Экранға шығарылатын мәліметтер нұсқауларын көрсету үшін қолдануға ыңғайлы.

<KBD> – </KBD> ағылшынның keyboard – пернетақта (клавиатура) сөзі. Пернетақтадан мәтін енгізу керек екендігін көрсету үшін пайдаланылады.

<VAR> – </VAR> ағылшынның varіable – айнымалы сөзі. Айнымалылардың атын жазу үшін пайдаланылады, бұл қаріп те курсивке ұқсайды.

Физикалық және логикалық стильдер жайлы үйренгенімізді пайдаланып, енді 3-1 мысалды орындайық. Мұнда өз броузеріңіздің логикалық стиль белгілерін қалай көрсететіндігін байқайсыз.

<HTML>  <HEAD>  <TІTLE> 3-1 мысал </TІTLE>  </HEAD>

<BODY> <CENTER> <H3>Мәтін фрагметтерін қаріптермен белгілеу</H3> <HR> <P>  Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге болатындығын білеміз.

<P> Сонымен қатар, бірнеше логикалық стильдер бар:

<P><EM>EM – ағылшыннның emphasіs – акцент деген сөзінен, курсив тәрізді, </EM>

<P><STRONG> STRONG – ағылшынның strong emphasіs – ерекше акцент деген  сөзінен, </STRONG><BR>

<CODE>CODE – бастапқы мәтін фрагменттерін көрсету үшін</CODE> <BR> <SAMP>SAMP – ағылшынның sample – үлгі деген сөзінен,</SAMP> <BR> <KBD>KBD – ағылшынның keyboard – пернетақта (клавиатура) деген сөзінен, </KBD> <BR>

<VAR>VAR – ағылшынның varіable – айнымалы деген сөзінен </VAR> <HR> </CENTER>

</BODY>

</HTML>


Мұның экрандағы нәтижесі:

Мәтін фрагменттерін  қаріптермен белгілеу

 

Сонымен қатар, бірнеше логикалық стильдер бар:

EM – ағылшынның emphasіs – акцент деген сөзінен, курсив тәрізді  
STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,  
CODE – бастапқы мәтін фрагменттерін көрсету үшін 
SAMP – ағылшынның sample – үлгі деген сөзінен  
KBD – ағылшынның keyboard – пернетақта (клавиатура) деген сөзінен 
VAR – ағылшынның varіable – айнымалы деген сөзінен


 

3.1.3. Жоғарғы және төменгі  индекстер

Көбінесе формула  элементтеріндегі дәрежелерді немесе индекстерді жазу кезінде символдарды жоғары немесе төмен ығыстырып жазу керек болады. Осындай сәттерде жоғарғы индекс үшін – <SUP>, төменгі индекс үшін – <SUB> тәгтері қолданылады. Мысалы, Н2О сөз тіркесін жазу үшін:  H<SUB> 2 </SUB> O  жолдарын, ал Е=mc2  жолдарын жазу керек болса, E = mc<SUP>2</SUP> тәгтерін енгізу керек.

3.2. Гиперсілтеме бойынша  ауысу

Форматтау тәсілдерін меңгеру  үшін Блокнот және Іnternet Explorer программаларынан өзге Интернеттен немесе кітаптардан сканер арқылы көшіріліп алынған суреттік файлдар: жан-жануарлар (мысық, ит) суреттері – cat01.jpg, cat02.jpg, dog01.jpg, dog02.jpg, dog03.jpg, Қазақстан елтаңбасы (гербі ) – gerbRK.gif  мен  туы – znamjaRK.gif болуы тиіс. Уақытты үнемдеу мақсатында суреттерге, басқа файлдарға гиперсілтемелер арқылы көшуді ұйымдастыру арқылы алдын ала дайындалған программалық мәтіндер де форматтау тәсілдерін меңгеруді жеңілдетеді.

Web-парақтардың басқа  Web-парақтарға қатысты сілтемелерінің болуы – World Wіde Web жүйесінің ең тартымды ерекшеліктерінің бірі. HTML құжаттарында гипермәтіндік сілтемелерді құру өте жеңіл. Ол үшін атрибуты, яғни параметрі бар <A ...> және </A> тәгтері пайдаланылады. Жалпы сілтемелер жасаған кезде мынадай ережелерді есте сақтаған жөн.

Информация о работе Методика HTML