Методика HTML

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

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

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

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

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

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

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

3. Алдын ала дайындалған lab3.htm файлын (төменде келтірілген) ашып келесі өзгертулерді енгізіңіз:

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

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

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

в) Мәтіннің фонын сұр  түске өзгертіңіз.

4. lab3.htm файлын ашып келесі өзгертулерді енгізіңіз:

а) pr4.htm, pr5.htm, pr6.htm, pr7.htm құжаттарына  және Orantang.jpg, Popugay.jpg, Monky.jpg суреттеріне гиперсілтеме жасаңыз.

ЕСКЕРТУ: lab3.htm, pr4.htm, pr5.htm, pr6.htm, pr7.htm құжаттары және Orantang.jpg, Popugay.jpg, Monky.jpg суреттері алдын ала дайындалып компьютердің ішіндегі Мои документы немесе басқа бір жұмыс бумасының ішінде орналасуы тиіс. Олардың орнына 2-1 мысал, 2-2 мысал, тағы сол сияқты дайындалған файлдарды қолдануға болады.

Алдын ала дайындалған web-құжат құрылымымен танысуға арналған lab3.htm лабораториялық жұмыс мәтіні:

<HTML> <HEAD> <TITLE> Құжаттың негізгі бөлімдері </TITLE>

    </HEAD>

<BODY> <H1> Басты тақырып</H1> <H2>Ішкі тақырыпша</H2>

    <HR> <A HREF="#3.1">Үшінші абзацқа көшу</A> <br>

    <H3> 1.1 Бірінші  абзац </H3> Осы жолдар бірнеше  жолға 

                    жазылғанымен

                    құжатта олар 

                    бірге жазылады 

    <HR> <H3> 2.1 Екінші абзац  </H3>

<P> Абзац үшін жабу  тәгі қажет емес. <HR>  <A  Name="3.1">  </A>

<H3>3.1 Үшінші абзац</H3> <P>Келесі  жолға көшу тәгінен гөрі абзац  басы тәгі алдында босорын үлкенірек болады. <HR>

Көлденең сызықтан кейінгі мәтін  <BR> екіге бөлінген.

<P> <H3  align=center><B>Бірнеше  сызықтар салайық. </H3></B>

<HR color=red size=16 width=100%> <HR color=green size=8 width=50%>

<HR color=gold size=4 width=25%> <A HREF="pr6.htm"> pr6 мәтініне </A> ауысып, кейін оралайық. <A HREF="DOG.JPG"> Ит суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="tu2.gif"> Ту суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="cat01.jpg"> Мысық суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="dog03.jpg"> Ит суретіне </A> ауысып, кейін оралайық. <HR> <A HREF="fish.jpg"> Балық суретіне </A> ауысып, кейін оралайық. <P> <IMG SRC="fish.jpg" WIDTH=500 HEIGIT=250 border=2 align="bottom">  <P> <H3 ALIGN=center> Енді өздеріңіз осындай суреттерге сілтеме жасаудан мысал келтіріңіздер </H3>

</BODY>

</HTML>

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

  1. HTML құжатын форматтау дегеніміз не?
  2. Физикалық стиль жасауға қажет тәгтер тізімін келтіріңіздер. Олардың атрибуттары бола ма?
  3. Логикалық стильдер дегеніміз не? Кең тараған логикалық стиль тәгтерін көрсетіңіздер.
  4. Жоғарғы және төменгі индекстер қандай тәгтер арқылы жазылады?
  5. Гиперсілтеме түсін қалай өзгертеміз, қарастырылған, курсор көрсетіп тұрған сілтемелер түрін басқаша ету қалай орындалады?
  6. Мәтін фоны ретінде суретті қалай пайдалануға болады?
  7. Түрлі түстердің RGB-кодтары дегеніміз не? Сарғыш жасыл түстің RGB-кодын қалай есептеп шығаруға болады?
  8. Гиперсілтеме қалай құрылады?
  9. <A HREF= ... > атрибуты мәні ретінде қандай сөз тіркестерін алуға болады?
  10. Ішкі сілтемелер дегеніміз не?
  11. Орнатылған анкерге сілтеме жасау үшін не істеу керек?
  12. HTML-құжатқа сурет орналастыру үшін қандай тәг қолданылады? Оның атрибуттарын атап шығыңыздар.
  13. Суреттердің көлемін қалай өзгертуге болады?
  14. Пиксель ұғымын қалай түсінесіздер?
  15. Сырғымалы жолдар қалай ұйымдастырылады?
  16. Суреттік бейнелерді сырғытуға бола ма?
  17. Сырғымалы жолдар жасау тәгінің қандай атрибуттары бар, олардың мәндері неге тең бола алады?
  18. Сырғымалы жолды екі бағытқа да кезектестіре отырып жылжытуға бола ма?
  19. Сырғыту жылдамдығын қалай өзгертеміз?
  20. Жолды жоғары, төмен сырғытуға бола ма?

 

4. ҚҰЖАТ ІШІНЕ ТІЗІМДЕР ОРНАЛАСТЫРУ

HTML тілі мәтін  абзацтарының сыртқы пішімін  толық анықтауға мүмкіндік береді. Абзац элементтерін үлкейтуге, кішірейтуге, қалыңдатып немесе қисайтып, астын сызып жазуға, тізім түрінде белгілеуге болады. Енді тізімдер жасайтын мүмкіндіктердің бырсыпырасын қарастырайық. Жалпы тізім элементтері арнайы тәгтермен қоршалып, экранға шығарылғанда олардың сол жақтарында тізім белгілері орналасады.

4.1. Нөмірленбеген тізімдер

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

  • Сәуле;
  • Мақсат;
  • Данияр;
  • Ержан

төмендегідей  түрде HTML тілі мәтінін Блокнотта  теріп, Internet Explorer-де 4-1 мысалды көріп  шығу керек:

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

  <BODY  text= green>

      <H2 ALIGN = CENTER> Белгіленген тізім жолдары </H2>  <HR>

<UL>

<LI> Сәуле;

  <LI> Мақсат;

  <LI> Данияр;

  <LI> Ержан

</UL>

<HR> 

  </BODY>

</HTML>

<LI> белгісі үшін жабылу тәгінің қажет емес екенін  байқаған боларсыздар.

<UL> тәгінің атрибуты  type = disc | circle | square

олар белгі маркерінің сыртқы пішінін өзгертіп, сәйкесінше   дөңгелек | шеңбер | квадрат     бейнесінде көрсете алады.

4.2. <OL> тәгі арқылы  жазылатын нөмірленген тізімдер

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

<HTML> <HEAD> <TІTLE> 4-2 мысал </TІTLE> </HEAD>

  <BODY  text= green>

    <H2 ALIGN = CENTER> Нөмірленген тізім жолдары </H2>  <HR>

<ОL>

<LI> Сәуле;

<LI> Мақсат;

<LI> Данияр;

<LI> Ержан

</ОL>

   <HR> 

  </BODY>

        </HTML>

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

Нөмірленген тізім  жолдары

  1. Сәуле;
  2. Мақсат;
  3. Данияр;
  4. Ержан

<UL> тәгінің екі атрибуты бар, олар:

start = нөмір

type = 1 | A | a | I | i

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

6 кесте

Type атрибуты мәніне қарай тізімдерді нөмірлеу түрлері

type мәні

стилі

тізім нөмірленуі

1

Араб цифрлары (келісім  бойынша)

1, 2, 3, 4, ...

A

Латын алфавитінің бас әріптері

A, B, C, D, …

a

Латын алфавитінің кіші әріптері

a, b, c, d, …

I

Рим цифрлары (жоғарғы  регистр)

I, II, III, IV, …

i

Рим цифрлары (төменгі  регистр)

i, ii, iii, iv,…


 

4.3. <DL> тәгі арқылы  жазылатын анықтау тізімдері

Анықтау тізімдері <DL> (definition list) тәгі арқылы жазылады да, алдыңғылардан аздап өзгешелеу болып келеді. Мұнда <LI> тәгі орнына <DT> (definition term – анықталатын термин) және <DD> (definition definition – анықтаманың анықтамасы) белгілері жазылады. Осыларды 4-3 мысал ретінде қарастырып, программа мәтінінен үзінді келтірейік:

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

  <BODY  text= green> <H3 ALIGN = CENTER>

Анықтау  тізімдері </H3>

<DL>

  <DT>HTML

          <DD> HTML (HyperText Markup Language) термині –  “гипермәтіндік белгілеу тілі” деген сөз. Оның алғашқы нұсқасын Европадағы элементар бөліктер физикасы  лабораториясының қызметкері Тим Бернерс-Ли жасап шығарған болатын.

<DT>HTML құжаты 

<DD> Тіркелу  аты  *.htm (Unix жүйелеріндегі файлдарда 

                      *.html) болып келген мәтіндік файл.

</DL>  </BODY>  </HTML>

Осы  программа  жұмысы нәтижесінде экранға мынадай  мәлімет шығады:

HTML

HTML (HyperText Markup Language) термині – “гипермәтіндік белгілеу  тілі” деген сөз. Оның алғашқы  нұсқасын Европадағы элементар бөліктер физикасы  лабораториясының қызметкері Тим Бернерс-Ли жасап шығарған болатын.

HTML құжаты

Тіркелу аты  *.htm (Unix жүйелеріндегі файлдарда *.html) 

болып келген мәтіндік файл.


<LI> тәгі сияқты <DT> және <DD> тәгтерінің жабылмай, жалғыз жазылатынына назар салыңыздар.

Егер терминдер  анықтамасы қысқаша түсіндірілетін болса, онда <DL COMPACT> белгісін пайдалануға болады. Енді төмендегідей 4-4 мысалды программа үзіндісі түрінде қарастырайық:

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

      <BODY  text= green> <HR> <H3 АLIGN=CENTER>

Қысқаша анықтамалар </H3>

<DL COMPACT>

<DT>АБАЙ 

<DD> XIX ғасырдағы  қазақ ақыны, әрі ағартушысы 

<DT> ҚҰРМАНҒАЗЫ 

<DD> XIX ғасырдағы  қазақ сазгері, атақты күйші 

<DT> МАХАМБЕТ 

<DD>XVIII ғасырдағы қазақ ақыны, әрі батыры – жыр

          семсері 

     </DL> 

     </BODY> 

</HTML>

Бұл программа экранға  мынадай мәтін шығарады:

АБАЙ    XIX ғасырдағы қазақ ақыны, әрі ағартушысы

ҚҰРМАНҒАЗЫ   XIX ғасырдағы қазақ сазгері, атақты күйші

МАХАМБЕТ   XVIII ғасырдағы қазақ ақыны, әрі батыры –

                                           жыр семсері


4.4. Қабатталған тізімдер

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

Қабатталып орналасқан тізімдерді мәтін мазмұндары мен  әр түрлі  жоспарлар  дайындауда қолданған тиімді болып табылады. Осындай тізімдер ұйымдастыруды қысқаша мынадай 4-5 мысалмен   көрсетейік:

<HTML> <HEAD> <TІTLE> 4-5  мысал  </TІTLE> </HEAD>

<BODY>

<H1 ALIGN=center> HTML  бірнеше   тізім  түрлерін ұйымдастыра 

                                  алады </H1>

<DL> 
   <DT> Нөмірленбеген  тізімдер

<DD> Нөмірленбеген   тізім  элементтері  сол   жақтан   арнайы  таңбамен  белгіленіп, мәтін аздап оңға таман жылжып  орналасады:

<UL> 
    <LІ> 1 элемент  
    <LІ> 2 элемент 
    <LІ> 3 элемент 
</UL> 
   <DT> Нөмірленген тізім жолдары 

<DD> Нөмірленген тізім  элементтері сол жақтан нөмірлер  арқылы 

           белгіленіп орналасады:         

<OL>

<LІ> 1 элемент  
  <LІ> 2 элемент 
  <LІ> 3 элемент 
</OL> 
   <DT> Анықтау тізімдері 
        <DD> Мұндай тізімдер алдыңғы екеуінен күрделірек, бірақ

                оқуға ыңғайлы болады. 

    <P> Тізімдерді  бірінің ішіне бірін жазып  қабаттастыруға болады,    

            бірақ мүлде көп деңгейлер  жасап, бұл тәсілмен тым  

            әуестеніп кету қажет емес екені есте болсын.

   <P > Тізімдегі бір элемент  ішінде бірнеше абзацтар тұруы  мүмкін.

           Ондай  абзацтар сол жақ шеттен бірдей  қашықтыққа ығысып 

            орналасады. </P>

        </DL>

  </BODY>

</HTML>

Осы программа нәтижесі:

HTML  бірнеше  тізім   түрлерін ұйымдастыра алады

Нөмірленбеген  тізімдер

Нөмірленбеген  тізім  элементтері  сол  жақтан   арнайы  таңбамен  белгіленіп, мәтін аздап  оңға таман жылжып орналасады:

    • 1 элемент
    • 2 элемент
    • 3 элемент
Нөмірленген тізім  жолдары 

Нөмірленген тізім элементтері  сол жақтан нөмірлер арқылы белгіленіп орналасады:         

    1. 1 элемент
    2. 2 элемент
    3. 3 элеменn

Анықтау тізімдері

       Мұндай  тізімдер алдыңғы екеуінен күрделірек, бірақ оқуға ыңғайлы болады. 

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

Тізімдегі бір  элемент ішінде бірнеше абзацтар тұруы мүмкін. Ондай абзацтар сол  жақ шеттен бірдей қашықтыққа ығысып орналасады.


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

1. Осы  бөлімдегі  4-2 мысалды теріп алып, оның нәтижесін  Internet Explorer-де қарап әр қатарға  өз топтарыңдағы студенттер аттарын  енгізу керек.

  1. Осы  бөлімдегі 4-3 мысалды алып, нәтижесін қарап, әр қатарға өз топтарыңдағы студенттер фамилиясын тізіп жазып, онан кейін қалыңдықтары және түстері әр түрлі болып келген, ұзындықтары да өзгермелі көлденең сызықтар жүргізу қажет.
  2. Жоғарыда келтірілген 4-3 мысалды алып, нәтижесін көріп, қосымша жолдар енгізіп, инженер, дәрігер, бухгалтер мамандықтарына түсінік беріңіздер.
  3. Қысқаша анықтама беретін 4-5 мысалды алып, нәтижесін көріп, әр жолға топ оқушыларының аттарын жазып және оларға “оқу озаты”, “дарынды бала”, “көрікті бойжеткен” сияқты қысқаша анықтамалар беріп, қосымша  мінездемелер жазу қ<span class=

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