Main menu

  2. Головна
  3. Уроки HTML
  4. Урок 1. Базовий html-файл, заголовки, абзаци, вирівнювання

Мітки

Базовий html-код

Кольори html

Цвета HTML https://colorscheme.ru/html-colors.html 

Google Fonts

Урок 1. Базовий html-файл, заголовки, абзаци, вирівнювання

Post on 01 липня 2018
by Super User
in Уроки HTML
Основи HTML. Теги заголовків, абзаців, вирівнювання. Практика - створення першої веб-сторінки та сторінки улюбленої групи.

Щоб створювати веб-сторінки, потрібен такий набір програм (мінімальний):
1) текстовий редактор Notepad++ (безкоштовний) (або Блокнот Windows, або PSPad Editor, або будь-який інший);
2) графічний редактор Gimp (безкоштовний) (або будь-який інший);
3) броузер Chrome (або Firefox, Opera, Safari) - для перегляду Інтернет-сторінок.
 
1. Мова HTML - мова для створення файлів для мережі Інтернет - мова гіпертекстової розмітки тексту.
Що означає гіпер? Гіпер - великий.
Тобто ми створюємо для Інтернету не просто сторіночку з текстом, а з надзвичайно великим і складним текстом.
Наприклад, якщо запустити Хром і вказати у рядку пошуку Вікіпедія, можна перейти на головну сторінку сайту Вікіпедії.
Сайт - це велика кількість сторінок, при чому велика кількість гіпертекстових сторінок.
На сторінці можна побачити, що окремі слова, по-перше, іншого кольору, по-друге, мишка змінює вигляд. Це - гіпертекстові посилання, які і є головною особливістю сторінок для веб.
Якщо клікнути мишкою по посиланню, відкриється нова сторінка, потім ще інша і так далі. Тобто у нас текст не просто текст, а гіпер-текст.
Крім звичайного тексту і посилань, на сторінці є малюнки, меню (навігація) і можливість щось зробити - пошукати, увійти у систему, написати відгук тощо...
 
2. Все, що є на веб-сторінці, створено за допомогою html-коду, який зберігається у файлах з типом html.
Кожне слово коду - спеціальна команда, яка говорить броузерам, як показувати веб-стоірнку - де, що і якого вигляду на ній є.
Кожна команда мови html - це тег. Є парні і непарні теги.
Тег обрамлений кутовими дужками:
починається знаком менше < і закінчуєтся знаком більше > . Якщо тег парний, то закриваючий тег після знаку менше має слеш /.
Всередині тегу, крім його назви, можуть бути атрибути - тобто його властивості - із певними значеннями. Значення атрибуту пишеться у подвійних лапках після знака = після назви атрибуту.
 
3. Будова веб-коду.
 
4. Є такий код, який на всіх веб-сторінках. 
Цей код можна набрати і зберегти під іменем base.html - скачати
І щоразу, коли потрібно створити новий веб-файл, необхідно скопіювати цей базовий код у новий файл і вже потім працювати з ним.
<!DOCTYPE HTML>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>Назва сайту</title>
</head>
<body>
</body>
</html>
 
Кожен рядок має своє значення.
<!DOCTYPE HTML> <!--тип файлу(документу) html -->
<html lang="uk"> <!--початок html-коду, lang вказує мову - українську -->
<head> <!--початок голови -->
<meta charset="utf-8"> <!-- кодування сайту, ми завжди будемо вказувати utf-8, але є й інші - див. пункт меню Кодування програми Notepad++ -->
<title></title> <!--назва сайту -->
</head> <!--кінець голови -->
<body> <!--початок тіла -->
</body> <!--кінець тіла -->
</html> <!--кінець html-коду -->
 
Завдання 1.
1. Створити новий html-файл і зберегти його під іменем index1.html
2. Вказати назву сайту World of Tanks - комп'ютерна гра онлайн
 
5. Все, що має бути на веб-сторінці, розміщується між тегами <body></body>.
Наприклад, щоб вставити текст, потрібно поставити курсор після <body>, натиснути Enter (додається новий рядок) і тоді на новому рядку пишеться текст.
Наприклад:
набрати текст, зберегти файл і переглянути у броузері:
Це мій перший сайт.
 
Щоб написати текст у кількох рядках, потрібно вставити непарний тег <br>
Наприклад:
набрати текст без <br> і з ним, зберегти файл і переглянути у броузері:
1) Це перший рядок. Це другий рядок.
2) Це перший рядок. <br> Це другий рядок.
 
Завдання 2.
1. У файлі index1.html набрати текст так, щоб кожне речення починалось з нового рядка:
World of Tanks — онлайн-гра в реальному часі.
Жанр - аркадний танковий симулятор.
Тема - Друга світова війна.
Дата випуску: 12 серпня 2010 року.
 
ЗАГОЛОВКИ, АБЗАЦИ, АТРИБУТ ВИРІВНЮВАННЯ
 
6. Важливий текст - заголовки, слова, словосполучення, пишуть у тегах заголовків <h1>-<h6>.
Ці теги за замовчуванням мають певні налаштування - вони чорного кольору і різного розміру.
<h1> - заголовок першого рівня - найважливіший і найбільший.
<h6> - заголовок шостого рівня - найменш важливий і найменший.
Найчастіше використовують заголовки першого-третього рівнів.
Наприклад:
<h1>Заголовок 1 рівня</h1>
<h2>Заголовок 2 рівня</h2>
<h3>Заголовок 3 рівня</h3>
<h4>Заголовок 4 рівня</h4>
<h5>Заголовок 5 рівня</h5>
<h6>Заголовок 6 рівня</h6>
 
Атрибут заголовка align - це вирівнювання вліво "left", вправо "right", по центру "center", по ширині "justify".
Записується так:
<h1 align="right">Заголовок 1 рівня</h1>
 
Завдання 3. 
У файлі index1.html перед текстом із Завдання 2 написати заголовок 1 рівня World of Tanks і вирівняти його по центру.
 
Практика 1.
1) Створити новий файл на основі базового і зберегти його під іменем myname.html
2) Вказати заголовок сайту: Перша веб-сторінка
3) Вказати заголовок 1 рівня: Перший сайт Олени.
4) Вирівняти заголовок по центру.
 
7. Текст пишеться у парному тегу абзаца <p></p>. Якщо потрібно якось виділити текст всередині абзацу, використовують тег <span></span> 
Наприклад:
<p>Веб-сторінка — інформація у мережі World Wide Web (Всесвітня павутина), яку можна переглянути у веб-браузері.</p>
 
Атрибут абзаца align - це вирівнювання вліво "left", вправо "right", по центру "center", по ширині "justify".
Записується так:
<p align="right">Текст абзацу</p>
 
Завдання 4.
1. Обрамити тегами <p></p> текст із Завдання 2:
World of Tanks — онлайн-гра в реальному часі.
Жанр - аркадний танковий симулятор.
Тема - Друга світова війна.
Дата випуску: 12 серпня 2010 року.
2. Вирівняти абзац по центру.
 
Практика 3.
Скачати файл index-grupa0.html - скачати
Змінити файл index-grupa0.html згідно пунктів:
1) Зробити назву сайту Imagin Dragons - американська група
2) Заголовок Група "Imagin Dragons" зробити заголовком 1 рівня
3) Заголовок Група "Imagin Dragons" вирівняти по центру
4) Кожне речення тексту напишіть з нового абзацу.
5) Перше речення вирівняти вліво, друге - вправо, третє - по центру, четверте - по ширині.
 
Практика 4. Створення сторінки улюбленої групи.
1) Створити веб-сторінку на основі базової і зберегти її під іменем my-group.html
2) Вказати назву сайту як назву групи.
3) Вказати заголовок 1 рівня - назва групи.
4) Вирівняти заголовок по центру.
5) Знайти інформацію про групу у Вікіпедії чи Гугл, вставити цю інформацію на сторінку. Кожне речення - з нового абзацу.
6) В кінці з нового абзацу і з вирівнюванням вправо написати:
Автор - Олена. Дата - 02 липня 2018 року.
 
 
Відпочинок:

Свіже