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

1. Що таке HTML і CSS?
2. Основні терміни HTML
3. елементи
4. Теги
5. атрибути
6. Демонстрація основних термінів HTML
7. Налаштування структури документа HTML
8. Демонстрація структури HTML-документа
9. самозакриваються елементи
10. валідація коду
11. На практиці
12. Основні терміни CSS
13. селектори
14. властивості
15. значення
16. Робота з селекторами
17. селектори типу
18. класи
19. ідентифікатори
20. додаткові селектори
21. підключення CSS
22. Інші варіанти додавання CSS
23. Використання скидання CSS
24. Кросбраузерність і тестування
25. на практике
26. Демонстрація и вихідний код
27. резюме
28. Ресурси и ПОСИЛАННЯ

Наша взаимовыгодная связь https://banwar.org/

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

Що таке HTML і CSS?

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

Ці дві мови - HTML і CSS незалежні один від одного і повинні такими і залишатися. CSS не повинен бути написаний всередині HTML-документа і навпаки. Як правило, HTML завжди буде представляти вміст, а CSS завжди буде визначати його оформлення.

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

Основні терміни HTML

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

елементи

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

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

<a>

Теги

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

Хто відкриває тег відзначає початок елемента. Він складається з символу <, потім йде ім'я елемента і завершується символом>; наприклад, <div>.

Закриває тег відзначає кінець елемента. Він складається з символу <з подальшою косою рисою і ім'ям елемента і завершується символом>; наприклад, </ div>.

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

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

<a> ... </a>

атрибути

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

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

<a href="http://shayhowe.com"> Shay Howe </a>

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

Даний код буде відображати текст «Shay Howe» на веб-сторінці і при натисканні на цей текст веде користувача на http://shayhowe.com. Елемент посилання оголошений за допомогою відкриваючого тега <a> і закриває тега </a> охоплюють текст, а також атрибута і значення адреси посилання оголошеної через 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-документи містять обов'язкову структуру, яка включає наступні декларації та елементи: <! 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 і створити для неї сайт протягом наступних уроків. Ось так!

1. Відкрийте текстовий редактор, створіть новий файл з ім'ям index.html і збережіть його в місце, яке не забудете. Я збираюся створити папку на робочому столі з ім'ям styles- conference і зберегти цей файл у ній; не соромтеся робити те ж саме.

2. У файлі index.html додамо структуру документа, в тому числі тип документа <! DOCTYPE html> і елементи <html>, <head> і <body>.

   <! DOCTYPE html> <html lang = "ru"> <head> </ head> <body> </ body> </ html>

3. Усередині елемента <head> додамо елементи <meta> і <title>. Елемент <meta> повинен включати в себе правильні атрибути charset і значення, в той час як елемент <title> повинен містити назву сторінки, скажімо «Styles Conference».

   <Head> <meta charset = "utf-8"> <title> Styles Conference </ title> </ head>

4. Усередині елемента <body> додамо елементи <h1> і <p>. Елемент <h1> повинен включати в себе бажаний заголовок - давайте знову скористаємося «Styles Conference», а елемент <p> повинен включати в себе простий абзац для представлення нашої конференції.

   <Body> <h1> Styles Conference </ h1> <p> Щороку найяскравіші веб-дизайнери та фронтенд-розробники збираються в Чикаго, щоб обговорити новітні технології. Приєднуйся до нас цим серпнем! </ P> </ body>

5. Настав час подивитися на те, що ми зробили! Знайдемо наш файл index.html (у мене він знаходиться в папці styles-conference на робочому столі). Двічі клацнувши по цьому файлу або перетягнувши його в браузер ми відкриємо його для перегляду.

   

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

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

Основні терміни CSS

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

селектори

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

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

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

p {...}

властивості

Як тільки елемент обраний, властивість визначає стилі, які будуть до нього застосовані. Імена властивостей йдуть після селектора, всередині фігурних дужок {} і безпосередньо перед двокрапкою. Існує безліч властивостей, які ми можемо використовувати, такі як 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, відступи допомагають тримати наш код організованим і зрозумілим.

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

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

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

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

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

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

CSS

div {...}

HTML

<Div> ... </ div> <div> ... </ div>

класи

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

Класи дозволяють застосовувати однакові стилі відразу до різних елементів, використовуючи те ж значення атрибута class для декількох елементів.

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

CSS

.awesome {...}

HTML

<Div class = "awesome"> ... </ div> <p class = "awesome"> ... </ p>

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

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

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

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

CSS

#shayhowe {...}

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> вказує на зовнішній стильовий файл.

<Head> <link rel = "stylesheet" href = "main.css"> </ head>

Щоб CSS відображався правильно, значення шляху атрибута href повинна безпосередньо збігатися з тим, де збережений CSS-файл. У попередньому прикладі файл main.css зберігається в тому ж місці, що і HTML-файл, відомому також як коренева папка.

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

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

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

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

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

Є купа різних скидів CSS доступних для застосування, у всіх них є свої сильні сторони. Один з найпопулярніших від Еріка Мейєра , Його скидання CSS адаптований для включення нових елементів HTML5.

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

Кросбраузерність і тестування

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

Існує кілька речей, на які слід звертати увагу при написанні CSS. Доброю новиною є те, що це все під силу і потрібно трохи терпіння щоб це освоїти.

на практике

Повернемося назад, де ми в останній раз зупинилися на нашому сайті конференції і подивимося, як ми можемо додати трохи CSS.

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

3. Переглядаючи файл 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, object, 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; }

4. Наш файл main.css починає набувати форми, так що підключимо його до файлу index.html. Відкрийте index.html в текстовому редакторі і додайте елемент <link> в <head>, відразу після елемента <title>.
5. Оскільки ми вказуємо на стилі через елемент <link> додайте атрибут rel зі значенням stylesheet.

6. Ми також включимо посилання на наш файл main.css використовуючи атрибут href. Пам'ятайте, наш файл main.css збережений в папці stylesheets, який знаходиться всередині папки assets. Таким чином, значення атрибута href, який є шляхом до нашого файлу main.css, має бути assets / stylesheets / main.css.

   <Head> <meta charset = "utf-8"> <title> Styles Conference </ title> <link rel = "stylesheet" href = "assets / stylesheets / main.css"> </ head>

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

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

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

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

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

резюме

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

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

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

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

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

Ресурси и ПОСИЛАННЯ

Автор и редактори

Автор: Шей Хоу

Остання зміна: 11.08.2018

Редактори: Влад Мержевіч