15 февр. 2015 г.

CodePen: как показать свой код другим людям

Очень часто требуется показать свой код другому человеку. Есть очень удобный инструмент, позволяющий показывать код с помощью всего лишь одной ссылки. Это http://codepen.io. Предпреждаю, в нем многие примеры из этого учебника не работают . Кроме того, новичкам может быть непонятно как соединяются вместе HTML, CSS и JavaScript (там это скрыто).

Зайдите на сайт http://codepen.io и нажмите кнопку сверху "New Pen" (создает новый пустой шаблон для вставки кода).

Загрузится новая страница с тремя полями для кода: HTML, CSS и JS (JavaScript).

Введите в поле HTML такой код:

<button class="button" onclick="Kuku()">Нажми меня</button>

Введите в поле CSS:

.button { font-size: 30px }

Введите в JS:

function Kuku(){
  alert('ku ku');
}

В нижней части страницы будет появляться результат соединения введенных кодов.
Нажмите на созданную кнопку - появится сообщение "ku ku".

Теперь эту страничку можно показать кому угодно, скопируйте адрес сайта и отправьте:
http://codepen.io/anon/pen/MYQBew





Комментариев нет:

HTML шпаргалка

HTML — это язык кодирования внешнего вида элементов. В HTML-файлах собираются вместе HTML-теги (стандартные элементы), CSS-стили (нестандартное формление тегов) и JavaScript-программы (сценарии и логика поведения элементов). HTML-файлы открываются с помощью браузера (программы, в которой заходят в интернет).

HTML-теги могут содержать в себе другие теги. Отступы не важны, но очень желательны для того, чтобы сразу видеть вложенность. Чем глубже расположен элемент, тем больше перед тегом отступов.

<!-- так оформляются комментарии, пояснения кода -->
 

Самые популярные HTML-теги:

<html> <!-- самый главный контейнер -->
 
<head><!-- невидимый контейнер, в котором хранится служебная информация. Например, кодировка документа -->
 
 <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'><!-- указание кодировки -->
 
 <link rel="stylesheet" href="style.css"><!-- подключение файла стилей -->
 
 <script src="script.js"></script><!-- подключение программы -->
 
</head><!-- закрывающий тег head -->
 
<body><!-- главный контейнер для видимых элементов -->
 
  <div>Тра ля ля</div><!-- блочный элемент, выводится отдельным блоком с новой строки -->

  <span>Парам пам</span><!-- строчный элемент, такие элементы выводятся друг за другом слева направо -->
  <span>Тыдыщ</span> 
  <span>Бабах</span> 


<img src="картинка.jpg"><!-- вставка картинки, закрывающий тег не нужен -->
 
<button>Нажми меня</button><!-- кнопка -->
 
</body><!-- закрывающий тег body -->
 
</html><!-- закрывающий тег html -->
Комментариев нет:
Подписаться на: Сообщения (Atom)