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

2 Заголовки та текст

Сторінка-лайк про найкраще, найцікавіше для тебе

Мікрогра перед стартом

Топ найкращих

Сьогодні ми складемо рейтинг найкращих… фільмів! А може давайте краще рейтинг найкращих книжок!!! Ой… краще рейтинг блогерів! А може у вас є свої ідеї для рейтингу?

Обирайте самі, який рейтинг хочете скласти. Це буде рейтинг того, що ви спробували й вам сподобалось, тож час скласти про це сторінку і порекомендувати друзям. Вперед!

У прикладі буде рейтинг найкращих книжок, але ти можеш обрати для рейтингу й іншу тему. Або обрати книжки, але написати про ті, які любите читати саме ви!

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

Від слів до справи. Створюємо проєкт

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> закреслює текст </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>
Робота з текстом

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *