Компютърни уроци

Основи на html за начинаещи на разбираем език. Какво е HTML? Концепцията за етикет Какво означава това в html?

За да разберете какво е HTML и защо е необходим, нека отворим всяка страница в браузъра и да разгледаме нейния изходен код.

Например ще отворя страницата на търсачката Yandex.

Всички графики и текст, които виждате на страницата, се генерират с помощта на HTML код.

HTML– това е връзката между уеб страницата и допълнителните технологии, които ще бъдат използвани на нея.

По същество всички HTML команди, които виждате на изображението по-горе, са обикновен текст, който може да бъде написан във всеки текстов редактор. Променяйки разширението на текстовия файл на *.html (ще говорим как да направим това по-късно), получаваме пълноценна уеб страница, която браузърът може да обработва.

Сега нека да разгледаме самото определение и да помислим какво означава то.

HTMLе съкращение, което означава HyperText Markup Language или преведено на руски като „Език за маркиране на хипертекст“.

За да разберем какво означава всичко това, нека разгледаме всяка дума в това съкращение поотделно.

език.

HTML е преди всичко, езикс които можете да кажете на браузъра информация за това какви елементи има на уеб страницата и какво значение носят.

Като всеки език, HTML има думи (команди) и правила за писане на тези думи (синтаксис на езика).

Маркиране.

Моля, обърнете внимание, че основната задача на HTML е да информира браузъра за значението, което носят елементите на уеб страницата.

HTML кодът ви позволява да „разбиете“ уеб страница на отделни елементи и да кажете на браузъра кой елемент какъв е.

Например този формуляр за запис:

Казва на браузъра, че работи с параграф.

А това е формата за запис:

Заглавие

Показва, че елементът е заглавие.

От това следва, че HTML не носи отговорност за външния вид и дизайна на документа.

За да видите това, нека вземем една уеб страница като пример и деактивираме стиловете в нея, които отговарят за дизайна, и да видим как се променя.

Страница със стилове на дизайн:

Същата страница, но с деактивирани стилове (използван е само един HTML код):

Освен това HTML не е език за програмиране и не носи отговорност за извършването на логически и програмни операции на страницата и обработката на данни. Можете лесно да проверите това, ако деактивирате поддръжката на клиентски език за уеб програмиране във вашия браузър.

Често начинаещите забравят това правило и се опитват да използват HTML, за да накарат даден елемент да се покаже по един или друг начин или да го принудят да извърши някои действия на страницата с помощта на HTML, но това не е правилно. Всяко действие върху елемент има свои собствени технологии.

Хипер текст.

И накрая, последната дума в дефиницията на езика HTML е хипервръзката. В уеб страниците има елемент, който прави тези страници специални и ги отличава от обикновен текст с картинки. Този елемент са връзки.

Префиксът „хипер“ означава, че когато щракнете върху връзка, може да се отвори друг ресурс (страница) в Интернет, който може да се намира на друг сървър.

HTML е език, който е разработен специално за създаване на страници, които съдържат хипервръзки.

За да обобщим, можем да кажем, че HTML е език, който е създаден, за да помогне на браузъра да разбере от какви части се състои една уеб страница и какво значение носят тези елементи.

Това е всичко с теорията за сега. Да преминем към следващата практическа стъпка. Сега нашата задача е да подготвим програмите, които ще използваме за работа с HTML.

И се превежда като „език за маркиране на хипертекст“. Хипертекстът е специален метод за навигация в Интернет страници, реализиран под формата на хипертекстови връзки. Като щракнете върху тези връзки, можете лесно да навигирате в структурата на сайта. Преходите в този случай не се случват линейно, т.е. винаги имате възможност да отидете на всяка страница от сайта, връзката към която е видима в момента.

Маркирането се отнася до определени правила и свойства, които са присвоени на елементите на страницата. Те се изпълняват под формата на така наречените тагове. Например, за да посочите, че определен текст на страница трябва да бъде центриран, можете да го маркирате с централния таг. Можете да видите HTML кода на конкретна страница чрез нейното контекстно меню. Например, за достъп до този код в браузъра Firefox, трябва да щракнете с десния бутон върху страницата и да изберете „Изходен код на страницата“.

Как работи HTML кодът?

HTML кодът е набор от кратки тагове, съдържащи елементи на страницата. Целият този код се съхранява във файл с разширение .html или .htm. Когато отворите такъв файл в браузър, кодът се интерпретира от него и готовата страница се показва в прозореца на програмата. Познавайки езика за маркиране на HTML, почти всеки може да създаде своя собствена страница.

Какви са видовете етикети?

Таговете са отделни конструкции в HTML кода. Това е обикновен текст, ограден в ъглови скоби "". Можете да видите тагове в HTML кода на почти всяка страница. Самите тагове не се показват на страниците; те показват конкретен елемент, който е кодиран с помощта на тагове. Например, ако на страницата има снимка, тогава нейният HTML код съдържа img тага.

HTML ограничения

Въпреки факта, че HTML кодът ви позволява да създадете сравнително висококачествена хипертекстова страница, той има своите ограничения. Страниците, съдържащи изключително такъв код, са статични, т.е. им липсва динамика, специални ефекти и други функции. Но те могат да бъдат въведени с помощта на други езици, като Java Script. По-голямата част от съвременните уебсайтове са създадени с помощта на допълнителни езици, които ги правят по-живи и интерактивни.

Здравейте скъпи начинаещи уебмастъри. Нека започнем да учим езици за програмиране.

И ще започнем да ги изучаваме с html.

Веднага ще кажа, че в края на курса ще можете сами да напишете уебсайт в чист html и да го публикувате в Интернет. Но все пак препоръчвам да отделите време и след html да се запознаете с css.

След това ще направите сайта по-готин и ще можете да коригирате външния вид на сайта, създаден на готова CMS (система за управление на съдържанието).

Да научиш език за програмиране и да научиш чужд език не е едно и също нещо и е много по-лесно. Освен това не е страшно, а много вълнуващо.

Просто неразбираемото винаги те плаши, но аз ти обещавам, че след първите уроци всички страхове ще преминат.

Ще се научим да използваме редактора, който трябва да инсталирате на вашия компютър.

В този файлов редактор можете да пишете код и веднага да видите как браузърът го показва. Много удобно.

Хайде, първо ще ви разкажа малко за това какво е HTML и това ще бъде скучната част от нашия курс, а след това ще преминем към най-интересната практика. Там със сигурност няма да е скучно.

HTML (HyperText Markup Language) буквално означава език за маркиране на хипертекст. Използва се за създаване на уеб страници.

И ако, според нашето разбиране, колекция от просто страници, обединени от една тема, е книга или дори, по-добре казано, дебело списание, тогава колекция от уеб страници, обединени от едно име на домейн, е уебсайт.

Всяка уеб страница има свой уникален текст, написан от вас и ограден в html код.

Кодът е инструкции към браузъра как да покаже определен елемент. Да приемем, че сте написали дума, но под каква форма ще се появи на екрана зависи от това в какъв код я оградите.

html кодът се състои от следните елементи:

2. Атрибути на етикета.

3. Стойности на атрибути.

Нека ги разгледаме по ред.

HTML тагът е основният елемент на кода. Написано е така:

Както можете да видите, той се състои от две части. Първите ъглови скоби са отварящата част, а вторите, с наклонена черта, са затварящата част.

Между тези две части се записва останалата част от кода на страницата, която ще се показва на екрана.

Етикет казва на браузъра, че това е HTML документ и е основният (родителски) таг за всички останали елементи.

В останалите тагове, кодови елементи, буква или дума е написана в ъглови скоби, което ще бъде името на тага и ще определи кой елемент ще бъде показан на екрана от този таг.

Например, ако поставите буквата h1 в ъглови скоби, текстът ще се покаже на екрана като заглавие.

Здравейте

Това означава, че шрифтът на думата „Здравей“ ще бъде по-голям и по-удебелен от останалата част от текста.

Ако поставите буквата p в ъглови скоби, тогава текстът, ограден в етикета, ще се покаже като абзац.

Здравейте

Тоест шрифтът ще е нормален, но всичко написано след този таг ще започва на нов ред.

В html има няколко десетки такива букви и дори думи, които определят вида на командата, въпреки че често се използват не повече от 10-15 тагове.

Ще разгледаме всеки от тях по-подробно по пътя.

Следват атрибути на тагове. Често използвани, също не повече от дузина. А напоследък още по-малко, тъй като всички атрибутни функции бяха преместени в css.

Но повече за това по-късно, но засега все още ще разберем какво е атрибут, тъй като някои от тях не са загубили своята релевантност и никога няма да загубят.

Атрибутът е допълнителна команда. Пише се в отварящата част на тага. Например, ако искате да направите заглавието оцветено, тогава трябва да вмъкнете атрибута цвят в отварящата част на тага h1

И да преминем направо към стойностите на атрибутите. Въпросът е, че атрибутът трябва да има стойност. Тоест, ако сте дали командата заглавието да бъде оцветено, тогава трябва да посочите какъв цвят ще бъде.

Тази индикация ще бъде стойността на атрибута. Изглежда така:

Това е червено.

По същия начин, но с други атрибути, можете да зададете размера на текста, отстъпите, подравняването и много други.

Въпреки това, дизайнът все повече преминава към CSS и атрибутите на дизайна постепенно стават остарели и излизат от практиката.

И сега правим заключение от всичко по-горе:

HTML е език, който браузърите разбират. Той ни е нужен, за да комуникираме с браузъра или, може да се каже, да го контролираме, тоест да му даваме команди как да възприема и показва на екрана написаното от нас.

Бих искал да добавя, че етикетите, атрибутите и техните значения са лесни за запомняне по време на практически упражнения, което по същество ще бъдат всички следващи статии.

Там веднага виждате етикета, разбирате значението му, в какъв случай и на какво място се използва, с какви знаци е придружен и как се пише, така че сега няма да ви покажа всички тагове и атрибути, ще видим всичко на практика.

Ако някой се интересува, винаги може да погледне пълния списък с html тагове и атрибути. .

Въпреки че, ако няма да програмирате професионално, ще бъде достатъчно да знаете няколко (около дузина) основни тагове и няколко атрибута.

Е, това е всичко, предполагам. Малцина? И засега няма нужда от повече. Останалото ще научим по време на учебния процес, използвайки конкретни примери.

Мисля, че ще се разбере по-добре с примери. Нашата цел е да направим уебсайт и да разберем как работи всичко, така че продължете и практикувайте.

Завъртете

Щом седнеш да учиш, непременно някой мръсник ще те събуди!!!

В училище учителят казва на учениците:
- Кой от вас в крайна сметка се смята за глупав? Стани.
След дълга пауза един ученик се изправя:
- Значи мислиш, че си глупав?
- Е, не точно, но някак си е неудобно да стоиш сам.

Какво е HTML и за какво служи? - 3.7 от 5 на базата на 3 гласа

Преди да започнете да изучавате, предлагам да разгледаме какво е html и за какво е предназначен.

HTML означава Hyper Text Markup Language, което може да се преведе като език за маркиране на хипертекст. Интернет страниците се създават с помощта на този език.

HTML не е език за програмиране. Предназначен е за маркиране на текстови документи. Тоест, като цяло, ние го използваме за форматиране на текста.

И така, как можем да редактираме текст с помощта на HTML? Факт е, че езикът HTML се състои от тагове. Всеки таг определя как ще изглежда текстът на вашата страница.

Казано по друг начин, всеки таг дава определена команда на вашия браузър (програмата, с която разглеждате интернет страниците), браузърът разбира тази команда и извежда готов текст, форматиран по определен начин на вашия екран.

Следователно не виждате самия код; браузърът показва готов форматиран текст и графики на екрана на вашия монитор. Ако искате да видите самия html код и таговете, с които е форматиран текстът, който четете в момента, отидете на елемента от менюто > преглед във вашия браузър Internet Explorer и изберете > източник от падащия списък. Погледни снимката.

В резултат на това ще се отвори прозорец, съдържащ кода. Подобен на този, който можете да видите на втората снимка. Можете да превъртите и да разгледате този код, той се състои основно от тагове, които в повечето случаи имат текст вътре. Така, без да навлизаме в подробности, можем да кажем, че всеки таг определя къде, как, какъв шрифт, какъв цвят ще изглежда вашият текст.

Но всъщност HTML таговете могат да правят повече от просто форматиране на текст; с тях можете да вмъкнете изображение в страница, да създадете таблици, да създадете връзки и много повече.

Всеки таг изпълнява свои специфични функции и за да научите как да създавате уеб страници, трябва да знаете за какво е предназначен този или онзи таг. Мисля, че сега разбирате малко какво е html.

Първо, нека да разгледаме какво е етикет. Казано много просто, етикетите се състоят от обикновени английски знаци или думи, само тези букви и думи са проектирани по определен начин.

Всеки таг се състои от ъглови скоби,< >вътре в които са поставени определени символи. Повечето от тях се състоят от отваряне и затваряне.

Например етикет - отваряне и- затваряне. Както можете да видите, те се различават по наличието на наклонена черта / в затварящия символ. Ако поставите някаква дума между тях, напр. Здравейтетогава ще се покаже с удебелен шрифт. Всичко, което е затворено в ъглови скоби в този случай не се показва на екрана, а е вид команда за браузъра, че думата, която е затворена между тези тагове, трябва да бъде показана с удебелен шрифт.

Естествено има много тагове и всеки от тях изпълнява свои специфични функции. Всички останали тагове и целият HTML като цяло работят приблизително на същия принцип. Когато поискате какъвто и да е документ от интернет, вашият браузър изтегля html кода, интерпретира го правилно и извежда на екрана ви готов форматиран текст, графики, таблици и др.

Целта на този урок беше да ви даде представа какво е HTML; в следващите уроци ще започнем да изучаваме този език за маркиране. За да улесните усвояването на материала, препоръчвам да започнете да изучавате уроците с най-простите, като плавно преминете към по-сложни, например в следната последователност: в началото проучете как се използва документ за настройка и произвеждат, научат как да настройват и т.н. до по-сложни.

За да създавате HTML страници, можете да използвате специални програми, като например, или можете да създавате страници с помощта на обикновен текстов редактор, който е наличен във всяка версия на Windows.

Със сигурност всеки безработен интернет потребител се е сблъсквал със ситуация, в която, когато отворите красив уебсайт, си мислите какво би се случило, ако създадете такъв уебсайт, защото наличието на добър уебсайт ще ви донесе пари и може би дори слава. Имате желание и желание за това, веднага въвеждате в търсачката „Как да създадем уебсайт?“ Почти навсякъде ще ви кажат, че за да създадете добър уебсайт, трябва да научите HTML. Ако сте нов в този бизнес, тогава вероятно ще искате да знаете какво е това.

Ще ви обясня накратко какво е HTML с мои собствени, по-разбираеми думи, отколкото в Уикипедия.

HTML е основният език за уеб програмиране, основата на всички основи на изграждането на уебсайтове. Почти всички уебсайтове са написани на този език. Размерът на текста в сайта, размерът и местоположението на изображението, фонът на сайта и др. всичко това е написано на този език. HTML е това, с което се раждат уебсайтовете, което означава, че е родният език на почти всички уеб страници. Например, ако сте китаец, тогава говорите китайски, ако сте украинец, тогава говорите украински, но ако сте уебсайт, тогава говорите HTML. Всеки добър уеб програмист знае HTML почти наизуст и се справя добре с него.
Този език е разбираем и лесен за научаване, но като всички езици на този свят, за да го говорите добре, той изисква практика. Тоест, дори да го научите напълно, няма да можете да направите добър уебсайт веднага, трябва ви време, търпение и практика. Обикновено начинаещите в началото на пътя си като уеб програмист просто нямат търпението да научат всичко и да го практикуват стъпка по стъпка. Тези, които преминаха теста, научиха всичко, натрупаха опит в практиката си, докато учат езика и не се отказаха - очаква добра награда.
Има няколко езика за уеб програмиране. За да създадете прост уебсайт, имате нужда само от един език, основният, а именно HTML. За да създадете сложен и голям уебсайт, ще ви трябват спомагателни езици, така да се каже, ще научите за тях още по време или след изучаване на езика HTML. Ако решите да започнете пътя на уеб програмист, можете да започнете да изучавате HTML още сега. Запомнете най-важното - ако го вземете, не се отказвайте и не се отказвайте, тъй като това съсипва повечето програмисти.

HTML декодиране

Тези четири букви от HTML означават няколко думи, а именно език за маркиране на хипертекст, който на руски звучи като език за маркиране на хипертекст.

Защо е необходим HTML?

Защо е необходим този език? Защо да го уча? Защо не някой друг? Или защо дори да го научите, ако има куп други програми за лесно създаване на уебсайт?

Както казах, HTML е основният език за уеб програмиране. Това не е единственият език, който се използва за създаване на уебсайтове, но е основният инструмент, който ръководи другите езици, така че е наложително да го научите. Дори ако използвате програма за създаване на уебсайтове или готови шаблони, HTML ще направи живота ви много по-лесен. Освен това, ако искате да създадете добър, голям и професионален уебсайт в бъдеще, програмите и шаблоните няма да ви помогнат, всичко ще започне от нулата и познанията ви по този език ще ви помогнат в това.

Как се използва HTML

Използването на този език е много лесно и е достъпно за всеки. Може дори да се използва в обикновен бележник (.txt). За по-удобно използване има специални програми, например Notepad++. Повече подробности за използването на този език ще бъдат описани в уроците по HTML.

Как да научите HTML

За да научите езика HTML, трябва да имате много търпение, за да се чувствате удобно с този език. Лесно се учи, но основното е да трупаш опит, да практикуваш, колкото повече практика имаш, толкова по-добър уеб програмист си.