Презентация по информатике "HTML программалау тілі"

• 1 слайд

  HTML программалау тілі

• 2 слайд

  Жоспар: І.Кіріспе: Жалпы мағұлмат ІІ.Негізгі бөлім: HTML тілінің атқаратын қызметі . HTML командалары. HTML құжатының құрылымы.Құжаттың функциональдық бөлігі мен негізгі бөлігі . Құжаттың функционалдық бөліктерін анықтау. Қаріп (шрифт) стилдерін басқару. Логикалық стильдер.Сырғымалы жолдарды ұйымдастыру Мәтін фрагменттерін логикалық стильмен безендіру. ІІІ.Қорытынды: Сырғымалы жолдарды ұйымдастыру.

• 3 слайд

  HTML гипертекстік тілін 1989 жылы World Wide Web гипертекстік жүйесін бөлудің өңдеу технологиясының компоненттерінің бірі ретінде Тим Бернер – Ли ұсынғаны белгілі. Гипертексті бөлу негізіне құжаттың әрбір элементі тегтерімен қоршаған элементтердің жиынтығы түрінде көрсетуге болатын құжатты сипаттаудың тегтік моделі жататын болған. Өзінің мәні бойынша тегтер программалау тілдеріндегі «BEGIN / END» жақша ұғымдарына жақын және локальды айнымалылардың HTML аттарының арасындағы амалдардың облысын білдіреді , құжаттағы тексттік э лементтерді түсіндіру ережелерінің амалдарын анықтайды және т. б.

• 4 слайд

  Web – парақтары  экранда  ықшам   түрде безендіріліп,   көрсетілгенмен,  HTML   тілі  мәтіндерді  пішімдеп   көрсететін  тілге  жатпайды.  Өйткені  әрбір  тұтынушы   әртүрлі  компьютерлерді  пайдаланады.   Сол  себепті  жаңа  ғана  зауыттан  шыққан  бір  компьютердің   Windows   жүйесінде  жұмыс  істей  алатын  броузері бар  болса,  екінші  бір  тұтынушы  компьютері  тек   MS    DOS  жүйесінде   жұмыс  істейтін   ескі  броузерді  пайдалануы   мүмкін.   Бұл  екеуінің  көрсету  мүмкіндіктері   әртүрлі    болғандықтан,   бір   файл  екеуіне   2  түрлі  болып  көрсетіледі.  Ал  үшінші   компьютердегі   Web – парақтың  мәтіндері  зағиптарға  арналған.   Брайль  қаріптері  арқылы  берілсе,  оның   нәтижесі    тіпті   басқаша   болады.   Құжаттарды  әртүрлі  тұтынушының   әртүрлі  құрылғыларда  және  әртүрлі  броузер    программалармен  көретіндіктерін   ескерсек,   HTML   тілін  мәтіндерді  форматтау  тәсілдерін  жазуға   арналған   тіл  деп  атауға    болмайды.   Ол  Интернеттегі  мәтін  бө ліктерінің   атқаратын қызметін  анықтап,   соларды  әрбір  тұтынушыға   бейімдеп  жеткізе  алатын  құжатты   функционалды   түрде   белгілейтін  тіл  болып  табылады. HTML  тілінің  атқаратын  қызметі .

• 5 слайд

    HTML   командалары. HTML  тілінің    бастапқы   мәтінді   белгілейтін  командалары  тег (tag)  деп  аталынады.  Тег  символдар  тізбегінен тұрады. Барлық тег «кіші» (<) символдарынан басталады да,  «үлкен»  (>) символымен аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар  деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын  түйінді сөз – тег орналасады. HTML  тіліндегі әрбір тег бір арнаулы қызмет атқарады. Олардың жазылуында әріптер регисторы ешбір роль атқармайды, бас әріпті де, кіші әріптерді де қатар қолдана беруге рұқсат етілген. Бірақ тег атауларын жай мәтіннен айыру мақсатында оларды бас әріппен жазу қалыптасқан. HTML тілінің бір тегі әдетте құжаттың белгілі бір бөлігіне, мысалы бір абзацқа ғана әсер етеді. Осыған орай екі тег қатар қолданылады. Бірі – ашады, екіншісі – жабады. Ашатын тег белгілі бір әсер ету ісін   бастайды,  ал  жабатын  тег  сол  әсерді  аяқтайды.   Жабу  тегтері   қиғаш  сызық   символымен    басталуы  тиіс. Кейбір  тегтер  өз  жазылу   орнына  қарай  тек  бір  ғана  әсерін  тигізеді.     Мұндайда   жабу  тегі  қажет   болмай  қалады  да,   ол  жазылмайды.   Егер  тег  ретінде  HTML   тілінде  қолданылмайтын    түйінді  сөз  жазылып   кетсе,   онда   оның   ешбір әсері  болмайды.   Броузер  арқылы   құжат  экранда   көрсетілген  жақта  тегтердің  өздері  бейнеленбей,  тек  олардың  құжат  мәтініне  тигізетін  әсері   ғана  бөлініп  тұр.

• 6 слайд

  Көбінесе  ашылу  тегтерінің   тигізетін  әсерлерін  түрлендіретін  олардың   атрибуттары  болады.   Атрибуттар   немесе  сипаттамалар  -тег  атауының  және  бір  бірінен   бос  орын   арқылы  бөлініп   жазылытын   қосымша   түйінді   сөздерден  тұрады.  Кейбір  атрибуттар  оның  мәнін  жазуды  талап  етеді.  Атрибут   мәні  оның  түйінді   сөзінен  теңдік  белгісі  (=)    арқылы   бөлініп  жазылады.    Атрибут мәні   қостырнақшаға   алынып  жазылуы  тиіс,   бірақ   кейде  қос тырнақшаны   жазбауға  да  болады. Программалау    тілдерінде   түсінік   беретін  сөздер – комментарийлер   жазылатыны    сияқты  мұнда  да программаның   орындалуына   еш  әсер  етпей,   оны   түсінуді   жеңілдететін  түсініктеме  мәтіндер  жазып  отыруға  болады.  HTML   тілі   комментарийлері    арнайы   символдардан    басталады  да,    түсінік   беретін  мәтін   осыған    жалғаса  жазылады. Тег  атрибуттары. Түсініктемелер

• 7 слайд

   HTML құжаты сол құжаттың негізгі мәтіні мен белгілі тегтер деп табылады. Сондықтан оны құрастыру үшін жай мәтіндік  редакторды, Windows ортасындағы блокнотты пайдалана беруге болады. HTML құжатының кез-келгені <html> тегінен басталып  соған сәйкес жабылу </html>  тегімен аяқталады. Осы екеуінің ортасында құжаттың тақырыптың бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады. Құжатың тақырыптық бөлігі <head> типтерінің ортасында тұруы, жалпы құжат туралы мәлімет береді. Әдетте бұл бөлікті <title> тегтерімен шектелетін құжаттың ресми атауы орналасады. Бұл атау терезе тақырыбында тұратын функцияның аты. Жазылатын мәтін құжат тұлғaсы деп аталатын <body> </body> тегінің ортасында жазылады. Осы айтылған 4 тег HTML құжатының кез-келгенінде болуы тиіс. HTML құжатының құрылымы. Құжаттың функциональ дық бөлігі мен  негізгі бөлігі .

• 8 слайд

  Мысалы: <html> <head> <title> құжат тақырыбы </title> </head> <body> бұл мәтін экранға шығады </body> </html>

• 9 слайд

  1. HTML тілі құжаттардың ішкі тақырыптарының көлеміне қарай 6 түрлі деңгейін жасай алады. Олар:<h1>…</h1>     <h6>…</h6> жалғасады. 2. Жаңа жолдан басталатын абзацтарды белгілеу үшін <p> тегі қолданылады. Бір абзацты жаппай жаңа абзацты бастап кетсек , алдыңғы абзац автоматты түрде жабылады. Сондықтан <p> тегін жаппаса да болады. HTML тілінде азат жолдан басталмайды, тек абзацтар арасында бір бос жол қалдырылып кетеді. Көбінесе абзацтарды анық етіп бөліп тұру  үшін көлденең горизонталь сызық қойылады. Көлденең сызық қою <hr> тегімен орналастырылады. Оның жабу тегі болмайды. 3. Сөз арасында қойылған бірнеше бос орынның тек біреуі ғана көрініп тұрады. Сол сияқты келесі қатарға көшіретін Enter пернесі де HTML тілінде ешбір әсер етпейді. Егер абзац жасап бос жол қалдырмай жаңа жолға көшу қажет болса, онда жалғыз қолданатын 
  тегін пайдаланамыз. Құжаттың функцио налдық бөліктерін анықтау.

• 10 слайд

  Қаріп (шрифт) стилдерін басқару. Логикалық стильдер. Сырғымалы жолдарды ұйымдастыру   HTML 4.0 нұсқасынан бастап кез-келген құжатты әдемілеп әшекейлеу ісін сол құжаттан бөлек жасау мүмкіндігі пайда болды. Алайда бұл концепция тек байқау сипатына ие болып отыр. Және оны көптеген броузерлер арқылы жасауға болмайды. Сол себепті HTML тілінде тек ғана тегтер бар.

• 11 слайд

  1. Әріптің мөлшерін, түсін және сызылымын таңдап алу үшін <font> тегін пайдаланамыз. Бұл қосарланған тег оның ашылған және жабылған тегтер арасында орналасқан барлық мәтінді түрлендіруге болады. <font> тегінде қолдануға болатын  size=…., color=…, face=…,  тәрізді, 3 атрибутының ең болмағанда біреуі тұруы тиіс: 1-ші атрибуты әріптің мөлшерін тағайындайды. Әріптің алдын-ала берілетін 7 түрлі көлемі бар. Олар :1-7 сандар. Егер сан көрсетілмесе келісім бойынша 3-ке тең деп саналады. color=   — әріптің түсін таңдау мүмкіндігін береді. face=  – қаріп (шрифт) типін береді. Осы атрибуттың мәні компьютерде орнатылған қаріп атының біріне сәйкес келуі керек. 3. Тегтердің тағы бір арнайы тобы қаріптің сызылымын өзгерту мүмкіндігін береді. <b> және </b>    тегтері    араларында орналасатын мәтін қарайтылған  қаріпке ауысады. <i> және </i>   тегтері қаріптерді   курсивпен  береді. <u> және </u> тегтері мәтіндердің астын сызады , <s> және </s> тегтері белдерінен сызылған символдарды бейнелейді. 2. Осы параметрдің барлығын бүкіл құжат үшін бірден беру қажет болса, онда <base font> бір ғана тег пайдаланылады. Бұл тегте  де жоғарыда көрсетілген атрибуттарды пайдаланылады. Олар  қаріп түрін, мөлшерін, түсін анықтайды.

• 12 слайд

  Логикалық стильдер <b>, <i>, <u> тегтері сияқты сөздерді ерекшелеп көрсетеді. Олар программа мәтінін жазғанда немесе цытаталар келтірілген кезде қолданады. Логикалық стильді пайдалану кезінде броузер экранға не шығаратынын айту қиын. Әртүрлі броузерлер экранға логикалық стильмен берілген символдарды әртүрлі етіп шығаруы мүмкін. <EM>…</EM>  акцент сөзінен шыққан яғни курсив түрінде берілетін мәтін бөлігін қоршап тұратын белгілер болып табылады. <strong> …</strong> күшті акцент деген сөзден шыққан мәтін ішіндегі қарайтылған қаріп болып көрсетіледі. <code>… </code> программа мәтінін көрсету үшін қолданатын стиль түрі. <samp>… </samp> ағымның –мысал, үлгі деген сөзі, программа жұмысы нәтижелерін ендері бірдей  моношрифт түрі экранға шығарарда  пайдаланылады. <KBD>…</KBD> ағымның keyboard пернетақта қысқаша сөзі пернелерден енгізілген   сөз тіркесін көрсету мақсатында қолданамыз. <var>… </var> ағымының variable айнымалы сөзі программадағы айнымалы аттарын жазу үшін енгізілген стиль түрі, қисайтылған курсивке ұқсас қаріп түрі. Мәтін  фрагменттерін  логикалық  стильмен  безендіру.

• 13 слайд

  < Marquee>….</Marquee> тегтері мәтіндерді үздіксіз жылжытып отыратын сырғымалы жол түрінде экранға шығады. Бұл тегтің ашылуы кезіндежазылатын біршама атрибуттары бар. Олар сырғымалы жолдың жылжу жылдамдығын, бағытын, әріптердің  түсін, т.б. өзгертеді. Енді жиі өзгертілетін параметрлерді және олардың мүмкін мәндерін қарастырамыз. Benaior-мәтіннің бір бағыты (scrool) немесе қос бағыттада (alternate) жылжуын немесе жылжымай тоқтап тұруын   қамтамасыз етеді. Яғни мүмкін мәндері  Scrool (alternate/slide). Bgcolor — сырғымалы  жолдың фондық түсін анықтайды. Direction — жолдық сырғу бағытын анықтайды. Оның  мүмкін мәндері  Left-солға , Right-оңға. Height — сырғымалы  жолдың биіктігін пиксель арқылы анықталатын бүтін сан. Оны пайызбен көрсетуге болады. Width -экрандағы сырғымалы жолдың енін көрсетеді. Оны да биіктік сияқты пайызбен көрсетеміз. (%) Сырғымалы  жолдарды  ұйымдастыру.