Допълнения към урока
Учебна програма Уеб сайтове с Wordpress
5. Избор и настройка на теми. Със и без HTML и CSS

Най-важното, което трябва да запомните от този урок

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

Запишете сами HTML страница – задача стъпка по стъпка за Wordpress 5

Урокът показва как самостоятелно да създадете базова HTML страница, използвайки Notepad++ (или друг текстов редактор):

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

Как да повторите стъпките с по-нова версия – 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).