Кампутары, Праграмаванне
HTML: асновы для пачаткоўцаў
HTML - мова разметкі гіпертэксту, які зрабіў інтэрнэт такім, якім мы яго ведаем і любім. Менавіта дзякуючы гэтаму выдатнаму інструменту сайты выглядаюць прыгожа і сучасна, а таксама забяспечваецца зручнасць іх выкарыстання. Мова HTML проста кампануе элементы вэб-старонкі ў зручны для карыстальніка варыянт. Яго праца параўнальная з тым, што робяць тэкставыя рэдактары тыпу MS Word ці OpenOffice. Яны ператвараюць безаблічную масу літар у дакумент, у якім ёсць абзацы, тоўсты тэкст, курсіў, табліцы і нават выявы. Прыкладна тое ж самае робіць мова HTML, з той толькі розніцай, што яго дакументы адлюстроўваюцца ў браўзэры, ды і магчымасці гэтай прылады значна шырэй, чым у тэкставага рэдактара. Для разметкі выкарыстоўваюцца тэгі - адмысловыя каманды, якія апісваюць структуру вэб-старонкі. Яны складзеныя ў вуглавыя дужкі - <тэг>, каб браўзэр мог адрозніць іх ад агульнай масы тэксту. Далей мы разгледзім асновы HTML для пачаткоўцаў.
візуальныя рэдактары
Пачаткоўцы, толькі хто стаў на шлях вывучэння HTML, часта пачынаюць сваю працу з праграм, якія дазваляюць ствараць сайты без якіх-небудзь ведаў. У іх можна проста размясціць элементы на экране так, як яны будуць адлюстроўвацца ў браўзэры. Здавалася б, вось ён - крыніца вечнай ласкі, які дазваляе пазбавіцца ад большасці вэб-распрацоўнікаў. Але не ўсё так проста, так як у візуальных рэдактараў ёсць маса недахопаў, якія робяць немагчымым іх выкарыстанне ў сур'ёзных праектах.
Усе гэтыя праграмы ствараюць шмат непатрэбных тэгаў, якія робяць канчатковы варыянт старонкі грувасткім і неаптымальнай. Вядома, у наш век хуткаснага інтэрнэту гэта мае меншае значэнне, чым раней, але ёсць шэраг прычын, па якіх лаканічны і пісьменна напісаны сайт атрымліваецца больш практычным, чым яго субрат, створаны ў візуальным рэдактары. Вэб-старонка, зробленая ў такой праграме, будзе дрэнна апрацоўвацца пошукавымі робатамі, бо для іх важны кожны кілабайт кода, а грувасткі і нелагічны код з кучай семантычных памылак ці ледзь прыйдзецца ім да спадобы. Акрамя гэтага, рэдактары часта адстаюць ад часу, становячыся неактуальнымі, а марнаваць рэсурсы на іх развіццё немэтазгодна, так як ні адзін прафесіянал не карыстаецца гэтымі прадуктамі. Таму кожны, хто хоча працаваць у сферы стварэння сайтаў, павінен ведаць асновы HTML.
тэгі
Як згадвалася вышэй, тэгі апісваюць браўзэру структуру вэб-старонкі. Большасць з іх маюць адчыняе і што зачыняе тэг, але далёка не ўсё. Напрыклад,
Сустракаюцца таксама адзінкавыя тэгі, якія не трэба зачыняць. У іх змесціва знаходзіцца ўнутры, гэтак жа як і атрыбуты. Атрыбут можа быць прапісаны для большасці HTML-тэгаў і задае ўласцівасці элемента. Пазначаецца ён у адкрывае тэгу і выглядае прыкладна так: атрыбут = «...», дзе замест кропак знаходзіцца значэнне атрыбуту. Веданне тэгаў з'яўляецца першым і самым важным крокам для асваення HTML. Асновы гэтага мастацтва таксама маюць на ўвазе разуменне структуры вэб-старонкі.
структура дакумента
Кожны дакумент HTML мае адпаведнае пашырэнне, напрыклад, Index.html. Так браўзэр зможа зразумець, з чым ён мае справу, і правільна адлюструе старонку. Усе файлы, якія выкарыстоўваюцца для стварэння сайта, пажадана захоўваць у аднаго каталога, што ў далейшым істотна палегчыць вам жыццё. Асновы мовы разметкі гіпертэксту HTML мяркуюць выразнае разуменне структуры дакумента. Пачынаецца ён з тэга , які паведамляе браўзэру версію HTML, якая выкарыстоўваецца ў гэтым дакуменце. На дадзены момант актуальная пятая версія мовы, так што тут не трэба нічога выдумляць, можна смела ўстаўляць прыведзены вышэй тэг у пачатак любой старонкі.
Потым ідуць асноўныя парныя структуры, складнікі «шкілет» сайта. Першы тэг, у які ўкладзены ўсе астатнія - ... html>. Усё, што знаходзіцца за яго межамі, ня распазнаецца браўзэрам як вэб-старонка, так што ён адкрывае дакумент і закрывае яго. Гэты тэг з'яўляецца абавязковым для любога дакумента. У ім таксама ўтрымліваюцца яшчэ некалькі абавязковых тэгаў, якія будуць разгледжаны ніжэй.
Head
Ўнутры тэга
... head> змяшчаецца інфармацыя тэхнічнага характару, якая не будзе адлюстроўвацца на старонцы, але, тым не менш, з'яўляецца важнай часткай дакумента HTML. Асновы сайта закладваюцца менавіта ў гэтым месцы, тут выбіраецца кадоўка і ўводзіцца назву старонкі. Яно змяшчаецца ўнутры абавязковага тэгаLink
Веданне асноў HTML таксама мяркуе выкарыстанне каскадных стыляў афармлення, або css. У іх задаюцца ўласцівасці элементаў, якія будуць адлюстраваныя на старонцы. Сучасны падыход да гэтай задачы прадугледжвае вынясенне такіх характарыстык, як колер, вышыня і месцазнаходжанне элемента, у знешні файл для большай зручнасці. Для падлучэння css-файла выкарыстоўваецца тэг . У гатовым выглядзе гэта выглядае прыкладна вось так: , дзе href паказвае на месцазнаходжанне файла, а type - на яго тып.
Body
Менавіта ў гэтай частцы HTML-дакумента ствараецца бачная частка старонкі. Усё, што робіцца ўнутры «цела», будзе паказана браўзэрам. У
- - ужываецца для вылучэння падрадка, на якую будзе распаўсюджвацца адмысловы стыль, апісаны ў css;
- - стварае спасылку на вэб-старонцы; адрас пераходу задаецца атрыбутам href;
- - адзін з найпапулярнейшых тэгаў сучаснасці; кожны, хто вырашыў вывучыць асновы мовы HTMLl, павінен надаць яму асаблівую ўвагу, паколькі гэта блокавы элемент, на аснове якога зроблена ільвіная доля сучасных сайтаў (параметры для блокаўзадаюцца ў css, і ўнутры гэтага тэга могуць размяшчацца іншыя блокі);
- вылучае абзац з тэксту; змесціва абзаца знаходзіцца паміж адкрывалым і які закрывае тэгамі;
- - нумараваны спіс, элементы якога складаюцца ў парны тэг
- ;
-
- - маркіраваны спіс, у якім, гэтак жа як і ў нумараваць, элементы абазначаюцца тэгам
- ;
-
-
- загалоўкі дакумента (лічба абазначае ўзровень загалоўка, гэта значыць
- галоўны загаловак, а наступныя варыянты з'яўляюцца яго падзагалоўкамі, дарэчы, загалоўкі узроўняў
,
амаль немагчыма сустрэць на прасторах інтэрнэту) , таксама важна памятаць, што на старонцы можа быць толькі адзін загаловак
;
- - тоўсты тэкст;
- - курсіў;
-
- устаўка карцінкі на інтэрнэт старонку (гэта адзінкавы тэг, яму не патрабуецца зачыняе, але ў ім абавязкова трэба пазначыць атрыбут alt, у якім указваецца тэкст для малюнка);
Гэта далёка не ўсе тэгі, неабходныя для стварэння ўласнай вэб-старонкі, але іх цалкам дастаткова, каб закласці асновы HTML для пачаткоўцаў.
CSS
Развіццё мовы HTML прывяло да таго, што кожны тэг абзавёўся масай атрыбутаў, ды і патрабаванні да знешняга выгляду вэб-старонак істотна ўзраслі. Код стаў грувасткім і нязручным, складана было прачытаць яго, не тое што адаптаваць ці змяніць. Да таго ж, калі на вашым сайце дзесяць старонак, на якіх шмат загалоўкаў, адзначаных зялёным колерам, а вам раптам захацелася зрабіць іх чырвонымі, то прыйдзецца папацець, змяняючы кожны ўручную. З з'яўленнем каскадных табліц стыляў гэты працэс стаў простым і лагічным, ды і HTML-код стаў куды больш чытэльным.
прымяненне CSS
Для стварэння вэб-старонак неабходна ведаць асновы HTML і CSS, так як цяпер без ведання каскадных табліц стыляў рабіць у гэтай сферы няма чаго. У іх задаюцца атрыбуты для любога элемента, якія распаўсюджваюцца на ўвесь дакумент. Такім чынам, можна задаць колер адразу для ўсіх элементаў
Для таго каб падлучыць файл css да дакумента, існуе тэг link. Ледзь вышэй быў апісаны прынцып яго выкарыстання, але ён не з'яўляецца адзіным варыянтам аб'яднання ўсіх стыляў у адным месцы. Ёсць яшчэ тэг