"HTML құралдары" дәріс материалдары

Сабақ тақырыбы:     HTML  құралдары

1.    HTML тілінің атқаратын қызметі .

2.    HTML командалары.

3.    HTML құжатының құрылымы.Құжаттың функциональдық бөлігі мен  негізгі бөлігі .

4.    Құжаттың функционалдық бөліктерін анықтау.

5.    Қаріп(шрифт) стилдерін басқару. Логикалық стильдер.

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

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

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

HTML тіліндегі әрбір тег бір арнаулы қызмет атқарады. Олардың жазылуында әріптер регисторы ешбір роль атқармайды, бас әріпті де, кіші әріптерді де қатар қолдана беруге рұқсат етілген. Бірақ тег атауларын жай мәтіннен айыру мақсатында оларды бас әріппен жазу қалыптасқан. HTML тілінің бір тегі әдетте құжаттың белгілі бір бөлігіне, мысалы бір абзацқа ғана әсер етеді. Осыған орай екі тег қатар қолданылады. Бірі – ашады, екіншісі – жабады. Ашатын тег белгілі бір әсер ету ісін бастайды, ал жабатын тег сол әсерді аяқтайды. Жабу тегтері қиғаш сызық символымен басталуы  тиіс.

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

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

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

HTML құжатының құрылымы. Құжаттың функциональдық бөлігі мен негізгі бөлігі .

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

1.    HTML құжатының кез-келгені <html> тегінен басталып соған сәйкес жабылу </html> тегімен аяқталады.

2.    Осы екеуінің ортасында құжаттың тақырыптың бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады. Құжатың тақырыптық бөлігі <head> типтерінің ортасында тұруы, жалпы құжат туралы мәлімет береді. Әдетте бұл бөлікті <title> тегтерімен шектелетін құжаттың ресми атауы орналасады. Бұл атау терезе тақырыбында тұратын функцияның аты.

3.    Жазылатын мәтін құжат тұлғaсы деп аталатын <body> </body> тегінің ортасында жазылады. Осы айтылған 4 тег HTML құжатының кез-келгенінде болуы тиіс.

Мысалы: <html> <head> <title> құжат тақырыбы </title>

</head>

<body>

Бұл мәтін экранға шығады

</body>

</html>

Құжаттың функционалдық бөліктерін анықтау.

1. HTML тілі құжаттардың ішкі тақырыптарының көлеміне қарай 6 түрлі деңгейін жасайалады. Олар:<h1>…</h1>     <h6>…</h6> жалғасады.

2. Жаңа жолдан басталатын абзацтарды белгілеу үшін <p> тегі қолданылады. Бір абзацты жаппай жаңа абзацты бастап кетсек, алдыңғы абзац автоматты түрде жабылады. Сондықтан <p> тегінжаппасадаболады. HTML тілінде азат жолдан басталмайды, тек абзацтар арасында бір бос жол қалдырылып кетеді. Көбінесе абзацтарды анық етіп бөліп тұру үшін көлденең горизонтальсызық қойылады. Көлденең сызық қою <hr> тегімен орналастырылады. Оның жабу тегі болмайды.

3.Сөз арасында қойылған бірнеше бос орынның тек біреуі ғана көрініп тұрады. Сол сияқты келесі қатарға көшіретін Enter пернесіде HTMLтілінде ешбір әсер етпейді.

Егер абзац жасап бос жол қалдырмай жаңа жолға көшу қажет болса, онда жалғыз қолданатын <br> тегін пайдаланамыз.

Қаріп(шрифт) стилдерін басқару. Логикалық стильдер.

Сырғымалы жолдарды ұйымдастыру

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

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

Мысалы:

<body>

Алдарыңызда

<font color=”yellow” face= arial size=”4”>

төртінші мөлшермен arial типі мен аталған сары түсті әріптер.

</font>

</body>

2. Осы параметрдің барлығын бүкіл құжат үшін бірден беру қажет болса, онда <base font> бірғана тег пайдаланылады. Бұл тегте  жоғарыда көрсетілген атрибуттарды пайдаланылады. Олар қаріп түрін, мөлшерін, түсінанықтайды.

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

<b> және </b> тегтері араларында орналасатын мәтін қарайтылған қаріпке ауысады.

<i> және </i>   тегтері қаріптерді курсивпен береді.

<u> және </u> тегтері мәтіндердің астын сызады, <s> және </s> тегтері белдерінен сызылған символдарды бейнелейді.

Мысалы:

<html>

<head> 

</head>

<body>

<base font size=5  face=”Arial kz ”> Негізгі қаріп Arial kz типінде 5-ші мөлшермен жазылған.

<p><font size=-2 face=”Times New Roman Kz ” color=”green”>

</font>

<p><b> қарайтылу </b>

<p><i> курсивті </i>

<p><u> астынсызу </u>

<p><s> беліненсызу </s>

</body>

</html>