Вітаю! Давай створимо сторінку рейтингом фільмів, книг чи спортсменів. У твоєму топ-5 навчимося використовувати заголовки та виділяти текст спеціальними тегами.
Мікрогра перед стартом
Сторінка-лайк про найкраще, найцікавіше для тебе
Сьогодні ми складемо рейтинг найкращих… фільмів! А може давайте краще рейтинг найкращих книжок!!! Ой… краще рейтинг блогерів! А може у вас є свої ідеї для рейтингу?
Обирайте самі, який рейтинг хочете скласти. Це буде рейтинг того, що ви спробували й вам сподобалось, тож час скласти про це сторінку і порекомендувати друзям. Вперед!
У прикладі буде рейтинг найкращих книжок, але ти можеш обрати для рейтингу й іншу тему. Або обрати книжки, але написати про ті, які любите читати саме ви!
Для кожної книги сьогодні ми додамо заголовок, анотацію і картинку. Анотація, це коротка розповідь про що книга (без спойлерів!!!), що зацікавити тих, хто ще її не читав.
Від слів до справи. Створюємо проєкт
1: Зайдіть на сайт replit.com і створіть новий проєкт, можна назвати його “Рейтинг” або “Топ”. Якщо не пам’ятаєте, як створювати проєкт, поверніться на початок першого уроку.
На нашій index.html сторінці видаліть все, що знаходиться між <body> та </body>, але залишіть самі ці теги.
Заголовки
Всього в html існує 6 заголовків. Найбільший з них <h1>, а найменший <h6>. На сторінці, де багато тексту часто треба виділити основну тему більшим заголовком і кілька підтем меншими заголовками.
2: Давай зробимо в тексті головний заголовок (назва рейтингу). І на початку і в кінці цієї назви поставимо тег найбільшого заголовка. Додай цей тег між <body> та </body>:
<h1>Найкращі книги</h1>Натисни Run, щоб побачити заголовок
3: Тепер додамо менші заголовки, які будуть представляти кожну книгу окремо. Ось так вийде разом з головним заголовком:
<h1>Найкращі книги</h1>
<h3>Брати Лев'яче серце</h3>
<h3>Три детективи</h3>
<h3>Поліанна</h3>Настав час додати текст
3: Тепер настав час тексту. Додайте до кожної книги невеличкий опис, про що вона. Опис можна написати самотужки або взяти в інтернеті.
4: Настала черга картинок! Знайдіть в google картинку, що найбільше підходить вам. Як це зробити? Спочатку введіть в пошуку те, що шукаєте. Далі переключіться на Зображення
Оберіть зображення, яке найбільше підходить і натисніть на нього так, щоб воно відкрилося ще раз справа.
На зображенні справа натисніть правою кнопкою миші й оберіть “Копіювати адресу зображення” (Copy image address).
Далі поверніть на свою сторінку і переставте курсор в тем місце, де має з’явитися зображення. Напишіть тег для зображення і в поле src вставте те, що скопіювали.
<img src="https://kinderlibrary.files.wordpress.com/2021/03/26693-1.jpg" alt="Поліанна">Буває так, що коли вставляєте посилання, то замість пари рядків вставляється якийсь код з набором літер на кілька сторінок. Це можу спрацювати, але буде дуже незручно на сторінці. Тому просто замініть зображення.
Також деякі зображення мають розширення webp і не будуть відображатися на сторінці.
Але таких небагато, тому просто пошукайте якусь іншу картинку.
alt – це опис картинки. Якщо зображення має криве посилання і не відображається, то має відобразитися опис. Тому він дуже важливий. Ви по ньому краще зрозумієте, де проблема.
5: Інколи зображення встановлюється занадто великим для нашої сторінки. Тут допоможе встановити висоту або ширину зображення
<img src="https://kinderlibrary.files.wordpress.com/2021/03/26693-1.jpg" alt="Поліанна" height="130px" width="200px">
Відредагуйте розміри під ваше зображення.
6: Поставте зображення для кожної книги чи фільму, які є в рейтингу.
Як додати колір у заголовки та текст?
Колір в HTML можна задавати за його назвою (red, green,…) або кодом (це решітка і код з 6-ти символів, наприклад: #FFA500). Назви існують тільки для деяких кольорів, а тому, щоб обрати насправді будь-який колір, треба знайти його код.
Replit вміє досить непогано підказувати кольори й відкривати палітру. Але також можна обрати й на сторонніх сайтах https://wtools.io/uk/color-picker
7: Перефарбуйте заголовки та текст в інші кольори:
<h1 style="color:green">Мій кольоровий заголовок</h1>
<p style="color:#ffFF00">А це - кольоровий текст.. </p>
Круті програмісти завжди прагнуть вдосконалюватись і робити все складніші задачі, так вони вчаться. З кожною новою програмою чи сайтом вони стають кращими. Тому сміливо став перед собою нові виклики, спробуй додати на сторінку якнайбільше цікавих речей. У тебе все вийде!
Level Up
7: Розфарбуйте заголовки або текст:
Для того, щоб розфарбувати текст, треба трохи змінити наші теги. Нижче наведено приклад, як можна розфарбувати абзац або заголовок (жирним виділила те, що додала)
<h1 style="color:green">Мій кольоровий заголовок</h1>
<p style="color:#ffFF00">А це - кольоровий текст.. </p>Кольори можна задавати англійською назвою (red, green, … ) або # і 6-ма символами (цифрами, буквами A, B, C, D, E, F)
Розфарбуй хоча б два заголовки і два абзаци на своїй сторінці.
8: Тепер попрацюємо з текстом.
Ось кілька тегів для роботи з текстом. Використайте, якомога більше з них. Ці теги також потрібно відкрити й закрити:
| <b> виділяє текст жирним </b> <del> <i> виділяє текст курсивом </i> <small> робить текст трохи меншим за розміром, ніж навколишній</small> <sub> поміщає текст під рядком HO<sub>2</sub> <sup> поміщає текст над рядком y=e<sup>x</sup> <u> підкреслює текст </u> <mark> виділяє текст кольором, надаючи йому відтінок важливості </mark> <p align = “center”> Текст (Вирівнювання по центру.) </ p> <p align = “left”> Текст(Вирівнювання по лівому краю.) </ p> <p align = “right”> Текст (Вирівнювання по правому краю.) </ p> <p align = “justify”> Текст (Вирівнювання по ширині) </ p> |
