Персональні веб-сторінки. Що таке веб-сторінка: її склад, як створити та зберегти
Що таке HTML
Сьогодні інтернетом користується 3,5 мільярди людей – це половина населення Землі. Мандруючи сайтами, багато людей навіть не здогадуються, що при їх створенні використовувалася мова HTML. Без нього всі веб-сторінки виглядали б суцільним полотном рядків. Спробуємо розібратися, що являє собою ця мова, і для чого вона потрібна.
HTML та інші поняття
Будь-яка винайдена людиною діяльність, чи то навчання діток азбуці чи виробництво балістичних ракет, рано чи пізно наводиться до єдиних стандартів. Теж сталося і зі створенням веб-сторінок. У 1991 році британський учений Тім Бернерс-Лі розробив першу специфікацію мови HTML, яка дозволяла створювати документи для відображення на різних пристроях, які не мають навичок верстки. Тепер мова HTML є стандартом для створення веб-сторінок.
Мова HTML
Абревіатура HTML розшифровується як HyperTextMarkupLanguage. Тобто HTML – це мова гіпертекстової розмітки розміщених в Інтернеті документів. Завдяки його використанню браузери отримують інформацію про те, як відображати різні елементи веб-сторінок. Деякі користувачі плутають хтмл з мовами програмування, проте з його допомогою не можна виконати будь-які дії – наприклад, відкрити вікно, що спливає. Це лише розмітка – подібна до тієї, з якою стикався кожен користувач програми Microsoft Word. З її допомогою можна створювати таблиці, форматувати текст, додавати посилання на фотографії і т.д.
HTML-код складається з тегів- Команд, за допомогою яких і задається розмітка. Кожен тег полягає у кутові дужки та відповідає за певне завдання. Наприклад, за допомогою тега можна виділити текст жирним шрифтом, а команди
,
і
дозволяють накреслити таблицю.
Написати сайт на html можна у найпростішому текстовому редакторі, правильно розставивши теги та замінивши розширення.txt на.html. Для користувачів, які не мають уявлення, що таке HTML, було створено безліч редакторів, які роблять роботу з кодом простий і наочний. Найпопулярнішими програмами є FrontPage, Dreamweaver та HomeSite. Всі вони полегшують процес створення сайтів, але засмічують коди сторінок непотрібними тэгами, збільшуючи їх обсяг. Тому багато хто навіть початківці сайтобудівники воліють вивчати мову гіпертекстової розмітки і писати HTML-код вручну.
Що таке веб-сторінка
Типова веб-сторінка – це документ у форматі html, який відкривається за допомогою браузера та має унікальну адресу в мережі інтернет. Крім тексту, вона може містити:
картинки;
фотографії;
аудіо- та відеофайли;
таблиці;
списки;
посилання на інші сторінки.
Сукупність текстів та інших інформаційних блоків сторінки називається контентом. Його обов'язковими елементами є гіперпосилання, натискаючи на які можна швидко перейти на іншу сторінку, завантажити мультимедійний файл або програму.
Як правило, веб-сторінка складається з:
«шапки», в якій розміщено основну інформацію: назву сайту, логотип, девіз, телефони, форму пошуку;
основного блоку, де розміщується контент сторінки;
бічних колонок із довгими списками: пунктами меню, рубриками;
"підвалу" з контактами, копірайтом, лічильниками відвідувань, окремими пунктами меню.
Веб-сторінка може бути статичною та динамічною. Перші пишуться мовою HTML і лежать на серверах у незмінному вигляді. Динамічні сторінки не існують, поки користувач не надішле запит на їх генерацію. Створюються вони скриптами, які пишуться кодерами різними мовами програмування. За допомогою динамічних веб-сторінок дуже зручно працювати з порталами новин, інтернет-магазинами та іншими ресурсами, які наповнені інформацією, що часто змінюється.
Що таке сайт
Розібравшись з тим, що таке веб-сторінка, можна перейти до поняття веб-сайту. Сайт – це сукупність веб-сторінок, об'єднаних спільною темою та дизайном. Головна сторінка сайту містить безліч посилань на внутрішні інформаційні ресурси, кожен з яких є окремою веб-сторінкою. Сайт може складатися і з однієї сторінки, проте на ній обов'язково будуть посилання на інші ресурси: відеофайли, вікна, що спливають, документи для скачування.
Кожен сайт має своє доменне ім'я, яке вводиться в адресний рядок браузера. Воно набагато коротше і лаконічніше, ніж адреси внутрішніх веб-сторінок, тому запам'ятати його не важко. Деякі сайти мають 2 і більше адреси, які ведуть до одного ресурсу. Так часто роблять компанії, яким потрібно, щоб клієнти могли знайти їх сайт, ввівши назву фірми як на латиниці, так і на кирилиці. Залежно від обсягу та характеру контенту, сайти поділяються на 3 типи.
Здрастуйте, шановні читачі блогу. З цієї статті ми почнемо вивчати базу мови HTML.
Вам швидше за все вже відомо, що основною мовою Інтернету є мова гіпертекстової розмітки HTML (HyperText Markup Language). У цій статті ми дізнаємося про базові поняття HTML і навчимося створювати найпростіші WEB-сторінки.
Почнемо з найголовнішого, розглянемо як працює сама всесвітня павутина - Internet. Для отримання веб-сторінок ви створюєте файли, написані мовою HTML, і поміщаєте їх на веб-сервер. Після цього будь-який браузер встановлений на пристрої з доступом до Інтернету, комп'ютер, телефон або планшет, може відшукати ваші веб-сторінки.
Веб-сервер— це звичайний комп'ютер із спеціальним програмним забезпеченням, що має доступ до Інтернету. Він безперервно чекає на запити від браузерів на веб-сторінки, зображення, аудіо- та відео-файли. Отримавши запит на один із таких ресурсів, сервер шукає його та надсилає браузеру.
Браузер— це спеціальна програма для перегляду веб-сайтів, наприклад Internet Explorer. За допомогою браузера ви ходите по сайтах, клацаючи на посилання. Будь-яке таке клацання змушує браузер зробити запит на html-сторінку web-серверу, отримати відповідь і відобразити сторінку у своєму вікні. Саме при відображенні сторінки починає працювати мова HTML, він повідомляє браузеру все про структуру та вміст web-сторінки. За допомогою команд - тегів HTML вказує браузеру, де починаються абзаци тексту, яка частина тексту є заголовком і вказує куди вставляти таблиці, і навіть картинки. А теги це слова у кутових дужках, наприклад
,
,
.
Терміново потрібний інтернет-магазин, а часу на вивчення HTML, CSS, PHP та інших технологій немає. Тоді просто можете орендувати інтернет магазин із повністю реалізованим функціоналом та оптимізацією під пошукові системи.
Мова HTML та його теги
Перша версія мови HTML з'явилася ще 1992 року. На момент 2013 розробляється специфікація нової версії HTML під номером 5. Розробкою даної специфікації займається організація World Wide Web Consortium, або скорочено W3C. Організація W3C займається розробкою та інших Web-стандартів. Ознайомитись із цими стандартами ви можете на їхньому сайті www.w3.org. До речі, багато Web-браузери вже підтримують деякі можливості HTML 5.
Пропоную почати вивчення мови HTML з прикладу. Тому давайте створимо нашу першу Web-сторінку. Для створення WEB-сторінок підійде будь-який текстовий редактор. Я пропоную для початку скористатися вбудованим у Windows Блокнотом (Notepad)(Взагалі надалі для редагування html-коду я раджу використовувати). Знайти його можна: «Пуск->Всі програми->Стандартні->Блокнот». Давайте створимо сторінку про автомобілі. Отже, відкриємо Блокнот і наберемо в ньому текст:
Приклад Web-сторінки
Сайт про автомобілі.
Ласкаво просимо до нашого автомобільного сайту. Тут Ви знайдете багато цікавих та корисних статей про автомобілях. На сайті є опис багатьох імпортних та вітчизняних автомобілів.
Далі збережемо створену web-сторінку до файлу з ім'ям index.html. При цьому в діалоговому вікні збереження файлу необхідно задати кодування UTF-8 і укласти ім'я файлу в лапки, інакше Блокнот додасть до нього розширення txt і наш файл отримає ім'я index.htm.txt:
Тепер залишилося відкрити створений файл у браузері та подивитися на результат. Для цього можна скористатися браузером Microsoft Internet Explorer, що поставляється у складі Windows, або будь-яким іншим встановленим на вашому комп'ютері браузером, клацнувши два рази мишкою по файлу index.html або перетягуванням файлу на значок браузера. Відкриваємо та бачимо приблизно такий результат:
Таким чином, ми створили Web-сторінку в Блокноті, хоч і трохи непоказну, але вже містить великий заголовок і абзац тексту, який автоматично розбивається на рядки та містить фрагмент, виділений напівжирним шрифтом.
Що таке тег?
Тепер поговоримо докладніше про структуру сторінки. Розглянемо фрагмент:
Сайт про автомобілі
.
Тут ми бачимо текст, який відображається на сторінці як заголовок, укладений у теги
і
. Що ж таке тег у html мові?
Тег HTML- це звичайні слова та символи, укладені у кутові дужки, наприклад
,
,
. Так тег
є відкриваючим тегом, тег
закриває тегом, а текст між ними називається вмістом тега. Також тег
і тег
називаються парними тегами. Разом тег, що відкриває, плюс вміст плюс тег, що закриває, утворюють елемент html-документа. Бувають ще елементи, що складаються з одного тега, що відкриває:
Так парний тег
визначає елемент заголовка першого рівня. Усього існує шість рівнів заголовків, це елементи
—
.
Елементи бувають блокові та малі (текстові). Блокові елементиздійснюють структурне форматування сторінки. Блокові елементи завжди відображаються на сторінці нового рядка і мають відступ від сусідніх елементів. Рядкові елементиздійснюють безпосереднє форматування тексту чи логічне форматування. Елемент
є блоковим елементом.
На цьому у мене все! До зустрічі у наступних постах!
Панове, хорошого всім настрої) Сьогодні вирішив написати статтю на тему Як створити свою веб-сторінку. На цю тематику мене наштовхнули читачі та друзі, які чомусь досі не розрізняють типи сайтів та сторінок у мережі Інтернет. Дуже рідко щось називаю веб-сторінкою))) Однак, багато моїх друзів так часто говорять. Спеціально для них я вирішив описати основні типи веб-сторінок, які ви можете створити для себе, щоб мати якесь представництво онлайн.
Перед створенням веб-сторінки вам обов'язково треба створити email або електронну адресу. Я описував варіанти створення цієї статті — . А якщо електронну адресу у вас є, то наслідуємо варіанти створення вашої особистої веб-сторінки. Читайте способи, які допоможуть створити веб-сторінку.
Односторінковий сайт
Найстародавніший спосіб))) Для нього Вам треба вивчити основи мови HTML. Робити це в наш час зовсім необов'язково, існує мільйон сервісів, про які піде нижче. Однак, якщо ви хочете розуміти, як працює сайт і, частково, мережа Інтернет, то спробуйте створити односторінковий сайт самостійно. Про те, як це зробити я описував у статті. Там є варіанти створення односторінкового сайту за допомогою конструкторів сайтів та безкоштовних платформ.
Сторінка у соціальній мережі Вконтакте
Думаю, в наш час фраза: «я створив собі сторінку в Інтернеті» стосується найбільше соціальної мережі Вконтакте. VK — найпопулярніша соціальна мережа СНД. Створити тут свою сторінку – справа 1 хвилини. Більше того, вам відкривається десятки корисних функцій для діяльності в мережі Інтернет. Про Вконтакт я писав багато і планую писати ще більше)) З цією соціальною мережею ви зможете і .
Вконтакте також дозволяє створювати зручну URL-адресу до вашої веб-сторінки замість стандартної URL-адреси при реєстрації http://vk.com/id8032931. Потім ви можете змінити його на красивий - http://vk.com/vasheimya.vashafamiliya.
Сторінка у соціальній мережі Facebook
Якщо Вконтакте найпопулярніша соціальна мережа СНД, то Facebook — соціальна мережа №1 у всьому світі. Фейсбук, вважається, ніби як для просунутих російськомовних користувачів))) Але особисто я думаю, що це все через те, що Facebook дуже популярний і зручний.
Так само як і у Вконтакті, ви можете привласнити собі гарну адресу своєї веб-сторінки. Повний мануал – як створити веб-сторінку на Facebook, я описав у статті – .
Блог
Блог — варіант, який я рекомендую для створення веб-сторінки. Блог дає тисячі можливостей самореалізації та дуже зручний у користуванні. Часто також безкоштовний як веб-сторінки в соціальних мережах. Пропоную добірку статей щодо створення веб-сторінки за допомогою блогу:
- Швидкий, але з витратами на хостинг і окремий домен.
- Блог-платформа від Google. Інтегрована з багатьма гуглівськими сервісами. Дуже зручно, якщо Ви фанат Google))
- Найбільш динамічно розвивається блог-платформа. Я читав в одному з американських видань статистику про те, що Tumblr у дітей США 12-13 років популярніший за Фейсбук!!! Думаю, це показник зручності та розвитку цієї платформи.
— тут вказані мануали практично всім відомим блог-платформам, включаючи і вищевказані.
Щоденник
Ось всі основні варіанти створення вашої веб-сторінки або, по-іншому, веб-присутності. Буквально 1 хвилина і ви вже занурюєтеся у простір всесвітньої павутини. Вдалого веб-сторінінгу!
: HTML - мова розмітки гіпертаксту (або мова гіпертекстової розмітки)
Тож давайте познайомимося з ним ближче.
Для початку створіть у себе на комп'ютері файл з будь-якою назвою та розширенням.html (назва має бути англійською мовою- Наприклад, index.html). Щоб створити такий файл - створіть звичайний текстовий документ ("Пуск" - "Всі програми" - "Стандартні" - "Блокнот")і збережіть ("Файл" - "Зберегти як")його в будь-якому місці, ввівши назву та розширення (буває, що при введенні розширення блокнот все одно зберігає його як текстовий файл, а нам потрібний web файл. Для цього перед збереженням виберіть тип файлу - "Всі файли(*.*)").
Це не обов'язкова умова (оскільки в налаштуваннях сервера можна змінити назву першої сторінки), а правило гарного тону. Назва першої сторінки бажано саме index (index.html), оскільки сервер, при зверненні до нього, видає файл із такою назвою - index.
При правильному збереженні значок файлу повинен змінюватися на значок браузера (за промовчанням Internet Explorer).
Відкрийте цей файл через блокнот і скопіюйте туди такий код.
Це перша веб-сторінка!
Збережіть та відкрийте через браузер.
Вітаю, ви щойно створили свою першу веб-сторінку.
Текст "Це перша веб-сторінка!" можете поміняти на будь-якій іншій, наприклад так - "Це моя перша web-сторінка!". зберігаємо, оновлюємо браузер, милуємось результатом.
Але наша сторінка не має заголовка.
Потрібно це виправити - трохи підправимо код, вірніше додамо до нього "Голову сайту", використовуючи теги
і .</p><p>
<html>
<head>
<title>Перша сторінка
Це моя перша веб-сторінка!
Зберігаємо, оновлюємо, милуємось. Тепер наша сторінка має заголовок.
Опис тегів.
Найперший тег це (цей тег парний, тобто закриває тегобов'язковий) - він використовується як контейнер, усередині якого знаходиться весь вміст сторінки (текст, зображення та інше). Хоча цей тег ( і) необов'язковий, але його використання говорить про правило гарного тону. Тому і вам раджу його використати.
Наступний тег - . Це теж парний тег (
і). Цей тег не відображається на сторінці (крім заголовка), але він необхідний для вказівки додаткових параметрів сторінки - опис сторінки (використовується пошуковими системами), ключові слова (використовується пошуковими системами), стилі, скрипти, заголовок та інше.
Тег
</b>- парний тег ( <title>і), необхідний для вказівки заголовка сторінки. Причому цей тег потрібно розміщувати лише усередині тега !
І останній, у нашому коді, тег - . Теж парний тег (
і
), усередині якого перебуває вся видима частина сайту, тобто. тексти, картинки, посилання, загалом інформація, яку ви хочете розмістити на сайті.
У наступному уроці ми поговоримо про види тегів і їх написання.
Перед тим, як ми розпочнемо нашу подорож по уроках створення сайтів на HTML та CSS, важливо розуміти різницю між двома мовами, синтаксис кожної мови та деяку основну термінологію.
Що таке HTML та CSS?
HTML (HyperText Markup Language, мова розмітки гіпертексту) задає структуру вмісту та його зміст, визначаючи такий контент як, наприклад, заголовки, абзаци чи зображення. CSS (Cascading Style Sheets) або каскадні таблиці стилів - це мова презентацій, створена для оформлення зовнішнього вигляду контенту, яка використовує, наприклад, шрифти або кольори.
Ці дві мови - HTML і CSS незалежні одна від одної і повинні такими залишатися. CSS не повинен бути написаний усередині HTML-документа і навпаки. Як правило, HTML завжди представлятиме вміст, а CSS завжди визначатиме його оформлення.
При такому розумінні різниці між HTML і CSS давайте поринемо в HTML докладніше.
Основні терміни HTML
Перед початком роботи з HTML ви, ймовірно, зіткнетеся з новими та часто дивними термінами. Згодом ви ознайомитеся з усіма ними докладніше, але зараз ви повинні почати з трьох основних термінів HTML – елементи, теги та атрибути.
Елементи
Елементи вказують, як визначити структуру та вміст об'єктів на сторінці. Деякі з часто використовуваних елементів включають кілька рівнів заголовків (визначені як елементи з
Атрибути є властивостями, які застосовуються для надання додаткової інформації про елемент. Найбільш поширені атрибути включають атрибут id , який ідентифікує елемент; атрибут class, який класифікує елемент; атрибут src, який визначає джерело вбудованого вмісту; та атрибут href , який вказує на зв'язаний ресурс.
Атрибути визначаються у тезі, що відкриває, після імені елемента. Загалом, атрибути включають в себе ім'я та значення. Формат для цих атрибутів складається з імені атрибута зі знаком рівності за ним, а потім у лапках йде значення атрибута. Наприклад, елемент з атрибутом href буде виглядати так:
Shay Howe
Демонстрація основних термінів HTML
Цей код відображатиме текст "Shay Howe" на веб-сторінці і при натисканні на цей текст веде користувача на http://shayhowe.com. Елемент посилання оголошено за допомогою тега, що відкриває і закриває тегаохоплюючих текст, а також атрибуту та значення адреси посилання оголошеної через href="http://shayhowe.com" у тезі, що відкриває.
Мал. 1.01. Синтаксис HTML у вигляді схеми включає елемент, атрибут та тег
Тепер, коли ви знаєте, що таке елементи HTML, теги та атрибути, давайте поглянемо воєдино на нашу першу веб-сторінку. Якщо щось виглядає тут новим, не турбуйтеся – ми розшифруємо все по ходу.
Налаштування структури документа HTML
HTML-документи є прості текстові документи, збережені з розширенням.html, а не.txt. Щоб почати писати HTML, спочатку потрібен текстовий редактор, який вам зручний у використанні. На жаль, сюди не входить Microsoft Word чи Pages, оскільки це складні редактори. Двома найбільш популярними текстовими редакторами для написання HTML та CSS є Dreamweaver та Sublime Text. Безкоштовні альтернативи також Notepad++ для Windows та TextWrangler для Mac.
Усі HTML-документи містять обов'язкову структуру, яка включає такі декларації та елементи:
,
,
і
.
Оголошення типу документа абознаходиться на початку HTML-документа і повідомляє браузерам, яка версія HTML застосовується. Оскільки ми будемо використовувати останню версію HTML, наш тип документа буде просто. Після цього йде елемент що означає початок документа.
Усередині елемент
визначає верхню частину документа, включаючи різні метадані (супровідна інформація про сторінку). Вміст усередині елемента не відображається на веб-сторінці. Натомість він може включати назву документа (який відображається у рядку заголовка вікна браузера), посилання на будь-які зовнішні файли або будь-які інші корисні метадані.
Весь видимий вміст веб-сторінки перебуватиме в елементі
. Структура типового HTML-документа виглядає так:
Привіт світ!
Привіт світ!
Це веб-сторінка.
Демонстрація структури HTML-документа
Цей код показує документ, починаючи з оголошення типу документа,потім відразу йде елемент . Усередині йдуть елементи
і . Елемент містить кодування сторінки через тег та назва документа через елемент . Елемент <body>включає в себе заголовок через елемент <h1>та абзац тексту через<р>. Оскільки і заголовок, і абзац вкладені в елемент <body>, вони видно на веб-сторінці.</p><p>Коли елемент знаходиться всередині іншого елемента, відомий також як вкладений, гарною ідеєю додати до нього відступ, щоб зберегти структуру документа добре організованою і читабельною. У попередньому коді обидва елементи <head>і <body>вкладені та зсунуті всередині елемента <html>. Структура відступів для елементів продовжується з новими доданими елементами всередині <head>і <body>
.</p><h3>Самозакриваються елементи</h3><p>У попередньому прикладі елемент <meta>був єдиним тегом, який не включав тег, що закриває. Не хвилюйтеся, це було зроблено навмисно. Не всі елементи складаються з тегів, що відкривають і закривають. Деякі елементи просто одержують вміст або поведінку через атрибути в межах одного тега. <meta>є одним із таких елементів. Вміст елемента <meta>у прикладі надається за допомогою атрибута charset і значення. До інших типових самозакривається елементів відносяться:</p><ul><li><br>
</li><li><embed>
</li><li><hr>
</li><li><img>
</li><li><input>
</li><li><li><meta>
</li><li><param>
</li><li><source>
</li><li><wbr>
</li>
</ul><p>Наведена структура, зроблена за допомогою оголошення типу документа<!DOCTYPE html>та елементів <html>
, <head>і <body>, є досить поширеною. Ми хочемо зберегти цю структуру документа зручною, оскільки часто її застосовуватимемо при створенні нових HTML-документів.</p><h3>Валідація коду</h3><p>Незалежно від того, як акуратно ми пишемо наш код, помилки неминучі. На щастя, при написанні HTML та CSS ми маємо валідаторів для перевірки нашої роботи. W3C пропонує валідатори HTML та CSS, які сканують код на помилки. Перевірка нашого коду не тільки допомагає правильно відображати його у всіх браузерах, але й допомагає навчанню передового досвіду під час написання коду.</p><h2>На практиці</h2><p>Як веб-дизайнери і фронтенд-розробники ми можемо дозволити собі розкіш відвідувати ряд чудових конференцій, присвячених нашому ремеслу. Ми збираємося організувати власну конференцію Styles Conference та створити для неї сайт протягом наступних уроків. Ось так!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Давайте перейдемо трохи, відійшовши від HTML і поглянемо на CSS. Пам'ятайте, HTML визначає вміст і структуру наших веб-сторінок, тоді як CSS визначає їхній візуальний стиль та зовнішній вигляд.</p><h2>Основні терміни CSS</h2><p>На додаток до термінів HTML є кілька основних термінів CSS, з якими вам потрібно буде ознайомитися. Ці терміни включають селектори, властивості та значення. Як і з термінологією HTML, чим більше ви працюєте з CSS, тим більше ці терміни стають вашою другою натурою.</p><h3>Селектори</h3><p>Під час додавання елементів на веб-сторінку вони можуть бути оформлені за допомогою CSS. Селектор визначає, на який саме елемент або елементи HTML націлюватися і застосувати до них стилі (такі як колір, розмір і положення). Селектори можуть включати комбінацію різних показників для вибору унікальних елементів, залежно від того, наскільки конкретними ми бажаємо бути. Наприклад, ми хочемо вибрати кожен абзац на сторінці або вибрати лише один конкретний абзац.</p><p>Селектори, як правило, пов'язані зі значенням атрибуту, на зразок значення id або class або ім'ям елемента, на зразок <h1>або<р>
.</p><p>У CSS селектори поєднуються з фігурними дужками (), які охоплюють стилі, які застосовуються до вибраного елемента. Цей селектор націлений на всі елементи <span><p>P ( ... )</p><h3>Властивості</h3><p>Як тільки елемент вибраний, властивість визначає стилі, які будуть застосовані до нього. Імена властивостей йдуть після селектора, усередині фігурних дужок () і безпосередньо перед двокрапкою. Існує безліч властивостей, які ми можемо використовувати, такі як background, color, font-size, height і width та інші властивості, що часто додаються. У наступному коді ми визначаємо властивості color і font-size, які застосовуються до всіх елементів <span><p>P (color: ...; font-size: ...; )</p><h3>Значення</h3><p>Поки що ми лише вибрали елемент через селектор і визначили, який стиль через властивості ми хотіли б до нього застосувати. Тепер ми можемо поставити поведінку цієї властивості через значення. Значення можуть бути визначені як текст між двокрапкою та крапкою з комою. Нижче ми вибираємо всі елементи <p
>І встановлюємо значення якості color як orange , а значення якості font-size як 16 пікселів.</p><p>P ( color: orange; font-size: 16px; )</p><p>Для перевірки, у CSS наш набір правил починається з селектора, потім одразу йдуть фігурні дужки. У цих фігурних дужках розміщуються оголошення, які з пар властивостей і значень. Кожне оголошення починається з якості, за яким слідує двокрапка, значення якості і, нарешті, точка з комою.</p><p>Поширеною практикою є зсув пари властивостей та значень усередині фігурних дужок. Як і з HTML, відступи допомагають тримати наш код організованим та зрозумілим.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Мал. 1.03. Структура синтаксису CSS включає селектор, властивості та значення</p><p>Знання кількох основних термінів та загального синтаксису CSS - це відмінний старт, але ми маємо ще кілька пунктів для вивчення, перш ніж ми стрибнемо в глибину. Ми повинні уважніше розглянути, як селектори працюють у CSS.</p><h2>Робота із селекторами</h2><p>Селектори, як згадувалося раніше, вказують, які елементи HTML будуть стилізовані. Важливо повністю розуміти, як використовувати селектори і як вони діють. Першим кроком має стати знайомство із різними типами селекторів. Ми почнемо з основних селекторів: селектори типу, класи та ідентифікатори.</p><h3>Селектори типу</h3><p>Селектори типу націлені на елементи їхнього типу. Наприклад, якщо ми хочемо орієнтуватися на всі елементи <div>ми повинні використовувати селектор div. Наступний код показує тип селектора для елементів <div>, а також відповідний HTML.</p><p>Div ( ... )</p><p>
<div>...</div>
<div>...</div>
</p><h3>Класи</h3><p>Класи дозволяють вибрати елемент на основі значення атрибута class. Селектори класів трохи більш конкретні, ніж селектори типу, оскільки вони вибирають певну групу елементів, а чи не всі елементи одного типу.</p><p>Класи дозволяють застосовувати однакові стилі одразу до різних елементів, використовуючи те саме значення атрибуту class для кількох елементів.</p><p>У CSS класи позначаються з точкою попереду, за якою слідує значення атрибута класу. Нижче селектор класу вибирає всі елементи, що містять значення awesome атрибута class , включаючи елементи <div>і <span><p>Awesome ( ... )</p><p>
<div class="awesome">...</div>
</p><h3>Ідентифікатори</h3><p>Ідентифікатори ще точніше, ніж класи, оскільки вони орієнтовані лише на один унікальний елемент за раз. Подібно до того, як селектори класів використовують значення атрибута class , ідентифікатори використовують значення атрибута id як селектор.</p><p>Незалежно від типу відображуваного елемента, значення атрибута id може бути використане лише один раз на сторінці. Якщо id присутні, вони повинні бути зарезервовані для важливих елементів.</p><p>У CSS ідентифікатори позначаються із символом ґрат попереду, після чого йде значення атрибута id . Тут ідентифікатор вибере лише елемент, що містить атрибут id зі значенням shayhowe.</p><p>#shayhowe (...)</p><p>
<div id="shayhowe">...</div>
</p><h3>Додаткові селектори</h3><p>Селектори надзвичайно потужна штука та описані вище відносяться до найбільш поширених селекторів, які нам трапляються. Ці селектори лише початок. Існує багато передових селекторів і вони легко доступні. Коли освоїться з ними, не бійтеся подивитися і деякі прогресивніші.</p><p>Гаразд, починаємо збирати все разом. Ми додаємо елементи на сторінку всередині нашого HTML, потім можемо вибрати ці елементи та застосувати до них стилі за допомогою CSS. Тепер давайте з'єднаємо точки між HTML та CSS, щоб ці дві мови працювали разом.</p><h2>Підключення CSS</h2><p>Щоб змусити наш CSS говорити з нашим HTML, ми повинні вказати на CSS-файл з HTML. Хорошою практикою є включення всіх наших стилів в одному зовнішньому файлі, на який є вказівник усередині елемента <head>нашого HTML-документа. Використання одного зовнішнього CSS дозволяє нам застосовувати ті самі стилі по всьому сайту і швидко вносити до нього зміни.</p><h3>Інші варіанти додавання CSS</h3><p>Інші варіанти підключення CSS включають використання внутрішніх і вбудованих стилів. Ви можете зустріти ці варіанти в реальності, але вони, як правило, не схвалюються, оскільки роблять оновлення сайтів громіздким та неповоротким.</p><p>Для створення зовнішньої таблиці стилів ми знову хочемо використовувати вибраний текстовий редактор, щоб створити новий текстовий файл з розширенням.css. Наш CSS-файл повинен бути збережений у тій же папці або підпапці, де знаходиться і HTML-файл.</p><p>Всередині елемента <head>застосовується елемент <link>, який визначає відносини між HTML та CSS-файлами. Оскільки ми пов'язуємо з CSS, то використовуємо атрибут rel зі значенням stylesheet для вказівки їхніх відносин. Крім того, атрибут href застосовується для вказівки розташування або шляху до файлу CSS.</p><p>У наступному прикладі HTML-документа елемент <head>вказує на зовнішній стильовий файл.</p><p>
<head>
<link rel="stylesheet" href="main.css">
</head>
</p><p>Щоб CSS відображався правильно, значення шляху атрибуту href має прямо співпадати з тим, де збережений файл CSS. У попередньому прикладі файл main.css зберігається в тому ж місці, що й HTML-файл, відомий також як коренева папка.</p><p>Якщо CSS-файл розташовується в підпапці, то значення атрибуту href має відповідно співвідноситися з цим шляхом. Наприклад, якщо наш файл main.css був збережений у підпапці з ім'ям stylesheets, то значенням атрибуту href буде stylesheets/main.css . Тут використовується коса риса (або слеш), щоб вказати переміщення у підпапку.</p><p>Зараз наші сторінки починають оживати, повільно, але правильно. Ми поки що не вникали в CSS занадто глибоко, але ви, можливо, помітили, що деякі елементи мають стилі, які ми не оголошували в нашому CSS. Це браузер нав'язує свої власні стилі для цих елементів. На щастя, ми можемо переписати ці стилі досить легко, що ми зробимо далі за допомогою скидання CSS.</p><h2>Використання скидання CSS</h2><p>Кожен браузер має власні стилі за промовчанням для різних елементів. Те, як Google Chrome відображає заголовки, абзаци, списки тощо, може відрізнятися від того, як це робить Internet Explorer. Для забезпечення сумісності з різними браузерами стало широко використовуватися скидання CSS.</p><p>Скидання CSS бере всі основні елементи HTML із заданим стилем та забезпечує єдиний стиль для всіх браузерів. Ці скиди зазвичай включають видалення розмірів, відступів, полів або додаткові стилі знижують ці значення. Оскільки каскадування CSS працює зверху вниз (скоро про це дізнаєтесь) - наш скидання має бути в самому верху нашого стилю. Це гарантує, що ці стилі прочитаються першими і всі різні браузери працюватимуть із загальної точки відліку.</p><p>Є купа різних скидів CSS доступних для застосування, всі вони мають свої сильні сторони. Один з найпопулярніших від Еріка Мейєра, його скидання CSS адаптовано для включення нових елементів HTML5.</p><p>Якщо ви почуваєтеся трохи авантюристом, є також Normalize.css, створений Ніколасом Галлахером. Normalize.css фокусується не на використанні жорсткого скидання для всіх основних елементів, але натомість на встановленні загальних стилів для цих елементів. Це вимагає глибшого розуміння CSS, а також знання того, що ви хотіли б отримати від стилів.</p><h3>Кросбраузерність та тестування</h3><p>Як згадувалося раніше, різні браузери відображають елементи по-своєму. Важливо визнати значення кросбраузерності та тестування. Сайти не повинні виглядати виключно однаково у всіх браузерах, але мають бути близькими. Які браузери ви хочете підтримувати і якою мірою - це рішення ви повинні будете зробити на основі того, що краще для вашого сайту.</p><p>Існує кілька речей, на які слід звертати увагу під час написання CSS. Хорошою новиною є те, що це все під силу і потрібно трохи терпіння, щоб це освоїти.</p><h2>На практиці</h2><p>Повернемося назад, де ми востаннє зупинилися на нашому сайті конференції та подивимося, як ми можемо додати трохи CSS.</p><ol><li>Всередині нашої папки давайте створимо нову папку з ім'ям assets. У ній ми будемо зберігати всі ресурси для нашого веб-сайту, такі як стилі, зображення, відео тощо. Для наших стилів підемо далі і додамо ще одну папку stylesheets всередині папки assets.</li><li>Використовуючи текстовий редактор, створимо новий файл з ім'ям main.css і збережемо його в папці stylesheets, яку ми щойно створили.</li><p>Переглядаючи файл index.html у браузері ми можемо бачити, що елементи <h1>і <p>Вже містять стиль за промовчанням. Зокрема, вони мають унікальний розмір шрифту і простір навколо них. Використовуючи скидання Еріка Мейєра, ми можемо пом'якшити ці стилі, що дозволить кожному з них починати з однакової бази. Для цього загляньте на його сайт, скопіюйте код та вставте його у верхній частині нашого файлу main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, об'єкт, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, мало, strike, strong, sub, sup, tt, var, b, u, i, центр, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse: collapse; border-spacing: 0; )</p><li>Наш файл main.css починає приймати форму, тому підключимо його до файлу index.html. Відкрийте index.html у текстовому редакторі та додайте елемент <link>в <head>відразу після елемента <title>
.</li><li>Оскільки ми вказуємо на стилі через елемент <link>додайте атрибут rel зі значенням stylesheet .</li><p>Ми також увімкнемо посилання на наш файл main.css використовуючи атрибут href. Пам'ятайте, наш файл main.css збережений у папці stylesheets, який знаходиться всередині папки assets. Таким чином, значення атрибуту href , який є шляхом нашого файлу main.css, має бути assets/stylesheets/main.css .</p><p>
<head>
<meta charset="utf-8">
<title>Styles Conference
Час для перевірки нашої роботи та перегляду, як уживаються разом наші HTML та CSS. Відкриття файлу index.html (або оновлення сторінки, якщо вона вже відкрита) у браузері має показати трохи інший результат, ніж раніше.
Мал. 1.04. Наш сайт Styles Conference зі скиданням CSS
Демонстрація та вихідний код
Нижче ви можете переглянути сайт Styles Conference у його нинішньому стані, а також завантажити вихідний код сайту на даний момент.
Резюме
Отже, все гаразд! Ми зробили кілька великих кроків у цьому уроці.
Подумати тільки тепер ви знаєте основи HTML і CSS. Оскільки ми продовжимо і ви витратите більше часу на написання HTML та CSS, вам стане набагато комфортніше працювати з цими двома мовами.
Нагадаємо, що ми розглянули таке:
Різниця між HTML та CSS.
Знайомство з елементами HTML, тегами та атрибутами.
Налаштування структури першої веб-сторінки.
Знайомство з селекторами CSS, властивостями та значеннями.
Робота із селекторами CSS.
Вказівник на CSS з HTML.
Важливість CSS скидання.
Тепер давайте ближче розглянемо HTML і познайомимося трохи із семантикою.
Рішення: Вимкнення режиму Scroll Lock. Як правило, якщо осередок виділено на аркуші і ви натискаєте клавіші зі стрілками, виділений фрагмент переміститься.
