Аўтар:
Laura McKinney
Дата Стварэння:
3 Красавік 2021
Дата Абнаўлення:
1 Ліпень 2024
Задаволены
HTML (мова разметкі HyperText) - асноўная мова для стварэння вэб-старонак. Ён быў створаны як лёгкая і гнуткая мова кадавання. Амаль кожны вэб-сайт у Інтэрнэце распрацаваны з пэўнай формай гэтага кода (ColdFusion, XML, XSLT). HTML лёгка зразумець, але вы можаце працягваць даведацца пра яго на працягу доўгага часу, калі вас цікавіць яго поўная функцыянальнасць. Каб дадаць колеру і задавальнення на вашым сайце, вы можаце даведацца асноўныя CSS, як толькі абвыкнеце да асноўнай HTML-старонкі.
Крокі
Частка 1 з 4: Стварэнне дакумента
Адкрыйце просты тэкставы рэдактар. NotePad - гэта добры варыянт, і яго можна спампаваць бясплатна. Вы можаце пісаць HTML з большасцю тэкставых рэдактараў, але больш складанае праграмнае забеспячэнне з магчымасцямі аўтаматычнага фарматавання можа ўскладніць арганізацыю вашай старонкі HTML.
- Не выкарыстоўвайце TextEdit, бо ён звычайна захоўвае файл у фармаце, які ваш браўзэр можа не распазнаць як HTML.
- Вы таксама можаце выкарыстоўваць Інтэрнэт-рэдактар HTML. Спецыяльныя праграмы для рэдагавання HTML не рэкамендуюцца для пачаткоўцаў.
Захавайце файл як вэб-старонку. Выберыце Файл → Захаваць як у меню ўверсе. Зменіце фармат файла на "Вэб-старонка", ".html" ці ".htm". Захавайце файл там, дзе яго лёгка знайсці.- Паміж гэтымі трыма варыянтамі няма розніцы.
Адкрыйце файл у браўзэры. Двойчы пстрыкніце файл, і ён аўтаматычна адкрыецца ў выглядзе пустой вэб-старонкі ў вашым браўзэры. Акрамя таго, вы можаце адкрыць браўзэр, напрыклад Firefox ці Internet Explorer, а затым выкарыстоўваць Файл → Адкрыць файл, каб выбраць дакумент.
- Гэты сайт не ў Інтэрнэце. Ён праглядаецца толькі на вашым кампутары.
Абнавіце вэб-старонку і паглядзіце ўнесеныя змены. У пусты дакумент увядзіце наступнае: добры дзень. Захавайце дакумент. Абнавіце пустую вэб-старонку ў вашым браўзэры, і вы ўбачыце слова "Прывітанне" тлустым шрыфтам уверсе старонкі. Кожны раз, калі вы хочаце праверыць новы HTML падчас гэтага ўроку, захавайце дакумент .htm, а затым абнавіце акно браўзэра, каб убачыць, як HTML кампілюецца.- Калі вы бачыце словы ""і"'' З'яўляецца ў вашым аглядальніку, файл няправільна скампіляваны ў HTML. Паспрабуйце іншы тэкставы рэдактар альбо іншы браўзэр.
Вывучыце тэгі. Каманды HTML пішуцца ў "тэгах", якія паведамляюць аглядальніку, як скампіляваць і адлюстраваць вашу вэб-старонку. Яны заўсёды пішуцца ў адзіночных двукоссях, і не адлюстроўваюцца на вэб-старонцы, як вы іх выкарыстоўвалі ў прыкладзе вышэй: - з'яўляецца "пачатковай картай" або "адкрыццём карты". Усё, што напісана пасля гэтага тэга, будзе вызначацца як "паўтлусты" (тлусты шрыфт на вэб-старонцы).
- з'яўляецца "канцавым тэгам" або "закрываючым тэгам", які вы можаце адрозніць па сімвале / знаку. Ён пазначае канец паўтлустага тэксту. Для функцыянавання большасці (не ўсіх) тэгаў патрэбны канчатковы тэг, таму абавязкова ўключыце яго.
Стварыце свой дакумент. Выдаліце ўсё ў вашым дакуменце HTML. Пачніце з наступнага тэксту, дакладна так, як ён быў напісаны (за вылікам кропак). Гэты HTML-код паведамляе аглядальніку, які тып HTML вы выкарыстоўваеце, і што ўвесь ваш HTML будзе змешчаны ўнутры тэгаў. і .
Дадайце тэгі head (head) і body. Дакументы HTML дзеляцца на дзве часткі. Раздзел "зверху" прызначаны для спецыяльнай інфармацыі, напрыклад, загалоўка старонкі. Раздзел "body" змяшчае асноўны змест старонкі. Дадайце абодва гэтыя раздзелы ў свой дакумент і не забудзьцеся ўключыць канцавыя тэгі. Нядаўна дададзены тэкст паўтлусты:
Дайце вашай старонцы загаловак. Большасць карт у галоўным раздзеле немалаважна вучыць з пачаткоўцам. Тэг загалоўка просты ў выкарыстанні, і ён будзе вызначаць, што адлюстроўваецца як назва акна аглядальніка альбо на ўкладцы аглядальніка. Размясціце пачатковы і канцавы тэгі загалоўка ўнутры галоўных тэгаў і запішыце любыя загалоўкі, якія вам падабаюцца, паміж гэтымі тэгамі:
Мая першая HTML-старонка.
Частка 2 з 4: Фарматаванне тэксту
Дадайце тэкст у сваё цела. У гэтым раздзеле мы будзем працаваць толькі з тэгамі цела. Іншы тэкст усё яшчэ будзе ў вашым дакуменце, але мы зэканомім месца, не паўтараючы яго ў гэтым уроку. Запішыце паміж карткамі ўсё, што хочаце і , і ён з'явіцца ў якасці першага змесціва на вашай старонцы. Напрыклад:
- Я прытрымліваўся інструкцый wikiHow, каб напісаць HTML-старонку.
Дадайце загалоўкі тэксту. Арганізуйце старонку з тэгамі загалоўкаў, якія даручаюць аглядальніку адлюстроўваць тэкст паміж імі ў большым памеры шрыфта. Гэтыя тэгі таксама выкарыстоўваюцца пошукавымі сістэмамі і іншымі інструментамі, каб вызначыць, пра што ідзе ваш сайт і як ён арганізаваны.
з'яўляецца самым вялікім загалоўкам, і вы можаце ствараць меншыя загалоўкі да
. Паспрабуйце іх на сваёй старонцы:Сардэчна запрашаем на маю старонку.
- Я прытрымліваўся інструкцый wikiHow, каб напісаць HTML-старонку.
Мая сённяшняя мэта:
Выкананыя мэты:
- Даведайцеся, як выкарыстоўваць загалоўкі.
Незавершаныя мэты:
- Даведайцеся больш пра тэгі фарматавання тэксту.
Даведайцеся больш пра тэгі фарматавання тэксту. Вы ўжо бачылі "моцны" тэг, але ёсць мноства іншых спосабаў адфарматаваць тэкст. Паспрабуйце гэтыя тэгі альбо некалькі тэгаў адначасова для аднаго тэкставага радка. Не забудзьцеся дадаць канцавыя тэгі ззаду!
- Важны тэкст, вылучаны тлустым шрыфтам у браўзэры.
- Падкрэслены тэкст, які адлюстроўваецца ў браўзэры курсівам.
- Тэкст крыху меншы, чым звычайна. Гэты тэкст аўтаматычна зменіцца, калі будзе выкарыстоўвацца ў загалоўку.
Тэкст больш не актуальны, адлюстроўваецца рыскай.- Тэкст устаўляецца пазней за іншыя дакументы, адлюстроўваецца з падкрэсліваннем.
Арганізуйце тэкст на сваёй старонцы. Магчыма, вы заўважылі, што націску клавішы "ўвод" недастаткова, каб тэкст з'явіўся ў іншым радку. Гэтыя тэгі могуць дапамагчы вам стварыць абзацы і разрывы радкоў альбо ўпарадкаваць тэкст іншымі спосабамі:
Скарочана ад "абзац", тэг (абзац) будзе захоўваць увесь тэкст паміж гэтымі тэгамі ў абзацы і аддзяляць яго ад тэксту зверху і пад ім.
Гэты тэг будзе генераваць разрывы радкоў. Не дадавайце да яго канцавы тэг, бо ён не перашкаджае іншаму зместу. Выкарыстоўвайце гэты тэг у вершах ці ў адрасах, а не ў абзацах.Калі вам трэба адлюстраваць тэкст вельмі дакладна, гэты тэг задае тэкст у ім шрыфту з фіксаванай шырынёй (кожная літара мае аднолькавую шырыню) і дазваляе ствараць інтэрвалы Прабелы і разрывы радкоў для звычайнага рэдагавання замест тэгаў.
Гэты тэг вызначае тып тэксту, які цытуецца з крыніцы.
Крыху пазней можна апісаць крыніцу цытаваць карту.
Дадайце нябачны тэкст загалоўка. Тэгі каментарыяў не адлюстроўваюцца на вэб-старонцы. Яны дазваляюць анатаваць сябе ў HTML-дакуменце, не ўплываючы на змест. Не дадавайце канчатковы тэг.
- Карты, якія ідуць у адзіночку без канчатковых тэгаў, называюцца "пустымі тэгамі".
Злучыце іх разам. Лепшы спосаб запомніць гэтыя тэгі - выкарыстоўваць іх на сваім сайце. Вось прыклад выкарыстання карт у кроках, якія вы даведаліся да гэтага часу. Паспрабуйце прадказаць, як яны з'явяцца ў браўзэры, а потым скапіруйце іх у свой дакумент і даведайцеся. рэклама
Частка 3 з 4: Даданне спасылак і малюнкаў
Даведайцеся пра атрыбуты. У тэгах можа быць напісана дадатковая інфармацыя, якая называецца атрыбутамі. Гэтыя атрыбуты прадстаўлены дадатковымі словамі ў саміх тэгах у форме імя ўласцівасці = "канкрэтнае значэнне". Напрыклад, любы тэг HTML можа мець атрыбут title:
Уступны пункт тут.
Загаловак абзаца "Аб", які з'явіцца пры навядзенні курсора на абзац на вэб-старонцы.
Спасылкі на іншыя вэб-сайты. Выкарыстанне карт стварыць гіперспасылку на любую іншую вэб-старонку. Устаўце URL-адрас вэб-старонкі для спасылкі на атрыбут href. Вось прыклад спасылак на вэб-старонку, якую вы чытаеце:
Дадайце атрыбут id у тэг. Іншым атрыбутам, які можа выкарыстоўваць любы тэг HTML, з'яўляецца элемент "id". На любой картцы пішыце id = "vidu" альбо выкарыстоўвайце любое імя, якое не ўтрымлівае прабелаў. Гэта не дае ніякага бачнага эфекту, але мы выкарыстаем яго на наступным этапе.
- Напрыклад, дадайце ў дакумент наступнае:
Гэты параграф выкарыстоўваецца ў якасці прыкладу для апісання працы атрыбута id.
- Напрыклад, дадайце ў дакумент наступнае:
Спасылка на элемент з пэўным ідэнтыфікатарам. Цяпер мы можам выкарыстоўваць тэг гіперспасылкі, , каб зрабіць спасылку на іншае месца на той самай старонцы. Замест URL мы будзем выкарыстоўваць сімвал #, за якім ідзе значэнне ідэнтыфікатара, на якое мы хочам зрабіць спасылку. Напрыклад, Гэты тэкст будзе спасылацца на тэкст з ідэнтыфікатарам "vidu".
- Усе значэнні HTML з улікам рэгістра. "#VIDU" і "#vidu" будуць спасылацца на адно і тое ж месца.
- Калі ваша старонка досыць кароткая, каб адлюстроўваць усю старонку адначасова, вы, верагодна, не заўважыце нічога, што адбываецца, калі вы націскаеце спасылку ў вашым браўзэры. Зменіце памер акна, пакуль не з'явіцца паласа пракруткі, і паўтарыце спробу.
Дадайце фота. Картка
з'яўляецца пустым тэгам, гэта значыць, што канчатковы тэг не патрэбны. Уся інфармацыя, неабходная аглядальніку для адлюстравання выявы, дадаецца з выкарыстаннем атрыбутаў. Вось прыклад для адлюстравання лагатыпа wikiHow з апісаннем кожнага атрыбута ззаду:
- Уласцівасці src = "" кажа аглядальніку, дзе знаходзіцца фота. (Звярніце ўвагу, што публікацыя фатаграфіі з чужога сайта лічыцца недарэчнай - і фота знікне, калі старонка больш не будзе актыўнай.)
- Уласцівасці стыль = "" Ён можа зрабіць шмат рэчаў, але самае галоўнае ён выкарыстоўваецца для ўсталёўкі шырыні і вышыні выявы ў пікселях. (Вы можаце замест гэтага выкарыстоўваць асобныя атрыбуты width = "" і height = "", але гэта можа прывесці да дзіўных праблем з змяненнем памеру, калі вы выкарыстоўваеце CSS.)
- Уласцівасці alt = "" гэта кароткае апісанне малюнка, якое карыстальнік убачыць, калі выява не атрымалася загрузіць. Гэта лічыцца патрабаваннем, бо яно выкарыстоўваецца для чытання з экрана для сляпых наведвальнікаў сайта.
Частка 4 з 4: Даведайцеся больш Даданне і падключэнне вашага сайта ў Інтэрнэце
Пацвердзіце свой HTML. Праверка HTML правярае наяўнасць памылак у вашым кодзе. Калі ваш сайт адлюстроўваецца няправільна, праверка можа дапамагчы вам знайсці памылку, якая выклікае праблему. Ён таксама можа навучыць вас больш падрабязна пра HTML, вызначыўшы, што код добра выглядае на дысплеі, але ён больш не рэкамендуецца з-за новых абнаўленняў у стандарце HTML. Выкарыстанне недапушчальнага HTML не робіць ваш сайт бескарысным, але можа выклікаць праблемы альбо адлюстроўвацца нестабільна ў розных браўзэрах.
- Паспрабуйце бясплатную паслугу онлайн-праверкі ад W3C альбо пашукайце іншы інструмент праверкі HTML 5 у Інтэрнэце.
Даведайцеся больш пра тэгі і атрыбуты. Ёсць шмат іншых тэгаў і атрыбутаў HTML, і шмат месцаў, каб даведацца іх:
- Паспрабуйце w3schools і HTML Dog, каб атрымаць дадатковыя падручнікі і поўны спіс тэгаў.
- Знайдзіце вэб-старонку, якая вам падабаецца, як яна выглядае, а затым скарыстайцеся функцыяй "Праглядзець крыніцу старонкі", каб самастойна атрымаць HTML-код. Скапіруйце яго ў дакумент і вывучыце, як гэта працуе.
- Прачытайце іншыя артыкулы і даведайцеся пра тое, як ствараць табліцы ў HTML, выкарыстоўвайце метатэгі, каб павялічыць свае шанцы знайсці яго праз пошукавыя сістэмы, альбо выкарыстоўвайце падзел. усталяваць вобласць на старонцы) і размах (выкарыстоўваецца для ўказання стылю тэкставага элемента), каб дапамагчы стылізаваць CSS.
Усталюйце свой сайт у Інтэрнэце. Выберыце паслугу для размяшчэння вашага сайта, і тады вы можаце загрузіць столькі HTML-старонак, колькі хочаце, у свой асабісты вэб-дамен. Для гэтага вам спатрэбіцца выкарыстаць праграму для загрузкі FTP, але шмат якія паслугі пракату вэб прапануюць і гэтую паслугу.
- Пры спасылках на старонкі ці выявы, якія знаходзяцца непасрэдна на вашым сайце, вам трэба будзе выкарыстоўваць поўны адрас. Напрыклад, калі ваша даменнае імя www.chuyengiahtmlsieudang.com, то тэкст знаходзіцца ў гэтых тэгах будзе спасылацца на "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Дадайце стылі з дапамогай CSS. Калі ваша HTML-старонка выглядае крыху аднастайна, паспрабуйце вывучыць асновы CSS, каб дадаць колеры, розныя шрыфты і лепш кантраляваць месца размяшчэння элементаў. Прывязка "табліцы стыляў" CSS да старонкі HTML дазволіць вам рабіць кардынальныя змены на хаду, аўтаматычна карэктуючы стыль усяго тэксту ў зададзеным тэгу. Вы можаце трохі пагуляць з асноўным пластом фарматавання тут, альбо падрабязней даведацца пра больш падрабязны падручнік у падручніку CSS па HTML Dog.
Дадайце JavaScript на свой сайт. JavaScript - гэта мова праграмавання, якая выкарыстоўваецца для дадання шмат функцыянальнасці вашым HTML-старонкам. Каманды JavaScript ўстаўляюцца паміж пачатковым і канцавым тэгамі , і можа выкарыстоўвацца для дадання інтэрактыўных кнопак, разліку матэматычных задач і шмат іншага. Даведайцеся больш у прыкладах w3c. рэклама
Парада
- Дэкларацыя тыпу doctype (выкарыстоўваецца дэкларацыя тыпу дакумента), якая выкарыстоўваецца ў гэтым падручніку, з'яўляецца "свабодным пераходным HTML 4.0.1" (HTML 4.0.1 не жорсткі пераход), просты фармат. для пачаткоўцаў. Выкарыстоўваць () альтэрнатыва зборцы браўзэра ў строгім фармаце HTML 5, які з'яўляецца рэкамендаваным (хаця і менш распаўсюджаным) стандартным стылем.
Папярэджанне
- Мэта HTML - захаваць змест у глабальным фармаце. Ён не кантралюе прэзентацыю вашага сайта, напрыклад, колер фону і дакладнае размяшчэнне элементаў. Хоць ёсць яшчэ тэгі, якія дазваляюць гэта зрабіць, добра выкарыстоўваць CSS для стварэння больш кіраванага і паслядоўнага сайта.
Што вам трэба
- Просты тэкставы рэдактар, напрыклад NotePad альбо TextEdit
- Вэб-браўзэр, напрыклад Internet Explorer альбо Mozilla Firefox
- (Неабавязкова) Рэдактар HTML, напрыклад Adobe Dreamweaver, Aptana Studio або Microsoft Expression Web
