HTML. Базови знания за нуждите на Wordpress
Най-важното, което трябва да запомните от този урок
Дори без да сте експерт, няколко основни знания по HTML ще ви дадат много повече възможности при работата с Wordpress теми. Разбирането на базовата структура на HTML страницата и употребата на основни тагове улесняват редактирането на съдържание и добавянето на елементи като текст, изображения и параграфи в уебсайтове.
Запишете сами HTML страница – задача стъпка по стъпка за Wordpress 5
Урокът показва как самостоятелно да създадете базова HTML страница, използвайки Notepad++ (или друг текстов редактор):
- Създайте нов текстов файл и сменете разширението му на
.html
(например:stranica.html
). - Отворете файла с Notepad++ или друг редактор и започнете с основната HTML структура:
- В началото на файла добавете
<!DOCTYPE html>
, за да укажете, че съдържанието е HTML документ. - Създайте основните тагове:
<html>
,<head>
,<meta charset="UTF-8">
,<title>
, и<body>
. - В секцията
<head>
добавете<meta charset="UTF-8">
за коректно изобразяване на кирилица и други символи.
- В началото на файла добавете
- Поставете съдържанието в
<body>
, като използвате:<h1>
за основното заглавие, например: "4 супер храни, които може да ядем по-често".<h2>
за подзаглавия (като името на всяка храна: "Домати", "Броколи" и т.н.).<p>
за абзаци с описания към всяка храна.
- За да добавите изображения към всяка секция:
- Копирайте URL-а на изображението с десен бутон – Copy Image URL („Копирай адреса на изображението").
- Вмъкнете картинка с
<img src="линк-към-изображението">
в актуалната секция. - За да подравните изображение, използвайте атрибута align:
<img src="линк" align="left">
или<img src="линк" align="right">
.
- Запазете файла и го отворете в браузър, за да видите резултата.
Как да повторите стъпките с по-нова версия – Wordpress 6
Създаването и редактирането на HTML файл, както е показано в урока, остава същото, тъй като процесът не зависи от версията на Wordpress, а от редактора и браузъра, които използвате. Интерфейсът на Wordpress 6 позволява директно добавяне на HTML код чрез "Custom HTML" ("Потребителски HTML") блокове в редактора на съдържание, без нужда да подготвяте отделни HTML файлове, но основните HTML тагове и синтаксис остават непроменени.
Най-често използвани HTML тагове и какво правят
<!DOCTYPE html>
– Обозначава, че файлът е HTML документ.<html>
...</html>
– Основен контейнер на цялата страница.<head>
...</head>
– Съдържа невидими за потребителя елементи като мета информация и заглавие.<meta charset="UTF-8">
– Задава използваната кодировка (за кирилица изберете UTF-8).<title>
...</title>
– Заглавие на страницата (вижда се в таба на браузъра).<body>
...</body>
– Съдържа видимото съдържание на страницата.<h1>
...</h1>
– Основно заглавие на страницата.<h2>
...</h2>
– Подзаглавие или секция.<p>
...</p>
– Абзац (параграф) текст.<img src="...">
– Изображение.src
сочи към файла с картинката, може да добавитеalign="left"
илиalign="right"
за подравняване.
Допълнително: Бърз наръчник
За лесен достъп до най-често използваните HTML тагове, вижте краткия HTML наръчник (Aula.bg).
Дискусия към урока







