HTMLде кантип шилтеме жасоо керек?

Мазмуну:

HTMLде кантип шилтеме жасоо керек?
HTMLде кантип шилтеме жасоо керек?
Anonim

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

Мындан тышкары, интернет колдонуучулар жөн гана маалымат издеп, блогдорду окуган, видео көргөн жана башкалар бар.

Сапаттуу веб-сайтты түзүү үчүн көптөгөн варианттар бар. Биз HTML аркылуу веб программалоого басым жасайбыз.

HTML деген эмне

HTML Hyper Text Mark-Up Language дегенди билдирет. Англис тилинен которгондо бул "Гипертекстти белгилөө тили" дегенди билдирет.

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

HTML коддору латын тамгалары менен гана жазылат жана тегдер деп аталат жана ар бир код бурчтуу кашаага алынат. Кээ бир тэгдер жупташтырылган, айрымдары жупташкан жок.

Жупташкан аларды сөзсүз түрдө түгөй колдонуу керек дегенди билдирет. Мисалы, ачылыш теги веб-баракчанын кайсы жерден башталаарын, ал эми жабуу теги анын токтогон жерин көрсөтөт. Акыркысы ачылуучу бурч кашаадан кийин сызык белгисинин болушу менен биринчисинен айырмаланат. Мисалы, - ачылыш теги,- жабуу теги.

Жуптастырылбаган тэгдерге өнөктөш керек эмес.

Көптөгөн тегдердин атрибуттары болушу мүмкүн - кошумча элементтер, алар ага конкреттүүраак маани берет. Мисалы,. теги

Веб дизайн
Веб дизайн

HTML кайда колдонулат

HTML керек болгон жерде классикалык түшүнүк бул веб-сайт куруу.

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

Бирок, веб-баракчага кызыктуу жана көбүнчө керектүү элементтерди кошууга мүмкүндүк берген башка тилдер бар:

  • CSS тегдерди колдонуу менен айрым элементтердин стилдик өзгөчөлүктөрүн такай жазып отурбастан, бүт сайт үчүн стилдерди орнотот – мисалы, тексттин түсү жана шрифти.
  • Скрипт тили сайтка мини-программаларды (скрипттерди) иштеп чыгууга жана киргизүүгө мүмкүндүк берет,баналдык эстетикалык нерселер (чычкан менен өтүүдө шилтеменин түсүн өзгөртүү) жана функционалдык нерселер менен аяктайт (кардардын электрондук почта даректерин, телефон номерлерин чогултуу).
  • PHP менен сиз өзүңүздүн конок китебиңизди же комментарий берүү системаңызды иштеп чыга аласыз.

Ошондой эле HTML бөлүштүрүү үчүн электрондук каттарды түзүүдө колдонулат.

интернет почта тизмеси
интернет почта тизмеси

Шилтеме деген эмне

Алар сизге сайттын ичинде да, тышкы дагы башка веб-баракчага өтүүгө мүмкүндүк берет.

HTML шилтемелери көбүнчө колдонулат:

  • Тышкы веб-ресурска өтүү үчүн.
  • Сайттын ичиндеги барактарды жылдыруу үчүн.
  • Google формаларына өтүү үчүн.

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

Шилтемелердин түрлөрү

Классикалык мааниде, шилтеме бул веб-ресурстун дареги, аны чыкылдатуу менен кире аласыз.

шилтемелердин түрлөрү
шилтемелердин түрлөрү

Мындан тышкары гипершилтемелер бар: текст жана сүрөттөр. Мындай учурларда, HTML шилтемеси кандайдыр бир сүйлөмдүн (сөздүн) же сүрөттүн астында "катылган" жана ага ээрчүү үчүн текстти же сүрөттү басышыңыз керек.

Шилтемелердин башка түрлөрү:

  • Кирилбеген - белгилүү бир сеанс учурунда басыла элек шилтеме. Мисалы, эгер сиз кечээ бул шилтемеге кирип, компьютериңизди өчүрүп, кайра бүгүн кайра күйгүзсөңүз, жаңы сессия башталгандыктан, шилтеме кайра каралбайт.
  • Активдүү - бул абалда, шилтеме өтө кыска убакытка сакталат: шилтемени чыкылдатуу менен ага ээрчүүнүн ортосундагы интервал.
  • Бакырылган - бир сеанста жок дегенде бир жолу кирген шилтеме.

Дайыма тексттик шилтемелер үчүн, башкасы көрсөтүлбөсө, зыярат кылынган шилтемелердин түсү өзгөрөт.

Гипершилтемеленген сүрөт ал зыярат кылынса да, кирбесе да анын көрүнүшүн өзгөртпөйт.

Кадимки шилтемени кантип киргизүү керек

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

HTML аркылуу өзүңүз сайт түзүп жатсаңыз, атайын тег аркылуу шилтемени киргизишиңиз керек. Ал мындай болот: веб-сайттын дареги. HTML'деги шилтеме тексти протокол менен толук көрсөтүлүшү керек.

Тексттик гипершилтемени кантип киргизүү керек

Мурда айтылгандай, тексттик гипершилтеме кадимки шилтеме сыяктуу эле функцияны аткарат, бирок эстетикалык жактан жагымдуу көрүнөт: көп учурда ашыкча узун болгон сайттын дарегинин ордуна сөз же сөз айкаштары көрсөтүлөт. Мисалы, "Маалыматты бул жерден изде" сүйлөмүндө сиз шилтемени жашырсаңыз болотсөз "бул жерде". Ал өзгөчөлөнүп, аны басуу колдонуучуну каалаган сайтка алып барат.

гипершилтеме киргизүү
гипершилтеме киргизүү

HTML шилтемесин кантип жасоо керектиги мурда талкууланган. Сиз ошол эле тегди колдонуу менен тексттик гипершилтеме киргизе аласыз. Бир гана айырмасы, тегдердин ортосунда шилтеме жашырыла турган текстти көрсөтүшүңүз керек: көрүнөө текст.

Сүрөттүн гипершилтемесин кантип киргизүү керек

Бул жерде бир аз татаалыраак. Биз бир эле тэгди колдонобуз, бирок тексттин ордуна сүрөткө жолду көрсөтүшүңүз керек.

Жол – сүрөттүн жайгашкан жери. Эгерде сүрөт (сүрөт) файлды бөлүшүү кызматында жайгашкан болсо, анда сиз сызык аркылуу сүрөткө баруучу жолдун боюндагы бардык папкаларды көрсөтүшүңүз керек. Мүмкүн болсо, сүрөттүн шилтемесин да кошсоңуз болот.

Тег үчүн

src'ден тышкары, башка атрибуттар да колдонулат, алар сүрөттүн бийиктигин, туурасын жана жайгашкан жерин жана башка көптөгөн нерселерди тууралоого мүмкүндүк берет. Алардын айрымдары:

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

Атрибуттар тэгден кийин көрсөтүлөт жана ага кошулатанын курамы. Атрибуттан кийин анын мааниси болушу керек. Мисалы, "бийиктик" же "туурасы" (бийиктиги, туурасы) атрибуттары үчүн веб-баракчадагы сүрөттүн бийиктигин белгилейт. Башкасы көрсөтүлбөсө, өлчөө бирдиги - пикселдер.

Бул мындай болот: <a href="веб баракчанын дареги"

. Бул атрибуттар сүрөт үчүн ылайыктуу өлчөмүн коюуга жардам берет. Чек сүрөттүн айланасында көрүнбөгөн чекти түзүүгө жардам берет.

шилтеме аркылуу
шилтеме аркылуу

Жогорудагы атрибуттар сүрөт кыстаруу тегине өзүнчө колдонулат. Мисалы:.

Анкердик шилтемелер деген эмне

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

Анкердик шилтемелерди түзүү шилтемелердин башка түрлөрүнө караганда атрибут тегдерин көбүрөөк колдонууну талап кылат.

шилтеме анкер
шилтеме анкер

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

Алардын өзгөчөлүктөрү кененирээк, андыктан адегенде жөнөкөй шилтемелерди түзүүнү өздөштүрүү сунушталат, андан кийин анкердик шилтемелерди түзүүгө өтүү керек.

Кеңештер

Веб баракчада ар кандай маалымат блокторун жайгаштыруу
Веб баракчада ар кандай маалымат блокторун жайгаштыруу

Тажрыйбалуу жардампрограммисттер:

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

Тыянак

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

Сунушталууда: