Човек не може да живее само с думи
в каквото и количество да ги погълне.
Адлай Стивънсън.

Всъщност HTML не е език за програмиране. Това е език за маркиране на хипертекст. Тоест не е правилно да го наричаме "HTML език".

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

Те показват само форматиран текст и се скриват HTML таговекоито са били използвани за форматиране. За да ви стане по-ясно за какво говоря, щракнете с десния бутон върху тази страница и в менюто, което се отваря, изберете елемента "Изходен код" или нещо подобно. Тази страница ще се отвори пред вас в сегашния си вид.

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

Силно препоръчвам да въвеждате целия код на ръка (за да подобрите правотата на самите тези ръце), визуалните редактори правят този процес много по-лесен. Лично аз ползвам. Това далеч не е най-новата версия, но възможностите й са ми достатъчни в изобилие.

Правя това: въвеждам кода в Dreamweaver, след което записвам и щраквам върху бутона Преглед в браузъра (сами редактирате списъка с браузъри в това меню), след което се връщате към Dreamweaver и продължавате да редактирате. Тук . Това е, когато става дума за инструменти, сега нека преминем директно към HTML тагове.

Нека започнем със структурата на html страницата или по-скоро с нейните основни тагове.

Задължителни HTML тагове на страницата

Задължителните (основни) HTML тагове, които се използват във всеки html документ, включват следното:

Забележка. За да може браузърът да покаже HTML кода като текст (а не да го интерпретира в код), след всяка отваряща ъглова скоба " »Оставям празно. Вие, когато наберете кода, интервали НЕ СИ ТРЪГВАЙ.

Както виждаш, всички тагове са сдвоени(има отварящ и затварящ таг), в HTML почти всички тагове са такива. Началният маркер се различава от затварящия маркер по това, че затварящият маркер се предхожда от наклонена черта " / ". Такива тагове също се наричат контейнер, тъй като между тях могат да се вмъкнат други тагове, т.е. сложете в контейнер. Вие сами можете да видите, че между етикетите и има други тагове.

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

И така, основните тагове показват на браузъри и други програми за преглед на хипертекстови страници, че работят с хипертекст документ. Всеки html документ трябва да започва с и да завършва с. Тоест между тези тагове има ВСИЧКО html код на страницата.

Между таговете и има мета тагове (заглавие на страница, описание, ключови думи и т.н.). Те съхраняват информация за html страницата и техническа информация. По принцип този маркер е незадължителен, тоест без него html документът обикновено ще се показва от браузърите. Но дори и да не планирате да използвате областта на заглавието, опростете я. Това е необходимо за съвместимост между различните версии на програмите.

Цялата информация между таговете "HEAD" не се показва от браузъра по никакъв начин (с изключение на информацията между етикетите, където се намира името на html-документа, показана в горния панел на браузъра). Но те могат да имат голямо влияние върху външния вид на една html страница, нейния онлайн живот и класиране. Ще говорим повече за таговете, които се намират в заглавката на хипертекстов документ по-късно.

Основното съдържание на html документа се намира между маркерите и. Всичко, което виждаме, когато отворим html страница, се намира тук: текст, графики, менюта, бутони и т.н. Това е основното "тяло" на страницата.

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

Тогава фонът на цялата страница ще бъде червен.

Тук етикет- това всъщност е етикет; bgcolor- свой атрибут; "# FF0000"- стойност на атрибута (един маркер може да има няколко атрибута).

Забележка. Всички атрибути на маркера и техните стойности са посочени в отварянеетикет (този, който безнаклонена черта), но в никакъв случай не заключващата.

И така, разбрахме основните тагове на html документа. Сега е моментът да разгледаме по-отблизо останалото. Тук искам да направя малко отклонение.

Как предлагам да научите HTML

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

T . Тоест, първо се разглеждат етикетите за заглавие на html документа (и след това етикетите body ().

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

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

Ето защо ви предлагам първо да разгледате таговете, свързани с "тялото" на html-документа (), и едва след това да преминете към останалото. Освен това "тялото" на html-страницата съдържа информация за кои посетители на сайта ще дойдат. А създаването или намирането на такъв е много по-трудно от писането на код.

Е, сега, без да се колебаете нито минута, натиснете бутона „Напред“ и продължете да научавате как тези небръснати и сънливи момчета създават уебсайтове.

Основните html тагове са основата, върху която се изгражда почти всеки уебсайт/блог. От тази статия ще разберете точно онези 20% тагове, които винаги ще ви трябват.

Както във всеки език, правилото на Парето 20/80 важи и тук (20% от случаите са 80% важни за постигане на желания резултат), което означава, че е достатъчно да знаете само 20% от кодовете, за да постигнете уверено своя цели в изграждането на сайтове.

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

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

Така че нека започваме. По-добре е да пишете кодове в бележник, който е включен в стандартните програми на операционната система Windows, или в безплатната програма "Notepad + +".

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

HTML тагове за създаване на скелетен сайт

Етикетите могат да бъдат сдвоени и несдвоени. Сдвоените отварят и затварят, тоест има обратна наклонена черта "/" в затварящите.

Първото нещо, което трябва да бъде във всеки html документ, когато създавате страница в блог, е:

• - кажете на браузъра, че всичко между тях е html код;
• - от английски. "Head", съдържа името, кодирането, мета таговете за търсачките;
• - мета таг, основно за търсачки, съдържа името на документа вътре, изведено в горната част на браузъра;
• - единичен таг, указващ езиковото кодиране на браузъра, където windows-1251 - показва, че текстът на тази страница е на руски (windows-1252 - за английски);
• - за ключовите думи на сайта;
• - резюме на страницата;
• ТЯЛО НА ДОКУМЕНТА
  
  - от английски. "Тяло" съдържа цялата страница на сайта.

Това бяха стандартни html тагове, с което, без промени, всички страници на сайта / блога трябва да започват в този вид:

Списък с html тагове, разположени в тялото на страницата

Между таговете

тялото на самата страница на сайта ще се намира, където:

• заглавие

  - най-важните 1 ниво;
• с

  субтитри

  На

  субтитри

  - подпозиции съответно от нива 2, 3, 4, 5 и 6;
• котвени връзки- връзка, където "target =" _ blank "" е атрибутът, отговорен за отваряне в нов прозорец, "title =" "е името на това, към което ще бъде връзката;
• и - получер етикети. "" са остарели и се препоръчва да се използват " »;
• - да се начертае курсив;
• - единичен таг, отговорен за вмъкване на изображение на страницата;
• - "p" от английски. „Параграф“, което означава, че разделя текста на параграфи. По подразбиране ляво подравнен;
• 
  - логически таг, който означава край на ред и преход към следващия;
• - текст за подравняване на атрибути в центъра;
• - атрибут за дясно подравняващ текст;
• —
• color = "green" е отговорен за цвета на текста. В този случай той е зелен. Вместо думата "зелен" обикновено се поставя код от шестнадесетична цветова система, например: "# 088f47";
• face = "verdana" - атрибут, указващ шрифта в текста;
• size = "3" - размер на шрифта;
• 1. първо
  2. второ
  3. трети
  - номериран списък;
• • дума
  • дума
  • дума
  - списък с водещи символи;

HTML тагове за създаване на таблица

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

• - маркерът, отговорен за създаването на таблица, където "1" е ширината на границата на таблицата, където "450" ​​е ширината на таблицата и вече знаете "център";
• - етикет, разположен вътре " »И създава ред в таблицата;
• - създава колона в ред, е вътре в таговете " ". "150", както може би се досещате, е ширината на колоната;

Напълно html етикети на таблицатаизглежда нещо като това:

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

Видео урок на тема - „Какво е HTML? Индексен html файл ":

Моля, споделете, ако ви хареса:

Може да се интересувате да научите повече:

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

Много се говори за промените, които донесе HTML 5. Всеки маркер, споменат в тази статия, се поддържа както в HTML 4.01, така и в HTML 5. Въпреки че някои от тези тагове са широко използвани, ще бъде много полезно да прегледате отново използваните методи .

1.

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

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

• Елемент от менюто 1
• Елемент от менюто 2

Това е основното съдържание.

2. Стилове на таблицата: , , и

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

Увиваме редовете на таблицата ... Така се формира заглавието на таблицата.

Чрез увиване на линиите в формираме обобщените редове в долната част на таблицата. Струни трябва да се дефинира преди редовете по този начин общите редове се показват преди останалите редове на таблицата.

Увиваме линиите за данни .

3.

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

Детройт Тайгърс Чикаго Къбс Детройт Лайънс Чикагски Беърс

Детройтски тигри Чикаго Къбс Детройтски лъвове Чикагските мечки

4. Заглавия -

,

,

,

,

, и

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

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

.

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

5.

и

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

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

.

Главна информация:

име: Електронна поща: Дата на раждане:

6.

етикет не засяга стила по никакъв начин. Това се отразява на функционалността на страницата.

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

име: мъж: Женски пол:

7.

Ако трябва да придадете драматичен ефект на някакъв израз, тогава можете да използвате

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

Пример за използване на етикета

Пример за използване на етикета

8.

Това не може да се каже отнася се до

но те обикновено се използват заедно.

Помислете за етикета когато трябва да цитирате някого.

Пример за използване на етикета

заедно с етикета ... Това изречение е затворено в етикет .

Пример за използване на маркера blockquote във връзка с маркера за цитиране. Това изречение е затворено в етикет .

9.

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

но колко често използвате
и

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

Типове списъци

1. Неподреден списък (ul)
2. Подреден списък (ол)
3. Списък с дефиниции (dl)

Какво правят

• Неподреден списък (ul): списък с точки
• Подреден списък (ол): номериран списък
• Списък с дефиниции (dl): Списък с дефиниции на елементи

Причини за използване на списъци

• Последователен стил на съдържание
• Просто създайте
• Те са универсални

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

и
но структурата на списъка с дефиниции изисква допълнително изясняване.

Елемент от списъка № 1

Определение за елемент от списъка № 1

Елемент от списъка № 2

Определение за елемент от списъка № 2

Вместо да дефинирате елемент от списък (

1. ), използваме два маркера:
   и
   .
   дефинира всеки елемент в списъка и
   описва точката по-горе. По-долу е списъкът според показания по-рано код на списъка с дефиниции.

   Елемент от списъка # 1 Дефиниция за елемент от списъка # 1 Елемент от списък # 2 Определение за елемент от списък # 2

   10. "(и други ASCII знаци)

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

   HTML езикът се основава на концепцията за "таг" (англ.: етикет-етикет, етикет). Етикетите са затворени в ъглови скоби (< >) и образуват двойки - контейнери (откриващ таг и затварящ етикет). Например контейнерът на HTML документ е двойка тагове и... Уеб страницата включва контейнери, които отговарят за заглавието на документа (глава) и съдържат допълнителна информация, както и контейнери, отговорни за съдържанието на документа (тялото). Те са показани на фигурата.

   Така че HTML документът е увит в контейнер , заглавка към контейнер и съдържанието на документа в контейнера
   
   ... Контейнер намиращ се в заглавката (контейнер ) съдържа текста, който се показва в горния ред на прозореца на браузъра. Към заглавния контейнер могат да се добавят и етикети, съдържащи кодирането, ключовите думи на уеб страницата, както и код за свързване на файлове от каскадни стилови таблици CSS, език за програмиране javascript, VBScript и др.

   Пример за проста HTML страница, съдържаща само основни тагове:

   Съдържание на най-простата страница

   Резултатът от работата на посочения код е показан на фигурата.

   

   Както можете да видите от примера, текстът "Съдържание на най-простата страница" се показва в обикновен текст. За да форматирате този текст, трябва да използвате специални тагове. Пример за използване на тагове за форматиране е показан на фигурата.

   

   За да промените шрифта, неговия цвят и размер, използвайте маркера с параметри „лице”, „цвят” и „размер”. Например, за да зададете шрифта „arial“ на червен и размер 14, трябва да напишете следния код:

   Форматиране на текста

   За да маркирате абзац в текста, използвайте маркера

   В чийто контейнер по правило се поставя всеки параграф от текст. Таговете се използват за създаване на заглавието

   ,

   ,

   ,

   ,

   ,

   .

   

   За формиране на списъци в тялото на документа се използват контейнери и. И етикетът

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

     

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

     Пример за използване на хипервръзки е показан на фигурата.

     

     Когато посочвате URL адреса на друга страница, трябва да посочите или пълния абсолютен път до страницата „пълен път / папка / страница“, или относителния (спрямо тази страница) „папка / страница“. Параметърът „target“ ви позволява да отворите уеб страница в нов или съществуващ прозорец на браузъра.

     За да вмъкнете изображение в уеб страница, използвайте маркера с параметри src (път на изображението), ширина (ширина на изображението), височина (височина на изображението), граница (граница около изображението). Примерен код за вмъкване на изображение:

     

     Често при създаване на уеб страници е необходимо да посочите цвят на фона или фоново изображение. За това се използват атрибутите на етикета „Bgcolor“ или „background-image“. Пример за поставяне на фонов цвят:

     Пример за вмъкване на фоново изображение:

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

     
     
     

     HTML тагове- основата на HTML езика. Таговете се използват за разграничаване на началото и края на елементите в маркирането.

     Всеки HTML документ се състои от дърво от HTML елементи и текст. Всеки HTML елемент се идентифицира с начален (откриващ) и краен (затварящ) маркер. Началният и крайният етикет съдържат името на маркера.

     Всички HTML елементи са от пет типа:

     • празни елементи — , ,
       , , ,

       ---

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