После установки давай поймём что же такое HTML.
HTML (от английского Hyper Text Markup Language) — это язык
гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать
загруженный сайт. HTML состоит из тегов — команд, которые указывают
браузеру, как отображать помещённый в них текст. Это и есть элементы веб-страницы. У каждого тега есть
имя, которое заключается в угловые скобки < и >. Например,
в теге <p> обычно помещают
текст:
Տեղադրվելուց հետո եկեք հասկանանք, թե ինչ է HTML.
HTML (անգլերենից Hyper Text Markup Language) — դա էջի հիպերտեքստային նշագրման լեզուն է:
Այն օգտագործվում է բրաուզերին ցույց տալու համար, թե ինչպես ցուցադրել ներբեռնված կայքը:
HTML-ը պարունակում է թեգեր — հրամաններ, որոնք ցույց են տալիս
բրաուզերին, ինչպես ցուցադրել դրանց մեջ տեղադրված տեքստը. Սրանք են վեբ էջի տարրերը: Յուրաքանչյուր թեգ ունի անուն, որը
փակցված է անկյունային փակագծերում
< և >. Օրինակ,<p> թեգը սովորաբար պարունակում է տեքստ.
Теги могут быть парными и непарными. Парные состоят из двух тегов — открывающего и закрывающего, а непарные — из одного. Непарный тег также можно закрывать, но это не обязательно. Например, тег <br>, <hr>, <area>, <input> и тд. Например, тег <img> который позволяет разместить картинку на сайте, — непарный:
Թեգերը կարող են լինել զույգ կամ ոչ զույգ: Զույգերը բաղկացած են երկու թեգերից՝ բացվող և փակվող, իսկ ոչ զույգերը՝ մեկից: Ոչ զույգ թեգերը նույնպես կարող է փակվել, բայց դա պարտադիր չէ: Օրինակ՝ թեգ <br>, <hr>, <area>, <input> և այլն: Օրինակ՝ թեգ <img>-ն որը թույլ է տալիս կայքում տեղադրել պատկեր՝ զույգ չէ:
У каждого тега есть атрибуты. В результате использования этих средств, можно передавать элементам веб-страницы дополнительные данные: размеры, уникальный ID элемента, ссылки на изображения и так далее. Элемент <img> содержит в себе два основных атрибута — <src> и <alt>. Атрибут <src> добавляет ссылку на файл, а <alt> — подпись к картинке. Она появится в случае, если файл не загрузится:
Յուրաքանչյուր թեգ ունի ատրիբուտներ։ Այս գործիքներն օգտագործելու արդյունքում դուք կարող եք լրացուցիչ տվյալներ փոխանցել վեբ էջի տարրերին՝ չափեր, եզակի տարրի ID, պատկերների հղումներ և այլն: Տարր <img>-ն պարունակում է երկու հիմնական հատկանիշ — <src> և <alt>. Հատկանիշ <src>-ն ավելացնում է հղում ֆայլին, իսկ <alt>-ը նկարի վերնագիր. Այն կհայտնվի, եթե ֆայլը չբեռնվի.
Вот как будет выглядеть если ссылка будет недействительно или фотографии не будет.
Ահա, թե ինչ տեսք կունենա, եթե հղումն անվավեր է կամ լուսանկար չկա:
Чтобы самим испробовать, создайте папку где вы будете хранить свой сайт (в нашем случаи папка называется Hello World). Потом откройте папку и создайте свой первый HTML документ.
Ինքներդ փորձելու համար ստեղծեք թղթապանակ, որտեղ կպահեք ձեր կայքը (մեր դեպքում թղթապանակը կոչվում է Hello World): Այնուհետև բացեք թղթապանակը և ստեղծեք ձեր առաջին HTML փաստաթուղթը:
Прежде чем работать вам нужно узнать из чего состоит HTML документ. DOCTYPE является ответственным за корректное отображение веб-страницы браузером. DOCTYPE дает возможность определить не только версию HTML, но и соответствующий DTD-файл в Интернете.
Նախքան աշխատելը, դուք պետք է իմանաք, թե ինչից է բաղկացած HTML փաստաթուղթը: DOCTYPE-ը պատասխանատու է բրաուզերի կողմից վեբ էջի ճիշտ ցուցադրման համար: DOCTYPE-ը հնարավորություն է տալիս որոշել ոչ միայն HTML տարբերակը, այլև համապատասխան DTD ֆայլը համացանցում։
<head> содержит машиночитаемую информацию (метаданные) о документе, такую как его название, сценарий, таблица стилей и т.д. Примечание: <head> содержит в основном машиночитаемую информацию. Одним из обязательных элементов в разделе <head> является <title>. Текст, расположенный внутри элемента <title>, отображается в строке заголовка веб–браузера. Необязательным элементом раздела <head> является элемент <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных.
<head> -ը պարունակում է մեքենայական ընթեռնելի տեղեկատվություն (մետատվյալներ) փաստաթղթի մասին, ինչպիսիք են դրա վերնագիրը, սցենարը, ոճի թերթիկը և այլն։ Նշում. <head>-ը հիմնականում պարունակում է մեքենայական ընթերցվող տեղեկատվություն: <head> բաժնում պահանջվող տարրերից մեկը <title>-ն է։ <title> տարրի տեքստը ցուցադրվում է վեբ բրաուզերի վերնագրի տողում: <head> բաժնի կարևոր տարրերից մեկը դա <meta> տարրն է։ Դրանով դուք կարող եք սահմանել էջի բովանդակության և հիմնաբառերի նկարագրությունը որոնման համակարգերի, HTML փաստաթղթի հեղինակի և այլ մետատվյալների հատկությունների համար:
Shift + 1 + TabТеперь зайдите на свой проект и нажмите сочетание клавиш которое написано справа и у вас появиться начальный макет. Элемент <body> определяет содержимое (контент) HTML-документа, которое отображается в окне браузера (текст, ссылки, картинки (изображения), таблицы, списки и т.д.). Он должен быть единственным в документе и всегда должен располагаться внутри элемента <html>, сразу после элемента <head>.
Shift + 1 + TabԱյժմ գնացեք ձեր պրոեկտը և սեղմեք ստեղնաշարի կոմբինացիան, որը գրված է աջ կողմում, և դուք կունենաք նախնական դասավորությունը: <body> տարրը սահմանում է HTML փաստաթղթի բովանդակությունը, որը ցուցադրվում է բրաուզերի պատուհանում (տեքստ, հղումներ, նկարներ (պատկերներ), աղյուսակներ, ցուցակներ և այլն): Այն պետք է լինի միակը փաստաթղթում և միշտ պետք է տեղադրվի <html> տարրի ներսում՝ <head> տարրից անմիջապես հետո:
Теперь давай попробуем добавить текст и вывести его на браузер. Как мы отметили выше, для добавления текста нужно использовать тег <p>. Тег <p> раскрывается как параграф. Для того чтобы вывести сайт на локальный сервер, нужно чтобы у тебя было данное расширение - Live Server (Five Server) и чтобы было включено Авто сохранение(находиться во вкладке Файл/Авто сохранение).
Այժմ փորձենք ավելացնել տեքստ և ցուցադրել այն բրաուզերում: Ինչպես վերևում նշեցինք, տեքստ ավելացնելու համար անհրաժեշտ է օգտագործել <p>թեգը: <p> թեգը ընդլայնվում է պարբերության պես: Կայքը local սերվեր տեղափոխելու համար դուք պետք է ունենաք այս ընդլայնումը` Live Server (Five Server) և ստուգեք որպեսզի Auto save-ը միացված է (գտնվում է File / Auto save):
Некоторые случаи требуют оставить скрытую заметку или объяснить что-то в коде человеческим языком. Такое примечание пригодится и себе в будущем, и следующим разработчикам, которые будут работать над вашим проектом. За этим изначально были придуманы комменты! Вся их прелесть в том, что пользователи их никогда не увидят. Текст комментария должен начинаться с конструкции <!--. Здесь используется термин "Открытие комментария". За текстом следуют комментарии и закрываются конструкцией --> При помощи этого, мы четко демонстрируем браузеру границы спрятанного сообщения.
Որոշ դեպքերում պահանջվում է թաքնված նշում թողնել կամ ինչ-որ բան բացատրել կոդում մարդկային լեզվով: Նման նշումը օգտակար կլինի ինչպես ձեզ ապագայում, այնպես էլ հաջորդ մշակողների համար, ովքեր կաշխատեն ձեր նախագծի վրա։ Դրա համար ի սկզբանե հորինվել են մեկնաբանություններ(կոմենտներ)։ Դրանց իմաստն այն է, որ օգտատերերը դրանք երբեք չեն տեսնի: Մեկնաբանության տեքստը պետք է սկսվի <!-- կառուցվածքով: Այստեղ օգտագործվում է «Open Comment» տերմինը: Տեքստը մեկնաբանվում և փակվում է --> կառուցվածքով, որը հստակ ցույց է տալիս դիտարկիչին թաքնված հաղորդագրության սահմանները:
В HTML можно по-разному добавлять текст. Но у каждого текста должен быть свой смысл и для таких случаев есть свои теги. В HTML есть целое семейство заголовочных тегов: от <h1> до <h6>. Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня. Буква «h» в названии тега — это первая буква английского «heading». Структурированный текст удобней для чтения, а значит – ценнее для читателя. Правильно составленные заголовки и подзаголовки должны отвечать нескольким условиям:
HTML-ում տեքստ ավելացնելու բազմաթիվ եղանակներ կան: Բայց յուրաքանչյուր տեքստ պետք է ունենա իր իմաստը, իսկ նման դեպքերի համար կան թեգեր։ HTML-ն ունի վերնագրերի թեգերի մի ամբողջ ընտանիք՝ <h1>-ից մինչև <h6>. <h1> թեգը նշանակում է ամենակարևոր վերնագիրը (վերին մակարդակի վերնագիր), իսկ <h6> թեգը նշանակում է ամենացածր մակարդակի ենթավերնագիրը։ Պիտակի անվանման «h» տառը անգլերեն «վերնագրի» առաջին տառն է։ Կառուցվածքային տեքստն ավելի հեշտ է ընթերցվում, հետևաբար՝ ավելի արժեքավոր ընթերցողի համար: Ճիշտ կազմված վերնագրերը և ենթավերնագրերը պետք է համապատասխանեն մի քանի պայմանների.
Одним из немаловажных тегов является <br> и <hr>. Тег <br> устанавливает перевод строки в тексте от английского "break" или "Перевод строки". Для написания поэмы или адреса, где нужно разделение на строки он полезен. Например, у нас есть текст который мы хотим разделить. Если мы напишем просто разделяя строки внутри редактора, то он будет эквивалентен простому однострочному.
Կարևոր թեգերից մեկը <br> և <hr>-ն է։ <br> թեգը սահմանում է տեքստի տողադարձ անգլերեն «break» կամ «line feed» բառից: Այն օգտակար է բանաստեղծություն կամ հասցե գրելու համար, որտեղ անհրաժեշտ է տողադարձ: Օրինակ, մենք ունենք տեքստ, որը ցանկանում ենք բաժանել: Եթե խմբագրի ներսում գրենք ուղղակի առանձնացնելով տողերը, ապա դա համարժեք կլինի պարզ մեկ տողի:
Это эквивалентно этому коду
Այն համարժեք է այս կոդի
Для того чтобы сделать разделение, добавьте в конец <br>.
Բաժանում կատարելու համար վերջում ավելացրեք <br>.
Тег <hr> помогает отделить независимые друг от друга блоки — например, подразделы в статье. Это блочный элемент, поэтому он встаёт в отдельном ряду, визуально разделяя информацию на странице. Просто ставьте <hr> в том месте, где нужно разделитель. Тег <hr> открывается как "horizontal rule" или "горизонтальная линия".
Тег <hr> թեգը օգնում է առանձնացնել միմյանցից անկախ բլոկներ, ինչպես օրինակ հոդվածի ենթաբաժինները: Դա բլոկի տարր է, ուստի այն նստում է իր շարքում՝ տեսողականորեն առանձնացնելով էջի տեղեկատվությունը: Պարզապես դրեք <hr> այնտեղ, որտեղ ցանկանում եք բաժանարարը: <hr> թեգը բացվում է որպես «հորիզոնական կանոն» կամ «հորիզոնական գիծ»:
Попробуйте воссоздать также как на картинке:
Փորձեք վերստեղծել ինչպես նկարում.
