Створення першої веб-сторінки

9 червня 2022 р.397

Перед тим, як ми розпочнемо нашу подорож з уроків створення сайтів на HTML та CSS, важливо розуміти відмінності між двома мовами, синтаксис кожної мови та деяку основну термінологію.

Що таке HTML та CSS?

HTML (HyperText Markup Language, мова розмітки гіпертексту) задає структуру вмісту та його зміст, визначаючи такий контент як, наприклад, заголовки, абзаци чи зображення. CSS (Cascading Style Sheets) або каскадні таблиці стилів — це мова презентацій, створена для оформлення зовнішнього вигляду контенту, яка використовує, наприклад, шрифти або кольори. та залишатися. CSS не повинен бути написаний всередині HTML-документа та навпаки. Як правило, HTML завжди буде представляти вміст, а CSS завжди буде визначати його оформлення.

При такому розумінні різниці між HTML і CSS давайте поринемо в HTML більш детально. /h2>

Перед початком роботи з HTML ви, ймовірно, зіткнетеся з новими та часто дивними термінами. З часом ви ознайомитеся з усіма ними докладніше, але зараз ви повинні почати з трьох основних термінів HTML & nbsp; елементи, теги та атрибути. об'єктів на сторінці. Деякі з часто використовуваних елементів включають кілька рівнів заголовків (визначені як елементи з <h1> до <h6>) та абзаців (визначені як <p>); до списку можна включити елементи <a>, <div>, <span> ;, <strong> та <em> та багато інших.

Елементи ідентифікуються за допомогою кутових дужок <>, що оточують ім'я елемента. Таким чином, елемент виглядатиме так:

<code data-language="html"><a>

Вміст, який знаходиться між тегами, що відкривають і закривають, є вмістом цього елемента. Посилання, наприклад, матиме тег <a> і закриваючий тег </a>. Що знаходиться між цими двома тегами буде вміст посилання.

Так, теги посилань будуть виглядати приблизно так:

<code data-language="html"> <a>...</a>

Атрибути

Атрибути є властивостями, які використовуються для надання додаткової інформації про елемент. Найбільш поширені атрибути включають атрибут id, який ідентифікує елемент; атрибут class, який класифікує елемент; атрибут src, який визначає джерело вбудованого вмісту; і атрибут href, який вказує посилання на пов'язаний ресурс.

Атрибути визначаються у тезі, що відкриває, після імені елемента. Загалом, атрибути включають ім'я і значення. Формат для цих атрибутів складається з імені атрибута зі знаком рівності за ним, а потім у лапках йде значення атрибута. Наприклад, елемент <a> з атрибутом href буде виглядати так:

<code data-language="html"><a href="http://shayhowe.com">Shay Howe</a>

Демонстрація основних термінів HTML

Цей код відображатиме текст «Shay Howe» на веб-сторінці і при натисканні на цей текст веде користувача на http://shayhowe.com. Елемент посилання оголошений за допомогою тега <a> та закриває тега </a> охоплюючих текст, а також атрибуту та значення адреси посилання оголошеної через href="http://shayhowe.com" у відкритому тегу.

Синтаксис HTML у вигляді схеми включає елемент, атрибут і тег

Мал. 1.01. Синтаксис HTML у вигляді схеми включає елемент, атрибут і тег

Тепер, коли ви знаєте, що таке елементи HTML, теги та атрибути, давайте поглянемо воєдино на нашу першу веб-сторінку. Якщо щось виглядає тут новим, не турбуйтеся. Ми розшифруємо все по ходу. а не .txt. Щоб почати писати HTML, спочатку потрібен текстовий редактор, який вам зручний у використанні. На жаль, сюди не входить Microsoft Word або Pages, тому що це складні редактори. Двома найбільш популярними текстовими редакторами для написання HTML та CSS є Dreamweaver та Sublime Text. Безкоштовні альтернативи також Notepad++ для Windows та TextWrangler для Mac.

Всі HTML-документи містять обов'язкову структуру, яка включає такі декларації та елементи: <!DOCTYPE html>, <html>, <head> та <body>.

Оголошення типу документа або <!DOCTYPE html> знаходиться на самому початку HTML-документа і повідомляє браузерам, яка версія HTML застосовується. Оскільки ми будемо використовувати останню версію HTML, наш тип документа буде просто <!DOCTYPE html>. Після цього йде елемент <html> означає початок документа.

Всередині <html> елемент <head> визначає верхню частину документа, включаючи різні метадані (супровідна інформація про сторінку). Вміст всередині елемента <head> не відображається на веб-сторінці. Натомість він може містити назву документа (який відображається у рядку заголовка вікна браузера), посилання на будь-які зовнішні файли або будь-які інші корисні метадані.

Весь видимий вміст веб-сторінки буде в елементі <body>. Структура типового HTML-документа виглядає так:

<!DOCTYPE html> <html lang="ru">
<head>
<meta charset="utf-8">
<title>Привіт, мир!</title>
</head>
<body> <h1>Привіт, мир!</h1> <p>Це веб-сторінка.</p>
</body>
</html>

Демонстрація структури HTML-документа

Цей код показує документ, починаючи з оголошення типу документа, <!DOCTYPE html>, потім відразу йде елемент <html>. Всередині <html> йдуть елементи <head> та <body>. Елемент <head> містить кодування сторінки через тег <meta charset="utf-8"> та назва документа через елемент <title>. Елемент <body> включає заголовок через елемент <h1> і абзац тексту через <р>. Оскільки і заголовок і абзац вкладені в елемент <body>, вони помітні на веб-сторінці.

Коли елемент знаходиться всередині іншого елемента, відомий також як вкладений , гарною ідеєю буде додати до нього відступ, щоб зберегти структуру документа добре організованою та читабельною. У попередньому коді обидва елементи <head> та <body> вкладені та зсунуті всередині елемента <html>. Структура відступів для елементів продовжується з новими доданими елементами всередині <head> та <body>.

Самозакривні елементи

У попередньому прикладі елемент <meta> був єдиним тегом, який не включав тег, що закриває. Не хвилюйтеся, це було зроблено навмисно. Не всі елементи складаються з тегів, що відкривають і закривають. Деякі елементи просто одержують вміст або поведінку через атрибути в межах одного тега. <meta> є одним з таких елементів. Вміст елемента <meta> у прикладі надається за допомогою атрибута charset та значення. До інших типових елементів, що самозакриваються, відносяться:

<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>

Наведена структура, зроблена за допомогою оголошення типу документа <!DOCTYPE html> та елементів <html>, <head> і <body>, є досить поширеною. Ми хочемо зберегти цю структуру документа зручною, оскільки часто її застосовуватимемо при створенні нових HTML-документів.

Валідація коду

Незалежно від того, наскільки акуратно ми пишемо наш код, помилки неминучі. На щастя, при написанні HTML та CSS ми маємо валідатори для перевірки нашої роботи. W3C пропонує валідатори HTML та CSS, які сканують код на помилки. Перевірка нашого коду не тільки допомагає правильно відображати його у всіх браузерах, але й допомагає навчанню передового досвіду при написанні коду.

На практиці

В якості веб-дизайнерів та фронтенд-розробників ми можемо дозволити собі розкіш відвідувати низку чудових конференцій, присвячених нашому ремеслу. Ми збираємося організувати власну конференцію Styles Conference та створити для неї сайт протягом наступних уроків. Ось так!

Відкрийте текстовий редактор, створіть новий файл з ім'ям index.html і збережіть його в місце, яке не забудете. Я збираюся створити папку на робочому столі з ім'ям styles-conference та зберегти цей файл у ній; не соромтеся робити те саме.
У файлі index.html додамо структуру документа, у тому числі тип документа <!DOCTYPE html> та елементи <html>, <head> та <body>.
```
<code data-language="html"><!DOCTYPE html> <html lang="ru">
<head>
</head>
<body>
</body>
</html>
```
Всередині елемента <head> додамо елементи <meta> та <title>. Елемент <meta> повинен включати правильні атрибути charset і значення, в той час як елемент <title> має містити назву сторінки, скажімо «Styles Conference».
```
<code data-language="html"><head>
<meta charset="utf-8">
<title>Styles Conference</title>
</head>
```
Всередині елемента <body> додамо елементи <h1> та <p>. Елемент <h1> повинен включати бажаний заголовок — давайте знову скористаємося «Styles Conference», а елемент <р> повинен включати простий абзац для представлення нашої конференції.
```
<code data-language="html"><body> <h1>Styles Conference</h1> <p>Кожен рік найяскравіші веб-дизайнери та фронтенд-розробники збираються в Чикаго, щоб обговорити новітні технології. Приєднуйся до нас цим серпнем!</p>
</body>
```
Настав час подивитися на те, що ми зробили! Знайдемо наш файл index.html (у мене він знаходиться у папці styles-conference на робочому столі). Двічі клацнувши по цьому файлу або перетягнувши його до браузера, ми відкриємо його для перегляду.

Мал. 1.02. Наші перші кроки при створенні сайту Styles Conference

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

Селектори, як правило, пов'язані зі значенням атрибута, на зразок значення id або class або ім'ям елемента, на зразок <h1> або <р> .

У CSS селектори поєднуються з фігурними дужками {}, які охоплюють стилі, що застосовуються до вибраного елемента. Цей селектор націлений на всі елементи <p>.

p { ... }</code>

Властивості

Як тільки елемент вибраний, властивість визначає стилі, які будуть застосовані до нього. Імена властивостей йдуть після селектора, усередині фігурних дужок {} і безпосередньо перед двокрапкою. Існує безліч властивостей, які ми можемо використовувати, такі як background, color, font-size , height та width та інші властивості, що часто додаються. У наступному коді ми визначаємо властивості color та font-size, які застосовуються до всіх елементів < p>.

p { color: ...; font-size: ...; }

Значення

Поки ми лише вибрали елемент через селектор і визначили, який стиль через властивості ми хотіли б до нього застосувати. Тепер ми можемо поставити поведінку цієї властивості через значення. Значення можуть бути визначені як текст між двокрапкою та крапкою з комою. Нижче ми вибираємо всі елементи <p> і встановлюємо значення якості color як orange, а значення властивості font-size як 16 пікселів.

p { color: orange; font-size: 16px; }

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

Поширеною практикою є зсув пари властивостей і значень усередині фігурних дужок. Як і з HTML, відступи допомагають тримати наш код організованим та зрозумілим.

Структура синтаксису CSS включає селектор, властивості та значення

Мал. 1.03. Структура синтаксису CSS включає селектор, властивості та значення

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

Робота з селекторами

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

Селектори типу

Селектори типу націлені на елементи за їх типом. Наприклад, якщо ми хочемо орієнтуватися на всі елементи <div> ми маємо використовувати селектор div. Наступний код показує тип селектора для елементів <div>, а також відповідний HTML.

CSS

div { ... }

HTML

<code data-language="html"><div>...</div> <div>...</div>

Класи

Класи дозволяють вибрати елемент на основі значення атрибуту class. Селектори класів трохи більш конкретні, ніж селектори типу, тому що вони вибирають певну групу елементів, а не всі елементи одного типу.="attribute">class для кількох елементів.

У CSS класи позначаються з точкою попереду, за якою слідує значення атрибута класу. Нижче селектор класу вибирає всі елементи, що містять значення awesome атрибута class, включаючи елементи <div> та <p>.

CSS

.awesome { ... }

HTML

<code data-language="html"><div class="awesome"> ...</div> <p class="awesome">...</p>

Ідентифікатори

Ідентифікатори ще точніші, ніж класи, тому що вони націлені тільки на один унікальний елемент за один раз. Подібно до того, як селектори класів використовують значення атрибуту class, ідентифікатори використовують значення атрибута id як селектор.

Незалежно від типу відображуваного елемента, значення атрибута id може бути використане лише один раз на сторінці. Якщо id присутні, то вони повинні бути зарезервовані для важливих елементів.

У CSS ідентифікатори позначаються із символом ґрат попереду, після чого йде значення атрибуту id. Тут ідентифікатор вибере лише елемент, який містить атрибут id зі значенням shayhowe.

CSS

#shayhowe { ... }

HTML

<code data-language="html"><div id="shayhowe">...</div>

Додаткові селектори

Селектори надзвичайно потужна штука і описані вище відносяться до найпоширеніших селекторів, які нам трапляються. Ці селектори лише початок. Існує багато передових селекторів і вони легко доступні. Коли освоїтеся з ними, не бійтеся подивитися і деякі прогресивніші.

Добре, починаємо збирати все разом. Ми додаємо елементи на сторінку всередині нашого HTML, потім можемо вибрати ці елементи та застосувати до них стилі за допомогою CSS. Тепер давайте з'єднаємо точки між HTML і CSS, щоб ці дві мови працювали разом.

Підключення CSS

Щоб змусити наш CSS говорити з нашим HTML, ми повинні вказати на CSS-файл з HTML. Хорошою практикою є включення всіх наших стилів в одному зовнішньому файлі, на який є вказівник всередині елемента <head> нашого HTML-документу. Використання одного зовнішнього CSS дозволяє нам застосовувати ті самі стилі по всьому сайту і швидко вносити в нього зміни.

Інші варіанти додавання CSS

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

Всередині елемента <head> застосовується елемент <link>, який визначає відносини між HTML та CSS-файлами. Оскільки ми пов'язуємо з CSS, то використовуємо атрибут rel зі значенням stylesheet для вказівки їхніх стосунків. Крім того, атрибут href застосовується для вказівки розташування або шляху до CSS-файлу.

У наступному прикладі HTML-документа елемент <head> вказує на зовнішній стильовий файл.

<code data-language="html"><head> <link rel="stylesheet" href="main.css">
</head>

Щоб CSS відображався правильно, значення шляху атрибута href має прямо співпадати з тим, де збережений CSS-файл. У попередньому прикладі файл main.css зберігається в тому ж місці, що і HTML-файл, відомому також як коренева папка.>href має відповідно співвідноситися з цим шляхом. Наприклад, якщо наш файл main.css був збережений у підпапці з ім'ям stylesheets, то значенням атрибуту href буде stylesheets/main.css . Тут використовується коса риса (або слеш), щоб вказати переміщення в підпапку. На даний момент наші сторінки починають оживати, повільно, але вірно. Ми поки що не вникали в CSS занадто глибоко, але ви, можливо, помітили, що деякі елементи мають стилі, які ми не оголошували в нашому CSS. Це браузер нав'язує свої власні стилі для цих елементів. На щастя, ми можемо переписати ці стилі досить легко, що ми й зробимо далі за допомогою скидання CSS.

Використання скидання CSS

Кожен браузер має власні стилі за промовчанням для різних елементів. Те, як Google Chrome відображає заголовки, абзаци, списки тощо, може відрізнятися від того, як це робить Internet Explorer. Для забезпечення сумісності з різними браузерами стало широко використовуватися скидання CSS.

Скидання CSS бере всі основні елементи HTML із заданим стилем і забезпечує єдиний стиль для всіх браузерів. Ці скидання зазвичай включають видалення розмірів, відступів, полів або додаткові стилі, що знижують ці значення. Оскільки каскадування CSS працює зверху вниз (скоро про це дізнаєтеся) — наш скидання має бути в самому верху нашого стилю. Це гарантує, що ці стилі прочитаються першими і всі різні браузери стануть працювати із загальної точки відліку. Один з найпопулярніших від Еріка Мейєра, його скидання CSS адаптовано для включення нових елементів HTML5.

Якщо ви почуваєтеся трохи авантюристом, є також Normalize.css, створений Ніколасом Галлахером. Normalize.css фокусується не на використанні жорсткого скидання для всіх основних елементів, але натомість на встановленні загальних стилів для цих елементів. Це вимагає більш глибокого розуміння CSS, а також знання того, що ви хотіли б отримати від стилів. браузери відображають елементи по-своєму. Важливо визнати значення кросбраузерності та тестування. Сайти не повинні виглядати виключно однаково у всіх браузерах, але мають бути близькими. Які браузери ви хочете підтримувати і наскільки це рішення ви повинні будете зробити на основі того, що краще для вашого сайту. Існує кілька речей, на які слід звертати увагу при написанні CSS . Хорошою новиною є те, що це все під силу і потрібно трохи терпіння, щоб це освоїти. як ми можемо додати трохи CSS.

Всередині нашої папки styles-conference давайте створимо нову папку з іменем assets. У ній ми будемо зберігати всі ресурси для нашого веб-сайту, такі як стилі, зображення, відео та ін. Для наших стилів підемо далі і додамо ще одну папку stylesheets всередині папки assets.
Використовуючи текстовий редактор, створимо новий файл з ім'ям main.css і збережемо його в папці stylesheets, яку ми щойно створили.

Переглядаючи файл index.html у браузері ми можемо бачити, що елементи <h1> та <p> вже містять стиль за замовчуванням. Зокрема, у них заданий унікальний розмір шрифту та простір навколо них. Використовуючи скидання Еріка Мейєра, ми можемо пом'якшити ці стилі, що дозволить кожному з них починати з однакової бази. Для цього загляньте на його сайт, скопіюйте код і вставте його у верхній частині нашого файлу main .css.

/* 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, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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; }

Наш файл main.css починає приймати форму, тому підключимо його до файлу index.html. Відкрийте index.html у текстовому редакторі та додайте елемент <link> у <head>, відразу після елемента <title>.
Оскільки ми вказуємо на стилі через елемент <link> додайте атрибут rel зі значенням stylesheet.
Ми також включимо посилання на наш файл main.css використовуючи атрибут href. Пам'ятайте, наш файл main.css збережений у папці stylesheets, який знаходиться всередині папки assets. Таким чином, значення атрибуту href, який є шляхом до нашого файлу main.css, має бути assets/stylesheets/main.css .
```
<code data-language="html"><head>
<meta charset="utf-8">
<title>Styles Conference</title> <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
```

Час для перевірки нашої роботи та перегляду, як уживаються разом наші HTML та CSS. Відкриття файлу index.html (або оновлення сторінки, якщо вона вже відкрита) у браузері має показати трохи інший результат, ніж раніше.

Наш сайт Styles Conference з скиданням CSS

Мал. 1.04. Наш сайт Styles Conference зі скиданням CSS

Демонстрація та вихідний код

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

Перегляд сайту Styles Conference або Завантажити вихідний код

Резюме

Отже, все добре! Ми зробили кілька великих кроків у цьому уроці.

Подумати тільки, тепер ви знаєте основи HTML і CSS. Оскільки ми продовжимо і ви витратите більше часу на написання HTML і CSS, вам стане набагато комфортніше працювати з цими двома мовами .

Нагадаємо, що ми розглянули наступне:

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

Тепер давайте ближче розглянемо HTML і познайомимося трохи з семантикою.

Ресурси та посилання

Common HTML terms via Scripting Master
CSS Terms & Definitions via Impressive Webs
CSS Tools: Reset CSS via Eric Meyer
Normalize.css via Nicolas Gallagher
An Intro to HTML & CSS via Shay Howe

Див. також

<body>

Що таке HTML та CSS?

Теги

Атрибути

Демонстрація основних термінів HTML

Демонстрація структури HTML-документа

Самозакривні елементи

Валідація коду

На практиці

Властивості

Значення

Робота з селекторами

Селектори типу

Класи

Ідентифікатори

Додаткові селектори

Підключення CSS

Інші варіанти додавання CSS

Використання скидання CSS

Демонстрація та вихідний код

Резюме

Ресурси та посилання

Див. також