Основни тагове в HTML
Точно както можете да присвоите различни роли на различни типове текст в книга или списание, така и HTML включва редица различни елементи за идентифициране на ролите на текстовото съдържание като заглавия, параграфи, списъци и други.
Заглавия (h1-h6)
Заглавията се използват като заглавия на секции в HTML документ. Като цяло, те трябва да описват следващото съдържание. Има шест нива на заглавия (<h1> - <h6>) и те могат да се използват йерархично за създаване на подраздели на множество нива в рамките на съдържанието. Заглавията са блокови елементи (block-level) по подразбиране. [1]
Важно е да избирате заглавия въз основа на тяхното значение в йерархията на документа, а не на размера на шрифта. Размерът на шрифта може да се променя с CSS.
Като цяло, трябва да има само един <h1> на страница и той служи като заглавие на страницата. Но никой не може да ви спре да сложите 10 <h1> заглавия на страница 🙃.
Code
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
Preview
Важно е да запомните, че въпреки че заглавията имат стилове по подразбиране, те не трябва да се избират въз основа на външния вид. (Това е задачата на CSS.) Вместо това, те обозначават нивото на важност на текста като заглавие или подзаглавие.
Абзац и малък текст
Абзац (p)
Абзаците/Параграфите се използват за блокове от текст (точно както в писането). Абзаците са блокови елементи (block-level) по подразбиране.
Code
<p>Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.</p>
Preview
Малък текст (small)
<small> представлява текст, който е по-маловажен, страничен коментар, авторски права или правна информация. Той е вграден елемент (inline-level).
Code
<small>Distributed under a Creative Commons License.</small>
Preview
Удебелен и акцентиращ елементи
Удебелен (strong)
<strong> е вграден елемент (inline-level), използван за добавяне на важност към текста. По подразбиране и най-често той прави текста удебелен.
Code
<p>Far out in the <strong>uncharted</strong> backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.</p>
Preview
Акцентираne (em - emphasis)
<em> е вграден елемент (inline-level), който добавя акцент към текста. По подразбиране и най-често той прави текста курсив.
Code
<p>Far out in the <em>uncharted</em> backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.</p>
Preview
Списъци
Съществуват два вида основни списъци – неподредени списъци (unordered list) и подредени списъци (ordered list). По подразбиране и двата са блокови елементи. Има и още един вид списъци - списък с описания (description list)
Елементът <li> представлява елемент от списък. Ако родителският му елемент е елемент <ol> или <ul>, тогава елементът е елемент от списъка на родителския елемент, както е дефинирано за тези елементи.
Списъците могат да бъдат вложени в списъци, за да се създаде йерархия от подсписъци.
Неподредени списъци (ul)
Елементът <ul> представлява списък с елементи, където редът на елементите не е важен — тоест, където промяната на реда не би променила съществено значението на списъка. По подразбиране елементите от списъка в неподредени списъци се обозначават със символа за водещ символ.
Code
<ul>
<li>Bananas</li>
<li>Apples
<ul>
<li>Granny Smith</li>
<li>Braeburn</li>
</ul>
</li>
<li>Oranges</li>
</ul>
Preview
Подредени списъци (ol)
Елементът <ol> представлява списък с елементи, като елементите са умишлено подредени така, че промяната на реда би променила значението на списъка.
Code
<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ol>
</li>
<li>Item 3</li>
</ol>
Preview
Списък с описания (dl)
Eлементът <dl> представлява списък с описания. Елементът обхваща списък от групи термини (зададени с помощта на елемента <dt>) и описания (предоставени от елементите <dd>). Често срещани приложения на този елемент са за имплементиране на речник или за показване на метаданни (списък с двойки ключ-стойност). [2]
Code
<dl>
<dt style="font-weight:bold;">Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt style="font-weight:bold;">Morgawr</dt>
<dd>A sea serpent.</dd>
<dt style="font-weight:bold;">Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
Preview
Прекъсващи (break) елементи
Макар самите те да не са текст, тези самозатварящи се елементи показват прекъсвания в потока на текст или информация. Като такива, всеки от тях носи много специфично значение за съдържанието, в което е поставен.
Важно е тези елементи да се използват само когато придават реално значение на документа. Те не са предназначени за декоративни или стилистични цели.
Хоризонтален ред (hr)
Елементът <hr> е разделител, който представлява тематично прекъсване на ниво абзац. Тагът <hr> е самозатварящ се и не изисква отделен затварящ таг.
Тагът <hr> не трябва да се използва на места, където искате линия между съдържанието (за това трябва да приложите рамка с CSS). По-скоро е важно да се използва само там, където има промяна на темите между елементите на текста.
Code
<p>A first paragraph with a different theme from the second.</p>
<hr>
<p>A second paragraph thematically different from the first.</p>
Preview
Break (br)
Елементът <br> представлява връщане или прекъсване на нов ред, което е неразделна част от текстовото съдържание. Тагът <br> е самозатварящ се и не изисква отделен затварящ етикет.
Тагът <br> не трябва да се използва като общ знак за прекъсване на реда, а само в съдържание като поезия или пощенски адреси, където разделянето на редовете може да се счита за част от текстовото послание.
Code
<p>You didn't know<br>
what was in the heap. A visitor found<br>
it to contain beggars. They sell the hollow<br>
of their hands..</p>
Preview
Използване на цветове
Цветният уебсайт е по-привлекателен от черно-бял уебсайт. Подобно на други HTML тагове, няма специален таг за прилагане на цветове в HTML документи. Въпреки това, използвайки атрибута style, можете да направите определен елемент цветен и привлекателен. Ще обсъдим и методите за цветово кодиране, които ще ви помогнат да приложите един и същ цвят, използвайки различни методи. [3]
Има две основни свойства в атрибута style, които задават цвета на текста и фона на блока:
- Цвят (color) - Използва се за задаване на цвета на основния текст.
- Цвят на фона (background-color) - Използва се за задаване на цвета на фона на уебстраницата, конкретен блок или елемент.
Code
<h1 style="color:green">
Hello! Welcome to GFG
</h1>
<h2 style="color:indigo">
Hello! Welcome to GFG
</h2>
<h3 style="background-color:yellow">
Hello! Welcome to GFG
</h3>
<h3 style="background-color:blue; color:white">
Hello! Welcome to GFG
</h3>
Preview
Цветово кодиране
В езика HTML съществуват няколко различни метода за цветово кодиране. Шестнадесетичната (Hexadecimal) нотация и RGB нотация са най-популярните методи. Някои разработчици обаче използват и нотация с имена на цветове, и HSL нотация.
Име на цвят
Използваме името на цвета, за да зададем цвета на текст, връзка или фон. Тук ще намерите [140 цвята с техните имена].
Code
<p style="color:blueviolet">Blue Violet</p>
<p style="color:cyan">Cyan</p>
<p style="color:gray">Gray</p>
<p style="color:indigo">Indigo</p>
Preview
Hexadecimal
Вместо да пишем имена на цветове, ще пишем шестнадесетичните кодове, за да зададем конкретния цвят. За всеки цвят има уникален шестнадесетичен код. Шестнадесетичният код е низ от 6 знака, последван от знака #. Той включва стойности от 0 до 9 и от A до Z.
Code
<p style="color:#4B0082">Indigo</p>
Preview
RGB
RGB е съкращение от червено, зелено и синьо (red, green, blue). Приема три целочислени стойности между 0 и 255 за всеки един от трите цвята. Чрез промяна на стойностите на трите входа можете да получите новите цветове, от които се нуждаете.
Code
<p style="color:rgb(75, 0, 130)">Indigo</p>
Preview
HSL
HSL рядко се използва от HTML разработчиците. HSL идва от Hue (Нюанс), Saturation (Наситеност) и Lightness (Яркост). За нюанса трябва да зададем стойност в градуси между 0 и 360. За наситеността и яркостта трябва да зададем стойности в проценти между 0% и 100%.
Code
<p style="color:hsl(275, 100%, 25%)">Indigo</p>
Preview
Прилагане на цветове
Най-предпочитаният метод за задаване на цвят в HTML документа е използването на стилов лист (stylesheet). Ако е необходимо, можем да използваме вграден CSS (inline) или вътрешен CSS (internal). Ще разгледаме всеки метод един по един.
Inline CSS
Както подсказва името, трябва да добавим атрибут style във всеки HTML таг. Вътре в атрибута style можем да добавим свойства на цвят и техните стойности.
Code
<h1 style="color:green"> Welcome to GFG </h1>
Preview
Internal CSS
Трябва да добавим свойства на цвета в HTML документа, но не и в HTML тага. Използваме тага <style>, който се прилага в <head>
Code
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1> Hello </h1>
</body>
Preview
External CSS
Този метод е същият като Internal CSS, но трябва да добавим CSS във външния файл.
styles.css
h1 {
color: green;
}
index.html
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello</p>
</body>
Разработчиците могат да създават цветни уебсайтове, използвайки различни методи за цветово кодиране. Препоръчваме използването на името на цвета и шестнадесетичната нотация, тъй като някои браузъри не поддържат RGB и HSL нотация. За да изберете шестнадесетичен код или RGB стойност, можете да използвате инструмент за избор на цвят, който можете да намерите в интернет.
Инструменти за работа с цветове
Връзки
Връзките/Линковете (известни също като хипервръзки) са наистина важни – те са това, което прави мрежата мрежа. [4]
Какво е хипервръзка (hyperlink)
Хипервръзките в един HTML документ карат браузъра да навигира към други документи или ресурси, понякога към специфични части от документи. Хипервръзките са едно от най-вълнуващите нововъведения, които мрежата може да предложи. Те са функция на мрежата от самото начало и са това, което прави мрежата мрежа. Всеки ресурс в мрежата има адрес, известен като URL (Uniform Resource Locator), към който сочат хипервръзките.
URL адресът може да сочи към HTML файлове, текстови файлове, изображения, текстови документи, видео и аудио файлове или каквото и да е друго, което се намира в мрежата. Ако уеб браузърът не знае как да покаже или обработи файла, той ще ви попита дали искате да го отворите (чрез вградено приложение на устройството) или да го изтеглите.
От какво се състои връзката?
Връзка се създава чрез обвиване на текста или друго съдържание в елемент <a> и използване на атрибута href, известен още като хипертекстова препратка (Hypertext Reference) или цел (target), който съдържа уеб адреса.
Code
<p>
I'm creating a link to
<a href="https://www.mozilla.org/en-US/" target="_blank">the Mozilla homepage</a>.
</p>
Preview
- href - Линкът, към който браузърът трябва да навигира.
- target - Определя къде да се отвори линкът.
- _self - Отваря в същия таб (по подразбиране);
- _blank - Отваря в нов таб;
- _parent - Отваря в родителския frame;
- _top - Отваря в най‑външния frame;
Блокови връзки
Почти всяко съдържание може да се превърне във връзка, дори блокови елементи. Ако искате да направите заглавен елемент връзка, тогава го обвийте в anchor (<a>).
Code
<a href="https://developer.mozilla.org/en-US/" target="_blank">
<h1>MDN Web Docs</h1>
</a>
<p>
Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p>
Preview
Снимки
За да превърнете изображение във връзка, обвийте елемента <img> с елемент <a>.
Code
<a href="https://en.wikipedia.org/wiki/Byakuya_Kuchiki" target="_blank">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.pfps.gg%2Fpfps%2F5623-byakuya-kuchiki-profile-image.png&f=1&nofb=1&ipt=fd454609238295ce7e8346a8b05ba0ed965983452eb9c5b02ec731e2b2eecd3e" alt="Byakuya Kuchiki" width="150"/>
</a>
Preview
Добавяне на поддържаща информация
Може също да искате да добавите атрибут title към връзките си. Заглавието съдържа допълнителна информация за връзката като например какъв вид информация съдържа страницата или неща, които трябва да се имат предвид на уебсайта.
Code
<p>
I'm creating a link to
<a
href="https://www.mozilla.org/en-US/"
title="The best place to find more information about Mozilla's mission and how to contribute">
the Mozilla homepage</a>.
</p>
Preview
Използване на пълни URL адреси
Можете да посочите пълен URL адрес като път, който винаги ще сочи към едно и също място в мрежата, независимо къде се използва. Например:
<a href="https://www.example.com/projects/">projects</a>
Тази връзка винаги ще води към https://www.example.com/projects/, дори ако сайтът ви бъде преместен в друг домейн.
Вътрешни и външни връзки
Когато връзка сочи към ресурс на вашия сайт, тя се нарича вътрешна връзка (internal). Когато връзката сочи към ресурс на друг сайт, тя се нарича външна връзка (external). Когато посочвате външна връзка, винаги трябва да включвате пълния URL адрес като път.
Не можете да посочите местоположение на различен сайт с път като /pdfs/project-brief.pdf или projects/index.html, тъй като и двата са относителни спрямо местоположение на вашия собствен сайт и браузърът се нуждае от името на домейна на уебсайта, за да може да го намери.
Когато задавате вътрешна връзка, можете да използвате относителен или абсолютен път или пълен URL адрес. В нашия пример тези връзки са еквивалентни:
<a href="https://www.example.com/projects/">projects</a>
<a href="projects">projects</a>
Препоръчваме последното без пълното име на домейна, поради преизползване. Ако посочите https://www.example.com/projects/, той винаги ще препраща към https://www.example.com/projects/. Ако след това преместите уебсайта си в друг домейн, например another-example.com, пълните ви URL адреси ще трябва да бъдат променени. Ако посочите пътища като /projects, те пак ще работят, тъй като все още са относителни спрямо структурата на директориите.
Фрагменти от документи
Възможно е да се направи връзка към определена част от HTML документ, известна като фрагмент от документ (document fragment), а не само към началото на документа. Елементите с атрибут id в документа автоматично създават фрагмент от документ, към който може да се направи връзка.
Най-типичният случай на употреба е свързване към конкретно заглавие, което изглежда така:
<h2 id="mailing_address">Mailing address</h2>
За да се свържете с това конкретно id, го включете в края на пътя, предшестван от символа (#), например:
<p>
Want to write us a letter? Use our
<a href="contacts.html#mailing_address">mailing address</a>.
</p>
Можете дори да използвате препратката към фрагмента от документа самостоятелно, за да се свържете с друга част от текущия документ:
<p>
The <a href="#mailing_address">company mailing address</a> can be found at the
bottom of this page.
</p>