Прыклад старонкі HTML і асноўныя прынцыпы стварэння

Прыдумана мноства моў, але мова HTML належыць да ліку асаблівых і самых восстребованных. З ім звязана мноства іншых ключавых пачынанняў у праграмаванні. Многае становіцца даступным, калі ў свядомасці распрацоўніка прысутнічае веданне мовы разметкі - HyperText Markup Language (HTML).

У сутнасці, у HTML няма нічога складанага, і праз некалькі хвілін любы, самы далёкі ад праграмавання і інтэрнэту чалавек, выканае стварэнне HTML-старонкі ў нататніку. Прыклад, які заслугоўвае ўвагі, прастата, сапраўды, даступная кожнаму.

агульнае апісанне

Файл HTML - гэта адна старонка сайта, хоць з гэтым можна паспрачацца, але тое, што адзін файл складае адну старонку, для пачатку зразумела.

Файл HTML пачынаецца з загалоўка DOCTYPE, у якім пазначана, што тып дадзенага файла - HTML. Усе элементы старонкі (тэгі) паказваюцца ў кутніх дужках. Кожная пара ( «<» і «>») уключае ў сябе адзін тэг HTML. Звычайна тэгі HTML парныя, гэта значыць на кожны «tag» ёсць «/ tag». Абодва складаюцца ў вуглавыя дужкі. Ёсць тэгі адзінкавыя, з іх самы папулярны «br /» - пераход на наступны радок.

Самы вялікі тэг у файле - гэта сам HTML, у які ўваходзяць ўсяго два тэга: HEAD і BODY. У першым робяцца розныя апісання, паказваюцца спасылкі на іншыя патрэбныя старонцы файлы, могуць прысутнічаць скрыпты PHP і JavaScript. У другім запісваецца кантэнт старонкі. Таксама ў выглядзе тэгаў і скрыптоў.

Простая HTML-старонка

Прыклад стварэння такой старонкі паказаны ніжэй у артыкуле. Разгледзім яго ўважліва.

Раздзел HEAD

Асноўнае прызначэнне тэга HEAD - агульнае апісанне старонкі і агульных скрыптоў, хоць апошняе - досыць адноснае паняцце. Звычайна тут надаюць істотнае значэнне толькі двум рэчам:

• ключавыя словы і апісанне старонкі;
• спасылкі на іншыя файлы (* .css і * .js).

Для адлюстравання кантэнту старонкі змесціва дадзенага раздзела мае толькі ўскоснае значэнне, паколькі паказвае: дзесьці ў іншых файлах ёсць правілы CSS для тэгаў і скрыпты іншых моў.

HTML-старонка мае загаловак (TITLE), які адлюстроўваецца, калі наведвальнік падводзіць мышку да ўкладцы, дзе старонка адкрыта. Гэта важны момант, паколькі робіць старонку істотна больш прэзентабельнай, прасцей сказаць, падпісанай чытэльным тэкстам.

META-тэгі маюць важнае значэнне ў інтэрнэт-праграмаванні наогул, але калі патрабуецца стварэнне HTML-старонкі ў нататніку, прыклад непажадана загрувашчваць лішнімі канструкцыямі.

На спасылкі LINK і SCRIPT варта звярнуць асаблівую ўвагу. Першая паказвае на месца, дзе знаходзіцца файл стыляў CSS, другая - на месцазнаходжанне файла JavaScript-кода. Такіх спасылак можа быць мноства.

Калі да скрыптам варта падыходзіць, калі веды аб HTML умацуюцца, то на каскадныя табліцы стыляў варта звярнуць увагу неадкладна. У файлах CSS прыводзяцца, у прыватнасці, правілы афармлення тэгаў HTML.

Раздзел BODY

Уласна, прыклад старонкі HTML - гэта і ёсць раздзел BODY. Менавіта тут змяшчаецца ўся інфармацыя, увесь кантэнт старонкі сайта. Уся інфармацыя падаецца ў выглядзе тэгаў і скрыптоў, напрыклад ўстаўкі JavaScript-кода або кавалачкаў PHP-праграм.

Важна разумець, што прыклад вэб-старонкі HTML у браўзэры і той жа прыклад у тэкставым рэдактары, у прыватнасці notepad, гэта далёка не адно і тое ж. У першым выпадку мы маем гатовы HTML-тэкст, у якім усе скрыпты выкананы. Напрыклад, PHP адпрацаваў сваю частку і сфармаваў замест свайго кода ў патрэбных месцах патрэбныя тэгі. JavaScript таксама выканаў сваю місію, хоць пра яго яшчэ трэба будзе асобная размова.

HTML - гэта тэгі, а не скрыпты. У канчатковым рахунку ў браўзэры адлюстроўваецца толькі кантэнт старонкі, толькі яе тэгі. Ніякага PHP-кода там няма.

JavaScript знаходзіцца на асаблівым становішчы, яго клопат - абслугоўваць старонку не толькі ў момант загрузкі (перагрузкі), але і ў моманты, калі старонка знаходзіцца ў браўзэры наведвальніка, а той вывучае яе.

Просты прыклад кода HTML-старонкі (толькі раздзел BODY) паказаны ніжэй.

А ў браўзэры наведвальніка ён выглядае так, як паказана далей.

У кодзе не было паказана, як павінны выглядаць элементы, якія вывеў браўзэр. Усё бачнае афармленне знаходзіцца ў правілах CSS. У дадзеным выпадку ў файле Mcss / scPhpWordRW.css, на які была спасылка (гл. Самы першы прыклад старонкі HTML).

У адрозненне ад HTML, тэма CSS больш простая, там вельмі даступныя правілы і іх колькасць невялікая, калі прыклад стварэння HTML-старонкі не патрабуе нічога, акрамя notepad. Усё вельмі даступна для маментальнага асваення:

Тут паказана, як проста апісаны тэг scLogo_vDoc, прычым гэта апісанне такое, што ў нармальным стане тэг адлюстроўвае карцінку vDoc-logo.png, а калі над ім знаходзіцца мышка - адлюстроўваецца vDoc-logo-h.png.

Структура апісанняў HTML

Мова не прадугледжвае како-небудзь структуры і паняцце сінтаксісу тут вельмі адноснае. Тут няма зменных, але ёсць маса магчымасцяў. Прынцыповая аснова гіпертэксту у тым, што існуе элемент (тэг) які абавязкова мае імя.

Імя, у выпадку парнага тэга, складаецца з уласна імя (tagName) і кутніх дужак ( «<» + tagName + «>»), калі гаворка ідзе пра пачатак тэга, і «», калі запісваецца яго канец.

Прыклад старонкі HTML з апісаннем атрыбутаў размешчаны ніжэй у тэксце.

Тэг можа мець атрыбуты, тады яны змяшчаюцца праз прабел пасля імя тэга да закрывае кутняй дужкі «>». Атрыбуты, калі яны ёсць у тэга, запісваюцца толькі ў яго пачатку. Утрыманнем тэга лічыцца тое, што знаходзіцца паміж пачаткам тэга і яго канцом.

Агульнае ўтрыманне апісанняў HTML

HTML дазваляе апісваць блокавыя і малыя элементы. Першыя займаюць пэўную вобласць у акне браўзэра, могуць пазіцыянавацца абсалютна, гэта значыць у патрэбным месцы вобласці адлюстравання HTML-старонкі, і мець канкрэтны памер.

Малыя элементы ў агульным выпадку адлюстровываюцца адным патокам, гэта значыць так, як былі пазначаны ў файле старонкі, так і выводзяцца на экран. На адлюстраванне агульнага патоку можна ўплываць, калі адбываецца загрузка старонкі. На размяшчэнне, бачнасць і іншыя ўласцівасці блокавых элементаў можна ўплываць ў любы час з дапамогай JavaScript-кода.

Акрамя простых элементаў, HTML прапануе апісваць табліцы і формы. Гэтыя элементы вельмі запатрабаваны ў «паўсядзённым сайтостроении».

Апісанне табліцы: тэгі TABLE, TR, TD

Пры дапамозе тэга TABLE можна стварыць табліцу, пазначыць некаторы колькасць шэрагаў TR і ў кожным шэрагу нейкая колькасць вочак TD. У адрозненне ад звыклай таблічнай арганізацыі, з прычыны асаблівасцяў HTML-разметкі, Таблічная арганізацыя абмяжоўваецца дадзенай дэкларацыяй, таму калі распрацоўшчык жадае мець прастакутную табліцу, у якой колькасць калонак па ўсіх шэрагах аднолькава, то ён павінен за гэтым сачыць самастойна.

Прынцыповая пазіцыя HTML: рабіць усё, што паказана, але нічога з таго, што не зразумета. У некаторых выпадках не гэтак важна колькасць калонак у кожнай радку табліцы, але, калі трэба выканаць аб'яднанне вочак па вертыкалі або па гарызанталі, прыйдзецца палічыць усё вельмі ўважліва.

Прыклад старонкі HTML з апісаннем просты табліцы наглядна паказаны ў артыкуле.

Тут паказана табліца памерам тры рады на тры калонкі, прычым у першым шэрагу замест тэга TD быў выкарыстаны тэг TH - загаловак калонкі. Асаблівага адрозненні гэтыя два тэга не маюць, але выкарыстаць першы цалкам можна, каб адрозніць першы шэраг табліцы, ды і ў CSS да TH можна прымацаваць уласны стыль, што выгадна адрознівае яго ад астатніх TD.

Апісанне формы: тэгі FORM, INPUT

Формы - гэта самая запатрабаваная частка HTML-тэгаў. Пры дапамозе формаў можна перадаваць інфармацыю. Уласна, сама старонка - гэта выснова інфармацыі, а вось форма - яе ўвод.

Прыклад старонкі HTML з апісаннем просты формы:

Варыянтаў выкарыстання формаў значна больш, але асноўныя магчымасці такія. Можна паказаць поля ўводу, прызначыць ім трэба афармленне і апрацоўшчыкі для аналізу ўводзяцца карыстальнікам дадзеных. Можна паказаць скрытыя поля і перадаваць са старонкі фонавую інфармацыю. Можна пазначыць кнопкі перадачы інфармацыі, націск на якія ініцыюе працэс перадачы звестак.

выкарыстанне HTML

Ведаць мову гіпертэксту - абавязковая ўмова працы па любой спецыялізацыі ў галіне інтэрнэт-праграмавання, але калі неабходна пісаць праграмы на PHP або JavaScript, то ведаць HTML + CSS трэба ў дасканаласці.

Мова PHP быў пазначаны ў папярэднім прыкладзе. PHP працуе на сэрвэры, таму старонка з гэтай формай паляцела з сервера ў браўзэр з запоўненымі палямі. У прыватнасці, функцыя TestOnBlur, згаданая ў тэгу INPUT (апрацоўшчык падзеі onblur), атрымала ўсе параметры ў выглядзе тэкставых палёў.

У браўзэры працуе JavaScript, і, каб правільна спрацавала кнопка адпраўкі дадзеных назад на сервер, гэта значыць канструкцыя: onclick = jQuery ( '# to'). Val ( 'cart'), неабходна мець уяўленне не толькі пра тое, што такое jQuery, але і што такое #to, val, cart. Калі больш дакладна, неабходна ведаць асноўныя тэгі HTML і агульныя правілы прымянення да іх стыляў CSS.

Гэтага цалкам дастаткова, каб хутка падняць сваю кваліфікацыю па любой спецыялізацыі ў галіне інтэрнэт-праграмавання.