HTML. Базови знания за нуждите на Wordpress
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното, което трябва да запомните от този урок
Дори без да сте експерт, няколко основни знания по 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).
