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

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

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

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

HTML (HyperText Markup Language) мазмұнның құрылымын және оның мағынасын, мысалы, тақырыптар, абзацтар немесе кескіндер сияқты мазмұнды анықтау арқылы анықтайды. CSS (Cascading Style Sheets) немесе 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 >Және түс қасиетінің мәнін қызғылт сары, ал font-size қасиетінің мәнін 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 атрибутының мәнімен белгіленеді. Мұнда 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-парақ дегеніміз не?

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

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

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

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

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

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

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

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

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

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

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

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

Атрибуттар

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

Мазмұны

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML құжаты;

Веб-құжат

Веб парақ.

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

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

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

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

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

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

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

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

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

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

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

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

<Р>Бұл мәтін бөлек параграфта болады

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML мүмкіндік береді:

Мәтінді пішімдеу

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

Бұл тіл басқа веб-беттерге гипермәтіндік сілтемелер жасайды.

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 қолданбасы ойнау үшін қажет, бірақ оны Fifa орнатпаған...
оқу
Facebook әлеуметтік желісіндегі жеке парақшаны тіркеу
Facebook әлеуметтік желісіндегі жеке парақшаны тіркеу
оқу
Қарапайым Nmap Nmap сканерлеуін қалай іске қосу керек
Қарапайым Nmap Nmap сканерлеуін қалай іске қосу керек
оқу

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