Обикновена статична HTML уеб страница може да се създаде с текстов редактор и няколко реда HTML код. Тази страница след това може да се зареди локално в уеб браузъра или през уеб, като преди това се качи в хостинг акаунта.
Използване на текстов редактор
За създаване на html-страница е нужен обикновен текстов редактор, като например Notepad приложението, което е част от пакета на Windows.
При Windows (версия 10), за да отворите Notepad натиснете бутон Start или иконката за търсене, най-долу вляво на екрана, след което започнете да изписвате думата notepad (1). От резултатите изберете Notepad (2).
Командите (таговете, tags) на HTML се затварят в ъглови скоби (< и >). Повечето тагове имат начален и краен (затварящ) таг. Крайният таг е същият като началния, но с наклонена черта отпред.
Началният таг за създаване на html страница е <html>, а крайният е </html>.
След като отворите Notepad, напишете в него:
<html>Това е моята първа HTML страница</html>Натиснете от горното меню File » Save As…
От отворилия се прозорец изберете къде в компютъра Ви да се запази html-страницата (например в диск C или в папка My Documents и т.н.). Напишете името на страницата с разширение html например index.html (2), изберете All Files (*.*) (1) от менюто срещу надписа Save as type:, изберете енкодинг UTF-8 (3) и натиснете бутон Save (4).
По този начин страницата е съхранена на твърдия диск. Началната страница на уебсайтовете се нарича индексна страница и най-често е с име index.html.
След като страницата е записана, можете да я отворите в уеб браузъра, за да видите как изглежда.
Можете едновременно да променяте кода на страницата в Notepad, да го записвате, и докато страницата е отворена в уеб браузъра, с рефреш (Ctrl+F5) да виждате промените.
HTML кодът на страницата може да се види и в уеб браузъра, като достъпите опцията за показване на кода (или клавишна комбинация Ctrl+U).
Структура на HTML документ
HTML документите са съставени от две основни части:
1. Глава (head)
2. Тяло (body)
Началният и крайният тагове на главата са <head> и </head>.
Началният и крайният тагове на тялото са <body> и </body>.
Типичната структура на един html документ е:
<html>
<head> </head>
<body> </body>
</html>Текстът, графиките, снимките и изобщо всичко, което се вижда на монитора при отваряне на една html страница, се намира в „тялото“ (body) на страницата, т.е. между таговете <body> и </body>.
Посочване на типа на HTML документа
Всеки един HTML документ е нужно да започва с DOCTYPE елемента. Това е дума, чрез която уеб браузърът узнава как трябва да интерпретира страницата, като взима предвид версията на използвания език например.
За документи, написани на HTML версия 5, този таг изглежда по следния начин:
<!DOCTYPE html>пример:
<!DOCTYPE html>
<html>
<head>
<title>Моята първа HTML страница</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- Начало на текста -->
<h2>Това е заглавие</h2>
<p>А това е <strong>параграф</strong></p>
</body>
</html>Заглавие на HTML страницата
В главата (<head> </head>) на html документа се разполага заглавието на страницата (title).
Заглавието на html документа се изписва между таговете:
<title> и </title>
Важно е една html страница да има зададено заглавие, тъй като търсачките (като Гугъл например) възприемат написаното между таговете <title> и </title> като най-важната информация за страницата. Заглавието трябва да съдържа до 40-50 знака и да описва най-точно съдържанието на страницата.
Заглавието на html страницата се показва като име на таба (прозореца) в уеб браузъра, в който е заредена.
пример:
<!DOCTYPE html>
<html>
<head>
<title>Моята първа HTML страница</title>
</head>
<body>
Текст и графики.
</body>
</html>Освен заглавието на страницата, между таговете head се поставят и специалните метатагове, описващи съдържанието на страницата или указващи някакво поведение на браузъра, търсещите машини, кеширащите системи и други.
🔗 Метатагове в HTML документа | Help
Коментари в HTML
Тагът за коментар по никакъв начин не влияе на html страниците и не се показва в браузъра.
Този таг е полезен когато на съответните места в една html страница трябва да се запишат различни текстове за обяснение и подсещане.
Например преди началото на някаква таблица в секцията body може да се постави коментар: „Начало на таблица“ или нещо подобно.
Ако този текст се изпише директно в секцията body той ще се появи на екрана. За да остане текстът скрит (да не се появи в прозореца на браузъра), трябва да се използва тага за коментар в следния формат:
<!-- Коментар, който няма да повлияе на HTML-документа -->Коментарът трябва да е изписан задължително между следните две форми:
Отляво (в началото) – ъглова скоба, удивителен знак и две тирета (<!--). Отдясно (в края) – две тирета и ъглова скоба (-->)
пример:
<!DOCTYPE html>
<html>
<head>
<title>Моята първа HTML страница</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- Начало на текста -->
Текст
Текст
Текст
<!-- Край на текста -->
</body>
</html>Форматиране на текст в HTML
За обособяване на блок от текст, като отделен параграф, се използва HTML тагът <p>. Например:
<p>Това е параграф.</p>Върху вида на текста може да се въздейства чрез някои HTML тагове. В новата версия на HTML (4 и следващи) от логиката на маркиращия код е отделена презентационната част от частта на съдържанието, като повечето HTML тагове, които се използваха за промяна на презентацията на текста, може да имат друго значение и вече не е препоръчително да се използват за промяна на визията на текста. Вместо директно в HTML кода, стилът на текста се задава чрез CSS езика, чиято цел е манипулация на презентацията на елементите в HTML документа.
Вижте повече: Какво е CSS и как се използва в HTML? | Help
Ето само няколко HTML тага, които се използваха за промяна на презентацията на текста в HTML документа: <b> удебелява текста, но новото му предназначение е да посочи важно значение на маркирания текст; <i> показва текста наклонен; <u> подчертава текста (не се поддържа от XHTML 1.0 Strict DTD) и други.
Вместо <b> тага е нужно да се ползва CSS параметърът font-weight със стойност bold. Например:
<p style="font-weight:bold;">Това е примерен текст</p>Това е примерен текст
Върху разположението на текста (и някои други елементи, например графики и пр.) в html страницата, може да се въздейства чрез няколко HTML тага.
br (празен ред)
<br /> Пренася текста на следващия ред. Няма затварящ таг. Може да се използва за оставяне на един, два и т.н. празни реда, като се изпишат толкова на брой тагове <br />, колкото празни редове трябва да се оставят.
p (параграф)
<p> </p> Оставя разстояние от един ред между горната и долната част на текстов блок и останалия текст.
blockquote
<blockquote> </blockquote> Показва текстов блок с отстъп и оставя разстояние от един ред между горната и долната част на текстов блок и останалия текст
pre
<pre> </pre> Показва текста така, както е написан в текстовия редактор – с всички паузи и празни разстояния между букви и думи и оставени празни редове.
div
<div> </div> Блокът от съдържание, намиращ се в този таг, може да има определен стил.
При изписване само на тага <div> без атрибути и стойности ефектът обикновено е като от тага <br>, т.е. преминаване на по-долен ред.
<div> може да се използва с атрибутите class и style, например:
<div class="header">Това е блок от съдържание, върху което се прилага вече дефинирания стил в стиловия клас "header".</div><div style="font-weight:bold; font-style:italic; color:blue;">Това е блок от съдържание, върху което се прилага конкретен стил.</div>🔗 CSS стил на текста в HTML документ | Help
Заглавия в HTML
Началният таг за задаване на заглавие е <h>, затварящият таг е </h>. Размерът на заглавията се определя с цифрите от 1 до 6 включително, като с най-малък размера на заглавие е 6, а най-голям – размера на заглавие 1.
<h1>Заглавие</h1><!-- Най-голям размер на текста -->
<h2>Заглавие</h2>
<h3>Заглавие</h3>
<h4>Заглавие</h4>
<h5>Заглавие</h5>
<h6>Заглавие</h6> <!-- Най-малък размер на текста -->При използването на този таг автоматично се добавя по един празен ред над и под текста на заглавието.
В тага <h> може да се включи стил (CSS), чрез който да се промени презентацията на текста. Например да се укаже подравняване на заглавието вляво (left), вдясно (right) или в центъра (center), например:
<h3 style="text-align:right;">Заглавие</h3>Заглавие
Хоризонтални линии в HTML
Тагът за хоризонтални линии е <hr>. Той няма затварящ таг и затова според изискванията в HTML трябва да се изписва <hr />.
<hr style="width:200px;border-top:5px solid red;" />В примера линията е с дължина 200 пиксела, с дебелина 5 пиксела и червен цвят.
Вижте още:
🔗 Хипервръзки, линкове в HTML | Help
Вашата html-страница може да е достъпна за всеки в уеб, като я качите в хостинг акаунта Ви. Можете да покажете какво сте създали и да поискате обратна връзка от посетителите ѝ, например след като ѝ добавите и контактна форма. При хостинг услугата от СуперХостинг.БГ качването на файлове в хостинг акаунта е лесно и бързо.
