HTML и CSS за начинаещи

Който иска да създаде уебсайтове, по-рано или по-късно ще се сблъска с HTML. Затова заедно ще завладеем прекрасния свят на HTML в предстоящите видео обучения. Ще видите стъпка по стъпка какво представлява този език и как може да се създават уебсайтове с него, комбинирани със стилови листове. В началото обаче стои един въпрос: Какво всъщност е HTML и стиловите листове? В края на това видео обучение ще разберете също така кои софтуерни програми са необходими за създаване и тестване на уебсайтове.

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

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

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

За добро разбиране на текстове е необходимо разумно форматиране. И това включва не само структурни елементи като заглавия и параграфи. Например, в HTML можете да маркирате цитати и да отбележите отделни участъци като удебелени или курсивирани. Необходимите инструменти за това предоставя този видео урок.

Елементите, които ще срещате много пъти в HTML, са списъци. Това се отнася не само за списъци на задачи и контактни данни, но и за дефиниране на менюта. Списъците играят много централна роля в HTML. Следователно е необходимо да хвърлите подробен поглед върху тях. В този видео курс ще научите всички видове списъци, които HTML предлага. Това са списъци с точки, номерирани списъци, дефиниционни списъци и меню списъци. Освен това ще получите указания за това как да промените визуално списъците, когато е необходимо.

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

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

Едва ли има уебсайт, който може да се обходи без графики. Неудивително е, че графиката заема важно място и в този ред. В този и следващите видео уроци ще бъде показано как да вграждате графики в уебсайтовете си. В началото обаче друг важен аспект изпъква: Кои формати на изображения са подходящи за онлайн използване? Във втората част ще бъде обсъдено как да се реферират пътищата към изображенията.

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

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

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

За да го посочим напред: Особено в HTML5 формулярите направиха квантов скок. Благодарение на множеството нови типове полета можем да създадем много интересни формуляри. Разбира се, ще научите за тези нови възможности. В този видео курс, обаче, започваме с основните инструменти, от които се нуждаем за дефиниране на формуляри. Първоначално се разглеждат едноредовите полета за въвеждане на данни. Ще видите как може да ги дефинирате, как да ги предварително попълните със стойности и как може да ги правите нередактируеми. Също така ще научите как да дефинирате полета за пароли. Това е полетип, който винаги може да зatrebe.

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

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

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

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

Който се занимава с HTML5, не може да избегне темата за семантиката. Ще научите най-важните елементи, които HTML5 предлага, с които можете да структурирате документите си разумно, в този и следващите видео-курсове. Фактически тази логична структурираност е необходима, ако искате да направите уебсайтовете си устойчиви за бъдещето.

HTML5 внася много нови структурни елементи. Кои са тези основни елементи, вече бяха показани в предишното видео обучение. Сега става въпрос за практичното им използване. Защото тези елементи осигуряват семантична структура на документите. В това видео обучение преди всичко ще научите двата елемента article и section. Те осигуряват основната структура на HTML документите. В края на това видео ще се разгледат също разликите между div, article и section.

В HTML5 документите не могат да бъдат разделени само на статии и секции. Всъщност има много допълнителни елементи като header, footer и други за семантично структуриране. Тези определено заслужават да бъдат разгледани по-подробно.

В този последен видео урок от поредицата за семантични елементи ще научите още структуриращи елементи. HTML5 наистина предлага елементи за навигационни области, маржинали и резюмета.

В по-ранни версии на HTML вграждането на мултимедийно съдържание беше мъка. С комбинация от елементите object и embed се опитваха да се внедрят видеоклипове и звук на уебсайта. Дали вграденото видео наистина ще се възпроизведе, беше под въпрос. Също в тази област има извършени значителни промени в HTML5.

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

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

HTML се използва за структуриране на съдържанието. Когато става въпрос за дизайн на страницата, идват наред Cascading Stylesheets (CSS). Защото само комбинацията от CSS и HTML позволява да се направят привлекателни уебсайтове от скучна HTML структура. Достатъчно добра причина, за да се хвърли по-подробен поглед върху CSS.

Един термин, който ще срещате отново и отново в контекста на CSS, е този на "селекторите". Чрез тези селектори се определят елементите, които трябва да бъдат форматирани с CSS. В този видео курс ще научите първите селектори. Тук ще ви бъдат представени елементовите, идентификаторните и универсалните селектори. С тях ще трябва да се занимавате всеки ден, когато оформяте уебсайтовете си с CSS.

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

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

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

Чрез представените в този видео урок CSS свойства можете да настроите визуално текстовете и знаците. Например можете да промените разстоянията между отделните букви и да подравните текстовете. Тези свойства също така ви помагат да представите текста атрактивно.

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

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

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

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

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

Когато става въпрос за оформяне на уебсайтове, така наречената „коробна модел“ ще бъде вашият постоянен спътник. Защото по този начин в крайна сметка се определя как и къде се поставят елементите.

За да поставите елементите в уебсайта на желаните места, трябва да използвате определени CSS свойства.

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

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

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

В следващите видео обучения ще ви покажа как да реализирате поетапно изграждане на уеб дизайн. За целта се използват много различни подходи. Често дизайните се създават в Photoshop. След това се изрязват отделните елементи и се сглобяват чрез CSS и HTML отново като уебсайт. Това е начина, по който се постъпва и тук. Обаче, вместо Photoshop използвам безплатния софтуер GIMP. Описаните стъпки могат да се проследят и в Photoshop.

Първите стъпки към собствения макет бяха направени в предходното видео урок. Разбира се, липсват още много елементи. Те ще бъдат добавени в този видео урок. Веднага след като макетът е готов, продължаваме с изрязването, наречено "Slicen". Това е финалният работен процес, чрез който се осъществява възможността да се изпълни създадения дизайн на практика чрез HTML и CSS.

Дизайнът сте създали. Сега е време за неговото практическо изпълнение. В този видео курс ще създадем заедно основната HTML структура на уебсайта.

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

Важен аспект за една визуално привлекателна уебстраница е разбира се шрифтът й. През този курс вече сте научили възможностите, които ви предоставят HTML и CSS по отношение на оформлението на шрифтовете. В този видео курс те се използват за подобряване на страницата. Като че ли няма да се ограничим само до класическите варианти. Магическата дума за използването на "екзотични" шрифтове е @font-face.

Обикновено трябва да предоставите възможност на посетителите си за контакт. В най-простия случай изписвате телефонен номер и/или имейл адрес. Това е един начин, но за посетителите не е особено удобен. Затова ще създадем формуляр в това видео-обучение, по който посетителите могат лесно да се свържат с нас. И разбира се, ще използваме възможностите, които ни предоставят HTML5 и CSS3.

Основната структура и базовото оформление на формуляра са дефинирани и завършени. И всъщност формулярът изглежда вече доста привлекателен. Благодарение на CSS3 обаче има още много възможности, когато става въпрос за подобряване на визуалния вид на формуляра. Затова в това видео обучение формулярът ще бъде оформен още малко.

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

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

Представени са:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5 Boilerplate е мощен шаблон за уебсайтове на HTML5 и CSS3; прави HTML5 възможно най-съвместим с различните браузъри и включва някои много добри кодови примери в областта на JavaScript, CSS3 и разбира се HTML.

В това видео обучение бих искал да ви представя тези функции. За започване в областта на HTML5 и CSS3 в момента няма по-добър шаблон.

В този видео урок бих искал да ви представя някои много полезни инструменти, с които можете да разработвате HTML5 и CSS3.

Сред тях са:
html5css3box.com
kuler.adobe.com (сега https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com