HTML баракчасын кантип түзүү керек

Эгерде сиз өзүңүздүн веб баракчаңызды түзгүңүз келсе, сизде HTML түшүнүгү болушу керек. This article explains how to create an HTML page. Ошондой эле, сиз xml сайт картасын кантип түзүүнү жана сүрөт менен шилтемени кантип кошууну үйрөнөсүз. Бул xml сайт картасын түзүү да маанилүү болуп саналат, бул сиздин сайтыңызды уюштурууга жана трафикти көбөйтүүгө жардам берет. Кийинки кадам шаблонду тандоо болуп саналат.

Creating a html page

HTML белгилөө тили болуп саналат. Веб баракчанын ар бир элементи тег менен көрсөтүлөт. Тег бурчтуу кашаалар менен аныкталат, жана ар бир элементтин бир же бир нече теги бар. Кээ бир элементтер бир гана тегди талап кылат; башкалар эки талап кылышы мүмкүн. Ачуучу жана жабуу тегдеринде алдыга сызык бар (/). Мисалы, абзац элементи p теги менен көрсөтүлөт. Ачуучу жана жабуу тегтеринин ортосундагы текст абзац тексти болуп саналат.

HTML документти түзүү үчүн, текст редакторун колдонуу керек болот. Көпчүлүк компьютерлерде демейки боюнча текст редактору бар. Windows колдонуучулар Internet Explorer колдонот, ал эми Mac колдонуучулар TextEdit колдоно алышат. Сиз кесипкөй көрүнгөн веб-баракчаны түзүү үчүн кооз текст редакторун орното аласыз, бирок биринчи HTML барагыңыз үчүн, бул маанилүү эмес. Сиз ошондой эле жөнөкөй текст редакторун жана каалаган веб-браузерди колдоно аласыз. Кайсы программаны колдонууну билбей жатсаңыз, акысыз HTML редакторун жүктөп көрүңүз.

HTML барагында эки негизги бөлүм бар: дене жана баш. Дене бөлүгү веб-сайттын чыныгы мазмунун камтыйт, ал эми баш бөлүмү аталыш жана мета маалымат үчүн колдонулат. Дене башка бардык элементтерди камтыйт, анын ичинде сүрөттөр жана башка графика. Баш бөлүм - бул навигация шилтемелериңизди коюучу жер. Денени жазып бүткөндөн кийин, документтин мазмунун киргизүүгө даярсыз. Вебсайтыңыз бардыгына жеткиликтүү болушу үчүн дененин жана баштын элементтерин колдонуңуз.

Creating a xml sitemap

If you have an HTML page, издөө системаларына веб-сайтыңызды сүзүп чыгууга жардам берүү үчүн XML сайт картасын түзгүңүз келиши мүмкүн. Бул издөө рейтингдериңизге таасирин тийгизбейт да, ал издөө системаларына сиздин мазмунуңузду түшүнүүгө жана алардын сойлоп чыгуу ылдамдыгын тууралоого жардам берет. Бул жакка, сиздин веб-сайтыңыз издөө системасынын натыйжаларында көбүрөөк көрүнүп калат. Бул жерде баштоо үчүн бир нече жеңил кадамдар бар:

HTML сайт картасын түзүү оңой. Сизге керек болгон нерсе - сиздин сайттын баракчаларынын жөнөкөй таблицасын түзүү, ар бир баракка шилтемелер менен. Андан кийин башкы же төмөнкү колонтитулдагы ошол сайттын картасына шилтеме. Бул жакка, сиздин сайтыңызда канча барак бар болбосун, адамдар алар аркылуу оңой багыт алат. Мындан тышкары, сайттын картасын түзүү үчүн SEO тапшыруунун кажети жок.

Сиздин HTML баракчаңыз жандырылгандан кийин, аны Google Издөө Консолуна тапшырыңыз. Сиз каалаган файл кеңейтүүсүн колдонуп, XML сайтыңыздын картасын атасаңыз болот. Сиз Google'га XML сайт картасын тапшыра аласыз, бирок бул зарыл эмес. Google'дун жөрмөлөгүчтөрү көбүнчө жаңы мазмунду табууда абдан жакшы, жана аларга сайттын картасын тапшыруунун кереги жок. Аны башка издөө системаларына да тапшырсаңыз болот, бирок бул сиздин Google тарабынан табылаарыңызга кепилдик бербейт.

Веб баракчаңызга XML сайт картасын кошуунун кереги жок, бирок бул сиздин веб-сайтыңыздын SEO деңгээлин жогорулатат. Сайттын карталары издөө системалары тарабынан веб-баракча менен түздөн-түз байланышпаган барактарды индекстөө үчүн колдонулат.. Сайттын карталары ошондой эле бай медиа мазмундун жеткиликтүүлүгүн жакшыртууга жардам берет. Вебсайтыңызга сайттын картасын кошуу сиздин сайтыңызды издөө боттору үчүн жеткиликтүү кылууга жардам берет.

Adding a picture

In HTML, img теги менен баракка сүрөт кошо аласыз. Бул тег сүрөттү жана анын атрибуттарын гана камтыйт; ал жабуу белгисин талап кылбайт. Бул сүрөт теги HTML документинин негизги бөлүгүнө киргизилиши керек. Сүрөттүн туурасы жана бийиктигинен тышкары, сүрөттү сүрөттөгөн alt атрибутун камтышы керек. Alt теги сиз аны көрө албаган адам үчүн сүрөттөмө жазып жаткандай жазылышы керек.

HTML документине сүрөт кошуу бир аз CSS жана HTML билимин талап кылат. Сүрөттүн өлчөмү жана токтому эске алынуучу эң маанилүү факторлордун экөөсү болуп саналат. Сүрөттүн көлөмү документтин мазмунуна кандайча туура келерин аныктайт. Башка резолюцияны же пропорцияны колдонгуңуз келсе, ошондой эле сүрөттүн өлчөмүн өзгөртүүгө аракет кылсаңыз болот. Бирок, масштабдоо дайыма сиз күткөндөй иштебей турганын унутпаңыз.

Сүрөттүн өлчөмүн тууралоонун эң жакшы эрежеси - анын туурасын көбөйтүү. Туурасы бийиктиктен кеминде бир пикселге кичирээк болушу керек. Сүрөт көрсөтүү үчүн өтө кичинекей болсо, чекти кошо аласыз, анан аны сүрөттүн өлчөмүнө тууралоо үчүн тууралаңыз. Сүрөттүн чек арасын чек ара атрибутуна кошуу менен да тууралай аласыз. Чектин калыңдыгы демейки маани, бирок сиз аны каалаган мааниге орното аласыз. Сүрөттүн src атрибуту бар экенин текшериңиз.

Adding a link

You can add a link in HTML to your document using an a> href атрибуту менен тег. Бул документ үчүн кыстарманы түзүп, аны жаңы өтмөктө ачат. Документке сүрөт киргизүү үчүн href атрибутун да колдонсоңуз болот. HTML баскычын шилтемеге айландыруу үчүн JavaScript коду бар шилтемени да колдонсоңуз болот. Муну кылгандан кийин, шилтемеңизди CSS же JavaScript коду менен стилдесеңиз болот.

Шилтеме – бул бир веб-ресурстан башкасына туташуу. Ал эки учунан турат, булак казык жана көздөгөн казык. Шилтеме сүрөттөн текст файлына чейин бардык нерсе болушу мүмкүн. Көпчүлүк коомдук желе сайттары жана веб-сайттар колдонуучуларды белгилүү бир URL дарегине багыттоо үчүн шилтемелерди колдонушат. HTML шилтеменин жайгашкан жерин көрсөтүү үчүн да колдонулушу мүмкүн. Бул’ атрибуту код элементтерин URL дарегине байланыштырууга мүмкүндүк берет.

Шилтемени долбоорлоодо, Сиздин конокторуңуз мазмунду кантип колдонорун ойлонуп көрүңүз. Шилтеменин тексти сүрөттөмө болушу керек, алар эмнени күтүшү керектигин так билиши үчүн. Бир эле URL'дин кайталанышы экранды окугандар үчүн чиркин, жана аларга эч кандай пайдалуу маалымат бербейт. Экрандагы окурмандар колдонуучуларга шилтемелер бар болгондо, аларды ар кандай стилде же астын сызып айтып беришет. Бул жол менен, алар керектүү маалыматты оңой таба алышат.

Adding a table

Adding a table to an HTML page is simple, бирок муну жасаардан мурун бир нече нерселерди эске алуу керек. Сиздин үстөлдүн фон түсү конокторуңуздун көңүлүн буруу жана маанилүү маалыматка буруу үчүн өтө маанилүү. Сиз он алтылык түс коддорун же түс аттарын колдонуу менен үстөлдүн баш элементи жана маалымат элементи үчүн башка түстү орното аласыз. Кандай болбосун, үстөлүңүз оңой көрүнүп калат.

Сиз td элементи менен таблицанын башын жана таблица маалыматтарын кошо аласыз, инсанды аныктайт “кутулар” мазмун үчүн. Таблица башын кошуу веб-баракчадагы маалыматтарды көрсөтүүнүн биринчи кадамы болуп саналат, жана эгер кааласаңыз, биринчисин кошушуңуз керек. Таблицада дагы үч катар аталыштар болушу керек. Бир баш жазуу бош болушу керек. Эгерде сиздин таблицаңызда тилкелер болсо, ошондой эле ар бир тилке үчүн сап баштарын түзүшүңүз керек.

Ошондой эле үстөлүңүзгө коштомо жазууларды кошо аласыз. Коштомо жазуу таблицанын максатын сүрөттөгөн кошумча элемент. Коштомо жазуулар да жеткиликтүүлүк үчүн пайдалуу. Таблица маалымат топторун сүрөттөгөн уячаларды да камтышы мүмкүн. Акыры, катарлардын жана мамычалардын топтомун аныктоо үчүн thead элементин кошо аласыз. Сиз эки элементти чогуу же өзүнчө колдоно аласыз. Аларды айкалыштырып колдонсоңуз да болот, бирок жазуу эң маанилүүсү.

Adding a div

Adding a div to an HTML file allows you to add a section of your webpage without re-writing the whole page. div элементи текст үчүн атайын контейнер болуп саналат, сүрөттөр, жана башка элементтер. Сиз ага каалаган нерсени атай аласыз жана анын атрибуттарын өз муктаждыктарыңызга жараша өзгөртө аласыз. Сиз ошондой эле div жана баракчаңыздагы башка элементтердин ортосунда боштук түзүү үчүн классты же маржаны кошо аласыз.

Ошондой эле div ичине код киргизүү үчүн innerHTML атрибутун колдонсоңуз болот. Бул ыкма сапка камтылган кодду кабыл алат, жана эгерде ал div ичинде болбосо, мазмун алынып салынат. Ушундай жол менен divге кодду киргизүүдөн качышыңыз керек, анткени ал сиздин веб-сайтыңызды кайчылаш сайттардын скрипттеринин кемчиликтерине дуушар кылышы мүмкүн. Эгер сиз JavaScript сыяктуу скрипт тилин колдонуп жатсаңыз, innerHTML атрибутун колдоно аласыз.

A div документтин ичиндеги кодду топтоо үчүн колдонулган негизги HTML теги. Ал абзацты камтышы мүмкүн, бөгөттөө модулу, сүрөт, аудио, же атүгүл баш. Анын абалы барактын ар кандай бөлүмдөрүнө бирдиктүү стилди жана тилди колдонууга мүмкүндүк берет. Divs ырааттуу элементтердин топтору үчүн жалпы болгон семантиканы белгилөө үчүн эң жакшы колдонулат. Бүтүндөй баракты кайра жазбастан, бөлүмгө стилди кошкуңуз келсе, div колдонулушу керек.