Кратък HTML наръчник

автор
Грациела Георгиева ·
Софтуерно инженерство
1

Основни тагове

<!DOCTYPE>

Този таг стои на първо място в html документа. Дори преди <html> тага. <!DOCTYPE> не е декларация на html таг, той е инструкция към уеб браузъра, показваща на коя версия на HTML е написана съответната html страница.

<html></html>

 Този таг създава html документ. Той е коренът на html документа и в него се съдържат всички други елементи. 

<head></head>

Между отварящия таг <head> и затварящия таг <head> стоят всички елементи като заглавие на документа <title>, скриптове <script>, стилове <style>, мета информация <meta>, линкове <link> и други.

<body></body>

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

2

Допълнителни към основните тагове

<meta>

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

<title></title>

Този таг се изисква за всеки html документ. Той дефинира заглавието/името на документа в toolbar-а на браузъра, дава име на страницата, когато тя бъде добавена в любими; показва името на страницата при търсене.

<link>

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

<style></style>

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

3

Тагове за структуриране на съдържанието на страницата

<header></header>

Този таг съдържа въвеждаща информация за html страницата или множество от линкове за навигация. Обикновено съдържа един или няколко елемента за заглавие, лого или икона, информация за споделени авторски права. Може да има няколко <header> елемента в един документ. Въведен е в HTML5.

<footer></footer>

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

<аrticle></article>

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

<section></section>

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

<aside></aside>

Тагът дефинира някакво съдържание, което се намира на друго място от основното съдържание, но има връзка с него.

<div></div>

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

4

Тагове за текст

<p></p>

Този таг дефинира параграф. Браузърът автоматично добавя отстъпи и разстояние, когато стигне до такъв таг. Разстоянията могат да се променят чрез CSS.

<h1></h1>,…,<h6></h6>

Тези тагове се използват за дефиниране на html заглавия. Чрез <h1></h1> се посочва най-важното заглавие, а с <h6></h6> се определя най-маловажното. 

<br>

Използва се за добавяне на един празен ред. Този таг няма затварящ таг. Често се използва при писане на адреси и поеми. Хубаво е да се използва при поставяне на празен ред, а не при разделяне на параграфи.

<hr>

Поставя разделение/линия на страницата. Използва се за разделяне на съдържанието или за дефиниране на промяна в страницата.

<li></li>

Дефинира списък. Списъкът може да е два вида: номериран и неномериран. Използва се с един от двата тага <ul>,<ol>.

<ul></ul>

Създава неномериран (с булети) списък. Използва се заедно с <li></li> тага.

<ol></ol>

Създава номериран (с числа или букви) списък. Използва се заедно с <li></li> тага.

<b></b>

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

<em></em>

Използва се за подчертаване на текст. Не се препоръчва за употреба, защото не се поддържа от всички браузъри.

<i></i>

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

5

Форми

<form></form>

Използва се за създаване на html форма за въвеждане на данни от потребителя.  Формата може да съдържа един или няколко от следните е тагове: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.

<input></input>

Създава поле, в което потребителите могат да въвеждат данни. Този таг се изписва между затварящия и отварящия таг <form></form>. Идеята е така да се декларират определени ограничения върху въведените от потребителя данни. Полето може да бъде различно в зависимост от типа, който му зададем. Типът може да е button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week.

<button></button>

Тагът създава бутон, като вътре между отварящия и затварящия таг може да има съдържание като текст, изображение. Това е и основната разлика между тага <button> и тага <input type=”button”>. Ако използвате <button> тага, препоръчително е и на него да му окажете изрично типа. Типът може да е button, reset, submit. По-добре е да се използва <input type=”button”> при създаване на бутони във форма.

<textarea></textarea>

Дефинира многоредово поле за въвеждане на текст. Textarea може да съдържа много голям брой символи. Колоните и редовете на textarea могат да се определят чрез атрибутите cols и rows.

<select></select>

Използва се за създаване на падащо меню. <option></option> таговете, които се намират между отварящия и затварящия таг на тага <select>, дефинират възможните опции за избор от менюто.

<option></option>

Може да се използва в <select> или <datalist> таг, за изброяване на възможните опции за избор от падащото меню или от списъка. Има един основен атрибут value, чрез който се въвежда стойността или името на опцията. Може да се групират отделни опции, ако броят им е голям. Това става чрез <optgroup></optgroup>.

<label></label>

Дефинира етикет за <input> елементите. Ако имаме <input type=”radio”>, то като етикети можем да зададем на двата радио бутона следните неща: <label for=”male”>Male</label> и <label for=”female”>Female</label>. Този таг не стилизира по специален начин текста, изписан в него, а по-скоро служи за улеснение при маркиране на избраната опция от потребителя. Потребителят може да натисне с мишката върху етикета и пак да избера дадената опция, не е задължително да натиска радио бутона.

<table></table>

Чрез него се дефинира html таблица, като помощни тагове при създаване на таблица са <tr></tr>, <th></th>,<td></td>. По-сложните таблици използват тагове като <caption>, <col>, <cogroup>, <thead>, <tbody>, <tfoot>.

<tr></tr>

Използва се за създаване на ред в html таблица.

<th></th>

Използва се при създаването на клетка, в която се изписва заглавието на колона. По принцип този тип клетки са с удебелен шрифт и са центрирани.

<td></td>

С този таг се създава стандартна клетка в html таблица. По принцип този тип клетки са с ляво подравняване и шрифтът не е удебелен.

<thead></thead>

Групира заглавната част на html таблицата. В този таг се поместват клетките, в които се изписват имената на колоните, тоест <th></th>. Този таг се използва заедно с <tbody></tbody> и <tfoot></tfoot>, за да се отделят частите на таблицата. Браузърът използва тези тагове, за да може да се „скролва“ всяка от частите на таблицата по отделно. Често тези 3 тага (<thead>, <tbody>, <tfoot>) се използват за разделяне на частите на таблицата на отделни страници, когато таблицата е голяма и се принтира и не се събира на една страница.

<tbody></tbody>

Съдържа основната информация в таблицата.

<tfoot></tfoot>

Използва се за групиране на заключващата/крайната информация на таблицата.

6

Изображения и линкове

<img>

Тагът дефинира изображения в страницата. <img> тагът има следните атрибути: src и alt. Изображенията не се поставят в html страницата, те се показват, като се укаже линк към тях. Ако искате да свържете изображение към друг документ, просто сложете <img> тага в <а> тага.

<а></а>

В този таг се поставят хиперлинкове, които обикновено се използват за връзка на една html страница с друга. Най-важният атрибут на <a> тага е href, след който се изписва линкът. Линковете ще се показват от всички браузъри, като те могат да бъдат посетени, непосетени и активни. 

Научи компютърните програми онлайн от топ експертите на България
Регистрацията в АУЛА ви дава:
  • 20 безплатни урока
  • Трикове и тънкости за софтуера
  • Отговори на вашите въпроси