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 форми зробили квантовий стрибок. Завдяки численним новим типам полів можна створювати дуже цікаві форми. Ці нові можливості ви, звичайно ж, ще дізнаєтеся. У цьому відеосемінарі ми почнемо з необхідного набору інструментів для визначення форм. Спочатку розглянемо створення однорядкових полів введення. Ви побачите, як їх можна визначити, як можна заповнити їх значеннями та встановити на недоступний для запису. Також ви дізнаєтеся визначення поля для введення пароля. Це нарешті тип поля, який не раз може знадобитися.

У цьому відео ви дізнаєтеся про додаткові типи полів, які допоможуть вам укомплектувати ваші форми. Конкретно це стосується полів вибору, радіокнопок і прапорців. Всі ці елементи є важливими інструментами, які завжди потрібно мати в формах. Тому має сенс ретельніше розглянути ці та інші елементи.

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

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

У HTML5, окрім вже представлених типів полів, є ще безліч інших цікавих аспектів. Тепер, наприклад, з дуже маленькими витратами можна реалізувати функцію автозаповнення для полів форми за зразком Google. Ці та інші речі показані у цьому відео-тренінгу.

Хто вивчає HTML5, не може обійтися без теми семантики. В цьому та наступних відео-тренінгах ви ознайомитесь з основними елементами, які привносить HTML5, за допомогою яких ви зможете розумно структурувати документи. Фактично, ця логічна структура невід'ємна, коли ви хочете зробити свої веб-сторінки майбутньо зручними.

HTML5 принесла численні нові елементи структурування. Які саме це елементи в принципі є, вже було показано в попередньому відео-тренінгу. Тепер йдеться про практичне застосування цих елементів. Саме ці елементи забезпечують семантичну структуру документів. Ви в цьому відео-тренінгу в першу чергу ознайомитеся з двома елементами: стаття (article) і секція (section). Вони відповідають за основну структуру HTML-документів. На завершення цього відео ще раз глянемо на відмінності між div, article і section.

У HTML5 документи можуть бути розділені не лише на статті та секції. Фактично, тут присутні додаткові елементи для заголовка, підвалу та інших, які сприяють семантичній структурі. Вони однозначно варті уваги та вивчення більш докладно.

У цьому останньому відео-навчанні серії елементів семантики ви дізнаєтеся про інші структурні елементи. Фактично, HTML5 також має елементи для навігаційних областей, маргіналій та для зведених відомостей.

У попередніх версіях HTML вставляти багатомедійний контент було справжньою мукою. Спробували використати комбінацію елементів object та embed, щоб додати відео та звук на веб-сторінку. Чи вдалося відео корректно відтворити, залишалося під питанням. Також у HTML5 було зроблено чимало покращень у цій сфері.

Як вставити відео, ви вже побачили. Звичайно, відео - це не все, що можна показати відвідувачам на веб-сайті. У цьому відео-навчанні описано, які опції HTML5 пропонує щодо вставлення аудіофайлів та Flash-фільмів. Тому і ці речі час від часу потрібно показувати на своєму сайті.

Фрейми в HTML5 більше не існують. Їхні "іменовані" вітрини, фрейми, проте, також змогли вижити в новій епосі HTML та знаходяться на борту HTML5. Під час того, як класичні фрейми поділяють сторінку на незалежні області, через іфрейми можна вбудовувати будь-які ресурси на веб-сторінках.

HTML призначений для структурування контенту. Як тільки ми переходимо до оформлення сторінки, CSS (каскадні таблиці стилів) входить в гру. Бо саме поєднання CSS і HTML дозволяє перетворити звичайну структуру HTML на привабливі веб-сторінки. Цілком досить приділити увагу CSS.

Один термін, з яким ви постійно стикаєтеся в контексті CSS, - "селектори". Ці селектори визначають кінцеві елементи, які має бути відформатовано CSS. У цьому відеоуроці ви познайомитеся з першими селекторами. Тут вам будуть представлені елементні, ID- та універсальні селектори. Ви з ними постійно працюватимете, коли будете створювати свої веб-сторінки з використанням 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-Бойлерплейт - потужний шаблон для веб-сайтів 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