Жаңыдан баштагандар үчүн жеке веб -сайтыңызды куруу: 5 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:40

Сиз качандыр бир кезде компьютер программисти болууну кыялдандыңыз беле же веб -сайтты колдонуп көрдүңүзбү, айтор, баарыбызга белгилүү, маалыматтык технологиялар бизнестин таянычы болуп калды. Программалоо башында бир аз коркунучтуу көрүнгөнү менен, менин максатым - сизге веб -дизайндын фундаменталдык негиздерин үйрөтүү, бул үйрөткүчтөн кийин сиз өзүңүздүн веб -баракчаңызды жасай аласыз. Муну менен бирге, келгиле!

Жабдуулар

• Macintosh же Windows PC (Linux дистрибьюторун да колдонсо болот, бирок мен азырынча аларды өткөрүп жиберип жатам, анткени бул башталгычтын кириш сөзү).
• Сиздин текст редакторуңуз (Windowsто Блокнот, Macте TextEdit) же IDEдин тандоосу. Тажрыйбам боюнча, мен Visual Studio кодун өзүм үчүн эң жакшы иштээрин таптым, ошондуктан мен аны бул жерден текшерүүнү сунуштаар элем: https://code.visualstudio.com/ анын бардык OS платформаларында иштээрин айтпай эле коёюн.

1 -кадам: Тегдер жана бир аз тарых

Текст редактору же IDE тандоону чечкенден кийин, негиздерден баштайлы.

Ишенесизби же ишенбеңиз, HTML же HyperText Markup Language 30 жылдай убакыттан бери бар жана жыл өткөн сайын тилге уламдан -улам жакшырып келе жатат. Эми сиз сурап жаткандырсыз, браузер экранда эмнени коюуну кантип чечмелейт? Бул бир нече бөлүктө жүргүзүлөт:

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

Бул жерде негизги HTML тегдеринин кээ бирлери:

• аталышы - браузерге барактын аталышы кандай экенин айтуу үчүн колдонулат. Бул веб -баракчанын өтмөгүн караганыңызда да көрүнөт.
• h1, h2, h3, h4 - бул ар кандай аталыштар үчүн колдонулат, h1 эң чоң жана h4 эң кичине. Бул тууралуу кийинки бөлүмдө кененирээк айтып берем.
• p - абзац, тексттин абзацтарын жазуу үчүн колдонулат. Кагаздагы абзацтар сыяктуу.
• br - тыныгуу, ал текстке ылайык тыныгуу киргизет.
• а - басылуучу шилтеме сыяктуу башка барактарга шилтеме түзүү үчүн колдонулат.
• img - сүрөттү веб -баракчага байланыштыруу үчүн колдонулат.
• ул, ол, ли - иреттелбеген тизмелер, иреттелген тизмелер жана тизме элементтери.
• - акыркы колдонуучу көрбөй турган кодго киргизилген комментарийлерди жасоо үчүн колдонулат.

Жана бул жерде кээ бир CSS тегдери (визуалдык):

• түс - белгилүү бир элементке же веб -беттеги белгилүү бир түс берүү үчүн колдонулат.
• font-size-беттеги ариптин өлчөмүн өзгөртүү үчүн колдонулат.
• background-color-белгилүү бир элементтин же бүтүндөй фондун түсүн өзгөртүү үчүн колдонулат.

Мен ошондой эле кичине алдамчылык баракчасын тиркеп койдум, эгер сиз бир аз жоголгондой сезилсеңиз, бирок кабатыр болбоңуз, бир заматта аны чечип аласыз! Мындан тышкары, www.w3schools.com дагы программалоо суроолоруңуз үчүн фантастикалык булак. Алар, албетте, убакытты сактап калышты.

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

жана сыяктуу тегди жабуу үчүн колдонулат

. Бул маанилүү, антпесе браузер кайда токтобойт. Ортосунда

жана

тегдер, бул жерде сиз каалаган нерсени киргизесиз!

2 -кадам: Редакторду орнотуу

Эми биз HTML веб -сайтынын негизги элементтери жөнүндө бир аз сөз кылдык, эми чумкуп, өзүбүз үчүн сынап көрөлү. Бул кийинки кадам үчүн мен веб -сайтты программалоо үчүн Visual Studio кодун колдоном, бирок эгер сиз Notepad же TextEditти колдонуу менен ыңгайлуураак болсоңуз, анда коддун жайгашуусу бирдей болот.

Блокнот ичинде:

• Notepad менен, программа бош файл менен башталат, бул аны баштоону абдан оңой кылат. Бул ошондой эле VS кодун колдонууга салыштырмалуу бир нече кадам секирүүгө мүмкүндүк берет. Файлды туура форматта сактоо менен баштайлы.
• Файл> Сактоо дегенди басыңыз
• Файлыңыздын атын.html менен киргизиңиз жана Түр катары сактоо астында, бардык файлдарды тандаңыз. Сактоону чыкылдатыңыз.

VS кодунун ичинде:

• IDEдин бардык мүмкүнчүлүктөрүн пайдалануунун эң жакшы жолу - бул файлды түзүүдөн жана IDEге файлдын кайсы түрүн айтуудан баштоо. Муну төмөнкүчө жасаса болот:
• Файл> Жаңы файлды басыңыз
• Бош файл ачылат
• Андан кийин, бош болсо да, файлды сактоо менен баштоону каалайсыз, анткени бул IDEге акыркы продукт кандай файл болорун түшүнүүгө мүмкүнчүлүк берет. Сактоодо.html кеңейтүүсүн файлдын аталышынын аягына кошууну унутпаңыз. Сактоону чыкылдатыңыз.

3 -кадам: Blueprints

Сиз filename.html файлыңызды ийгиликтүү сактагандан кийин, биздин веб -баракчанын алкагын түзүүдөн баштайлы. HTML баракчасынын калган бөлүгүн түзүүдөн мурун, файлдын кайсы негизги бөлүктөрүн жарыялашыбыз керек экенин эсиңизден чыгарбаңыз. Pro-tip: сайттын алкагын баштаганда! DOCTYPE HTML теги браузерге окуп жаткан файл html файлы экенин айтат. Эгерде сизде бир эле файлда ар кандай коддор бар болсо жана котормочуларды алмаштыргыңыз келсе, бул пайдалуу болушу мүмкүн. Бул үйрөтүлүүчү масштаб үчүн, биз бул жөнүндө көп сөз кылбайбыз, бирок эгерде бул Нускамадан кийин сиз HTMLди иштеп чыгуу жөнүндө көбүрөөк билгиңиз келсе, анда аны тартынбаңыз. Мен мыкты практика үчүн файлдын башына! DOCTYPE HTML тегин киргизем. Менен ачууну жана жабууну унутпаңыз.

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

Документтерди орнотуу аяктагандан кийин, биз жарыштарга түшүп, көңүл ачып жатабыз!

4 -кадам: Код; Code; Code;

Биз жаңы түзүлгөн файлдын аталышын киргизүү менен баштасак болот. Каалаган нерсеңизди киргизиңиз. Бул браузер өтмөгүндө пайда болгон ысым экенин унутпаңыз. Келгиле, биздин сайттын аталышын киргизүү менен баштайлы. Муну кантип кылганыбызды мурунку эсибизден чыгарбаңыз. H1/2/3/4 дегенди уктум беле? Бул туура!

Улантуудан мурун, биздин файлды браузердин терезесинде ачуу пайдалуу деп ойлойм, андыктан реалдуу убакытта биздин өзгөртүүлөр браузерде кандай чагылдырылып жатканын көрө алабыз. Сиз муну кыла аласыз Файл> Сактоо файлды сактоо үчүн, HTML файлы сакталган папкага өтүү үчүн, мен үчүн бул иш столу жана файлды ачуу үчүн өзүңүз тандаган браузерди колдонуңуз жана ошого карайт белеңиз?, сиздин веб -баракчаңыз бар! Эскертүү: Мен жеке өзүмдүн компьютеримде Safari колдонушат, бирок веб -иштеп чыгууда Firefox тестирлөө үчүн алтын стандарттуу браузер болуп саналат, анткени ал дээрлик бардык веб скрипт тили менен иштейт.

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

HTML менен кыла турган ар кандай нерселер менен тегдерди кошуп, ойноп көрүңүз. Төмөндө көрүнүп тургандай, мен Instructables.comго бир нече абзацтарды, тыныгууларды, тышкы гипершилтемени, сүрөттү коштум (аны тышкы булактан же. HTML файлы сакталган каталогдун ичинде байланыштырууга болот), иреттелбеген тизме, заказ берилген тизме жана акырында комментарийдин мисалы.

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

5 -кадам: Акыркы ойлор

Жана сенде бар; сиз биринчи веб -баракчаңызды ийгиликтүү түздүңүз! Бул башталгычтын көрсөтмөсү болгондуктан, мен HTML менен болгон биринчи тажрыйбаңды жагымдуу кылгым келет. Менин тажрыйбамдан үйрөнүүнүн эң жакшы жолу - бул сууга чөмүлүү жана колдо болгон нерселерди сынап көрүү, кодуңуз менен эмне кыла ала турганыңызды көрүү жана кодуңузду кантип сындырууну көрүү. Бул бүтүндүктү түзөт жана код кантип жана эмне үчүн иштээрин жакшыраак түшүнүүгө жардам берет. Эсиңизде болсун, www. W3Schools.com - бул суроолор үчүн эң сонун булак жана алар кодуңузду сынап көрүү үчүн браузердин ичинде виртуалдык кум коробкасын сунушташат. Сиз бир нерсе үйрөнүп, бактылуу коддоону үйрөндүңүз деп үмүттөнөбүз!