Чӣ тавр омӯзиши HTML

Муаллиф: Virginia Floyd
Санаи Таъсис: 9 Август 2021
Навсозӣ: 1 Июл 2024
Anonim
Асосиҳои (основние) HTML5 | Дарси - 1 |  html - ро аз нол омӯзед.
Видео: Асосиҳои (основние) HTML5 | Дарси - 1 | html - ро аз нол омӯзед.

Мундариҷа

HTML барои забони англисӣ кӯтоҳ аст Забони қайдкунии матни Hyper (забони аломатгузории гипертекст). Ин рамз ё забонест, ки дар он аломати асосии сайтҳо сохта мешавад. Омӯзиш метавонад душвор ба назар расад, агар шумо ҳеҷ гоҳ барномарезӣ накарда бошед, аммо дар асл ба шумо танҳо оғоз кардани муҳаррири матн ва браузери интернет лозим аст. Шумо ҳатто метавонед баъзе намунаҳои аломатгузории HTML -ро, ки шумо дар форумҳои интернетӣ, саҳифаҳои фармоишӣ ё мақолаҳои wikiHow дучор омадаед, шиносед. HTML як воситаи муфид барои ҳар як корбари интернет аст ва омӯзиши асосҳо назар ба оне ки шумо мепиндоред, камтар вақт мегирад.

Қадамҳо

Қисми 1 аз 2: Омӯзиши асосҳои HTML

  1. 1 Ҳуҷҷати HTML кушоед. Аксар муҳаррирони матнӣ (Notepad ё Notepad ++ барои Windows, TextEdit барои Mac, gedit барои GNU / Linux) метавонанд барои тавлиди файлҳои HTML истифода шаванд. Ҳуҷҷати нав созед ва онро бо истифода аз Файл → Сабт ҳамчун Формат дар Саҳифаи Веб захира кунед ё тамдиди файлро ба ҷои .doc, .rtf ё тамдиди дигар ба .html ё .htm иваз кунед.
    • Шумо метавонед огоҳӣ гиред, ки файл ба ҷои формати 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 Дар файл сарлавҳа> бахш эҷод кунед. Байни барчаспҳои html> ва / html> барчаспҳои эҷодиро эҷод кунед сар> ва тамғаи пӯшида / сари>... Дар байни онҳо якчанд хатҳои холӣ илова кунед. Мундариҷае, ки дар байни барчаспҳои head> ва / head> навишта шудааст, дар худи саҳифа намоиш дода намешавад. Ин қадамҳоро иҷро кунед ва шумо хоҳед дид, ки ин барчасп барои чист:
    • Байни head> ва / head> барчаспҳо нависед унвон> ва / унвон>
    • Байни сарлавҳа> ва / унвон> барчаспҳо нависед Чӣ тавр HTML -ро омӯхтан мумкин аст - wikiHow.
    • Тағироти худро захира кунед ва файлро дар браузер кушоед (ё агар саҳифа аллакай кушода бошад, саҳифаро нав кунед). Матнеро, ки дар сарлавҳаи саҳифа дар болои сатри адресҳо пайдо мешавад, мебинед?
  6. 6 Ҷисм> қисм эҷод кунед. Ҳама барчаспҳо ва матни дигари ин мисол дар қисмати бадан навишта шудаанд, ки мундариҷаи он дар саҳифа нишон дода мешавад. Баъд аз барчасп / сар>, аммо пеш tag / html> барчаспҳо илова кунед ҷисм> ва / бадан>... Дар қисми боқимондаи ин мақола, бо бахши бадан кор кунед. Файли шумо бояд чунин бошад:
    html>
    сар>
    унвон> Чӣ тавр HTML -ро омӯхтан мумкин аст - wikiHow / title>
    / сари>
    ҷисм>
    / бадан>
    / html>
  7. 7 Бо истифода аз услубҳои гуногун матн илова кунед. Вақти он расидааст, ки мундариҷаи воқеиро ба саҳифа илова кунед! Ҳар чизе, ки шумо дар байни барчаспҳои бадан менависед, пас аз навсозӣ дар браузер дар саҳифа намоиш дода мешавад. Истифода набаред рамзҳо ё >зеро браузер кӯшиш мекунад мундариҷаро ба ҷои матн ҳамчун барчасб тафсир кунад. Нависед Салом! (ё ҳар чизе ки ба шумо маъқул аст), пас кӯшиш кунед, ки ин барчаспҳоро ба матн илова кунед ва бубинед, ки чӣ мешавад:
    • em> Салом ба ҳама! / em> матнро "курсив" мекунад: Салом!
    • қавӣ> Салом ба ҳама! / қавӣ> матнро "ғафс" месозад: Салом!
    • 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> ва / ли>.
    • Рӯйхати нишонаҳо:
      ул> ли> сатри аввал / ли> ли> сатри дуввум / ли> ли> Ва гайра / ли> / ул>
    • Рӯйхати рақамӣ:
      ол> ли> Як / ли> ли> Ду / ли> ли> Се / ли> / ол>
    • Рӯйхати таъриф:
      dl> dt> Coffee / dt> dd> - нӯшокиҳои гарм / dd> dt> Lemonade / dt> dd> - нӯшокиҳои хунук / dd> / dl>
  10. 10 Тарҳбандии саҳифа бо истифода аз он танаффусҳо, хатҳои уфуқӣ ва Аксҳо. Вақти он расидааст, ки ба саҳифа ғайр аз матн чизи дигаре илова кунем. Барчаспҳои зеринро санҷед ё пайвандҳоро пайгирӣ кунед, то маълумоти бештар гиред. Барои эҷод кардани истинод ба тасвире, ки шумо интишор кардан мехоҳед, хидмати хостинги онлайнро истифода баред:
    • Хати уфуқӣ: соат>
    • Ворид кардани тасвир: img src = "пайванди тасвир">
  11. 11 Илова кардани пайвандҳо. Шумо метавонед ин барчаспҳоро барои сохтани истинод ба дигар саҳифаҳо ва сайтҳо истифода баред, аммо азбаски шумо ҳоло вебсайт надоред, ҳоло шумо тарзи сохтани истинодҳои лангар, яъне истинод ба ҷойҳои мушаххаси саҳифаро меомӯзед:
    • Лангар бо a> tag эҷод кунед, ки шумо мехоҳед дар саҳифа пайванд кунед. Номи возеҳ ва хотирмонро биёваред:

      a name = "Маслиҳатҳо"> Матне, ки шумо ба он пайванд мекунед. / a>
    • Href> tag -ро барои сохтани пайванди нисбӣ ё истинод ба манбаи беруна истифода баред:

      a href = "истинод ба саҳифа ё номи лангар дар дохили саҳифа"> Матн ё тасвире, ки ҳамчун пайванд хидмат мекунад. / a>
    • Барои пайванд додан ба истинод нисбӣ дар саҳифаи дигар, пас аз истиноди асосӣ ва номи лангар аломати # илова кунед. Масалан, https://en.wikihow.com/learn-HTML#Tips пайвандҳо ба қисмати маслиҳатҳои ин саҳифа.

Қисми 2 аз 2: HTML Advanced

  1. 1 Бо сифатҳо шинос шавед. Атрибутҳо дар дохили тег навишта шуда, маълумоти иловагиро нишон медиҳанд. Формати атрибутҳо чунин аст: ном = "арзиш", дар куҷо унвон атрибутро муайян мекунад (масалан, ранг барои атрибутҳои ранг) ва арзиши он арзиши онро нишон медиҳад (масалан, сурх барои сурх).
    • Атрибутҳо воқеан дар қисмати қаблӣ оид ба асосҳои HTML истифода шудаанд. Img> тег атрибутро истифода мебарад src, лангарҳои пайвандии нисбӣ атрибутро истифода мебаранд номва истинодҳо атрибутро истифода мебаранд хреф... Тавре ки шумо аллакай қайд кардаед, ҳама атрибутҳо дар формат навишта шудаанд ___='___’.
  2. 2 Таҷриба бо ҷадвалҳои HTML. Эҷоди ҷадвал истифодаи тегҳои гуногунро дар бар мегирад. Шумо метавонед озмоиш кунед ё дастурҳои муфассалро хонед.
    • Эҷоди барчаспҳои ҷадвал:миз> / миз>
    • Мундариҷаи ҳар як сатрро дар ҷадвал бо барчаспҳо замима кунед: тр>
    • Сарлавҳаи сутун бо тег муайян карда мешавад: уми>
    • Чашмакҳо дар сатрҳои минбаъда: td>
    • Намунаи истифодаи ин барчаспҳо:

      ҷадвал> tr> th> сутуни 1: моҳ / th> th> сутуни 2: пасандозҳо / th> / tr> tr> td> январ / td> td> 5000 рубл / td> / tr> / table>
  3. 3 Барчаспҳои иловагии фасли сарро омӯзед. Шумо аллакай head> tag -ро омӯхтаед, ки дар аввали ҳар як файли html меояд. Ба ғайр аз унвон> барчаспҳо, барчаспҳои дигари ин бахш мавҷуданд:
    • Барчаспҳои мета, ки дорои метамаълумотаз ҷониби системаҳои ҷустуҷӯ барои индексатсияи сайт истифода мешавад. Барои осон кардани ёфтани сайти шумо дар муҳаррикҳои ҷустуҷӯ, як ё якчанд мета> барчаспҳои кушодаро истифода баред (барчаспҳои басташавӣ шарт нест).Як атрибут ва як арзишро барои як тег истифода баред: мета номи = "тавсиф" мундариҷа = "тавсифи саҳифа">; ё номи мета = "калимаҳои калидӣ" мундариҷа = "калимаҳои калидӣ бо вергул ҷудо карда шудаанд">
    • Link> барчаспҳое, ки ба файлҳои тарафи сеюм ишора мекунанд, ба монанди варақаҳои услуб (CSS), ки бо истифода аз як намуди дигари рамзгузорӣ сохта шудаанд ва ба шумо имкон медиҳанд саҳифаи HTML-ро бо истифода аз ранг, ҳамоҳангсозии матн ва бисёр дигар хусусиятҳо тағир диҳед.
    • Скрипт> барчаспҳо барои замима кардани файлҳои JavaScript ба саҳифа истифода мешаванд. Ин файлҳо барои тағир додани интерактивии саҳифа лозиманд (дар посух ба амалҳои корбар).
  4. 4 Бо коди HTML -и дигар сайтҳо озмоиш кунед. Дидани коди сарчашмаи дигар саҳифаҳои интернетӣ як роҳи олии омӯзиши HTML мебошад. Шумо метавонед дар саҳифа бо клики рост клик кунед ва Намоиши манбаъ ё чизи ба ин монандро аз менюи болои браузери худ интихоб кунед. Кӯшиш кунед бифаҳмед, ки барчаспи ношинос чӣ кор мекунад ё дар интернет дар бораи он маълумот ҷустуҷӯ кунед.
    • Гарчанде ки шумо сайтҳои одамони дигарро таҳрир карда наметавонед, шумо метавонед коди сарчашмаро ба файли худ нусхабардорӣ кунед, то баъдтар бо тегҳо озмоиш кунед. Лутфан таваҷҷӯҳ намоед, ки аломати CSS дастрас набошад ва рангҳо ва форматкунӣ метавонанд гуногун бошанд.
  5. 5 Ба омӯхтани дастурҳои муфассал оғоз кунед. Дар Интернет сайтҳои зиёде мавҷуданд, ки ба барчаспҳои HTML бахшида шудаанд, ба монанди W3Schools ё HTMLbook. Ҳамчунин китобҳои коғазӣ дар фурӯш мавҷуданд, аммо кӯшиш кунед, ки бо тағир ёфтани стандартҳо ва таҳаввул нашри охиринро пайдо кунед. Беҳтараш, CSS -ро азхуд кунед, то тарҳ ва намуди зоҳирии сайти шуморо бештар назорат кунад. Пас аз омӯзиши CSS, дизайнерҳои веб одатан JavaScript -ро меомӯзанд.

Маслиҳатҳо

  • Notepad ++ як барномаи олии ройгони шабеҳ ба Notepad аст, аммо шумо метавонед рамзи худро дар браузери худ онлайн захира кунед ва санҷед. (Он инчунин қариб ҳама забонҳоро дастгирӣ мекунад - HTML, CSS, Python, JavaScript ва ғайра.)
  • Як саҳифаи оддиро дар шабака пайдо кунед, рамзро дар компютери худ захира кунед ва бо он озмоиш кунед. Кӯшиш кунед, ки матнро ҳаракат диҳед, ҳуруфро иваз кунед, тасвирҳоро иваз кунед - ҳар чӣ!
  • Шумо метавонед дафтареро нигоҳ доред, ки дар он шумо барчаспҳо менависед, то ки онҳо ҳамеша дар дасти шумо бошанд. Шумо инчунин метавонед ин саҳифаро чоп кунед ва ба он муроҷиат кунед.
  • Вақте ки шумо рамз менависед, онро бодиққат иҷро кунед, то шумо ва дигарон онро бифаҳмед. Истифода баред! - Эзоҳро дар ин ҷо гузоред -> барои шарҳҳои HTML: онҳо дар саҳифа инъикос карда намешаванд, аммо дар ҳуҷҷати рамзӣ намоён мешаванд.
  • XML ва RSS маъруфият пайдо мекунанд. Рамзи саҳифаҳое, ки дорои технологияҳои XML ва RSS мебошанд, барои хондан ва фаҳмидани корбари бетаҷриба мушкилтар аст, аммо ин воситаҳо хеле муфид мебошанд.
  • Барчаспҳои қайдкунӣ дар HTML ба ҳарфҳо ҳассос нестанд, аммо мо тавсия медиҳем, ки ҳам барои стандартизатсия ва ҳам мутобиқати XHTML танҳо ҳарфҳои хурдро (мисли мисолҳои ин мақола) истифода барем.

Огоҳӣ

  • Баъзе барчаспҳо дар тӯли чанд соли охир аз кор баромадаанд ва ба ҷои онҳо тамғаҳои нав гузошта мешаванд, ки ҳамон як ё чанд эффектҳои иловагӣ медиҳанд.
  • Агар шумо хоҳед, ки саҳифаи худро санҷед, ба сайти W3 гузаред ва талаботи муосири HTML -ро санҷед. Стандартҳои HTML бо мурури замон тағир меёбанд ва баъзе барчаспҳо бо тамғаҳои нав иваз карда мешаванд, ки дар браузерҳои муосир беҳтар кор мекунанд.

Ба шумо чӣ лозим

  • Муҳаррири матн ба монанди Notepad (Windows) ё TextEdit (Mac)
  • Қоғаз / дафтарча (шарт нест)
  • Муҳаррири HTML ба монанди Notepad ++ (Windows) ё TextWrangler (Mac) (шарт нест)