HTML –де сайттың бірінші беті

Жұмыс түрі: Реферат
Тегін: Антиплагиат
Көлемі: 18 бет
Таңдаулыға:

ЕСЕП БЕРУ
Тақырыбы: HTML - де сайттың бірінші беті

Алматы 2020

Мазмұны
Кіріспе ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...3
1. Негізгі бөлім. HTML тілі туралы түсінік
1.1 Алғашқы Web - беттің мысалы ... ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ...4
1.2 ТЕКСТТЕРДІ ФОРМАТТАУ ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ..7
1.3 ТАҚЫРЫПТАР МЕН АБЗАЦТАРДЫ ФОРМАТТАУ және ТІЗІМДЕР ... .9
1.4 ГИПЕРСІЛТЕМЕЛЕР түрлері және ГРАФИКАНЫ ҚОЮ ТЕГІ ... ... ... ... 11
1.5 ФИЛЬМДЕР ФОНДЫҚ МУЗЫКА және БЕТТЕРДІҢ ПАРАМЕТРЛЕРІН ТУРАЛАУ ... ... ... ... ... ... .13
1.6 ФРЕЙМДЕР туралы түсінік және ТАБЛИЦАЛАР түрлері ... ... ... ... ... ... 15
ҚОРЫТЫНДЫ ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 20
ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ... 21

КІРІСПЕ
HTML (ағылш. Hypertext Markup Language -- еренмәтін белгілеу тілі) -- вебшолғышта көрсетілуге арналған еренмәтін мен басқа ақпараттардан тұратын веб-парақшаларды жасауға арналған белгілеу тілі.
HTML (HyperTextMarkupLanguage) - бұл құжаттарды кодтау үшін қолданылатын гипермәтіндік белгілеу тілі. HTML беттер ғаламторда браузерден серверге, жай мәтін немесе жасырын символдар(шифрлар) арқылы HTTP және HTTPS хаттамаларымен жіберіледі.
Жалпы түсінік

HTML
HTML тілін британ ғалымы Тим Бернерс-Ли 1986-1991 жылдары Женева (Швейцария) Еуропалық ядролық зерттеу орталығында жасап шығарған болатын. HTML алғашында ғылыми және техникалық құжаттарды халық арасында алмастыруға арналған тіл ретінде жасалған. HTML көмегімен әдемі жасалған құжатты оңай және тез жасауға болады. Құрамының өзгеруінен басқа HTML-ға гипермәтіндерді оқу қасиеті қосылған. Бейнематериалдық қасиеттер кейіннен қосылған. Бағдарламалар құжаттарды құрылымдау және пішімдеу, оларды байланыстыру құралдарына қайта шығару (бейнелеу) құралы ретінде құрылды.
Браузерлер
HTML тіліндегі белгісі бар (бұндай құжаттар әдетте .html немесе .htm форматында болады ) мәтіндік құжаттар форматталған түрде көрсететін арнайы бағдарламаларымен өңделеді. Бұндай бағдарламаларды веб-шолғыштар немесе браузерлер дейді, әдетте олар пайдаланушының талаптарын ыңғайлы интерфейспен және оларды көрумен қамтамасыз етеді. Қазіргі кездегі ең атақты веб-браузерлер: Google Chrome, Яндекс, Mozilla Firefox, Opera, Internet Explorer және Safari.

1. HTML тілі туралы түсінік
1.1 Алғашқы Web - беттің мысалы
Ең алдымен HTML - тілін үйрену үшін мысалы бар тексттерді html кеңейтілулері бар файлдарда сақтаймыз. Негізінен HTML - файлдардың html немесе htm деген кеңейтілулері болады. Бірінші кеңету MS DOS - тың мақұлдауын қанағаттандырады. Екінші сәл болса оңайырақ келеді. Екі кеңейтуді де қолдана беруге болады. Байқағанымыздай HTML - документ адам тіліндегідей тілде жазылады, бірақ түсініксіз сөздермен жазылады. Одан да мысал келтіріп көрейік:
Алғашқы Web - бет
Алғашқы Web - беттің мысалы
Бұл Web - бет алғашқы құрған мысал болып табылады. Осылай кішкене беттермен құра бастап, үйрене де түсеміз. Бұл мысалды міндетті түрде html немесе htm кеңейтулі файлда сақтау керек екенін ұмытпаңыз.

Сурет *. Web - документтің дайын күйінде көрсетілуі.

Сурет * - да көріп отырғанымыздай Web - беттің көп бөлігін текст алып жатыр. Бірақ мұнда бізге түсініксіз болып отырғаны бұл "" , "" , үлкен немесе кіші белгілері болып отыр. Олар не үшін керек?
Бұл сөздер тегтер деп аталады. Тегтер текстер мен текст емес элем- енттерді форматтауға қолданылады: Графика , қосымша объектілер, Java - апплеттер және т.б. Бір сөзбен айтқанда, тегтер тексттерді HTML документтің ішінде форматтайды. Айталық егер сіз қандай да бір тексттің бір бөлігін курсив түрінде белгілегіңіз келсе немесе тақырып түрінде форматтағыңыз келсе, онда оны төменде көрсетілген сәйкес тегтер арасына қоя аласыз.
Бұл текст белгіленеді I Курсивпен I
Ал мынау тақырып
Бұл жерде және тегтері біздің мысалды бетімізде қолданылды - сіз оны таныған шығарсыз. Бұлар бірінші дәрежелі тақырыпты білдіреді. Сонымен қатар екінші, үшінші, төртінші, бесінші, алтыншы дәрежелі тақырыптарды білдіретін тегтер бар. Біз мысалдарда текстті екі жұп тегтің арасына қоямыз. Мұндай жұп тегтің түрі екеу - ақ: ашылатын және жабылатын. Жоғарыда қарастырған мысалымызда ашылатын тегтер және болып табылады, ал жабылатын тегтер - және . Ал мынау белгі "" - жабылған тегтің белгісі болып табылады. Ойлап қарасаңыз жатқан логика. Текстте қандай да бір форматтау қолдану керек болса , онда оны көрсету керек , яғни қай фрагментке қолдану керек екенін көрсету керек. Форматталатын тексттік фрагменттің басы мен соңын көрсету керек. Ашылған және жабылған тегтер дәл сондай фрагменттерге көрсетеді. Жұп тегтің ішінде тег болуы мүмкін. Төмендегі мысалды қарастырамыз.
Бұл жартылай қалың текст,
ал бұл және курсивті
.
тегі текстті жартылай қалың етіп белгілейді. Бұл тегтің ішінде және бір жұп тег бар, ол курсивті етіп белгілейді. Бұл дегеніміз және тегтеріндегі текст тек қана жартылай қалың емес, сонымен қатар курсивті болып та белгіленеді. тегі тегінің ішінде жатыр деп айтады. Web - көрсеткіш мұны жақсы түсінеді, ненің неге екенін, сөйтіп текстті дұрыс етіп шығарады. Егер сіз былай етіп істесеңіз:
Бұл жартылай қалың текст,
ал бұл және курсивті
.
сізді ол танымауы да әбден мүмкін. Бір сөзбен айтқанда,әрбір ашылған тегке жабылған тег сәйкес келуі керек. Жоғарыда қарастырылғандай қателіктің тууына жол бермеуіңіз керек.Әйтпесе сіздің бетіңіздің істемеуі әбден мүмкін.
Тегтер салыну дәрежесі бойынша ажыратылады.Жоғарыда көрсетілген мысалда тегі бірінші дәрежелі салынуда болды, ал тегі екінші болды.

ең алғашқы тег кейінгі ішіндегі тегке ата - ана(родительским) , ал іштегі тег оның баласы (дочерной) болып табылады. Сонымен қатар баласы басқа ішіндегі тегтерге ата - ана (родительской) бола алады. Біздің мысалда тегі тегінің баласы (дочерный), ал тегі тегінің баласы (дочерный ) болып табылады, яғни ол және - ға да ата - ана (родительской) бола алады. Сондай - ақ жалғыз тегтер де болады. Мысал ретінде текстке сурет қоя алатын тегті - айтуға болады. Документке сурет қою үшін тексттік фрагменттің шекарасын көрсетудің керегі жоқ, тек қана суретті қоятын орынды көрсетсе жеткілікті болады. Сонда да HTML - дің көптеген тегтері жұп болып келеді. Ал енді
және
тегтері не үшін керек деп сұраңыз? Олар арнайы текстті көрсетеді, листингке , тақырыптарға қатысы жоқ, яғни тексттің бөлек абзацы басқа осы сияқты абзацтардан бөлек кеңістікті. Мысал үшін тексттің жалғыз абзацын екіге бөліп көрейік, не шығар екен. Төмендегі мысалға қарайық. Бұл мысалды кез-келген *.html кеңейтілуі бар файлда сақтаймыз.

1.2 ТЕКСТТЕРДІ ФОРМАТТАУ
HTML - дің негізін қарастырдық, енді нақты тегтерге және олардың мүмкіндіктерін қарастырайық. Ең алдымен қарапайым текстті форматтауды қарастырамыз. Оның мүмкіндігі көптеген текстік процессорлардың аналогы болып табылады. Қарапайым текстті жұп тегтің және арасына орналастырса жеткілікті. Web - көрсеткіш жоғарыдағы мысалдар сияқты терезеден көрсетеді. Егер бөлек символдарды бөлек түспен немесе бөлек етіп белгілегіңіз келсе, онда HTML сізге сәйкесінше тегтерді ұсына алады. Таблица 1.1 - ден олардың ең негіздерін қарастыра аламыз.

Текстті стандартты шрифттен үлкен
қылып көрсету.
... ... ...
Жылжымалы текст. Бұл тегті тек қана
Netscape Navigator ғана қолдай алады.
... ... ... ... ...
Курсив.
... ... .
Текстті стандартты шрифтен кіші қылып
көрсету.
... ... .
Қаралау шрифт.
... ... ... ...
Жоғарғы индекс.
[ ... ... ... ...]
Төменгі индекс.
... ... ... ... .
Моноенді шрифт. Моноенді шрифт деп
барлық символы бірдей енді болатын
шрифтті айтады.
... ... ... ... ...
Асты сызылған текст

Кесте 1.1 Символдарда форматтау тегі

Мына тегтерді қолданып бірнеше мысал құрайық.
B Жартылай қалың текст B
Үлкен
және
кіші
Судың химиялық формуласы - H[2]0
Тегтердің бірнешеуінің бірі - және жұбы болып табылады. және тегтері шрифттің түсі мен өлшемдерін анықтап береді. Олар мынадай күйде болады.
[COLOR="#{Шрифт түсінің коды}""{Түстің аты}"]
Сіз көріп тұрғандай бұл тегтің атрибуттар деп аталатын қосымша параметрлері бар. тегінің атрибуттары өте көп, бірақ біз олардың тек негізгі үшеуін ғана қарастырамыз. Бұл атрибуттар шрифттің керекті параметрлерін береді. Есте сақтаңыз, олар тек ашылған тегте ғана көрсетіледі, керісінше болуы мүмкін емес.
Атрибут шрифтің түрін береді. Мысалы "Arial" немесе "Courier New". Берілген түрдің аты жақшаның ішінде теңнен соң жазылады. Бірден бірінен соң бірін үтір арқылы беруге болады.
Атрибут шрифттің өлшемін береді. Web - көрсеткіш әртүрлі шрифттің тек қана жеті өлшемін көрсете алады. Бұл өлшемдер 1 - ден 7 - ге дейін өсуі бойынша нөмірленген.
Атрибут сіздің текстіңізді түрлі түске бояйды, бірақ кемпірқосақтың барлық түсімен емес. Себебі әрбір компьютерде бірдей көрінбеуі мүмкін, яғни әр компьютердің бейнекартасы әртүрлі болуы мүмкін. Сондықтан бір жүйеге келтірген.

1.3 ТАҚЫРЫПТАР МЕН АБЗАЦТАРДЫ ФОРМАТТАУ және ТІЗІМДЕР
Біз осы уақытқа дейін HTML - дің ішіндегі жеке символдар мен сөздерді форматтауды қарастырдық. Көбіне қарай жүгіруге тура келеді, яғни қандай да бір блок тексттің қалай форматталатынын қарастыруымыз керек. Кейбір жұп тегтердің тексттік блокқа жауап беретінін біз қарастырғанбыз. Бұлар
-
әр дәрежелі тақырыптарды форматтайтын тегтер болып табылады және сонымен қатар оларға сәйкес жабылатын тегтер мен
қарапайым абзац тегі.
Тег Hx ... ...Hx , x - 1 - ден 6 - дейінгі сандар. Олар тақырыптың дәрежесін білдіреді. Ондағы текстті сәйкесінше тақырып дәрежесіне айналдырады. Web - көрсеткіш тақырыптарды үлкен шрифтпен көрсетеді , яғни қарапайым тексттен ерекше етіп көрсетеді.
Тег
... .
тексттерді бөлек - бөлек абзацтарға бөледі. Онда мынадай атрибуттың болуы мүмкін: ALIGN="leftcenterright", абзац тексттерінің туралануына мүмкіндік береді. Мұндағы үш мәннің бәрі қолданылады: left, center және right , сәйкесінше сол жақтық , ортаңғы және оқ жақтық туралауды білдіреді.
Бұл текст ортаға тураланған
HTML - дегі тізімдерді форматтауды да қарастырсақ артық кетпес деп ойлаймын. Тізім - бұл тексттегі абзацтардың реттелген, белгілі бір символдармен белгіленген түрлері: маркирлік және нөмерлік. Маркирлік тізімнің мысалы төменде көрсетілген.
Бір;
Екі;
Үш.
Ал мынау нөмерлік тізім:
Бір;
Екі;
Үш.
HTML - маркирлік тізімді қалай құрса, нөмерлік тізімді де солай құрастыра алады. Бұл екі түрлі тізім практика жүзінде бірдей, керек десеңіз сәйкес тегтер арқылы құрылады. Маркирлік тізімде
және
жұп тегтерінің арасына текстті орналастырса жеткілікті. Ал нөмерлікте
және
тегтерінің арасына.Тізімнің әрбір қатары тег болып саналады.
LI.
UL
LI бір;
LI екі;
үш;
тегі өте сезікті болып көрінеді. Себебі жоғарыдағы мысалда жабылған жұбы жоқ. HTML - оны керек етпейді.
тегінің тізімдегі көріністерді басқаратын атрибуты бар:
... ..
COMPACT атрибуты Web - көрсеткіште тізімді жақсы және шағын етіп көрсету үшін қолданылады.
TYPE атрибуты тізім белгіленетін белгіні орнатады.Мұнда оның үш мәнінің біреуі қолданылады. Олар сәйкесінше іші боялған шеңбер, іші боялмаған шеңбер және төртбұрыш деп бөлінеді. Егер бұлардың ешқайсысын таңдамасаңыз Web - көрсеткіш тізімді іші боялған шеңбермен белгілейді. Бұл атрибутты тегі қолдайды. Осылай бөлек - бөлек, әртүрлі тізімдерді форматтауға болады. Енді
және
тегтерін қарастырайық. Бұл мәселе туралы жоғарыда айтылып өтілген сияқты. Бұл да нөмірленген тізім сияқты беріледі. Мұндағы айырмашылық тек тегтердің ішіне жазылатын атрибуттарында ғана болып саналады. Олар міндетті түрде көп.
... ... ... ... ..
Нөмерлік тег те тізімнің TYPE - атрибутын қолдайды. Ал қазір оның мәні өзгереді. Бұл атрибуттың форматы мына түрде болады.
TYPE="AaIi1".
Тізімді үлкен латын алфавиттерімен белгілейді.
Кіші латын алфавиттерімен белгілейді.
Үлкен рим цифрларымен белгілейді.
Кіші рим цифрларымен белгілейді.
Арабша цифрлармен белгілейді.
Егер бұл атрибуттардың ешқайсысы таңдалмаса, онда автоматты түрде араб цифрларымен белгіленеді.

1.4 ГИПЕРСІЛТЕМЕЛЕР түрлері және ГРАФИКАНЫ ҚОЮ ТЕГІ
Осы уақытқа дейін тексттер туралы айтқанымыз жетер. Енді бір қиынына қарастырып көрсек қайтеді? Мысалы үшін гиперсілтемелер туралы.
Дәл осы гиперсілтемелер барлық HTML - документтерді бір - бірімен байланыстырып, электронды шылауға (паутина) байланыстырды. Осының көмегі арқылы жеңіл түрде дүние жүзіне компьтердің қасынан кетпей саяхат қыла аламыз. Гиперсілтемелер және олардың бір - бірімен байланысын қарастырып, түсіну үшін ең алдымен интернет адрес туралы түсінік алуымыз керек. Ал енді төменде гиперсілтемелерден алшақтап интернет протоколдары туралы қарастырамыз.
Жоғарыда айтылғандай Web - серверден қандай да бір HTML - документті алу үшін оған документтің аты мен клиенттік компьтердің адресі қамтылған HTTP - сұраныс ... жалғасы

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