To help you out, we "ve gathered together a selection of resources that will tell you what you need to know, help you when you" re stuck, and get you expanding your skills in no time.
01. HTML Cheat Sheet
This incredibly helpful HTML cheat sheet includes a full list of all HTML elements, along with descriptions, code examples and live previews. You can organise the tags alphabetically or by category, and even download it as a PDF to refer to later.
02. CSS Cheat Sheet
If you "re just starting out with 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, or just print it out, to quickly find the elements you need.
03. CSS-Tricks
When it launched in 2007, this site was all about CSS. Now it "s expanded quite a bit, but there" s still plenty of helpful information and tutorials about 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 has some of the best articles on the nitty-gritty of writing scalable and maintainable CSS, like the BEM methodology and refactoring (which are among the hardest parts).
05. CodePen "s Yearly Top Pens
One of the best ways to learn HTML / CSS is to dissect cool demos you discover, and CodePen "s yearly Top Pens are great for that. The demos range from cool to" I didn "t even know that was possible". CodePen "s integrated UI for diving into the code is also convenient. In a similar vein, you might also like to check out our post.
06. Web Design Weekly
HTML and CSS are both constantly evolving. To stay up to date with the latest methodologies and features, we recommend this email newsletter. It comes once a week, which is just often enough that you "ll actually read it.
07. Responsive Design Weekly
Responsive is a vital part of the web designer "s toolkit these days, and to help you keep up to date, Justin Avery spends hours every week curating the best responsive web design content and interviewing industry leaders, and sends it out as a newsletter every Friday (You might also like our post on.)
08. Create non-rectangular layouts with CSS shapes
... Although the syntax of HTML is relatively simple to learn, ... there "s, still a lot of elements, attributes and ... other concepts that you" re going to need to learn and keep track of. ... While this course is intended to introduce you to the essentials of HTML, it "s ... really not designed to teach you every single element and attribute available. ... So with that in mind, I want to give you a couple of online HTML resources, ... that can really help you as you begin learning HTML, and ... can serve as valuable references later on, as you "re authoring your own pages. ... Now we" re going to start, at the specifications themselves. ...
And this is something, two 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 own content, whether that "s simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.
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
Дана сторінка містить матеріали для осіб, які беруть участь в розробці стандартів.
Велика частина цієї інформації не захищена паролем. Однак, при переході на деякі сторінки, Вам може знадобитися пароль.
Норми поведінки
Учасникам комітетів ІСО, робочих груп або «об'єднавшись для досягнення консенсусу» пропонується працювати за принципами норм поведінки.
Керівництва по дотриманню законодавства про захист конкуренції
Дотримання законодавства в процесі встановлення стандартів важливо для гарантії ефективного функціонування ринкових механізмів і підвищення конкурентоспроможності, а також для підвищення рівня довіри до стандартів. ІСО роз'яснює керівні принципи з питань законодавства для всіх учасників процесу розробки стандартів.
Будь-які питання, що стосуються керівних принципів законодавства про конкуренцію, можна направляти групі юристів ІСО на електронну адресу.
Авторське право
Всі учасники діяльності по стандартизації повинні дотримуватися авторські права щодо публікацій ІСО і розробки проектів, а також будь-якого змісту, що стосується ІСО. Дані правила відображені в Декларації, з якої всі зацікавлені в стандартизації сторони повинні погодитися.
Політика в сфері комунікацій роботи комітету з зовнішніми сторонами і збереженням документів
Учасникам процесів розробки стандартів ІСО може бути запропоновано (наприклад, засобами масової інформації) або може виникнути власна ініціатива (наприклад, за допомогою соціальних мереж) обмінятися інформацією з зовнішніми сторонами про різні аспекти роботи комітету. В ІСО була розроблена політика діяльності для таких зовнішніх взаємодій.
Будь-які питання, що стосуються даної політики, можуть бути спрямовані на електронну пошту секретаріату TMB:.
Політика захисту даних
Всі сторони, які беруть участь в процесі стандартизації, мають права і обов'язки, що стосуються захисту даних. Вони відображені в Політиці захисту даних, розроблених для членів ІСО, а також в Декларації, яку повинні виконувати всі сторони, залучені в цей процес. Він застосовується до даних, що зберігаються в ІТ-сервісах ІСО, а також багатьом персональних даних, зібраних в ході роботи по стандартизації (наприклад, списки присутніх, хвилини).
Пояснення термінів і виразів, які використовуються в стандартах ІСО
Міжнародні стандарти та торгівля
Види правових санкцій в ІСО
В ІСО був розроблений документ, в якому узагальнюються питання, пов'язані із застосуванням санкцій та процесом розробки стандартів.
Залучаючи зацікавлені сторони і формуючи консенсус
Діяльність ІСО спрямована на гарантію того, що стандарти розробляються зацікавленими сторонами і для зацікавлених сторін, Так що потреби ринку будуть задовольнятися більш ефективно.
Нижче Ви можете ознайомитися з документами, що надають керівництва по залученню зацікавлених сторін.
Хто на світі всіх миліше, всіх рум'яної і бажаною? Чи не подумай нічого вульгарного, я маю на увазі всього лише нову версію мови розмітки - 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 \u003d "all" href \u003d "style.css" /\u003e
Для зручності написання коду на 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 \u003d 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 \u003d evt.dataTransfer.files;
Var count \u003d files.length;
If (count\u003e 0)
HandleFiles (files);
}
function handleFiles (fi les) (
// Беремо перший файл
// Якщо потрібно працювати з декількома
// файлами, то тут потрібно організувати перебір
Var file \u003d files;
Document.getElementById ( "label"). InnerHTML \u003d
"Зловив:" + file.name;
Var reader \u003d new FileReader ();
Reader.onprogress \u003d handleReaderProgress;
Reader.readAsDataURL (file);
}
function handleReaderProgress (evt) (
If (evt.lengthComputable) (
If (evt.loaded \u003d 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 \u003d 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-тіло людини, у якого ти можеш розглядати будову внутрішніх органів. Я коли побачив його в перший раз - не міг відірватися.