software:development:ps_pycharm:dynamic_site:dynamic_site
Различия
Показаны различия между двумя версиями страницы.
Следующая версия | Предыдущая версия | ||
software:development:ps_pycharm:dynamic_site:dynamic_site [2023/08/08 19:33] – создано - внешнее изменение 127.0.0.1 | software:development:ps_pycharm:dynamic_site:dynamic_site [2023/08/08 20:34] (текущий) – [Создание каталога папок] vladpolskiy | ||
---|---|---|---|
Строка 1: | Строка 1: | ||
- | ======Руководство по HTML5====== | + | ======Создание динамического веб-сайта====== |
- | {{: | + | |
- | =====Основы HTML===== | ||
+ | =====Создание макета страницы===== | ||
+ | В любом блокноте набираем (или копируем) нижеприведенный код. | ||
<file html index.html> | <file html index.html> | ||
< | < | ||
Строка 14: | Строка 14: | ||
</ | </ | ||
< | < | ||
- | <div>Содержание документа HTML5</ | + | <div>Простейшая страница</ |
</ | </ | ||
</ | </ | ||
</ | </ | ||
- | + | \\ | |
- | | + | Я использую Notepad++ |
+ | \\ | ||
+ | {{: | ||
+ | \\ | ||
+ | Ниже приведено назначение элементов кода | ||
+ | \\ | ||
^ Структура HTML -документа | ^ Структура HTML -документа | ||
Строка 33: | Строка 38: | ||
| '' | | '' | ||
| '' | | '' | ||
- | |||
- | |||
- | |||
- | | ||
- | =====HTML-элементы1.2===== | ||
- | =====HTML-атрибуты1.3===== | ||
- | =====HTML-текст1.4===== | ||
- | Элементы для заголовков | ||
- | Элементы для форматирования текста | ||
- | Элементы для ввода «компьютерного» текста | ||
- | Элементы для оформления цитат и определений | ||
- | Абзацы, | ||
- | =====HTML-ссылки1.5===== | ||
- | Структура ссылки | ||
- | Абсолютный и относительный путь | ||
- | Якорь | ||
- | Как сделать изображение-ссылку | ||
- | Как сделать ссылку на телефонный номер, скайп или адрес электронной почты | ||
- | Атрибуты ссылок | ||
- | =====HTML-изображения1.6===== | ||
- | Элемент <img> | ||
- | Адрес изображения | ||
- | Размеры изображения | ||
- | Форматы графических файлов | ||
- | Элемент <map> | ||
- | Элемент < | ||
- | Пример создания карты-изображения | ||
- | =====HTML-таблицы1.7===== | ||
- | Как создать таблицу | ||
- | Как создать строки (ряды) таблицы | ||
- | Как сделать ячейку заголовка столбца таблицы | ||
- | Как сделать ячейку тела таблицы | ||
- | Как добавить подпись (заголовок) к таблице | ||
- | Группирование строк и столбцов таблицы < | ||
- | Группировка разделов таблицы < | ||
- | Как объединить ячейки таблицы | ||
- | Атрибуты элементов таблицы | ||
- | Пример создания таблицы | ||
- | =====HTML-списки1.8===== | ||
- | Маркированный список <ul> | ||
- | Нумерованный список <ol> | ||
- | Список определений <dl> | ||
- | Вложенный список | ||
- | Многоуровневый нумерованный список | ||
- | =====Спецсимволы HTML1.9===== | ||
- | Полезные знаки и символы | ||
- | Знаки пунктуации | ||
- | Стрелки | ||
- | Карточные масти | ||
- | Деньги | ||
- | Знаки зодиака | ||
- | =====HTML-генераторы1.10===== | ||
- | =====Семантические элементы HTML51.11===== | ||
- | =====Элемент документа1.11.1===== | ||
- | =====Метаданные документа1.11.2===== | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | =====Разделы документа1.11.3===== | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <nav> | ||
- | Элемент < | ||
- | Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> | ||
- | Элемент < | ||
- | Элемент < | ||
- | =====Группировка содержимого1.11.4===== | ||
- | Элемент <p> | ||
- | Элемент < | ||
- | Элемент <hr> | ||
- | Элемент <pre> | ||
- | Элемент < | ||
- | Элемент <ol> | ||
- | Элемент <ul> | ||
- | Элемент <li> | ||
- | Элемент <dl> | ||
- | Элемент <dt> | ||
- | Элемент <dd> | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <div> | ||
- | =====Семантика уровня текста1.11.5===== | ||
- | Элемент <a> | ||
- | Элемент <em> | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <s> | ||
- | Элемент < | ||
- | Элемент <q> | ||
- | Элемент <dfn> | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <rb> | ||
- | Элемент <rt> | ||
- | Элемент <rtc> | ||
- | Элемент <rp> | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <var> | ||
- | Элемент < | ||
- | Элемент <kbd> | ||
- | Элементы <sub> и <sup> | ||
- | Элемент <i> | ||
- | Элемент <b> | ||
- | Элемент <u> | ||
- | Элемент < | ||
- | Элемент <bdi> | ||
- | Элемент <bdo> | ||
- | Элемент < | ||
- | Элемент <br> | ||
- | Элемент <wbr> | ||
- | =====Правки документа1.11.6===== | ||
- | Элемент <ins> | ||
- | Элемент <del> | ||
- | Атрибуты, | ||
- | =====Встраиваемое содержимое1.11.7===== | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <img> | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <map> | ||
- | Элемент < | ||
- | =====Ссылки1.11.8===== | ||
- | Ссылки, | ||
- | Типы ссылок | ||
- | Примеры ссылок | ||
- | =====Табличные данные1.11.9===== | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <col> | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент <tr> | ||
- | Элемент <td> | ||
- | Элемент <th> | ||
- | =====Формы1.11.10===== | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Атрибут autocomplete | ||
- | =====Интерактивные элементы1.11.11===== | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Скрипты1.11.12 | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | Элемент < | ||
- | ====HTML5-аудио1.12==== | ||
- | Элемент < | ||
- | Аудио кодеки | ||
- | Альтернативные медиа-ресурсы < | ||
- | Добавление субтитров и заголовков < | ||
- | Стилизованный пример аудио плеера | ||
- | ====HTML5-видео1.13==== | ||
- | Элемент < | ||
- | Встраиваемый интерактивный контент < | ||
- | Видеокодеки | ||
- | Видеоконтейнеры | ||
- | Альтернативные медиа-ресурсы < | ||
- | Добавление субтитров и заголовков < | ||
- | Пример: | ||
- | Видеоконвертеры | ||
- | Необязательные теги HTML5-разметки1.14 | ||
- | =====HTML5-формы1.15===== | ||
- | Элемент < | ||
- | Группировка элементов формы < | ||
- | Создание полей формы < | ||
- | Текстовые поля ввода < | ||
- | Раскрывающийся список < | ||
- | Надписи к полям формы < | ||
- | Кнопки < | ||
- | Флажки и переключатели в формах | ||
- | =====Контентная модель HTML51.16===== | ||
- | Мета содержимое | ||
- | Потоковое содержимое | ||
- | Секционное содержимое | ||
- | Заголовочное содержимое | ||
- | Текстовое содержимое | ||
- | Встроенное содержимое | ||
- | Интерактивное содержимое | ||
- | Явное содержимое | ||
- | Элементы, | ||
- | Корневое секционное содержимое | ||
- | Прозрачная модель содержимого | ||
\\ | \\ | ||
+ | Сохранить -> Сохранить как -> index.html | ||
+ | \\ | ||
+ | {{: | ||
+ | \\ | ||
+ | правой кнопкой мыши открываем наш сохраненный файл с помощью браузера | ||
+ | \\ | ||
+ | {{: | ||
+ | \\ | ||
+ | Это и есть наш шаблон | ||
- | :!: Read the [[wiki:syntax# | + | =====Создание каталога папок===== |
+ | в папке куда сохранили файл создаем три папки | ||
+ | * js - для скриптов | ||
+ | * css - для стилей | ||
+ | * images - для картинок | ||
+ | {{:software:development:ps_pycharm:dynamic_site: | ||
| | ||
- | So to embed HTML you need to enclose the HTML with '' | ||
- | |||
- | < | ||
- | |||
software/development/ps_pycharm/dynamic_site/dynamic_site.1691512429.txt.gz · Последнее изменение: 2023/08/08 19:33 — 127.0.0.1