HTML и CSS. Какво са и за какво се използват?

Изучаване на основите на уеб програмирането с HTML и CSS

С онлайн обучението по „HTML5 и CSS3“ от учебен център „Аула“ ще изградите добри представи за това какво е уеб, как функционира и как да работим с него.

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

Ще натрупате ценни знания, тъй като HTML е технология, работеща еднакво добре на всички платформи и системи – от телефон до компютър.

Ако искате да:

• създадете своя първи уеб сайт;
• разберете как работят уеб сайтовете;
• създадете своя първи модерен уеб сайт;
• усвоите тънкостите при писане на модерни сайтове;
• научите най-новите техники при разработка на уеб сайтове;

Заслужава си да се запознаете по-задълбочено с тези две технологии, наложили се и масово използващи се при създаване на уеб страници!

Какво е HTML?

HTML (HyperText Markup Language) е най-популярният език за изработка и описание на уеб страници.

HTML е стандарт в Интернет, а правилата се определят от World Wild Web Consortium (Международната организация по стандартизация).

Началото на HTML датира от навлизането на Световната мрежа през 1991 година.

Тогава Тим Бърнърс-Лий от CERN (Европейската организация за ядрени изследвания) въвежда първите уеб протоколи и инструменти в Интернет.

Изработването на HTML документа става с помощта на така наречените тагове.

Чрез тях се създават и се определя разположението на отделните елементи в уеб страницата като заглавия, таблици, форми, бутони, текстови полета, текст, изображения, видеа и др.

По своята същност HTML не е програмен език, а описание на това как искаме да изглежда съдържанието, на структурата на самото съдържание.

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

HTML тагове

• HTML таговете са команди, които се ограждат със знаците „<“ и „>“, например <p> за параграф.
• HTML таговете са фиксирани, за разлика от тези в XML. Ние не можем да си измисляме нови тагове, а трябва да използваме вече известните и създадени.
• HTML таговете често образуват двойка от отварящ и затварящ таг, например двойката тагове за параграф е: <p> и </p>. Текстът, заключен между <p> и </p>ще бъде представен на Интернет страницата като един параграф.

HTML документи

• HTML документите описват Интернет страници.
• HTML документите, наричани още уеб страници, съдържат тагове, които не се извеждат на страниците, и обикновен текст.
• HTML документите са по същество текстови файлове и могат да бъдат създавани и редактирани с обикновен текстов редактор като Notepad.
• Браузъри като Internet Explorer, Firefox и Google Chrome прочитат HTML документите и ги показват като уеб страници. Те не показват HTML таговете, а ги използват, за да интерпретират съдържанието на страницата.
• HTML документите се записват като файлове с разширение .htm или .html. Няма разлика във функционирането между .htm и .html – разширението .htm е от времето, когато разширенията на файловете са били само с три знака.

Какво е нужно за създаване на уеб страница?

• Нужни са ви само текстов редактор, с който да създадете HTML документа и браузър, с който да визуализирате съдържанието на този файл на екрана. Нямате нужда от наемане на сървър или запазване на домейн.
• Създаването на HTML страница може да се извърши с помощта на текстов редактор (Notepad++) или инструменти (WYSIWYG), които не изискват да притежавате познания по HTML. Някои от тези програми са Word Microsoft, FrontPage, Macromedia Dreamweaver и други.
• Основната функция на HTML е да определи структурата на документа от нейното съдържание като текст и мултимедиа. Със CSS и JavaScript вече може да създадем стилове на елементите от документа като: цвят, размер, яркост и много други.

Какво е CSS?

CSS (Cascading Style Sheets) представлява скриптов език за описание на стилове.

CSS се използва за визуално оформление на документи. Най-често се използва за HTML документи.

Чрез CSS се задават различни атрибути на вече използваните тагове в HTML документа като цвят, размери, фон, разположение, прозрачност и много, много други.

CSS си има и своите стилови правила за изписване.

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

След това в специален блок, започващ със скобата „{“ и завършващ с “ }“, се изписват свойствата, които искаме да добавим към даден обект, последвани от символа „:“ и техните стойности.

Добра практика е само структурата и съдържанието да са в HTML документа, а стилизирането да е в отделен CSS файл.

А тази връзка между HTML и CSS файловете може да се направи по няколко начина:

• external CSS файл, свързан с HTML файла чрез тага link;
• inline CSS, в самия HTML елемент чрез тага style;
• дирекотно изписване на свойствата и стойностите им като атрибути към даден таг;

Ето и няколко факта за CSS:

• CSS е съкращение от Cascading Style Sheets, в свободен превод „каскадни стилови страници“.
• Стиловете, указани чрез CSS, определят как ще изглеждат на екрана елементите на един HТМL документ (Интернет страница).
• CSS се наричат каскадни, понеже стилове могат да указват браузърите, потребителите и авторите на Интернет страниците. Тези стилове се наслагват, в известен смисъл преливат един в друг, откъдето и термина „каскаден“.
• CSS спестяват много работа. Дизайнът на всички Интернет страници на един сайт може да се зададе само с един CSS файл, който да е външен и да се свързва към всеки един от HTML файловете.
• CSS дават голяма гъвкавост при дизайна на Интернет страниците, защото при нужда от смяна на дизайна е достатъчно да се промени само този единствен CSS файл.
• CSS команди могат да се задават както в самия HTML документ, така и като отделни файлове с разширение .css, например style.css.
• Голяма част от стиловете, използвани в CSS, са много добре поддържани от всички широко употребявани и популярни браузъри.

Предимства на CSS: разделяне на съдържание и стил

CSS позволява за всеки от елементите (заглавия, параграфи и т.н.) в HTML файла да бъде указан стил.

Въпреки заложените възможности за указване на стил директно в отделните тагове на HTML, има няколко сериозни причини да използвате именно CSS за определяне изгледа на страниците от самото им съдържание.

Разделянето на съдържание и стил дава много по-голяма гъвкавост в управлението на страниците.

Представете си, че сте направили голям сайт с хиляди страници, в които сте използвали атрибути, директно в таговете в HTML документа, за задаване, примерно, цвета на параграфите.

Ако един ден решите да смените цвета на текста на всички параграфи, ще Ви се наложи да отваряте една по една всички страници и на всеки параграф да променяте цвета му отделно и то ръчно!

Ако сте използвали обаче външен CSS файл, свързван към дадения HTML, ще трябва да смените само един ред в CSS файла и това ще е p { color:green; } и промяната автоматично ще бъде приложена към всички параграфи във всички страници, използващи този CSS файл.

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

Лесно можем да преизползваме един и същи CSS файлове в различни проекти.

Веднъж създаден, CSS файлът може да се използва за указване стила на произволен брой HTML страници.

Достатъчно е външният CSS файл да бъде свързан към всяка от тях.

Едно от най-големите предимства е по-бързото зареждане на страниците.

CSS файловете обикновено се запазват в кеш паметта на браузърите, след като се зареди първата HTML страница, свързана към CSS файл.

По тази причина зареждането на нови страници, които използват същия CSS файл, ще бъде оптимизирано.

История и подръжка на CSS от браузърите

Като стандарт CSS е създаден сравнително отдавна. Първата версия е обявена през 1996.

Различните браузъри обаче с различна скорост и в различна степен поддържат стиловете, използвани CSS.

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

Типичен пример е нестандартното определяне ширината на елементи в Internet Explorer.

Този пословичен с несъобразяването си със стандартите браузър обаче не е единствен.

Документирани са стотици грешки за различни версии на Firefox, Netscape и Opera.

Затова поради наличието на подобни несъответствията в браузърите се налага внимателно да се прегледат страниците във всички по-широко използвани браузъри преди публикуването им в Интернет.

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

Целта на курса „HTML5 и CSS3“ е да положи основни знания по уеб технологии и по-конкретно запознаване с HTML5 и CSS3.

С цел по-лесно и качествено обучение „Аула“ създаде специален инструмент, с който да се упражнявате и да тествате Вашия код. Можете да прочетете повече за него тук.

Ако искате да научите повече за онлайн обучението по „HTML5 и CSS3“ от учебен център „Аула“, натиснете тук.