Основы HTML на татарском языке

HTML теле нигезләре.

(1 нче кисәк).

Web – битне Интернетка тәкъдим итү өчен, ул документның структурасын билгеләүче махсус телдә язылган булырга тиеш. Бу тел HTML - Hypertext Markup Language – гипертекстны урнаштыручы тел дип атала. Бу тел ярдәмендә сайтта урнаштырыла торган текст, башка документларга сылтамалар, рәсемнәрнең урнашу урыны һәм башкалар билгеләнә. Яхшы Web – битне әзерләү HTML нигезләрен белүне таләп итә. Битләрне ясаганда аның элементларын урнаштыруга HTML кагыйдәләре безнең алга катгый таләпләр куйса да, элементлар белән эшне шактый сыгылмалы итеп оештырырга булыша. Шуңа күрә дә Web – битләрне ясау теле – HTML ның мөмкинлекләрен карап китик. Мәсәлән, түбәндәге язмада Web – битнең кодын HTML теле ярдәмендә сурәтләүче файл фрагменты күрсәтелгән. Бу теләсә кайсы текст редакторында (мәсәлән, Блокнот) әзерләп була торган текст файлы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<title>homepage</title>

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

<META name="Author" content="Nigmatoulline Rashid">

</HEAD>

<body BGCOLOR="#FFFFFF" TEXT="#0000FF" ALINK="#FF0000" VLINK="#0033FF" LINK="#0000FF">

<TABLE WIDTH="100%" BORDER="0">

<TR>

<TD WIDTH="80%"><IMG SRC="graphics/school2.jpg" WIDTH="200" HEIGHT="129" ALIGN="Right" BORDER="0" ALT="Акъегет урта мәктәбе">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspӘйдә, рәхим ит, хөрмәтле Internet – гизүче!

HTML командалары (дескрипторлар, “tags”) почмаклы җәя эченә язылалар һәм тег диеп йөртеләләр. Текстны ничек күрсәтергә, графиканы каян алып кая куярга, сылтамаларны нинди төсләрдә сурәтләргә һәм башка бик күп эшләрне браузерга нәкъ менә шушы командалар “хәбәр” итәләр дә инде.

HTML теленең төп үзлекләре:

- Текст өлешен формалаштыру (форматлау) шрифтның, таблицаларның, исемлекләрнең һәм башка элементларның стилен билгеләүче командалар ярдәмендә башкарыла;

- Web – биткә, файлга яки башка объектка күрсәтүче гиперсылтамалар кертү мөмкинлеге туа;

- Бу телнең Web – битнең тышкы күренешен формалаштыру өчен кирәкле күп төрле чаралары бар.

- Рәсемнәр сылтама булып хезмәт итә алалар, аларны шул исәптән берничә объектка сылтама итеп файдаланып була (карта – сурәтләр)

- Web – биткә кулланучы белән эшли торган программалар урнаштырырга мөмкин.

HTML теле Web – битләр ясау һәм аларга матур тышкы кыяфәт бирү өчен киң мөмкинлекләр ачу белән бергә кайбер чикләүләр дә куя. Мәсәлән, шуларның берсе – биттә урнаштырыла торган объектлар турыпочмаклы формада булырга тиеш, түгәрәк формадагы рәсем барыбер турыпочмаклы булачак, чөнки файлларга фәкать турыпочмаклы рәсемнәр генә языла ала.

Махсус символлар һәм символлар таблицасына кермәгән символлар файдаланганда да кайбер кыенлыклар килеп чыгарга мөмкин. Браузерга махсус күрсәтмә бирелмәгәндә кайбер символлар дөрес укылмыйлар.

Моннан тыш, битне төзегән вакытта төрле кулланучыларның программа белән тәэмин ителешләре төрле булуны да истән чыгарырга ярамый. Сезнең иҗатыгыз төрле режимлы мониторларда төрлечә күренәчә. Операцион система тәэсирен дә исәпкә алмый булмый, әмма Web – битнең күренешенә тәэсир итүче иң әһәмиятле фактор – кулланучының браузеры. Хәзерге вакытта ике браузерга - Microsoft Internet Explorer һәм Netscape Navigator га йөз тотып, битне ясаган вакытта HTML – кодка ике вариант өстиләр, аларның һәркайсы аерым браузер өчен языла. Махсус программалар (скриптлар) ярдәмендә браузерның версиясе билгеләнә һәм аның өчен язылган код күрсәтелә.

Сайтыгызны Web – биттә үзегез теләгәнчә урнаштыру өчен (ягъни аны HTML чаралары белән язу өчен) браузер тәрәзәсендә аның ничек күренәчәген исәпкә алырга тиешсез. Ә бу эшкә HTML теле нигезләрен белгәндә генә тотынып була.

HTML - код (яки HTML-документ) берничә бүлектән тора. Биттәге элементларның махсус командалар – теглар белән язылуы турында әйтелгән иде инде. Шулай булгач, документның структурасы да ниндидер командалар белән языладыр дип уйлау бик дөрес булыр.

Барыннан да элек HTML командасының ничек язылышын тикшерик. Бу – почмаклы җәяләр эченә язылган символлар тезмәсе. Мәсәлән: <HTML>, <BODY>. Символлар регистрының әһәмияте юк (зур һәм кечкенә хәрефләр язарга мөмкин). Теглар парлы (блоклы) һәм парсыз булалар. Блоклы тег үз эчендәге документ фрагментының сурәтләнешенә тәэсир итә. Мондый тег өчен аның тәэсир зонасы бетүне белдерүче икенче тег (аның пары) кирәк. Алары да сурәтләүне башлаучы тег кебек үк язылалар, ләкин аларга "/" тамгасы өстәлә. Мәсәлән:

<Р> Биттәге текстның фрагменты. Бу очракта – абзац тексты.

</Р>

Башка тегларны үз эченә алган теглар тег – контейнерлар дип тә аталалар. Кайбер очракларда ябучы тег күрсәтелми. Тегка исем генә түгел, элементның сурәтләнешенә тәэсир итүче параметрлар да языла. Параметрлар тег эченә язылалар (почмаклы җәяләр эченә), бер – береннән буш урын (пробел) белән аерылалар. Параметр зурлыклары аларның исемнәреннән «"» тамгасы белән аерыла. Бу тамга буш урын булганда гына мәҗбүри. Параметрларны күрсәтүгә мисал:

<IMG SRC="images/соl.jpg" WIDTH=150 HEIGHT=80>

Бу очракта тегның исеме IMG (рәсем кую тегы) , параметры SRC (рәсем файлына юл), WIDTH - рәсемнең киңлеге, HEIGHT - рәсемнең биеклеге.

Теглар язуның төп кагыйдәләрен белгәннән соң HTML-документның структурасына төшенү авыр түгел.

Иң беренче бу документта Web – битнең HTML телендә язылуы күрсәтелә. Моның өчен текст <HTML> тегыннан башланып китә. Аның өчен ябучы </HTML> тегы кирәк, ул документның ахырын билгели.

Шуннан соң килә торган теглар документның исемен һәм эчтәлеген билгелиләр. Документ исеме тегы <HEAD> дип языла, аны ябучы тег - </HEAD>.

Аннары документ турындагы информацияне йөртүче тег языла. Аның эчендә текст, рәсемнәр һәм башка элементлар урнаша. Бу тегның язылышы: <BODY>…</BODY>

Иң гади web – битнең мисалын карап китик:

<HTML>

<HEAD>

<TITLE>HTML - битнең мисалы</TITLE>

</HEAD>

<BODY>Бу HTML телендә язуның структурасын сурәтләүче гади Web - бит.

</BODY>

</HTML>

(Игътибар иткәнсездер, татар хәрефләре (ә, ү, һ, җ) ниндидер аңлашылмый торган символлар белән күрсәтелгәннәр. HTML редакторы татар хәрефләрен танымаганга күрә, бу хәрефләр махсус кодлар белән күрсәтелгәннәр. Татар телендәге текстны кодлаштыру өчен программист Шәрифҗанов Ранил махсус программа – редактор төзегән, аны бушлай күчереп алырга була: Ул Tathtml_v2 дип атала.)

Иң беренче урнашкан <TITLE> тегы Web – битнең исемен йөртә. Браузер тәрәзәсендә ул иң өстә күренеп тора. Бу исем, документ тулысынча ачылып беткәнче үк күренгәнгә, кулланучы кая килеп чыкканын аңлап ала. Моннан тыш кайбер эзләү системалары да бу информациядән файдалана беләләр.

<BODY> тегы ярдәмендә текст һәм фон төсләрен, текстураны, чик кырларның киңлеген билгеләп була.

BGCOLOR битнең фонын билгели. Болай языла: BGCOLOR-#RRGGBB, монда RR, GG һәм BB - төснең RGB компонентларының уналтылы исәп системасындагы язылышы.«#» символы шуннан соң төс язылганны аңлата. Мисал:

<BODY BGCOLOR=#F8FF10>

TEXT документ текстының нинди төстә булачагын билгели. Ул фон төсен язган кебек үк языла, Таблица күзәнәкләрендә (ячейкаларында) урнашкан текстка тәэсир итмәскә мөмкин. Мисал:

<BODY TEXT="#FF8000">

LINK әлегә каралмаган сылтамалар нинди төстә булачакларын билгели. Мисал:

<BODY LINK="#008000">

VLINK каралган сылтамаларның төсен билгели. Мисал:

<BODY VLINK="#800000">

ALINK актив сылтамаларның төсләрен белгели (күчү вакытындагын). Мисал:

<BODY ALINK="#FF0000">

BACKGROUND Web – биткә куела торган фон рәсеменә (текстурага) URL – адресны (файлга юлны) күрсәтә. Бу параметрны, шулай ук төс һәм фон белән идарә итүче башка параметрларны таблица күзәнәкләренә (ячейкаларга) карата кулланып була. Аларны бу очракта <TD> тегына урнаштырырга кирәк, таблицалар белән эшкә алдарак тукталырбыз.

BACKGROUND параметрын куллануга мисал:

<BODY BACKGROUND="grafics/cat.gif">

Документның өске өлешендә бирелә торган эш информациясе арасында кодлаштыру таблицасы турындагы мәгълүматны бирергә кирәк. Ул документны башка операцион система урнаштырылган компьютерда карау өчен бик әһәмиятле. Әгәр документның нинди телдә язылганын (дөресрәге, кайсы телнең милли символлары кулланылганын) күрсәтмәсәк, документны укып булмау ихтималы бар. Кодлаштыру таблицасын <META> тегы ярдәмендә күрсәтәләр. Бу тег <HEAD> һәм </HEAD> теглары арасына урнаштырыла, ябучы тег булмаса да ярый.

Күрсәтелергә тиешле кодлаштыру таблицасы файлның нинди операцион системада һәм нинди редакторда ясалуына бәйле. Әгәр Windows системасы һәм HTML – редактор итеп Блокнот кулланылалар икән, рус һәм татар текстларын дөрес күрсәтү өчен Windows – 1251 кодлаштыру таблицасын күрсәтергә кирәк. <META> тегын түбәндәгечә язалар:

<МЕТА HTTP-EQUIV="Content-type"

CONTENT="text/html; charset=Windows-1251">

Документның структурасын билгеләгәннән соң, аны кулланучы өчен билгеләнгән мәгълүматлар белән тутыра башларга була. Алар <BODY> и </BODY> теглары арасына урнаштырылалар. Документка теглар ярдәмендә рәсемнәр һәм форматлау элементлары урнаштырылган текст (таблицалар, исемлекләр һәм башка элементлар белән) куеп, аны Web – биттә чагылдыруны карап китик.

Мәгълүмати эчтәлекне язу кагыйдәләрен өйрәнүгә керешкәнче, HTML ның тагын бер үзлегенә төшенергә кирәк. Әгәр дә бит текстына карата кулланучыга күренми торган искәрмәләр кертергә, яки, әгәр вакытлыча нинди дә булса элементның Web – биттәге чагылышын юкка чыгарып торырга кирәк булса, текстның бу кисәген комментарий дип игълан итәләр. HTML – кодтагы комментарий битнең браузердагы күренешенә тәэсир итми.

Текст кисәген комментарий дип игълан итү махсус «<!- -» тегы ярдәмендә башкарыла. Комментарий ахыры «- ->» тегы белән билгеләнә. Түбәндә комментарийлы текстның мисалы бирелгән:

Бу текст экранда күренеп торачак.

Ләкин комментарий рәвешендә сер булган мәгълүматларны (кулланучылар исемнәре, керү парольләре) сакларга ярамый, чөнки битнең HTML – кодында алар кулланучыга күренәчәкләр.

Еш кына биткә бүлекнең, тулаем битнең исемен язарга кирәк була. Моның өчен стандарт баш исем тегларын кулланалар. HTML теле аны алты дәрәҗәдә (үлчәмдә) күрсәтергә мөмкинлек бирә, теглар <Н1> дән <Н6> га кадәр. Баш исемнең тексты ачучы һәм ябучы теглар арасына языла.

<Н1>Беренче дәрәҗәдәге баш исем</Н1>

<Н6>Алтынчы дәрәҗәдәге баш исем< /Н6>

«Н» символы артыннан килгән сан зуррак булган саен, баш исем текстының үлчәмнәре кечерәк була. Баш исем булганда автомат рәвештә яңа юл башлана, моннан тыш, баш исем беръюлы берничә юлда урнаша ала.

Баш исемне битнең нәкъ уртасына урнаштыру мөмкинлеге бар, моның өчен тег белән бергә өстәмә параметр кулланыла:

<Н1 ALIGN = "CENTER"> </Н1> Бу – беренче дәрәҗәдәге баш исем, ул битнең уртасына урнаштырылган.

ALIGN параметрын һәм left, right кыйммәтләрен кулланып, баш исемне битнең уң яки сул ягы буенча тигезләргә мөмкин.

Документтагы текстны һәм башка объектларны экранның уртасына урнаштыру өчен махсус <CENTER> тегын менә болай файдаланалар:

<CENTER><H1>Беренче дәрәҗәдәге баш исем - уртада</Н1></СЕNTER>

Документка гади текст урнаштырып, андагы шрифтның үзлекләрен (шрифтның гарнитурасын, зурлыгын, төсен, калынлыгын һ.б. үзгәртеп була, аларны махсус логик яки физик теглар ярдәмендә үзгәртәләр.

Күпчелек очракта зурлыклары буенча охшаш физик һәм логик теглар ярдәмендә форматлау бер үк эффект бирәләр. Аерма бары тик шунда гына: физик форматлау теглары шрифтның кайсы үзлекләрен үзгәртергә икәнлеген турыдан – туры күрсәтәләр (мәсәлән, калын шрифттан, файдаланырга), ә логик форматлау теглары текстның нинди икәнлеген (мәсәлән, бик әһәмиятле) аңлаталар.

Текстның чын үзлекләрен күрсәтү урынына текстның интонациясен күрсәтү (ә моны логик форматлау теглары башкаралар) аның экрандагы күренеше белән идарә итәргә мөмкинлек бирәләр. Мисал китерик: мәсәлән, әһәмиятле текст калын хәрефләр белән түгел, ә кызыл төс белән күрсәтелергә тиеш дип исәплисез, ди. Логик форматлау теглары кулланганда һәм моны тормышка ашырырга мөмкинлек бирүче браузер булганда, логик форматланган текстның сурәтләнешен үзгәртергә була. Ә физик форматланган текст һәрвакытта да экранга автор уйлаганча чыгачак. Билгеле, әгәр сез текст нәкъ менә калын хәрефләр белән күрсәтелергә тиеш дип исәплисез икән, физик форматлау кулланырга кирәк. Кире очракта логик форматлау теглары кулланырга киңәш ителә.

Текстны физик һәм логик форматлау теглары.

Тегның тәэсире	Физик форматлау тегы	Логик форматлау тегы
Калын шрифт	<B>	<STRONG>
Курсив	<I>	<EM>
Тигез биеклектәге шрифт	<TT>	<CODE>
Астына сызылган текст	<U>	−
Аркылы сызыклы текст	<s>	<DEL>

Кагыйдә буларак, бу теглар парлы кулланылалар, ябучы тег үзгәртелергә тиешле текст артыннан куела (тегы белән бергә куела һ.б.ш).

Логик форматлау теглары HTML га чагыштырмача күптән түгел генә кертелгәнгә, кайбер браузерлар тарафыннан танылмаска мөмкин, сайтлар ясаганда моны истә тотарга кирәк.

Күпчелек браузерлар шрифтның гарнитурасын, үлчәмнәрен һәм төсен үзгәртә торган тегларны кулланырга мөмкинлек бирәләр. тегы болай языла:

 ...текст... 

бу тегның түбәндәге кыйммәтләрен биреп була:

SIZE шрифтның үлчәмнәрен билгели. Мисаллар: SIZE-"3", SIZE-"4", SIZE«"-2", SIZE-"+4". SIZE параметрыны 1 дән алып 7 гә кадәр була. Әгәр чагыштырма зурлык бирелгән икән, шрифтның тулы үлчәм зурлыгы аның бирелгән нигез зурлыгыннан чыгып исәпләнә. Шрифтның тегы һәм SIZE параметрларына туры килә торган чын үлчәмнәре браузерның көйләү мөмкинлекләренә бәйле.

FACE шрифтның гарнитурасын билгели (текст шул шрифт белән экранга чыга). Бу параметрның кыйммәте – системада урнаштырылган шрифтның исемнәре. Аларның исемнәрен операцион системада язылганча бирергә кирәк, югыйсә браузер аны табып, текстка карата куллана алмаячак. Мисаллар:

FACE-"Arial", FACE-"Times New Roman".

COLOR текстның төсен үзгәртә, төс уналтылы санау системасында күрсәтелә. Мисаллар:

COLOR-"FF8000", COLOR-"8FF710".

Хаталардан саклану өчен, параметр зурлыкларны куш тырнаклар эченә куярга кирәк. Әгәр параметр зурлыклар эчендә пробеллар булса – бу кагыйдә мәҗбүри.

Түбәндәге HTML – документ фрагментын HTML редакторга куеп карагыз (югарыда әйтелгәнчә, <BODY>…</BODY> теглары арасына).

Физик форматлау: <В>калын</В> һәм курсив

шрифтлар. 

Логик форматлау: калын һәм <ЕМ> курсив </ЕМ>

шрифтлар. 

Текст астына сызылган яки <S> аркылы сызылган булырга мөмкин

</S>. 

 Текстның күренеше белән идарә итеп була,

 әгәр аның үлчәмнәрен үзгәртсәң,

 

шулай ук аның гарнитурасын да <FONT

FACE="Courier New"> үзгәртәсе ансат. . 

ә монысы шрифтның төсен үзгәртүгә бер мисал.

Шрифтның үлчәмнәрен һәм башка параметрларын <BASEFONT> тегы ярдәмендә дә күрсәтеп була. Әгәр бу тегтан соң текстта чагыштырма үлчәмле тегы очрый икән, аның тулы үлчәмнәре <BASEFONT> тегында күрсәтелгән үлчәмгә чагыштырылып күрсәтелә. тегыннан аермалы буларак, бу тегның шуннан соң килә торган текстка тәэсире текст ахырына кадәр бара. Әгәр бу тег документта берничә тапкыр кабатланса, аларның һәрберсе шрифтның үлчәмнәрен үзенчә үзгәртә.

<BASEFONT> тегында шрифтның үлчәмнәре SIZE параметры белән күрсәтелә ( тегы кебек эшли). Шрифтның төсен COLOR, гарнитураны FACE параметрлары билгелиләр. Мисал:

<BASEFONT SIZE="7" COLOR="#3FE6D4" FACE="Arial">

<BASEFONT> тегы параметрлары таблицаларда урнашкан текстка тәэсир итә алмыйлар.

Кайбер чакта текстны абзацларга бүлергә кирәк була. Моның өчен махсус HTML чаралары кулланыла. Браузерлар, кагыйдә буларак, HTML – кодтагы кабатланып килүче буш урыннарга (пробелларга) һәм юлдан – юлга күчү символларына игътибар итмиләр. Махсус күрсәтмәләр булмаганда текст автомат рәвештә сүзләр арасындагы буш урыннар (пробеллар) буенча юлларга бүленә, битнең чикләре киңәя (горизонталь күчергеч барлыкка килә). Шуңа күрә дә текстны абзацларга бүлгәндә буш юлларның урынын кулдан кертергә кирәк.

Абзац билгеләү өчен тегы кулланыла. Ул яңа абзац башлануын белдерә. Теоретик яктан караганда абзац башын белдерүче тегка абзац ахыры тегы () туры килергә тиеш, ләкин практикада аны кулланмаска да мөмкин. Яңа абзацның тегы алдагы абзацның беткәнлеген дә белдерә. Моннан тыш яңа абзацны автомат рәвештә баш исем теглары һәм кайбер башка теглар формалаштыралар.

Абзац тегында ALIGN параметры булса, ул браузерга үзендәге текстны ничек тигезләргә икәнлеген аңлата. Шундый тегның язылышына мисал (бу очракта киңлек буенча тигезләү урнаштырыла):

<Р ALIGN="justify">

 тегының ALIGN параметры кыйммәтләре.

Кыйммәте	Искәрмә
left	Cул як буенча тигезләү урнаша
right	Уң як буенча тигезләү урнаша
center	Абзац битнең уртасы буенча тигезләнә
justify	Абзац битнең бөтен киңлеге буенча тигезләнә

JUSTIFY кыйммәтен барлык браузерлар да танымыйлар, шуңа күрә аны кулланганда сак булырга кирәк.

Юлны яңа абзацсыз гына күчерергә кирәк булган очракта (яңа юл алдына буш интервал өстәмичә), юлны күчерүче махсус тег - кулланыла. Бу тегны ябучы тегсыз гына кулланалар.

Берничә тегын куллануны кайбер браузерлар исәпкә алмыйлар.

Текст фрагментын һәм теглары белән чикләү аның эчендә юлларны күчерүне тыя. Әгәр бу фрагмент эчендә юлны күчерергә кирәк икән, аның урынын тегы ярдәмендә күрсәтәләр (ябучы тег кирәкми). Бу мөмкинлекне дә барлык браузерлар да бирмиләр.

Төсләр турында. HTML да төсләр өч төсле компонент (кызыл, яшел һәм зәңгәр – RGB) ярдәмендә, уналтылы санау системасында бирелә. Кайбер төсләрне аларның кодлаштырылган исемнәре аша биреп була. Мәсәлән, яшел төсне #008000 дип тә, green (яшел) сүзе белән дә биреп була. Шундый рәвештә башка (кызыл, сары, ак, кара, соры һ.б.) төсләрне дә күрсәтәләр. HTML теленә багышланган махсус әдәбиятта төсләрнең стандарт билгеләнеше таблицалары бар.

Web – серверга җибәрелергә тиешле файлларны ничек сакларга кую турында да берничә сүз әйтми булмый. Әгәр бу максатларда HTML – документ әзерләнә икән, аны *.html яки *.htm киңәйтелеше (расширениесе) белән сакларга кирәк, аларны барлык браузерлар да таныйлар. Әгәр бу файл кулланучыга серверга мөрәҗәгать иткәндә күренергә тиеш икән, аңа стандарт исем бирергә кирәк. Гадәттә бу исем index.htm яки index.html. Берәр адрес буенча урнашкан ресурсны чакырганда, кулланучыга шул исемне йөртүче файлларны браузер автомат рәвештә тапшыра. Башка файллар да, таныш исемле булсалар, шулай ук ачылалар. (Мәсәлән, автомат рәвештә ачылган биттәге сылтама буенча күчкәндә).

Серверларда файдаланыла торган кайбер операцион системалар файл исемендәге символлар регистрына бик сизгер булалар (юл һәм баш хәрефләрне аералар). Моннан тыш файл исеменең озынлыгына да чикләү була ала. Хаталардан саклану өчен, файл исемнәрендә һәм барлык сылтамаларда бер генә регистр хәрефләреннән файдаланырга, исемне сигез символдан озын бирмәскә, латин алфавитын, цифрлар һәм «_» символын гына кулланырга кирәк.

Бу чикләүләр Web – бит булмаган башка файлларны (мәсәлән, рәсемнәрне, текстларны) саклаганда бигрәк тә актуаль. Эш шунда ки, Web – бит адреслары файл исеме озынлыгына һәм регистрга сизгер түгелләр, ә Web – бит булмаган файлга мөрәҗәгать иткәндә (мәсәлән, Web – биттә берәр рәсем урнаштырганда), дөрес язылмаган исемнәр аркасында кыенлыклар туа.