Программирование в HTML 程序

Загрузка

 

<!doctype html>

<html lang="ru">

<head>

<title>Судоку с ИИ</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Веб-приложение для игры и обучения детей и взрослых людей…">

<link href="style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="script.js"></script>

</head>

<body onLoad="starter()">

<div id="bar">

<div id="adj">

<span class="me0" id="men" onClick="menu()">&#9776;</span>

<h1>Судоку</h1>

</div>

<div id="clock"></div>

</div>

<div class="hid" id="menu"></div>

<div id="game" onClick="mof()">Загрузка…</div>

<div id="ds">

<h2>Описание приложения</h2>

<p><span class="btn">!</span> — запрос подсказки;</p>

<p><span class="btn">&#9658;</span> — новая игра;</p>

<p><span class="btn">&#10003;</span> — проверка решения.</p>

<p>Веб-приложение для игры и обучения детей и взрослых людей!</p>

</div>

<p id="cop">© Мазаяки</p>

</body>

</html>

HTML (HyperText Markup Language)

HTML — язык разметки гипертекста, с помощью которого можно создавать специальные инструкции для обработки контента веб-документов. Приведённый пример наглядно иллюстрирует типичную структуру HTML-документа. В начале документа принято указывать его тип. Указание подобных инструкций осуществляется с помощью специальных служебных слов, заключённых в угловые скобки (символы «меньше» и «больше»). Такую запись принято называть дескриптором или тегом. Чаще всего HTML-теги представлены в виде парного контейнера: открывающего и закрывающего тегов. Но некоторые теги могут быть одиночными, как специальный тег с объявлением типа документа <!doctype html>, отличием которого также является наличие восклицательного знака после первой скобки.

Следом за доктайпом указываются признак начала документа в виде открывающего тега <html>, внутри которого можно определить используемый в документе язык lang="ru", и признак конца документа в виде закрывающего тега </html> со слэшем (косой чертой). Между ними находятся теги <head>…</head>, предназначенные для служебных заголовков, и тело документа <body>…</body> для указания видимого пользователю контента. В разделе заголовков традиционно указывают название документа между тегами <title>…</title> и специальные мета-теги со служебными спецификациями. В теле документа располагается HTML-код c указанием обрабатываемого контента, представляющего предполагаемую ценность для пользователя.

В случаях, когда в документах оказывается много данных для обработки, допустимо добавлять скрытые комментарии с вспомогательными подсказками, облегчающими код-ревью (просмотр) или редактирование кода спустя несколько месяцев с момента разработки. HTML-комментарии пишутся подобно тегам в угловых скобках с добавлением двойных дефисов (минусов) по краям и восклицательного знака после первой скобки <!--…-->. Но для экономии времени и места длинные комментарии можно заменять говорящими идентификаторами (id) внутри HTML-тегов. Например, в рамках разработки игрового веб-приложения в HTML-коде можно использовать блок <div>…</div> с указанным атрибутом id="game". Такой id подобен комментарию и также способен указать на игровую тематику блока. Кроме того, id позволяют получить доступ к HTML-элементу и считать или изменить его содержимое с помощью сценариев JavaScript!

Популярные HTML-теги

<!-- … --> — конструкция для комментария.

<a>…</a> — контейнер для вставки гиперссылок или анкеров.

<b>…</b> — полужирное начертание текста.

<body>…</body> — тело документа.

<div>…</div> — блок (дивизион) для группировки нескольких элементов.

<!doctype> — тег с определением типа документа.

<form>…</form> — форма для ввода пользовательских данных.

<h1>…</h1> — заголовок первого уровня.

<h2>…</h2> — заголовок второго уровня.

<h3>…</h3> — заголовок третьего уровня.

<h4>…</h4> — заголовок четвёртого уровня.

<h5>…</h5> — заголовок пятого уровня.

<h6>…</h6> — заголовок шестого уровня.

<head>…</head> — блок для служебных заголовков документа.

<html>…</html> — открывающий и закрывающий теги документа.

<i>…</i> — курсивный текст.

<img> — тег для вставки изображения.

<input>…</input> — поле ввода.

<li>…</li> — элемент списка.

<link> — тег для подключения к документу внешних ресурсов.

<meta> — мета-тег для указания служебных параметров документа.

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

<option>…</option> — элемент выпадающего списка.

<p>…</p> — текстовый абзац.

<script>…</script> — тег для подключения скрипта.

<select>…</select> — выпадающий список.

<span>…</span> — контейнер для выделения небольшого участка текста.

<style>…</style> — тег для подключения CSS-правил оформления элементов документа.

<sub>…</sub> — нижний индекс.

<sup>…</sup> — верхний индекс.

<table>…</table> — контейнер для вставки таблицы.

<tbody>…</tbody> — тело таблицы.

<td>…</td> — ячейка таблицы.

<textarea>…</textarea> — многостроковое текстовое поле.

<title>…</title> — титульное название страницы.

<tr>…</tr> — строка таблицы.

<u>…</u> — подчёркнутый текст.

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

△

Навигационная карта

Ознакомиться с другими опциями IT-проекта вам поможет навигационная карта с подробным списком веб-сервисов и приложений! Если вы активно пользуетесь социальными медиа, не забудьте рассказать об этом проекте друзьям и подписаться на группы Мазаяки Проджект в ВКонтакте и Одноклассниках, чтобы быть в курсе важных обновлений! Сайонара-сайонара!

© –2024 Mazayaki Project