HTML тілі туралы

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

ЕСЕП БЕРУ

Тақырыбы: «HTML сілтемелері»

Алматы 2020

Мазмұны

1. Кіріспе . . . 3

2. Негізгі бөлім.

2. 1. HTML тілі туралы . . . 4

2. 2. HTML сілтемелері . . . 8

2. 3. Сілтеме түрлеріне анықтама . . . 12

Қорытынды . . . 14

Пайдаланылған әдебиеттер . . . 15

Кіріспе

HTML "Hypertext Markup Language", яғни "гипермәтіндік белгілеу тілі"деп түсіндіріледі. HTML тілі беттің құрылымы мен мазмұнына жауап береді. HTML тегтерден тұрады, ал тег "аз" және "көп"белгілері арасында жасалған атаудан тұрады. Тегтердің мысалдары: <h1>, <p>, <ul>.

HTML тілінің бастапқы мәтінді белгілейтін командалары тег (tag) деп аталынады. Тег символдар тізбегінен тұрады. Барлық тег «кіші» (<) символдарынан басталады да, «үлкен» (>) символымен аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз - тег орналасады.

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

Мысалы, ОЖ Windows анықтама жүйесі және көптеген программалар гипермәтіндік принцип бойынша ұйымдастырылған. Гиперсілтемені басқан кезде - белгіленген мәтінді немесе суретті - құжаттың белгілі бір фрагментіне немесе басқа құжатқа өту болады.

HTML-да гиперсілтемені <а> тегі сипаттайды. Гиперсілтеме көрсететін ресурстың орналасуын көрсететін HREF атрибуты міндетті болып келеді. Ресурс ішкі болуы да, сыртқы болуы да мүмкін.

Келесі код фрагментінен тұратын:

<А HREF="index. html"> Басты бетке өту А>

HTML-құжатты қарау нәтижесінде сендер Басты бетке өту сілтемесін көресіңдер. Сілтемеге басу нәтижесінде index, html парағына өту болады.

Гиперсілтеме абсолюттік, салыстырмалы, ішкі деп бөлінеді.

Сілтеме орналасуы өзгермейтін болып келетін сыртқы интернет-ресурсқа көрсететін тағы бір мысал қарастырайық. HTML-кодының мына жолы<а REL="nofollow"target="_blank"HREF="http://infourok. ru/go. html?href=%3CA+HREF%3D"http://www. google. kz">http://www. google. kz"> Google-ден көп нәрсені біл а>браузерде қарау кезінде Google іздеу жүйесі парағына сілтеме жасайды. Бұл - абсолюттік сілтеме деп аталады. Бұл жерде абсолюттік сілтеме D дискісіндегі Document бумасында сақталған құжатқа көрсетеді. Жергілікті компьютерде бұл сілтеме жұмыс жасайды. Бірақ мұндай сілтемесі бар web-парақты серверге орналастырған кезде сендер «бос сілтеме» аласыңдар, себебі серверде D дискісінде Document бумасы жоқ.

Құжат бірнеше көптеген беттерден тұратын болса, бір беттен басқа беттерге өту үшін сілтемелер қоюға тура келеді. Сол сияқты басқа сайттарға да сілтеме жасауға болады. Сілтеме интернетте негізгі роль атқарады. Онсыз интернет болмас еді. Сілтеме құру өте жеңіл. Оның бір ғана атрибуты болады.

HTML тілі туралы

HTML "Hypertext Markup Language", яғни "гипермәтіндік белгілеу тілі"деп түсіндіріледі.

HTML тілі беттің құрылымы мен мазмұнына жауап береді. HTML тегтерден тұрады, ал тег "аз" және "көп"белгілері арасында жасалған атаудан тұрады. Тегтердің мысалдары: <h1>, <p>, <ul>.

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 сілтемелері

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

Оның атауы - UNIVERSAL RESOURCE LOCATOR. Осыған мысал ретінде төмендегіні келтіруге болады:Этот текст содержит <A HREF=»http://www. site. kz/catalogue/index. html»> гипертекстовую ссылку</A>

Жоғарыда келтірілген мысалда HTML-да якор (anchor) деп аталатын ”А” тегі URL түрінде сілтемені жазу үшін “HREF” (HYPERTEXT REFERENCE) атрибутын қолданады. Бұл жоғарыда көрсетілген сілтеме ”http” протоколы арқылы ”www. site. kz” серверінің ”catalogue” директориясында орналасқан ”index. html” құжатына көрсетіп тұр. HTML-дағы гипермәтіндік сілтемелер екі түрге бөлінеді: контексті және жалпы гипермәтіндік сілтемелер. Контексті гипермәтіндік сілтемелер деп құжатқа енгізілген (ішіне енгізілген) сілтемелерді айтамыз. Ал жалпы гипермәтіндік сілтемелерге бүкіл құжатпен байланысы бар және құжаттың кез-келген бөлігін көрсету мүмкіншілігі бар сілтемелер жатады.

Әдетте web беттерде мәтін мен гиперсілтемелер болады. Мәтіндер ақпаратты ұсынса, гиперсілтемелер web беттерді ашуға ашуға мүмкіндік береді. Web бетте гиперсілтеменің екі түрі қолданылады: сыртқы гиперсілтемелер және ішкі гиперсілтемелер. Сыртқы гиперсілтемелер ағымдық web бетті басқа серверлермен орналасқан (мысалы мұқиттың арғы жағындағы) байланыстырады. Ішкі гиперсілтеме ағымдық бетті осы web сайттың басқа беттерімен немесе осы беттің басқа бөлігімен байланыстырады. Гиперсілтнмелер құру үшін <a> және </a> тегтері қолданылады. Осы тегтер арасына гиперсілтеме адресі жазылады. Ол мәтін немесе бейне болуы мүмкін. Сыртқы гиперсілтемені анықтау үшін href атрибутінде сыртқы беттің адресін былайша беруге болады:

<a href='httf://www. akorda. kz'> Әлеуметтік жағдай </a>Браузерде Әлеуметтік жағдай сөзін көремізАғымдық web беттің басқа бетіне гиперсілтемені көрсету үшін href атрибутіне керекті бет жазылған файл атын көрсету керек. Мысалы, <a href=' index. html '> Бастапқы бет </a>Бастапқы бет сөзіне нұқыған кезде, браузерде ағымдық сайтта орналасқан index. html беті қотарылады. Беттің белгілі бір орнына сілтеме. Басқа бетті қотару кезінде пайда болатын проблемалардың бірі бағдарламашы беттің аяқ жағында орналасқан ақпаратты бергісі келсе де, беттің басынан бастап ашылуы болып табылады. Бұл мәселені шешу үшін web беттің белгіленген орнына гиперсілтемені құру керек. Басқа беттегі белгіленген орынға гиперсілтеме құру екі этаптан тұрады. Гиперсілтемеге нұқыған кезде терезенің жоғарғы жағына шығарылуға тиісті басқа беттің сол орнына анкер құрыңыз. Басқа бетте орналасқан аркерге қатысушыны бағыттайтын сілтеме құрыңыз. Анкер құру үшін мына мысалдағыдай NAME атрибуты қолданылады.

Бұл Ақорда сайтына сілтеме

<a> мен </a> тегтерінің арасындағы мәтін сілтеме мәтін болады. Ал параметр href сөзі "hypertext reference/гипертекстовая ссылка" қысқартылған түрі, бұл орнын көрсетеді. Әдетте бұл интернет адресі немесе файл аты болып келеді. Бір веб-сайттың екі арасына сілтеме қою да оңай. Мысалы, бір қалтада орналасқан page1. htm и page2. htm беттері берілсе, page1 бетінен page2 бетіне сілтеме жасау үшін

<a href="page2. htm"> page2 бетіне өту үшін осы жерге нұқу керек </a>Браузерде бұл

page2 бетіне өту үшін осы жерге нұқу керек

жалпы сайттарда осында көк жазуларға нұқу арқылы басқа бетке өтесіз, яғни өткіміз келетін беттің атын жазса болды. Егер page 2 беті қалта ішінде тұрса, мысалы, "Kalta", онда сілтеме коды:<a href="Kalta/page2. htm"> page2 бетіне өту үшін осы жерге нұқу керек </a>Кері бағытта page 2 беттен page1 бетке өту үшін<a href=". . /page1. htm"> page1 бетке өту үшін осы жерге нұқу керек </a>Мұндағы ". . /" белгісі бір деңгей жоғары тұрған қалтаға өтуді білдіредіКейде беттің басына немесе керісінше аяғына сілтеме жасауға тура келеді, мысалы мазмұннан тарауға өту. Мұны жасау қиын емес. Ол құжаттың керекті жерін мынадай конструкция арқылы белгілеу керек:

<!-бұл әдіс тақырыптарды белгілеу кезінде қолданылады -->

< h2 id="razdel1">Бөлім 1</h2>

<!-ал мына белгіне керек жердің бәріне қоюға болады-->

<h2> <a name="razdel1"></a> Бөлім 1: </h2>

Енді Сіз белгіленген облысқа сілтеме жасай аласыз (бұл жағдайда Бөлім1) # таңбашадан кейін оның атын көрсету керек. Бөлім 1 сілтеме былайша болады:<a href="#razdel1"> Бөлім 1-ге сілтеме </a»Мынадай көрнекі мысал қарастырайық: Көшіріп алып блокнотқа қоямыз

<h1 > Мазмұны </h1> <br>

<a href="#razdel1"> Кімге арналған бұл кітап </a> <br>

<a href="#razdel2"> Кітаптың құрылымы </a><br>

<a href="#razdel3"> Оқулық бөлімдері </a><br>

<a href="#razdel4"> Бағдарлама тілі туралы</a><br>

<a href="#razdel1">Кімге арналған бұл кітап</a> <br>

<h2 id="razdel1"> Кімге арналған бұл кітап </h2>

<p> Бұл кітаптың оқушылары қарапайым адамдар, мектеп оқшылары, мүғалімдер, студентер, еңбектенуді қалайтын барлық адамдарға арналлған. Жұмысқа кіріспестен бұрын барлық керек-жарақты түгендеп алу керек . . . </p><h2 id="razdel2"> Кітаптың құрылымы </h2><p>Бұл кітапқа кіріскен кезде алдыма бірнеше мақсат қойдым. Біріншіден, мұндай үлкен жұмысы қалай оқушыға жеткізу керек, екіншіден осы кітапты пайдаланған адамдарға жол көрсету…. </p><h2 id="razdel3"> Оқулық бөлімдері </h2><p> Оқулық төрт бөлімнен тұрады: Негізі, Анықтамалық материалдар, Тақырыптар…</p><h2 id="razdel4"> Оқулық бөлімдері </h2><p> Алғы сөз. Құттықтаулар. Бірнеше ай бойы оы кітапты жазуда компанияның жаңа жетістіктерін халыққа жеткізу бақытына ие болдым. Жасалған шаралар туралы… </p>

Баузердегі нәтиже:

Мазмұны

Кімге арналған бұл кітап

Кітаптың құрылымы

Оқулық бөлімдері

Бағдарлама тілі туралы

Кімге арналған бұл кітап

Бұл кітаптың оқушылары қарапайым адамдар, мектеп оқшылары, мүғалімдер, студентер, еңбектенуді қалайтын барлық адамдарға арналған. Жұмысқа кіріспестен бұрын барлық керек-жарақты түгендеп алу керек . . . Бұл кітапқа кіріскен кезде алдыма бірнеше мақсат қойдым. Біріншіден, мұндай үлкен жұмысы қалай оқушыға жеткізу керек, екіншіден осы кітапты пайдаланған адамдарға жол көрсету…. Оқулық төрт бөлімнен тұрады: Негізі, Анықтамалық материалдар, Тақырыптар…Алғы сөз. Құттықтаулар. Бірнеше ай бойы оы кітапты жазуда компанияның жаңа жетістіктерін халыққа жеткізу бақытына ие болдым. Жасалған шаралар туралы…Әрине, сайтқа да сілтеме жасауға болады:<a href="mailto:admin@ sanasoft. kz "> sanasoft. kz админстрациясыны хат жазу </a>

Браузерде: sanasoft. kz админстрациясыны хат жазу

Бұл жерде mailto сөзі және хат алушының емаил қолданылды. Сілтемені нұқыған кезде пошталық программа-клиент қосылады, өріске алушының аты жазылады. Қосымша атрибуттер:TARGET - html сілтеме жасалатын бетті ашуды көрсетеді. Әдепкіде ол сол терезеде ашылады. Жаңа терезеде ашқыңыз келсе, жазу керек target ="_blank".

TITLE - сілтеме тақырыбын көрсетеді. Мысалды қараңыз:

Бұл karakoz. kz сайтына сілтеме, жаңа терезеде ашылады

</a> <br> <br>

Бұл да саитқа karakoz. kz. Жақындағанда тақырып пайда болады. </a>Браузердегі нәтиже:

... жалғасы

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