Задаволены

• крокі
• Частка 1 з 2: Даследаванне асноў HTML
• Частка 2 з 2: Прасунуты ўзровень HTML
• парады
• папярэджання
• Што вам спатрэбіцца

HTML - гэта скарачэнне ад ангельскага Hyper Text Markup Language (Мова гіпертэкставай разметкі). Гэта код, або мову, на якім ствараецца базавая разметка сайтаў. Калі вы ніколі не праграмавалі, вывучэнне можа здацца складаным, але на самой справе ўсё, што вам трэба, каб пачаць навучанне, - гэта найпросты тэкставы рэдактар ​​і інтэрнэт-браўзэр. Магчыма, вы нават даведаецеся некаторыя прыклады HTML-разметкі, якія трапляліся вам на інтэрнэт-форумах, кастомизированных карыстацкіх старонках ці ў артыкулах wikiHow. HTML - карысны інструмент для любога карыстальніка інтэрнэту, а вывучэнне яго асноў зойме менш часу, чым вы думаеце.

крокі

Частка 1 з 2: Даследаванне асноў HTML

1. 1 Адкрыйце дакумент HTML. Большасць тэкставых рэдактараў (Блокнот або Notepad ++ для Windows, TextEdit для Mac, gedit для GNU / Linux) можна выкарыстоўваць для стварэння файлаў HTML. Стварыце новы дакумент, і захавайце яго з дапамогай Файл → Захаваць як у фармаце вэб-старонкі, альбо зьмяніце пашырэнне файла на .html або .htm замест .doc, .rtf або іншага пашырэння.
   • Можа з'явіцца папярэджанне, што файл будзе захаваны як «просты тэкст» замест фармату RTF або што фарматаванне і малюнкі не захаваюцца. Гэта нармальна; для HTML гэтыя опцыі і не патрэбныя.
2. 2 Адкрыйце створаны файл у браўзэры. Захавайце пусты файл, знайдзіце яго на кампутары і адкрыйце падвойным пстрычкай мышы. У браўзэры павінна адкрыцца пустая старонка. Калі гэтага не адбылося, перацягнуць файл у адрасную радок вашага браўзэра. У працэсе рэдагавання HTML-файла вы зможаце абнаўляць гэтую старонку, каб паглядзець змены.
   • Звярніце ўвагу, што такім чынам вы не ствараеце сайт у інтэрнэце. У іншых людзей не будзе доступу да гэтай старонцы, і вам не трэба інтэрнэт-злучэнне, каб тэставаць сваю лакальную старонку. Браўзэр проста інтэрпрэтуе HTML-код, «чытаючы» яго, як быццам гэта вэб-сайт.
3. 3 Зразумейце, што такое тэгі разметкі. У адрозненне ад звычайнага тэксту, тэгі не адлюстроўваюцца на старонцы. Замест гэтага яны паказваюць браўзэру, якім чынам адлюстроўваць старонку і яе змесціва. «Адкрывальнік» тэг змяшчае інструкцыю. Напрыклад, ён можа паведамляць браўзэру, што тэкст павінен адлюстроўвацца як паўтлусты. Таксама патрэбен «зачыняе» тэг, які паказвае браўзэру, дзе заканчваецца дзеянне інструкцыі. У дадзеным прыкладзе тэкст паміж адкрывалым і які закрывае тэгамі адлюструецца ў Цёмны тэкст. Тэгі запісваюцца ўнутры знакаў няроўнасці, але які зачыняе тэг пачынаецца з касой рысы.
   • Адкрываючы тэг запісваецца паміж знакамі няроўнасці: адкрываючы тэг>
   • У які зачыняе тэгу перад дэскрыптарам (назвай) тэга ставіцца касая рыса: /які зачыняе тэг>
   • Чытайце далей, каб даведацца аб выкарыстанні розных тэгаў. Для гэтага кроку досыць запомніць фармат запісу. Тэгі запісваюцца паміж знакамі няроўнасці:> і />
   • У некаторых дапаможнік HTML тэгі называюць элементамі, а тэкст паміж адкрывалым і які закрывае тэгамі называюць змесцівам элемента.
4. 4 Набярыце ў рэдактары тэг html>. Кожны файл HTML павінен пачынацца з тэга html> і заканчвацца тэгам / Html>. Гэтыя тэгі паказваюць браўзэру, што ўсё змесціва паміж тэгамі напісана на мове HTML. Дадайце гэтыя тэгі ў свой дакумент:
   • Часта файлы HTML пачынаюцца з радка ! DOCTYPE html>, Якая азначае, што браўзэры павінны распазнаваць ўвесь файл як HTML. Гэты радок не з'яўляецца неабходнай, аднак можа дапамагчы ў вырашэнні праблем сумяшчальнасці.
   • набярыце html> уверсе дакумента.
   • Націсніце Enter або Return некалькі разоў, каб стварыць некалькі пустых радкоў, затым набярыце / Html>
   • Памятаеце, што ўвесь код, які вы будзеце ствараць, вынікаючы гэтым артыкуле, трэба будзе пісаць паміж гэтымі двума тэгамі.
5. 5 Стварыце ў файле секцыю head>. Паміж тэгамі html> і / html> стварыце адкрываючы тэг head> і што зачыняе тэг / Head>. Дадайце некалькі пустых радкоў паміж імі. Змесціва, запісанае паміж тэгамі head> і / head>, не адлюстроўваецца на самой старонцы. Выканайце наступныя дзеянні і вы ўбачыце, для чаго патрэбны гэты тэг:
   • Паміж тэгамі head> і / head> напішыце title> і / Title>
   • Паміж тэгамі title> і / title> напішыце Як вывучыць HTML - wikiHow.
   • Захавайце змены і адкрыйце файл у браўзэры (ці абновіце старонку, калі файл ужо адкрыты). Бачыце тэкст, які адлюстраваўся ў назве старонкі над адраснай радком?
6. 6 Стварыце секцыю body>. Усе астатнія тэгі і тэкст у гэтым прыкладзе запісваюцца ў секцыі body, змесціва якой адлюстроўваецца на старонцы. пасля зачыняе тэга / head>, але да тэга / html> дадайце тэгі body> і / Body>. Да канца гэтага артыкула працуйце з секцыяй body. Ваш файл павінен выглядаць прыкладна так:
   html>
   head>
   title> Як вывучыць HTML - wikiHow / title>
   / Head>
   body>
   / Body>
   / Html>
7. 7 Дадайце тэкст, выкарыстоўваючы розныя стылі. Прыйшоў час дадаць цяперашні змесціва старонкі! Усё, што вы напішаце паміж тэгамі body, адлюструецца на старонцы пасля абнаўлення ў браўзэры. Не выкарыстоўвайце сімвалы або >, Паколькі браўзэр паспрабуе інтэрпрэтаваць змесціва як тэг замест тэксту. напішыце Ўсім прывітанне! (Ці што захочаце), затым паспрабуйце дадаць гэтыя тэгі да тэксту і паглядзіце, што атрымаецца:
   • em> Усім прывітанне! / em> вылучае тэкст "курсівам": Ўсім прывітанне!
   • strong> Усім прывітанне! / strong> вылучае тэкст "паўтлустым": Ўсім прывітанне!
   • s> Усім прывітанне! / s> закрэслівае тэкст: Ўсім прывітанне!
   • sup> Усім прывітанне! / sup> адлюстроўвае шрыфт у выглядзе верхняга індэкса:
   • sub> Усім прывітанне! / sub> адлюстроўвае шрыфт у выглядзе ніжняга індэксу: _{Ўсім прывітанне!}
   • Паспрабуйце розныя тэгі разам. Як будзе выглядаць em> strong> Усім прывітанне! / strong> / em>?
8. 8 Падзяліце тэкст на абзацы. Калі вы паспрабуеце напісаць некалькі радкоў тэксту ў файле HTML, то заўважыце, што парывы ​​радкоў не адлюстроўваюцца ў браўзэры. Каб падзяліць тэкст на абзацы, трэба дадаць тэгі:
   • p> Гэта асобны абзац. / p>
   • Пасля гэтага прапановы варта разрыў радкі br> перад пачаткам гэтага радка.
     Гэта першы тэг, які не патрабуе які зачыняе тэга. Такія тэгі называюцца «пустымі».
   • Стварыце загалоўкі, каб паказаць назвы раздзелаў:
     h1> тэкст загалоўка / h1>: Самы вялікі загаловак
     h2> тэкст загалоўка / h2> (Загаловак другога ўзроўня)
     h3> тэкст загалоўка / h3> (Загаловак трэцяга ўзроўня)
     h4> тэкст загалоўка / h4> (Загаловак чацвёртага ўзроўня)
     h5> тэкст загалоўка / h5> (Самы маленькі загаловак)
9. 9 Навучыцеся ствараць спісы. Ёсць некалькі спосабаў стварэння спісаў на вэб-старонцы. Паспрабуйце прыведзеныя ніжэй варыянты і вырашыце, які вам больш падабаецца. Звярніце ўвагу, што адна пара тэгаў патрэбна для спісу ў цэлым (напрыклад ul> і / ul> для маркіраванага спісу), а кожны элемент спісу вылучаецца другога парай тэгаў, напрыклад li> і / li>.
   • Маркіраваны спіс:
     ul> li> Першы радок / li> li> Другая радок / li> li> І гэтак далей / li> / ul>
   • Нумараваны спіс:
     ol> li> Адзін / li> li> Два / li> li> Тры / li> / ol>
   • Спіс азначэнняў:
     dl> dt> Кава / dt> dd> - гарачы напой / dd> dt> Ліманад / dt> dd> - халодны напой / dd> / dl>
10. 10 Звярстаць старонку, выкарыстоўваючы разрывы радкоў, Гарызантальныя лініі, і карцінкі. Прыйшоў час дадаць на старонку нешта акрамя тэксту. Паспрабуйце наступныя тэгі або перайдзіце па спасылках, каб атрымаць больш інфармацыі. Выкарыстоўвайце онлайн-хостынг для стварэння спасылкі на карцінку, якую вы хочаце размясціць:
    • Гарызантальная лінія: hr>
    • Ўставіць малюнак: img src = "спасылка на карцінку">
11. 11 Дадайце спасылкі. Вы можаце выкарыстоўваць гэтыя тэгі для стварэння гіперспасылак на іншыя старонкі і сайты, але паколькі ў вас яшчэ няма вэб-сайта, зараз вы навучыцеся ствараць «якарныя» спасылкі, то ёсць спасылкі на канкрэтныя месцы на старонцы:
    • Стварыце якар тэгам a> ў тым месцы старонкі, на якое вы жадаеце спаслацца. Прыдумайце зразумелае і запамінальнае назва:
      
      a name = "Саветы"> Тэкст, на які вы спасылаецеся. / a>
    • Выкарыстоўвайце тэг href>, каб стварыць адносную спасылку або спасылку на знешні рэсурс:
      
      a href = "спасылка на старонку або назва якара ўнутры старонкі"> Тэкст ці малюнак, якія будуць служыць спасылкай. / a>
    • Каб спаслацца на адносную спасылку іншай старонкі, дадайце знак # пасля асноўнай спасылкі і назва якара. Напрыклад, https://ru.wikihow.com/выучить-HTML#Советы спасылаецца на раздзел саветаў гэтай старонкі.

Частка 2 з 2: Прасунуты ўзровень HTML

1. 1 Пазнаёмцеся з атрыбутамі. Атрыбуты запісваюцца ўнутры тэга, паказваючы на ​​дадатковую інфармацыю. Фармат атрыбутаў такі: назва = "значэнне", дзе назву вызначае атрыбут (напрыклад, color для атрыбуту колеру), а значэнне паказвае на яго значэнне (напрыклад, red для чырвонага колеру).
   • Атрыбуты на самай справе ўжо ўжываліся ў папярэднім раздзеле асноў HTML. Тэг img> выкарыстоўвае атрыбут src, Якара адносных спасылак выкарыстоўваюць атрыбут name, А спасылкі выкарыстоўваюць атрыбут href. Як вы ўжо заўважылі, усе атрыбуты запісваюцца ў фармаце ___='___’.
2. 2 Паэксперыментуйце з табліцамі HTML. Стварэнне табліцы прадугледжвае выкарыстанне розных тэгаў. Вы можаце паэксперыментаваць, або прачытаць больш падрабязную інструкцыю.
   • Стварыце тэгі табліцы:table> / table>
   • Змесціва кожнага радка табліцы пастанавеце у тэгі: tr>
   • Загаловак слупка вызначаецца тэгам: th>
   • Вочка ў наступных радках: td>
   • Прыклад выкарыстання гэтых тэгаў:
     
     table> tr> th> Слупок 1: месяц / th> th> Слупок 2: зберажэнні / th> / tr> tr> td> Студзень / td> td> 5000 рублёў / td> / tr> / table>
3. 3 Вывучыце дадатковыя тэгі секцыі head. Вы ўжо вывучылі тэг head>, які ідзе спачатку кожнага файла html. Акрамя тэга title>, ёсць і іншыя тэгі для гэтай секцыі:
   • Мета-тэгі, у якіх утрымліваюцца метададзеныя, Якія выкарыстоўваюцца пошукавымі сістэмамі для індэксацыі сайта. Каб ваш сайт лягчэй знаходзіўся ў пошукавых сістэмах, выкарыстоўвайце адзін або некалькі якія адкрываюць тэгаў meta> (якія зачыняюць тэгі ня патрабуюцца).Выкарыстоўвайце па адным атрыбуту і значэнню на тэг: meta name = "description" content = "апісанне старонкі">; або meta name = "keywords" content = "ключавыя словы, падзеленыя коскамі">
   • Тэгі link>, вядучыя на іншыя файлы, да прыкладу на табліцы стыляў (CSS), якія ствараюцца з дапамогай іншага тыпу кадавання і дазваляюць змяніць HTML-старонку з дапамогай колеру, выраўноўвання тэксту і многіх іншых функцый.
   • Тэгі script>, якія выкарыстоўваюцца для прымацавання да старонкі файлаў JavaScript. Гэтыя файлы патрэбныя для змены старонкі ў інтэрактыўным рэжыме (у адказ на дзеянні карыстальніка).
4. 4 Паэксперыментуйце з кодам HTML іншых сайтаў. Выдатным спосабам вывучэння HTML стане прагляд зыходнага кода іншых вэб-старонак. Вы можаце пстрыкнуць правай кнопкай мышы на старонцы і выбраць «Паглядзець зыходны код» ці нешта падобнае ў верхнім меню браўзэра. Паспрабуйце вызначыць, што робіць незнаёмы тэг, або пашукайце інфармацыю пра яго ў інтэрнэце.
   • Хоць вы і не можаце рэдагаваць чужыя сайты, вы можаце скапіяваць зыходны код у свой файл, каб потым паэксперыментаваць з тэгамі. Звярніце ўвагу, што разметка CSS можа быць недаступная, і колеры і фарматаванне могуць выглядаць па-іншаму.
5. 5 Прыступіце да вывучэння больш падрабязных кіраўніцтваў. У інтэрнэце ёсць шмат сайтаў, прысвечаных тэгах HTML, напрыклад W3Schools або HTMLbook. У продажы ёсць і папяровыя кнігі, але паспрабуйце знайсці актуальнае выданне, паколькі стандарты змяняюцца і развіваюцца. Яшчэ лепш асвоіць CSS, каб у значна большай ступені кантраляваць разметку і знешні выгляд сайта. Пасля вывучэння CSS вебдизайнеры звычайна вывучаюць JavaScript.

парады

• Notepad ++ - выдатная бясплатная праграма, падобная на звычайны Блокнот, але вы можаце захоўваць і тэставаць свой код у браўзэры ў онлайн-рэжыме. (Яна таксама падтрымлівае практычна любую мову - HTML, CSS, Python, JavaScript і гэтак далей).
• Знайдзіце ў сетцы якую-небудзь простую старонку, захавайце код да сабе на кампутар і паэксперыментуйце з ім. Паспрабуйце перамясціць тэкст, змяніць шрыфт, замяніць малюнкі - усё што заўгодна!
• Вы можаце завесці нататнік, куды будзеце запісваць тэгі, каб заўсёды мець іх пад рукой. Таксама можаце раздрукаваць гэтую старонку і спраўджвацца з ёй.
• Калі вы пішаце код, рабіце гэта акуратна, каб і вы, і іншыя людзі маглі яго зразумець. Выкарыстоўвайце! - Insert comment here -> для каментароў у HTML: яны не будуць адбівацца на старонцы, але будуць бачныя ў дакуменце з кодам.
• XML і RSS набываюць усё большую папулярнасць. Код старонак, якія змяшчаюць тэхналогіі XML і RSS, неспрактыкаванаму карыстачу складаней прачытаць і зразумець, але гэтыя інструменты вельмі карысныя.
• Тэгі разметкі ў HTML не залежаць ад рэгістра, аднак рэкамендуецца выкарыстоўваць толькі малыя літары (як у прыкладах ў гэтым артыкуле) - як у мэтах стандартызацыі, так і для сумяшчальнасці з XHTML.

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

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

Што вам спатрэбіцца

• Тэкставы рэдактар, напрыклад Нататнік (Windows) або TextEdit (Mac)
• Папера / нататнік (не абавязкова)
• HTML-рэдактар, напрыклад Notepad ++ (Windows) або TextWrangler (Mac) (не абавязкова)