Санкт-Петербург мемлекеттік политехникалық университеті

Экономика және менеджмент факультеті

Кафедра: Электр энергетикасындағы экономика және менеджмент және қоршаған ортаны басқару

Курстық жұмыс

Энергетикадағы ақпараттық технологиялар

«Жасау желі -тілді қолданатын беттер HTML ».

Жетекшісі: Васильева Вероника Игоревна

Орындаған 2073/2 топ студенті: Мария Виктория.

Санкт Петербург

Кіріспе……………………………………………………………………3

1. HTML тілінің негізгі түсініктері………………………………………..4

1.1 HTML тілінің пайда болу тарихы………………………………….4

1.2.HTML файл құрылымы…………………………………………………………….6

1.3. Негізгі HTML тегтерінің тізімдері……………………………………..9

1.4. HTML тілінде кестелер құру……………………………………..10

1.5 Гипермәтіндік сілтемелерді құру…………………………………..12

2. «Садақ ату» сайтының құрылуына сипаттама…..……………………..14

Қорытынды…………………………………………………………….22

Қолданылған әдебиеттер……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………23

Кіріспе.

Менің курстық жұмысымның тақырыбы Веб құру HTML тілін қолданатын беттер «қазіргі уақытта өте өзекті, өйткені біз компьютерлік технологиялар ғасырында өмір сүріп жатырмыз және Интернет жұмыс істейтін және оқитын адамдардың өмірінде үлкен орын алады. Веб-беттер жасалатын HTML тілінсіз елестету мүмкін емес Интернет адам өмірінің барлық маңызды бөліктеріне еніп, шексіз ақпарат көзі болып табылады.

Менің курстық жобам мен жасаған және жұмыс тақырыбы болып табылатын сайт мысалында әзірленді. Сондықтан болашақта барлық қолданылатын материалдар одан алынады.

Менің жұмысымның мақсаты веб-сайтты құруды және бұл үшін қажетті алгоритмдерді пайдалануды үйрену болды, бұл менің жұмысымда сипатталады.

Курстық жобамды жазу үшін мен одан әрі оқуда қажет болатын негізгі түсініктерді егжей-тегжейлі және нақты сипаттайтын дәрістерді қолданамын. Оған қоса интернеттен алынған мәліметтерді қосамын.

1.1 Тілдің пайда болу тарихыHTML.

Ағылшын Hyper Text Markup Language - World Wide Web-тегі құжаттар үшін стандартты белгілеу тілі. Көптеген веб-беттер HTML (немесе XHTML) көмегімен жасалады. HTML тілі браузер арқылы түсіндіріледі және адам оқи алатын нысанда құжат ретінде көрсетіледі.

HTML — SGML (Standard Generalized Markup Language) қолданбасы («ерекше жағдай») және ISOXHTML халықаралық стандартына сәйкес келеді, ал ол XML қолданбасы.

Британдық Тим Бернерс-Ли шамамен 1991-1992 жж. Женевада, Швейцарияда ядролық зерттеулер жөніндегі Еуропалық кеңесте). HTML макет саласында маман болып табылмайтын адамдардың пайдалануына қолайлы ғылыми-техникалық құжаттамамен алмасу тілі ретінде жасалған. HTML құрылымдық және семантикалық дескрипторлардың шағын жиынтығын анықтау арқылы SGML күрделілігімен сәтті айналысты. Дескрипторларды жиі «тегтер» деп те атайды. МЕН HTML пайдаланусалыстырмалы түрде қарапайым, бірақ әдемі жасалған құжатты оңай жасауға болады. Құжат құрылымын жеңілдетумен қатар, HTML-ге гипермәтінді қолдау қосылды.Мультимедиялық мүмкіндіктер кейінірек қосылды. Бастапқыда HTML тілі көшіру (көрсету) құралдарына байланбай, құжаттарды құрылымдау және пішімдеу құралы ретінде ойластырылған және жасалған. Ең дұрысы, HTML таңбасы бар мәтін әртүрлі техникалық жабдықтары (қазіргі заманғы компьютердің түрлі-түсті экраны, органайзердің монохромды экраны, ұялы телефонның немесе құрылғының шектеулі өлшемді экраны және дауысты ойнатуға арналған бағдарламалар) бар жабдықта стилистикалық және құрылымдық бұрмаланусыз шығарылуы керек. мәтіндер). бірақ заманауи қолданба HTML бастапқы мақсатынан өте алыс.

Уақыт өте келе HTML тілінің платформалық тәуелсіздігінің негізгі идеясы мультимедиялық және графикалық дизайнның заманауи қажеттіліктеріне құрбан болды.

HTML коды бар мәтіндік құжаттар (мұндай құжаттарда дәстүрлі түрде болады ұзарту.htmlнемесе .htm), арнайы әдіспен өңделеді қолданбалар, ол құжатты пішімделген түрде көрсетеді. «Браузерлер» немесе «веб-шолғыштар» деп аталатын бұл қолданбалар әдетте пайдаланушыға ыңғайлы мүмкіндік береді интерфейссұрау үшін желі-беттер, оларды қарау (және басқа сыртқы құрылғыларға шығару) және қажет болған жағдайда пайдаланушы енгізген деректерді серверге жіберу. Бүгінгі таңда ең танымал браузерлер Internet ExplorerMozilla FirefoxсафариGoogle ChromeОпера.

1.2 HTML файлының құрылымы

Web-парақ жасау үшін ең алдымен «htm» немесе «html» кеңейтімі бар файлды жасап, оны мәтіндік редакторда өңдеу үшін ашу керек (Windows жүйесінде жұмыс істейтін стандартты Блокнот бағдарламасын пайдалануға болады).

HTML құжатының мәтіні браузер көрсетуі керек пішінде теріледі және құжатты белгілеуге арналған фрагменттерді (тегтерді) таңдау кезінде бұрыштық жақшалар («» белгілері) қолданылады.

Кез келген HTML құжаты ашылу тегінен басталып, оның сәйкес жабылу тегімен аяқталады. Жабылатын тег ашу тегінен тег атауының алдында қиғаш сызықтың болуымен ерекшеленеді. HTML тілінде тегтерді жазу кезінде бас әріптер мен кіші әріптер арасында айырмашылық жоқ, дегенмен, бастапқы тегті бас әріппен, ал жабу тегін кіші әріптермен жазу әдетке айналған. Құжаттың ашылу тегі мен оның сәйкес жабылу тегінің арасындағы бөлігін контейнер деп атайды (бір нәрсені қамту үшін). Жазбаны жабу және ашу опциялары бар тегтер жұпталған деп аталады, ал тек бір пішінде пайдаланылатын тегтер (мысалы, тег

) жұпталмаған деп аталады. Бүкіл веб-бет файлы негізінен бір үлкен HTML контейнері болып табылады.

HTML контейнерінің ішінде екі контейнер ретімен жазылады:

1. Құжат тақырыбы (). Бұл контейнердің ішінде бүкіл бетке ортақ параметрлер жазылады. Мысалы, мұнда браузер терезесінің тақырып жолында көрсетілетін мәтінді қоюға мүмкіндік беретін контейнер қоюға болады.

2. Құжат органы (). Бұл контейнерде құжат ашылған кезде браузер өз терезесінде көрсетуі керек нәрсенің барлығы бар. Егер құжатта тек мәтін болса, онда басқа элементтер (сызбалар, кестелер, сілтемелер және т.б.) болса, бұл мәтін осында жазылуы керек. BODY элементі құжатта ең көбі бір рет пайда болуы керек.

Әртүрлі Web-беттердің бастапқы мәтіндерін салыстырсаңыз, олардың құрылымдарының ұқсастығын оңай көруге болады. Себебі, құжаттар белгілі бір ережелер бойынша жасалады. HTML тілінің синтаксисі ISO 8879:1986 «Ақпаратты өңдеу. Мәтіндік және офистік жүйелер. Стандартты жалпыланған белгілеу тілі (SGML)». Рас, ресми стандарт пен нақты стандарттың арасында үлкен айырмашылық бар.

Төменде әдеттегі веб-құжатқа арналған үлгі берілген. Оның мысалында HTML беттерін құрудың жалпы принциптерін қарастырамыз.

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

бастапқы

құжат органы

Жоғарыда келтірілген мысал схемалық түрде түсіндірілсе, ол келесідей болады:

Диаграммадан құжаттың екі негізгі блоктан – «тақырып» және «құжат корпусынан» тұратынын көруге болады. Тақырып HEAD элементімен, ал негізгі мәтін BODY элементімен анықталады.

Тақырып құжат туралы «техникалық» ақпаратты қамтиды, бірақ ол көбінесе оның тақырыбын көрсету үшін ғана қолданылады (ТАҚЫРЫП элементін қараңыз).

Құжаттың негізгі бөлігі ең маңызды бөлігі болып табылады. Онда бетте көрсетілетін барлық нәрсе орналасқан: мәтін, суреттер, кестелер.

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

Құжаттың басына қатысты элементтер:

HEAD – құжат тақырыбының басы мен соңын анықтайды. Бұл құжат туралы техникалық ақпаратты қамтитын элементтерге арналған контейнер.

TITLE – браузер терезесінің тақырыбында көрсетілетін бүкіл құжаттың атын көрсетеді. Атау әдетте браузер терезесінің тақырып жолында көрсетіледі. Бұл элемент кез келген HTML құжаты үшін қажет және оны бір реттен көп емес көрсетуге болады.

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

1.3. Негізгі HTML тегтерінің тізімдері

Веб-беттің мәтінін қалыптастыру үшін қажетті негізгі HTML тегтерінің тізімі.

Сондай-ақ қалың және курсив сияқты әр түрлі стильдерді біріктіруге болады.

Қосымша стильдер:

1.4. Кестелерді құруHTML.

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

Негізгі кесте тегтері

Бұл кестені сипаттайтын негізгі тегтер. Барлық кесте элементтері осы екі тегтің ішінде болуы керек. Әдепкі бойынша кестеде жиектер немесе бөлгіштер жоқ. Жиек BORDER атрибутымен қосылады.

Кесте жолы:

Кесте жолдарының саны пайда болған тегтер жұптарының санымен анықталады.

Кесте ұяшығы:

Стандартты кесте ұяшығын сипаттайды. Кесте ұяшығын тек кесте жолында сипаттауға болады. Әрбір ұяшық ол сипатталған бағанның нөмірімен нөмірленуі керек. Кейбір бағандар үшін жолда бір немесе бірнеше ұяшықтар жоқ болса, шолғыш бос ұяшықты көрсетеді. Ұяшықтағы деректердің әдепкі орны ALIGN=left және VALIGN=middle атрибуттары арқылы анықталады. Бұл орынды жолды сипаттау деңгейінде де, ұяшық сипаттамасы деңгейінде де түзетуге болады.

Кесте тақырыбы:

Кесте тақырыбының ұяшығы – бүкіл кестенің ені; бұл ұяшықтағы мәтінде BOLD және ALIGN=center төлсипаты бар.

Қолы:...

Бұл тег кестенің атын сипаттайды. Тег ішінде болуы керек

Кестенің негізгі атрибуттары

BORDER – бұл атрибут TABLE тегінде қолданылады. Бұл төлсипат бар болса, кесте шекарасы барлық ұяшықтар үшін және тұтас кесте үшін сызылады. BORDER шекараның енін көрсететін сандық мәнді қабылдай алады, мысалы, BORDER=3.

ALIGN - ALIGN атрибуты және тегтерінің ішінде болса, онда ол кестеге арналған тақырыптың орнын көрсетеді (жоғарғы немесе төменгі). Әдепкі ALIGN=жоғарғы.
ALIGN атрибуты ішінде орын алса

VALIGN - бұл төлсипат тегтерде орын алады

NOWRAP - бұл төлсипат ұяшықтағы деректерді логикалық түрде бірнеше жолға бөлуге болмайтынын және бір жолмен көрсетілуі керек екенін көрсетеді.

COLSPAN - көрсетілген ұяшық үшін көлденеңінен қанша ұяшық біріктірілетінін көрсетеді. Әдепкі мәні 1.

ROWSPAN - көрсетілген ұяшық үшін қанша ұяшық тігінен біріктірілетінін көрсетеді. Әдепкі мәні 1.

COLSPEC - Бұл параметр белгіленген баған енін таңбалармен немесе пайызбен орнатуға мүмкіндік береді, мысалы, COLSPEC="20%".

1.5. Гипермәтіндік сілтемелер.

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

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

Гиперсілтемелерді жасау үшін келесі тегтер қолданылады

2. «Садақ ату» сайтының құрылуына сипаттама.

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

Фон түсі (сұр), шрифт түсі (қара, қызыл және т.б.) орнатылды, сур. бір; қаріп өлшемі, басқа беттерге гиперсілтемелер де кесте түрінде жоғарғы жағында жасалды:

жеке және

командалық есеп, әйелдер және ерлер командалары, 1972 жылдан бастап....

(Cурет 3)

4-суретте дәптер көрсетілген, онда 2 бет жасалған, атап айтқанда «Шығу көзі», фон түсі, шрифт түсі, шрифт өлшемі де орнатылған (4-сурет), басқаларға кесте түрінде өзгермеген гиперсілтемелер жасалған. беттер:

(5-сурет)

сонымен қатар мәтіннің қажетті бөлімдері бойынша:

3 бет жасалған дәптер, атап айтқанда «Ең үлкен жарыстар»

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

7-суретте 4 бет жасалған дәптер көрсетілген, атап айтқанда «Түгендеу»

Барлық параметрлер алдыңғы беттердегідей болды, абзац тақырыптарының атауларымен гиперсілтемелер қосылды, басқан кезде сіз беттің қажетті бөліміне тікелей өтесіз (7-сурет)

8-суретте 5-бет жасалған дәптер, атап айтқанда «Ережелер» көрсетілген; параметрлер өзгерген жоқ, алдыңғы беттегідей гиперсілтемелер қосылды

жақсы

9-суретте 6-бет жасалған блокнот, атап айтқанда «Олимпиадалық ойындардың жеңімпаздары» көрсетілген, онда барлық алдыңғы параметрлер сақталған, бірақ деректері бар кестелер қосылған.

Қорытынды.

Бұл жұмыс барысында мен HTML тілін пайдаланып веб-сайт құруды үйрендім және бұл үшін өз жұмысымда сипатталған қажетті алгоритмдерді қолдандым.

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

Библиография:

1.http://html.find-info.ru/html/

2.http://scriptic.narod.ru/html/

3. http://html.manual.ru/book/html/

Жақсы жұмысыңызды білім қорына жіберу оңай. Төмендегі пішінді пайдаланыңыз

Білім қорын оқу мен жұмыста пайдаланатын студенттер, аспиранттар, жас ғалымдар сізге алғыстары шексіз.

• • Кіріспе
  • 1. Негізгі ақпарат
  • 1.1 HTML тілі туралы
  • 1.2 Веб-сайт жасау
  • 1.3 Негіздер
  • 1.4 Құжат құрылымы
  • 1.5 Құжат негізгі тегтері
  • 1.6 Негізгі html тегтерінің тізімі
  • 2. Қосымша ақпарат
  • 2.1 Тізім тегтері
  • 2.2 Гипермәтіндік сілтемелер
  • 2.3 Құжат ішіндегі графика
  • 2.4 Құжатқа стильдер қосу
  • 2.5 Арнайы html тегтері
  • 2.6 Html пішіндері
  • 2.7 Html жақтаулары
  • 2.8 Html кестелері
  • 2.9 Веб үшін графиканы оңтайландыру
  • 2.10 CSS негіздері
  • 3. Сайтты құрудың сипаттамасы
  • 3.1 Дайындық
  • 3.2 Негізгі бетті құру
  • 3.3 Екінші бетті құру
  • 3.4 Қаланың сипаттамасы бетін құру
  • 3.5 Фотосурет беті
  • 3.6 Бағдарлама беті
  • 3.7 Рахмет беті
  • Қорытынды
  • Пайдаланылған әдебиеттер тізімі

Кіріспе

Бұл дипломдық жұмыс HTML тіліне арналған. Бұл тіл Web беттері болып табылатын *.htm және *.html файлдарын жасайды. Олар интернет сайттарынан тұрады.

Дипломдық жұмысқа сайт қоса беріледі, мысалы HTML тілі арқылы не жасауға болады.

Барлық жұмыстар 3 бөлімге бөлінген. Бірінші бөлім толығымен негізгі HTML тегтерін сипаттауға арналған. Онда сіз қарапайым веб-беттерді жасау туралы барлық қажетті ақпаратты таба аласыз. Екінші бөлімде құжаттың сыртқы түрін жақсарту және ендіру туралы ақпарат бар қосымша мүмкіндіктер. Үшінші бөлімде сайттың бұған қалай қосылғаны туралы сипаттама бар дипломдық жұмыс. Ол сайтты құрудағы бір жарым айлық қажырлы жұмысты егжей-тегжейлі сипаттайды, құрудағы және оларды түзетудегі әртүрлі қателер туралы, туындаған қиындықтар мен оларды жою әдістері туралы айтады.

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

1. Негізгі ақпарат

1.1 ОтілHTML

Hyper Text Markup Language (HTML) – WEB ортасында гипермәтіндік құжаттарды жасауға арналған стандартты тіл. HTML құжаттарын көруге болады әртүрлі түрлерівеб-шолғыштар. Құжатты жасау кезінде HTML пайдалану, WEB браузері құжаттың әртүрлі элементтерін шығарып алу және алдымен оларды өңдеу үшін HTML тілін түсіндіре алады. HTML пайдалану құжаттарды оларды қарайтын кез келген жүйеде қаріптерді, сызықтарды және басқа графикалық элементтерді пайдаланып көрсету үшін пішімдеуге мүмкіндік береді.

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

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

HTML тегтерін шамамен екі санатқа бөлуге болады:

1. Жалпы құжаттың негізгі бөлігі WEB браузері арқылы қалай көрсетілетінін анықтайтын тегтер.

2. Құжаттың тақырыбы немесе авторы сияқты құжаттың жалпы қасиеттерін сипаттайтын тегтер.

HTML тілінің басты артықшылығы құжатыңызды веб-шолғыштар мен платформалардың көптеген түрлерінде көруге болатынын есте сақтаңыз.

1.2 Жасаужелісайт

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

Мысалы, Netscape-тің «Netscape Navigator Gold» сияқты HTML редакторлары WYSIWYG (What You See Is What You Get) технологиясының көмегімен графикалық түрде құжаттарды жасауға мүмкіндік береді. Екінші жағынан, құжаттарды жасаудың дәстүрлі құралдарының көпшілігінде құжаттарды HTML пішіміне түрлендіруге мүмкіндік беретін түрлендіргіштер бар.

1.3 Негізгіережелері

Барлық HTML тегтері "мен басталады"<" (левой угловой скобки) и заканчиваются символом ">" (тік бұрышты жақша). Әдетте, бастау тегі және аяқталу тегі болады. Мысалы, мұнда бастапқы және аяқталу тегіндегі мәтінді анықтайтын және құжат тақырыбын сипаттайтын бас тегтері берілген:

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

Кейбір тегтер ұнайды

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

HTML тегті сипаттайтын таңбалар үшін регистрді ескермейді және жоғарыдағы мысал келесідей болуы мүмкін:

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

ЖӘНЕ

Төменде жазылады.

1.4
Құрылымқұжат
Веб-шолғыш құжатты алған кезде құжатты қалай түсіндіру керектігін анықтайды.  Құжаттағы ең бірінші тег тег болуы керек .  Бұл тег веб-шолғышқа құжатыңыз HTML көмегімен жазылғанын айтады.  Минималды HTML құжаты келесідей болады:
Құжат нысаны...
Құжаттың тақырыбы .  Құжат тақырыбы тегі тегтен кейін бірден қолданылуы керек және құжаттың негізгі бөлігінде басқа еш жерде жоқ.  Бұл тег құжаттың жалпы сипаттамасы болып табылады.  Тегтің ішіне кез келген мәтінді қоюдан аулақ болыңыз .  Бастау тегі тегтің алдына тікелей қойылады 
Назар аударыңыз!  Техникалық тұрғыдан бастау және аяқтау типті тегтер , және міндетті емес.  Бірақ оларды пайдалану қатаң түрде ұсынылады, өйткені бұл тегтерді пайдалану WEB браузеріне құжаттың тақырып бөлігін және семантикалық бөлігін сенімді түрде бөлуге мүмкіндік береді.
Құжат атауы , ішінде орналасқан -тегтер, жоғарыдағы мысалда көрсетілгендей.  Құжаттың өзі терезеде көрсетілгенде құжаттың тақырыбы көрсетілмейді.
Пікірлер.  Кез келген тіл сияқты HTML тілі құжаттың негізгі бөлігіне түсініктемелерді енгізуге мүмкіндік береді, олар құжат желі арқылы тасымалданған кезде сақталады, бірақ браузерде көрсетілмейді.  Түсініктеме синтаксисі:

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

Құжат негізгі тегтері терезеде көрсетілетін HTML құжатының құрамдастарын анықтайды.  Құжат мәтінінде басқа құжаттарға, мәтінге және басқа пішімделген ақпаратқа сілтемелер болуы мүмкін.
Құжат органы .  Құжаттың негізгі бөлігі тегтердің арасында болуы керек және.  Бұл құжаттың мәтіндік және графикалық (семантикалық) ақпараты ретінде көрсетілетін құжат бөлігі.
Тақырып деңгейлері .  HTML құжаты жазылған кезде мәтін құрылымдық жағынан қарапайым мәтінге, мәтін бөліктерінің тақырыптарына, жоғары деңгейдегі тақырыптарға және т.б.  Тақырыптардың бірінші деңгейі (ең үлкені) 1, келесісі 2 және т.б.  Браузерлердің көпшілігі тақырыптардың алты деңгейінің интерпретациясын қолдайды, әр тақырыпқа өзіндік стиль береді.  Алтыншы деңгейден жоғары тақырыптар стандартты емес және шолғышта қолдау көрсетілмеуі мүмкін.  Ең жоғарғы деңгейдің тақырыбында «1» белгісі бар.  1-деңгей тақырыбының синтаксисі келесідей:
Бірінші деңгей тақырыбы
Басқа деңгейдегі тақырыптар жалпы жағдайда келесідей ұсынылуы мүмкін:
Тақырып x-ші деңгей
мұндағы x - тақырып деңгейін көрсететін 1-ден 6-ға дейінгі сан.
абзац тегі 
Көпшілігінен айырмашылығы мәтіндік процессорлар, HTML құжатында каретканы қайтару әдетте еленбейді.  Физикалық абзац үзілімі құжаттың бастапқы мәтінінің кез келген жерінде болуы мүмкін (оқуға ыңғайлы болу үшін).  Дегенмен, браузер тек тег болған жағдайда ғана абзацтарды бөледі 
Егер сіз абзацтарды тегпен бөлмесеңіз 
Сіздің құжатыңыз бір үлкен абзацқа ұқсайды.
Қосымша тег параметрлері 
Абзацты сәйкесінше солға, ортаға және оңға туралауға мүмкіндік беріңіз.
Құжат элементтерін орталықтандыру.  Барлық құжат элементтерін шолғыш терезесінде ортаға қоюға болады.  Бұл үшін тегті пайдалануға болады. 
.

Тегтер арасындағы барлық элементтер 
жәнетерезенің ортасында болады.

алдын ала пішімдеу тегі 
алдын ала пішімдеу тегі, 
Экранда нақты пішімдеу бар мәтінді көрсетуге мүмкіндік береді.  Алдын ала пішімделген мәтін аяқталу тегімен аяқталады
.  Алдын ала пішімделген мәтіннің ішінде мыналарды пайдалануға болады:

а) жолды беру
б) қойынды таңбалары (8 таңбаны оңға жылжытыңыз)
в) браузер орнатқан пропорционалды емес шрифт.
сияқты абзац пішімін анықтайтын тегтерді пайдалану немесе 
, тегтер арасында орналастырылған кезде браузер еленбейді 

  


Бұл тізімде тегі, аты және әкесінің аты бар.
біздің компанияның барлық қызметкерлері. 





Тізімді тек ресми мақсаттарда пайдалануға болады.
Назар аударыңыз!  «Қызметкерлер тізімі» айдары құжаттың бөлігі ретінде браузерде көрсетілмейді.  Ол браузер терезесінің тақырып жолында пайда болады.
Жол үзілімі 
.  Тег 
шолғышқа жол үзілімі туралы хабарлайды.  Бұл тегті пайдаланудың ең жақсы мысалы - пішімделген мекенжай немесе браузер оларды бірінің астынан көрсетуі қажет кез келген басқа жолдар тізбегі.  Мысалы:
Алексей Ярцев 
Дмитров тас жолы, 
9В, 326 кабинет 

Қосымша параметр тегтің мүмкіндіктерін кеңейтуге мүмкіндік береді 
.


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

Үзілмейтін сызық .  Браузердің жолды автоматты түрде орауын қаламасаңыз, онымен тег қоюға болады және.  Бұл жағдайда браузер экраннан шығып кетсе де жолды орамайды;  оның орнына браузер терезені көлденеңінен айналдыруға мүмкіндік береді.  Мысалы: бұл еш жерде бөлінуге жол бермейді
Егер сіз әлі де бұл жолды екіге бөлуге рұқсат бергіңіз келсе, бірақ қатаң жоспарланған жерде, тегті енгізіңіз. осы жерге.  Мысалы: Бұл жол құжаттағы ең ұзын жол болып табылады. бұл еш жерде бөлінуге жол бермейді
Бұл жол құжаттағы ең ұзын жол болып табылады.
ол ешбір жерде ешқандай бөлімді қабылдамайды.
Дәйексөз 
.  Бұл тег құжатта басқа көзден алынған дәйексөзді көрсетуге арналған.  Мәтін тегпен белгіленген 
, құжаттың сол жақ шетінен 8 бос орынға шегініс.  Мысалы: Осы конференцияның ашылуында миссия басшысы: 
 
Бүгін біздің компания үшін ең керемет күндердің бірі. 
Біз тұтынушыларымызға жұмыс үстелі жүйелерінің өнімділігін бірнеше есе арттыруға мүмкіндік беретін жаңа технологияны таптық.

Браузер көрсеткенде, бұл мәтін келесідей болады:
Осы конференцияның ашылуында миссия басшысы:
Бүгін біздің компания үшін ең керемет күндердің бірі.  Біз тұтынушыларымызға жұмыс үстелі жүйелерінің өнімділігін бірнеше есе арттыруға мүмкіндік беретін жаңа технологияны таптық.

1.6
ТізімнегізгітегтерHTML

№1 кесте: Негізгі тегтер

Басталуы


финал


Сипаттама








HTML құжатының белгіленуі








Құжаттың тақырыбы








Құжат атауы








Құжат органы








Бірінші деңгейдегі абзац тақырыбы








Екінші деңгейдегі абзац тақырыбы








Үшінші деңгейдегі абзац тақырыбы








Төртінші деңгейдегі абзац тақырыбы








5-деңгейдегі абзац тақырыбы








6-деңгейдегі абзац тақырыбы
















Пішімделген мәтін








Абзацтың соңы жоқ жол үзілімі











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

2.1
Тегтертізімдер


HTML құжатында тізімдердің үш негізгі түрі бар:
а) нөмірленген
б) нөмірленбеген
в) сипаттамалар тізімі
Сіз кірістірілген тізімдерді әртүрлі тізім тегтерін пайдалану арқылы немесе бірін бірінің ішінде қайталау арқылы жасай аласыз.  Мұны істеу үшін сізге тек бір жұп тегтерді (бастау және аяқталу) екіншісіне орналастыру керек.  Кірістірілген тізім элементтерінің тізім элементін көрсететін бірдей таңбалауыштары болуы браузерге байланысты.  Қосымша мәліметтер алу үшін «Кірістірілген тізімдер» бөлімін қараңыз.
Нөмірленген тізімдер.  Нөмірленген тізімде браузер автоматты түрде элемент нөмірлерін ретімен кірістіреді.  Бұл нөмірленген тізімнің бір немесе бірнеше элементтерін жойсаңыз, қалған сандар автоматты түрде қайта есептелетінін білдіреді.
 
және тегпен аяқталады
 
.  Мысалы:

 
Бағдарламалау 
Алгоритмдеу 
Дизайн

1. Бағдарламалау
2. Алгоритмдеу
3. Дизайн
Тег 
опциялары болуы мүмкін:


Есептегіш түрі:
A - бас латын әріптері (A,B,C...)
a - кішкентай латын әріптері (a,b,c...)
I - үлкен рим сандары (I,II,III...)
i - кіші рим сандары (i,ii,iii...)
1 - қалыпты сандар (1,2,3...)
Санау басталатын сан
Мысалы:
 
Бағдарламалау 
Алгоритмдеу 
Дизайн

XV.  Бағдарламалау
XVI.  Алгоритмдеу
XVII.  Дизайн.
Нөмірі жоқ тізімдер.  Реттелмеген тізімдер үшін шолғыш әдетте тізім элементін белгілеу үшін маркерлерді пайдаланады.  Маркердің сыртқы түрін, әдетте, браузердің пайдаланушысы конфигурациялайды.
Нөмірленген тізім бастау тегінен басталады 
және тегпен аяқталады
.  Тізімнің әрбір элементі тегтен басталады 
.  Мысалы:

 
Бағдарламалау 
Алгоритмдеу 
Дизайн

· Бағдарламалау
Алгоритмдеу
· Дизайн
Тег 
параметрі болуы мүмкін:


Тег түрі 
маркердің сыртқы түрін әдепкі (диск), дөңгелек (шеңбер) немесе шаршы (шаршы) ретінде анықтайды.  Мысалы:

 
Бағдарламалау 
Алгоритмдеу 
Дизайн

§ Бағдарламалау
§ Алгоритмдеу
§ Дизайн
кірістірілген тізімдер.  Кірістірілген тізімдерге мысал келтірейік:
     
Біздің компанияның қызметкерлерінің тізімі
 
Құрастырған: 30 шілде 1996 ж
Бұл тізімде біздің компанияның барлық қызметкерлерінің тегі, аты және әкесінің аты бар. 
Тізімді тек ресми мақсаттарда пайдалануға болады. 
 
 
дирекция 
 
Иванов И.И. 
Петров К.В.
 
Маркетинг бөлімі 
 
Варшавская Е.Л. 
Самсонов Д.М.
 
  

Браузер экранында мынаны көресіз:
Біздің компанияның қызметкерлерінің тізімі

Бұл тізімде біздің компанияның барлық қызметкерлерінің тегі, аты және әкесінің аты бар.
Тізімді тек ресми мақсаттарда пайдалануға болады.
1. Дирекция
o Иванов И.И.
o Петров К.В.
2. Маркетинг бөлімі
o Варшавская Е.Л.
o Самсонов Д.М.
Тізім элементі 
.

Тег 
опциялары болуы мүмкін:

немесе 

элементтің қандай тізімде екеніне байланысты.
Маркер түрі (қараңыз 
) немесе есептегіш (OL қараңыз)

Нөмірленген тізім элементінің мәні (оның нөмірі).  Тізім элементтерінің барлық келесі нөмірлері осы саннан есептеледі.
Мысалы:
 
Бағдарламалау 
Алгоритмдеу 
Дизайн

XV.  Бағдарламалау
XVI.  Алгоритмдеу
XVII.  Дизайн
Анықтамалар тізімі.
Анықтамалар тізімі тегтен басталады 
және тегпен аяқталады
.  Бұл тізім «термин» - «сипаттама» типті тізімдерді құру үшін қолданылады.  Әрбір термин тегтен басталады 
, ал сипаттама тег болып табылады 
.  Мысалы:

 
 Маркетинг бөлімі 
  
 Қаржы бөлімі 
  
 Кадрлар бөлімі 
  

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

Гипермәтіндік сілтемелер WEB-ті пайдаланушылар үшін тартымды ететін негізгі компонент болып табылады.  Гипермәтіндік сілтемелерді (бұдан әрі - сілтемелер) қосу арқылы сіз пайдаланушыға қажетті ақпаратты мүмкіндігінше тез және ыңғайлы түрде алуға мүмкіндік беретін байланысты және құрылымдалған құжаттар жинағын жасайсыз.
Сілтемелердің стандартты пішімі бар, ол браузерге оларды түсіндіруге және сілтеме түріне байланысты қажетті функцияларды (шақыру әдістері) орындауға мүмкіндік береді.  Сілтемелер басқа құжатты, берілген құжаттағы белгілі бір орынды меңзей алады немесе браузер арқылы көрсету үшін FTP арқылы файлды сұрау сияқты басқа функцияларды орындай алады.  URL мекенжайы абсолютті жолдағы белгілі бір орынды немесе үлкен, құрылымдық веб-сайттарды ұйымдастыру кезінде жиі қолданылатын ағымдағы жолдағы құжатты көрсетуі мүмкін.
Назар аударыңыз!  Сілтемелерді құжат ішінде шарлау үшін де, бір құжаттан екіншісіне жылжыту үшін де пайдалануға болады.  Дегенмен, жылжыту құжат ішінде болса, HTML алдыңғы сілтемеге қайтаруды қолдамайды.  Құжат ішінде сілтемелерді қолданып, содан кейін Артқа пернесін бассаңыз, сіз алдыңғы сілтемеге өтпейсіз, бірақ құжаттың бұрын көрген бөлігіне ораласыз.
URL.  HTML HTML құжатындағы гипермәтіндік сілтемелер мен веб-қызметтерге сілтемелерді көрсету үшін URL мекенжайын (Бірыңғай ресурстарды анықтау құралы) пайдаланады.  URL мекенжайының бірінші бөлігі (қос нүктенің алдында) кіру әдісін немесе желі қызметін сипаттайды.  URL мекенжайының басқа бөлігі (қос нүктеден кейін) қатынас әдісіне байланысты түсіндіріледі.  Әдетте қос нүктеден кейінгі екі қиғаш сызық машинаның атын көрсетеді:
әдіс://машина аты/жол/foo.html
Келесі мысал HTTP протоколы арқылы www.softexpress.com серверінен index.html HTML құжатына шақыру болып табылады:
http://www.softexpress.com/index.html
Бірыңғай ресурс локаторында келесі пішім бар:
әдіс://сервер аты:порт/жол аты#зәкір
URL құрамдастарының әрқайсысын сипаттап көрейік:
ӘДІС.  Берілген URL мекенжайын интерпретациялау кезінде орындалатын операцияның атауы.  Ең жиі қолданылатын әдістер:
жергілікті дискіден файлды оқу.  Файл атауы пайдаланушының жергілікті машинасы үшін түсіндіріледі.  Бұл әдіс пайдаланушының машинасында орналасқан кез келген файлды көрсету үшін қолданылады.  Мысалы: file:/home/alex/index.html - пайдаланушының машинасындағы /home/alex каталогындағы index.html файлын көрсетеді.
HTTP протоколы арқылы желідегі WEB бетіне кіру.  (Бұл вебтегі кез келген HTML құжатына қол жеткізудің ең жиі қолданылатын әдісі.)  Мысалы: http://www.softexpress.com/ - SoftExpress негізгі бетіне кіру
анонимді FTP серверінен файл сұрауы.  Мысалы: ftp://hostname/directory/filename
көрсетілген пайдаланушымен және хостпен пошта сеансын белсендіреді.  Мысалы: mailto: [электрондық пошта қорғалған]- браузер электрондық поштаны қолдайтын болса, softexpress.com құрылғысындағы ақпарат пайдаланушыға хабарлама жіберу сеансын белсендіреді.  Mailto: әдісі қос нүктеден кейін қиғаш сызықтарды қажет етпейтінін ескеріңіз (әдетте, жазылушының электрондық пошта мекенжайы қос нүктеден кейін бірден тұрады)
telnet қызметіне қоңырау шалыңыз
шолғыш қолдаса, жаңалықтар қызметіне қоңырау шалу.  Мысалы: news:relcom.www.support
СЕРВЕР АТЫ.  Құрылғының толық жарамды желі атауын сипаттайтын қосымша параметр.  Мысалы: www.softexpress.com - SoftService серверінің толық желі атауы.
Егер сервер атауы көрсетілмесе, онда сілтеме жергілікті болып саналады және URL мекенжайында әрі қарай көрсетілген толық жол осы сілтемені қамтитын HTML құжаты алынған құрылғыда есептеледі.  Символдық машина атауының орнына IP мекенжайын пайдалануға болады, бірақ бұл ішкі желідегі тіркелген жергілікті мекенжайлармен қабаттасу мүмкіндігіне байланысты ұсынылмайды.
ПОРТ.  WEB сервері жұмыс істейтін TCP портының нөмірі.  Егер порт көрсетілмесе, "әдепкі" порт 80 болады. Бұл параметр (порт) URL мекенжайларының басым көпшілігінде пайдаланылмайды.
PATHNAME.  URL мекенжайын интерпретациялау нәтижесінде шақырылатын құжатқа жартылай немесе толық жол.  Әртүрлі WEB серверлері құжат жолын түсіндіру үшін әртүрлі конфигурацияланады.  Мысалы, CGI сценарийлерін (орындалатын бағдарламалар) пайдаланған кезде олар әдетте бір немесе бірнеше арнайы каталогтарда жиналады, олардың жолы WEB серверінің арнайы параметрлерінде жазылады.  Бұл каталогтар үшін WEB сервері URL мекенжайында қолданылатын арнайы логикалық жолды бөледі.  Егер WEB сервері осы жолды көрсе, онда сұралған файл орындалатын модуль ретінде түсіндіріледі.  Әйтпесе, сұралған файл орындалатын файл болса да, жай деректер файлы ретінде түсіндіріледі.  Мысалы: http://www.softexpress.com/cgi-win/handle.exe
Бұл мысалда HTTP сервері www.softexpress.com желі атауы бар құрылғыда орналасқан handle.exe деп аталатын CGI сценарийін шақыруы керек.  Бұл сценарийге жол - /cgi-win/ - шын мәнінде виртуалды жол (орындалатын модульдер үшін сервер арнаған).  Жолдың сипаттамасы DOS және Windows жүйесіне қарағанда кері қиғаш сызықтардың орнына алға қиғаш сызықтар қолданылатын UNIX тәрізді синтаксисті пайдаланатынын ескеріңіз.  Егер машинаның желілік атауынан кейін бірден құжат атауы болса, онда ол қашықтағы машинадағы түбірлік каталогта немесе (көбірек) WEB сервері түбір ретінде бөлінген каталогта орналасуы керек.  Егер URL мекенжайы машинаның желі атауымен аяқталса, құжат WEB серверінің параметрлерінде көрсетілген атаумен қашықтағы машинаның түбірлік каталогынан сұралады (әдетте, бұл index.html).
#АНХОР.  Бұл элемент HTML құжатындағы жолға (нүктеге) сілтеме болып табылады.  Көптеген браузерлер бұл элементті құжат атауынан кейін кездестіріп, құжатты экранға құжаттың көрсетілген жолы браузердің жұмыс терезесінің жоғарғы жолында орналасатындай етіп орналастырады.  #anchor арқылы сілтеме жасалған якорьлер төменде сипатталғандай NAME тегін пайдаланып құжатта көрсетілген.
HTML құжатындағы сілтеме құрылымы.  Әзірге біз URL мекенжайының сыртқы түрін ғана қарастырдық.  Браузер URL мекенжайына сілтемені көрсетуі үшін HTML құжатында URL мекенжайын арнайы тегтермен белгілеу қажет.  Мұны істеу үшін HTML синтаксисі келесідей:
сілтеме ретінде бөлектелетін мәтін
Тег сілтеменің сипаттамасын ашады, ал тег оны жабады.  Осы екі тегтің арасындағы кез келген мәтін веб-шолғыш арқылы ерекше түрде бөлектеледі.  Әдетте, бұл мәтін көк (немесе басқа пайдаланушы көрсеткен) түспен асты сызылған және бөлектелген болып шығады.  URL мекенжайын білдіретін мәтінді шолғыш көрсетпейді, бірақ сілтеме белсендірілген кезде (әдетте тінтуір бөлектелген немесе асты сызылған мәтінді басқанда) оның жоспарланған әрекеттерін орындау үшін ғана пайдаланылады.  Мұнда HTML құжат сегментінің мысалы келтірілген:
Мысал үшін қараңыз Браузердің бірінші жолында көрсетілетін мәтін

Мәтін
Мысалы:
Бөлім тізімі
 
 
1-бөлім
 
2-бөлім
 
 
1-бөлім
 
 
1-бөлім мәтіні
 
 
2-бөлім
 
 
2-бөлім мәтіні 

Бөлім тізімі
o 1-бөлім
o 2-бөлім
1-бөлім мәтіні
2-бөлім мәтіні
"#ex1" таңбалары браузерге берілген HTML құжатында "ex1" деп аталатын маркерді іздеуді ұсынады.
Пайдаланушы «1-бөлім» жолын басқанда, шолғыш тікелей 1-бөлімге өтеді.
Назар аударыңыз!  Бұрын URL синтаксисінде көрсетілгендей, бөлім маркерін қазір қаралып жатқан құжатқа немесе басқа құжатқа орналастыруға болады.  Екінші жағдайда, браузер басқа құжатты жүктеп, ол үшін көрсетілген бөлімге өтеді.
2.3
Графикаішіндеқұжат
Web-тің ең тартымды мүмкіндіктерінің бірі - HTML құжатында графикалық және басқа деректер түрлеріне сілтемелерді қосу мүмкіндігі.  Бұл тегтің көмегімен жасалады .  Бұл тегті пайдалану құжаттардың сыртқы түрі мен функционалдығын айтарлықтай жақсарта алады.
HTML құжаттарында графиканы қолданудың екі жолы бар.  Біріншісі – графиканы құжатқа енгізу, ол пайдаланушыға кескіндерді құжаттың басқа элементтерінің контекстінде тікелей көруге мүмкіндік береді.  Бұл құжатты жобалауда жиі қолданылатын әдіс, оны кейде «кіріктірілген кескін» деп те атайды.  Тег синтаксисі:

Тег синтаксисінің элементтерін сипаттайық:
Стандартты URL мекенжайымен бірдей синтаксисі бар қажетті параметр.  Бұл URL браузерге кескіннің қай жерде орналасқанын көрсетеді.  Сурет браузер қолдайтын графикалық пішімде сақталуы керек.  Бүгінгі таңда GIF және JPG пішімдерін көптеген браузерлер қолдайды.
Бұл қосымша элемент графиканы қолдамайтын немесе кескін пейджингі өшірілген браузер арқылы көрсетілетін мәтінді көрсетеді.  Әдетте, бұл пайдаланушы экранда көре алатын немесе көре алатын кескіннің қысқаша сипаттамасы.  Егер бұл параметр жоқ болса, онда суреттің орнына көптеген шолғыштар пиктограмманы (белгішені) көрсетеді, оны іске қосу арқылы пайдаланушы суретті көре алады.  Егер пайдаланушылар Lynx сияқты графикалық режимді қолдамайтын шолғышты пайдаланса, ALT тегі ұсынылады.
Бұл қосымша параметр суреттің биіктігін пикселдерде көрсету үшін пайдаланылады.  Бұл параметр көрсетілмесе, суреттің бастапқы биіктігі пайдаланылады.  Бұл опция кескіндерді тігінен кішірейтуге немесе созуға мүмкіндік береді, бұл құжаттың көрінісін нақтырақ анықтауға мүмкіндік береді.  Дегенмен, кейбір браузерлер бұл опцияны қолдамайды.  Екінші жағынан, клиенттің экран ажыратымдылығы сіздікінен өзгеше болуы мүмкін, сондықтан графиканың абсолютті мәнін орнатқанда абай болыңыз.
Параметр де алдыңғы сияқты міндетті емес.  Суреттің абсолютті енін пикселдерде орнатуға мүмкіндік береді.
Бұл параметр браузерге мәтіннің келесі блогын қайда орналастыру керектігін айту үшін пайдаланылады.  Бұл экрандағы элементтердің орналасуын қатаңырақ көрсетуге мүмкіндік береді.  Егер бұл опция пайдаланылмаса, онда браузерлердің көпшілігі кескінді экранның сол жағына, ал мәтінді оның оң жағына орналастырады.
Бұл параметр браузерге бұл кескін пайдаланушыға кескіндегі белгілі бір орынды басу арқылы кейбір әрекеттерді орындауға мүмкіндік беретінін айтады.  Бұл мүмкіндік HTML кеңейтімі болып табылады және кейінірек талқыланады.
Бұл тегті пайдаланудың мысалы:

HTML 2.0-ден бастап тег бар қосымша опциялар қосылды:

Жаңа опциялар:

Мәтін суреттің үстінен өтпеуі үшін суреттің үстіндегі және астындағы ақ кеңістіктің өлшемін пиксельдермен орнатуға мүмкіндік береді.  Бұл құжатты алдын ала көру мүмкін болмаған кезде динамикалық түрде жасалған кескіндер үшін өте маңызды.
VSPACE сияқты, бірақ тек көлденең.
Фондық суреттер.  Көптеген шолғыштар құжатқа матрицаланатын және бүкіл құжаттың алдында көрсетілетін фондық суретті қосуға мүмкіндік береді.  Кейбір пайдаланушыларға фондық графика ұнайды, ал кейбіреулері ұнамайды.  Көзге көрінбейтін мөлдір сурет (тұсқағаз) әдетте көптеген құжаттар үшін фон ретінде жақсы көрінеді.
Фондық кескіннің сипаттамасы BODY тегінде қамтылған және келесідей көрінеді:
.


мұндағы параметрлердің әрқайсысы бір немесе басқа элементтің түсін анықтайды.  Осы параметрлерді сипаттайық:
Құжат фонының түсі
Құжаттың кәдімгі мәтін түсі


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

Тег пішімі:
саны|пайыз ALIGN=left|оңға|ортаға NOSHADE>

Тег опциялары:
Пиксельдегі сызық қалыңдығы.
Пиксельдегі жол ені немесе браузер терезесі енінің пайызы.
Экранның орны (сол жақта | орталықта | оң жақта).
Әдепкі бойынша, сызық көлеңкемен 3D түрінде көрсетіледі.  NOSHADE сызықты қарапайым қара жолақ ретінде көрсетуге мүмкіндік береді.
2.4
Қосымшастильдерvқұжат
HTML құжаттарыңыздағы мәтіндік ақпаратты бөлектеу үшін әртүрлі қаріп мәнерлерін пайдалануға мүмкіндік береді.  Мұнда көптеген браузерлер қолдайтын стильдердің қысқаша тізімі берілген:
қалың (қалың)
курсив (қиғаш)
моно аралық (жазушының түрі - бекітілген қаріптерді пайдалану)
Қалың және курсив сияқты әр түрлі стильдерді біріктіруге болады.
№2 кесте: Негізгі мәтін мәнерлері
Стильдерді біріктіру әртүрлі стильдермен бір жолда бірнеше элементтерді көрсетуге мүмкіндік береді, мысалы:
Өмір - ол өлең!
Өмір - ол
өлең!

Назар аударыңыз! Көптеген стильдер мен олардың комбинацияларын қосу мәтінді оқуды қиындатады!
Қосымша стильдер:
үлкен (үлкен)
кішкентай (кіші)
қосалқы (жағын)
sup (жоғарғы жазу)
№3 кесте: Қосымша мәтін мәнерлері
Қаріп өлшемі .  Тегті пайдаланып қаріп өлшемін өзгертуге болады:


Қаріптің өлшемі 1-ден 7-ге дейін болуы мүмкін. Қаріп өлшемін тікелей сан ретінде көрсетуге немесе оң немесе теріс бағытта негізгі мәннен (әдепкі бойынша 3) ығысуды көрсетуге болады.  Негізгі мәнді тег арқылы өзгертуге болады:

Мысалы:
және hм en en және e

өзгеріс
Қаріп түсі .  Тегті пайдаланып қаріп түсін өзгертуге болады:

Қызыл Жасыл Көк
Қызыл жасыл көк
2.5
АрнайытегтерHTML

Келесі тегтер HTML құжатыңызды функционалдырақ етуге мүмкіндік береді.
Мекенжай тегі 
.  Тег 
құжаттың авторын және оның мекенжайын ерекшелеу үшін қолданылады (мысалы, электрондық пошта).  Синтаксис:


Шығу реті.  Кейбір таңбалар HTML тіліндегі басқару таңбалары болып табылады және оларды құжатта тікелей пайдалану мүмкін емес:
1) сол жақ бұрышты жақша «<"
2) тік бұрышты жақша «>»
3) амперсанды «&»
4) қос тырнақша """
Бұл таңбаларды құжатта пайдалану үшін оларды шығу ретімен ауыстыру керек:
Кесте №4: Қашу реттері
HTML 2.0 нұсқасында енгізілген © белгісі үшін " " және ® белгішесі үшін ® сияқты арнайы таңбаларға арналған қашу реттерінің көп саны бар.  Мүмкіндіктердің бірі - таңбалар кестесінің 2-ші бөлігіндегі таңбаларды (127-таңбадан кейін) 7-биттік арналар арқылы ұлттық тілдердегі мәтіндік файлдарды тасымалдауға арналған көшіру ретімен ауыстыру.
Назар аударыңыз! Escape реттілігі регистрді ескереді: орнына ҚОЛДАНЫЛМАЙДЫ<.
2.6
HTMLПішіндер

Кейбір WWW браузерлері пайдаланушыға мәнді қайтаратын арнайы пішінді толтыруға және WWW серверінде кейбір әрекеттерді орындауға мүмкіндік береді.  Пішінді веб-шолғыш арқылы интерпретациялағанда, енгізу өрістері, құсбелгілер, радиотүймелер, ашылмалы мәзірлер, айналдырылатын тізімдер, түймелер және т.б. сияқты арнайы GUI экран элементтері жасалады.  Пайдаланушы пішінді толтырып, «Жіберу» түймесін басқанда (ЖІБЕРУ – құжатты сипаттау кезінде көрсетілетін батырманың арнайы түрі), пайдаланушы пішінге енгізген ақпарат өңдеу және жіберу үшін HTTP серверіне жіберіледі. CGI (Common Gateway Interface) интерфейсіне сәйкес сервер астында жұмыс істейтін басқа бағдарламаларға.
Пішінді сипаттаған кезде әрбір енгізу элементінде тег болады .  Пайдаланушы деректерді пішін элементіне салғанда, ақпарат элементтің VALUE бөліміне орналастырылады.
Синтаксис.  Барлық пішіндер тегтен басталады 
және тегпен аяқтаңыз
.

Пішін_элементтері_және_басқа_HTML_элементтері.

ӘДІС.  Пішіннен деректері бар хабарламаны жіберу әдісі.  Қолданылатын әдіске байланысты, енгізу нәтижелерін пішінге екі жолмен жіберуге болады:
GET: пішіндегі ақпарат пішін тақырыбының сипаттамасында көрсетілген URL мекенжайының соңына қосылады.  Сіздің CGI бағдарламаңыз (CGI сценарийі) QUERY_STRING ортасының айнымалысының параметрі ретінде пішіннен деректерді алады.  GET әдісін пайдалану ұсынылмайды.
POST: Бұл әдіс барлық пішін ақпаратын көрсетілген URL мекенжайына қол жеткізгеннен кейін бірден жібереді.  Сіздің CGI бағдарламаңыз стандартты енгізуде пішін енгізуін алады.  Сервер сізге деректерді стандартты енгізу ағынына жіберудің аяқталуы туралы хабарлама жібермейді;  оның орнына CONTENT_LENGTH орта айнымалысы стандартты енгізуден қанша деректерді оқығыңыз келетінін анықтау үшін пайдаланылады.  Бұл әдісті пайдалану ұсынылады.
ӘРЕКЕТ: ӘРЕКЕТ пішінді өңдеуге шақырылатын URL мекенжайын сипаттайды.  Бұл URL әрқашан дерлік берілген пішінді өңдейтін CGI бағдарламасына нұсқайды.
Пішін тегтері:
Тег пайдаланушыға ақпараттың бірнеше жолын (еркін мәтін) енгізуге мүмкіндік беру үшін пайдаланылады.  Мұнда тегті қолданудың мысалы берілген <TEXTAREA>:</p>
<p><TEXTAREA NAME="address" ROWS=10 COLS=50></p>
<p>Дмитровское тас жолы,</p>
<p>9В, 448 кабинет</p>
<p>
Тег ішінде қолданылатын төлсипаттар кіріс мәнінің көрінісін және атауын сипаттаңыз.  Тегенгізу өрісі бастапқыда бос болса да қажет.  Атрибут сипаттамасы:
NAME – енгізу өрісінің аты
ROWS – символдармен енгізу өрісінің биіктігі
COLS – өріс енін символдармен енгізу
Әдепкі бойынша енгізу өрісінде кейбір мәтіннің көрсетілуін қаласаңыз, оны тегтердің ішіне енгізуіңіз керек. және.
Тег мәтіннің бір жолын немесе бір сөзді енгізу үшін қолданылады.  Тег атрибуттары:
CHECKED - CHECKBOX немесе RADIOBTON таңдалатынын білдіреді.
MAXLENGTH – енгізу өрісіне пайдаланушылар енгізе алатын таңбалар санын анықтайды.  Рұқсат етілген таңбалар саны асып кетсе, шолғыш дыбыстық сигналмен жаңа таңбаны енгізу әрекетіне жауап береді және оны енгізуге рұқсат бермейді.  SIZE атрибутымен шатастырмау керек.  MAXLENGTH өлшемі SIZE мәнінен үлкен болса, өрісте айналдыру орындалады.  MAXLENGTH үшін әдепкі мән шексіздік болып табылады.
NAME – енгізу өрісінің аты.  Бұл атау бірегей өріс идентификаторы ретінде пайдаланылады, ол арқылы кейінірек осы өрісте пайдаланушы орналастырған деректерді алуға болады.
SIZE – экрандағы енгізу өрісінің визуалды өлшемін символдармен анықтайды.
SRC - URL.  суретке меңзеу (IMAGE төлсипатымен бірге пайдаланылады).
TYPE – енгізу өрісінің түрін анықтайды.  Әдепкі бойынша, бұл мәтіннің бір жолына арналған қарапайым енгізу өрісі.  Басқа түрлер нақты көрсетілуі керек:
CHECKBOX: Қарапайым логикалық (BOOLEAN) мәндер үшін пайдаланылады.  Шақырылған CGI бағдарламасына берілетін осы өрістің атымен байланысты мән ҚОСУЛЫ немесе ӨШІРУЛІ болуы мүмкін.
ЖАСЫРЫН: мұндай өрістерді шолғыш көрсетпейді және пайдаланушыға осы өріске тағайындалған әдепкі мәнді өзгертуге жол бермейді.  Бұл өріс CGI бағдарламасына пайдаланушы идентификаторы, құпия сөз немесе басқа ақпарат сияқты статикалық ақпаратты беру үшін пайдаланылады.
Енгізу өрісінің бұл түрі графиканы өріс атымен байланыстыруға мүмкіндік береді.  Суреттің кез келген бөлігін басқан кезде, пішінмен байланысты CGI бағдарламасы дереу шақырылады.  NAME айнымалысына тағайындалған мәндер келесідей болады - екі жаңа айнымалылар жасалады: біріншісінде NAME өрісінде көрсетілген атау бар, оның соңына .x қосылады.  Бұл айнымалы нүктенің X координатасымен (бастапқы нүкте суреттің жоғарғы сол жақ бұрышы болса) басу кезінде тінтуір курсоры көрсетіп тұрған нүктенің X координатымен және NAME құрамындағы аты бар айнымалымен толтырылады. және .y қосымшасында Y координаты болады.  VALUE төлсипатының барлық мәндері еленбейді.  Суреттің сипаттамасы SRC атрибуты арқылы жүзеге асырылады және синтаксис тегке сәйкес келеді .
TEXT төлсипаты сияқты, бірақ пайдаланушы енгізген мәнді браузер экранда көрсетпейді.
Бұл төлсипат бірнеше баламалардан бір мәнді енгізуге мүмкіндік береді.  Баламалардың жинағын жасау үшін TYPE="RADIO" төлсипаты бар, әртүрлі VALUE төлсипат мәндері бар, бірақ NAME төлсипат мәндері бірдей бірнеше енгізу өрістерін жасау керек.  NAME=VALUE түріндегі мән CGI бағдарламасына жіберіледі және VALUE ағымдағы таңдалған енгізу өрісінің VALUE төлсипатының мәнін қабылдайды (белсенді болады).  RADIO түрінің енгізу өрістерінің бірі таңдалған кезде, осы түрдегі бірдей атаумен (NAME төлсипаты) барлық басқа өрістер экранда автоматты түрде таңдалмайды.
Бұл түр түймені білдіреді, басқан кезде барлық пішін өрістері әдепкі бойынша олар үшін сипатталған мәндерді қабылдайды.
Бұл түр басқан кезде пішін тақырыбында сипатталған CGI бағдарламасын (немесе URL мекенжайын) шақыратын түймені білдіреді.  VALUE төлсипаты түймеде көрсетілетін жолды қамтуы мүмкін.
Бұл енгізу өрісінің түрі бір жолды енгізу өрісін сипаттайды.  Таңбалардағы кіріс мәнінің максималды ұзындығын және экранда көрсетілетін енгізу өрісінің өлшемін анықтау үшін MAXLENGTH және SIZE атрибуттарын пайдаланыңыз (әдепкі бойынша 20 таңба).
VALUE – өріске әдепкі мәнді немесе RADIO түрін пайдалану кезінде таңдалатын мәнді тағайындайды (бұл атрибут RADIO түрі үшін қажет).
Пішіндердегі таңдау мәзірі.  Пішіндердегі таңдау мәзірі LISTBOX сияқты интерфейс элементі ретінде түсініледі.  Пішіндерге арналған таңдау мәзірінің тегтерінің үш түрі бар:
Таңдау - пайдаланушы OPTION тегтерімен ұсынылған мәндердің бекітілген тізімінен бір мәнді таңдайды.  Бұл көрініс ашылмалы LISTBOX ретінде ұсынылған.
Жалғыз таңдау - Таңдау сияқты, бірақ пайдаланушы экранда бір уақытта үш таңдалған элементті көреді.  Егер көбірек болса, автоматты тік айналдыру қамтамасыз етіледі.
Бірнеше элементті таңдау - LISTBOX ішінен бірнеше элементтерді таңдауға мүмкіндік береді.
ТАҢДАУ: ТАҢДАУ тегі пайдаланушыға мәндердің бекітілген тізімінен мән таңдауға мүмкіндік береді.  Бұл әдетте ашылмалы мәзір арқылы көрсетіледі.
ТАҢДАУ тегінде бастапқы тегі арасында бір немесе бірнеше параметр болады және қорытынды.  Әдепкі бойынша, бірінші элемент таңдау жолағында көрсетіледі.  Міне мысал тегі :


386
AT 486
AT 586
SELECT SINGLE: SELECT SINGLE тегі Select сияқты, бірақ пайдаланушы экранда бір уақытта бірнеше таңдаулы элементтерді көреді (әдепкі бойынша үш).  Егер көбірек болса, автоматты тік айналдыру қамтамасыз етіледі.  Бір уақытта көрсетілетін элементтер саны SIZE атрибуты арқылы анықталады.  Мысалы:

386

AT 486

AT 586

Pentium PRO
ТАҢДАУ КӨПТЕГІ: SELECT MULTIPLE тегі SELECT SINGLE тегіне ұқсас, бірақ пайдаланушы бір уақытта бірнеше тізім элементтерін таңдай алады.  SIZE атрибуты экранда бір уақытта көрінетін элементтердің санын, MULTIPLE атрибуты – бір уақытта таңдалған элементтердің максималды санын анықтайды.  Мысалы:

386
AT 486
AT 586
Pentium PRO
Егер бір уақытта бірнеше мән таңдалса, NAME=VALUE параметрлерінің саны бірдей NAME мәндері бар, бірақ әртүрлі VALUE мәндері бар таңдалған параметрлер санына сәйкес серверге жіберіледі.
Формаларды пайдаланып файлдарды жіберу.  Пішіндерді параметрлер түріндегі шағын ақпараттық хабарламаларды жіберу үшін ғана емес, сонымен қатар файлдарды жіберу үшін де пайдалануға болады.
Назар аударыңыз!  Бұл мүмкіндік WEB серверінен файлдарды қабылдауды қолдауды талап ететіндіктен, сервер файлдарды қабылдауды қолдауы қажет!
Мысалы:
Бұл файлды жіберіңіз:  
  
.

2.7
HTMLЖақтаулар

Веб-беттерді бірнеше жылжымалы ішкі терезелерге бөлу үшін жақтауларды пайдалану арқылы ақпараттық жүйелер мен веб-қосымшалардың көрінісі мен сезімін айтарлықтай жақсартуға болады.  Әрбір ішкі терезенің немесе жақтаудың келесі қасиеттері болуы мүмкін:
Әрбір кадрдың өзінің URL мекенжайы бар, ол оны басқа кадрлардан тәуелсіз жүктеуге мүмкіндік береді
Әрбір кадрдың өз атауы (NAME параметрі) бар, ол басқа кадрдан оған өтуге мүмкіндік береді
Жақтау өлшемін пайдаланушы тінтуірдің көмегімен тікелей экранда өзгерте алады (егер оған арнайы параметрді көрсету арқылы тыйым салынбаса)
Бұл кадр сипаттары кеңейтілген интерфейс шешімдерін жасауға мүмкіндік береді, мысалы:
· Автор пайдаланушыға үнемі көрсету үшін қажет деп санайтын статикалық ақпаратты бір статикалық кадрға орналастыру.  Бұл компанияның графикалық логотипі, авторлық құқық, басқару түймелерінің жиынтығы болуы мүмкін
WEB-серверде қамтылған WEB-құжаттардың барлығын немесе бір бөлігін мазмұн кестесінің статикалық жақтауында орналастыру, бұл пайдаланушыға өзін қызықтыратын ақпаратты жылдам табуға мүмкіндік береді.
Сұраныстың өзі бір кадрда, ал сұрау нәтижелері екіншісінде болғанда сұрау нәтижесі терезелерін жасаңыз
· Дерекқорларға қызмет көрсететін WEB-қосымшаларға арналған «мастер-деталь» пішіндерін жасау.
кадр синтаксисі.  Фреймдерді пайдаланатын құжаттың пішімі кәдімгі құжат пішіміне өте ұқсас көрінеді, бірақ BODY тегіннің орнына фреймдерге орналастырылған нақты ақпаратты қамтитын ішкі HTML құжаттарының сипаттамасын қамтитын FRAMESET контейнері қолданылады.
 ... ... 
Дегенмен, фреймдік құжат HTML құжатының белгілі бір түрі болып табылады, себебі ол сәйкесінше BODY элементін және кез келген ақпараттық жүктемені қамтымайды.  Ол тек ақпаратты қамтитын фреймдерді сипаттайды (біз кейінірек қарастыратын қосарланған құжатты қоспағанда).
Фреймдердің жалпы синтаксисін елестетіп көрейік:

  ...

Жалпы FRAMESET контейнері экран бөлінген барлық кадрларды сипаттайды.  Экранды бірнеше тік немесе бірнеше көлденең кадрларға бөлуге болады.  FRAME тегі әрбір кадрды жеке сипаттайды.  Әрбір компонентті толығырақ қарастырайық.

Қазіргі уақытта веб-сайтты жасау ешқандай қиындық тудырмайды, өйткені Интернетте веб-сайтты құру үшін өз қызметтерін ұсынатын порталдар жеткілікті.  Бірақ мұндай қызмет үшін жасалған сайт - бұл оның өзі емес, пробиркада өсірілген клонның ұқсастығы.
Өздігінен құрылған сайт - әрқашан шығармашылықтың қуанышты күйзелісінен зардап шеккен сүйікті бала болады.  Сіз статикалық веб-сайт деп аталатын HTML бағдарламалау тілін пайдаланып веб-сайт жасай аласыз.
HTML редакторы веб-сайтты жасау үшін қолданылады.  HTML негізіндегі сайтты өз бетінше жасау үшін сізге HTML бағдарламалау тілін білу, Photoshop-тың белгілі бір тұжырымдамалары, кейбір жазу дағдылары, аздап қиял және дизайн өнері қажет.
РНР программалау тілі арқылы жасалған сайт динамикалық сайт болып табылады.  Интернеттегі бар сайттардың көпшілігі PHP негізінде, CMS қозғалтқыштарында (контентті басқару жүйесі) құрылған.  Бұл сайтта сіз веб-сайтты қалай жасау керектігін үйрене аласыз және CMS қозғалтқыштарында өз бетіңізше веб-сайтты жасау бойынша білікті көмек ала аласыз: 
- Joomla сайтында сайт құру;
Бір нәрсені бастау әрқашан қиын.  Мұнда ең бастысы - нақты мақсат қою.  Бастау үшін сіз жасағыңыз келетін тақырыпты және сайт үлгісін таңдаңыз, оны жүзеге асыру жоспарын жасаңыз.  Және негізгі мақсатқа жетуге ұмтылыңыз.
HTML және CSS көмегімен веб-сайттарды құру бойынша оқулықтар арқылы саяхатымызды бастамас бұрын, екі тіл арасындағы айырмашылықтарды, әр тілдің синтаксисін және кейбір негізгі терминологияны түсіну маңызды.
HTML және CSS дегеніміз не?
HTML (HyperText Markup Language) мазмұнның құрылымын және оның мағынасын, мысалы, тақырыптар, абзацтар немесе кескіндер сияқты мазмұнды анықтау арқылы анықтайды.  CSS (Cascading Style Sheets) немесе Cascading Style Sheets — мысалы, қаріптер немесе түстер арқылы мазмұнның сыртқы түрін жобалауға арналған көрсетілім тілі.
Бұл екі тіл, HTML және CSS, бір-бірінен тәуелсіз және солай қалуы керек.  CSS HTML құжатының ішінде жазылмауы керек және керісінше.  Жалпы ереже ретінде HTML әрқашан мазмұнды көрсетеді және CSS әрқашан оның стилін анықтайды.
HTML мен CSS арасындағы айырмашылықты түсініп, HTML-ге толығырақ тоқталайық.
Негізгі HTML шарттары
HTML-мен жұмыс істеуді бастамас бұрын, сіз жаңа және жиі оғаш терминдерді кездестіруіңіз мүмкін.  Уақыт өте келе сіз олардың барлығымен егжей-тегжейлі танысасыз, бірақ әзірге сіз үш негізгі HTML терминінен бастауыңыз керек - элементтер, тегтер және атрибуттар.
Элементтер
Элементтер беттегі нысандардың құрылымы мен мазмұнын анықтау жолын көрсетеді.  Жиі қолданылатын элементтердің кейбірі тақырыптардың бірнеше деңгейін қамтиды (элементтер ретінде анықталған 
бұрын 
) және абзацтар (анықталады 
);  тізімге элементтерді қосуға болады 
, 

, , және және көптеген басқалар.
Элементтер бұрыштық жақшалар арқылы анықталады<>, элемент атауының айналасында.  Сонымен, элемент келесідей болады:
тегтер
Бұрыштық жақшаларды қосу< и >элементтің айналасында тег ретінде белгілі нәрсені жасайды.  Тегтер көбінесе ашу және жабу тегтерінің жұптарында кездеседі.
Бастау тегі элементтің басын белгілейді.  Ол таңбадан тұрады<, затем идёт имя элемента и завершается символом >;  Мысалға, 

.
Аяқтау тегі элементтің соңын белгілейді.  Ол таңбадан тұрады< с последующей косой чертой и именем элемента и завершается символом >;  Мысалға,
.
Бастау және аяқталу тегтерінің арасындағы мазмұн сол элементтің мазмұны болып табылады.  Сілтемеде, мысалы, ашу тегі болады және жабу тегі.  Осы екі тегтің арасындағы нәрсе сілтеменің мазмұны болады.
Сондықтан сілтеме тегтері келесідей болады:
 ...
 
Атрибуттар
Атрибуттар - элемент туралы қосымша ақпаратты қамтамасыз ету үшін пайдаланылатын сипаттар.  Ең көп тараған атрибуттар элементті анықтайтын id төлсипатын қамтиды;  элементті жіктейтін класс атрибуты;  ендірілген мазмұнның көзін көрсететін src төлсипаты;  және қатысты ресурсқа сілтемені көрсететін href төлсипаты.
Атрибуттар элемент атынан кейін ашылатын тегінде анықталады.  Жалпы атрибуттар атау мен мәнді қамтиды.  Бұл атрибуттарға арналған пішім төлсипат атауынан кейін теңдік белгісінен, содан кейін тырнақшадағы төлсипат мәнінен тұрады.  Мысалы, элемент href атрибутымен келесідей болады:
Шей Хоу
Негізгі HTML шарттарын көрсету
Бұл код веб-бетте «Шей Хоу» мәтінін көрсетеді және осы мәтінді басқан кезде ол пайдаланушыны http://shayhowe.com сайтына апарады.  Сілтеме элементі бастау тегімен жарияланады және жабу тегіқоршау мәтіні, сондай-ақ ашу тегінде href="http://shayhowe.com" арқылы жарияланған сілтеме мекенжайының төлсипаты мен мәні.
Күріш.  1.01.  Схема HTML синтаксисі элементті, төлсипатты және тегті қамтиды
Енді сіз HTML элементтерінің, тегтерінің және атрибуттарының не екенін білетін болсаңыз, бірінші веб-бетімізді бірге қарастырайық.  Бұл жерде бірдеңе жаңа болып көрінсе, уайымдамаңыз - барған сайын оның шифрын ашамыз.
HTML құжатының құрылымын теңшеу
HTML құжаттары қарапайым мәтіндік құжаттар, .txt емес, .html кеңейтімімен сақталған.  HTML жазуды бастау үшін алдымен сізге қажет мәтіндік редакторбұл сізге қолдануға ыңғайлы.  Өкінішке орай, бұл Microsoft Word немесе Беттерді қамтымайды, өйткені бұл күрделі редакторлар.  HTML және CSS жазуға арналған екі ең танымал мәтіндік редакторлар - Dreamweaver және Sublime Text.  Тегін баламалар Windows жүйесіне арналған Notepad++ және Mac жүйесіне арналған TextWrangler.
Барлық HTML құжаттарында міндетті құрылым бар келесі мәлімдемелержәне элементтері:
, 
, және 
.
Хабарландыру құжат түрінемесеHTML құжатының ең басында орналасқан және браузерлерге HTML тілінің қай нұсқасы қолданылып жатқанын көрсетеді.  Өйткені біз қолданатын боламыз соңғы нұсқасы HTML, біздің құжат түрі жай ғана болады.  Осыдан кейін элемент келеді құжаттың басын білдіреді.
Ішінде элемент анықтайды жоғарғы бөлігіқұжат, соның ішінде әртүрлі метадеректер (бет туралы ілеспе ақпарат).  Элемент ішіндегі мазмұн веб-беттің өзінде көрсетілмейді.  Оның орнына ол құжаттың тақырыбын (шолғыш терезесінің тақырып жолында пайда болады), кез келген сыртқы файлдарға сілтемелерді немесе кез келген басқа пайдалы метадеректерді қамтуы мүмкін.
Веб-беттің барлық көрінетін мазмұны элементте болады .  Әдеттегі HTML құжатының құрылымы келесідей көрінеді:
 

 
 
 
 
 
 
Сәлем Әлем!
 
Бұл веб-бет.
 

 
HTML құжатының құрылымын көрсету
Бұл код құжат түрін декларациялаудан бастап құжатты көрсетеді,, одан кейін бірден элемент .  Ішінде өту элементтері және .  Элемент тег арқылы бет кодтауын қамтиды және элемент арқылы құжаттың тақырыбы 
 

Жұмысымызды тексеріп, HTML және CSS-тің қалай үйлесетінін көретін уақыт келді.  Браузерде index.html файлын ашу (немесе ол әлдеқашан ашық болса, бетті жаңарту) бұрынғыдан сәл өзгеше нәтиже көрсетуі керек.
Күріш.  1.04.  CSS қалпына келтірілген стильдер конференциясының веб-сайты
Демо және бастапқы код
Төменде стильдер конференциясының сайтын ағымдағы күйінде көруге, сондай-ақ сайттың ағымдағы бастапқы кодын жүктеп алуға болады.
Түйіндеме
Сонымен, бәрі жақсы!  Бұл оқулықта біз үлкен қадамдар жасадық.
Енді ойланыңыз, сіз білесіз HTML негіздеріжәне CSS.  Біз жалғастырған сайын және сіз HTML және CSS жазуға көбірек уақыт бөлетін болсаңыз, осы екі тілмен жұмыс істеу әлдеқайда ыңғайлы болады.
Еске салайық, біз мыналарды қарастырдық:
HTML және CSS арасындағы айырмашылық.
HTML элементтерімен, тегтерімен және атрибуттарымен таныстыру.
Бірінші веб-беттің құрылымын орнату.
-мен танысу CSS селекторлары, қасиеттер және мәндер.
CSS селекторларымен жұмыс
HTML тілінен CSS-ге көрсеткіш.
CSS қалпына келтірудің маңыздылығы.

Енді HTML-ге тереңірек үңіліп, семантикасымен біраз танысайық.
Ресурстар мен сілтемелер
Scripting Master арқылы жалпы HTML терминдері
CSS шарттары мен анықтамалары әсерлі веб-сайттар арқылы
CSS құралдары: CSS-ті Эрик Мейер арқылы қалпына келтіріңіз

Hypertext Markup Language (HTML) – веб-құжаттарды жасау үшін арнайы жасалған тіл.  Ол экранда көрсетілмейтін арнайы нұсқаулардың (тегтердің) синтаксисі мен орналасуын анықтайды, бірақ браузерге құжаттың мазмұнын қалай көрсету керектігін айтады.  Ол сондай-ақ Интернетте орналасқан басқа құжаттарға, жергілікті немесе желіге сілтеме жасау үшін қолданылады.
HTML стандарты және Интернетке арналған басқа стандарттар World Wide Web Consortium (W3C) басшылығымен әзірленді.  Стандарттарды, техникалық шарттарды және жаңа ұсыныстар жобасын http://www.3w.org/ сайтынан табуға болады.  Қазіргі уақытта HTML 4.0 спецификациясы жұмыс істейді және оны қолдау негізгі браузерлер арасында үнемі өсіп келеді.
Іс жүзінде HTML стандартына Microsoft Internet Explorer және Netscape Navigator сияқты ең танымал браузерлер ұсынатын және қолдайтын тегтер үлкен әсер етеді.  Бұл тегтер қазіргі уақытта ағымдағы HTML сипаттамасының бөлігі болуы немесе болмауы мүмкін.
Тег туралы ақпарат Рон Вудаллдың HTML жинағы (HTML бойынша жылдам нұсқаулық).  Жинақта алфавиттік тәртіпте тегтер мен олардың атрибуттары тізімі, сондай-ақ әрқайсысына арналған шолғышты қолдау бойынша жаңартулар бар.
HTML құжаттары қарапайым ASCII мәтіндік файлдары болып табылады.  Бұл кез келген мәтіндік редакторды тіпті ең аз мүмкіндіктермен де жасауға болатынын білдіреді.  HTML жазу үшін арнайы жасалған өңдеу құралдары бар.  Олар құжаттар, кестелер үшін бастапқы параметрлерді орнату немесе мәтінге жай ғана мәнерлер қолдану сияқты қайталанатын тапсырмаларды орындау үшін пернелер тіркесімін қамтамасыз ету арқылы уақытты үнемдейді.  HTML редакторларының WYSIWYG құралдарын жасаудан (төменде талқыланады) айырмашылығы, олар HTML-ді қолмен құрастыру ережелерін білуді талап етеді, редакторлар бұл процесті жеңілдетеді және тездетеді.
Windows пайдаланушылары күшті және арзан HomeSite сайтын міндетті түрде тексеруі керек HTML редакторы Allaire корпорациясы.  Ол HTML синтаксисінің түсін бөлектеуді, FTP функциясын, синтаксисті және емлені бақылауды, көп файлды іздеуді және ауыстыруды қамтиды.  Бұдан басқа, ол күрделі элементтерді (кадрлар, JavaScript сценарийлеріжәне DHTML).
Macintosh компьютерлерінде жұмыс істегенде Bare Bones Software, Inc фирмасының коммерциялық HTML редакторы BBEdit-ке назар аударыңыз.  Ол шын мәнінде Macintosh веб-әзірлеушілерінің арасында өз орнын алады.  Ол ыңғайлы және жылдам HTML құралдары, көп файлды іздеу және ауыстыру, кірістірілген FTP функциясы, 13 бағдарламалау тілін қолдау, кесте құрастырушы, HTML синтаксисін басқару және басқа да көптеген функцияларды қамтиды.
Соңғы жылдар авторлық құралдар нарығының күрт өсуімен сипатталды.  WYSIWYG (Не көрсеңіз, соны аласыз) HTML редакторларында бар графикалық интерфейстер, бұл HTML жазуды мәтіндік редактор немесе бетті белгілеу бағдарламасы сияқты етеді.  Бұл бағдарламалардың бастапқы мақсаты бетті белгілеу бағдарламалары әзірлеушіні PostScript тілінің пәрмендер жиынынан қорғайтындай, пайдаланушыларды HTML тегтерінен босату болды.  Бүгінгі күні олардың маңызы арта түсті, өйткені олар HTML бастапқы кодына қол жеткізуді қамтамасыз ете отырып, құжат өндірісінің тиімділігі мен автоматтандырылуын арттырады.
Қазіргі уақытта ең танымал WYSIWYG редакторлары: Macromedia DreamWeaver, Golive CyberStudio (тек Macintosh), Microsoft Front Page, FileMaker Claris, Басты бет, Adobe PageMill.
HTML құжатында мәтін (бет мазмұны) және кірістірілген тегтер – құрылым туралы нұсқаулар, сыртқы түріжәне мазмұн ерекшеліктері.  HTML құжаты екі негізгі бөлікке бөлінеді: тақырып - бас және негізгі - дене.  Тақырыпта оның тақырыбы және мазмұнын сипаттайтын әдістемелік ақпарат сияқты құжат туралы ақпарат бар.  Негізгі бөлім құжаттың мазмұнын қамтиды (шолғыш терезесінде не көрсетіледі).
 
Әрбір тег атаудан тұрады, одан кейін қосымша атрибуттар тізімі бар, барлығы бұрыштық жақшалар ішінде< >.  Жақшалардың мазмұны браузер терезесінде ешқашан көрсетілмейді.  Тегтің атауы әдетте оның функциясының аббревиатурасы болып табылады, бұл есте сақтауды жеңілдетеді.  Атрибуттар - тегтің функциясын кеңейтетін немесе нақтылайтын сипаттар.  Жалпы ереже бойынша, тегтегі атау мен атрибуттар регистрді ескермейді.  Тег сияқты жұмыс істейтін болады .  Дегенмен, белгілі бір атрибуттардың мәндері регистрге сезімтал болуы мүмкін.  Бұл әсіресе файл атаулары мен URL мекенжайларына қатысты.
Көптеген тегтер контейнерлер болып табылады.  Бұл олардың бастау (ашу немесе бастау) және аяқталу (жабу) тегі бар екенін білдіреді.  Тегтер арасындағы мәтін олардағы нұсқауларға сәйкес болады.
Аяқтау тегінің аты бастау тегімен бірдей, бірақ оның алдында қиғаш сызық (/) болады.  Оны «қосқыш» тегі ретінде қарастыруға болады.  Аяқтау тегінде ешқашан атрибуттар болмайды.
Кейбір жағдайларда аяқталу тегі міндетті емес және шолғыш контекстен соңғы тегті анықтайды.  Көбінесе соңғы тегті өткізіп жібереді<р>(тармақ).  Браузерлер бұл тегті дұрыс аяқталусыз қолдайтын, сондықтан көптеген веб-авторлар қысқа пішінді қолдануға дағдыланған.  Бұл барлық тегтер үшін рұқсат етілмейді және барлық браузерлер олардың жоқтығын кешірмейді.  Сондықтан, егер күмәніңіз болса, мәтінге жабу тегін қосыңыз.  Бұл құжатта каскадты мәнерлер кестелерін пайдаланған кезде өте маңызды.
Кейбір тегтердің соңғы тегтері жоқ, себебі олар бетте жеке (оқшау) элементтерді орналастыру үшін пайдаланылады.  Солардың бірі - сурет тегі , ол жай ғана сызбаны бет ағынына қояды.  Басқа дербес тегтер жол үзілімі болып табылады ( 
), көлденең сызық ( 
) және құжат туралы ақпаратты қамтитын және экранда көрсетілетін мазмұнға әсер етпейтін тегтер, мысалы және .

Төлсипаттар тегке оның әрекеттерін кеңейту немесе өзгерту үшін қосылады.  Бір тегке бірнеше атрибут қосуға болады.  Тег атрибуттары тег атауынан кейін болса, олар бір немесе бірнеше бос орындармен бөлінеді.  Тапсырыс маңызды емес.  Көптеген атрибуттарда атрибут атынан кейін тең (=) белгісінен кейін келетін мәндер болады.  Мәндердің ұзындығы 1024 таңбамен шектелген.  Мәндер регистрге сезімтал болуы мүмкін.  Кейде мәндер тырнақшаға алынуы керек (қос немесе жалғыз).  Мәнді жазу ережелері келесідей:
- егер мән бір сөз немесе сан болса және тек әріптерден (a-z), сандардан (0-9) және арнайы таңбалардан (нүкте) тұрса<.>
- егер мәнде үтір немесе бос орын арқылы бөлінген бірнеше сөз болса немесе нүкте немесе сызықшадан басқа арнайы таңбалар болса, онда ол тырнақшаға алынуы керек.  Мысалы, URL мекенжайлары тырнақшаларды қажет етеді, себебі оларда "://" таңбалары бар.  «#rrggbb» пішімін пайдаланып түс мәндерін көрсету кезінде де тырнақша қажет.

Тырнақшаларды пайдалану керек пе деген сенімсіз болсаңыз, әрқашан барлық мәндер үшін тырнақшаларды пайдаланыңыз.
Бір элементте бірнеше тегтерге әсер ету үшін басқа HTML тегтерін HTML тегтерінің ішінде орналастыруға болады.  Бұл кірістіру деп аталады және оның дұрыс жұмыс істеуі үшін кірістірілген тегтің бастапқы және аяқталу тегтері сыртқы тегтің бастапқы және аяқталу тегтерінің арасында болуы керек.
Жиі кездесетін қателік - тегтердің қабаттасуы.  Кейбір браузерлер осылай тегтелген мазмұнды көрсететінімен, көпшілігі ережені бұзуға жол бермейді, сондықтан тегтерді дұрыс орналастыру маңызды.  Келесі мысалда қате тегтер кірістіру көрсетілген (тег<В>жабу алдында жабылады ):

Ауа-райы тамашабүгін- бұл ақпарат, браузерлер еленбейді.
Ақпаратты браузерлер еленбейді.  Төменде келтірілген ақпарат HTML құжаты, соның ішінде браузерлер қараған кезде еленбейтін белгілі тегтер.  Ол мыналардан тұрады:
- жол үзілімдері.  HTML құжатындағы жол соңындағы таңбалар еленбейді.  Мәтін мен элементтер тег құжаттың мәтін ағынында кездескенше оралады.
- қойынды таңбалары және бірнеше бос орындар.  Браузер HTML құжатында қойынды таңбасы мен бірнеше дәйекті бос орын таңбаларын кездестіргенде, ол тек бір бос орын таңбасын шығарады.  Осылайша, егер құжатта: «алыс, алыс» болса, браузер «алыс, алыс» көрсетеді.  Үзілмейтін бос орын таңбасы (Snbsp;) арқылы мәтін ағынына қосымша бос орындар қосуға болады.  Сонымен қатар, мәтін пішімделген болса, барлық бос орындар көрсетіледі (тегтерден табылған
- бірнеше
- танылмаған тегтер.  Браузер тегті түсінбесе немесе ол дұрыс орнатылмаған болса, браузер оны елемейді.  Тег пен браузерге байланысты бұл әртүрлі нәтижелерге әкелуі мүмкін.  Браузер ештеңе көрсетпейді немесе тегтің мазмұнын кәдімгі мәтін ретінде көрсетуі мүмкін;
- түсініктемедегі мәтін.  Браузерлер арнайы элементтер арасында мәтінді көрсетпейді