HTML-ге кіріспе. Web-дизайнның негізгі ұғымдары

Жоспар
Кіріспе

1 HTML.ге кіріспе.
2 Тізімдермен жұмыс үшін қолданылатын негізгі тегтер
3 Текстті түстермен кескіндеу
4 HTML.құжатында графиканы қолдану
5 HTML тілінің негізгі тегтерінің кестесі

HTML гипертекстік тілін (Hypertext Markup Language) 1989 жылы World Wide Web гипертекстік жүйесін бөлудің өңдеу технологиясының компоненттерінің бірі ретінде Тим Бернер-Ли ұсынғаны белгілі. Гипертекстті бөлу негізіне құжаттың әрбір элементі тегтерімен қоршалған элементтердің жиынтығы түрінде көрсетуге болатын құжатты сипаттаудың тегтік моделі жататын болған. Өзінің мәні бойынша тегтер программалау тілдеріндегі "begin/end" жақша ұғымдарына жақын және локальді айнымалылардың аттарының арасындағы амалдардың облысын береді, құжаттағы тексттік элементтерді түсіндіру ережелерінің амалдарын анықтайды және т.б.
HTML форматында текст элементін қоюдың жалпы схемасы келесі түрде жазылуы мүмкін:
<"элемент аты" "атрибуттар тізімі"> элемент мазмұны .
Элемент мазмұнының алдындағы конструкция элемент басының тегі деп аталады, ал элемент мазмұнынан кейін орналасқан конструкция элемент соңының тегі деп аталады.
HTML құжатының құрылысы бірінің ішіне бірі салынған контейнерлерді қолдануға мүмкіндік береді. Шынында да, құжаттың өзі – бұл "HTML" атымен аталатын бір үлкен контейнер:
<HTML> Құжат мазмұны </HTML>
HTML элементінің өзі немесе гипертексттік құжат құжаттың басынан (HEAD) және денесінен (BODY) тұрады:
<HTML>
<HEAD>
Тақырып мазмұны
</HEAD>
<BODY>
Құжат денесінің мазмұны
</BODY>
</HTML>
WWW-да әрбір құжаттың өз аты бар, оны басында көрсетеді. Оны интерфейс-программасының бірінші жолында көруге болады. HTML бетінің аты <TITLE> тегінің көмегімен басына қосылады.
HTML құжатын жазуды бастай отырып, оның сондай түрде болатынын теңестіреміз. Мұндай теңестіру құжаттың ең басына тегін қою жолымен жүргізіледі. DOCTYPE тегі SGML тілінің тегі болып табылады және құжат HTML 3.2 спецификасына сәйкес сипатталатын болатынын хабарлайды.

Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Материал
Тегін: Антиплагиат
Көлемі: 11 бет
Таңдаулыға:

HTML-ге кіріспе. Web-дизайнның негізгі ұғымдары

HTML гипертекстік тілін (Hypertext Markup Language) 1989 жылы World
Wide Web гипертекстік жүйесін бөлудің өңдеу технологиясының
компоненттерінің бірі ретінде Тим Бернер-Ли ұсынғаны белгілі. Гипертекстті
бөлу негізіне құжаттың әрбір элементі тегтерімен қоршалған элементтердің
жиынтығы түрінде көрсетуге болатын құжатты сипаттаудың тегтік моделі
жататын болған. Өзінің мәні бойынша тегтер программалау тілдеріндегі
"beginend" жақша ұғымдарына жақын және локальді айнымалылардың аттарының
арасындағы амалдардың облысын береді, құжаттағы тексттік элементтерді
түсіндіру ережелерінің амалдарын анықтайды және т.б.
HTML форматында текст элементін қоюдың жалпы схемасы келесі түрде
жазылуы мүмкін:
"элемент аты" "атрибуттар тізімі" элемент мазмұны "элемент
аты".
Элемент мазмұнының алдындағы конструкция элемент басының тегі деп
аталады, ал элемент мазмұнынан кейін орналасқан конструкция элемент соңының
тегі деп аталады.
HTML құжатының құрылысы бірінің ішіне бірі салынған контейнерлерді
қолдануға мүмкіндік береді. Шынында да, құжаттың өзі – бұл "HTML" атымен
аталатын бір үлкен контейнер:
HTML Құжат мазмұны HTML
HTML элементінің өзі немесе гипертексттік құжат құжаттың басынан (HEAD)
және денесінен (BODY) тұрады:
HTML
HEAD
Тақырып мазмұны
HEAD
BODY
Құжат денесінің мазмұны
BODY
HTML
WWW-да әрбір құжаттың өз аты бар, оны басында көрсетеді. Оны интерфейс-
программасының бірінші жолында көруге болады. HTML бетінің аты TITLE
тегінің көмегімен басына қосылады.
HTML құжатын жазуды бастай отырып, оның сондай түрде болатынын
теңестіреміз. Мұндай теңестіру құжаттың ең басына !DOCTYPE HTML PUBLIC ``-
W3CDTD HTML 3.2EN'' тегін қою жолымен жүргізіледі. DOCTYPE тегі SGML
тілінің тегі болып табылады және құжат HTML 3.2 спецификасына сәйкес
сипатталатын болатынын хабарлайды.
Барлық программалау тілдеріндегідей HTML тілінде де тексттің белгілі-
бір бөліктеріне түсініктеме беретін әдісі бар. Түсініктемелер ! - - және
- - тізбектерінің арасына жазылады. Түсініктеме мысалы:
!-- бұл мәтіннің түсініктемесі бар --
1-мысал.
!DOCTYPE HTML PUBLIC ``-W3CDTD HTML 3.2EN''
HTML
!- Author: Irina Kuzina Date: December 5, 1996 -
HEAD
TITLE This is a BanerTITLE
HEAD
BODY
Internet-ті администраторлау
BODY
HTML
Егер құжат денесінің ішінде тексттің бірнеше жолын теріп, содан соң оны
броузерде қарайтын болсақ, онда терезеде жай кіші шрифтпен жазылған текст
пайда болады, сонымен бірге бастапқы текстте бар жолдардың аудармасы
сақталынбайды. Броузерлер бетке тексттерді өздері қояды. Жолдарды аударуды
"күштеп" қою үшін BR тегін қолдану қажет. Броузер кескіндеу кезінде осы
тег шыққан орынға жолдарды аударып қояды.
НАЗАР АУДАРЫҢЫЗ! BR ТЕГІ BR ЖАБАТЫН ЭЛЕМЕНТІСІЗ ҚОЛДАНЫЛАДЫ.
HTML-де басқа да қасиеттері ұқсас бірнеше тегтер бар. Оларды қарапайым
түрде бос (немесе жалғыз) деп атайды және де олар "ішкі" толтырулардан
тұрмайды. Егер сізге тексттің бір анықталған жерінде бөлінбейтінін жасау
қажет болса, онда осы жерге NOBR тегін жазыңыз.
Тексті параграфтерге бөлу үшін P параметрлер тегі қолданылады.
Дәлірек айтқанда, параграф P...P тегтерінің ішіне орналасады,
бірақ та іштестірілген параграфтар болмайтындықтан, жабылатын тегті
жазбауға болады.
P тегінде параграфтың ішіндегі текстті тегістеу әдісіне көрсететін
ALIGN параметрі бар: текст оң жақ шеті бойынша (RIGHT), сол жақ шеті
бойынша (LEFT), ортасы бойынша (CENTER) немесе ұзындығы бойынша (JUSTIFY)
тегістелуі мүмкін. Егер параметр көрсетілмесе, онда текст сол жақ шеті
бойынша тегістеледі.
Параграфты ортаға жазу үшін келесі түрдегі тегті қолдануға болады:
CENTER...CENTER
Текстті бөлікке бөлудің тағы бір әдісін горизонтальді сызық деп атауға
болады. Сызық HTML тілінің элементі болып табылады және текстке
HR параметрлер
тегінің көмегімен қойылады, мұндағы параметрлер келесі түрде болуы мүмкін:
WIDTH сызықтың ұзындығын береді. HTML-де өлшем бірлігі шығару
құрылғысының нүктесімен есептеледі, яғни HR тегінің параметрі ретінде
WIDTH=100 деп көрсетсеңіз, онда ұзындығы 100 нүктеден тұратын сызық
құрасыз. Бірақ та бұл әдістің қолайлы емес екені көрініп тұр, себебі құжат
әр түрлі шығару құрылғыларында әр түрлі болып кескінделуі мүмкін. Сол
себепті HTML-де элементтердің ТӘУЕЛДІ өлшемдерін беру мүмкіндігі бар, яғни
кескіндеу облысының жалпы ұзындықтан пайызы (броузер немесе қағаздың беті).
Мысалы: HR тегінде WIDTH=50% параметрін көрсетіңіз, сіз құжаттың
кескінделу облысының қақ ортасындағы сызықты аласыз.
SIZE – сызықтың қалыңдығын береді.
NOSHADE – егер бұл параметр берілген болса, онда сызықтың көлеңкесі
болмайды.
Егер осы моментте алынған бетті қарайтын болсақ, онда ол бір түсті
болып көрінеді. Бір қарағанда не екені түсініксіз (егер терезенің басына
қарамайтын болсақ). Бетке "басты" тақырып жетпейді, яғни тақырып құжаттың
денесінде. HTML тілінде алты түрден тұратын тақырып аты бар. Оларды құру
үшін H1...–H1,...,H6...H6 тегтері қолданылады. Тегтердің аттары олардың
қолданылуын анықтайтын ағылшынның Heading (яғни, тақырып) сөзінен алынған.
Өлшем 1 ең үлкен, өлшем 6 ең кіші шрифтке сәйкес келеді. Олай болса,
тексттің негізгі жолының алдына
H1Welcome to my homepage!H1
жолын жазып, біздің бетті жазуды бастаймыз.
Енді біздің бетті броузерде қараймыз. Енді бет бұрынғыдан қарағанда
жақсырақ көрінеді. Hn тегтері блокты болып табылады, олардың қолданылу
жерінде абзацтарға бөлу жүргізіледі.
Тексттің шрифттерін көркемдеудің басқа жабдықтары болып курсивпен және
қарайтылған түрмен жазу табылады. Осы әдістермен тексттегі кейбір сөздерді,
тақырыптарды белгілеуге болады. Мысалы, бірінші және екінші деңгейдегі
тақырыптарды Hn тегтерінің көмегімен, ал үшінші деңгейдегі тақырыпты
қарайтылған шрифтпен белгілеу өте ыңғайлы. Курсивпен белгілеу I (Italic
сөзінен), ал қарайтылған шрифтпен белгілеу B (Bold сөзінен) тегінің
көмегімен жүзеге асады.
Сонымен қатар HTML тілінде emphasis – жалпылама белгілеу ұғымы бар. Ол
EM...EM тегтерінің көмегімен жүргізіледі. Мұндай белгілеу– құжаттың
логикалық құрылысын сипаттайды. Осындай әдіспен белгіленген текст курсивпен
кескінделеді.
Логикалық белгілеудің басқа жабдығы ретінде келесі тегті есептеуге
болады:
STRONG...STRONG
Ол тексттің бөлігін күшейту үшін қолданылады. Тегтің мазмұны
қарайтылған шрифтпен кескінделеді.
Келесі тегтердің көмегімен шрифттердің өлшемін және түсін өзгертуге
болады:
FONT параметрлер...FONT
Параметрлер келесі түрде болуы мүмкін:
SIZE=``value немесе value'' – шрифттің абсолютті немесе тәуелді өлшемін
береді. Тәуелді өлшем базалық өлшемнің қатынасы бойынша беріледі.
Қабылдайтын мәндерінің диапазоны – бірден жетіге дейін.
COLOR – текст түсін көрсетеді.
FACE – Microsoft Internet Explorer және Netscape Navigator кеңеймесі.
Текст үшін гарнитураларды (гарнитуралар тізімі, бар шрифттер жүйесінен
қажеттісі таңдалатын болады) беруге көмектеседі. Ақырғы нәтиже жүйеде
орналасқан шрифттердің санынан және әр түрлілігінен тәуелді. Мысал:
FONT FACE="Arial, Times Roman" Текстті басқа гарнитурамен белгілеу
мысалы. FONT
Барлық құжат үшін шрифттердің базалық өлшемін
BASEFONT параметрлер
тегінің көмегімен беруге болады. Ол бір ғана параметрден тұрады:
SIZE – шрифтің өлшемін береді.
Қолданушының назарын аудару үшін кейде жанып-сөнетін текст қажет
болады. Ол үшін
BLINK...BLINK
тегін қолданамыз. Бұл тегті байқап қолданған дұрыс, себебі жанып-сөнетін
обьектілерге қарау әр уақытта жағымды емес.
Кей жағдайда құжатқа цитаталарды, программаның бастапқы текстін немесе
қарапайым текстік құжатты қою қажет болады. HTML тілінде бұл жағдайлар үшін
мүмкіндіктер қарастырылған.
HTML тілінде цитаталар CITE...CITE тегтерінің көмегімен жазылады.
Құжатқа бастапқы текстті қою үшін
CODE...CODE тегін қолдануға болады.
Текст белгіленген ұзындығы бойынша шрифтпен жазылатын болады.
Құжатта белгіленген форматпен тексттің бар болу жағдайының қажеттілігі
ерекше таратылған. Мұндай мүмкіндік, мысалға электрондық хаттардың мазмұнын
текстке немесе Usenet желісінен мақалаларды қосқан кезде қолданылады. Мұның
барлығы
PRE
1-текст ...
...
N-текст PRE
тегтерінің көмегімен жасалады. Бұл жағдайда ол мына түрде кескінделуі
мүмкін:
1-текст
...
...
N-текст
HTML тілінде адрестерді жазу үшін қолданылатын жабдық бар. Адрес
ADDRESS...ADDRESS
тегтерінің көмегімен жазылады. Броузерлер оны курсивпен белгілейді, яғни
ADDRESS ул. Пирогова, д. 2 ADDRESS жолы
ул. Пирогова, д. 2. түрінде кескінделеді.

Тізімдермен жұмыс үшін қолданылатын негізгі тегтер
HTML тілінде тізімдердің үш түрі болады: нөмерленген, нөмерленбеген
және терминдер тізімі. Нөмерленбеген тізім келесі блоктың көмегімен
жазылады:
UL
LI элемент
LI элемент
...
UL
Тізім мына түрде бейнеленетін болады:
• Элемент 1
• Элемент 2
...
Нөмерленген тізімнің нөмерленбеген тізімнен айырмашылығы пунктің
жанындағы қою нүктелердің орнына пунктің реттік нөмері қойылады. Ол мына
түрде бейнеленеді:
OL
LI элемент
LI элемент
...
OL
Ол мына түрде бейнеленеді:
1. Элемент
2. Элемент
...
Тізімнің үшінші түрі терминдердің тізімі болып табылады. Ол барлық
мүмкіндіктерді көркемдеу үшін өте қолайлы. Мұндай тізімді келесі блоктың
көмегімен жазуға болады:
DL
DT 1-термин DD1-сипаттамасы
DT 2-термин DD2-сипаттамасы
...
DL
Алынатын тізімнің түрі келесі түрде болады:
1-термин
1-сипаттамасы
2-термин
2-сипаттамасы
...
Тексттің екі жағының шеттерін құру үшін BLACKQUOTE...BLACKQUOTE
тегін қолдануға болады.

Текстті түстермен кескіндеу
"Сolor" (%Color;) типті атрибуттың мәні түсті анықтайды. Түстің мәні он
алтылық саннан (диез белгісімен басталатын) немесе түстің келесі он алты
атынан тұруы мүмкін. Түстердің атын регистр ескеріп отырады.
Түстердің аттары және RGB мәндері
Black = "#000000" Green = "#008000"
Silver = "#C0C0C0" Lime = #00FF00"
Gray = "#808080" Olive = "#808000"
White = "#FFFFFF" Yellow = "#FFFF00"
Maroon = "#800000" Navy = #000080"
Red = "#FF0000" Blue = "#0000FF"
Purple = "#800080" Teal = "#008080"
Fuchsia = "#FF00FF" Aqua = "#00FFFF"
Яғни, "#FF0000" мәні және "Red" екеуі қызыл түсті береді.
BODY BGCOLOR – құжат фонының түсін анықтайды.
BODY TEXT – текст түсін анықтайды.
FONT COLOR – шрифтің түсін анықтайды.

HTML-құжатында графиканы қолдану
HTML-де бейнелерді қолдау – графика әлеміне жол. Құжатқа суретті қою
үшін Сіз IMG элементін қолданасыз. Қойылған бейне сіздің құжатыңыздың бір
бөлігі болып табылады; егер қолданушы сіздің құжатыңызды қолданатын болса,
онда бейне де онымен бірге жүктеледі және оның бөлігі тәрізді шығарылады.
Егер броузер тек арнайы форматты қолдайтын болса, онда қолданушы
кескінді көре алады. Ең ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.