Main menu

  2. Головна
  3. Уроки HTML
  4. Шпаргалка по HTML

Мітки

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

Кольори html

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

Google Fonts

Шпаргалка по HTML

Post on 25 січня 2018
by Super User
in Уроки HTML

Зручно мати під рукою коди html, які використовуються найчастіше. У статті - шпаргалка html-тегів для початківців. 

 Шпаргалка по HTML
Створення html-файлу
Абзац, рядок
Заголовок
Букви, шрифти
Посилання
Горизональна лінія
Картинки

 

Створення html-файлу

Як створити основу html-файлу?

Потрібно написати код:

<!DOCTYPE HTML>

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

 

Що означають теги основи html-файлу?

<!DOCTYPE HTML> <!--тип файлу(документу) html -->

<html> <!--початок html-коду -->

<head> <!--початок голови -->

<title></title> <!--назва сайту -->

</head> <!--кінець голови -->

<body> <!--початок тіла -->

</body> <!--кінець тіла -->

</html> <!--кінець html-коду -->

 

Як написати назву сайту (сторінки)?

Назва сайту пишеться між тегами <title></title>:

<title>Назва сайту</title>

 

Як вказати колір фону сторінки?

<body bgcolor="КолірФону">

Колір фону можна вказувати трьома способами?

1) написати назву

<body bgcolor="DarkRed">

2) написати HEX-номер кольору з хештегом

<body bgcolor="#8B0000">

3) написати RGB-код

<body bgcolor="139, 0, 0">

Кольори html - див. посилання https://colorscheme.ru/html-colors.html

 

Абзац, рядок

Як зробити абзац?

<p>Текст абзацу</p>

 

Як зробити текст абзацу - по центру?

<p align="center">Текст абзацу</p>

 

Як зробити текст абзацу - вліво?

<p align="left">Текст абзацу</p>

 

Як зробити текст абзацу - вправо?

<p align="right">Текст абзацу</p>

 

Як зробити текст абзацу - по ширині сторінки?

<p align="justify">Текст абзацу</p>

 

Як зробити новий рядок?

<br>

 

Як зробити так, щоб новий рядок чи абзац починався ПІД картинкою (чи іншим елементом сторінки)?

<br clear="all">

 

Заголовок

Як вказати заголовок - найважливіший (першого рівня), найбільший?

<h1>Найважливіший і найбільший заголовок</h1>

 

Як вказати заголовок - менший за важливістю, ніж найважливіший (другого рівня)?

<h2>Менший за важливістю, ніж найважливіший заголовок</h2>

 

Як вказати заголовок - менший за важливістю (від третього до шостого рівня)?

<h3>Менший за важливістю 3 заголовок</h3>

<h4>Менший за важливістю 4 заголовок</h4>

<h5>Менший за важливістю 5 заголовок</h5>

<h6>Менший за важливістю 6 заголовок</h6>

 

Букви, шрифти (тег <font></font> застарілий для HTML5)

Як вказати колір букв (налаштувати шрифт)?

<font color="НазваКольору або номер з хештегом"></font>

Наприклад:

<font color="GreenYellow"></font>

<font color="#ADFF2F"></font>

Кольори html - див. посилання https://colorscheme.ru/html-colors.html

 

Як вказати розмір букв?

<font size="РозмірБукв"></font>

Розмір букв вказують чотирма способами:

1)у пікселях, наприклад "18px"

<font size="18px"></font>

2) числом від 1 до 7, наприклад "4"

<font size="4"></font>

3) відсотками, наприклад "80%"

<font size="80%"></font>

4) знаками + або - число або відсоток, наприклад "+2" або "-20%"

<font size="+2"></font>

<font size="-20%"></font>

 

Як вказати назву шрифта (вигляд букв)?

<font face="Назва шрифта">Текст, якому хочемо вказати вигляд букв</font>

Шрифт - це зовнішній вигляд букв. Є багато шрифтів. Назви основних і те, як овни виглядають, можна побачити у програмі "Microsoft Word".

Приклади:

<font face="Times New Roman"></font>

<font face="Arial"></font>

<font face="Courier New"></font>

<font face="Impact"></font>

<font face="Comic Sans MS"></font>

<font face="Garamond"></font>

 

 Як зробити товсті букви (напівжирні)?

<b> напівжирний </b>

<strong> напівжирний важливий </strong>

 

Як зробити нахилені букви?

<i> курсив (нахилений) </i>

<em> курсив (нахилений) важливого </em>

 

Як зробити підкреслені/закреслені букви?

<ins> підкреслює </ins>

<del> закреслює </del>

 

Як написати менший текст?

<small> менший текст </small>

 

Як вказати індекси?

<sub> верхній індекс </sub>

<sup> нижній індекс </sup>

 

Посилання

Як зробити посилання за допомогою слова (або кількох слів)?

<a href=″назва файлу або адреса веб-сторінки″>Слова або слова-посилання</a>

Наприклад, 

1) назва файлу 2.html, який знаходиться у тій же папці, що і файл, у якому робиться посилання:
<a href=″2.html">Слова або слова-посилання</a>

2) назва файлу 3.html, який знаходиться у папці doc1 на тому ж рівні, що і файл, у якому роблять посилання:
<a href=″doc1/3.html">Слова або слова-посилання</a>

3) назва файлу 4.html, який знаходиться у папці doc2 на один рівень вище, ніж файл, у якому роблять посилання:
<a href=″../doc2/4.html">Слова або слова-посилання</a>

4) адреса веб-сторінки http://google.com.ua:
<a href=″http://google.com.ua">Слова або слова-посилання</a>

Як зробити посилання за допомогою картинки?

<a href=″назва файлу або адреса веб-сторінки″><img src=″назва картинки або шлях до картинки/назва картинки″></a>

1) Наприклад, назва картинки 1.jpg:

<a href=″http://google.com.ua"><img src=″1.jpg"></a>

2) Наприклад, картинка знаходиться у папці images i назва картинки 1.jpg:

<a href=″http://google.com.ua"><img src=″images/1.jpg"></a>

3) Наприклад, картинка знаходиться у папці images2, яка знаходиться на рівень вище, i назва картинки 2.jpg:

<a href=″http://google.com.ua"><img src=″../images2/2.jpg"></a>

Як зробити посилання-зміст?

У тому місці сторінки, де планується створити зміст, пишеться тег-посилання

<a href="#назва якоря1 у тексті">Слово-зміст</a>

У тому місці сторінки, куди потрібно "перескочити" зі змісту, пишуть тег

<a name="назва якоря1 у тексті"></a>

Наприклад,

у змісті робиться перехід на частину, яка називається "Розділ 1." 

<a href="#rozdil">Розділ 1.</a>

тоді у тексті перед тим місцем, де починається Розділ 1, пишуть тег

<a name="rozdil"></a>

 

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

Як зробити горизонтальну лінію?

<hr>

 

Як вказати ширину горизонтальної лінії?

<hr width="ширина">

Ширина вказується такими способами:

1) відсотками, наприклад

<hr width="80%">

2) пікселями, наприклад

<hr width="600px">

 

Як вказати товщину горизональної лінії?

<hr size="товщина - будь яке число">

Наприклад,

<hr size="5">

 

Як вказати колір горизональної лінії?

<hr color="назва кольору або номер з хештегом">

Наприклад,

<hr color="red">

<hr color="#ccc">

 

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

Як вказати атрибут вирівнювання - по центру?

align="center"

 

Як вказати атрибут вирівнювання - вліво?

align="left"

 

Як вказати атрибут вирівнювання - вправо?

align="right"

 

Картинки

Як вставити картинку?

<img src=″назва картинки або шлях до картинки/назва картинки">

Наприклад:

1) назва картинки 1.jpg:

<img src=″1.jpg">

2) картинка знаходиться у папці images i назва картинки 1.jpg:

<img src=″images/1.jpg">

3) картинка знаходиться у папці images2, яка знаходиться на рівень вище, i назва картинки 2.jpg:

<img src=″../images2/2.jpg">

Як вказати ширину або висоту картинки (у пікселях або відсотках)?

Ширина:
<img src=″назва картинки або шлях до картинки/назва картинки" width="ширина в пікселях або відсотках">

Наприклад,

<img src=″1.jpg" width="300px">

<img src=″1.jpg" width="50%">

Висота:
<img src=″назва картинки або шлях до картинки/назва картинки" height="висота в пікселях або відсотках">

Наприклад,

<img src=″1.jpg" height="300px">

<img src=″1.jpg" height="50%">

 

Як вказати товщину рамка навколо картинки?

<img src=″назва картинки або шлях до картинки/назва картинки" border="товщина рамки">


Наприклад,
<img src=″1.jpg" border="5">

Як вказати колір рамки навколо картинки - з використанням стилю?

<img src=″назва картинки або шлях до картинки/назва картинки" border="товщина рамки" style="border-color:назва або код кольору;">

Наприклад,

<img src=″1.jpg" border="5" style="border-color:red;">

 

Як вказати вирівнювання картинки відносно тексту?

1) по верхньому краю тексту?

<img src=″назва картинки або шлях до картинки/назва картинки" align="top">

Наприклад,

<img src=″1.jpg" align="top">

2)по нижньому краю тексту?

<img src=″назва картинки або шлях до картинки/назва картинки" align="bottom">

Наприклад,

<img src=″1.jpg" align="bottom">

3)по-середині тексту?

<img src=″назва картинки або шлях до картинки/назва картинки" align="middle">

Наприклад,

<img src=″1.jpg" align="middle">

4)вліво від тексту?

<img src=″назва картинки або шлях до картинки/назва картинки" align="left">

Наприклад,

<img src=″1.jpg" align="left">

5)вправо від тексту?

<img src=″назва картинки або шлях до картинки/назва картинки" align="right">

Наприклад,

<img src=″1.jpg" align="right">

 

Як вирівняти картинку вліво або вправо, щоб текст обтікав її справа або зліва - за допомогою стилю?

1) картинка вліво, текст справа

<img src=″назва картинки або шлях до картинки/назва картинки" style="float:left;">

Наприклад,

<img src=″1.jpg" style="float:left;">

2) картинка вправо, текст зліва

<img src=″назва картинки або шлях до картинки/назва картинки" style="float:rigth;">

Наприклад,

<img src=″1.jpg" style="float:right;">

 

 

 

Список буде поповнюватись...

Свіже