https://help.superhosting.bg/create-html-page.html
  • bg

Хостинг, Домейни, Виртуални сървъри (VPS), Managed VPS, SSL сертификати

Създаване на HTML страница (структура и основни елементи)

HTML
html, html page, create html

Обикновена статична 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 документ е нужно да започва с 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 документите се описваха по малко по-различен начин например:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Заглавие на 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 връзка към този раздел

Тагът за коментар по никакъв начин не влияе на 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 документа.

Ето само няколко HTML тага, които се използваха за промяна на презентацията на текста в HTML документа: <b> удебелява текста, но новото му предназначение е да посочи важно значение на маркирания текст; <i> показва текста наклонен; <u> подчертава текста (не се поддържа от XHTML 1.0 Strict DTD) и други.

Тагът <b> се е използвал, за да се направи текстът удебелен. Значението на този таг е променено в новите версии на HTML. Когато няма някакво специално значение даден текст, тогава вместо <b> тага е нужно да се ползва CSS параметъра "font-weight" със стойност "blod". Например:

<p style="font-weight:bold;">Това е примерен текст</p>

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

br

<br /> Пренася текста на следващия ред. Няма затварящ таг. Може да се използва за оставяне на един, два и т.н. празни реда, като се изпишат толкова на брой тагове <br />, колкото празни редове трябва да се оставят.

p

<p> </p> Оставя разстояние от един ред между горната и долната част на текстов блок и останалия текст.

blockquote

<blockquote> </blockquote> Показва текстов блок с отстъп и оставя разстояние от един ред между горната и долната част на текстов блок и останалия текст

pre

<pre> </pre> Показва текста така както е написан в текстовия редактор – с всички паузи между букви и думи и оставени празни редове.

div

<div> </div> Блокът от съдържание намиращ се в този таг ще бъде обработен спрямо зададения стил в атрибута style="".

При изписване само на тага <div> без атрибути и стойности ефектът обикновено е като от тага <br>, т.е. преминаване на по-долен ред.

<div> може да се използва с атрибутите class и style, например:

<div style="font-family: arial, helvetica, sans-serif; color: #ff0000;
font-size: 12pt; text-decoration: underline; background-color: #00ff00;">задава шрифт arial
и сродните му, червен цвят на текста, големина на текста 12pt,
подчертава текста и създава зелен фон</div>

Заглавия в HTML връзка към този раздел

Началният таг за задаване на заглавие е <h>, затварящият таг е </h>. Размерът на заглавията се определя с цифрите от 1 до 6 включително, като с най-малък размера на заглавие е 6, а най-голям – размера на заглавие 1.

<h1>Заглавие</h1><!-- Най-голям размер на текста -->
<h2>Заглавие</h2>
<h3>Заглавие</h3>
<h4>Заглавие</h4>
<h5>Заглавие</h5>
<h6>Заглавие</h6> <!-- Най-малък размер на текста -->

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

В тага <h> може да се включи стил (CSS), чрез който да се промени презентацията на текста.  Например да се укаже подравняване на заглавието вляво (left), вдясно (right) или в центъра (center), например:

<h2 style="text-align:center;">Заглавие</h2>

Хоризонтални линии в HTML връзка към този раздел

Тагът за хоризонтални линии е <hr>. Той няма затварящ таг и затова според изискванията в HTML трябва да се изписва <hr />.

<hr style="width: 200px;border-color: red;border-style: solid;border-width: 5px;" />

В примера линията е с дължина 200 пиксела, с дебелина 5 пиксела и червен цвят.


500px270px
SuperHosting.BG

Коментари

Все още няма коментари

avatar
  Абониране  
Уведоми ме при
Всички права запазени © 2005-2018 , www.superhosting.bg