Мазмун

• Басуу
• 2ден 1-бөлүк: HTML негиздерин үйрөнүү
• 2 ичинен 2-бөлүк: Advanced HTML тилин үйрөнүү
• Сунуштар
• Эскертүүлөр
• Зарылчылыктар

HTML - бул аббревиатура Гипер текстти белгилөө тили, ал код же тил веб-сайттарды түзүү үчүн колдонулат. Эгер сиз буга чейин эч качан программалаган эмес болсоңуз, анда ал татаал көрүнүшү мүмкүн, бирок аны текшерип көрүү үчүн жөнөкөй текст иштетүүчү программа жана интернет браузери жетиштүү. Форумдардан, Интернеттеги профилдерден же wikiHow макалаларынан бир нече HTML тааный аласыз. HTML - бул Интернеттин колдонуучулары үчүн пайдалуу булак, жана HTML үйрөнүү сиз күткөндөн аз убакытты талап кылышы мүмкүн.

Басуу

2ден 1-бөлүк: HTML негиздерин үйрөнүү

1. HTML документин ачуу. Көпчүлүк текст иштетүүчү программалар, анын ичинде Блокнот же Windows үчүн Word жана Mac үчүн Текст Редактор HTML документтерин түзүүдө колдонулушу мүмкүн. Жаңы документти ачып, жогорку менюдан Файл → Башкача сактоону тандап, документти веб-баракча катары сактап коюңуз же файлдын кеңейтүүсүн ".doc", ".rtf" же башка нерселерден ".html" же ".htm" кылып өзгөртүңүз. ".
   • Эми сиздин документ Бай тексттин форматынан (RTF) "жөнөкөй текст" форматына өзгөртүлүп жаткандыгы жана айрым форматтоо параметрлери менен сүрөттөрү туура сакталбай жаткандыгы жөнүндө эскертүүнү көрө аласыз. Бул эскертүүнү көрмөксөнгө салсаңыз болот; HTML документтеринде бул параметрлер колдонулбайт.
   • .html жана .htm файлдары бирдей. Бул экөө тең иштейт.
2. Документиңизди браузер менен карап чыгыңыз. Бош документти сактап, жаап, андан кийин сакталган жерде документти эки жолу чыкылдатып, кайра ачыңыз. Документиңизди эми браузериңиз бош веб баракча катары ачышы керек. Эгер ал иштебей калса, файлдын сүрөтчөсүн браузериңиздин даректер тилкесине сүйрөп барыңыз. Кийинчерээк, эгер сиз HTML документти ушул макаланын кадамдарын аткарсаңыз, анда браузерге кайтып барып, коддогу өзгөрүүлөрдүн кандай экендигин текшерип турасыз.
   • Эскертүү: веб-баракчаңыз азырынча онлайнда эмес. Баракты башкалар көрө алышпайт жана аны текшерүү үчүн иштеген интернет байланышы талап кылынбайт. HTML документти вебсайт сыяктуу "окуу" үчүн сиз жөн гана браузериңизди колдоносуз.
3. "Тегдер" деген эмне экендигин түшүнүңүз. Тегдер акыркы веб баракчада көрүнбөйт, мисалы, кадимки тексттегидей. Тегдер браузериңизге баракчаны жана анын мазмунун кантип көрсөтүүнү айтып берет. Баштапкы теги көрсөтмөлөрдү камтыйт. Мисалы, ал браузерге текстти кара тамга менен көрсөтүүсүн айта алат. Берилген көрсөтмөлөр кайда колдонула тургандыгын браузерге айтып берүү үчүн, акыркы теги керек: бул мисалда, баш менен аяктагы тегдин ортосундагы бардык тексттер кара тамгалар менен жазылган. Акыркы тегдер кашаанын ичине да жайгаштырылат, бирок биринчи кашаанын артынан кыйшык сызык түшүрүлөт.
   • Баштапкы тегдерди кашаага жазыңыз: бул баштапкы күн>
   • Акыркы тегдерди кашаанын ичине жазыңыз, бирок биринчи кашаанын артынан кыйшык сызыкты коюңуз: /бул жабылуу теги>)
   • Функционалдык тегдерди кантип жазуу керектигин макаладан кийин окуй аласыз. Бул кадамда сиз тегдерди кандай жол менен жазууну унутпаңыз:> жана />.
   • Башка HTML курстарында тегдер "элементтер" деп аталат жана ачылуучу жана жабылуучу тегдердин ортосундагы текст "элементтин мазмуну" деп да аталат.
4. Биринчи html> тегиңизди жазыңыз. Ар бир HTML документ а html>тэг менен аяктайт жана / html>тэг Бул браузерге бул тегдердин ортосундагы бардык нерселер HTML тилинде жазылгандыгын билдирет. Бул тегдерди документке кошуңуз:
   • Жазуу html> документтин жогору жагында.
   • Өзүңүзгө бир аз орун берүү үчүн кирүүгө же кайтып келүүгө бир нече жолу басыңыз, андан кийин жазыңыз / html>
   • Сени унутпа баары ушул эки тегдин ортосундагы бул макалада.
5. Документиңиздин баш> бөлүгүн түзүңүз. Html> жана / html> тегдеринин арасына сиз a жазасыз баш>баштоо теги жана а / head>-end теги. Бул тегдердин ортосунда дагы бир аз боштук бериңиз. Бул тегдердин ортосунда жазылган нерселердин бардыгы веб баракчасында көрүнбөйт. Төмөнкү кадамдарды аткарып көрүңүз жана маалымат кайда пайда болгонун көрө аласызбы:
   • Баш> жана / баш> тегдеринин арасына жазыңыз: аталышы> жана / title>
   • Tag> жана / title> тегдеринин арасына сиз жазасыз: HTMLди кантип үйрөнсө болот (сүрөттөр менен) - wikiHow.
   • Документти сактап, аны браузерде ачыңыз (же документти сактап, баракчаны браузерде жаңыртыңыз, эгер барак ачык болсо). Жаңы эле барактын жогору жагында, дарек тилкесинин үстүндө жазганыңызды көрдүңүзбү?
6. Дене> бөлүмүн түзүңүз. Бул башталгыч документтеги башка нерселердин негизги бөлүгү> бөлүмүнө жайгаштырылган жана ал веб-баракчада көрсөтүлгөн. Кийин тег / баш>, бирок алдында tag / html> сиз жазасыз дене> жана / body>. Бул макалада мындан ары талкуулай турган нерселердин бардыгын дене белгилеринин ортосуна жайгаштырабыз. Эми сизде мындай документ болушу керек (окторсуз):
   • html>
   • баш>
   • title> HTML үйрөнүү - wikiHow / title>
   • / head>
   • дене>
   • / body>
   • / html>
7. Ар кандай стилдеги текстти кошуңуз. Эми сиз браузерде көрүнүп турган нерсени жаза баштадыңыз! Негизги белгилердин ичинде жазгандарыңыздын бардыгы браузерде көрүнүп турат, сиз өзгөртүүлөрдү сактап, браузердеги баракчаны жаңырткандан кийин. Жазуу эмес белгилери бар нерсе жана >анткени браузериңиз жөнөкөй тексттин ордуна HTML көрсөтмөсү катары чечмелейт. Мисалы жаз Салам дүйнө! (Англисче "Hello world!", Бул белгилүү бир программалоо тилиндеги программалоо курсунун биринчи мисалы болгон глобалдык стандарттык текст) же башка нерсе, жана тексттин алдына жана артынан төмөнкү тегдерди коюп, эмне болуп жатканын көрүңүз:
   • em> Hello world! / em> курсивделген текстке окшош: Салам дүйнө!
   • күчтүү> Салам дүйнө! / күчтүү> калың текст окшойт: Салам дүйнө!
   • s> Hello world! / s> сызылган текстке окшош: Салам дүйнө!
   • sup> Hello world! / sup> баш тамгага окшош:
   • sub> Hello world! / sub> коштомо жазууга окшош: _{Салам дүйнө!}
   • Айкалыштырып көрүңүз: Кантип көрөт em> strong> Hello world! / strong> / em> чык?
8. Текстти абзацтарга бөлүңүз. Документиңизге ар кандай тексттик саптарды киргизсеңиз, бардык саптар биринин артынан экинчиси жайгаштырылгандыгын көрө аласыз. Жаңы саптарды жана бош саптарды өзүңүз программалашыңыз керек:
   • p> Бул өзүнчө бөлүм. / p>
   • Бул сүйлөм биринчи сапта, бул сүйлөм кийинки сапта.
     Бул акыркы тегди талап кылбаган биринчи кездешүү! Биз мындай тегди бир деп атайбыз бош тег.
   • Бөлүмдөрдүн аталыштарын түшүнүктүү кылуу үчүн баш аттарды түзүңүз:
     h1> баш / h1>: мүмкүн болгон эң чоң баш
     h2> header / h2> (2 деңгээлдеги баш)
     h3> header / h3> (3 деңгээлдеги баш)
     h4> header / h4> (4 деңгээлдеги баш)
     h5> header / h5> (мүмкүн болгон эң кичинекей баш)
9. Тизмелерди кантип түзүүнү билип алыңыз. Веб-баракчада тизмелерди түзүүнүн бир нече жолдору бар. Сизге жаккан нерсени билүү үчүн төмөнкү ыкмаларды колдонуп көрүңүз. Тизменин тегерегинде бир жуп тегдер жайгаштырылгандыгына көңүл буруңуз (мисалы, иретсиз тизмелер үчүн ul> жана / ul> тегдери) жана тизмедеги ар бир нерсенин тегерегинде ли> жана / li> сыяктуу башка жуп тегдер жайгаштырылган. .
   • Белгиленген тизмелерди түзүү үчүн төмөнкү кодду колдонуңуз:
     ul> li> one item / li> li> another item / li> li> another item / li> / ul>
   • Же номерленген тизмелерди түзүү үчүн ушул код:
     ol> li> 1-пункт / li> li> 2-пункт / li> li> 3-пункт / li> / ol>
   • Же аныктама деп аталган тизме түзүү үчүн бул код:
     dl> dt> Coffee / dt> dd> - Ысык суусундук / dd> dt> Milk / dt> dd> - Муздак суусундук / dd> / dl>
10. Жаңы саптар, горизонталдык сызыктар жана сүрөттөр менен баракчаңызды жагымдуу кылыңыз. Эми баракчаңызга башка нерселерди кошуп баштоо керек. Төмөнкү тегдерди колдонуп көрүңүз (сүрөт онлайнда жайгаштырылышы керек, андыктан сиз сүрөттүн шилтемесин колдоно аласыз):
    • Сап киргизиңиз: br> же hr>
    • Сүрөттөрдү кыстаруу: img src = "the_url_of_your_image">
11. Шилтемелерди барактын башка жерлерине кыстарыңыз. Бул кодду башка баракчаларга жана веб-сайттарга шилтеме берүү үчүн колдонсоңуз болот, бирок азырынча вебсайтыңыз жок болгондуктан, биз "казыктарга" токтолобуз, алар сиз шилтеме бере турган беттеги белгилүү жерлер:
    • Алгач, шилтемени түзө турган баракчанын чекитине a> теги менен анкер түзүңүз. Анкереге эстеп калууга оңой ат коюңуз:
      
      a name = "Tips"> Сиз тегерегине анкерди жайгаштырган текст ./a>
    • Href> тегин колдонуп, якорго же башка веб-баракчага шилтеме бериңиз:
      
      a href = "бул баракчадагы веб-баракчанын urlу же анкердин аты"> Шилтеме катары көрсөтүлгөн текстти же сүрөттү ушул жерге жазыңыз. / a>
    • Башка беттеги якорьго шилтеме кылуу үчүн, URL дарегинен кийин # белгисин кошуп, андан кийин анкердин аты-жөнүн кошуңуз. Мисалы http://www.wikihow.com/HTML-leren# Кеңештер сизди түз эле ушул баракчанын "Кеңештер" бөлүмүнө алып барат.

2 ичинен 2-бөлүк: Advanced HTML тилин үйрөнүү

1. Атрибуттар жөнүндө билип алыңыз. Атрибуттар тегдин ичине жайгаштырылат жана башталгыч менен аяктоочу тегдин ортосундагы "элементтин мазмунуна" кошумча түзөтүүлөрдү киргизүү үчүн колдонулат. Алар эч качан жалгыз турушпайт. Алар төмөнкүдөй жол менен жазылган: name = "value". аты атрибуттун атын билдирет (мисалы, "түс") жана мааниси ушул өзгөчө ишти сүрөттөйт (мис. "кызыл").
   • Эгерде сиз ушул макаланын мурунку бөлүгүн жакшылап карап чыксаңыз, анда буга чейин атрибуттарга туш болгонсуз. Img> теги атрибутту колдонот src, якорь атрибутту колдонот аты жана шилтемелер атрибутту колдонушат href. Алардын бардыгы көлөмдүү деп айтууга болот ___='___’ ээрчүү.
2. HTML таблицалары менен тажрыйба. Таблица же график түзүү үчүн бир нече тэгдер керек:
   • Бардык столдун тегерегиндеги таблица тегдеринен баштаңыз (англисче "table"):таблица> / таблица>
   • Ар бир саптын мазмунуна тегдерди жайгаштырыңыз: tr>
   • Биринчи сапка мамыча баштарын коюңуз: th>
   • Катарларды катар-катар жайгаштырыңыз: td>
   • Булардын бардыгы кантип бириккенинин мисалы:
     
     table> tr> th> 1-графа: Month / th> th> 2-Column: Акча үнөмдөлгөн / th> / tr> tr> td> январь / td> td> 100 € / td> / tr> / table>
3. Баш бөлүмүндө колдонулган башка тегдерди билип алыңыз. Сиз буга чейин ар бир документтин башына жайгаштырган баш> белгисин үйрөнүп алгансыз. Титул> тегден тышкары, баш бөлүгүндө дагы башка тегдер болушу мүмкүн:
   • Түзүү үчүн мета тэгдер колдонулат метадайындар веб баракчасы жөнүндө. Бул маалыматтар издөө системалары тарабынан веб-баракчаларды категорияларга бөлүү үчүн колдонулат. Баракчаңызды издөө тутумдарына көрүнүктүү кылуу үчүн бир же бир нече мета тегдерди жайгаштыра аласыз (акыркы белгилердин кереги жок), ар бир тэгде бир ат атрибуту жана мазмун атрибуту камтылышы керек, мисалы: мета аты = "сүрөттөө" мазмуну = "бул жерге коюңуз сүрөттөө ">; же meta name = "keywords" content = "бул жерге ачкыч сөздөрдүн тизмесин жазып, ар дайым үтүр менен бөлүп жазыңыз">
   • link> тэгдер башка файлдарды баракчага шилтеме берүү үчүн колдонулат. Адатта, CSS стилдер баракчаларын HTML барактары менен бириктирүү үчүн колдонулган бул барактар ​​башкача түрдөгү код менен курулган жана барактын жалпы стилин аныктоо үчүн колдонулат.
   • script> тэгдер javascript файлдарын HTML барагы менен байланыштыруу үчүн колдонулат. Javascript колдонуучу баракчада бир нерсе кылган болсо, баракчаны өзгөртүүгө мүмкүндүк берет.
4. Учурдагы беттерден HTML менен ойнотуу. Веб-баракчалардын баштапкы кодун көрүү - бул HTML билимиңизди кеңейтүүнүн мыкты жолу. Баракчаны оң баскыч менен чыкылдатып, "Булакты көрүү", "Баракча булагын көрсөтүү" же ушул сыяктуу нерселерди тандаңыз. Белгисиз бир теги эмне кылгандыгын билип алыңыз же Интернеттен жооп издеңиз.
   • Башка адамдардын веб-сайттарын түзөтө албайсыз, бирок HTML кодун өзүңүздүн документке көчүрүп алсаңыз болот жана аны менен ар кандай оңдоолор эмне болгонун көрө аласыз. Эскертүү: көптөгөн веб-сайттар CSS стилдер баракчаларын колдонгондуктан, көп түстөрдү же башка стилдерди көрө албай калышыңыз мүмкүн.
5. Кененирээк макалаларды окуп, HTML жөнүндө билип алыңыз. Интернетте W3Schools же Codecademy сыяктуу көбүрөөк HTML тегдерин өздөштүрүү үчүн көптөгөн ресурстар бар. Ошондой эле көптөгөн HTML китептер бар, бирок HTML стандарты мезгил-мезгили менен өзгөрүлүп тургандыктан, акыркы басылышын колдонуп жатканыңызды текшерип алыңыз. HTMLди жакшы деңгээлде өздөштүргөндөн кийин, веб-баракчаңыздын дизайнын жана стилин көзөмөлдөө үчүн CSSке кайрылсаңыз болот. Андан кийин, кийинки кадам, адатта, javascript болот.

Сунуштар

• Интернеттен жөнөкөй веб-баракчаны таап, андан кийин код менен башаламандыкты баштоо пайдалуу болушу мүмкүн. Текстти жылдырууга, шрифтти өзгөртүүгө, сүрөттөрдү өзгөртүүгө аракет кылыңыз, каалаганыңыз!
• Кодду жазып алуу үчүн блокнотту колдонсоңуз болот, ошондо бир азга эсиңизде калбаса, кайра түшө турган нерсе калат. Бул баракчаны басып чыгарып, маалымдама катары сактасаңыз болот.
• Бүгүнкү күндө веб-сайттарда XML жана RSS көбүрөөк колдонулуп жатат. Код адам көзүнө көрүнбөйт окшойт, айрыкча баштапкы коддон көргөндө, иштеши пайдалуу болушу мүмкүн.
• HTML ичинде колдонулган тегдер регистрге жооп бербейт, бирок демейки шартта кичи тамгалар колдонулат (биз ушул макалада айтылгандай). Тегдер үчүн кичинекей тамгалар, ошондой эле XHTML менен шайкештик үчүн сунуш кылынат.

Эскертүүлөр

• Кээ бир тэгдер колдонулбай калган жана алардын ордуна ошол эле башка тегдер коюлган, бирок көп учурда көп параметрлерди сунушташат.
• Эгер сиздин баракчаңыздын HTML стандартына туура келээрин текшергиңиз келсе, анда W3 веб-сайтына өтүп, кодуңузду учурдагы стандарт менен текшерип көрүңүз. Көптөгөн тэгдер эскирип, алардын ордуна заманбап браузерлерде жакшыраак иштеген тегдер алмаштырылды.

Зарылчылыктар

• Блокнот (Windows) же Текст редактору (Mac) сыяктуу текст иштетүүчү программа.
• бир барак кагаз же дептер (милдеттүү эмес)
• HTML үчүн жазуу үчүн атайын иштелип чыккан программа, мисалы Windows үчүн Notepad ++ же Mac үчүн TextWrangler (милдеттүү эмес)