Основна структура на HTML

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

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред

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

 
Кои са двата основни тага - деца на html тага?
<head> и <body>
<main> и <section> 
<title> и <description>
 
Какъв е синтаксисът на таговете?
<html></html>
[html][/html]
{html}{/html}

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

  • Защо при визуализация на index.html файла, текста в тага <title> е нечетим?

    Илия Карагяуров:

    Защо при визуализация на index.html в браузера, текста в тага

    е нечетим? Това настройка на самия браузер ли са или на Atom?

    Зорница Статкова:

    Здравей Илия, в Head частта трябва да сложиш един таг, който да указва на браузъра кодировката на текста:

    Борис Митев:

    Здравей Илия, както Зорница правилно е отбелязала, за езици използващи разширения character set на шрифтовете извън малки и големи английски букви, трябва да укажеш кодировката. Такъв е и случаят с кирилицата. За най голяма съвместимост използвай:

    Борис Митев:

    <meta charset="utf-8" />

    Борис Митев:

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

    Зорница Статкова:

    Здравей Борис, в отговора бях копирала тага, но не се вижда. Трябваше ли да го оставя незатворен, за да се вижда? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

    Илия Карагяуров:

    Благодаря за отговорите.Намерих решение, като промених кодировката в Atom от UTF-8 на Windows1251. Може би най елегантно решение е да се вкара таг с кодировка във файла.

    Борис Митев:

    Здравей Зорница, За да не бъде интерпретиран като таг в коментара, тагът трябва да е със специалните символи &gt; и &lt;. Обърнал съм внимание на тях по-натам в курса. Вариант е и да не го затвориш, но тогава пълният запис не става ясен за останалите потребители на Аула.

    Злат Попзлатев:

    Написах всичко както е показано, но не се изписа заглавието "Моята първа страница, а си остана index.html Ето screenshot за да ви покажа https://www.dropbox.com/s/xpjqz8qwubjey9l/%D0%95%D0%BA%D1%80%D0%B0%D0%BD%D0%BD%D0%B0%20%D1%81%D0%BD%D0%B8%D0%BC%D0%BA%D0%B0%20%2895%29.png?dl=0

    Злат Попзлатев:

    същото се получи и с bold тага. Никаква промяна в index.html

    Злат Попзлатев:

    ето пак снимка https://www.dropbox.com/s/t0z1ns0u28xn8vh/%D0%95%D0%BA%D1%80%D0%B0%D0%BD%D0%BD%D0%B0%20%D1%81%D0%BD%D0%B8%D0%BC%D0%BA%D0%B0%20%2898%29.png?dl=0

    Злат Попзлатев:

    Оправих се. Просто намерих index.html в друга папка, а това което отварях първо беше копие на непроменения първоначален index.html Проблемът ми сега обаче е че както при Илия заглавието ми не е изписва на кирилица ами с някакви нечетими йероглифи. От коментарите за неговия проблем не разбирам какво точно трябва да направя. Къде трябва да поставя това <meta charset="utf-8" /&gr;

    Борис Митев:

    Здравей Злат, точният синтаксис е <meta charset="utf8 /> и трябва да се постави в head на html документа.

    Злат Попзлатев:

    Преди или след title?

    Злат Попзлатев:

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

    Борис Митев:

    Здравей Злат. Няма значение къде, важното е да е в head. Това как се показва текст в браузърa зависи от това, с какъв encoding е създаден index.html в случая и на какъв encoding е настроен браузърът да показва текста. Този таг е само препоръка и може с настройки на браузъра да бъде игнориран.

    Това са доста специфични детайли за meta таговете като цяло и навлизането в такива детайли в уроците би ги разводнило доста. Освен това причината да има коментари под уроците е именно тази - да се задават въпроси и да се получават отговори по точно такива теми, които не са от особен интерес за курса, но са интересни на потребителите.

    Yoto Yotov:

    защо не се поставя декларацията за версията на html - " за html 5"?

    Десислава Малджанова:

    Тотално се обърках. Кое от двете е по вярно, от коментарите по горе разбрах че не трябвало да има затваряща наклонена черта а кавичката трябвало да се затвори и utf-8трябвало да се изпише с тире тогава кое е вярното това са двата варинта показани от Борис Митев в които все някои от тия неща са нарушени точният синтаксис е <meta charset="utf8 />

    Десислава Малджанова:

    По горе е това utf koeto nqma tire, а това беше първия "точен" синтаксис в който има наклонена черта за затвоен таг. Кое от двете в крайна сметка е вярно и ако няма вярно моля да се изпише някъде вярно все пак.

    Десислава Малджанова:

    Благодаря на Лъчезар Николов за показното в предния урок явно наистина нито един от по горните примери не е верен: тага се изписва без наклонена черта, с тире и две кавички. Моля изписвайте правилно кода все пак се учим от вас а тук всеки некоректно поставен дори спейс може да накара кода да не работи. А да не говорим че ако някой иска да продължи с java script там имат значение и големи и малки букви.

    Ирена Дурева:

    При мен нещата се получиха като написах в head <meta charset="utf-8", но след него написах затварящ head и вече нямаше китайски символи.

    Борис Митев:

    Правилен синтаксис: <meta charset="utf-8" > или <meta charset="utf-8" />

    Борис Митев:

    Мета таговете не се затварят с </meta> Te са тагове без съдържание и като такива са самозатварящи се. За това е добър навик да се пише наклонена черта в края им (това не е задължително в HTML5, но е синтактична захар, за да е видимо, че не сме пропуснали в кода нито един затварящ таг). Същото важи и за <br />, <img src="" /> и т.н.

    Борис Митев:

    utf-8 може за краткост да се замени с utf8 и текущите версии на браузърите го разбират, но правилното изписване е utf-8 и е добре да свикнете с него.

    Рая Христова:

    При мен се получи без проблем, като копирах в head-а преди title

    Djekov:

    Както Борис Митев вече спомена, може и без наклонената черта. Пробвах и двата варианта, работят. :)

  • Грациела Георгиева:
    Здравей, 
    Проблемът е в пропуснатата кавичка на втория ред в meta тага, след utf-8. Utf-8 се изписва с тире.
    
    Злат Попзлатев:

    Все още е така.

    Грациела Георгиева:

    Здравей, НЕ си затворил кавичките на ред 2, изтървал си затварящата.

    Лъчезар Николов:

    Тага за кодировка е единичен, т.е. няма отварящ и затварящ таг. Правилното е: Заменил си кавичките с наклонена черта за затваряне на таг.

  • Дали няма да е добре?

    Punchyou:

    Дали нямаше да е добре тук дас е каже, че таг, който се отвяря първи, после се затваря последен? Това не е ли важно, особено при вложени такива?

    Лъчезар Николов:

    Да това е много важно - ако има поредица от отварящи тагове, те се затварят в обратния ред. Пример:

    Моята първа страница

    Лъчезар Николов:

    Ето и кода:

    Владислав Иванов:

    Много добре

  • Какви клавишни комбинации използвате за Save и Run?

    Georgi Georgiev:

    Може ли да напишете, кои са клавишните комбинации на "Atom" за бързо навигиране за запазване, за рънване в браузера, а не постоянно да сменям прозорците от Atom да търся Crom и да рефрешвам, за да знам какво се визуализира, след направените промени?

    Борис Митев:

    Комбинациите в Windows са:

    1. Ctrl+S (save)
    2. Alt+Tab (преминавне към Chrome)
    3. Ctrl+R (refresh на страницата)
    4. Alt+Tab (връщане към Atom)
    Georgi Georgiev:

    Много благодаря!

    Венета:

    А има ли клавишна комбинация за директно отваряме на хром след Save?

  • Защо?

    Владислав Иванов:

    Тъй като от време на време преглеждам уроците (знам всичко и за HTML и CSS, все пак работя като Web Developer),ми е интересно защо не се спомене, че таговете , и вече не се препоръчват за използване, а се препоръчва да се използва CSS за оформяне? Ок, наясно съм, че като за начало е хубаво да се споменат, но поне в HTML5 не се препоръчва тяхното използване. Освен това е по-добре вместо да се използва таг , имащ по-голям приоритет от и таг вместо (по същата причина). Иначе ако искате да подчертавате, удебелявате или махнете подчертаване и удебеляване, можете да използвате text-decoration в CSS.

    Кремена Коева:

    Според W3Schools таг не се препоръчва да се използва за да се направи наклонен шрифт. Препоръчват да се използва САМО когато няма друг, по-подходящ елемент като: , , , , В HTML5 може да се използва тага за да се обогати текстовото форматиране чрез задаване на CSS стилове и не е грешно да се използва с тази цел.

    Кремена Коева:

    маркъпа на аула изтри таговете ми и направи коментара наклонен и зелен

    Владислав Иванов:

    В последното изречение съм написал, че се препоръчва използването на CSS и по-специално text-decoration за различните видове стилове на текст.

  • Кога как да изписваме?

    Пепа:

    Има ли значение с какви букви пишем- главни, малки , или смесени/главна буква с малки/?

    Борис Митев:

    Както се вижда от курсовете, предпочитаният синтаксис е малки букви, а където е необходимо да се ползват повече от една дума (например име на клас или id), се използва т.нар. camel case. Първата буква на всяка следваща дума след първата е главна.

    Пример: someClassName

    Пепа:

    Много благодаря !

  • Иван Цукев:

    Резултатът от двата тага ще е еднакъв. Едно време ползвахме само , сега се препоръчва .

  •  защо се получава това?

    Alexander Jordanov:

    наклонена черта пред надписа

    Ivan Pukov:

    В така написания код си добавил едно "/" при теб е:

    / " просто махни "/" и няма да има наклонената черта.
  • Dudu:

    Здравейте, не ми стана ясно от кой урок и кои файлове не ви се разархивират. Принципно zip файловете се отварят с архиватори като 7zip или winzip и други. Трябва да имате инсталиран архиватор на компютъра.

  • Мария Зарева - Здравкова:

    След приключване на урока е необходимо да се кликне на бутона "Напред". Ако има тест, той ще се зареди автоматично. Може да има упражнение или директно да започне ноевият урок.

  • Kак се запазва това което е написано, че като отворя страницата да се виждат всички нови промени?

    Теди:

    Работя с мак про и още се боря да разбера и самата система и Атом как работят, въпроса е как се запазва, това което е написано с body/title, че като заредя страниците да се виждат промените?

    Дебора:

    Здравей, Теди! Запазването в Атом става или от горния лев ъгъл цъкнеш ,,file'' и в падащото меню натиснеш ,,save'' или чрез шорткър бутоните, но трябва да видиш коя комбинация от бутони е при MacOS.

  • HTML - ТАГОВЕ, КОИТО ЩЕ ВИ БЪДАТ ПОЛЕЗНИ В БЪДЕЩЕ ВРЕМЕ

    Борислав Даскалов:

    Здравейте на всички ! Първо искам да изкажа адмирации към Борис Митев за старателното преподаване и професионалното обяснение на всеки един детайл.Всеки от нас трябва ама библиотека с таговете за HTML. Независимо дали е начинаеш или е напреднал. В интернет простраството има много сайтове и платформи от където може да намерите информация за това. Ще ви споделя моята скромна колекция от HTMLтагове. Надявам се Борис Митев да няма нищо против :) . Надявам се да съм бил полезен ! Поздрави !