Я вирішив продовжити цю актуальну тему. Я склав список найкращих ресурсів для вивчення html та css, щоб допомогти бажаючим у вивченні цих питань. Пам'ятаю, коли сам починав вебмайстром, мені не вистачало подібної добірки якісних і корисних ресурсів.
Спочатку трохи визначень:
Html (від англійської "HyperText Markup Language" - мова гіпертекстової розмітки) - це стандартна мова розмітки веб-сторінок.
Css (від англійського "Cascading Style Sheets" - каскадні таблиці стилів) - це технологія опису зовнішнього виглядувеб-сторінки.
Без знання html і css вести свій сайт буде дуже проблематично – навіть лічильник статистики або той самий банер поставити не вдасться. Чи не бігати ж за допомогою до фахівців чи створювати тему за темою на форумах? Потрібно просто взяти та вивчити.
За своїм досвідом можу сказати, що html і CSS можна вивчити за 1 місяць. Звичайно, я не говорю про професійні висоти - ви до них самі дістанетеся за бажання.
На мій погляд, кращий спосібвивчити html, css, та й інші тематики, включаючи просування сайтів – це завести свій сайт та на ньому практикуватися. До речі, можете подивитися перший створений мною сайт по картах для гри Counter-Strike, створенням яких я тоді захоплювався. Ось карти та їхні скрини, створені старим Глобатором у ті часи, коли він ще не знав, що таке топ-10, тІЦ та PR, і безтурботно пустував на сонечку створював тривимірні карти 🙂 . Я створив цей сайт протягом місяця, вивчаючи html і css на практиці.
Щоб вивчити html і css, зовсім необов'язково бути технічним фахівцем. Наприклад, я взагалі гуманітарій і з математики у мене в основному було "2" 🙂. Так що вивчити html і css під силу будь-кому. Перераховані мною ресурси підійдуть також і для того, щоб у будь-який момент ви могли з їх допомогою з'ясувати який-небудь момент, що цікавить вас, по html і css.
Сайти для вивчення html та css
Почну добірку корисних ресурсів для вивчення html та css із сайту, по якому я сам займався. Це Дикі уроки html, які написала Валентина Ахметзянова ака Дикунка. Вона настільки весело та цікаво описала всі необхідні моменти, що вивчення html та css за допомогою її уроків перетворюється на захоплююче заняття. До речі, можете прочитати для блогу сайт. Диких уроків цілком достатньо, щоб вивчити HTML і CSS на необхідному для роботи вебмайстром рівні.
Уявляєте, ким би я був, якби розвивався далі у темі Фотошопу? Я був би справжнім монстром! Але я зв'язався з SEO і сяю тут, набираючи ці літери скрюченими від морозу пальцями 🙂 . Та жартую, тут теж тепло і непогано годують 🙂.
Ця сторінка містить матеріали для осіб, які беруть участь у розробці стандартів.
Більшість цієї інформації не захищена паролем. Однак, якщо ви переходите на деякі сторінки, вам може знадобитися пароль.
Норми поведінки
Учасникам комітетів ISO, робочих груп або «Об'єднаних для досягнення консенсусу» пропонується працювати за принципами норм поведінки.
Посібники з дотримання законодавства про захист конкуренції
Дотримання законодавства у процесі встановлення стандартів є важливим для гарантії ефективного функціонування ринкових механізмів та підвищення конкурентоспроможності, а також для підвищення рівня довіри до стандартів. ІСО роз'яснює керівні принципи з питань законодавства всім учасників процесу розробки стандартів.
Будь-які питання, що стосуються керівних принципів законодавства про конкуренцію, можна надсилати групі юристів ISO за електронною адресою.
Авторське право
Усі учасники стандартизації повинні дотримуватися авторських прав щодо публікацій ISO та розробки проектів, а також будь-якого змісту, що стосується ISO. Дані правила відображені у Декларації , з якою всі зацікавлені у стандартизації сторони мають погодитись.
Політика у сфері комунікацій роботи комітету із зовнішніми сторонами та збереженням документів
Учасникам процесів розробки стандартів ISO може бути запропоновано (наприклад, засобами масової інформації) або може виникнути власна ініціатива (наприклад, через соціальних мереж) обмінятися інформацією із зовнішніми сторонами про різні аспекти роботи Комітету. В ІСО була розроблена політика діяльності для таких зовнішніх взаємодій.
Будь-які питання, що стосуються цієї політики, можуть бути спрямовані на електронну поштуСекретаріату TMB: .
Політика захисту даних
Усі сторони, що у процесі стандартизації, мають правничий та обов'язки, що стосуються захисту даних. Вони відображені у Політиці захисту даних, розроблених для членів ISO, а також у Декларації, яку мають виконувати всі сторони, залучені до цього процесу. Він застосовується до даних, що зберігаються в ІТ-сервісах ISO, а також багатьох персональних даних, зібраних у ході роботи зі стандартизації (наприклад, списки присутніх, хвилини).
Пояснення термінів та виразів, що використовуються у стандартах ISO
Міжнародні стандарти та торгівля
Види правових санкцій в ІСО
В ІСО було розроблено документ, у якому узагальнюються питання, пов'язані із застосуванням санкцій та процесом розробки стандартів.
Залучаючи зацікавлені сторони та формуючи консенсус
Діяльність ISO спрямована на гарантію того, що стандарти розробляються зацікавленими сторонами та для зацікавлених сторінТак що потреби ринку будуть задовольнятися більш ефективно.
Нижче Ви можете ознайомитися з документами, що надають посібники із залученням зацікавлених сторін.
…Якщо syntax of HTML є порівняно простим для навчання,…завжди, багато елементів, atributs і…інші concepts that you're going to need to learn and keep track of....While this course is intended to introduce Ви знайдете те, що ви знаєте, що ви не маєте жодного елемента і розрізняється. Ви будете вивчати HTML, і …можна скористатися як можливі посилання на те, що ви, як "виконувати вашу сторінку.
And this is something, 2 documents that you should definitely have bookmarked....So, this is the W3Cs version of HTML5.…You can see they have a latest Publisher Version.…You can go see the Editor"s Draft,…if you want to see what"s coming down, down the pipe.…And, this is pretty large.…If I scroll down, you can see that here"s just the Table of Contents.…And I"m not even going to scroll through all of them.
Resume Transcript Auto-Scroll
Updated
3/30/2017Released
3/16/2015HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your content, whether that's simple website or complex web applications. Записуючи і editуйте свій code.Senior staff autor James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. CSS і JavaScript для створення речей, керування user experiences.
Topics include:
- Why is HTML important?
- Exploring an HTML document
- Formatting content
- Displaying images
- Using nav, article, and div elements
- Linking to pages and downloadable content
- Creating lists
- Controlling styling (fonts, colors, and more)
- Writing basic scripts
Хто на світі всіх миліший, всіх рум'ян і бажаних? Не подумай нічого вульгарного, я маю на увазі лише нову версію мови розмітки - HTML5. Останні версіїсучасних браузерів вже розуміють деякі HTML5-фішки, а значить - саме час почати застосовувати його у своїх проектах.
Що таке HTML5?
На перший погляд HTML5 - це лише нова версія мови розмітки. Однак зараз під цим терміном мають на увазі дещо інше. Розглядати HTML5 без згадки того ж таки CSS3 просто безглуздо, оскільки для розробки справді сучасних web-додатків без нього ніяк не обійтися. Не можна забувати і про JavaScript. З його допомогою реалізується звернення до багатого API, описаного у стандарті HTML5. Резюмуючи все сказане вище, напрошується визначення: HTML5 - це сукупність сучасних технологій/стандартів (JS, HTML5, CSS3 і так далі), що застосовуються для розробки web-додатків.
Крапелька історії
HTML5 з'явився не раптово. Його розробка розпочалася ще у 2007 році. За процес роботи відповідала спеціально створена група від консорціуму W3C. Але багато можливостей HTML5 було придумано ще в рамках стандарту Web Application 1.0, а над ним корпіли аж з 2004 року. Так що насправді HTML5 не така вже і молода технологія, як може здатися на перший погляд.
Перша чорнова версія специфікації HTML5 стала доступною вже 22 січня 2008 року. Минуло три роки, але остаточна версія специфікації так і не готова і навряд чи встигне в найближчі два роки. Цей сумний момент зобов'язує розробників акуратно застосовувати нові можливості у проектах. Специфікація може легко змінитися, та й не всі сучасні браузери (FireFox 4, Google Chrome 10, IE9, Opera 11) повною мірою підтримують нові можливості.
Корисні рецепти
Говорити про теорію HTML5 можна дуже довго, але рубрика у нас називається "Кодинг", тому я пропоную тобі відчути можливості стандарту на практиці. Я не став морочитися над створенням надоригінальних рецептів, а вирішив навести приклади речей, які справді корисні і які вже зараз можна і потрібно застосовувати на своїх сайтах. Тож поїхали.
Рецепт №1: Включаємо Drag&Drop на повну
Однією з приємних няшок (напевно, даремно ти вжив стільки енергетиків, адже тут має бути слово «фішок» - прим. ред.) HTML5 стала можливість застосування File API та Drag and Drop API.
З їхньою допомогою можна організувати красиву передачу файлів з комп'ютера користувача на сервер. Пам'ятаєш, що раніше для відправки файлів завжди було поле з кнопочкою «Browse»? Після її натискання з'являвся стандартний діалог вибору файлів, у якому потрібно вибрати файл для передачі. Назвати цей спосіб зручним язик не повертається. Особливо якщо йдеться про додавання у чергу завантаження кількох файлів.
Трохи пізніше умільці почали ліпити аплоадери на флеші, які надавали більший функціонал, але мали серйозну нестачу – потребу у встановленому флеші. Крім того, в обох випадках користувач не мав можливості додавати файли для передачі шляхом простого перетягування мишкою на сторінку.
Адже технологія Drag&Drop застосовується в системі часто. Мені особисто завжди хотілося просто виділити потрібні файлиі легким помахом щури кинути на сторінку. Це набагато зручніше, ніж нишпорити в пошуках файлу за допомогою стандартного діалогу.
HTML5 вніс свої корективи, і тепер нічого не заважає організувати повноцінний Drag&Drop для передачі файлу на сторінку. Першими цю фічу реалізували гуглівці в Gmail. Якщо ти користуєшся гмилом, то, напевно, давно помітив область, на яку можна перетягнути файли для приточення до письма. Особисто я активно користуюся цією функцією і зараз покажу тобі, як зробити таку ж для свого проекту. Наш проект складатиметься з трьох файлів: sample.html, style.css та scripts.js. Ми, звичайно, могли б обмежитися і одним html-файлом, але тоді код вийшов би нечитаним. Не потрібно заважати HTML із JS або CSS. Краще все розбити по файлах, і потім спокійнісінько з ними працювати. Насамперед підготуємо структуру нашого додатка. Створюй файл sample.html та напиши в ньому:
media="all" href="style.css" />
Для зручності написання коду JavaScript я підключив бібліотеку jquery. Після цього описав структуру майбутнього HTML-документа. Вона проста до неподобства - нам потрібно описати поле, на яке користувач повинен перетягувати файли. Для цього потрібний лише один div-контейнер. Якщо зараз відкрити сторінку в браузері, нічого хорошого ти не побачиш. Щоб наше поле стало помітним візуально, потрібно його оформити при допомоги CSS. Відкриваємо файл style.css та пишемо в нього наступний код:
#box (
width: 500px;
height: 300px;
border: 2px dashed #000000;
background-color: #FCFFB2;
text-align: center;
color: #3D91FF;
font-size: 2em;
font-family: Verdana, sans-serif;
Moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
# label (
position: relative;
top: 2%;
}
Ідентифікатор "box" - це і є наш майбутній контейнер для прийому файлів (на цю область користувач повинен перетягувати документи). Щоб користувач не схибив, я роблю область побільше і як варіант обрамлення вибираю dashed - пунктирні лінії. Звичайні пунктирні лінії виглядають не дуже, тому я відразу ставлю значення для властивостей: -moz-border-radius і -webkitborderradius. Ось зараз ти можеш відкрити створену сторінку у браузері та оцінити загальний вигляд.
Однак якщо зараз спробувати щось перетягнути, нічого цікавого не станеться. Перетягується файл просто відкриється в web-браузері, і все. Виправити ситуацію допоможе невеликий шматочок коду на JavaScript:
$(document).ready(function() (
//Додаємо обробники подій
Var mybox = document.getElementById("box")
Mybox.addEventListener("dragenter", dragEnter, false);
Mybox.addEventListener("dragexit", dragExit, false);
Mybox.addEventListener("dragover", dragOver, false);
Mybox.addEventListener("drop", drop, false);
});
function dragEnter(evt) (
Evt.stopPropagation();
Evt.preventDefault();
}
function dragExit(evt) (
Evt.stopPropagation();
Evt.preventDefault();
}
function dragOver(evt) (
Evt.stopPropagation();
Evt.preventDefault();
}
function drop(evt) (
Evt.stopPropagation();
Evt.preventDefault();
Var files = evt.dataTransfer.files;
Var count = files.length;
If (count > 0)
HandleFiles(files);
}
function handleFiles(fi les) (
// Беремо перший файл
//Якщо потрібно працювати з декількома
//файлами, тут треба організувати перебір
Var file = files;
Document.getElementById("label").innerHTML =
"Впіймав:" + file.name;
Var reader = новий FileReader();
Reader.onprogress=handleReaderProgress;
Reader.readAsDataURL(file);
}
function handleReaderProgress(evt) (
If (evt.lengthComputable) (
If (evt.loaded = evt.total) (
Alert("Завантажений...");
}
}
}
На перший погляд код може здатися громіздким і незрозумілим, але ті, хто хоч трохи знайомий з JavaScript та jquery, одразу мають розібратися з тим, що відбувається. На початку я визначаю події, виникнення яких мене цікавить. Для кожного з них описую окрему функцію. Наприклад, подія dragExit виникає, коли користувач переміщує курсор миші з елемента, над яким відбувається операція перетягування. Якщо користувач перетягнув файл, то керування бере на себе функцію handleFiles().
У ній я навмисно звертаюся до першого файлу (files) і починаю з ним працювати. Врахуй, користувач може перетягнути відразу кілька файлів. Якщо твоя програма повинна вміти обробляти такі ситуації, то організуємо перебір всього масиву files. У функції handleFiles() відбувається все найцікавіше.
Спочатку я виводжу в елемент label (пам'ятаєш напис «Тягни свої файли сюди»?) ім'я файлу, який користувач перетягнув на активну область, а потім починаю його зчитувати за допомогою об'єкта типу FileReader(). Докладніше про нього можна почитати у цій статті: html5rocks.com/tutorials/file/dndfiles. Про всяк випадок я визначаю обробник події onProgress для об'єкта типу FileReader(). Ця подія буде викликатися щоразу, коли відбудеться зчитування порції даних. У самому обробнику я виставив умову: якщо обсяг завантажених даних дорівнює розміру файлу, то зчитування успішно завершено, і можна виводити радісне повідомлення.
Рецепт №2: Пий пиво, дивися відео, слухай рок
До появи HTML5 перегляд відео у web'і здійснювався за допомогою різноманітних flash-плеєрів. Не можна сказати, що перегляд відео в такий спосіб незручний. Проблеми є хіба що в безпеці ( Останнім часом Flash Player просто кишить вразливістю) та необхідності встановлення самого плагіна. Стандарт HTML5 пропонує елегантне рішення - вбудована можливість програвання відео- та аудіо-контенту.
Напевно, багато хто вже здогадався, що я говорю про теги
Зверніть увагу, що в прикладі для тега
Навіщо це може стати в нагоді? Як варіант, як таке зображення можна вставляти логотип своєї компанії/проекту. Тег
Рецепт №3: Where are you now (geolocation API)
Geolocation API – програмний інтерфейс для визначення координат користувача. З отриманих даних легко відзначити місцезнаходження користувача, скажімо, на Google Maps. Де можна використовувати цю можливість? Та багато де! Наприклад, розробники популярного сервісу мікроблоггінгу Twitter використовують Geolocation API у web-інтерфейсі твіттер-клієнта. Якщо користувач дозволяє отримувати відомості про своє місцезнаходження, то до всіх його твіт буде додаватися місто, в якому він знаходиться в даний момент.
Не сумніваюся, що зараз тебе мучить питання: А звідки GAPI отримують відомості про місцезнаходження? Навіть не думай, що у справі причетні супутники-шпигуни та інші бондівські штучки. Все куди прозаїчніше - пакет інформації для аналізу будується на підставі даних про IP-адресу, найближчих Wi-Fi хотспотах, GPS (за наявності пристрою), GSM cell ID і так далі. Якщо зацікавився теорією та практикою отримання зразкових координат з перелічених вище джерел, то раджу підняти підшивку ][ і знайти статтю Step'а на цю тему, де він добре розібрав теоретичну частину, а також дав огляд відповідного софту. Тепер поглянемо з прикладу використання GAPI. Все дуже просто і зрозуміло:
Довгота: Unknown
Перед тим, як намагатися отримати координати, необхідно переконатися, що браузер підтримує GAPI. Якщо метод geolocation повернув true, то все гаразд і можна виконати спробу отримання координат. Для цього скористаємося методом getGurrentPosition об'єкта navigator. У разі успіху ми отримаємо координати, які прямісінько вирушать у документ.
Рецепт №4: База даних у браузері
Під час створення web-додатків ми звикли використовувати бази даних. MySQL, SQLite – продукти, знайомі кожному програмісту. П'ята версія HTML приносить нам ще один подарунок – можливість користуватися автономною SQLite базою даних. Стоп!
Виходить, що всі дані зберігатимуться на комп'ютері користувача? Так, саме так. Не треба зчиняти крик, що це небезпечно. Для певних проектів ця можливість цілком може згодитися. На жаль, поки що не всі браузери дозволяють працювати з цією базою.
Наприклад, IE9 і FF4 поки що такої можливості не мають, так що познайомитися з фішкою на практиці можна хіба що в Google Chrome. Я не наводитиму приклад реального коду, а покажу лише загальний принцип роботи:
this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("create mytable if not exists " +
"checkins(id integer primary key asc, field_number_one string)",
, function() ( console.log("Запит успішно виконаний"); ));
);
Уважніше придивившись до наведеного вище прикладу, ти помітиш, що загалом робота із вбудованою БД відбувається так само, як і зі звичайним SQLite: відкриваємо базу, готуємо текст запиту та виконуємо його.
HTML5.Shutdown()
Застосовувати HTML5 у своїх проектах чи ні – справа твоя. Я вважаю, що зараз саме час. Якщо ти професійно займаєшся розробкою сайтів, то не лінуйся вбудовувати HTML5-фішки вже зараз. Звісно ж, не забувай дбати про сумісність - реалізовуй підтримку, як для сучасних браузерів, так і для застарілих. У тебе є для цього все необхідне. Не гальмуй і намагайся, щоби твої проекти виділялися на тлі інших. Успіхів!
Як підстрахуватися?
Протягом усієї статті я говорив, що зараз сучасні браузери підтримують різний обсяг можливостей HTML5. Саме тому потрібно бути акуратним і намагатися не використовувати дуже екзотичні речі. Відразу виникає запитання: "А як дізнатися, які можливості HTML5 підтримує певний браузер?" Є кілька способів вирішення цього завдання, але мені найбільше до вподоби застосування крихітної JavaScript-бібліотеки – Modernizr (modernizr.com).
Бібліотека розповсюджується абсолютно безкоштовно і варто підключити її до свого проекту, як вона відразу виведе список можливостей HTML5, які підтримує твій браузер. Щоб протестувати функціональність бібліотеки, тобі не обов'язково одразу її качати та підключати до свого проекту. Досить просто зайти на офіційний сайт бібліотеки і ти одразу побачиш, що підтримує твоя бродилка, а що ні. Подивись скріншоти відвідування сайту за допомогою Google Chrome та Internet Explorer 9. Незважаючи на хорошу pr-компанію та вихваляючі статті, бродилка від Microsoft явно підтримує менше можливостей, ніж Google Chrome.
HTML5 посуне Flash
Однією з найцікавіших фішок HTML5 є можливість створення анімації. Досягається це шляхом міксу HTML5 та CSS3.
Така анімація виглядає досить красиво та у багатьох випадках зможе замінити Flash. Можу з упевненістю сказати, що це буде дуже не скоро, оскільки сьогодні Flash освоїти простіше, ніж розібратися в малозрозумілому HTML5/CSS3-коді (імхо). Тим не менш, знати про таку фічу ти зобов'язаний. Вкрай рекомендую тобі пройтися за наведеними нижче посиланнями і на власні очі побачити красиві демки, що демонструють можливість анімації.
- Красива демка, що показує можливості Canvas'a: feedtank.com/labs/html_canvas;
- Красива 3D-скринька з вбудованим рядком пошуку від Google: ;
- Один клік мишею і сторінка почне заповнюватися кулями. Більше кліків – більше куль. Як наповниш сторінку до країв – спробуй їх різко перетягнути. Виглядає дуже забавно: mrdoob.com/projects/chromeexperiments/ball_pool;
- Просто шалена демка, що демонструє різні хімічні сполуки. Обов'язково варто переглянути: alteredqualia.com/canvasmol;
- Ти колись хотів відчути себе патологоанатомом та досліджувати таємниці людського тіла?
Якщо так, то цей лінк точно для тебе. Компанія Google зробила чудову демку із суміші технологій WebGL, HTML5, CSS3 та Flash. Результатом коктейлю став інтерактивний додаток, що демонструє 3D-тіло людини, у якої ти можеш розглядати будову внутрішніх органів. Я коли побачив його вперше – не міг відірватися.
Щоб допомогти вам, ми збираємося разом з тим, щоб вибрати ресурси, які будуть потрібні вам, які потрібно, щоб дізнатися, якщо ви будете стукати, і ви збираєтеся виконати ваші знаки в часі.
01. HTML Cheat Sheet
Це необов'язково додатковий HTML cheat sheet включає в себе повний список всіх HTML елементів, що довжини з описами, code examples and live previews. Ви можете організувати tags alfabetically або категорії, і навіть download it as a PDF to refer to later.
02. CSS Cheat Sheet
Якщо ви перебуваєте з CSS, merely remembering all the many tags and technical terms can be hugely intimidating. Don't let that put you off, though; keep this helpful cheat sheet bookmarked, або just print it out, to quickly find the elements you need.
03. CSS-Tricks
When it launched in 2007, цей сайт був усі про CSS. Тепер це 'expanded quite a bit, але 's still plenty of helpful information and tutorials o CSS and HTML for you to get stuck into. It's definitely worth a visit.
04. CSS Wizardry
CSS is easy to learn but difficult to master. Harry Roberts" CSS Wizardry є деякі великі сторінки на ходу-відповідь про написання строгого і maintainable CSS, як BEM методологія і рефакторування (яка є серед hardest parts).
05. CodePen's Yearly Top Pens
Один з кращих способів освіти HTML/CSS є оцінка cool demos ви знайдете, і CodePen's року Top Pens є великий для того. CodePen's integrated UI для перегляду в code є також зручним.
06. Web Design Weekly
HTML і CSS є як завжди evolving. Щоб досягти часу з останніми методологіями і особливостями, ми recommend цей email newsletter. Це прийде до кінця, який є тільки згодом, що ви "уважно read it.
07. Responsive Design Weekly
Responsive is a vital part of the web designer"s toolkit this days, and help you keep up to date, Justin Avery spends hours every week curating the best responsive web design contents and interviewing industry leaders, and sends it out as Friday (You might also like our post on .)
08. Create non-rectangular layouts with CSS shapes
