В тази глава ще покажем някои основни примери за HTML.
Не се притеснявайте, ако използваме тагове, за които все още не сте научили.
HTML документи
Всички HTML документи трябва да започват с декларация за тип документ: <!DOCTYPE html>.
Самият HTML документ започва <html>и завършва с </html>.
Видимата част на HTML документа е между <body>и </body>.
Пример
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Декларацията <!DOCTYPE>
Декларацията <!DOCTYPE>представлява типа на документа и помага на браузърите да показват правилно уеб страниците.
Трябва да се появява само веднъж, в горната част на страницата (преди HTML тагове).
Декларацията <!DOCTYPE>не е чувствителна към малки и големи букви.
Декларацията <!DOCTYPE>за HTML5 е:
<!DOCTYPE html>
HTML заглавия
HTML заглавията се дефинират с етикетите <h1>„to“ <h6>.
<h1>определя най-важното заглавие. <h6>определя най-маловажното заглавие:
Пример
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML параграфи
HTML параграфите се дефинират с <p>етикета:
Пример
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML връзки
HTML връзките се дефинират с <a>етикета:
Пример
<a href="https://www.derhostingbg.com">This is a link</a>
Дестинацията на връзката е посочена в hrefатрибута.
Атрибутите се използват за предоставяне на допълнителна информация за HTML елементите.
Ще научите повече за атрибутите в следваща глава.
HTML изображения
HTML изображенията се дефинират с <img>тага.
Изходният файл ( src), алтернативният текст ( alt), widthи heightса предоставени като атрибути:
Пример
<img src="DHBG.jpg" alt="derhostingbg.com" width="104" height="142">
Как да видите HTML кода
Виждали ли сте някога уеб страница и сте се чудили „Хей! Как са направили това?“
Вижте HTML изходния код:
Щракнете върху CTRL + U в HTML страница или щракнете с десния бутон върху страницата и изберете „Преглед на изходния код на страницата“. Това ще отвори нов раздел, съдържащ изходния HTML код на страницата.
Проверка на HTML елемент:
Щракнете с десния бутон върху елемент (или празно място) и изберете „Инспекция“, за да видите от какво са съставени елементите (ще видите както HTML, така и CSS). Можете също да редактирате HTML или CSS в движение в панела „Елементи“ или „Стилове“, който се отваря.