1 of 11

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

з використанням стилів

Манько Н.М.�Яворівський ЗЗСО І-ІІІ ступенів №2

2 of 11

З чого все розпочалось?

HTML (Hypertext Markup Language) - мова розмітки гіпертекстових документів використовується для створення веб-сторінок і веб-додатків.

​

Наприкінці 1991 року Тім Бернерс-Лі опублікував перший загальнодоступний опис мови розмітки HTML, відомий як документ «HTML-теги».

В ньому були описані 20 елементів відносно простої схеми розмітки HTML.

​

3 of 11

Залогіньтеся в середовищі Trinket https://trinket.io/home

​

Створіть новий проєкт і дайте йому назву

​

pr1

4 of 11

Шаблон веб-сторінки

  1. Cтворіть папку Sites
  2. В редакторі Notepad++ наберіть код шаблону веб-сторінки та збережіть його з іменем шаблон.html в Sites
  3. Збережіть цю ж сторінку (шаблон) з іменем index.html в Sites

​

У вікні редактора наберіть стандартний код розмітки

5 of 11

Редагуємо код тіла (<body>) сторінки index.html

6 of 11

Основні теги для форматування сторінки

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<h1> текст </h1>

Заголовки від першого до шостого рівня. Використовуються пошуковими системами

<b> текст </b>

<strong> текст </strong>

Напівжирний шрифт

Напівжирний шрифт і ключове слово

<i> текст </i>

<em> текст </em>

Курсивний шрифт

​

Курсивний шрифт і ключове слово

<u> текст </u>

Підкреслений шрифт

<p>

текст

</p>

Параграф. Початок нового абзацу.

<br>

Брейк. Перехід у новий рядок.

<hr>

Горизонтальна лінія

7 of 11

Прописуємо код стилів (style) у голові index.html

8 of 11

Дописуємо код стилів у голові index.html

9 of 11

Довідник стилів

Назва

Насиченість

Розмір шрифту

Стиль

font-family: Times New Roman, sans-serif;

· font-weight: bold;

· font-weight: bolder;

· font-weight: lighter;

· font-weight: 600;

font-size: 300%;

font-size: 120px;· font-size: 400pt;

font-style: normal;

font-style: italic

font-style: oblique;

Текстовий ефект

Вирівнювання

Відступ першого рядка

Інтервал між рядками

text-decoration: underline;

text-decoration: none;· text-decoration:line-through;

text-align: center;

text-align: left;

text-align: right;

text-align: justify;

​

text-indent: 50pt;

​

line-height: 50%;

Колір тла або лінії

backgound-color: red;

Довжина лінії

width: 400px;

Висота лінії

height: 20px;

10 of 11

Самостійна робота. Створіть веб-сторінку згідно зразка

11 of 11

Домашнє завдання

Використовуючи стилі, забезпечте створення сторінки згідно зразка