Bare Bones Web Page: 10 кадам

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

Бүгүн биз нөлдөн баштап абдан жөнөкөй, жылаңач сөөктөрдүн веб баракчасын түзөбүз. Биз HTML элементтери, веб -баракчаңызды стилдөө (түстөр, шрифттер, тегиздөө ж. Б.) Жана акыры веб -баракчаңызга сүрөттү кантип киргизүү жөнүндө сүйлөшөбүз!

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

1 -кадам: Блокнотту колдонуу

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

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

2 -кадам: Негизги HTML документ дарагын кошуу

Веб -браузериңиздин (Chrome, Firefox, Edge, Internet Explorer, Safari …) веб -баракчаңызды иштеп чыгышы жана көрсөтүшү үчүн бардык веб -баракчалар скелеттин стандарттык түзүлүшүнө ылайык келиши керек.

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

3 -кадам:.html Барагы катары сактоо

Азыр бизде блокнотто htmlдин негизги структурасы бар, биз аны эч нерсе жоготпош үчүн сактап калалы жана Нускама боюнча жүрүп жаткандагы өзгөрүүлөрүбүздү көрө алабыз.

1. 'Файл'> 'Сактоо…' танда (Скриншот 1)
2. Файлдын түрүн "Бардык файлдар" кылып өзгөртүңүз (Скриншот 2)
3. Файлга өзүңүз тандаган ат коюңуз. Документти компьютериңизде кайда сактап жатканыңызды белгилеп алыңыз, аны кийин ачсаңыз болот. ЭСКЕРТҮҮ: Бул файлды сактоонун эң маанилүү бөлүгү - файлдын аталышынын аягына ".html" тиркемеси. Бул сиздин компьютериңизге веб баракча катары таанууга мүмкүндүк берет. Демек, эгер сиз файлыңызга "my_webpage" деп ат бергиңиз келсе, анын аягына.html кошууну унутпаңыз, мис. "my_webpage.html"

4 -кадам: Веб -баракчаңызга аталыш кошуу

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

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

Тейлордун сайты

Бул жерде сиз ар бир тегдин "ачылуучу" жана "жабуучу" тэги бар экенин байкайсыз. Сыяктуу

жана.

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

5 -кадам: Веб баракчаңызга мазмун кошуу

Ооба, биздин веб -баракчанын аталышы бар, бирок бизде ал үчүн эч кандай мазмун жок. Келгиле, бир аз шык кошолу!

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

Тейлордун сайты

Менин интернет бетине жылуу

6 -кадам: Өзгөртүүлөрдү ушунчалык алыска кароо

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

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

7 -кадам: Абзац тэгин кошуу

Бизде аталышы, рубрикасы бар, эми дагы бир текст менен абзац кошолу. Абзацтын элементинин аты 'p'. Төмөндө анын колдонулушун көрө аласыз:

Тейлордун сайты

Менин интернет бетине жылуу

Бүгүн биз бул абдан жөнөкөй веб -баракчаны кантип түзүүнү үйрөнөбүз!

Эскертүү: Өзгөртүүлөрдү каалаган убакта блокнотту сактоо жана файлды ачуу менен көрө аласыз.

8 -кадам: Ага бир аз түс бер

Бизде веб -баракчабыз бар, бирок бул абдан жөнөкөй. Параграф тегибизге бир аз түс берели!

Биз "p" тегине "стиль" атрибутун кошуу менен ар кандай элементтерди түстүү кылсак болот:

Тейлордун сайты

Менин интернет бетине жылуу

Бүгүн биз бул абдан жөнөкөй веб -баракчаны кантип түзүүнү үйрөнөбүз!

9 -кадам: Сүрөт кошуу

Сүрөттөрү жок вебсайт деген эмне? Келгиле, веб -сайтыбызга сүрөт кошолу!

Биринчи кадам - сизге жаккан сүрөттү табуу. Алтын сүрөттөрдү издөө үчүн Google сүрөттөрүн колдондум. Сүрөттү өйдө тартып, url.jpg,.png,.gif,-j.webp

Сиз сүрөтүңүздү тандап алгандан кийин, аны 'img' тегинин жардамы менен html баракчасына кошушубуз керек. Менин сүрөтүм:

Аны 'src' атрибуту бар 'img' теги аркылуу баракчаңызга кошуңуз:

Тейлордун сайты

Менин интернет бетине жылуу

Бүгүн биз бул абдан жөнөкөй веб -баракчаны кантип түзүүнү үйрөнөбүз!

10 -кадам: Акыркы продуктуну көрүү

Блокнот файлын сактап, акыркы продуктту ачыңыз. Сиз веб баракчаңызды көрүшүңүз керек!