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 тілінің бір тегі әдетте құжаттың белгілі бір бөлігіне, мысалы бір абзацқа ғана әсер етеді. Осыған орай екі тег қатар қолданылады. Бірі - ашады, екіншісі - жабады. Ашатын тег белгілі бір әсер ету ісін бастайды, ал жабатын тег сол әсерді аяқтайды. Жабу тегтері қиғаш сызық символымен басталуы тиіс.

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

Тег атрибуттары.

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

Түсініктемелер.

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

Тегтер жұптық және жалғыз. Қос тегтерде мәтін және басқа тегтер болуы мүмкін. Жұптасқан тегтерде, бір адамға қарағанда, екінші жартысы бар-жабатын тег:

<h1>тақырып мәтіні< / h1>

Жұптық тегтердің жабатын бөлігінде аты алдында / ("слэш") белгісі қойылады. Жұптық тегтерге басқа тегтерді салуға болады. Мысалы, тізімдер сияқты:

<ul>

<li>тізім элементі< / li>

< / ul>

Ішкі тегтерде әрдайым дұрыс жабу тәртібін қадағалау керек. Салынған тег ата-анасынан кейін жабыла алмайды:

<ul><li>тізім элементі< / ul></li> <!-- Жаман ->

<ul><li>тізім элементі< / li>< / ul> <!-- Жақсы ->

Барлық тегтерді басқа тегтерге салуға болмайды, мысалы, <h1> тегті <p> - ға салуға болмайды.

Тек жұп ғана емес, жеке тегтер де бар. Мысалы, <img> тегті белгіге сурет қосады.

Өзі <img> мағынасы жоқ. Бұл тег шын мәнінде пайдалы болу үшін оның ішінде суретке апаратын мекенжайды жазу керек. Бұл src атрибуты арқылы жасалады:

Тегтің бірнеше атрибуттары болуы мүмкін. Бұл жағдайда олар бос орын арқылы жазылады:

<тег атрибут1= "мәндер1" атрибут2="мәндер2">

Мысалы, суретті қаласаңыз, өлшемдерді орнатуға болады:

Comments

Символдар арасында жасалған Код <!-- және ->, жұмыс істемейді. Егер бұл таңбалар жойылса, код іске қосылады, бұл "іздеу"деп аталады. Түсіндірмелердің көмегімен, әдетте, қандай да бір кодты уақытша өшіреді немесе кеңестер мен түсіндірулерді қалдырады.

CSS "Cascading Style Sheets", яғни "каскадты стильдер кестелері"деп аталады. CSS тілі беттің сыртқы түріне жауап береді

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

қасиеті: мәні;

Мысалы:

түсі: red;

padding: 10px;

Тегтерге стильдер 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>

< / head>

<Head> - да орналасқан тағы бір элемент <title>тег. Онда браузер қойындысында көрсетілетін бет тақырыбы көрсетіледі. Тақырып бойынша бұл бет браузерде ашылмаған кезде де, іздеу нәтижелерінде немесе браузерлік бетбелгілерде бейнеленуі керек.

<head>

<title>курстар-HTML Academy< - title>

< / head>

<Head> ішінде орналасқан тағы бір маңызды тег - <meta>тег. Ол жалғыз, яғни соңында бу жабатын тег талап етпейді. <Meta> көмегімен браузерге, іздеу роботына немесе басқа құрылғыға сіздің сайтыңыз туралы түрлі қызметтік ақпаратты (немесе метаақпаратты) хабарлай аласыз: мәтінді кодтау, мазмұнды сипаттау және т. б. Бұл үшін әр түрлі атрибуттар мен олардың мәндері бар <meta> тегтері қолданылады.

HTML бет мәтінін кодтау charset төлсипаты арқылы көрсетіледі:

Ең кең таралған заманауи кодтау-utf-8.

Кілттік сөздер тізімі <meta> тегімен беріледі, онда name атрибуты keywords мағынасы бар. Кілт сөздер (бет мазмұнындағы ең маңызды сөздер) мазмұн атрибуты үтір арқылы көрсетіледі:

Беттің қысқаша сипаттамасы (немесе аннотация) ұқсас, тек name төлсипатының мәні description-ге өзгереді:

Ішінде < body> бетте көрсетілетін тегтер бар. Мысалы, <main> тег басқа беттерде қайталанбайтын беттің негізгі мазмұнын анықтайды. Әдетте бетте бір <main>қолданылады.

<Header> беттің кіріспе бөлігін қамтиды, оны жиі "бас киім" деп атайды, ал <footer> тегті беттің соңғы бөлігін немесе "жертөле"деп сипаттайды. Үлкен мағыналы (немесе "логикалық") бөлімді білдіретін <section> тег бар.

<Article> Тег ақпараттың тұтас, аяқталған және дербес фрагментін білдіреді.

Негізгі навигациясы бар логикалық бөлім құру үшін TAG <nav> (ағылшын тілінен "navigation"қысқаруы) арналған. Әдетте, <nav> басқа беттерге сілтемелерді немесе ағымдағы бет бойынша шарлауды қамтиды.

Тег <aside> негізгі тікелей байланысты емес қосымша мазмұнды қамтиды. Мұндай блоктарды жиі "сайдбар" немесе бүйірлік панельдер деп атайды.

Мәтіннің негізгі құрылымын жасау үшін тақырыптар қолданылады. HTML-да бүкіл тақырып тегтері бар: <h1> бастап <h6>дейін. Тег <h1> ең маңызды тақырып (жоғарғы деңгей тақырыбы), ал тег <h6> төменгі деңгейдің астын білдіреді.

<h1>HTML ерекшелігі< / h1>

<h2>1-БӨЛІМ КІРІСПЕ< / h2>

< h3>1. 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" қысқартуы) ;

<dd> ("description definition" қысқартуы) сипаттама немесе анықтама білдіреді.

<Dt> және <dd> тегтері <dl>ішінде жазылады. Әрбір <dl> тізімі әр терминге бір немесе бірнеше терминдерді және бір немесе бірнеше сипаттамаларды қамтуы мүмкін. Код үлгісі:

<dl>

< dd>гипермәтіндік белгілеу тілі< / dd>

<dd>Каскад кестелері < / dd>

< dd>HTML құжаттарын рәсімдеу тілі< / dd>

< / dl>

Әдепкі браузер анықтамалардың сол жағында шағын шегініс қосады.

Тег <pre> ("preformatted text" қысқартуы) . Код мысалдарын көрсету үшін пайдаланылады, сондай-ақ ASCII Art суреттерін көрсету үшін қолданылады. Браузер <pre>тегінің ішінде бар барлық Бос орындар мен тасымалдауларды сақтайды және көрсетеді.

<pre>мысал

қайта пішімделген

бос орын сақталған мәтін

және жол тасымалдау< / pre>

Тег <code>. Код фрагменттерін белгілеу үшін қолданылады.

Оның көмегімен компьютер арқылы танылатын мәтіннің кез келген фрагменті: бағдарлама коды, белгілеу, Файл атауы және т. б. көрсетіледі. Әдетте браузерлер мәтінді <code> бірыңғай шрифтпен көрсетеді.

Тег <code>ul< / code> - бұл реттелмеген тізім.

< Code> тегті <pre>тег ішіне қосуға болады.

Дәйексөз

Шағын дәйексөздер

Тег <q> ("quote" қысқартуы) . Ұсыныс ішінде дәйексөз бөлуге арналған. Браузердің ішіндегі мәтін автоматты түрде тырнақшалармен жиектеледі, сондықтан тырнақшаларды қолмен қосу қажет емес.

Дәйексөз көзі

Тег <cite>. Онда дәйексөз көзінің мекен-жайынан басқа, мәтін жазылған туындының атауын, сондай-ақ мәтін келтірілген автордың немесе ұйымның атауын көрсетуге болады. < Cite> мазмұны шолғышта курсивпен бөлінеді.

2. 2. Web сайт құрудың алғышарттары

Олардың теориялық негiздерi бiр жағынан ертерек әлi салғаннан, Бернерс Тим - HTTP, URI/URL және HTMLнiң веб-сiнiң негiзiн қалайтын технологияларының әкесi болып табылады. Ванневар Буш 1940-шi жылдарда оның тез iздестiруi үшiн техникалық құрылымдардың көмектi ақи көз адамды жадтың кеңейтуiн идеясы, сонымен бiрге мәлiметтiң жиналған адам баласын индексацияны ұсынды. Энгельбарт Теодор Нельсон және даг гипермәтiннiң технологияларын ұсынды - оқудың әртүрлi варианттарын оқырман көрсететiн тармақталған мәтiн. Xanadu, сол сияқты Нельсонның бiтпеген гипермәтiн жүйесi, сақтау және өзара байланыс және терезе енгiзiлетiн мәтiннiң iздестiруi үшiн арналды. Нельсон адам бала жасалған барлық мәтiндер әрiлi-берiлi сiлтемелермен байлауға армандады. Бернерс Тим дәл қазiр - интернеттiң стандарттарының өңдеумен және енгiзуiмен шұғылданатын (World Wide Web Consortium ) Бүкiләлемдiк өрмекшiнiң торының ол негiзделген консорциумы басшылық етедi. Сайттардың нақтылы сыныбы адам немесе ұйымның өкiлдiгiмен интернет-лердi әйтпесе деп атайды. Сайттар - визитка барлық қолданулар сиректеу табады. Сiлтемеге түсiнiк қалай (портал ) толық функционалды сайттағы бет бола алады. Интернетке өз беттерi ұйытады, онда (портал ) бөгде сайттың құрамындағы табандатқан сайт немесе дербес беттердi түсiнедi. Түсiнiктi WAP сонымен бiрге интернеттен (порталдар ) сайттар, желiлерде басқа - жылжымалы телефондар үшiн сайттар. Сайт - портал - дербес ұйымдар немесе бiрлескен құрылымның бөлiмшелерiнiң функционалдi өзi жеткiлiктi сайт құрастырылған көп компоненттi тармақты құрылым. Мысалы, портал филиалдар, академияның институттарының бар болуы, iрi ұлт аралық корпорация елдерiндегi журналдар және кiтап баспахана бөлiмi, факультеттер және университет, бөлiмшенiң институттары, және өйткенi бос тұруша кафедраны немесе мамандардың сайттары орналастырған факультет шығарулар, конференциялар, семинарлар, жаңалықтың, ғылыми бөлiмшенiң сайты ұсына алады,

Мысалы, сайттар бастапқы сайттың статикалық құжаттарының жиынтықтары болды. Iшкi және сыртқы сiлтемелердiң коммуникациялардың дамытуы, саны шара бойынша үлкейдi. Сайт мәлiмет, түсiнiктеменiң рөлiғана емес, функционалдық кеңсе, жаңалықтың немесе медия орталығы да орындай бастады. Дәл қазiр көпшiлiкке олардың iшiнен динамикалылық және өздiгiнендiк өзiндiк. Мұндай жағдайлардың мамандары үшiн қосымша веб-лер терминдi пайдаланады - сайттың есептерiнiң шешiмi үшiн дайын программалық кешен. Қосымша веб- сайт құрамына кiредi, бiрақ қосымша веб- осы сайттарсыз болып табылады тек қана техникалық. (форманы, үлгi) қабықты толтырылып iске қосуы керек. Сайттардың алға басуы ёмкой желiдегi индустрия болды.

... жалғасы

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