HTML. Базови знания за нуждите на Wordpress

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Колкото и да е добра една тема.
Колкото и възможности да има.
Понякога все пак ни се налага да я редактираме тази тема.
Или пък, за да използваме максимума от възможностите на тази тема да имаме елементарни знания по "html".
Да видим какво представлява една "html" страница.
За да може да се възползваме от възможностите на темата.
Също така в тези джаджи, така наречени.
Или "Widgets" в "WordPress" може да добавяме директно "html" и да ги поставяме, където си поискаме.
Така че сега ще покажа един базов "html".
Каква е структурата на "html".
Няма да влизаме в детайли във възможностите на "html" и "css", но все пак да се запознаем какво "html" и какво е "css".
"html" е всъщност един текстов файл.
Тук имам една папка и ще създам един нов файл.
Който ще бъде текстов документ, но ще е сменя разширението.
Ще го нарека "stranica.
html".
И когато кликна на него ми се отваря браузъра.
И в момента е празен файла, затова нищо не се вижда.
Нека да редактираме този файл.
Може да го редактирате в "Notepad".
Но аз предпочитам да използвам безплатния "Notepad++".
И директно вътре да пиша кода.
Това което трябва да окажем на този файл, е че това ще бъде "html" файл.
И започваме с този таг.
В "html" се слагат тагове.
Като повечето тагове, трябва да се отворят и да се затворят, за да се окаже къде е елемента, който искаме да поставим в този таг.
Аз ще оставя няколко празни реда.
Ще затворя тага.
Като той е абсолютно същият като горният, само че с една наклонена черта.
Тя показва, че е затворен.
След което имам една невидима част.
Тази част се нарича "HEAD" или "глава".
Ще затворя и нея.
И тук в тази част се поставят елементи, които са невидими на уеб страницата, но от тях зависи визуализацията на уеб-страницата.
И самото съдържание го слагаме в "BODY".
И ще затворя и "BODY".
Тоест аз каквото напиша тук в "BODY", ще се появява на уеб-страницата.
Нека да направим една статия.
И тя да бъде за четирите супер храни.
Аз ще копирам текста, който има отворен отстрани.
Нека да запиша.
Ще кликна два пъти.
И виждате какво се получи.
Това е текстът, но нямаме правилната кодировка в случая.
Затова ще отворя редактора и в заглавната част ще поставя един таг, който оказва че този текст е с кодировка "utf-8".
Всъщност това ще окаже на браузъра, да чете правилно символите.
Които когато са писани на кирилица най-често има проблем с тях.
И трябва да се оказва кодировката, в която са създадени.
Ще го запиша файла.
И вече се появи четири супер храни, които може да ядем по често.
Нека да продължим да създаваме нашия файл.
Ще добавим: домати, броколи.
И под домати ще добавя текста, за доматите.
Нека да запиша.
И да видим, какво се случва.
Отворих страницата, но всъщност всичко изглежда на един ред.
И не изглежда много добре форматирано.
Затова ще трябва да сложим няколко "html" тага.
Първото нещо, което ще направя е да кажа, че в "HEAD" 1 или "заглавна част 1", ще бъде моето заглавие.
Така че ще отворя "h1", "html" тага.
И накрая затварям "h1".
След което доматите ще бъдат "заглавна част 2".
И всъщност, когато избираме в "WordPress" заглавна част, ще видите, че той точно това прави.
Слага тези тагове.
И трябва да покажем параграфите на нашия текст.
Това е параграф, който завършва тук.
И на другата страница има параграф.
Не другата страница, а другият абзац.
Така слагаме на всеки един абзац.
Реално отварящ и затварящ таг за параграф.
След което на броколи.
Ще сложим отново "h2".
Нека да запиша.
Ще отворим и вече малко по-добре изглежда нашата страница, която направихме по форматиране с заглавни части.
Нека да продължим да добавяме съдържание.
Аз съм копирал самия текста от страницата.
И тук ще го поставя.
Поставям го.
И това, което трябва да направим е да сложим "h2" тагове навсякъде.
Дори аз мога да ги копирам.
За по-бързо.
След което е добавя затварянето.
Да сложим параграфите.
Но да не забравяме, да ги затворим.
Така навсякъде ще направим.
Всъщност това, което прави "WordPress" вместо нас е тази работа, която правим.
И едно време, когато нямаше неща като "WordPress" всяка една страница по този начин се създава.
Ще оставя така.
Всъщност нека и на него да му добавя параграф.
Да разгледаме какво се получи.
Създадохме текста.
Нека да вземем изображенията.
Изображенията може да са в директорията примерно на там където е "html" файла, който създадохме.
Но аз ще ги направя с връзка към всъщност оригиналната статия.
За да може ако свалите файла да работят линковете при вас.
И начина по който ще го направя е: кликвам с десния бутон на мишката, копирам "url" на изображението.
И тук вече при редакция.
Мога да сложа това изображение.
Но ако го сложа по този начин.
Ще се появи като текст.
Всъщност аз го сложих при броколите.
Трябва да е при доматите.
Затова аз, трябва да го сложа в "html" таг.
Който показва на самия браузър, къде се намира това изображение.
И тага е "img", от "image", равно, кавички.
Пътя до изображението заедно с неговото разширение, име и разширение.
Затварям кавичките.
И затварям тага.
"img" е таг, който няма нужда да бъде затварян.
Както затваряхме параграфите.
Този таг "meta" също не го затварям.
Нека да запишем.
Да се върна.
И тук съм направил някаква грешка.
Нека да погледна.
Да всъщност синтаксиса е друг "img" "src" равно на името към файла.
Тоест с "src" оказва файла, а "img" е тага.
А тук добавяме къде се намира.
самото изображение.
И изображението се появи.
По аналогичен начин ще добавя и другите изображения.
Като ще копирам това.
Ще го запиша.
Ще се появят дома ти навсякъде.
Това го правя, за да не повтарям целият синтаксис наново.
Броколите.
Брюкселското зеле.
И авокадото.
И това е нашата страница.
Като виждате, че самите изображения се появяват и след това на нов ред е текста.
Ако искаме да ги направим, така както са тук в нашата статия.
Ще трябва да ги подравним.
И подравняването става с "align".
"align" равно.
"align" e от подравняване.
Ляво.
Първото и третото бяха ляво.
Второто и четвъртото дясно.
По този начин успяхме да ги подравним.
Но има един съществен проблем.
И той е широчината на самата страница.
Ние ще искаме да я направим по такъв начин, че текста да се появява така.
И тогава ще изглежда добре.
А когато е на цялата широчина, нещата се размазват.
Затова ще добавим широчина на страницата, малко по-късно.
"html" може да е много труден и много комплексен, но може реално да бъде и много прост.
Видяхме, че създадохме една страница като използвахме само най-основните части на "html".
Всъщност това са неща, които използваме всеки ден в различни ситуации.
В следващото видео ще покажа малко "css", за да направим широчината на тази страница.
да сменим шрифта и някои други настройки.
След което ще можем да модифицираме темата си или пък да добавяме парчета "html" вътре в нашия уебсайт.
Под това видео ще видите и кратко ръководство.
С най-често използваните тагове, синтаксиса им.
Така че да може да ги използвате, във вашите уеб сайтове.

Съвети

Научаването и използването на базов HTML и CSS ще ви помогне да сте по-гъвкави в създаването на уеб сайтове с Wordpress. Те обаче не са задължителни, когато използвате Wordpress и научаването им е по желание. 

 
 
 

Тест за преминаване към следващия урок

 
Кое от изброените НЕ е вярно за тага ?
Дефинира тялото на страницата както трябва да се вижда
Дефинира фон на страницата
Дефинира размер и цвят на текст
Дефинира началото на нов параграф
 
Какво се получава, когато не сме указали encoding-а в head частта на нашата html страница, и въвеждаме текст на кирилица?
Текстът не се показва на мястото, където се предполага, че трябва да се намира.
Тестът се показва под формата на странни символи.
Тестът е с различен цвят и шрифт.
 
Можем ли да добавяме изображения в html страница?
Не, html се използва за създаване на страници само с текстово съдържание
Да, html поддържа тази възможност
Зависи от изображението

Въпроси и отговори

  • Мария Балева:

    Здравей, Ивелина може да изтеглиш .html страницата, за да видиш най-ясно всички тагове и как е създадена страницата.

    Мартина:

    За съжаление мета тага не се вижда от html страницата. Може ле да изпишете мета тага за кирилицата?

  • Евелина:

    Разбрах!Смених шрифта и проблема се реши.

    Евелина:

    Явно не е било от шрифта,пак се получи.Незнам какво не правя както трябва или по-точно какво съм направила,че на текстовия редактор да не ми се появяват HTML кодовете.

    Diana Siteva:

    html файла отвори с notepad

    Николай Коцев:

    Отдясно има 2 бутона - Визуален редактор/Текстов редактор

  • Мога ли да си направя дъщерна тема както е основната? Какви са изискванията за дъщерна тема? Лесно ли се създава дъщерна Тема?

    Rumen Gotsev:

    wordpress версия 4.5.2 - година 2016. Да покажете един модул как се създава дъщерна тема в Wordpress. Много ви благодаря! вие сте най добрите!

    Иван Цукев:

    Здравей,

    този урок е за дъщерна тема: http://aula.bg/wordpress-sazdavane-na-dashterna-tema-child-theme

  • Тодор Тодоров:

    За какъв бутон искаш? С иконка ли или да е с текст?

    Живко Казаков:

    Това може да се направи с двойка линкове. Единият е в началото на HTML файла - Бутон Начало и другият на края на файла - Бутон Към началото

    Като единият линк трябва да сочи (href='#end') към името (name='end') на другият. "Бутон Начало" и "Бутон Към началото" могат да бъдат текст или изображения.

    Живко Казаков:

    Очаквах да изглежда малко по-различно :)

  • Може ли

    Jullian Angelov:

    едно допълнение? При работа с HTML в текстовият редактор WordPress е леко капризен към синтаксиса понякога дори за излишни интервали в кода. Поддържа стандартен HTML, но ако дописваме нещо ще трябва да проявим търпение и да го добавяме и тестваме контейнер по контейнер и даже таг по таг. Освен това на няколко пъти работещ и изтестван код ми се провали само защото след като съм го публикувал не затворих страницата която правех, а оставих компютъра да работи при отворена страница и се заех с друго - не на компютъра. Възстанових го от архивните копия описани в уроците как се редактират публикации, но след време по подобен начин се случи отново и отново.

    инж. Юлиан Ангелов:

    Вече разбрах как се проваля HTML код. Аз работя на хостинг от SUPERHOSTING.BG с инсталирана тяхна версия на WP. A кодът се проваля след като е написан в текстовият редактор и премина обратно във визуалният редактор. Обикновено изчезват отварящ и затварящ таг, но понякога изчезват заедно със съдържанието между тях. Ако запазя ( обновя) страницата и изляза от нея без да я пипам повече - работи и не се разваля. При влизане тя си е пак в текстов редактор и ако не мина във визуалният редактор - остава да работи, дори и да съм я променял. Засега нямам друго решение по проблема, освен да копирам кода на страницата в текстов режим с Ctrl-A, да я изтествам на друг предварително отворен браузър и ако е ОК да изляза от нея, а ако не - да върна копираният код. Междувременно с HTML се запознах по- обстойно в курса на Аула по HTML / CSS. Някой елементи от синтаксиса WP не ги възприема - например игнорира тага ( вероятно и други), a при опит да вкарам в кода ( в текстов редактор) мета тагове - WP видимо ги възприема, но те не работят. Като надникнах в кода на страничката се оказа,че WP е вкарал мета тагът в таг параграф и се е получило

    и тагът не работи. Но при повторен преглед в кода на текстовият редактор всичко изглежда както би трябвало да бъде. В крайна сметка ползвайки Yoast не можах да вкарам мета таг с ключови думи и не мога да популяризирам сайта, което го обезсмисля като сайт. Не съм правил по- задълбочени опити да изградя реална страничка с помощта на разширението Page Builder защото там така и не успях да използвам CSS стила с който иначе се справям с лекота след курса HTML / CSS на Аула + още четене и практика.

  • Може ли да ми дадете мета тага за кирилица? 

    Мартина:

    Първо искам използвам възможността да ви благодаря за хубавия курс. Моля да изпишете мета тага за кирилицата, тъй като не мога да го видя на видеото нито го виждам в .html файла като го отворя с Ctrl+ Shift+ I /Developer tools на Chrome/.

    Ivan Pukov:

    За да ти стане трябва да я настроиш на windows-1251(кирилица) или UTF-8(универсална). За да го направиш трябва да напишеш ето този код:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8>

    или този:

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251>

    Напиши някой от двата кода в секцията head ето така:

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251>
    Мартина:

    Благодаря.

  • Защо страницата не се визуализила в браузъра?

    Мирослава Цветкова:

    Здравейте, в браузъра страницата е празна, въпреки, че всичко е въведено както трябва.

    Ivan Pukov:

    Имам няколко забележки: 1. Когато искаш да разбереш защо , някакъв код не работи е добре да пратиш написания код за да може д го тестваме и да видим , откъде идва проблема , а не да си играем да възпоизвеждаме текс от картинка . 2. Пробвай да прочетеш малко или най-елеметарно да провериш в google , преди да зададеш въпрос.

    Но този път ще бъда добър , но знай че не е етично спрямо другите и рядко ще получиш отговор с такъв подход.

    Иначе ето решението : Просто махни "charset=utf-8" и добави "" И имаш такъв хубав ресурс , като https://www.w3schools.com/tags/att_meta_charset.asp - защо не го ползваш :(

    Ivan:

    Здравей, виж как изведнъж всичко става лилаво от един момент. Това обикновено означава, че някъде има проблем със синтаксиса. Или някоя скоба не е затворена или кавички. В случая са кавички - след charset=utf-8 липсват едни двойни кавички.