› › html веб-парағы. Web-беттерді құру. HTML тілін үйрену. Веб-бет элементтері: тақырып

html веб-парағы. Web-беттерді құру. HTML тілін үйрену. Веб-бет элементтері: тақырып

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

HTML және CSS дегеніміз не?

HTML (HyperText Markup Language) тақырыптар, абзацтар немесе кескіндер сияқты мазмұнды анықтай отырып, мазмұн құрылымын және оның мағынасын анықтайды. CSS (Cascading Style Sheets) — мысалы, қаріптерді немесе түстерді пайдалана отырып, мазмұнның сыртқы түрін стильдеу үшін жасалған презентация тілі.

Бұл екі тіл - HTML және CSS - бір-бірінен тәуелсіз және солай қалуы керек. CSS HTML құжатының ішінде жазылмауы керек және керісінше. Жалпы ереже ретінде HTML әрқашан мазмұнды көрсетеді, ал CSS әрқашан стильді анықтайды.

HTML мен CSS арасындағы айырмашылықты түсініп, HTML-ге толығырақ тоқталайық.

Негізгі HTML шарттары

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

Элементтер

Элементтер беттегі нысандардың құрылымы мен мазмұнын анықтау жолын көрсетеді. Жиі қолданылатын элементтердің кейбірі тақырыптардың бірнеше деңгейін қамтиды (элементтер ретінде анықталған

бұрын

) және абзацтар (анықталады

); Тізімге элементтерді қосуға болады ,

, , Және және көптеген басқалар.

Элементтер бұрыштық жақшалар арқылы анықталады<>, элемент атауының айналасында. Сонымен, элемент келесідей болады:

Тегтер

Бұрыштық жақшаларды қосу< и >элементтің айналасында тег ретінде белгілі нәрсені жасайды. Тегтер көбінесе ашу және жабу тегтерінің жұптарында кездеседі.

Ашу тегі элементтің басын белгілейді. Ол таңбадан тұрады<, затем идёт имя элемента и завершается символом >; Мысалы,

.

Жабу тегі элементтің соңын белгілейді. Ол таңбадан тұрады< с последующей косой чертой и именем элемента и завершается символом >; Мысалы,

.

Ашу және жабу тегтерінің арасында пайда болатын мазмұн сол элементтің мазмұны болып табылады. Сілтемеде, мысалы, ашу тегі болады және жабу тегі. Осы екі тегтің арасындағы нәрсе сілтеменің мазмұны болады.

Сонымен, сілтеме тегтері келесідей болады:

...

Атрибуттар

Атрибуттар - қамтамасыз ету үшін пайдаланылатын қасиеттер Қосымша Ақпаратэлемент туралы. Ең көп тараған атрибуттар элементті анықтайтын id төлсипатын қамтиды; элементті жіктейтін класс атрибуты; ендірілген мазмұнның көзін көрсететін src төлсипаты; және байланысты ресурсқа сілтемені көрсететін href төлсипаты.

Атрибуттар элемент атынан кейін ашылатын тегінде анықталады. Жалпы атрибуттар атау мен мәнді қамтиды. Бұл төлсипаттардың пішімі төлсипат атауынан кейін теңдік белгісінен, одан кейін тырнақшадағы төлсипат мәнінен тұрады. Мысалы, элемент href атрибуты келесідей болады:

Шей Хоу

Негізгі HTML терминдерін көрсету

Бұл код веб-бетте «Шей Хоу» мәтінін көрсетеді және осы мәтінді басқан кезде пайдаланушыны http://shayhowe.com сайтына апарады. Сілтеме элементі ашылу тегі арқылы жарияланады және жабу тегімәтінді, сондай-ақ ашу тегінде href="http://shayhowe.com" арқылы жарияланған сілтеме мекенжайының төлсипаты мен мәнін қамтиды.

Күріш. 1.01. Контурлық пішіндегі HTML синтаксисі элементті, атрибутты және тегті қамтиды

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

HTML құжатының құрылымын теңшеу

HTML құжаттары .txt емес, .html кеңейтімімен сақталған қарапайым мәтіндік құжаттар. HTML жазуды бастау үшін алдымен сізге қажет мәтіндік редактор, бұл сізге қолдануға ыңғайлы. Өкінішке орай, бұған кірмейді Microsoft Wordнемесе Беттер, өйткені бұл күрделі редакторлар. HTML және CSS жазуға арналған екі ең танымал мәтіндік редакторлар - Dreamweaver және Sublime Text. Тегін баламаларсонымен қатар Windows жүйесіне арналған Notepad++ және Mac жүйесіне арналған TextWrangler.

Барлық HTML құжаттарында келесі мәлімдемелер мен элементтерді қамтитын қажетті құрылым бар: , , Және .

Құжат түрі туралы декларация немесеHTML құжатының ең басында орналасқан және браузерлерге HTML тілінің қай нұсқасы қолданылып жатқанын көрсетеді. Өйткені біз қолданатын боламыз соңғы нұсқасы HTML, біздің құжат түрі қарапайым болады. Осыдан кейін элемент келеді құжаттың басын көрсетеді.

Ішінде элемент әртүрлі метадеректерді (бет туралы ілеспе ақпарат) қоса, құжаттың жоғарғы бөлігін анықтайды. Элемент ішіндегі мазмұн веб-беттің өзінде көрсетілмейді. Оның орнына ол құжаттың тақырыбын (шолғыш терезесінің тақырып жолында пайда болады), кез келген сыртқы файлдарға сілтемелерді немесе кез келген басқа пайдалы метадеректерді қамтуы мүмкін.

Веб-беттің барлық көрінетін мазмұны элементте болады . Әдеттегі HTML құжатының құрылымы келесідей көрінеді:

Сәлем Әлем!

Сәлем Әлем!

Бұл веб-бет.



HTML құжатының құрылымын көрсету

Бұл код құжат түрі туралы декларациядан бастап құжатты көрсетеді,, содан кейін бірден элемент келеді . Ішінде элементтер келеді Және . Элемент тег арқылы бетті кодтауды қамтиды және элемент арқылы құжаттың тақырыбы . Элемент <body>элемент арқылы тақырыпты қамтиды <h1>және мәтіннің абзацы арқылы<р>. Тақырып пен абзац элемент ішінде кірістірілгендіктен <body>, олар веб-бетте көрінеді.</p><p>Элемент кірістірілген деп те белгілі басқа элементтің ішінде болғанда, құжат құрылымын жақсы ұйымдастырылған және оқылатын етіп сақтау үшін оны шегініспен қойған дұрыс. Алдыңғы кодта екі элемент де бар <head>Және <body>элемент ішінде кірістірілген және жылжытылған <html>. Элементтер үшін шегініс құрылымы ішіне қосылған жаңа элементтермен жалғасады <head>Және <body> .</p><h3>Өздігінен жабылатын элементтер</h3><p>Алдыңғы мысалда элемент <meta>жабу тегі жоқ жалғыз тег болды. Уайымдамаңыз, бұл әдейі жасалды. Барлық элементтер ашу және жабу тегтерінен тұрмайды. Кейбір элементтер мазмұнды немесе әрекетті бір тег ішіндегі атрибуттар арқылы алады. <meta>осы элементтердің бірі болып табылады. Элемент мазмұны <meta>мысалда ол таңбалар жиыны төлсипаты мен мәнді пайдаланып тағайындалады. Басқа типтік өздігінен жабылатын элементтерге мыналар жатады:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Құжат түрінің мәлімдемесі арқылы жасалған қысқартылған құрылым<!DOCTYPE html>және элементтері <html> , <head>Және <body>, өте жиі кездеседі. Біз бұл құжат құрылымын ыңғайлы етіп сақтағымыз келеді, өйткені біз оны жаңа HTML құжаттарын жасау кезінде жиі қолданамыз.</p><h3>Кодты тексеру</h3><p>Кодымызды қаншалықты мұқият жазсақ та, қателер сөзсіз. Бақытымызға орай, HTML және CSS жазған кезде жұмысымызды тексеретін валидаторлар бар. W3C кодты қателерге сканерлейтін HTML және CSS валидаторларын ұсынады. Біздің кодты қарап шығу оны барлық браузерлерде дұрыс көрсетуге ғана емес, сонымен қатар код жазу кезінде ең жақсы тәжірибелерді үйретуге көмектеседі.</p><h2>Іс жүзінде</h2><p>Веб-дизайнерлер және алдыңғы қатарлы әзірлеушілер ретінде бізде өз қолөнерімізге арналған бірнеше тамаша конференцияларға қатысу салтанаты бар. Біз өзіміздің стильдер конференциясын ұйымдастырып, келесі сабақтарда оның веб-сайтын жасамақпыз. Бұл сияқты!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>HTML-ден сәл алшақтап берілістерді ауыстырып, CSS-ті қарастырайық. Есіңізде болсын, HTML веб-беттеріміздің мазмұны мен құрылымын анықтайды, ал CSS олардың көрнекі стилі мен сыртқы түрін анықтайды.</p><h2>Негізгі CSS шарттары</h2><p>HTML терминдерінен басқа, сізге таныс болуыңыз қажет кейбір негізгі CSS терминдері бар. Бұл терминдер селекторларды, қасиеттерді және мәндерді қамтиды. HTML терминологиясы сияқты, CSS-пен неғұрлым көп жұмыс істесеңіз, бұл терминдер соғұрлым екінші сипатқа айналады.</p><h3>Селекторлар</h3><p>Веб-бетке элементтерді қосқанда, оларды CSS көмегімен стильдеуге болады. Селектор HTML ішіндегі қандай элементке немесе элементтерге бағытталатынын және мәнерлерді (мысалы, түс, өлшем және орын) қолдану керектігін анықтайды. Таңдаушылар біздің қаншалықты нақты болғымыз келетініне байланысты бірегей элементтерді таңдау үшін әртүрлі көрсеткіштердің тіркесімін қамтуы мүмкін. Мысалы, біз беттегі әрбір абзацты таңдағымыз келеді немесе тек бір нақты абзацты таңдағымыз келеді.</p><p>Таңдаушылар әдетте идентификатор немесе сынып мәні сияқты төлсипат мәнімен немесе элемент атымен байланыстырылады, мысалы <h1>немесе<р> .</p><p>CSS-те селекторлар таңдалған элементке қолданылатын мәнерлерді қосатын бұйра жақшалармен () біріктірілген. Бұл селектор барлық элементтерге бағытталған <span><p>P(...)</p><h3>Қасиеттер</h3><p>Элемент таңдалғаннан кейін сипат оған қолданылатын мәнерлерді анықтайды. Сипат атаулары селектордан кейін келеді, ішіндегі <a href="https://5visa.ru/kk/installation-and-configuration/kvadratnye-skobki-v-vorde-kak-ubrat-kvadratnye-i-figurnye.html">бұйра жақшалар</a>() және қос нүктенің алдында. Фон, түс, қаріп өлшемі, биіктік пен ені және басқа да жиі қосылатын сипаттар сияқты біз пайдалана алатын көптеген қасиеттер бар. Келесі кодта біз барлық элементтерге қолданылатын түс пен қаріп өлшемі сипаттарын анықтаймыз <span><p>P (түсі: ...; қаріп өлшемі: ...; )</p><h3>Құндылықтар</h3><p>Әзірге біз тек селектор арқылы элементті таңдадық және сипаттар арқылы оған қандай стиль қолданғымыз келетінін анықтадық. Енді біз осы сипаттың әрекетін мән арқылы орната аламыз. Мәндерді қос нүкте мен нүктелі үтір арасындағы мәтін ретінде көрсетуге болады. Төменде біз барлық элементтерді таңдаймыз <p >Түс сипатының мәнін қызғылт сары, ал шрифт өлшемі сипатының мәнін 16 пиксельге орнатыңыз.</p><p>P (түсі: қызғылт сары; қаріп өлшемі: 16px; )</p><p>Мұны тексеру үшін CSS-те біздің ережелер жинағы селектордан басталады, содан кейін бірден бұйра жақшалар. Бұл бұйра жақшалар сипаттар мен мәндердің жұптарынан тұратын мәлімдемелерді қамтиды. Әрбір декларация сипаттан басталады, одан кейін қос нүкте, мүліктің мәні және соңында нүктелі үтір қойылады.</p><p>Кең таралған тәжірибе жұп сипаттар мен мәндерді бұйра жақшалардың ішіне ауыстыру болып табылады. HTML сияқты, шегініс кодымызды ұйымдасқан және анық сақтауға көмектеседі.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Күріш. 1.03. CSS синтаксистік құрылымы селекторды, қасиеттерді және мәндерді қамтиды</p><p>Бірнеше негізгі терминдерді және жалпы CSS синтаксисін білу - бұл тамаша бастама, бірақ біз тереңдікке сүңгігенге дейін тағы бірнеше мәселе бар. Атап айтқанда, CSS-те селекторлардың қалай жұмыс істейтінін мұқият қарастыру керек.</p><h2>Селекторлармен жұмыс</h2><p>Селекторлар, жоғарыда айтылғандай, қандай HTML элементтері мәнерленетінін көрсетеді. Селекторларды қалай пайдалану керектігін және олардың қалай жұмыс істейтінін толық түсіну маңызды. Бірінші қадам танысу болуы керек <a href="https://5visa.ru/kk/education/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">әртүрлі түрлері</a>селекторлар. Біз ең негізгі селекторлардан бастаймыз: тип, класс және идентификатор селекторлары.</p><h3>Түр таңдаушылары</h3><p>Түр селекторлары олардың түрі бойынша мақсатты элементтерді белгілейді. Мысалы, егер біз барлық элементтерді бағыттағымыз келсе <div>біз div селекторын пайдалануымыз керек. Келесі код элементтер үшін тип таңдау құралын көрсетеді <div>, сонымен қатар сәйкес HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Сабақтар</h3><p>Класстар класс атрибутының мәніне негізделген элементті таңдауға мүмкіндік береді. Класс селекторлары тип селекторларына қарағанда біршама нақтырақ, себебі олар бір типтегі барлық элементтерді емес, белгілі бір элементтер тобын таңдайды.</p><p>Кластар бірнеше элементтер үшін бірдей сынып төлсипатының мәнін пайдалану арқылы бірдей мәнерлерді бірден әртүрлі элементтерге қолдануға мүмкіндік береді.</p><p>CSS жүйесінде сыныптар сынып атрибутының мәнінен кейін алдыңғы нүктемен көрсетіледі. Төмендегі сынып селекторы элементтерді қоса, керемет класс төлсипатының мәнін қамтитын барлық элементтерді таңдайды <div>Және <span><p>Тамаша(...)</p><p> <div class="awesome">...</div> </p><h3>Идентификаторлар</h3><p>Идентификаторлар сыныптарға қарағанда дәлірек, өйткені олар бір уақытта тек бір бірегей элементке бағытталған. Класс селекторлары сынып атрибутының мәнін пайдаланатыны сияқты, идентификаторлар id төлсипатының мәнін селектор ретінде пайдаланады.</p><p>Көрсетілетін элемент түріне қарамастан, id төлсипатының мәні бетте тек бір рет пайдаланылуы мүмкін. Егер идентификаторлар бар болса, оларды маңызды элементтер үшін сақтау керек.</p><p>CSS-те идентификаторлар алдында хэш таңбасы, одан кейін id атрибутының мәні көрсетіледі. Мұнда идентификатор тек shayhowe мәні бар id төлсипаты бар элементті таңдайды.</p><p>#шайхау ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Қосымша селекторлар</h3><p>Селекторлар өте күшті заттар және жоғарыда сипатталғандар біз кездесетін ең көп таралған селекторлардың бірі болып табылады. Бұл селекторлар тек бастамасы ғана. Көптеген жетілдірілген селекторлар бар және олар оңай қол жетімді. Олармен ыңғайлы болғаннан кейін, кейбір жетілдірілгендерін тексеруден қорықпаңыз.</p><p>Жарайды, барлығын біріктіруді бастайық. Біз HTML ішіндегі бетке элементтерді қосамыз, содан кейін сол элементтерді таңдап, оларды CSS көмегімен стильдей аламыз. Енді екі тілдің бірге жұмыс істеуі үшін HTML және CSS арасындағы нүктелерді байланыстырайық.</p><h2>CSS қосылуда</h2><p>Біздің CSS-ті HTML-мен сөйлесу үшін HTML-ден CSS файлын көрсетуіміз керек. Жақсы тәжірибе - барлық стильдерімізді элемент ішінде көрсетілген бір сыртқы файлға қосу <head>біздің HTML құжатымыз. Бір сыртқы CSS пайдалану сайтта бірдей стильдерді қолдануға және оған жылдам өзгертулер енгізуге мүмкіндік береді.</p><h3>CSS қосудың басқа опциялары</h3><p>CSS-ті енгізудің басқа опциялары ішкі және кірістірілген стильдерді пайдалануды қамтиды. Сіз бұл опцияларды шын мәнінде кездестіруіңіз мүмкін, бірақ олар сайттарды жаңартуды қиын және ауыр ететіндіктен, әдетте, ұнамайды.</p><p>Сыртқы мәнерлер кестесін жасау үшін біз таңдаған мәтіндік редакторды жаңасын жасау үшін қайтадан пайдаланғымыз келеді <a href="https://5visa.ru/kk/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">мәтіндік файл</a>.css кеңейтімімен. Біздің CSS файлымыз HTML файлымыз сияқты бір қалтада немесе ішкі қалтада сақталуы керек.</p><p>Элемент ішінде <head>элемент қолданылады <link>, ол HTML және CSS файлдары арасындағы қатынасты анықтайды. Біз CSS-ге қосылып жатқандықтан, олардың қатынасын көрсету үшін мәнерлер кестесінің мәні бар rel төлсипатын пайдаланамыз. Сонымен қатар, href төлсипаты CSS файлының орнын немесе жолын көрсету үшін пайдаланылады.</p><p>Келесі мысалда HTML құжаты, элемент <head>сыртқы стиль файлына нұсқайды.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>CSS дұрыс көрсетілуі үшін href төлсипатының жол мәні CSS файлы сақталған жерге тікелей сәйкес келуі керек. Алдыңғы мысалда main.css файлы түбірлік қалта ретінде белгілі HTML файлымен бірдей жерде сақталады.</p><p>Егер CSS файлы ішкі қалтада орналасса, href төлсипатының мәні осы жолға сәйкес келуі керек. Мысалы, егер біздің main.css файлымыз стиль кестелері деп аталатын ішкі қалтада сақталған болса, href төлсипатының мәні stylesheets/main.css болады. Бұл ішкі қалтаға жылжытуды көрсету үшін алға қиғаш сызықты (немесе қиғаш сызықты) пайдаланады.</p><p>Қосулы <a href="https://5visa.ru/kk/firmware/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">осы сәт</a>Біздің парақшаларымыз баяу, бірақ сенімді түрде жандана бастады. Біз әлі CSS-ті тым терең зерттеген жоқпыз, бірақ кейбір элементтердің CSS-те жарияламаған стильдері бар екенін байқаған боларсыз. Бұл элементтерге өзінің таңдаулы стильдерін жүктейтін браузер. Бақытымызға орай, біз бұл мәнерлерді өте оңай қайта жаза аламыз, мұны кейін CSS қалпына келтіру арқылы жасаймыз.</p><h2>CSS қалпына келтіруді пайдалану</h2><p>Әрбір браузерде өзінің әдепкі мәнерлері бар <a href="https://5visa.ru/kk/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">әртүрлі элементтер</a>. Қалай <a href="https://5visa.ru/kk/navigation/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a>тақырыптарды, абзацтарды, тізімдерді және т.б. көрсетеді, оның көрсету тәсілінен өзгеше болуы мүмкін <a href="https://5visa.ru/kk/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">Internet Explorer</a>. Браузер арасындағы үйлесімділікті қамтамасыз ету үшін CSS қалпына келтіру кеңінен қолданыла бастады.</p><p>CSS қалпына келтіру берілген мәнермен барлық негізгі HTML элементтерін қабылдайды және барлық браузерлерде дәйекті мәнерді қамтамасыз етеді. Бұл қалпына келтіру әдетте өлшемдерді, толтыруды, жиектерді немесе осы мәндерді төмендететін қосымша мәнерлерді жоюды қамтиды. CSS каскадты жоғарыдан төменге қарай жұмыс істейтіндіктен (сіз бұл туралы жақын арада білетін боласыз) - біздің қалпына келтіру стиліміздің ең жоғарғы жағында болуы керек. Бұл осы стильдердің алдымен оқылатынын қамтамасыз етеді және бәрі де солай. <a href="https://5visa.ru/kk/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">әртүрлі браузерлер</a>ортақ тірек нүктесінен жұмыс істей бастайды.</p><p>Қолдануға болатын көптеген түрлі CSS қалпына келтірулері бар, олардың барлығының өзіндік параметрлері бар <a href="https://5visa.ru/kk/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">мықты жақтары</a>. Эрик Мейердің ең танымалдарының бірі, оның CSS қалпына келтіруі жаңа HTML5 элементтерін қосуға бейімделген.</p><p>Егер сіз өзіңізді шытырман оқиғалы сезінсеңіз, Николас Галлахер жасаған Normalize.css де бар. Normalize.css барлық негізгі элементтер үшін қатты қалпына келтіруді қолдануға емес, оның орнына сол элементтер үшін жалпы мәнерлер орнатуға назар аударады. Бұл CSS-ті тереңірек түсінуді, сонымен қатар стильдерден нені алғыңыз келетінін білуді талап етеді.</p><h3>Браузер арасындағы үйлесімділік және тестілеу</h3><p>Жоғарыда айтылғандай, әртүрлі браузерлер элементтерді басқаша көрсетеді. Браузер арасындағы үйлесімділік пен тестілеудің маңыздылығын мойындау маңызды. Сайттар барлық браузерлерде бірдей көрінбеуі керек, бірақ жақын болуы керек. Қандай браузерлерге қолдау көрсеткіңіз келетіні және сіздің сайтыңыз үшін ең жақсысы негізінде шешім қабылдауыңыз қажет.</p><p>CSS жазу кезінде бірнеше нәрсеге назар аудару керек. Жақсы жаңалық, сіз мұның бәрін жасай аласыз және оны меңгеру үшін аздап шыдамдылық қажет.</p><h2>Іс жүзінде</h2><p>Конференция сайтында соңғы тоқтаған жерімізге оралайық және CSS-ті қалай қосуға болатынын көрейік.</p><ol><li>Біздің стильдер-конференция қалтасында активтер деп аталатын жаңа қалтаны жасайық. Бұл жерде біз веб-сайтымыз үшін стильдер, кескіндер, бейнелер және т.б. сияқты барлық ресурстарды сақтаймыз. Біздің стильдер үшін активтер қалтасына басқа стильдер кестелері қалтасын қосамыз.</li><li>Мәтіндік редакторды пайдаланып, main.css деп аталатын жаңа файлды жасап, оны жаңа ғана жасаған стильдер кестелері қалтасына сақтайық.</li><p>Браузердегі index.html файлына қарап, біз элементтерді көреміз <h1>Және <p>Әдепкі мәнері бар. Атап айтқанда, олардың айналасында бірегей қаріп өлшемі мен кеңістігі бар. Эрик Мейердің қалпына келтіруін пайдалану арқылы біз осы стильдерді жұмсарта аламыз, бұл олардың әрқайсысына бір негізден бастауға мүмкіндік береді. Мұны істеу үшін оның веб-сайтына қараңыз, кодты көшіріп, оны main.css файлымыздың жоғарғы жағына қойыңыз.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Лицензия: жоқ (қоғамдық домен) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, өрістер жинағы, пішін, белгі, легенда, кесте, тақырып, tbody, tfoot, thead, tr, th, td, мақала, шетке, кенеп, мәліметтер, ендірілген, сурет, фигура, төменгі деректеме, үстіңгі деректеме, hgroup, мәзір, навигация, шығыс, рубин, бөлім, қорытынды, уақыт, белгі, аудио, бейне ( жиегі: 0; толтыру: 0; жиек: 0; шрифт өлшемі: 100%; шрифт: мұра; тік туралау: негізгі сызық ; ) /* ескі браузерлер үшін HTML5 дисплей рөлін қалпына келтіру */ мақала, бір жаққа, мәліметтер, суреттеме, сурет, төменгі деректеме, үстіңгі деректеме, hgroup, мәзір, шарлау, бөлім (дисплей: блок; ) негізгі (жол биіктігі: 1; ) ol, ul ( тізім стилі: ешбір; ) блок тырнақша, q ( тырнақша: ешбір; ) блок тырнақша: бұрын, блок тырнақша: кейін, q: бұрын, q: кейін ( мазмұн: ""; мазмұн: ешбір; ) кесте ( жиек- күйреу: құлау; шекара аралығы: 0; )</p><li>Біздің main.css файлымыз қалыптаса бастады, сондықтан оны index.html файлына қосайық. Мәтіндік редакторда index.html ашыңыз және элемент қосыңыз <link>В <head>, элементтен кейін бірден <title> .</li><li>Өйткені біз элемент арқылы стильдерді көрсетеміз <link>мән мәнерлер парағы бар rel төлсипатын қосыңыз.</li><p>Сондай-ақ href төлсипатын пайдаланып main.css файлымызға сілтеме қосамыз. Есіңізде болсын, біздің main.css файлымыз активтер қалтасының ішінде орналасқан стильдер кестелері қалтасында сақталады. Сонымен, href төлсипатының мәні, ол біздің main.css файлымызға апаратын жол, assets/stylesheets/main.css болуы керек.</p><p> <head> <meta charset="utf-8"> <title>Стильдер конференциясы

Жұмысымызды тексеріп, HTML және CSS қалай жұмыс істейтінін көретін уақыт келді. Браузерде index.html файлын ашу (немесе ол әлдеқашан ашық болса, бетті жаңарту) бұрынғыдан сәл өзгеше нәтиже көрсетуі керек.

Күріш. 1.04. CSS қалпына келтірілген стильдер конференциясы сайты

Демо және бастапқы код

Төменде стильдер конференциясының веб-сайтын ағымдағы күйінде көруге, сондай-ақ жүктеп алуға болады көзіқазіргі уақытта сайт.

Түйіндеме

Сонымен, бәрі жақсы! Бұл оқулықта біз үлкен қадамдар жасадық.

Ойлаңыз, енді сіз HTML және CSS негіздерін білесіз. Біз жалғастырған сайын және сіз HTML және CSS жазуға көбірек уақыт бөлетін болсаңыз, осы екі тілмен жұмыс істеу әлдеқайда ыңғайлы болады.

Қорытындылай келе, біз мыналарды қарастырдық:

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

Енді HTML-ді толығырақ қарастырайық және семантикамен аздап танысайық.

Ресурстар мен сілтемелер

  • Scripting Master арқылы жалпы HTML терминдері
  • CSS шарттары мен анықтамалары әсерлі веб-сайттар арқылы
  • CSS құралдары: CSS-ті Эрик Мейер арқылы қалпына келтіріңіз

Интернетте ұсынылған мазмұнның негізгі бөлігін веб-беттер құрайды. Бұл виртуалды желі кеңістігінде орналастыруға арналған тарихи құжаттың ең бірінші түрі, бірақ ол әлі де өзекті болып қала береді және іс жүзінде бәсекелес пішімдері жоқ. Web-беттердің құрылымы қандай? Олар жасау үшін қандай веб-әзірлеу құралдарын пайдаланады?

Web-парақ дегеніміз не?

«Веб-беттің негізгі элементтерін көрсетіңіз», - дейді емтихан алушы информатика сабағында. Оған жауап ретінде не айта аламыз? Ең алдымен, біз веб-беттің не екенін айтатын боламыз.

АТ мамандары арасында жалпы қабылданған анықтамаға сәйкес, бұл мамандандырылған бағдарламада - браузерде ашуға арналған және әртүрлі пайдалы мазмұнды бағдарламалық қамтамасыз етудің сәйкес түрін - мәтіндерді пайдалана отырып, компьютер экранында көрсетуге арналған деректерді қамтитын құжат , сілтемелер, графика, бейнелер, музыка және т.б. Web-парақ мәтіндік құжат болып табылады. Браузер үшін сәйкес деректер әріптер, сандар және Арнайы белгілер, белгілеу тілі элементтері ретінде пайдаланылады - HTML. Оның көмегімен веб-парақты жасаушы браузерге осы немесе басқа мазмұнды экранда қалай көрсету керектігін «түсіндіреді».

Веб-беттердің сайттар құрылымындағы орны мен рөлі

Web-парақ веб-сайттың негізгі құрамдас бөлігі деп айта аламыз ба? Бұл ішінара шындық. Дегенмен, жоғарыда атап өткеніміздей, веб-бет тек мәтіндік құжат болып табылады. Сайтта, әдетте, суреттер, бейнелер және басқа мультимедиялық элементтер бар. Веб-бет оларды қамтуы мүмкін емес, бірақ оның құрылымында оларға сілтемелер болуы мүмкін. Осылайша, веб-парақты пайдаланушылар алдында виртуалды мазмұнды көрсетудегі басым рөлі бойынша сайттың негізгі құрамдас бөлігі деп атауға болады.

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

Гипермәтінді пайдалану принципі

Сонымен, Web-парақ – бұл құрастырылған құжат HTML тілі, ол гипермәтінді белгілеу үшін қолданылады. Бірақ бұл қандай құбылыс? Гипермәтін дегеніміз не? Теорияға тым терең бойламай, бұл қандай да бір жолмен алуға мүмкіндік беретін мәтін екенін атап өтеміз. жылдам қол жеткізубасқасына - сілтемелер арқылы. Кәдімгі кітапта бұл мүмкін емес - «қарапайым мәтін» бар. Қажетті бетке қол жеткізу үшін оқырман бірнеше айналым жасауы керек, алдымен мазмұнды немесе түсіндірмелерді оқуы керек. Гипермәтіндік режимде жұмыстың көп бөлігін парақтың HTML элементтерінде бейнеленген ақпаратты пайдалана отырып, компьютер орындайды.

Егер информатика мұғалімі бізге: «Веб-беттің негізгі элементтерін тізімдеңіз» десе, біз HTML белгілеу тілі арқылы жасалған сәйкес құжаттың құрамдас бөліктері туралы дұрыс айта аламыз. Сондықтан алдымен HTML-ге қатысты кейбір теориялық ойларды қарастырайық.

HTML тілінің құрылымы: тегтер

Браузер HTML құжатынан веб-бет туралы қажетті деректерді қалай оқиды? Өте оңай.

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

Бастауыш тег әдетте бас әріптермен, жабу тегі кіші әріптермен жазылады. Бұл IT мамандары арасында қалыптасқан стандарт. Браузер, әрине, HTML пәрменін кез келген әріппен таниды, бірақ веб-әзірлеушілер әлі де белгіленген тег жазу схемасын ұстануға кеңес береді. Бұл, мысалы, басқа мамандарға веб-парақты жақсартуды жеңілдетеді.

Атрибуттар

HTML тілінің басқа маңызды элементтері атрибуттар болып табылады. Олардың көмегімен веб-парақты жасаушы мазмұнның қасиеттерін - мысалы, шрифт биіктігін, оның түсін, бетке қатысты орнын белгілей алады. Суреттерге, бейнелерге және басқа мультимедиалық компоненттерге де қатысты. Атрибуттар ашылу тегінде жазылады.

Мазмұны

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

Веб-бет элементтері

«Соңында веб-беттің негізгі элементтерін тізімдеңіз!» – деп мұғалім қайталайды. «Қуанышпен», - деп жауап береміз. Қарастырылатын құжат түрінің құрылымына не кіреді? Келісейік, біз бұл аспектіні веб-беттің HTML элементтері контекстінде қарастырамыз. Яғни, олардың браузерде көрсетілуі - пайдаланушы экранда не көретіні - бізді азырақ қызықтырады. Негізінде бағдарлама мазмұнды бірдей етіп көрсететін сәйкес HTML алгоритмдері әртүрлі болуы мүмкін. Және бұл HTML тілінің ерекшелігі: Web-бетте қажетті суретті көрсетуге болады әртүрлі жолдар. Сонымен қатар, олар веб-бет жасаушының еңбек шығындары бойынша баламалы болуы мүмкін немесе оларды жүзеге асыру үшін басқа күш пен уақытты қажет етеді.

Веб-бет элементтері: тақырып

Веб-беттің стандартты элементтері қаншалықты таңқаларлық көрінсе де, өте аз мөлшерде ұсынылған. Шындығында, олардың екеуі ғана - құжаттың тақырыбы мен негізгі бөлігі. Сонымен бірге олардың әрқайсысы біршама күрделі құрылымға ие болуы мүмкін.

Тақырыптың ерекшеліктері қандай? Ол веб-беттің ең жоғарғы жағында орналасқан. Тақырыпты құрайтын HTML коды әдетте тек мәтінді «шифрлауға» арналған, бірақ қажет болған жағдайда сәйкес элементке шағын графикалық кірістірулерді де орналастыруға болады. Бұл, шын мәнінде, атау туралы айтуға болатын нәрсе. Тиісті құжаттың құрылымындағы оның рөлі шамалы сияқты. Бірақ бұл олай емес. Веб-бет атаулары іздеу жүйелерінде сайтты индекстеу тұрғысынан өте маңызды - Яндекс, Google. Бұл элемент веб-беттің мазмұнына, сондай-ақ сайттың тақырыптық ерекшеліктеріне толығымен сәйкес болуы керек.

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

Веб-құжаттың тақырыбы бірқатар қосымша элементтерді қамтуы мүмкін. Кейде веб-беттің пішімі мәтіннің белгілі бір кодтауда көрсетілуін талап етуі мүмкін. Сіздің веб-құжатыңыздың осы критерийге сәйкес келетініне қалай көз жеткізуге болады? Өте оңай. HTML алгоритмдері құжат тақырыбының құрылымында орналастырылуы керек, браузерге белгілі бір тілді кодтауды - мысалы, кириллицаны пайдалануды нұсқау. Сәйкес командалар басқалар сияқты ашу және жабу болуы мүмкін META тегінде орналастырылған.

Веб-беттің негізгі бөлігі

Веб-құжаттың негізгі бөлігі BODY тегімен ашылады және сәйкес элементпен, соның ішінде қиғаш сызықпен жабылады. Сонымен қатар, ашу және жабу тегтерінің арасында қосымша гипермәтінді белгілеу тілінің командаларының үлкен саны болуы мүмкін. Бұл веб-беттің негізгі бөлігінде оның пайдалы мазмұны - мәтіндер, сілтемелер, графика, бейнелер, толтыру үшін әртүрлі формалар болуымен түсіндіріледі.

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

Кейбір жиі қолданылатын HTML тегтерінің ерекшеліктерін қарастырайық. Іс жүзінде олар веб-беттің негізгі элементтерін құрайды.

Негізгі HTML тегтері

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

Р тегі өте кең таралған.Ол гипермәтіндік белгілеу тілінің басқа ұқсас элементтері сияқты ашу және жабу болуы мүмкін. Бұл тег құжаттың бір абзацын пішімдеуге мүмкіндік береді. Мысалы, ол үшін белгілі бір қаріп түрін немесе түсін орнатуға болады. Дегенмен, бұл қосымша тегтің көмегімен жасалады - FONT. Бұл жағдайда ол абзацтың шекарасын белгілейтін бөліктің ішіне орналастырылады - бұл қалаған қаріп түрін көрсететін HTML пәрменін веб-беттің басқа элементтеріне таратуына жол бермейді.

Кестелер TABLE тегі арқылы жасалады. Сәйкес атрибуттарды пайдалана отырып, бағандар мен жолдардың қажетті санын анықтауға, олардың енін, нақты шекараларын, кестедегі мәтіннің өлшемі мен қаріп түсін орнатуға болады.

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

Басқа веб-құжаттарға немесе файлдарға сілтемелер А тегі арқылы көрсетіледі.Ереже бойынша оның ішінде веб-бет құрылымында гиперсілтеме бар екенін көрсететін атрибуттар бар. Бұл жағдайда ол апаратын құжат, файл немесе сайт көрсетіледі.

Жалпы тег - FRAMESET. Оның көмегімен веб-беттің кеңістігін бірнеше аймақтарға – фреймдерге бөлуге болады. Олардың әрқайсысында бөлек веб-құжаттарды пайдалануға болады. Яғни, кадрлар бір экранда екі немесе одан да көп беттерді бір уақытта дұрыс орналастыруға мүмкіндік береді.

Веб-беттердің негізгі элементтері туралы әңгіме және оларды HTML тілін пайдаланып пішімдеу құралдары туралы кейінгі әңгіме - шамамен бұл емтихан алушының бізге қойған сұрағына жауап беру алгоритмі болады. Егер ол бізге «веб-беттің негізгі элементтерін көрсетіңіз» деп келсе, бізде тиісті әдістемені қолдана отырып, тақырыпты ашуға барлық мүмкіндіктер болады. Яғни, «элементтер» термині арқылы біз веб-құжат құрылымының негізгі құрамдас бөліктерін немесе веб-шебер HTML тілі сияқты құралдың көмегімен жасайтын мазмұн түрлерін – мәтінді, суреттерді, кестелерді, фреймдерді, сілтемелерді түсіне аламыз. .

Веб әзірлеу құралдарының ерекшеліктері

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

Веб-әзірлеуші ​​өз жұмысында, мысалы, Perl, PHP, Java, Python сияқты толыққанды бағдарламалау тілдерін пайдалана алатынын қосу пайдалы болар еді, олардың көмегімен гипермәтіндік құжаттармен жұмыс істеу мүмкіндіктері пайда болады. одан да кеңірек. Бұл қажеттілік бүгінгі күні веб-технологияларды қолдану салаларының әр түрлі болуына байланысты болуы мүмкін. Заманауи әзірлеушілер алдында тұрған міндеттер өте күрделі болуы мүмкін. Мысалы, кейде орыс тілінде жазылған Web-парақтарды ағылшын тіліне аудару қажет болады. Бұл жағдайда әзірлеушінің құралдары өте әртүрлі болады.

Жұмыс мақсаты:студенттерді HTML тілінің негізгі ұғымдарымен, HTML құжатының құрылымымен, міндетті тегтермен, түсініктемелермен, мәтінді пішімдеу әдістерімен, физикалық және логикалық стильдермен таныстыру, қарапайым статикалық Web құжаттарын құру дағдыларын меңгеру.

Зертханалық сабақтарда HTML файлдарын дайындау үшін Блокнот мәтіндік редакторын, ал орындалғанды ​​бақылау құралы ретінде Internet Explorer браузерін қолданамыз.

Теориялық ақпарат

Негізгі ұғымдар

Гипермәтін- компьютер экранындағы мәтін элементтері арасында бір элементтен екінші элементке оңай ауысатындай семантикалық байланыстарды орнатуға мүмкіндік беретін ақпараттық құрылым. Тәжірибеде гипермәтінде кейбір сөздердің астын сызу немесе басқа түспен бояу (гиперсілтемелер) арқылы ерекшеленеді. Сөзді ерекшелеу осы сөз бен ерекшеленген сөзбен байланысты тақырып толығырақ талқыланатын кейбір құжат арасындағы байланысты көрсетеді. HTML форматында жазылған жеке құжат деп аталады:

HTML құжаты;

Web құжат;

Веб парақ.

Мұндай беттер әдетте NTM немесе HTML пішімінде болады.

Бір авторға немесе бір IEDV органына жататын және ортақ гиперсілтемелер арқылы өзара байланысқан веб-беттер тобы веб-торап немесе веб-сайт деп аталатын құрылымды құрайды. Әрбір HTML бетінде өзінің бірегей URL мекенжайы бар - агбeвғаламторда.

жақтау (Жақтау) - екі мағынасы бар термин. Бірінші мән - өзіндік айналдыру жолақтары бар құжат аймағы. Екіншісі - анимациялық графикалық файлдағы (кадр) 0DNN0H кескіні.

Апплет (Апплет) - клиенттік компьютерге жеке файл ретінде тасымалданатын және Web-парақты қарау кезінде іске қосылған бағдарлама.

сценарий (Сценарий) , немесе сценарий — мүмкіндіктерін кеңейту үшін веб-бетке енгізілген бағдарлама. Белгілі бір жағдайларда Internet Explorer шолғышы келесі хабарды көрсетеді: «Бетте сценарийдің орындалуына рұқсат берілсін бе?» Бұл жағдайда біз сценарийлерді айтамыз.

CGI (Жалпы Шлюз Интерфейс) - серверде жұмыс істейтін, Web-беттердің мүмкіндіктерін кеңейтуге мүмкіндік беретін бағдарламалардың жалпы атауы. Мұндай программаларсыз интерактивті Web-беттерді құру мүмкін емес.

Браузер (Браузер) - Web-беттерді көруге арналған бағдарлама.

Элемент- HTML тілінің дизайны. Сіз оны деректерді сақтайтын және оны белгілі бір түрде пішімдеуге мүмкіндік беретін контейнер ретінде қарастыруға болады. Кез келген Web-парақ элементтердің жиынтығы болып табылады. Гипермәтіннің негізгі идеяларының бірі элементтердің ұя салу мүмкіндігі. Мысалы:

<Начало элемента>Элементтің мазмұны, элемент пішімдейтін деректер

Тег(ағылшын тілінде тег – label, descriptor, label) – элементтің басталу немесе аяқталу маркері. Тегтер элементтер әрекетінің шекарасын анықтайды және элементтерді бір-бірінен ажыратады. Web-парақ мәтінінде тегтер бұрыштық жақшаға алынады< >, және соңы тегіннен кейін әрқашан қиғаш сызық болады. Мәтін осы жақшалардың арасында емес (< >), браузерде қараған кезде толығымен көрінеді. Мысалы:

<Начальный тег>Элементтің мазмұны, бұл деректер

элементті пішімдейді

<Р>Бұл мәтін бөлек абзацта орналасады

Кез келген Web-парақ элементтердің жиынтығы болып табылады. HTML тілінің негізгі принциптерінің бірі – бір элементті екіншісіне кірістіру мүмкіндігі.

Атрибут- элементтің параметрі немесе қасиеті. Атрибуттар бастапқы тегтің ішінде орналасқан және бір-бірінен бос орындар арқылы бөлінген. Егер цементте мәтін болса, онда атрибуттар шрифт түсін және өлшемін, туралауды орната алады мәтіндік абзацжәне т.б. Егер элементте сурет болса, онда атрибуттар суреттің өлшемін, суреттің айналасындағы жақтаудың болуын және өлшемін және т.б. көрсете алады.

<Р align="center">Бұл мәтін экранның ортасына тураланады

Бұл мысал абзацтың басы мен соңын анықтайтын тегті пайдаланады. Дегенмен, бастау тегінде мәтінді туралауды экранның ортасына орнататын align төлсипаты бар.

Назар аударыңыз:

Кез келген пайдалы ақпарат бастапқы және аяқталу тегтерінің арасында оның пішімін көрсететін болуы керек;

Барлық атрибуттар бастапқы тегте орналасқан;

Қолдануға ыңғайлы болу үшін бастапқы тегті бас (бас) әріппен (P), ал соңғы тегті кіші (кіші) әріппен (/p) жазуға болады, бірақ бұл қажет емес;

Барлық элементтер аяқталу (жабу) тегін қажет етпейді;

Әрбір жаңа элементті жаңа жолға жазуды бастаңыз. Кірістірілген элементтерді шегініс (қойынды). Бұл қайтадан қажет емес, бірақ бұл сіздің жұмысыңызды айтарлықтай жеңілдетеді.

Веб-парақ мәтінді, графиканы, гиперсілтемелерді, дыбысты, анимацияны және бейнені қамтитын арнайы пішімделген құжат болып табылады.

Ортақ тақырыпты, дизайнды және сілтемелерді бөлісетін және әдетте бір веб-серверде орналасқан бірнеше веб-беттер веб-сайтты құрайды.

Веб-сайт (ағылшын тілінен. веб-сайт: желі- «веб, желі» және сайт- «орын», сөзбе-сөз «орын, сегмент, желінің бөлігі») - жинақ электрондық құжаттаржеке тұлғаның немесе ұйымның (файлдары). компьютерлік желі, бір мекенжайға біріктірілген (домен атауы немесе IP мекенжайы).

Барлық сайттар бірге құрайдыДүниежүзілік өрмек, мұндағы коммуникация (веб) дүниежүзілік қауымдастықтың ақпарат сегменттерін біртұтас тұтастыққа біріктіреді - деректер базасы мен планеталық масштабтағы коммуникациялар. Клиенттердің серверлердегі сайттарға тікелей қол жеткізуі үшін арнайы хаттама әзірленді HTTP .

Веб-сайт белгілі бір тақырып немесе мәселе бойынша ақпаратты қамтитын журнал сияқты құрылымдалған. Журнал баспа беттерінен тұратыны сияқты, веб-сайт компьютердің веб-беттерінен тұрады.

Веб-бетті көрсететін программа веб-браузер деп аталады.

Веб-сайттар HTML гипермәтіндік құжатты белгілеу тілі арқылы жасалады. HTML технологиясы кәдімгі мәтіндік құжатқа басқару таңбаларын (тегтер) кірістіруден тұрады және нәтижесінде Web-парақ аламыз. Браузер веб-бетті жүктеген кезде оны тегтермен көрсетілген пішінде экранда көрсетеді.

HTML сізге мүмкіндік береді:

· мәтінді пішімдеу;

· құжатқа суреттер мен мультимедианы қосу;

· Бұл тілдің көмегімен басқа Web-беттерге гипермәтіндік сілтемелер жасалады.

HTML файлдық ақпарат мазмұнын жасау және Web-беттердің құрылымы мен пішімін анықтау үшін қолданылады. HTML файлдары қарапайым мәтіндік файлдар болғандықтан, мұндай файлды іс жүзінде кез келген компьютерге жіберуге болады.

Web-беттерді жасау үшін жасалған құжатта мәтінді пішімдеуді басқару символдарын қамтымайтын қарапайым мәтіндік редакторлар қолданылады. Windows жүйесінде мұндай редактор ретінде пайдалануға болады стандартты қолдану«Дәптер».

Әдетте, веб-бет файлында .html немесе .htm кеңейтімі болады.

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

HTML бетін көру үшін оның URL мекенжайын веб-шолғыштың мекенжай жолына енгізіп, гиперсілтемелерді орындаңыз. Бірақ бұл басты мәселе - бет мекенжайын қалай білуге ​​болады? Көбінесе сіз не табу керектігін білесіз, бірақ нақты қайдан іздеу керектігін білмейсіз. Бұл мәселені шешу үшін арнайы іздеу жүйелері бар. Пайдаланушы көзқарасы бойынша, іздеу жүйесі- бұл кәдімгі сайт басты бетсанаттарға бөлінген басқа сайттарға сілтемелер бар («Спорт», «Бизнес», «Компьютерлер» және т.б.). Сонымен қатар, іздеу жүйесі пайдаланушыға бірнеше кілт сөздерді енгізуге мүмкіндік береді және сол кілт сөздері бар беттерге сілтемелерді қайтарады.

Веб сайт

Веб-сайт (ағылшынша Website, web – web және site – «орын») – компьютерлік желіде бір мекенжайға біріктірілген жеке тұлғаның немесе ұйымның құжаттарының жинағы. Әдепкі бойынша, сайт Интернетте орналасқан деп есептеледі. Барлық интернет веб-сайттары бірігіп Дүниежүзілік торды құрайды. HTTP протоколы серверлердегі веб-сайттарға тікелей кіру үшін клиенттер үшін арнайы әзірленген. Веб-сайттар басқаша адамның немесе ұйымның Интернеттегі өкілдігі деп аталады. Олар «Интернеттегі жеке парағыңыз» деп айтқанда, бұл бүкіл веб-сайтты немесе басқа біреудің сайтының бөлігі ретінде жеке бетті білдіреді. Интернеттегі веб-сайттардан басқа, ұялы телефондарға арналған WAP сайттары да бар.

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

Интернетте көп жағдайда бір веб-сайт бір домендік атқа сәйкес келеді. Дәл сәйкес домен атауларысайттарында анықталған жаһандық желі. Басқа опциялар мүмкін: бірнеше домендегі бір сайт немесе бір домен астындағы бірнеше сайт. Әдетте, бірнеше домендерді ірі сайттар (веб-порталдар) ұсынылған қызметтердің әртүрлі түрлерін логикалық түрде бөлу үшін пайдаланады (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Бөлек домендер бөлінген жағдайлар да бар әртүрлі елдернемесе тілдер. Мысалы, google.ru және google.fr логикалық тұрғыдан әртүрлі тілдегі Google сайттары, бірақ техникалық жағынан олар әртүрлі сайттар. Бір домен астында бірнеше сайттарды біріктіру тән тегін хостинг. Сайттарды анықтау үшін мекен-жайда хосттан кейінгі тілде және сайт атауы бар: example.com/~my-site-name/.



Санаттағы танымал:
Компьютерде караоке клипін қалай жасауға болады?
Компьютерде караоке клипін қалай жасауға болады?
оқыңыз
Ойын үшін Origin қолданбасы қажет, бірақ ол орнатылмаған. FIFA 16 үшін Origin қажет.
Origin қолданбасы ойнау үшін қажет, бірақ ол FIFA орнатылмаған...
оқыңыз
Facebook әлеуметтік желісіндегі жеке парақшаны тіркеу
Facebook әлеуметтік желісіндегі жеке парақшаны тіркеу
оқыңыз
Қарапайым Nmap Nmap сканерін қалай іске қосу керек
Қарапайым Nmap Nmap сканерін қалай іске қосу керек
оқыңыз

Соңғы мақалалар
Суретті бірнеше градусқа қалай бұруға болады...
оқыңыз
Яндекс браузерінде жарнаманы өшіру Қайда...
оқыңыз
Wi-Fi қосылымының ақаулықтарын жою...
оқыңыз
Windows 10 профилінде құпия сөзді өзгертіңіз
оқыңыз
Сымсыз маршрутизаторларды орнату нұсқаулары...
оқыңыз
Қатты дискіні қалай таңдауға болады және қайсысын сатып алған дұрыс...
оқыңыз
Манекендерге арналған Meizu. Қоңыраулар мен мекенжайлар кітабы....
оқыңыз
PDFMaster бағдарламасын жүктеп алыңыз
оқыңыз
Жоғарғы