Бул макалада сиз биринчи веб-сайтыңызды жазуу үчүн HTMLди кантип колдонууну үйрөнөсүз! Макала жакшыраак түшүнүү үчүн иллюстративдик мисалдарды берет. Макала HTMLди жаңыдан үйрөнүп жаткандар үчүн иштелип чыккан деп дароо эскертип көрөлү. Кошумчалай кетсек, бул макаланы окугандан кийин, сиз биринчи веб-сайтыңызды түзүүгө кепилдик бересиз.
HTML HyperText Markup Language дегенди билдирет, башкача айтканда, текстти уюштуруу тили.
Веб-сайттарда аракеттерди аткаруу үчүн скрипттерди колдонгон программалоо тилдеринен (JavaScript, PHP ж.б.) айырмаланып, секвенирлөө тили (HTML) вебсайттын мазмунун белгилөө үчүн тэгдерди колдонот.
Келгиле HTMLди нөлдөн баштап үйрөнүп баштайлы
Англис тили A, B, C ж.б. тамгалардан тургандай, HTML да өзгөчө "тамгалардан" турат:,,
ж.б. HTML тилинин бул өзгөчө "тамгаларын" вебмастерлер тэг деп аташат.
Төмөндө HTML тегинин мисалы келтирилген.
Тегдер Бул тексттин четине астын сызыңыз.
HTML тэгдери CSS тилинин стилдери менен жупташкан веб-сайттарды тез жана натыйжалуу түзүүгө мүмкүндүк берет.
HTML тилинин башка тилдер арасындагы орду
Сиз билгендей, жакшы вебсайткеминде 5 тилде курулган.
Заманбап вебсайт төмөнкү тилдерде курулган:
- HTML (түзүмү жана иреттөө).
- CSS (стил мазмуну).
- JavaScript (браузердин аракеттери).
- PHP (сервер аракети).
- SQL (маалыматтарды сактоо).
HTML башкалар негизделген негизги фундаменталдуу тил. Ошондуктан, HTMLди үйрөнүү желеде веб-сайттарды курууну үйрөнгөн адам үчүн биринчи кадам болушу керек.
Тег
HTML тили түзүлгөндөн берки жылдар бою өзгөрдү. Учурда көпчүлүк интернет сайттар тилдин эң акыркы версиясына – HTML5ке өтүүдө. Бирок HTML5те да тилдин негиздери өзгөрүүсүз калат.
HTML баракчасынын түзүлүшү сэндвич сыяктуу. Сэндвичте эки кесим нан болгон сыяктуу, HTML документинде ачылуучу жана жабылуучу HTML теги бар.
Бул тегдер, сэндвичтеги нан сыяктуу, ичиндегинин баарын курчап турат.
Тег
HTML тилин үйрөнүүнү улантуу менен, тег менен сөзсүз тааныш болушуңуз керек. Түздөн-түз ата-тегинин ичинде сайттын бардык мазмуну, анын ичинде теги. Бул тег талап кылынат жана ал жазылган сайт баракчасынын бардык орнотууларын камтыйт. Бул жөндөөлөр сайттын конокторуна көрүнбөйт, аларды браузерлер гана (Google Chrome, Mozilla Firefox ж.б.) көрөт.
Веб-баракчасынын жөндөөлөр блогу браузерге сайтыңызды интернетте туура көрсөтүүгө жардам берген бардык "көрсөтүлбөгөн" элементтерди камтыйт.
Бардык опциялартегдин ичинде конфигурациялоого болот, биз аны карап чыгабыз, бирок бир аздан кийин - убактысы келгенде.
Тег
Тег, тег сыяктуу тегдин ичинде.
Бул тег сиз көргүңүз келген бардык маалыматты сайтыңызда көрсөтүү үчүн керек.
Толбаштар, абзацтар, таблицалар, сүрөттөр жана шилтемелер тегдин ичинде камтыла турган элементтердин кичинекей бөлүгү гана.
HTML документинин негизги түзүмү:
… …
Биринчи сайтыңыз
Эми сиз HTML аркылуу веб-сайттарды түзө аларыңызды жана бул үчүн негизги тэгдер колдонуларын билесиз:
- . Веб баракчанын чектерин белгилейт.
- . Веб баракчаны браузерде көрсөтүү үчүн жөндөөлөрдү камтыйт.
- . Сайттын конокторуна көрсөткүңүз келген бардык веб-баракча элементтерин (сүрөттөр, видеолор, текст жана башкалар) камтыйт.
,,, сыяктуу башка тэгдер жөнүндө биз жакында сүйлөшөбүз.
Окурман бул макаланы окуп эле тим болбостон, дароо өнөрүн өркүндөтүү үчүн чуркаса жакшы болмок. HTML жөндөмүңүздү өркүндөтүү үчүн, жаңы көндүмдөрүңүздү сынай турган биринчи веб-сайтыңызды түзүшүңүз керек болот.
Уюлдук операторлор («МТС», «МегаФон» ж.б.у.с.) бизге уюлдук кызматтарды көрсөтөөрү белгилүү. Ошо сыяктуу эле, сайттарды түзүү жана башкаруу боюнча кызматтар бизге хостинг операторлору тарабынан көрсөтүлөт. Вебсайтыңызды түзүү үчүн каалаган акысыз хостинг операторунун сайтына өтүңүз.
Текшерилген хостинг провайдерлерине BEGET же киретreg, мисалы. Сиз каалаган нерсени тандай аласыз.
Кыска каттоодон кийин, 24 сааттан кийин, Интернеттеги биринчи веб-сайтыңыз автоматтык түрдө түзүлөт, ал бүт дүйнөгө көрүнүп турат жана сиз машыгып баштасаңыз болот!
Заманбап сайттын түзүмү
Сайтыңыз бар болгондон кийин, тегде кандай тэгдер бар экенин жана алар сайттардагы маалыматты кантип уюштурганын текшериңиз.
Жогорудагы сүрөттө HTML тилинин эң акыркы версиясы - HTML5 менен келген структуранын схемалык көрүнүшү. HTML5 менен бирге жаңы тегдер гана эмес, веб-сайттарды куруунун мааниси да келди. Сүрөттө көргөн бардык тегдер негизги тегдин ичинде камтылган. Бул тэгдер сайтыңыздын структурасын "конструкциялоого" жана ага маани берүүгө жардам берет.
Мисалы, тегдердин ичине … сайттын аталышын (тегдер) жана сайттын сүрөттөмөсүн (тегдер) жайгаштыруу ыңгайлуу.
Сайттын менюсун (шилтемелерин) тегдердин ичине (тег) коюу ыңгайлуу.
Тегдердин ичине маанисине байланыштуу ар кандай чоң маалыматты жайгаштыруу ыңгайлуу. Бул бир нече макала болушу мүмкүн, алардын ар бири тегдерге, же сүрөттөргө (тег) же таблицаларга (тегдер) "оролгон"
) жана башкалар.
Тегдердин ичине. маанисине туура келбеген маалыматты жайгаштыруу ыңгайлуу
Тегдердин ичине байланыш маалыматы, сайттын кошумча бөлүмдөрү ж.б.у.с. сыяктуу кошумча маалыматтарды жайгаштыруу адатка айланган.
Демек, сиз азыр заманбап веб-сайттар эмнеден жасалганын бир аз жакшыраак түшүндүңүз. Буга мисал келтирелименин башымдагы дүрбөлөңдүн ордун терең түшүнүү сезими алды.
Ошондуктан, сиз хостинг операторуңуздун сайтында файл менеджерин ачып, index.php деген документти тапканыңызда, ага сайтыңыздын түзүмүн нөлдөн баштап жазыңыз.
Менин биринчи веб-сайтым
Беттин аталышы
Беттин сүрөттөмөсү
Шилтеме 1 | Шилтеме №2 | Шилтеме №3
Кээ бир макаланын аталышы
Бул каалаган маалыматты камтыган блок, жана CSS жардамы менен сиз бул блокту жана бүт сайтты анын бардык мазмуну менен өзүңүз каалагандай түстөй аласыз. © Бардык укуктар корголгон
Сайттын ар кандай жөндөөлөрү бар деп айтканыбыз эсиңиздеби? Бул жерде:
- Колдонуу менен биз браузерлерге сайт орус жана англис символдорун камтышы мүмкүн экенин көрсөтөбүз (антпесе, сиз сайтты ачканыңызда коркунучтуу кракозябрды көрөсүз).
- барактын атын көрсөтүү үчүн колдонулат, ал браузер өтмөгүндө жана издөө системасында («Яндекс», Google жана башкалар) көрсөтүлөт.
Албетте, CSS стилисиз сайтыңыз сараң көрүнөт (ак фондо кара тамгалар), бирок биринчи бетиңизди HTMLде жазууга аракет кылыңыз.
Куттуктайбыз! Сиз жаңы эле өзүңүздүн веб-сайтыңызда биринчи веб-баракчаңызды түздүңүз! Бул кызыктуураак болот!
