1 of 16

Основы HTML

Павел Радкевич

2 of 16

Повестка дня

  1. Конструкции HTML
  2. Структура HTML-документа
  3. Гиперссылки. Навигация по сайту
  4. Форматирование текста. Списки. Таблицы

3 of 16

Конструкции HTML

  1. Doctype <!DOCTYPE html>
  2. теги <p>абзац</p>
  3. атрибуты <a href=”page2.html”>Страница 2</a>
  4. мнемоники &nbsp; &lt;

4 of 16

Универсальные атрибуты

<p id=”about”></p>

<p class=”about”></p>

<p style=”color:blue”></p>

​

5 of 16

Структура HTML-документа

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

​

</body>

</html>

​

​

6 of 16

Гиперссылки

<a href="URL">текст ссылки</a>

Виды URL:

  1. абсолютный: https://github.com/about
  2. относительный: /about
  3. якорный: #about

Подробнее: https://webref.ru/layout/html5-css3/link

7 of 16

Пример ссылок

============ файл index.html =================

...� <a href="link.html">Ссылка на страницу link.html</a>� <a href="files/file.zip">Ссылка на файл file.zip, лежащий в папке files</a>� <a href="http://webref.ru">Ссылка на сайт webref.ru</а>�...

8 of 16

Базовые теги

<div>некоторый произвольный блок</div>

​

<p>параграф</p>

​

9 of 16

Форматирование текста

<b>полужирный</b>

<i>курсив</i>

<u>подчёркнутый</u>

<s>зачеркнутый</s>

<sub>подстрочный</sub>

<sup>надстрочный</sup>

<time>09:25</time> HTML5 tag

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics

10 of 16

Медиа элементы

​

<img src=”logo.png”>

​

<audio controls src="/files/807702404.mp3"></audio>

​

<video controls src=”/files/trailer.mp4”></video>

11 of 16

Структурное оформление страницы

<header>Верхний блок страницы</header>

<main>Основная часть страницы - содержание</main>

<footer>Нижний блок страницы</footer>

​

<article>Статья, пост на форуме, описание продукта, ...</article>

<nav>Блок навигации (меню)</nav>

<section>Раздел страницы</section>

<h1>Заголовок 1-го уровня</h1>

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning

12 of 16

Структурное оформление текста

<ul><li>маркированный список</li></ul>

<ol><li>нумерованный список</li></ol>

<pre>не оформляемый никак текст</pre>

​

<blockquote>цитата</blockquote> HTML5 tag

<figure> HTML5 tag

<img src=”some_image.jpg”>

<figcaption>Описание того, что есть на изображении</figcaption>

</figure>

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content

13 of 16

Таблицы. Общая структура

<table>

<caption></caption>

<thead>

...

</thead>

<tbody>

...

</tbody>

<tfoot>

...

</tfoot>

</table>

​

14 of 16

Таблицы. Строки и ячейки

<table border='2' cellspacing='0' cellpadding='10'>

<tbody>

<tr>

<td>1 строка, 1 столбец</td>

<td>1 строка, 2 столбец</td>

</tr>

<tr>

<td>2 строка, 1 столбец</td>

<td>2 строка, 2 столбец</td>

</tr>

</tbody>

</table>

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content

​

15 of 16

Внеклассное чтение

  1. https://www.w3schools.com/html/html_elements.asp
  2. Виды и атрибуты ссылок:

https://webref.ru/layout/html5-css3/link

​

16 of 16

Практика

GitHub

организация AdukarIT

репозиторий _Tasks_