Различия

Показаны различия между двумя версиями страницы.

--- 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======
+======Создание динамического веб-сайта======
-{{:software:development:ps_pycharm:html5:html_original_logo_icon.png?100|}}
-=====Основы HTML=====
+=====Создание макета страницы=====
+В любом блокноте набираем (или копируем) нижеприведенный код.
 <file html index.html>
 <!DOCTYPE html>
@@ Строка 14: / Строка 14: @@
     </head>
     <body>
-        <div>Содержание документа HTML5</div>
+        <div>Простейшая страница</div>
     </body>
 </html>
 </file>
+\\
+Я использую Notepad++
+\\
+{{:software:development:ps_pycharm:dynamic_site:dynamic_site_10.png?|}}
+\\
+Ниже приведено назначение элементов кода
+\\
 ^                      Структура HTML -документа     ^^
@@ Строка 33: / Строка 38: @@
 | ''%% <body> %%'' |Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body> |
 | ''%% <div> %%'' |Блок, предназначенный для группировки контента. |
-=====HTML-элементы1.2=====
-=====HTML-атрибуты1.3=====
-=====HTML-текст1.4=====
-Элементы для заголовков
-Элементы для форматирования текста
-Элементы для ввода «компьютерного» текста
-Элементы для оформления цитат и определений
-Абзацы, средства переноса текста
-=====HTML-ссылки1.5=====
-Структура ссылки
-Абсолютный и относительный путь
-Якорь
-Как сделать изображение-ссылку
-Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
-Атрибуты ссылок
-=====HTML-изображения1.6=====
-Элемент <img>
-Адрес изображения
-Размеры изображения
-Форматы графических файлов
-Элемент <map>
-Элемент <area>
-Пример создания карты-изображения
-=====HTML-таблицы1.7=====
-Как создать таблицу
-Как создать строки (ряды) таблицы
-Как сделать ячейку заголовка столбца таблицы
-Как сделать ячейку тела таблицы
-Как добавить подпись (заголовок) к таблице
-Группирование строк и столбцов таблицы <colgroup> и <col>
-Группировка разделов таблицы <thead>, <tbody> и <tfoot>
-Как объединить ячейки таблицы
-Атрибуты элементов таблицы
-Пример создания таблицы
-=====HTML-списки1.8=====
-Маркированный список <ul>
-Нумерованный список <ol>
-Список определений <dl>
-Вложенный список
-Многоуровневый нумерованный список
-=====Спецсимволы HTML1.9=====
-Полезные знаки и символы
-Знаки пунктуации
-Стрелки
-Карточные масти
-Деньги
-Знаки зодиака
-=====HTML-генераторы1.10=====
-=====Семантические элементы HTML51.11=====
-=====Элемент документа1.11.1=====
-=====Метаданные документа1.11.2=====
-Элемент <head>
-Элемент <title>
-Элемент <base>
-Элемент <link>
-Элемент <meta>
-Элемент <style>
-=====Разделы документа1.11.3=====
-Элемент <body>
-Элемент <article>
-Элемент <section>
-Элемент <nav>
-Элемент <aside>
-Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
-Элемент <header>
-Элемент <footer>
-=====Группировка содержимого1.11.4=====
-Элемент <p>
-Элемент <address>
-Элемент <hr>
-Элемент <pre>
-Элемент <blockquote>
-Элемент <ol>
-Элемент <ul>
-Элемент <li>
-Элемент <dl>
-Элемент <dt>
-Элемент <dd>
-Элемент <figure>
-Элемент <figcaption>
-Элемент <main>
-Элемент <div>
-=====Семантика уровня текста1.11.5=====
-Элемент <a>
-Элемент <em>
-Элемент <strong>
-Элемент <small>
-Элемент <s>
-Элемент <cite>
-Элемент <q>
-Элемент <dfn>
-Элемент <abbr>
-Элемент <ruby>
-Элемент <rb>
-Элемент <rt>
-Элемент <rtc>
-Элемент <rp>
-Элемент <data>
-Элемент <time>
-Элемент <code>
-Элемент <var>
-Элемент <samp>
-Элемент <kbd>
-Элементы <sub> и <sup>
-Элемент <i>
-Элемент <b>
-Элемент <u>
-Элемент <mark>
-Элемент <bdi>
-Элемент <bdo>
-Элемент <span>
-Элемент <br>
-Элемент <wbr>
-=====Правки документа1.11.6=====
-Элемент <ins>
-Элемент <del>
-Атрибуты, общие для элементов <ins> и <del>
-=====Встраиваемое содержимое1.11.7=====
-Элемент <picture>
-Элемент <source>
-Элемент <img>
-Элемент <iframe>
-Элемент <embed>
-Элемент <object>
-Элемент <param>
-Элемент <video>
-Элемент <audio>
-Элемент <track>
-Элемент <map>
-Элемент <area>
-=====Ссылки1.11.8=====
-Ссылки, созданные элементами <a> и <area>
-Типы ссылок
-Примеры ссылок
-=====Табличные данные1.11.9=====
-Элемент <table>
-Элемент <caption>
-Элемент <colgroup>
-Элемент <col>
-Элемент <tbody>
-Элемент <thead>
-Элемент <tfoot>
-Элемент <tr>
-Элемент <td>
-Элемент <th>
-=====Формы1.11.10=====
-Элемент <form>
-Элемент <label>
-Элемент <input>
-Элемент <button>
-Элемент <select>
-Элемент <datalist>
-Элемент <optgroup>
-Элемент <option>
-Элемент <textarea>
-Элемент <output>
-Элемент <progress>
-Элемент <meter>
-Элемент <fieldset>
-Элемент <legend>
-Атрибут autocomplete
-=====Интерактивные элементы1.11.11=====
-Элемент <details>
-Элемент <summary>
-Элемент <dialog>
-Скрипты1.11.12
-Элемент <script>
-Элемент <noscript>
-Элемент <template>
-Элемент <slot>
-Элемент <canvas>
-====HTML5-аудио1.12====
-Элемент <audio>
-Аудио кодеки
-Альтернативные медиа-ресурсы <source>
-Добавление субтитров и заголовков <track>
-Стилизованный пример аудио плеера
-====HTML5-видео1.13====
-Элемент <video>
-Встраиваемый интерактивный контент <embed>
-Видеокодеки
-Видеоконтейнеры
-Альтернативные медиа-ресурсы <source>
-Добавление субтитров и заголовков <track>
-Пример: размещаем видео на сайте
-Видеоконвертеры
-Необязательные теги HTML5-разметки1.14
-=====HTML5-формы1.15=====
-Элемент <form>
-Группировка элементов формы <fieldset>
-Создание полей формы <input>
-Текстовые поля ввода <textarea>
-Раскрывающийся список <select>
-Надписи к полям формы <label>
-Кнопки <button>
-Флажки и переключатели в формах
-=====Контентная модель HTML51.16=====
-Мета содержимое
-Потоковое содержимое
-Секционное содержимое
-Заголовочное содержимое
-Текстовое содержимое
-Встроенное содержимое
-Интерактивное содержимое
-Явное содержимое
-Элементы, поддерживающие скрипт
-Корневое секционное содержимое
-Прозрачная модель содержимого
 \\
+Сохранить -> Сохранить как -> index.html
+\\
+{{:software:development:ps_pycharm:dynamic_site:dynamic_site_11.png?|}}
+\\
+правой кнопкой мыши открываем наш сохраненный файл с помощью браузера
+\\
+{{:software:development:ps_pycharm:dynamic_site:dynamic_site_12.png?|}}
+\\
+Это и есть наш шаблон
-:!: Read the [[wiki:syntax#embedding_html_and_php|syntax]] page((This section has been removed from the page and is only accessible through the page history.)) again: //"You can embed raw HTML code into your documents by using the HTML tags."//
+=====Создание каталога папок=====
+в папке куда сохранили файл создаем три папки
+  * js - для скриптов
+  * css - для стилей
+  * images - для картинок
+{{:software:development:ps_pycharm:dynamic_site:dynamic_site_20.png?|}}
-So to embed HTML you need to enclose the HTML with ''%%<html></html>%%'' (for inline HTML) or ''%%<HTML></HTML>%%'' (for block HTML). A little example: <del>The [[:wiki:syntax#embedding_html_and_php|above syntax page]] has examples of what block vs inline look like.</del>((This section has been removed from the page and is only accessible through the page history.))
-  <html><strong>This is my bold text</strong></html>