Вывучэнне HTML

Відэа: COVID-19: где искать данные и как их верифицировать

Задаволены

Крок
Частка 1 з 2: Вывучэнне асноў HTML
Частка 2 з 2: Вывучэнне пашыранага HTML
Парады
Папярэджанні
Неабходнасці

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

Крок

Частка 1 з 2: Вывучэнне асноў HTML

Адкрыйце HTML-дакумент. Большасць праграм для апрацоўкі тэкстаў, у тым ліку Блокнот альбо Word для Windows і Тэкставы рэдактар для Mac, можна выкарыстоўваць для стварэння HTML-дакументаў. Адкрыйце новы дакумент і ў меню зверху выберыце Файл → Захаваць як, каб захаваць дакумент як вэб-старонку, альбо змяніце пашырэнне файла з ".doc", ".rtf" ці чаго іншага на ".html" ці ".htm ".
- Цяпер вы можаце ўбачыць папярэджанне аб тым, што ваш дакумент змяняецца з фармату Rich Text (RTF) на "звычайны тэкст" і што некаторыя параметры фарматавання і выявы захоўваюцца неналежным чынам. Вы можаце ігнараваць гэтае папярэджанне; У дакументах HTML гэтыя параметры не выкарыстоўваюцца.
- Файлы .html і .htm аднолькавыя. І тое, і іншае працуе.
Праглядайце дакумент у браўзэры. Захавайце пусты дакумент, зачыніце яго, а затым двойчы пстрыкніце дакумент у месцы, дзе ён быў захаваны, каб зноў адкрыць яго. Цяпер ваш дакумент павінен адкрывацца вашым аглядальнікам як пустая вэб-старонка. Калі гэта не працуе, перацягніце значок файла ў адрасную радок вашага аглядальніка. Пазней, калі вы адрэдагуеце свой HTML-дакумент, прытрымліваючыся крокаў, прыведзеных у гэтым артыкуле, вы будзеце працягваць вяртацца да браўзэра, каб праверыць, як выглядаюць змены ў кодзе.
- Заўвага: ваша вэб-старонка пакуль не працуе ў Інтэрнэце. Старонка недаступная для іншых, і для яе праверкі вам не трэба падключэнне да Інтэрнэту. Вы проста выкарыстоўваеце свой браўзэр, каб "прачытаць" дакумент HTML, як калі б гэта быў вэб-сайт.
Зразумець, што такое "тэгі". Тэгі не бачныя на канчатковай вэб-старонцы, як звычайны тэкст. Тэгі паведамляюць вашаму аглядальніку, як адлюстроўваць старонку і змест старонкі. Пачатковы тэг змяшчае інструкцыі. Напрыклад, ён можа сказаць аглядальніку выводзіць тэкст тлустым шрыфтам. Канцавы тэг неабходны, каб паведаміць аглядальніку, дзе прымяняюцца інструкцыі: у гэтым прыкладзе ўвесь тэкст паміж пачатковым і канцавым тэгамі выдзяляецца тлустым шрыфтам. Канцавыя тэгі таксама размяшчаюцца ўнутры дужак, але косая рыска ідзе пасля першай дужкі.
- У дужках запішыце пачатковыя тэгі: гэта пачатак дня>
- Запішыце канцавыя тэгі ў дужкі, але пасля першай дужкі пастаўце слэш: /гэта заключны тэг>)
- Далей у артыкуле чытайце, як пісаць функцыянальныя тэгі. На гэтым этапе вам проста трэба запомніць, якім спосабам пісаць тэгі:> і />.
- У іншых курсах HTML тэгі таксама называюць "элементамі", а тэкст паміж тэгамі, якія адкрываюцца і закрываюць, таксама называюць "зместам элемента".
Напішыце свой першы тэг html>. Кожны дакумент HTML пачынаецца з html>тэг і заканчваецца а / html>пазнака. Гэта кажа аглядальніку, што ўсё паміж гэтымі тэгамі напісана ў HTML. Дадайце ў дакумент наступныя тэгі:
- Пішыце html> уверсе вашага дакумента.
- Націсніце "Увайсці" альбо "Вярніцеся" некалькі разоў, каб даць сабе месца, а потым напішыце / html>
- Памятаць цябе усё у гэтым артыкуле паміж гэтымі двума тэгамі.
Зрабіце head> часткай дакумента. Паміж тэгамі html> і / html> вы пішаце кіраўнік>стартавы тэг і / кіраўнік>-канцовая пазнака. Зрабіце яшчэ раз паміж гэтымі тэгамі. Усё, што напісана паміж гэтымі тэгамі, не будзе бачна на самой вэб-старонцы. Паспрабуйце выканаць наступныя дзеянні і даведацца, ці можна ўбачыць, дзе паказваецца інфармацыя:
- Напішыце паміж тэгамі head> і / head>: загаловак> і / загаловак>
- Паміж тэгамі title> і / title> вы пішаце: Як вывучыць HTML (з выявамі) - wikiHow.
- Захавайце дакумент і адкрыйце яго ў браўзэры (альбо захавайце дакумент і абнавіце старонку ў браўзэры, калі старонка ўсё яшчэ была адкрыта). Вы бачыце тое, што вы толькі што напісалі, уверсе старонкі, над адрасным радком?
Стварыце цела> раздзел. Усё астатняе ў гэтым дакуменце для пачаткоўцаў размешчана ў раздзеле "body>" і паказана на вэб-старонцы. Пасля тэг / галава>, але наперадзе тэг / html> вы пішаце цела> і / цела>. Усё, што мы абмяркуем далей у гэтым артыкуле, мы размяшчаем паміж тэгамі цела. Цяпер у вас павінен быць дакумент, які выглядае так (без маркераў):
- html>
- кіраўнік>
- title> даведацца HTML - wikiHow / title>
- / кіраўнік>
- цела>
- / цела>
- / html>
Дадайце тэкст у розных стылях. Цяпер настаў час, каб вы пачалі пісаць тое, што будзе бачна ў браўзэры! Усё, што вы напішаце ў тэгах цела, будзе бачна ў аглядальніку пасля захавання змяненняў і абнаўлення старонкі ў браўзэры. Пішыце не нешта са знакамі і >таму што ваш браўзэр будзе інтэрпрэтаваць гэта як інструкцыю HTML замест простага тэксту. Пішыце напрыклад Прывітанне Сусвет! (Англійская для "Hello world!", Гэта глабальны стандартны тэкст як першы прыклад у любым курсе праграмавання на пэўнай мове праграмавання) ці нешта іншае, і пастаўце наступныя тэгі перад і пасля тэксту і паглядзіце, што адбудзецца:
- em> Прывітанне, свет! / em> выглядае як выдзелены курсіў тэкст: Прывітанне Сусвет!
- моцны> Прывітанне, свет! / моцны> выглядае як паўтлусты тэкст: Прывітанне Сусвет!
- s> Прывітанне, свет! / s> выглядае як закрэслены тэкст: ~~Прывітанне Сусвет!~~
- sup> Прывітанне, свет! / sup> выглядае як індэкс:
- sub> Прывітанне, свет! / sub> выглядае як надпіс: _{Прывітанне Сусвет!}
- Паспрабуйце камбінацыі: як бачыць em> strong> Hello world! / strong> / em> выйсці?
Падзяліце свой тэкст на абзацы. Калі вы ўкладзеце ў дакумент розныя радкі тэксту, вы ўбачыце, што ўсе радкі размешчаны адзін за адным. Вам трэба самастойна запраграмаваць новыя і пустыя радкі:
- p> Гэта асобны раздзел. / p>
- Гэты сказ знаходзіцца ў першым радку, а гэты сказ - у наступным.
  Гэта першы тэг, з якім мы сутыкаемся, і які не мае патрэбы ў канчатковым тэгу! Мы называем такі тэг адным пусты тэг.
- Стварыце загалоўкі, каб зрабіць назвы раздзелаў зразумелымі:
  h1> загаловак / h1>: максімальна магчымы загаловак
  h2> загаловак / h2> (загаловак 2-га ўзроўню)
  h3> загаловак / h3> (3-х узроўневы загаловак)
  h4> загаловак / h4> (загаловак 4 узроўню)
  h5> загаловак / h5> (максімальна магчымы загаловак)
Даведайцеся, як складаць спісы. Ёсць некалькі спосабаў стварэння спісаў на вэб-старонцы. Паспрабуйце наступныя метады, каб даведацца, што вам больш падабаецца. Звярніце ўвагу, што адна пара тэгаў размяшчаецца па ўсім спісе (напрыклад, ul> і / ul> тэгі для неўпарадкаваных спісаў), а іншая пара тэгаў размяшчаецца вакол кожнага элемента ў спісе, напрыклад li> і / li> .
- Выкарыстоўвайце наступны код для стварэння маркіраваных спісаў:
  ul> li> Адзін элемент / li> li> Іншы элемент / li> li> Іншы элемент / li> / ul>
- Або гэты код для стварэння нумараваных спісаў:
  ol> li> Пункт 1 / li> li> Пункт 2 / li> li> Пункт 3 / li> / ol>
- Або гэты код для стварэння так званага спісу вызначэнняў:
  dl> dt> кава / dt> dd> - гарачы напой / dd> dt> малако / dt> dd> - халодны напой / dd> / dl>
Зрабіце старонку больш прывабнай з дапамогай новых ліній, гарызантальных ліній і малюнкаў. Цяпер прыйшоў час пачаць дадаваць іншыя рэчы на сваю старонку. Паспрабуйце наступныя тэгі (выява павінна быць размешчана ў Інтэрнэце, каб вы маглі выкарыстоўваць спасылку на малюнак):
- Уставіць радок: br> альбо hr>
- Уставіць выявы: img src = "the_url_of_your_image">
Устаўце спасылкі на іншыя месцы на старонцы. Вы таксама можаце выкарыстоўваць гэты код для спасылак на іншыя старонкі і вэб-сайты, але паколькі ў вас яшчэ няма вэб-сайта, мы спынімся на "якарах", якія ўяўляюць сабой пэўныя месцы на старонцы, на якія вы можаце зрабіць спасылку:
- Па-першае, стварыце прывязку з тэгам a> у кропцы старонкі, на якую вы хочаце зрабіць спасылку. Дайце якару дакладнае імя, якое лёгка запомніць:
  
  a name = "Парады"> Гэта тэкст, вакол якога вы размяшчаеце якар. />
- Выкарыстоўвайце тэг href>, каб зрабіць спасылку на якар альбо на іншую вэб-старонку:
  
  a href = "url вэб-старонкі альбо імя прывязкі на гэтай старонцы"> Напішыце тут тэкст ці малюнак, паказаныя як спасылка. />
- Каб зрабіць спасылку на прывязку на іншай старонцы, дадайце сімвал # пасля URL-адраса, а потым - назву вашага прывязкі. Напрыклад, http://www.wikihow.com/HTML-leren#Tips прывядзе вас да раздзела "Парады" на гэтай старонцы.

Частка 2 з 2: Вывучэнне пашыранага HTML

Даведайцеся пра атрыбуты. Атрыбуты размяшчаюцца ў тэгу і выкарыстоўваюцца для дадатковых карэкціровак "зместу элемента" паміж пачатковым і канчатковым тэгамі. Яны ніколі не стаяць у адзіноце. Яны напісаны наступным чынам: name = "значэнне". імя ўяўляе назву атрыбута (напрыклад, "колер") і значэнне апісвае гэты канкрэтны выпадак (напрыклад, "чырвоны").
- Калі вы ўважліва прыгледзеліся ў папярэдняй частцы гэтага артыкула, вы ўжо сутыкнуліся з атрыбутамі. Тэг img> выкарыстоўвае атрыбут src, якар выкарыстоўвае атрыбут імя і спасылкі выкарыстоўваюць атрыбут HREF. Вы можаце сказаць, што ўсе яны памерам ___='___’ прытрымлівацца.
Эксперыментуйце з табліцамі HTML. Каб зрабіць табліцу ці графік, вам трэба некалькі тэгаў:
- Пачніце з тэгаў табліцы ("table" на англійскай мове) вакол усёй табліцы:стол> / стол>
- Размясціце тэгі вакол змесціва кожнага радка: tr>
- Размясціце загалоўкі слупкоў у першым радку: й>
- Размясціце вочкі ў паслядоўныя радкі: td>
- Вось прыклад таго, як усё гэта аб'ядноўваецца:
  
  табліца> tr> й> Слупок 1: Месяц / й> й> Слупок 2: Зэканомленыя грошы / і> / tr> tr> td> Студзень / td> td> 100 € / td> / tr> / стол>
Даведайцеся пра іншыя тэгі, якія выкарыстоўваюцца ў раздзеле head. Вы ўжо даведаліся тэг head>, які вы размяшчаеце ў пачатку кожнага дакумента. Акрамя загалоўка> тэга, у раздзеле загалоўка могуць быць і іншыя тэгі:
- Для стварэння выкарыстоўваюцца метатэгі метададзеныя пра вэб-старонку. Гэтыя дадзеныя выкарыстоўваюцца пошукавымі сістэмамі для класіфікацыі вэб-старонак. Каб зрабіць вашу старонку бачнай для пошукавых сістэм, вы можаце размясціць адзін або некалькі метатэгаў (канчатковыя тэгі не патрэбныя), кожны тэг павінен утрымліваць роўна адзін атрыбут імя і атрыбут змесціва, напрыклад: meta name = "description" content = "пастаўце тут апісанне ">; or meta name = "keywords" content = "напішыце тут спіс ключавых слоў, заўсёды падзелены коскай">
- спасылка> тэгі выкарыстоўваюцца для прывязкі іншых файлаў да старонкі. Звычайна яны выкарыстоўваюцца для асацыяцыі табліц стыляў CSS са старонкамі HTML, яны ствараюцца з кодам іншага тыпу і выкарыстоўваюцца для вызначэння агульнага стылю старонкі.
- тэгі script> выкарыстоўваюцца для асацыяцыі файлаў javascript са старонкай HTML. Javascript дазваляе старонцы мяняцца, калі карыстальнік нешта робіць на старонцы.
Гуляйце ў HTML з існуючых старонак. Прагляд зыходнага кода вэб-старонак - выдатны спосаб пашырыць свае веды па HTML. Пстрыкніце правай кнопкай мышы на старонцы і абярыце "Прагледзець крыніцу", "Паказаць крыніцу старонкі" ці падобныя. Даведайцеся, што робіць пэўны тэг, якога вы не ведаеце, альбо пашукайце ў Інтэрнэце адказ.
- Вы не можаце рэдагаваць чужыя вэб-сайты, але вы можаце скапіяваць HTML-код у свой дакумент і пагуляць з ім, каб убачыць, што робяць розныя налады. Заўвага: паколькі многія вэб-сайты выкарыстоўваюць табліцы стыляў CSS, магчыма, вы не зможаце ўбачыць шмат колераў альбо іншых стыляў.
Даведайцеся пра HTML, прачытаўшы больш глыбокія артыкулы. У Інтэрнэце ёсць мноства рэсурсаў для асваення большай колькасці HTML-тэгаў, такіх як W3Schools або Codecademy. Даступна таксама шмат HTML-кніг, але пераканайцеся, што вы карыстаецеся нядаўняе выданне, бо стандарт HTML час ад часу мяняецца. Пасля таго, як вы добра засвоілі HTML, вы можаце звярнуцца да CSS, каб атрымаць больш кантролю над дызайнам і стылем вашай вэб-старонкі. Пасля гэтага наступным этапам звычайна з'яўляецца javascript.

Парады

Карысна знайсці простую вэб-старонку ў Інтэрнэце, а потым пачаць важдацца з кодам. Паспрабуйце перанесці тэкст, змяніць шрыфт, змяніць выявы, што заўгодна!
Вы можаце скарыстаць сшытак, каб запісаць код, каб вам было на што вярнуцца, калі вы яго ні на хвіліну не ўспомніце. Вы таксама можаце раздрукаваць гэтую старонку і захаваць яе для даведкі.
У наш час XML і RSS усё часцей выкарыстоўваюцца на вэб-сайтах. Код можа выглядаць недаступным для чалавечага вока, асабліва пры праглядзе ў зыходным кодзе, але функцыянальнасць можа быць карыснай.
Тэгі, якія выкарыстоўваюцца ў HTML, не ўлічваюць рэгістра, але па змаўчанні выкарыстоўваюцца маленькія літары (як мы робім у гэтым артыкуле). Малыя літары для тэгаў настойліва рэкамендуюцца, таксама для сумяшчальнасці з XHTML.

Папярэджанні

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

Неабходнасці

Праграма для апрацоўкі тэкстаў, напрыклад Notepad (Windows) або Text Editor (Mac).
аркуш паперы альбо сшытак (неабавязкова)
Праграма, спецыяльна распрацаваная для напісання HTML, напрыклад Notepad ++ для Windows ці TextWrangler для Mac (неабавязкова)