Большинство браузеров имеют возможность проверки исходного HTML-кода просматриваемых страниц. При просмотре источника вы увидите несколько тегов HTML (язык гипертекстовой разметки), заключенных в угловые скобки ( <> ), с текстом.
Приведенные ниже действия используют теги HTML для создания простой веб-страницы. на этом этапе вы вводите обычный текст в файл в Блокнот, вносите несколько изменений, сохраняете файл и перезагружаете страницу в браузере для просмотра изменений.
Создание HTML-файла
- откройте Блокнот или любой простой текстовый редактор.
- В меню файл выберите создать.
- Введите следующие строки:
Top HTML Tags
HTML is swell. Life is good.
Here’s the big picture
-
Make me an unordered list.
- One programmer
- Ten SDKs
- Great Internet Apps
Вы должны приступить к работе. Если вы видите замечательную функцию на веб-странице, можно узнать, как она была создана, изучив исходный код HTML. Для создания простых и сложных страниц можно использовать редакторы HTML, такие как Microsoft Front Page.
Создание сайта на html. Часть 1
Ниже приведен полный исходный код HTML для создаваемого файла:
Полное описание тегов, атрибутов и расширений см. в спецификации HTML (HTML):
Источник: learn.microsoft.com
Собираем игру «Найди пару» на HTML и JS
В разных компаниях эта игра называется по-разному: «Мемори», «Найди пару» или «Мемо», но суть одна:
- Есть стопка карточек, где у каждой картинки есть такая же пара.
- Эти карточки раскладываются картинками вниз на игровом поле.
- Игроки по очереди переворачивают любые две карточки.
- Если картинки совпали — игрок забирает их себе и повторяет ход.
- Если не совпали — переворачивает их назад на то же место и ход переходит к другому игроку.
- Побеждает тот, кто соберёт больше пар.
Этим мы сегодня и будем заниматься.
Что делаем
Чтобы проект не превратился в огромный лонгрид, сделаем всё поэтапно. Сегодня будет самое начало:
- мы сделаем игровое поле;
- добавим карточки;
- и настроим механизм самой игры, чтобы их можно было переворачивать и угадывать пары.
Остальное сделаем в другой раз, этого уже будет достаточно для полноценной игры. Для реализации нам понадобятся стандартные для веба инструменты: HTML, CSS и JavaScript. Игра будет работать в браузере, на мобильниках тоже пойдёт, если высота экрана будет 500 пикселей или больше.
Готовим HTML-файл
Чтобы мы могли управлять всеми карточками, будем создавать их в скрипте — так мы сможем сразу добавить их в память и получить над ними полный контроль. Поэтому всё, что у нас будет на странице, — размеченные блоки для будущего контента.
Ещё мы сразу добавим модальное окно с поздравлениями — то, что увидит игрок после победы. Там будет два элемента — поздравительный текст и кнопка с предложением сыграть ещё. Мы всё это скроем с помощью стилей, а пока разместим всё на странице.
Учим HTML за 1 час! #От Профессионала | HD Remake
Также нам понадобится:
- Нормализатор CSS — он сделает так, чтобы страница выглядела одинаково во всех браузерах.
- Библиотека jQuery — с её помощью мы получим доступ ко всем элементам на странице. Можно и без неё, но с ней проще.
- Своя таблица стилей — её мы сделаем позже, пока просто подключим.
Создаём новый файл index.html и добавляем туда сразу весь код страницы:
Найди пару
У нас пока ничего нет из оформления, поэтому пока на странице мы увидим только текст и кнопку:
Настраиваем модальное окно
Раз у нас уже есть окно, его можно сразу настроить — добавить на страницу нужные стили и посмотреть, как будет выглядеть сообщение о победе.Создаём файл style.css и добавляем туда сначала общие настройки для всей страницы:
/* для всех элементов ограничиваем их размеры размерами блока */ * < box-sizing: border-box; >/* общие настройки страницы */ html, body < height: 100%; >/* ставим тёмный фон и растягиваем на всю высоту */ body
Теперь оформим модальное окно:
- Используем блок modal-overlay , чтобы затемнить всю страницу с её содержимым.
- Поверх него в блоке modal покажем наше окно с сообщением о победе.
- Отдельно в стилях настроим внешний вид текста и кнопки.
Добавим этот код в файл со стилями:
Окно готово, но на старте оно не нужно, поэтому скроем его: добавим display: none; в оба первых блока. Это скроет окно, но всё оформление останется — как только окно нам понадобится, мы уберём это свойство через скрипт.
Создаём карточки
Теперь нам понадобится скрипт. Создаём файл script.js и добавляем в него пустую функцию — вся работа будет происходить внутри неё:
(function()< >)();
Так как у нас журнал про технологии и программирование, для карточек мы будем использовать логотипы популярных языков, программ и технологий. Для этого сходим в Википедию, возьмём оттуда ссылки на логотипы и используем их для создания массива с карточками. Этот массив, как и всё остальное, положим внутрь нашей основной функции:
На экране пока ничего не появится — мы просто запомнили ссылки на картинки и сложили их в массив. Чтобы сформировать сами карточки, нам понадобится объект — переменная, внутри которой можно объявлять и вызывать разные методы.
Вот что будет происходить в этом объекте:
- Получаем доступ ко всем элементам на странице.
- Виртуально перемешиваем карточки.
- Для каждой карточки динамически создаём HTML-код — с его помощью мы увидим эту карточку на игровом поле.
- Получаем доступ ко всем карточкам.
- Устанавливаем стартовые значения разных свойств и переменных.
- Добавляем всем элементам свою реакцию на нажатие.
- Прописываем логику сравнения выбранной пары.
- Если пары закончились — показываем победное сообщение.
- Если нажали на перезапуск — запускаем игру сначала.
Получается, что за всю логику игры у нас отвечает один объект — мы настраиваем методы и обработку событий, а он дальше сам разбирается, что с этим делать и как реагировать в каждом случае. В этом сила объектно-ориентированного программирования: мы задаём общее поведение, а дальше компьютер решает всё сам.
Для «рубашки» наших карточек возьмём бесплатную фотографию какого-то кода из сервиса Unsplash.
// объявляем объект, внутри которого будет происходить основная механика игры var Memory = < // создаём карточку init: function(cards)< // получаем доступ к классам this.$game = $(«.game»); this.$modal = $(«.modal»); this.$overlay = $(«.modal-overlay»); this.$restartButton = $(«button.restart»); // собираем из карточек массив — игровое поле this.cardsArray = $.merge(cards, cards); // перемешиваем карточки this.shuffleCards(this.cardsArray); // и раскладываем их this.setup(); >, // как перемешиваются карточки shuffleCards: function(cardsArray)< // используем встроенный метод .shuffle this.$cards = $(this.shuffle(this.cardsArray)); >, // раскладываем карты setup: function()< // подготавливаем код с карточками на страницу this.html = this.buildHTML(); // добавляем код в блок с игрой this.$game.html(this.html); // получаем доступ к сформированным карточкам this.$memoryCards = $(«.card»); // на старте мы не ждём переворота второй карточки this.paused = false; // на старте у нас нет перевёрнутой первой карточки this.guess = null; // добавляем элементам на странице реакции на нажатия this.binding(); >, // как элементы будут реагировать на нажатия binding: function()< // обрабатываем нажатие на карточку this.$memoryCards.on(«click», this.cardClicked); // и нажатие на кнопку перезапуска игры this.$restartButton.on(«click», $.proxy(this.reset, this)); >, // что происходит при нажатии на карточку cardClicked: function() < // получаем текущее состояние родительской переменной var _ = Memory; // и получаем доступ к карточке, на которую нажали var $card = $(this); // если карточка уже не перевёрнута и мы не нажимаем на ту же самую карточку второй раз подряд if(!_.paused !$card.find(«.inside»).hasClass(«matched») !$card.find(«.inside»).hasClass(«picked»))< // переворачиваем её $card.find(«.inside»).addClass(«picked»); // если мы перевернули первую карточку if(!_.guess)< // то пока просто запоминаем её _.guess = $(this).attr(«data-id»); // если мы перевернули вторую и она совпадает с первой >else if(_.guess == $(this).attr(«data-id») !$(this).hasClass(«picked»)) < // оставляем обе на поле перевёрнутыми и показываем анимацию совпадения $(«.picked»).addClass(«matched»); // обнуляем первую карточку _.guess = null; // если вторая не совпадает с первой >else < // обнуляем первую карточку _.guess = null; // не ждём переворота второй карточки _.paused = true; // ждём полсекунды и переворачиваем всё обратно setTimeout(function()< $(«.picked»).removeClass(«picked»); Memory.paused = false; >, 600); > // если мы перевернули все карточки if($(«.matched»).length == $(«.card»).length) < // показываем победное сообщение _.win(); >> >, // показываем победное сообщение win: function()< // не ждём переворота карточек this.paused = true; // плавно показываем модальное окно с предложением сыграть ещё setTimeout(function()< Memory.showModal(); Memory.$game.fadeOut(); >, 1000); >, // показываем модальное окно showModal: function()< // плавно делаем блок с сообщением видимым this.$overlay.show(); this.$modal.fadeIn(«slow»); >, // прячем модальное окно hideModal: function()< this.$overlay.hide(); this.$modal.hide(); >, // перезапуск игры reset: function()< // прячем модальное окно с поздравлением this.hideModal(); // перемешиваем карточки this.shuffleCards(this.cardsArray); // раскладываем их на поле this.setup(); // показываем игровое поле this.$game.show(«slow»); >, // Тасование Фишера–Йетса — https://bost.ocks.org/mike/shuffle/ shuffle: function(array) < var counter = array.length, temp, index; while (counter >0) < index = Math.floor(Math.random() * counter); counter—; temp = array[counter]; array[counter] = array[index]; array[index] = temp; >return array; >, // код, как добавляются карточки на страницу buildHTML: function()< // сюда будем складывать HTML-код var frag = »; // перебираем все карточки подряд this.$cards.each(function(k, v)< // добавляем HTML-код для очередной карточки frag += ‘ ‘; >); // возвращаем собранный код return frag; > >;
Чтобы объект «ожил», добавим в самый конец нашей основной функции вызов первого метода объекта:
// запускаем игру
Memory.init(cards);
У нас появилось много всякого разного на странице, но выглядит хаотично, а всё потому, что мы не настроили стили для карточек. Сейчас будем исправлять.
Настраиваем стили карточек
Наша задача сейчас — разместить картинки по карточкам, а сами карточки расположить по сетке 6 × 4. Для этого мы сначала подготовим два блока — общий и блок с карточками:
/* стили основного блока */ .wrap < /* устанавливаем относительное позиционирование */ position: relative; /* высота элементов */ height: 100%; /* минимальная высота и отступы */ min-height: 500px; padding-bottom: 20px; >/* блок с игрой */ .game < /* добавляем трёхмерность для эффекта вращения */ transform-style: preserve-3d; perspective: 500px; /* пусть элементы занимают всё доступное им пространство */ min-height: 100%; height: 100%; >
Теперь сделаем сетку — добавим стили именно для карточек, где укажем их высоту и ширину. Ещё добавим медиазапрос, чтобы на небольших экранах карточки тоже выглядели хорошо:
У нас появилась сетка, но это всё ещё не похоже на нормальные карточки — всё налезает друг на друга и непонятно, как с этим работать. Чтобы это исправить, разделим карточки на лицевую и обратную стороны:
Карточки расположились по сетке, переворачиваются и возвращаются назад, если пара не совпала. Единственное, чего нам не хватает, — анимации совпадения. Сделаем так, чтобы при переворачивании пары фон у карточек из неё на мгновение становился зелёным:
Найди пару
Что дальше
Сейчас у нас всё работает, но как-то неопрятно:
- картинки не по центру;
- непонятно, как играть нескольким игрокам;
- нет подсчёта пар.
Исправим это в следующей версии. Подпишитесь, чтобы не пропустить продолжени.
Источник: thecode.media
HTML JavaScript
В современном мире верстальщику, который не знает хотя бы основ JavaScript, будет очень сложно. Совершенно не обязательно быть гуру JavaScript, но основами данного языка владеть необходимо.
JavaScript — клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере).
JavaScript используется для создания веб-приложений и динамических сайтов способных взаимодействовать с пользователем. В этом уроке вы получите лишь общее представление об этом мощном инструменте веб-дизайна, т.к. изучение JavaScript не входит в начальный курс обучения HTML.
Прежде всего нужно запомнить, что JavaScript является регистрозависимым языком. По этой причине следует запоминать не только названия свойств, методов или ключевых слов JavaScript, но и заглавными или строчными буквами они пишутся.
Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.
Для записи JavaScript-кода в HTML-документе используется тег . Сценарии часто помещаются внутри элемента . Это гарантирует, что сценарий готов к работе, когда он вызывается. Тем не менее, это не является обязательным требованием, и вы также можете поместить его в элемент , где он также будет прекрасно работать.
Вы также можете указать язык с помощью атрибута type (type=»text/javascript»). Тем не менее, когда вы используете язык JavaScript атрибут type можно опустить, т.к. JavaScript — значение атрибута type по умолчанию.
Синтаксис тега следующий:
Код JavaScript
В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:
Пример HTML:
alert(«Я — скрипт! Я сработал первым.»);
Запуск скрипта
В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:
Пример HTML:
Нажмите на кнопку ниже, чтобы заданный скрипт выполнился.
function showMessage()
Подключение внешнего скрипта
Если предполагается использовать один и тот же сценарий на многих веб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода веб-страницы.
JavaScript-код можно записать в отдельном файле с расширением .js , после чего подключать его к HTML-документу примерно так, как мы делали это с CSS-файлами.
Файл с расширением .js является обычными текстовым файлом, как и другие уже известные нам файлы с расширениями: .css и .html .
Создадим файл script.js и сохраним в нем небольшую функцию, созданную с помощью Javascript:
function Hello()
Для подключения JS-файлов также используется тег . Однако, в отличие от подключения CSS-файлов, на этот раз следует использовать другой синтаксис:
Теперь давайте подключим внешний файл script.js к нашему следующему HTML-документу:
Пример HTML:
Javascript External Script
Элемент
Тег используется для отображения альтернативного текста пользователям, браузер которых не поддерживает скрипты и для тех пользователей, которые отключили JavaScript в своих браузерах.
Пример HTML:
document.write(«Привет, мир!») Вы видите это сообщение, потому что Ваш браузер не поддерживает JavaScript.
Возможности JavaScript
Посмотрите несколько примеров того, что может делать JavaScript:
JavaScript может менять HTML контент:
function Hello()
JavaScript может менять значение HTML атрибута:
function dancer()
JavaScript может менять стили:
function setColor()
JavaScript может менять шрифты:
function setFont()
Задачи
Замена контента
Используя JavaScript замените текст внутри абзаца фразой «Привет, JavaScript!». Замена контента должна произойти при загрузке страницы. Подсказка Подсказка: Используйте метод document.getElementById(), чтобы найти элемент
с нужным id.
Затем добавьте свойство innerHTML, чтобы изменить текст.
Задача HTML:
Этот текст будет заменен.
// Пишите код здесь
Добавление фона
Используя JavaScript добавьте зеленый фон («green») к элементу . Подсказка Подсказка: Используйте метод document.getElementById(), чтобы найти элемент с нужным id.
Затем используйте свойство style.backgroundColor, чтобы добавить цвет фона.
Задача HTML:
// Пишите код здесь
Изменение размера шрифта
Используя JavaScript увеличте размер шрифта текста «Я люблю JavaScript!» до 45 пикселей. Подсказка Подсказка: Используйте метод document.getElementById(), чтобы найти элемент
с нужным id.
Затем используйте свойство style.fontSize, чтобы изменить размер шрифта.
Задача HTML:
Я люблю JavaScript!
// Пишите код здесь
Замена изображения
Используя JavaScript сделайте так, чтобы при клике по кнопке вместо изображения auto.jpg появилось изображение camel.jpg. Подсказка Подсказка: Используйте метод document.getElementById(), чтобы найти элемент с нужным id.
Затем используйте свойство src, чтобы указать путь к картинке.
Задача HTML:
function func() < // Пишите код здесь > 
Кликни меня!
Источник: www.wm-school.ru