# data[].attributes.headline
Перегляньте презента

# data[].attributes.body
Перегляньте презентацію та
виконайте  практичну роботу за зразком. Результати своєї роботи завантажити на Google-диск, відкривши доступ на ел. адресу: nadiya231273@gmail.com
і додати посилання за допомогою плюса в цьому стовбчику . Якщо виникнуть питання -задавайте у вайбері 0506663898 або на цій інтерактивній дошці.

# data[].attributes.attachment_link.title
Практичне завдання_11

# data[].attributes.attachment_link.title
Таблиці каскадних стилів (CSS)

# data[].attributes.headline
Тема уроку: "Таблиці

# data[].attributes.body
Тема уроку: "Таблиці та списки на веб-сторінках".
Перегляньте презентацію (за потреби, також можна почитати додатковий матеріал) та виконайте практичне завдання.
Результати своєї роботи завантажити на Google-диск, відкривши доступ на ел. адресу: nadiya231273@gmail.com
і додати посилання за допомогою плюса в цьому стовбчику . Якщо виникнуть питання -задавайте у вайбері 0506663898 або на цій інтерактивній дошці.

# data[].attributes.attachment_link.title
Таблиці та списки на веб-сторінках

# data[].attributes.attachment_link.title
Текст для практичного завдання

# data[].attributes.attachment_link.authors[].name
Хауди Хо™ - Просто о мире IT!

# data[].attributes.attachment_link.title
Учим CSS за 1 час! #От Профессионала

# data[].attributes.body
Теоретичний матеріал

# data[].attributes.attachment_link.title
Стильове оформлення сторінок

# data[].attributes.headline
Уроки для початківці

# data[].attributes.body
Уроки для початківців, довідковий матеріал

# data[].attributes.attachment_link.provider_name
WebSunSay - Основи HTML, CSS, JavaScript, PHP

# data[].attributes.attachment_link.readable_text
Перед вами сайт, на якому можна абсолютно безкоштовно пройти курс навчання мові HTML. Основна частина змісту на сайті - це переклад українською мовою матеріалів сайту W3Schools.com - найбільшого і найвідомішого ресурсу для веб-розробників, який адаптований для україномовного користувача. Також на сайті ви можете знайти додаткові матеріали даної тематики.

Із самого початку весь матеріал розділений на невеличкі уроки, в кожному з яких максимально докладно викладено матеріал по кожній темі. Для новачків рекомендується проходити уроки в тому порядку, в якому вони викладені. Але якщо ви вже раніше стикалися з мовою HTML (наприклад, вивчали її в школі) або навіть намагалися її вчити самостійно за допомогою Інтернету - дивилися відеоуроки або читали підручники - вам також будуть корисними дані уроки. Тут ви зможете знайти саме ті матеріали, які вам необхідні.

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

На сайті представлені уроки як для новачків, так і для більш досвідчених користувачів, які вже раніше, можливо, вивчали мову HTML або стикалися з нею в процесі вивчення веб-технологій і мов веб-програмування.

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

Чим ці уроки з вивчення мови HTML відрізняються від інших?

В мережі Інтернет є безліч сайтів, книг і відеоуроків, за якими можна вивчати мову розмітки HTML разом зі стилями - CSS. Але більшість з них написані тими, хто просто банально намагається заробити гроші (на книгах, сайтах або відео на Youtube). Крім того, сайти або книги, які були написані лише 2 - 3 роки тому, і відеоуроки на YouTube, дуже швидко застарівають і дуже рідко підтримуються своїми авторами на протязі тривалого часу. Відповідно, навчальні матеріали про HTML / CSS також дуже швидко втрачають свою актуальність. Те, що було стандартом ще якихось 3-5 років тому, зараз вже просто стає неактуальним і не затребуваним. Все змінюється, особливо в сфері web-технологій.

На даному ж сайті, який, до речі, зроблений фактично за допомогою лише HTML/CSS, матеріали взяті безпосередньо із першоджерел - сайтів, які є основними по вивченню даних технологій на просторах Інтернету - онлайн школи w3schools.com, W3C ( Консорціуму Всесвітньої павутини) - www.w3.org, WHATWG Живого стандарту - https://whatwg.org/, MDN.Mozilla. Саме із цих сайтів і береться вся інформація по офіційно затвердженим стандартам і веб-технологіям.

На даному адаптованому для україномовного користувача сайті розміщений матеріал, який є найбільш актуальним на момент створення сайту, при цьому матеріали викладаються як в оригінальному оформленні (як на сайтах - першоджерелах, які є англомовними, але в українському перекладі), так і з додатковими поясненнями та прикладами від автора даного сайту. Матеріали в уроках викладаються за принципом від простого до складного, що дозволяє вивчати HTML/CSS навіть новачкам без початкових знань веб-технологій чи веб-програмування. Дані матеріали, якщо їх вивчати поступово і згідно викладеному порядку, є доступними для розуміння будь-якому новачкові, навіть дітям молодшого шкільного віку, які вміють лише більш-менш нормально читати, користуватися комп'ютером та Інтернетом і при цьому мають бажання вчитись.

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

Починати вивчати веб-технології необхідно саме із HTML/CSS, бо саме вони є основою всіх сайтів Інтернету. Далі, коли ви вже будете добре знати і вміти використовувати HTML/CSS, варто починати вивчати мову програмування, яка використовується на стороні клієнта (браузером) - JavaScript. Знання і володіння цими трьома технологіями складає фронтенд (front end) - частину веб-розробки, яка слугує для взаємодії між користувачем та серверною частиною, яка, в свою чергу, обслуговується веб-розробниками з бекенду (back end). Для бекенду необхідні знання таких мов програмування і технологій, як PHP, SQL, Node.js, Python та ін.

У деяких розділах на сайті викладені матеріали для більш продвинутих користувачів, які вже засвоїли основи HTML5/CSS3 і бажають продовжити навчатись веб-технологіям та веб-програмуванню. Зокрема, це основи мов програмування JavaScript, PHP, SQL, Python, а також фреймворки jQuery, Bootstrap та ін.

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

За допомогою мови HTML ви можете створити свій власний веб-сайт.

Цей посібник від школи w3schools.com допоможе вам навчитись основам мови розмітки веб-сторінок HTML.

HTML легко вивчити - ви будете просто насолоджуватися навчанням!

Приклади в кожній главі

Цей навчальний посібник від w3schools.com містить сотні прикладів HTML.

З онлайн-редактором HTML на сайті w3schools.com ви можете редагувати HTML код і, натиснувши кнопку, відразу переглянути результат.
Натисніть кнопку "Спробуйте самі!", щоб дізнатися, як вона працює. Почніть вивчати HTML зараз!
Приклади HTML

Наприкінці HTML підручника можна знайти більше 200 прикладів.

З онлайн-редактором w3schools.com ви можете самостійно редагувати і перевіряти кожен приклад.
Перейдіть до HTML-прикладів!
HTML-вправи та вікторини

Перевірте свої навички HTML у W3Schools!
Запустіть HTML-вправи! Запустіть HTML-вікторину!
HTML довідники

У W3Schools ви знайдете повні довідники про теги, атрибути, події, назви кольорів, сутності, набори символів, кодування URL, коди мов, HTTP меседжі тощо.
Довідник тегів HTML
Здати іспит зі знання HTML - отримати диплом!

Онлайн сертифікація W3Schools

Ідеальне рішення для професіоналів, яким необхідно збалансувати роботу, сім'ю та побудову кар'єри.

Більше 25 000 сертифікатів вже видано!

Отримати сертифікат "

HTML сертифікат документує Ваші знання з HTML.

CSS сертифікат документує Ваші знання про розширений CSS.

JavaScript сертифікат документує Ваші знання про JavaScript і HTML DOM.

jQuery сертифікат документує Ваші знання про jQuery.

PHP сертифікат документує ваші знання про PHP і SQL (MySQL).

XML сертифікат документує ваші знання про XML, XML DOM і XSLT.

Bootstrap сертифікат документує ваші знання про фреймворк Bootstrap.

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.

Будь ласка, увімкніть JavaScript для перегляду коментарів на основі Disqus.

# data[].attributes.attachment_link.keywords[]
для початківців

# data[].attributes.attachment_link.title
HTML. Старт. Урок №1. Основи HTML5. Курси W3schools українською. Уроки для початківців

# data[].attributes.attachment_link.description
Перед вами сайт, на якому можна абсолютно безкоштовно пройти курс навчання мові HTML. Основна частина змісту на сайті - це переклад українською мовою матеріалів сайту W3Schools.com - найбільшого і найвідомішого ресурсу для веб-розробників, який адаптований для україномовного користувача. Також на сайті ви можете знайти додаткові матеріали даної тематики.

# data[].attributes.attachment_link.title
Практичне завдання

# data[].attributes.attachment_link.readable_text
Проста таблиця

Мої оцінки

Предмет | Оцінки
Інформатика | 12

# data[].attributes.attachment_link.title
Проста таблиця (заготовка)

# data[].attributes.headline
Теоретичний матеріал

# data[].attributes.body
Теоретичний матеріал

# data[].attributes.headline
Теоретичний матеріал

# data[].attributes.body
Теоретичний матеріал

# data[].attributes.headline
Уроки для початківці

# data[].attributes.body
Уроки для початківців, довідковий матеріал

# data[].attributes.attachment_link.provider_name
WebSunSay - Основи HTML, CSS, JavaScript, PHP

# data[].attributes.attachment_link.readable_text
Перед вами сайт, на якому можна абсолютно безкоштовно пройти курс навчання мові HTML. Основна частина змісту на сайті - це переклад українською мовою матеріалів сайту W3Schools.com - найбільшого і найвідомішого ресурсу для веб-розробників, який адаптований для україномовного користувача. Також на сайті ви можете знайти додаткові матеріали даної тематики.

Із самого початку весь матеріал розділений на невеличкі уроки, в кожному з яких максимально докладно викладено матеріал по кожній темі. Для новачків рекомендується проходити уроки в тому порядку, в якому вони викладені. Але якщо ви вже раніше стикалися з мовою HTML (наприклад, вивчали її в школі) або навіть намагалися її вчити самостійно за допомогою Інтернету - дивилися відеоуроки або читали підручники - вам також будуть корисними дані уроки. Тут ви зможете знайти саме ті матеріали, які вам необхідні.

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

На сайті представлені уроки як для новачків, так і для більш досвідчених користувачів, які вже раніше, можливо, вивчали мову HTML або стикалися з нею в процесі вивчення веб-технологій і мов веб-програмування.

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

Чим ці уроки з вивчення мови HTML відрізняються від інших?

В мережі Інтернет є безліч сайтів, книг і відеоуроків, за якими можна вивчати мову розмітки HTML разом зі стилями - CSS. Але більшість з них написані тими, хто просто банально намагається заробити гроші (на книгах, сайтах або відео на Youtube). Крім того, сайти або книги, які були написані лише 2 - 3 роки тому, і відеоуроки на YouTube, дуже швидко застарівають і дуже рідко підтримуються своїми авторами на протязі тривалого часу. Відповідно, навчальні матеріали про HTML / CSS також дуже швидко втрачають свою актуальність. Те, що було стандартом ще якихось 3-5 років тому, зараз вже просто стає неактуальним і не затребуваним. Все змінюється, особливо в сфері web-технологій.

На даному ж сайті, який, до речі, зроблений фактично за допомогою лише HTML/CSS, матеріали взяті безпосередньо із першоджерел - сайтів, які є основними по вивченню даних технологій на просторах Інтернету - онлайн школи w3schools.com, W3C ( Консорціуму Всесвітньої павутини) - www.w3.org, WHATWG Живого стандарту - https://whatwg.org/, MDN.Mozilla. Саме із цих сайтів і береться вся інформація по офіційно затвердженим стандартам і веб-технологіям.

На даному адаптованому для україномовного користувача сайті розміщений матеріал, який є найбільш актуальним на момент створення сайту, при цьому матеріали викладаються як в оригінальному оформленні (як на сайтах - першоджерелах, які є англомовними, але в українському перекладі), так і з додатковими поясненнями та прикладами від автора даного сайту. Матеріали в уроках викладаються за принципом від простого до складного, що дозволяє вивчати HTML/CSS навіть новачкам без початкових знань веб-технологій чи веб-програмування. Дані матеріали, якщо їх вивчати поступово і згідно викладеному порядку, є доступними для розуміння будь-якому новачкові, навіть дітям молодшого шкільного віку, які вміють лише більш-менш нормально читати, користуватися комп'ютером та Інтернетом і при цьому мають бажання вчитись.

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

Починати вивчати веб-технології необхідно саме із HTML/CSS, бо саме вони є основою всіх сайтів Інтернету. Далі, коли ви вже будете добре знати і вміти використовувати HTML/CSS, варто починати вивчати мову програмування, яка використовується на стороні клієнта (браузером) - JavaScript. Знання і володіння цими трьома технологіями складає фронтенд (front end) - частину веб-розробки, яка слугує для взаємодії між користувачем та серверною частиною, яка, в свою чергу, обслуговується веб-розробниками з бекенду (back end). Для бекенду необхідні знання таких мов програмування і технологій, як PHP, SQL, Node.js, Python та ін.

У деяких розділах на сайті викладені матеріали для більш продвинутих користувачів, які вже засвоїли основи HTML5/CSS3 і бажають продовжити навчатись веб-технологіям та веб-програмуванню. Зокрема, це основи мов програмування JavaScript, PHP, SQL, Python, а також фреймворки jQuery, Bootstrap та ін.

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

За допомогою мови HTML ви можете створити свій власний веб-сайт.

Цей посібник від школи w3schools.com допоможе вам навчитись основам мови розмітки веб-сторінок HTML.

HTML легко вивчити - ви будете просто насолоджуватися навчанням!

Приклади в кожній главі

Цей навчальний посібник від w3schools.com містить сотні прикладів HTML.

З онлайн-редактором HTML на сайті w3schools.com ви можете редагувати HTML код і, натиснувши кнопку, відразу переглянути результат.
Натисніть кнопку "Спробуйте самі!", щоб дізнатися, як вона працює. Почніть вивчати HTML зараз!
Приклади HTML

Наприкінці HTML підручника можна знайти більше 200 прикладів.

З онлайн-редактором w3schools.com ви можете самостійно редагувати і перевіряти кожен приклад.
Перейдіть до HTML-прикладів!
HTML-вправи та вікторини

Перевірте свої навички HTML у W3Schools!
Запустіть HTML-вправи! Запустіть HTML-вікторину!
HTML довідники

У W3Schools ви знайдете повні довідники про теги, атрибути, події, назви кольорів, сутності, набори символів, кодування URL, коди мов, HTTP меседжі тощо.
Довідник тегів HTML
Здати іспит зі знання HTML - отримати диплом!

Онлайн сертифікація W3Schools

Ідеальне рішення для професіоналів, яким необхідно збалансувати роботу, сім'ю та побудову кар'єри.

Більше 25 000 сертифікатів вже видано!

Отримати сертифікат "

HTML сертифікат документує Ваші знання з HTML.

CSS сертифікат документує Ваші знання про розширений CSS.

JavaScript сертифікат документує Ваші знання про JavaScript і HTML DOM.

jQuery сертифікат документує Ваші знання про jQuery.

PHP сертифікат документує ваші знання про PHP і SQL (MySQL).

XML сертифікат документує ваші знання про XML, XML DOM і XSLT.

Bootstrap сертифікат документує ваші знання про фреймворк Bootstrap.

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.

Будь ласка, увімкніть JavaScript для перегляду коментарів на основі Disqus.

# data[].attributes.attachment_link.keywords[]
для початківців

# data[].attributes.attachment_link.title
HTML. Старт. Урок №1. Основи HTML5. Курси W3schools українською. Уроки для початківців

# data[].attributes.attachment_link.description
Перед вами сайт, на якому можна абсолютно безкоштовно пройти курс навчання мові HTML. Основна частина змісту на сайті - це переклад українською мовою матеріалів сайту W3Schools.com - найбільшого і найвідомішого ресурсу для веб-розробників, який адаптований для україномовного користувача. Також на сайті ви можете знайти додаткові матеріали даної тематики.

# data[].attributes.headline
Для більш детального

# data[].attributes.body
Для більш детального розбору
матеріалу  та самопідготовки(це необов'язково)  можна
зареєструватися на курс
ОСНОВИ ВЕБ-РОЗРОБКИ (HTML, CSS, JAVASCRIPT) за посиланням:
https://courses.ed-era.com/courses/course-v1:EDERA_BBF+WEB+2019/info

# data[].attributes.body
Виконати завдання для самостійної роботи  за посиланням:
http://lesson-css.blogspot.com/p/position.html

# data[].attributes.attachment_link.title
Позиціювання елементів веб-сторінки за допомогою стилів

# data[].attributes.body
27.04.20
Опрацювати теоретичний  матеріал, створити веб-сторінку за поданими зразком.

# data[].attributes.attachment_link.readable_text
HTML-верстальник

До задач HTML-верстальника належить реалізація проекту (розробленого веб-дизайнером) у вигляді HTML-коду з урахуванням всіх особливостей стилю й графічного оформлення. Створений код повинен однаково адекватно відображатися у всіх популярних браузерах, при різних роздільних здатностях монітора й кількості кольорів.

Специфіка професії

Плюси професії
Можливість самостійного освоєння професії.
Високий попит на ринку праці.
Необхідність постійного відновлення знань.
Розмиті границі між веб-дизайнером, веб-програмістом і банер-мейкером, дають можливість працювати в суміжних областях.

Мінуси професії
Мало простору для вдосконалювання.
Рутинність.
Постійна робота з монітором згубно позначається на загальному самопочутті.

Місце роботи
Інтернет-компанії, дизайн-студії.
Компанії, які у своїй структурі мають інтернет-відділи.

Особисті якості
Робота HTML- кодера досить рутинна. Вона жадає від виконавців посидючості, акуратності й уважності, якими, як правило, володіють люди зі спокійним характером. Природно, що всі ці якості повинні бути присутніми у власника на тлі структурного мислення.

Кар'єра
Веб-дизайнер, веб-програміст, банер-мейкер.

Освіта
Від людей цієї професії фахової освіти не потрібно, головне тут знання й досвід, підкріплені портфоліо. Необхідно знати: HTML (вручну), CSS 1, CSS 2, JavaScript, Dreamweaver, Front Pages. Бажано знати: Photoshop, PHP, MySQL, XML\XSL.

# data[].attributes.body
24.04.20
Тема уроку:"Гіперпосилання".
Опрацювати  теоретичний матеріал , виконати  завдання1,2,3

# data[].attributes.attachment_link.readable_text
Веб-посилання (html-посилання) - спеціальний тег, через який можна перейти з однієї веб-сторінки на іншу. Крім того, він дає можливість створити зміст сторінки. Як це робиться та кілька інших секретів - у статті...
Веб-посилання - це те ж саме, що html-посилання або гіпертекстове посилання. Якщо клацнути на веб-посилання лівою кнопкою "мишки", щось обов'язково відбудеться:
Натисність ТУТ, щоб перейти до ЗАВДАНЬ!
Веб-посиланням може бути одне слово, кілька слів, ціле речення або навіть абзац, малюнок, частина малюнку. Як впізнати його на сторінці:

1. слово-посилання має синій колір і внизу - підкреслене лінією (налаштуванням за замовчуванням);

2. якщо підвести до слова-посилання або малюнка вказівник "мишки", він змінює вигляд - стрілочка перетворюється на руку з вказівним пальцем;

3. слово-посилання на сторінку, де Ви вже були, змінює колір з синього на фіолетовий (за замовчуванням).

Створення веб-посилання:

Це парний тег, який був утворений з англійського слова "anchor" (читається "'анке") - якір. Між тегами пишеться слово (слова, речення, тег для розміщення малюнка), на яке потрібно клікнути "мишкою".

<a>Слова, речення, тег для розміщення малюнка), на яке потрібно клікнути "мишкою"</a>

Обов'язковий атрибут:

href="адреса веб-сторінки, на яку потрібно перейти"

Веб-посилання на сторінку сайту (або на файл на комп'ютері):

<a href=″адреса веб-сторінки, на яку потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>

<a href=″шлях і назва файлу на комп'ютері, на який потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>

Наприклад:

Різні варіанти запису:

Веб-посилання у вигляді малюнка:

Приклад:
Веб-посилання, яке запускає
- надсилання електронного листа: <a href="mailto:Ця електронна адреса захищена від спам-ботів. Вам потрібно увімкнути JavaScript, щоб побачити її.">Написати листа</a>

- телефонний дзвінок: <a href="tel:+380677777777">+38 067 777 77 77</a>

- запускає Скайп: <a href="skype:elenaburd?call">Skype</a>
Веб-посилання, яке запускає скачування файла:
- скачування картинки

<a href="http://it-shkola.in.ua/images/html_lessons/1.jpg" download>Старт скачування картинки Лев <img src="http://it-shkola.in.ua/images/html_lessons/1.jpg" width="50px"></a>

Результат: Старт скачування картинки Лев

- скачування підручника з html

<a href=″http://it-shkola.in.ua/images/html_lessons/konspekt-html-anchor.doc" download>Старт скачування конспекта "Урок html-посилання"</a>

Результат: Старт скачування підручника
Атрибути:

alt

альтернативна назва

<a href="http://it-shkola.in.ua/uroky-html" alt="уроки html">Уроки HTML на сайті http://it-shkola.in.ua/</a>

обов'язковий, потрібен для пошукових систем

download

скачування файлу

<a href="http://it-shkola.in.ua/images/html_lessons/1.jpg" download>Старт скачування картинки Лев <img src="http://it-shkola.in.ua/images/html_lessons/1.jpg" width="50px"></a>

за потреби

href

адреса для переходу

<a href="http://it-shkola.in.ua/uroky-html" alt="уроки html">Уроки HTML на сайті http://it-shkola.in.ua/</a>

обов'язковий

hreflang

вказує мову сторінки (українська uk, російська ru, англійська en, інші - див. тут)

<a href="http://it-shkola.in.ua/uroky-html" alt="уроки html" hreflang="uk">Уроки HTML на сайті http://it-shkola.in.ua/</a>

за потреби

media

вказує, для яких медіа-пристроїв буде оптимізований файл, зокрема:

media="all|braille|handheld|print|screen|speech|projection|tty|tv"

за потреби

rel

вказує на відношення нової сторінки до попередньої, наприклад:

rel="author" - сторінка автора

rel="prev" - попередня сторінка

rel="next" - наступна сторінка

rel="tag" - ключове слово

rel="nofollow" - забороняє пошуковій системі переходити за посилання

інше - див. тут

за потреби

target

вказує, сторінку відкривати у нову вікні (вкладці) броузера, чи не відкривати, значення:

_blank - сторінка відкривається у новому вікні

_self - сторінка відкривається у тому ж вікні

_parent - сторінка відкривається у батьківський фрейм

_top - сторінка завантажується у повністю відкрите вікно броузера

<a href="http://it-shkola.in.ua/uroky-html" target="_blank">Уроки HTML на сайті http://it-shkola.in.ua/ - відкривається у новому вікні</a>

<a href="http://it-shkola.in.ua/uroky-html" target="_self">Уроки HTML на сайті http://it-shkola.in.ua/ - відкривається у цьому ж вікні</a>

за потреби, але корисний для відвідувачів сайту

Веб-посилання можна використати для того, щоб створити зміст для великого тексту, який поділений на кілька розділів. Для цього потрібно зробити два кроки: 1) перед початком кожного розділу написати тег
Між тегами нічого писати не потрібно.

Наприклад:
2) щоб створити у змісті перехід на розділ тексту (або, наприклад, перейти на початок або в кінець сторінки), потрібно використати тег

<a href="#слово - спеціальне ім'я для даного розділу англійськими літерами">Слово для переходу</a>

Наприклад:

Результат: На початок
Завдання 1.
Спочатку у робочій папці зберегти файли: http://it-shkola.in.ua/images/html_lessons/part1.html , http://it-shkola.in.ua/images/html_lessons/part2.html , http://it-shkola.in.ua/images/html_lessons/img-1.jpg

1. Створити і зберегти веб-файл з іменем index.html

2. Набрати такий код:

<!DOCTYPE HTML>
<html>
<head>
<title>Кінофільм Джуманджі</title>
</head>
<body bgcolor="green">
<h1 align="center">Кінофільм Джуманджі 1 і 2</h1>
<p align="center"><a href=″part1.html" target="_blank">Джуманджі: Поклик джунглів. Частина1. Рік виходу - 1995.</a></p>
<p align="center"><a href=″part2.html" target="_blank">Джуманджі: Поклик джунглів. Частина 2. Рік виходу - 2017.</a></p>
</body>
</html>

4. Подивитись у Хром, що вийшло.
Результат: Завдання 2.
У робочій папці створити папку image і зберегти у ній файл http://it-shkola.in.ua/images/html_lessons/img-1.jpg

3. Вказати фон сторінки - зелений (атрибут bgcolor="green")

4. Між тегами <title></title> вказати заголовок сторінки Кінофільми Джуманджі.

5. Між тегами <h1></h1> вказати заголовок першого рівня Кінофільм Джуманджі 1 і 2 , вирівняти його по центру (атрибут align="center")

6. Тегом <img> вставити зображення img-1.jpg (<img src=″image/img-1.jpg">), вирівняти його по центру (тег зображення вставити між тегами <p align="center"></p>)

7. Вставити два посилання:

№1:
між тегами <a></a> набрати текст посилання Джуманджі: Поклик джунглів. Частина 1. Рік виходу - 1995. ,
в атрибуті href=″..." вказати адресу для переходу https://uk.wikipedia.org/wiki/Джуманджі_фільм,_1995 ,
вказати атрибут target="_parent" - відкриття нової сторінки у цьому ж вікні

№2:
між тегами <a></a> набрати текст посилання Джуманджі: Поклик джунглів. Частина 2. Рік виходу - 2017. ,
в атрибуті href=″..." вказати адресу для переходу https://uk.wikipedia.org/wiki/Джуманджі:_Поклик_джунглів,
вказати атрибут target="_parent" - відкриття нової сторінки у цьому ж вікні

8. Кожне посилання написати з нового абзацу і вирівняти по центру (<p align="center"></p>)

9. Подивитись у Хром, що вийшло.
Результат: Завдання 3.
У робочій папці створити папку image і зберегти у ній файли http://it-shkola.in.ua/images/html_lessons/img-1.jpg, http://it-shkola.in.ua/images/html_lessons/img-2.jpg, http://it-shkola.in.ua/images/html_lessons/img-3.png (якщо папка вже, то зберегти у неї вказані файли)

Зберегти на комп'ютер у робочу папку текстовий файл http://it-shkola.in.ua/images/html_lessons/tekst-pad.txt

1. Створити і зберегти веб-файл з іменем index3.html

2. Набрати код - основу веб-сторінки.

3. Вказати заголовок сторінки Кінофільми Джуманджі.

4. Вказати фон сторінки green

5. Вказати шрифт Comic Sans MS , розмір 4

6. Створити перший абзац, вирівняти його по центру. Скопіювати і вставити перший абзац з файлу tekst.txt

7. Для слів Кінофільм Джуманджі 1 і 2 вказати такі налаштування: колір червоний, розмір 6.

8. Вставити зображення img-1.jpg розміром 500px, рамка товщиною 10, вказати обтікання і колір рамки стилем style="float:right;border-color:red;"

9. Після тегу першого абзацу вказати обтікання тегом <br clear="all">

10. Вставити 5 горизонтальних ліній червоного кольору товщиною 5 і шириною 40%, 60%, 100%, 60%, 40%

11. Створити другий абзац, вирівняти його по центру. Скопіювати і вставити другий абзац з файлу tekst.txt

12. Вставити зображення img-2.jpg розміром 200px, вказати обтікання стилем style="float:left;"

13. Слова див. посилання зробити посиланням на веб-сторінку https://uk.wikipedia.org/wiki/Джуманджі_фільм,_1995

14. Повторити пп. 9-10.

15. Створити третій абзац, вирівняти його по центру. Скопіювати і вставити третій абзац з файлу tekst.txt

16. Вставити зображення img-3.png розміром 200px, вказати обтікання стилем style="float:right;"

17. Слова див. посилання зробити посиланням на веб-сторінку https://uk.wikipedia.org/wiki/Джуманджі:_Поклик_джунглів

18. Повторити пп. 9-10.

19. Відразу після тегу <body> вказати посилання-якір для внутрішнього переходу з кінця файлу на початок: написати <a name="start"></a>

20. Після горизонтальних ліній п.18 вказати посилання для переходу на початок <a href="#start">На початок</a>
Результат: Завдання 4.
У робочій папці створити папку image і зберегти у ній файли http://it-shkola.in.ua/images/html_lessons/pad0.jpg, http://it-shkola.in.ua/images/html_lessons/pad1.jpg, http://it-shkola.in.ua/images/html_lessons/pad3.jpg (якщо папка вже є, то зберегти у неї вказані файли)

Зберегти на комп'ютер у робочу папку текстовий файл http://it-shkola.in.ua/images/html_lessons/tekst-pad.txt

1. Створити і зберегти веб-файл з іменем index4.html

2. Створити веб-сторінку за картинкою-макетом (див. картинку нижче). При цьому зробити

- колір фону сторінки - DarkBlue

- вигляд літер - шрифт Comic Sans MS, розмір основного білого тексту - 4, розмір червоного тексту - 6 ,

- розмір картинки 1 - 300px;

- розмір картинки 2 і 3 - 200px;

- текст брати з файлу http://it-shkola.in.ua/images/html_lessons/tekst-pad.txt

- слова "див. посилання" - перехід на Вікіпедію

- слова "На початок" - перехід до початку сторінки

Завдання 5.

У робочій папці створити папку image і зберегти у ней ДВА файли: http://it-shkola.in.ua/images/html_lessons/but2.png і http://it-shkola.in.ua/images/html_lessons/googlelogo.png (якщо папка вже є, то зберегти у неї вказані файли)

Зберегти на комп'ютер у робочу папку текстовий файл http://it-shkola.in.ua/images/html_lessons/kod-google2.txt

1. Створити і зберегти веб-файл з іменем index5.html

2. Створити веб-сторінку за картинкою-макетом (див. картинку нижче). При цьому

- малюнок-емблему Гугл зробити посиланням на адресу http://google.com.ua , яке відкривається у новому вікні

- код сторінки для організації пошуку брати з файлу http://it-shkola.in.ua/images/html_lessons/kod-google2.txt

# data[].attributes.attachment_link.title
Урок "html-посилання"

# data[].attributes.attachment_link.description
Веб-посилання (html-посилання) - спеціальний тег, через який можна перейти з однієї веб-сторінки на іншу. Крім того, він дає можливість створити зміст сторінки. Як це робиться та кілька інших секретів - у статті... Веб-посилання - це те ж саме, що html-посилання або гіпертекстове посилання.

# data[].attributes.body
Заходимо на сайт ІT книга
Вибираємо 10-11 клас. Заходимо як гість (безкоштовний варіант) виконуємо урок  27.
Активізуємося, бо робіт мало.
Скрин уроку  висилаємо на пошту
nadiya231273@gmail.com
http://pidruchnyk.online/course/view.php?id=3#section-4

# data[].attributes.body
Перегляньте презентацію та
виконайте  практичну роботу за зразком. Результати своєї роботи завантажити на Google-диск, відкривши доступ на ел. адресу: nadiya231273@gmail.com
і додати посилання за допомогою плюса в цьому стовбчику . Якщо виникнуть питання -задавайте у вайбері 0506663898 або на цій інтерактивній дошці.

# data[].attributes.attachment_link.title
Практичне завдання_11

# data[].attributes.attachment_link.title
Таблиці каскадних стилів (CSS)

# data[].attributes.attachment_link.title
Текст для практичного завдання

# data[].attributes.attachment_link.authors[].name
Хауди Хо™ - Просто о мире IT!

# data[].attributes.attachment_link.title
Учим CSS за 1 час! #От Профессионала

# data[].attributes.body
Теоретичний матеріал

# data[].attributes.attachment_link.title
Стильове оформлення сторінок

# data[].attributes.body
Теоретичний матеріал

# data[].attributes.attachment_link.title
Стильове оформлення сторінок

# data[].attributes.headline
Уроки для початківці

# data[].attributes.body
Уроки для початківців, довідковий матеріал

# data[].attributes.attachment_link.provider_name
WebSunSay - Основи HTML, CSS, JavaScript, PHP

# data[].attributes.attachment_link.readable_text
Перед вами сайт, на якому можна абсолютно безкоштовно пройти курс навчання мові HTML. Основна частина змісту на сайті - це переклад українською мовою матеріалів сайту W3Schools.com - найбільшого і найвідомішого ресурсу для веб-розробників, який адаптований для україномовного користувача. Також на сайті ви можете знайти додаткові матеріали даної тематики.

Із самого початку весь матеріал розділений на невеличкі уроки, в кожному з яких максимально докладно викладено матеріал по кожній темі. Для новачків рекомендується проходити уроки в тому порядку, в якому вони викладені. Але якщо ви вже раніше стикалися з мовою HTML (наприклад, вивчали її в школі) або навіть намагалися її вчити самостійно за допомогою Інтернету - дивилися відеоуроки або читали підручники - вам також будуть корисними дані уроки. Тут ви зможете знайти саме ті матеріали, які вам необхідні.

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

На сайті представлені уроки як для новачків, так і для більш досвідчених користувачів, які вже раніше, можливо, вивчали мову HTML або стикалися з нею в процесі вивчення веб-технологій і мов веб-програмування.

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

Чим ці уроки з вивчення мови HTML відрізняються від інших?

В мережі Інтернет є безліч сайтів, книг і відеоуроків, за якими можна вивчати мову розмітки HTML разом зі стилями - CSS. Але більшість з них написані тими, хто просто банально намагається заробити гроші (на книгах, сайтах або відео на Youtube). Крім того, сайти або книги, які були написані лише 2 - 3 роки тому, і відеоуроки на YouTube, дуже швидко застарівають і дуже рідко підтримуються своїми авторами на протязі тривалого часу. Відповідно, навчальні матеріали про HTML / CSS також дуже швидко втрачають свою актуальність. Те, що було стандартом ще якихось 3-5 років тому, зараз вже просто стає неактуальним і не затребуваним. Все змінюється, особливо в сфері web-технологій.

На даному ж сайті, який, до речі, зроблений фактично за допомогою лише HTML/CSS, матеріали взяті безпосередньо із першоджерел - сайтів, які є основними по вивченню даних технологій на просторах Інтернету - онлайн школи w3schools.com, W3C ( Консорціуму Всесвітньої павутини) - www.w3.org, WHATWG Живого стандарту - https://whatwg.org/, MDN.Mozilla. Саме із цих сайтів і береться вся інформація по офіційно затвердженим стандартам і веб-технологіям.

На даному адаптованому для україномовного користувача сайті розміщений матеріал, який є найбільш актуальним на момент створення сайту, при цьому матеріали викладаються як в оригінальному оформленні (як на сайтах - першоджерелах, які є англомовними, але в українському перекладі), так і з додатковими поясненнями та прикладами від автора даного сайту. Матеріали в уроках викладаються за принципом від простого до складного, що дозволяє вивчати HTML/CSS навіть новачкам без початкових знань веб-технологій чи веб-програмування. Дані матеріали, якщо їх вивчати поступово і згідно викладеному порядку, є доступними для розуміння будь-якому новачкові, навіть дітям молодшого шкільного віку, які вміють лише більш-менш нормально читати, користуватися комп'ютером та Інтернетом і при цьому мають бажання вчитись.

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

Починати вивчати веб-технології необхідно саме із HTML/CSS, бо саме вони є основою всіх сайтів Інтернету. Далі, коли ви вже будете добре знати і вміти використовувати HTML/CSS, варто починати вивчати мову програмування, яка використовується на стороні клієнта (браузером) - JavaScript. Знання і володіння цими трьома технологіями складає фронтенд (front end) - частину веб-розробки, яка слугує для взаємодії між користувачем та серверною частиною, яка, в свою чергу, обслуговується веб-розробниками з бекенду (back end). Для бекенду необхідні знання таких мов програмування і технологій, як PHP, SQL, Node.js, Python та ін.

У деяких розділах на сайті викладені матеріали для більш продвинутих користувачів, які вже засвоїли основи HTML5/CSS3 і бажають продовжити навчатись веб-технологіям та веб-програмуванню. Зокрема, це основи мов програмування JavaScript, PHP, SQL, Python, а також фреймворки jQuery, Bootstrap та ін.

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

За допомогою мови HTML ви можете створити свій власний веб-сайт.

Цей посібник від школи w3schools.com допоможе вам навчитись основам мови розмітки веб-сторінок HTML.

HTML легко вивчити - ви будете просто насолоджуватися навчанням!

Приклади в кожній главі

Цей навчальний посібник від w3schools.com містить сотні прикладів HTML.

З онлайн-редактором HTML на сайті w3schools.com ви можете редагувати HTML код і, натиснувши кнопку, відразу переглянути результат.
Натисніть кнопку "Спробуйте самі!", щоб дізнатися, як вона працює. Почніть вивчати HTML зараз!
Приклади HTML

Наприкінці HTML підручника можна знайти більше 200 прикладів.

З онлайн-редактором w3schools.com ви можете самостійно редагувати і перевіряти кожен приклад.
Перейдіть до HTML-прикладів!
HTML-вправи та вікторини

Перевірте свої навички HTML у W3Schools!
Запустіть HTML-вправи! Запустіть HTML-вікторину!
HTML довідники

У W3Schools ви знайдете повні довідники про теги, атрибути, події, назви кольорів, сутності, набори символів, кодування URL, коди мов, HTTP меседжі тощо.
Довідник тегів HTML
Здати іспит зі знання HTML - отримати диплом!

Онлайн сертифікація W3Schools

Ідеальне рішення для професіоналів, яким необхідно збалансувати роботу, сім'ю та побудову кар'єри.

Більше 25 000 сертифікатів вже видано!

Отримати сертифікат "

HTML сертифікат документує Ваші знання з HTML.

CSS сертифікат документує Ваші знання про розширений CSS.

JavaScript сертифікат документує Ваші знання про JavaScript і HTML DOM.

jQuery сертифікат документує Ваші знання про jQuery.

PHP сертифікат документує ваші знання про PHP і SQL (MySQL).

XML сертифікат документує ваші знання про XML, XML DOM і XSLT.

Bootstrap сертифікат документує ваші знання про фреймворк Bootstrap.

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.

Будь ласка, увімкніть JavaScript для перегляду коментарів на основі Disqus.

# data[].attributes.attachment_link.keywords[]
для початківців

# data[].attributes.attachment_link.title
HTML. Старт. Урок №1. Основи HTML5. Курси W3schools українською. Уроки для початківців

# data[].attributes.attachment_link.description
Перед вами сайт, на якому можна абсолютно безкоштовно пройти курс навчання мові HTML. Основна частина змісту на сайті - це переклад українською мовою матеріалів сайту W3Schools.com - найбільшого і найвідомішого ресурсу для веб-розробників, який адаптований для україномовного користувача. Також на сайті ви можете знайти додаткові матеріали даної тематики.

# data[].attributes.body
Опрацювати відео, створити сайт, схожий на зразок з відео, малюнки самостійно скачати з Інтернету

# data[].attributes.attachment_link.authors[].name
Навчаємося Разом

# data[].attributes.attachment_link.title
01-HTML та CSS: як створити простий сайт (сторінку) для Лінивця :)

# data[].attributes.body
Опрацювати відео, створити сайт, схожий на зразок з відео, малюнки самостійно скачати з Інтернету

# data[].attributes.attachment_link.authors[].name
Навчаємося Разом

# data[].attributes.attachment_link.title
01-HTML та CSS: як створити простий сайт (сторінку) для Лінивця :)