HTML гипермәтіндік тілі

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

ЕСЕП БЕРУ
Тақырыбы: Блакнот бағдарламасында веб сайттар құру

Алматы 2020

Мазмұны
1.Кіріспе ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..3
2.Негізгі бөлім.
2.1. HTML гипермәтіндік тілі ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .4
2.2. Web сайт құрудың алғышарттары ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .10
2.3. Блакнот арқылы веб сайт құру ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...12
Қорытынды ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .14
Пайдаланылған әдебиеттер ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ... ... ... ..15

Кіріспе
Әлемдегі ең алғашқы сайт Info.cern.ch 1990 жылы пайда болды. Сайтты жасаған Тим Бернерс-Ли. Сайтта HTTP деректердi беру хаттамасы негізінде жасалған World Wide Web жаңа технологиясы сипаттамасын жариялаған. URIнiң бағыттауын жүйеге және HTMLның гипермәтiн белгiсiнiң тiл негiзделген жаңа технологиясына сипаттама онында жариялады. Сайтта сонымен бiрге қою және серверлер және браузерлердiң жұмысының қағидаларын сипатталды. Сайт болды және тiзбемен интернет- бiрiншi әлемде, Бернерс Тим өйткенi соңыра - сiлтемелердiң басқа сайттарына тiзiм онда таратып салып қойды. Барлық аспаптар Бернерс бiрiншi сайттың жұмысы үшiн қажеттi - ертерек әлi дайындады - соңында 1990 жыл NeXTcube және алғашқы веб-беттi базасында редактордың веб-сi, бiрiншi сервер функционалы бар WorldWideWebнiң бiрiншi гипермәтiн браузерлерi пайда болды.Вебтi әке және оған өмiрге өз идеясын өмiрге келтiрудiң сәтi түстi гипермәтiн мәлiмет алмасу желiлердiң негiз бола алатынын санады. Бернерс 1980 Тим жылында әлi - Enquireнiң кездейсоқ қауымдастықтар мәлiметтi сақтау үшiн қолданушы гипермәтiн программалық қамтамасыз етуiн жасады. Содан соңы, оның әрiптестерiне гиперсiлтемелермен өзара сабақтас гипермәтiн құжаттары жариялауға (CERN ) Женевада ядролық зерттеулердiң Еуропалық орталығында жұмыс iстей ұсынды. Бернерс - iшкi iздестiрушiге гипермәтiн рұқсатының мүмкiндiгi және құжаттарға, сонымен бiрге интернеттiң жаңалықтың қорларына көрсеттi. Нәтижеде, CERNға 1991 жылдың мамырында WWWтың стандартын нығайтылды.
HTML "Hypertext Markup Language", яғни "гипермәтіндік белгілеу тілі"деп түсіндіріледі.
HTML тілі беттің құрылымы мен мазмұнына жауап береді. HTML тегтерден тұрады, ал тег "аз" және "көп"белгілері арасында жасалған атаудан тұрады. Тегтердің мысалдары: h1, p, ul.
HTML тілінің бастапқы мәтінді белгілейтін командалары тег (tag) деп аталынады. Тег символдар тізбегінен тұрады. Барлық тег кіші () символдарынан басталады да, үлкен () символымен аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз - тег орналасады.
Бiр сайтқа интернетiнде жағдайлардың көпшiлiгiнде бiр домен атына сәйкес келедi. Сайттар домен аттары бойынша тап ғаламдық желiлерде белгiленедi. Басқа варианттар болуы мүмкiн: бiр доменмен бiрнеше домендер немесе бiрнеше сайттарына бiр сайты. Әдетте бiрнеше домендерi бар берiлетiн (mail.google.com, news.google.com, maps.google.com) қызметтердiң әртүрлi түрлерi қисынды бөлу үшiн (порталдар веб-) iрi сайттарды қолданады.

HTML гипермәтіндік тілі
HTML "Hypertext Markup Language", яғни "гипермәтіндік белгілеу тілі"деп түсіндіріледі.
HTML тілі беттің құрылымы мен мазмұнына жауап береді. HTML тегтерден тұрады, ал тег "аз" және "көп"белгілері арасында жасалған атаудан тұрады. Тегтердің мысалдары: h1, p, ul.
HTML тілінің бастапқы мәтінді белгілейтін командалары тег (tag) деп аталынады. Тег символдар тізбегінен тұрады. Барлық тег кіші () символдарынан басталады да, үлкен () символымен аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз - тег орналасады.
HTML тіліндегі әрбір тег бір арнаулы қызмет атқарады. Олардың жазылуында әріптер регисторы ешбір роль атқармайды, бас әріпті де, кіші әріптерді де қатар қолдана беруге рұқсат етілген. Бірақ тег атауларын жай мәтіннен айыру мақсатында оларды бас әріппен жазу қалыптасқан. HTML тілінің бір тегі әдетте құжаттың белгілі бір бөлігіне, мысалы бір абзацқа ғана әсер етеді. Осыған орай екі тег қатар қолданылады. Бірі - ашады, екіншісі - жабады. Ашатын тег белгілі бір әсер ету ісін бастайды, ал жабатын тег сол әсерді аяқтайды. Жабу тегтері қиғаш сызық символымен басталуы тиіс.
Кейбір тегтер өз жазылу орнына қарай тек бір ғана әсерін тигізеді. Мұндайда жабу тегі қажет болмай қалады да, ол жазылмайды. Егер тег ретінде HTML тілінде қолданылмайтын түйінді сөз жазылып кетсе, онда оның ешбір әсері болмайды. Броузер арқылы құжат экранда көрсетілген жақта тегтердің өздері бейнеленбей, тек олардың құжат мәтініне тигізетін әсері ғана бөлініп тұр.
Тег атрибуттары.
Көбінесе ашылу тегтерінің тигізетін әсерлерін түрлендіретін олардың атрибуттары болады. Атрибуттар немесе сипаттамалар - тег атауының және бір бірінен бос орын арқылы бөлініп жазылытын қосымша түйінді сөздерден тұрады. Кейбір атрибуттар оның мәнін жазуды талап етеді. Атрибут мәні оның түйінді сөзінен теңдік белгісі (=) арқылы бөлініп жазылады. Атрибут мәні қостырнақшаға алынып жазылуы тиіс, бірақ кейде қостырнақшаны жазбауға да болады.
Түсініктемелер.
Программалау тілдерінде түсінік беретін сөздер - комментарийлер жазылатыны сияқты мұнда да программаның орындалуына еш әсер етпей, оны түсінуді жеңілдететін түсініктеме мәтіндер жазып отыруға болады. HTML тілі комментарийлері арнайы символдардан басталады да, түсінік беретін мәтін осыған жалғаса жазылады.
Тегтер жұптық және жалғыз. Қос тегтерде мәтін және басқа тегтер болуы мүмкін. Жұптасқан тегтерде, бір адамға қарағанда, екінші жартысы бар-жабатын тег:
h1тақырып мәтіні h1
Жұптық тегтердің жабатын бөлігінде аты алдында ("слэш") белгісі қойылады.Жұптық тегтерге басқа тегтерді салуға болады. Мысалы, тізімдер сияқты:
ul
liтізім элементі li
ul
Ішкі тегтерде әрдайым дұрыс жабу тәртібін қадағалау керек. Салынған тег ата-анасынан кейін жабыла алмайды:
ulliтізім элементі ulli !-- Жаман -
ulliтізім элементі li ul !-- Жақсы -
Барлық тегтерді басқа тегтерге салуға болмайды, мысалы, h1 тегті p - ға салуға болмайды.
Тек жұп ғана емес, жеке тегтер де бар. Мысалы, img тегті белгіге сурет қосады.
Өзі img мағынасы жоқ. Бұл тег шын мәнінде пайдалы болу үшін оның ішінде суретке апаратын мекенжайды жазу керек. Бұл src атрибуты арқылы жасалады:
img src= " keks.png"
Тегтің бірнеше атрибуттары болуы мүмкін. Бұл жағдайда олар бос орын арқылы жазылады:
тег атрибут1= "мәндер1" атрибут2="мәндер2"
Мысалы, суретті қаласаңыз, өлшемдерді орнатуға болады:
img src= " keks.png "width=" 200 "height= "100"
Comments
Символдар арасында жасалған Код !-- және -, жұмыс істемейді. Егер бұл таңбалар жойылса, код іске қосылады, бұл "іздеу"деп аталады. Түсіндірмелердің көмегімен, әдетте, қандай да бір кодты уақытша өшіреді немесе кеңестер мен түсіндірулерді қалдырады.
CSS "Cascading Style Sheets", яғни "каскадты стильдер кестелері"деп аталады.CSS тілі беттің сыртқы түріне жауап береді
CSS көмегімен кез келген тег үшін параметрлерді орнатуға болады: ені мен биіктігі, шегініс, қаріп түсі мен өлшемі, фоны және т.б. Осы параметрлердің барлығы келесі пішімде сипаттармен белгіленеді:
қасиеті: мәні;
Мысалы:
түсі: red;
padding: 10px;
Тегтерге стильдер class атрибуты арқылы жиі қосылады.
Мысалы, егер feature-kitten класында сипатталған белгілі бір стильдер p тегіне қолданылғанын қаласаңыз, онда таңбада осылай жазамыз:
p class= "feature-kitten"... p

CSS ережесі-бұл сипаттар тобы және олардың мәндері, ол селектор көрсететін тегтерге толығымен қолданылады деп айтуға болады.
Және бұл көрінеді
селектор {
сипат1: мәні;
сипат2: мәні;
}
Стильдерді тек class атрибуты арқылы ғана емес, тег арқылы да қоюға болады. Селектор CSS ережелерінен қасиеттері қандай тегтерге қолданылатынын көрсетеді. Селекторлар тегтермен оңай жұмыс істейді: олар тиісті аты бар барлық тегтерді таңдайды.
p { color: red; }
Мысалы, селектор p болып табылады және ол P атымен (яғни p тегтері) бар барлық тегтерді таңдайды, ал басқа аты бар тегтерді, мысалы h1, таңдамайды.
Стилизация сыныптар бойынша қойылса, стильдер тек осындай класстары бар тегтерге қолданылады.
.название_класса {
қасиеті: мәні;
}
Сыныптарды микстеу
HTML элементінде қанша сынып болуы мүмкін, бұл жағдайда олар бос орын арқылы class атрибуты ретінде аталады:
li class= "product" тауарli
li class="product hit" тауар және сату хитіli
li class="product hit sale" тауар, сату хиті және ски-и-и-идкой! li
Әдетте миксование қолданылады: бір сыныпқа жалпы безендіруді шығарады, ал қосымша сыныптарда оның модификацияларын сипаттайды.
Comments
CSS-да түсініктемелер бар, олардың HTML-түсіндірмелерден айырмашылығы, код немесе кеңестер * және *символдар арасында жазылады.
Әрбір HTML құжат түрі декларациясынан немесе "доктайпа" - дан басталады. Құжат түрі браузер HTML нұсқасын анықтап, бетті дұрыс көрсету үшін қажет.
!DOCTYPE html
Ең қарапайым HTML-бет кемінде үш тегтен тұрады: html, head және body. Head Тегінде әдетте тақырып, кілтсөздер, бет сипаттамасы және басқа да қызметтік деректер, сондай-ақ стильдер мен басқа да сыртқы ресурстар қосылады. Бұл тегтің мазмұны тікелей бетте көрсетілмейді. Ал body Тегінде браузер терезесінде көрсетілетін бет Мазмұны сақталады.
Бет мәнерлерін қосу үшін linkтег бар. Ол үшін атрибуты бар, онда стильді файлдың мекен-жайы беріледі, ал stylesheet rel атрибутының мәні браузерге, біз басқа нәрсе емес, нақ стильдерді қосамыз деп Айтады.
head
link = " _файл_стильдің мекенжайы.css " rel="stylesheet"
head
Head - да орналасқан тағы бір элемент titleтег. Онда браузер қойындысында көрсетілетін бет тақырыбы көрсетіледі. Тақырып бойынша бұл бет браузерде ашылмаған кезде де, іздеу нәтижелерінде немесе браузерлік бетбелгілерде бейнеленуі керек.
head
titleкурстар-HTML Academy -- title
head
Head ішінде орналасқан тағы бір маңызды тег - metaтег. Ол жалғыз, яғни соңында бу жабатын тег талап етпейді. Meta көмегімен браузерге, іздеу роботына немесе басқа құрылғыға сіздің сайтыңыз туралы түрлі қызметтік ақпаратты (немесе метаақпаратты) хабарлай аласыз: мәтінді кодтау, мазмұнды сипаттау және т.б. Бұл үшін әр түрлі атрибуттар мен олардың мәндері бар meta тегтері қолданылады.
HTML бет мәтінін кодтау charset төлсипаты арқылы көрсетіледі:
meta charset= "кодтау атауы"
Ең кең таралған заманауи кодтау-utf-8.
Кілттік сөздер тізімі meta тегімен беріледі, онда name атрибуты keywords мағынасы бар. Кілт сөздер (бет мазмұнындағы ең маңызды сөздер) мазмұн атрибуты үтір арқылы көрсетіледі:
meta name= "keywords" content="маңызды, түйінді, сөздер"
Беттің қысқаша сипаттамасы (немесе аннотация) ұқсас, тек name төлсипатының мәні description-ге өзгереді:
meta name= "description"content="қысқаша сипаттама"
Ішінде body бетте көрсетілетін тегтер бар. Мысалы, main тег басқа беттерде қайталанбайтын беттің негізгі мазмұнын анықтайды. Әдетте бетте бір mainқолданылады.
Header беттің кіріспе бөлігін қамтиды, оны жиі "бас киім" деп атайды, ал footer тегті беттің соңғы бөлігін немесе "жертөле"деп сипаттайды. Үлкен мағыналы (немесе "логикалық") бөлімді білдіретін section тег бар.
Article Тег ақпараттың тұтас, аяқталған және дербес фрагментін білдіреді.
Негізгі навигациясы бар логикалық бөлім құру үшін TAG nav (ағылшын тілінен "navigation"қысқаруы) арналған. Әдетте, nav басқа беттерге сілтемелерді немесе ағымдағы бет бойынша шарлауды қамтиды.
Тег aside негізгі тікелей байланысты емес қосымша мазмұнды қамтиды. Мұндай блоктарды жиі "сайдбар" немесе бүйірлік панельдер деп атайды.
Мәтіннің негізгі құрылымын жасау үшін тақырыптар қолданылады. HTML-да бүкіл тақырып тегтері бар: h1 бастап h6дейін. Тег h1 ең маңызды тақырып (жоғарғы деңгей тақырыбы), ал тег h6 төменгі деңгейдің астын білдіреді.
h1HTML ерекшелігі h1
h21-БӨЛІМ КІРІСПЕ h2
h31.1 бөлім тілдің шығу тегіh3
Мәтіннің негізгі құрылымын тақырыптардың көмегімен жасайды,ал кіші параграфтардың (немесе абзацтардың) көмегімен құрылады. Параграфтарды белгілеу үшін pтег арналған. Әдепкі бойынша, ежелер жаңа жолдан басталып, қалған мазмұннан жоғарғы және төменгі шегімен бөлінеді.
Мәтінді белгілеу
Тізімдер
Реттелмеген тізім
Тег ul ("unordered list" қысқартуы). Элементтердің тәртібі маңызды емес кезде қолданылады. Мысалы, мәзірдегі сілтемелер тізімін, тауардың артықшылықтарын, өнім құрамындағы ингредиенттерді белгілеу үшін.
Тікелей ul Тегінде тек тізім элементтері мен тармақтарын білдіретін li тегтері ("list item" қысқартуы) болуы мүмкін:

ul
liмен тізім пункті, кез келген жерде болуы мүмкін li
liмен тізімді таптым, Мен де тәртіп маңызды емес li
ul
Әдепкі бойынша ul элементтер мәтін түсі сияқты түсті таңбалармен белгіленеді.
Реттелген тізім
Тег ol ("ordered list" қысқартуы). Бұл тізімде элементтердің қай ретпен жүргені маңызды. Реттелген тізімдер алгоритмдерді, нұсқаулықтарды, рецептілерді, жарыс нәтижелерін және т.б. белгілеу үшін қолайлы.
Реттелген тізім тармақтары де liтегімен көрсетіледі. Код үлгісі:
ol
liмен бірінші және тек бірінші li
liмен екіншіliболмаса, мен емес,
liұзақ жылдардан кейін үшінші? Әрқашан! li
ol
Әдепкі бойынша ol элементінің алдында олардың реттік нөмірі қойылады. Ol бірнеше атрибуттар болуы мүмкін: start, reversed және type.
Start атрибуты тармақтардың нөмірленуінің бастапқы санын өзгертеді. Мүмкін теріс.
Reversed атрибуты нөмірлеу бағытын керісінше өзгертеді. Бұл төлсипат мәнді қажет етпейді.
Type атрибутының көмегімен таңбалардың түрлі түрлерін көрсетуге болады: кіші және бас латын әріптері немесе рим сандары.
Тег dl ("description list"қысқартуы). Сипаттама тізімі сұрақ-жауаптарды, атаулар мен анықтамаларды, санаттар мен тақырыптарды белгілеу үшін қолданылады. Ол үш тегпен жасалады:
dl сипаттамалар тізімін көрсетеді;
dt ("description term" қысқартуы) ;
... жалғасы

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