HTML кантип үйрөнүү керек

Мазмун

Кадамдар
2 ичинен 1 -бөлүк: HTML негиздерин үйрөнүү
2 ичинен 2: Advanced HTML
Кеңештер
Эскертүүлөр
Сага эмне керек

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

Кадамдар

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

1 HTML документти ачуу. Көпчүлүк текст редакторлору (Windows үчүн Notepad же Notepad ++, Mac үчүн TextEdit, GNU / Linux үчүн gedit) HTML файлдарын түзүү үчүн колдонулушу мүмкүн. Жаңы документ түзүңүз жана аны Файл → Веб -баракча Форматында Сактоо аркылуу сактаңыз же файл кеңейтүүсүн .doc, .rtf же башка кеңейтүүнүн ордуна .html же .htm кылып өзгөртүңүз.
- Сиз RTF форматынын ордуна файл "жөнөкөй текст" катары сакталаарын же форматтоо жана сүрөттөр сакталбай тургандыгын эскертүү аласыз. Бул Жакшы; HTML үчүн бул параметрлердин кереги жок.
2 Браузерде түзүлгөн файлды ачыңыз. Бош файлды сактаңыз, аны компьютериңизден таап, ачуу үчүн эки жолу чыкылдатыңыз. Браузерде бош барак ачылышы керек. Андай болбосо, файлды браузериңиздин дарек тилкесине сүйрөңүз. HTML файлын түзөтүп жатып, өзгөртүүлөрдү көрүү үчүн бул баракты жаңырта аласыз.
- Сураныч, ушундай жол менен сиз Интернетте вебсайт түзбөйсүз. Башка адамдар бул баракчага кире алышпайт жана жергиликтүү баракчаңызды текшерүү үчүн интернет байланышы кереги жок. Браузер HTML кодун интерпретациялап, аны вебсайт сыяктуу "окуп" жатат.
3 Белгилөө тэгдери эмне экенин түшүнүңүз. Кадимки тексттен айырмаланып, тегдер бетте көрүнбөйт. Анын ордуна, алар браузерге баракты жана анын мазмунун кантип көрсөтүүнү айтышат. "Ачуу" теги көрсөтмөлөрдү камтыйт. Мисалы, ал браузерге текст катары көрсөтүлүшү керектигин айта алат коюу... Браузерге көрсөтмө аяктаган жерди көрсөтүү үчүн ага "аяктоо" белгиси да керек. Бул мисалда, баштоо жана аяктоо тегинин ортосундагы текст кара түстө көрсөтүлөт. Тэгдер барабар эмес белгилердин ичине жазылат, бирок акыркы тег алдыга сызык менен башталат.
- Ачылуу теги теңсиздик белгилеринин ортосуна жазылат: ачуу теги>
- Жабуу тегинде, теги дескриптордун (аты -жөнүнүн) алдында алдыга сызык коюлат: /аягы тег>
- Ар кандай тегдер кантип колдонулганын билүү үчүн окуңуз. Бул кадам үчүн, сиз жөн гана жазуу форматын эстеп калышыңыз керек. Тэгдер теңсиздик белгилеринин ортосуна жазылат:> жана />
- Кээ бир окуу куралдарында HTML тегдери элементтер деп аталат, ал эми ачылуучу жана жабуучу тегдердин ортосундагы текст элементтердин мазмуну деп аталат.
4 Редакторго html> тегин териңиз. Ар бир HTML файлы тег менен башталышы керек html> жана тег менен бүтөт / html>... Бул тэгдер браузерге тегдердин ортосундагы бардык мазмун HTMLде экенин айтышат. Бул тегдерди документиңизге кошуңуз:
- Көбүнчө HTML файлдары саптан башталат ! DOCTYPE html>бул браузерлер бүт файлды HTML катары таанышы керек дегенди билдирет. Бул линия кереги жок, бирок шайкештик маселелерин чечүүгө жардам берет.
- Терүү html> документтин жогору жагында.
- Бир нече бош саптарды түзүү үчүн Enter же Return баскычтарын бир нече жолу басыңыз, анан териңиз / html>
- эсиңде болсун, ошону бүтүндөй бул макалада сиз түзө турган код бул эки тегдин ортосунда жазылышы керек.
5 Файлда баш> бөлүмүн түзүңүз. Html> жана / html> тегдеринин ортосунда ачылуучу тегди түзүңүз баш> жана жабуу теги / баш>... Алардын ортосуна бош сызыктарды кошуңуз. Head> жана / head> тегдеринин ортосунда жазылган мазмун барактын өзүндө көрүнбөйт. Бул кадамдарды аткарыңыз, ошондо сиз бул тегдин эмне экенин көрөсүз:
- Head> жана / head> тегдеринин ортосунда жазыңыз аталышы> жана / аталышы>
- Аталышы> жана / аталышы> тегдеринин ортосунда жазыңыз HTMLди кантип үйрөнсө болот - wikiHow.
- Өзгөртүүлөрдү сактаңыз жана файлды браузерде ачыңыз (же эгер файл мурунтан эле ачык болсо, баракты жаңыртыңыз). Барактын аталышында дарек тилкесинин үстүндө пайда болгон текстти көрөсүзбү?
6 Дене> бөлүмүн түзүңүз. Бул мисалдагы бардык башка тэгдер жана тексттер бөлүмдө жазылган, анын мазмуну бетте көрсөтүлөт. Кийин жабуучу тег / баш>, бирок мурун tag / html> тэгдерди кошуу дене> жана / дене>... Бул макаланын калган бөлүгү үчүн дене бөлүмү менен иштеңиз. Сиздин файл ушундай болушу керек:
html>
баш>
аталышы> HTMLди кантип үйрөнүү керек - wikiHow / title>
/ баш>
дене>
/ дене>
/ html>
7 Ар кандай стилдерди колдонуп текст кошуңуз. Баракка чыныгы мазмунду кошууга убакыт келди! Негизги тегдердин ортосунда жазганыңыздын баары браузерде жаңыртылгандан кийин баракта көрсөтүлөт. Колдонбо символдор же >анткени браузер мазмунду тексттин ордуна тег катары чечмелөөгө аракет кылат. Жазуу Баарына салам! (же эмнени кааласаңыз), анда бул тегдерди текстке кошуп көрүңүз жана эмне болорун көрүңүз:
- em> Баарына салам! / em> текстти "курсивдүү" кылат: Баарына салам!
- күчтүү> баарына салам! / күчтүү> текстти "жоон" кылат: Баарына салам!
- s> Баарына салам! / s> сызылган текст: ~~Баарына салам!~~
- sup> Баарына салам! / sup> шрифтти үстүнкү сценарий катары көрсөтөт:
- sub> Баарына салам! / sub> арипти субкрипт катары көрсөтөт: _{Баарына салам!}
- Ар кандай тегдерди бирге колдонуп көрүңүз. Ал кандай көрүнөт em> strong> Баарына салам! / strong> / em>?
8 Текстти абзацтарга бөл. Эгерде сиз HTML файлына бир нече сап текст жазууга аракет кылсаңыз, анда браузерде сап үзүлүүлөрү көрсөтүлбөй турганын байкайсыз. Текстти абзацтарга бөлүү үчүн тегдерди кошуу керек:
- p> Бул өзүнчө параграф. / p>
- Бул сүйлөмдөн кийин бул саптын башталышына чейин бр> линия үзүлөт.
  Бул акыркы тегди талап кылбаган биринчи тег. Бул тегдер "бош" тегдер деп аталат.
- Бөлүмдүн аталыштарын көрсөтүү үчүн аталыштарды түзүңүз:
  h1> баш текст / h1>: эң чоң наам
  h2> баш текст / h2> (экинчи деңгээлдеги аталыш)
  h3> баш текст / h3> (үчүнчү деңгээлдин аталышы)
  h4> баш текст / h4> (төртүнчү деңгээлдин аталышы)
  h5> баш текст / h5> (эң кичине аталыш)
9 Тизмелерди түзүүнү үйрөнүңүз. Желе баракчасында тизмелерди түзүүнүн бир нече жолу бар. Төмөндөгү варианттарды байкап көрүңүз жана кайсынысы сизге көбүрөөк жакканын чечиңиз. Белгилей кетсек, бир жуп тегдер тизме үчүн керек (мисалы, ул> жана / ул> маркерленген тизме үчүн), жана ар бир тизме пункту башка жуп тегдер менен белгиленген, мисалы, li> жана / li>.
- Белгиленген тизме:
  ul> li> Биринчи сап / li> li> Экинчи сап / li> li> Жана башка / li> / ul>
- Номерленген тизме:
  ol> li> One / li> li> Two / li> li> Three / li> / ol>
- Аныктама тизмеси:
  dl> dt> Coffee / dt> dd> - ысык суусундук / dd> dt> Lemonade / dt> dd> - муздак суусундук / dd> / dl>
10 Барактын жардамы менен макет коюңуз линия үзүлүштөрү, горизонталдык сызыктар жана Сүрөттөр. Баракка тексттен башка нерсени кошууга убакыт келди. Көбүрөөк маалымат алуу үчүн төмөнкү тэгдерди колдонуңуз же шилтемелерди ээрчиңиз. Сиз жайгаштыргыңыз келген сүрөттүн шилтемесин түзүү үчүн онлайн хостинг кызматын колдонуңуз:
- Горизонталдуу сызык: hr>
- Сүрөт киргизүү: img src = "сүрөт шилтемеси">
11 Шилтемелерди кошуу. Сиз бул барактарды башка баракчаларга жана сайттарга гиперссылкаларды түзүү үчүн колдоно аласыз, бирок сизде азырынча веб -сайт жок болгондуктан, сиз азыр анкердик шилтемелерди, башкача айтканда, беттеги белгилүү жерлерге шилтемелерди түзүүнү үйрөнөсүз:
- Баракка шилтеме кылгыңыз келген а> теги менен казык жасаңыз. Так жана эстен кеткис ат менен келиңиз:
  
  a name = "Кеңештер"> Сиз шилтемеленип жаткан текст. / a>
- Тышкы булакка салыштырмалуу шилтеме же шилтеме түзүү үчүн href> тегин колдонуңуз:
  
  a href = "баракка шилтеме же беттин ичиндеги якордун аты"> Шилтеме катары кызмат кыла турган текст же сүрөт. / a>
- Башка беттеги салыштырмалуу шилтемеге шилтеме кылуу үчүн, негизги шилтеменин жана казыктын атынын артынан # белгисин кошуңуз. Мисалы, https://en.wikihow.com/learn-HTML#Tips Бул беттин кеңештер бөлүмүнө шилтемелер.

2 ичинен 2: Advanced HTML

1 Атрибуттар менен таанышып алыңыз. Атрибуттар кошумча маалыматты көрсөтүп, тегдин ичине жазылган. Атрибуттардын форматы төмөнкүчө: name = "маани", кайда титул атрибутун аныктайт (мисалы, түс түс атрибуту үчүн), жана мааниси анын маанисин көрсөтөт (мисалы, Кызыл кызыл үчүн).
- Атрибуттар чындыгында HTML негиздери боюнча мурунку бөлүмдө колдонулган. Img> тег атрибутун колдонот src, салыштырмалуу шилтеме казыктары атрибутун колдонушат атыжана шилтемелер атрибутун колдонушат href... Сиз байкагандай, бардык атрибуттар форматта жазылган ___='___’.
2 HTML таблицалары менен эксперимент жүргүзүңүз. Таблицаны түзүү ар кандай тегдерди колдонууну камтыйт. Сиз эксперимент жасай аласыз, же кененирээк нускамаларды окуй аласыз.
- Таблица тегдерин түзүү:стол> / стол>
- Таблицада ар бир саптын мазмунун тегдерге кошуңуз: tr>
- Мамычанын аталышы теги менен аныкталат: th>
- Кийинки саптардагы уячалар: td>
- Бул тегдерди колдонуунун мисалы:
  
  стол> tr> th> 1 -мамыча: ай / th> th> 2 -тилке: үнөмдөө / th> / tr> tr> td> January / td> td> 5000 рубль / td> / tr> / table>
3 Кошумча баш бөлүмүнүн тегдерин үйрөнүңүз. Сиз буга чейин ар бир html файлынын башында келген head> тегин үйрөнгөнсүз. Title> тегинен тышкары, бул бөлүмдүн башка тегдери бар:
- Камтыган мета тегдер метадайындариздөө системалары тарабынан сайтты индекстөө үчүн колдонулат. Сайтыңызды издөө системаларында табууну жеңилдетүү үчүн, бир же бир нече ачылуучу мета> тэгдерди колдонуңуз (жабуучу тегдер талап кылынбайт).Бир теги үчүн бир атрибут жана бир маанини колдонуңуз: мета аты = "description" content = "page description">; же мета аты = "ачкыч сөздөр" мазмуну = "үтүр менен ажыратылган ачкыч сөздөр">
- Шилтеме> тегдер, коддоонун башка түрүн колдонуу менен түзүлгөн жана HTML баракты түстү, текстти тегиздөөнү жана башка көптөгөн функцияларды колдонуп өзгөртүүгө мүмкүндүк берүүчү стиль таблицалары (CSS) сыяктуу үчүнчү жактын файлдарын көрсөтөт.
- JavaScript файлдарын баракка тиркөө үчүн колдонулган скрипт> тегдер. Бул файлдар баракты интерактивдүү түрдө өзгөртүү үчүн керек (колдонуучунун аракеттерине жооп катары).
4 Башка сайттардын HTML коду менен эксперимент жүргүзүңүз. Башка веб баракчалардын баштапкы кодун көрүү HTML үйрөнүүнүн эң сонун жолу. Сиз беттин оң баскычын чыкылдатып, браузериңиздин жогорку менюсунда Булакты көрүү же ушул сыяктуу нерсени тандай аласыз. Белгисиз бирка эмне кылаарын билүүгө аракет кылыңыз же ал тууралуу интернеттен издеңиз.
- Башка адамдардын сайттарын түзөтө албасаңыз да, кийинчерээк тегдер менен тажрыйба жүргүзүү үчүн баштапкы кодду файлыңызга көчүрүп алсаңыз болот. Көңүл буруңуз, CSS белгилөө жеткиликтүү болбошу мүмкүн жана түстөр менен форматтоо башкача көрүнүшү мүмкүн.
5 Кененирээк көрсөтмөлөрдү изилдөөнү баштаңыз. Интернетте HTML тегдерине арналган көптөгөн сайттар бар, мисалы W3Schools же HTMLbook. Сатыкта кагаз китептер дагы бар, бирок стандарттар өзгөрүп, өнүгүп жаткандыктан акыркы басылышын табууга аракет кылыңыз. Дагы жакшы, сайтыңыздын жайгашуусун жана сырткы көрүнүшүн көзөмөлдөө үчүн CSSти өздөштүрүңүз. CSSти үйрөнгөндөн кийин веб -дизайнерлер адатта JavaScriptти үйрөнүшөт.

Кеңештер

Notepad ++ - бул бекер программа, кадимки блокнотко окшош, бирок сиз кодуңузду браузериңизде онлайнда сактап, текшере аласыз. (Ошондой эле дээрлик бардык тилдерди колдойт - HTML, CSS, Python, JavaScript ж.б.).
Желедеги бир нече жөнөкөй баракты табыңыз, кодду компьютериңизге сактап, аны менен эксперимент кылыңыз. Текстти жылдырууга, шрифтти өзгөртүүгө, сүрөттөрдү алмаштырууга аракет кылыңыз - кандай болбосун!
Сиз блокнотту жазууңуз бар жерде сактай аласыз, андыктан аларды дайыма колуңузда болушуңуз керек. Ошондой эле бул баракты басып чыгарып, ага шилтеме кылсаңыз болот.
Сиз кодду жазганда, аны өзүңүз жана башка адамдар түшүнүшү үчүн кылдаттык менен жасаңыз. Колдон! - Комментарийди бул жерге жаз - HTML комментарийлери үчүн: алар бетте чагылдырылбайт, бирок коддук документте көрүнөт.
XML жана RSS популярдуулукка ээ болууда. XML жана RSS технологияларын камтыган барактардын коду тажрыйбасыз колдонуучуга окуу жана түшүнүү үчүн кыйыныраак, бирок бул куралдар абдан пайдалуу.
HTMLдеги белгилөө теги чоң-кичине тамгаларды сезбейт, бирок биз стандартташтыруу жана XHTML шайкештиги үчүн кичине тамгаларды гана колдонууну сунуштайбыз (бул макалада мисалдардагыдай).

Эскертүүлөр

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

Сага эмне керек

Notepad (Windows) же TextEdit (Mac) сыяктуу текст редактору
Кагаз / блокнот (кереги жок)
Notepad ++ (Windows) же TextWrangler (Mac) сыяктуу HTML редактору (кереги жок)